/* ZAFCON - pagina de ingreso: tarjeta de cristal centrada sobre la foto del edificio (body.login-cristal).
   Colores tomados del menu de la aplicacion (#14233a / #1b2f4d) y del logo (azul noche, verde oliva, verde petroleo). */
:root {
    --noche: #0b1626;
    --marino: #14233a;
    --marino-2: #1b2f4d;
    --cielo: #3aa0ff;
    --cian: #5cd0f0;
    --esmeralda: #1fbf8f;
    --oliva: #6f7f45;
    --tinta: #1d2b3a;
    --gris: #5b6b7c;
    --papel: #f4f7fb;
    --borde: #dfe6ef;
    --error: #ff6b6b;
    --curva: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body.login {
    margin: 0;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    color: #fff;
    background: var(--noche);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ---------- Fondo: foto del edificio, velo marino, luces y particulas ---------- */
.fondo { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
.fondo .foto {
    position: absolute; inset: -40px;
    background: url(../../images/fondologin_edificio.jpg) center / cover no-repeat;
    filter: blur(2px) saturate(1.1);
    transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(1.06);
    transition: transform .9s var(--curva);
    animation: fondo-entra 1.6s var(--curva) both;
}
.fondo .velo {
    position: absolute; inset: 0;
    background:
        radial-gradient(900px 520px at 85% 0%, rgba(58, 160, 255, .28), transparent 62%),
        radial-gradient(700px 480px at 0% 100%, rgba(31, 191, 143, .20), transparent 60%),
        linear-gradient(160deg, rgba(11, 22, 38, .90) 0%, rgba(20, 35, 58, .78) 50%, rgba(27, 47, 77, .66) 100%);
}
.fondo .luz { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; animation: flotar 16s ease-in-out infinite; }
.fondo .luz.a { width: 380px; height: 380px; background: #2b7fd6; top: -120px; right: 8%; }
.fondo .luz.b { width: 300px; height: 300px; background: #1a9c78; bottom: -110px; left: 6%; animation-delay: -6s; }
.fondo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Entradas escalonadas: cada pieza lleva --i (orden) ---------- */
.aparece { opacity: 0; animation: subir .8s var(--curva) both; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
@keyframes subir { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fondo-entra { from { opacity: 0; filter: blur(14px) saturate(1.1); } to { opacity: 1; filter: blur(2px) saturate(1.1); } }
@keyframes flotar { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -26px); } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes sacudir { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 191, 143, .55); } 50% { box-shadow: 0 0 0 7px rgba(31, 191, 143, 0); } }

/* ---------- Formulario ---------- */
.acceso h1 { font-size: 28px; font-weight: 700; letter-spacing: -.5px; margin: 0 0 6px; }
.acceso .sub { margin: 0 0 26px; color: rgba(255, 255, 255, .66); font-size: 15px; }

.campo { position: relative; margin-bottom: 16px; }
.campo input {
    width: 100%; height: 56px; padding: 22px 46px 8px 48px;
    font: inherit; font-size: 15px; color: #fff;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px;
    outline: none;
    transition: border-color .25s, background .25s, box-shadow .25s, transform .25s var(--curva);
}
.campo input::placeholder { color: transparent; }
.campo > i.icono { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, .45); font-size: 15px; transition: color .25s, transform .25s var(--curva); pointer-events: none; }
.campo label {
    position: absolute; left: 48px; top: 50%; transform: translateY(-50%);
    margin: 0; color: rgba(255, 255, 255, .55); font-size: 15px; font-weight: 400; pointer-events: none;
    transition: top .22s var(--curva), font-size .22s var(--curva), color .22s, letter-spacing .22s;
}
.campo input:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .09); transform: translateY(-1px); }
.campo input:focus { border-color: var(--cielo); background: rgba(58, 160, 255, .09); box-shadow: 0 0 0 4px rgba(58, 160, 255, .18), 0 12px 30px rgba(0, 0, 0, .25); transform: translateY(-1px); }
.campo input:focus ~ label, .campo input:not(:placeholder-shown) ~ label { top: 17px; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--cian); }
.campo input:focus ~ i.icono { color: var(--cian); transform: translateY(-50%) scale(1.12); }
/* el autocompletado del navegador no debe pintar el campo de amarillo */
.campo input:-webkit-autofill { -webkit-text-fill-color: #fff; caret-color: #fff; transition: background-color 9999s ease-out 0s; }
.campo .ojo { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: rgba(255, 255, 255, .5); cursor: pointer; transition: color .2s, background .2s; }
.campo .ojo:hover, .campo .ojo:focus-visible { color: #fff; background: rgba(255, 255, 255, .1); outline: none; }
.campo .mayus { display: none; margin: 6px 4px 0; font-size: 12px; color: #ffd27a; }
.campo.con-mayus .mayus { display: block; }

.entrar {
    position: relative; overflow: hidden; width: 100%; height: 54px; margin-top: 8px;
    border: 0; border-radius: 14px; cursor: pointer;
    font: inherit; font-size: 16px; font-weight: 600; letter-spacing: .2px; color: #06223f;
    background: linear-gradient(135deg, var(--cielo) 0%, var(--cian) 50%, var(--esmeralda) 100%); background-size: 180% 100%;
    box-shadow: 0 12px 30px rgba(58, 160, 255, .35);
    transition: transform .25s var(--curva), box-shadow .25s, background-position .6s var(--curva);
}
.entrar::after { /* destello que cruza el boton */
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
    transform: skewX(-20deg); transition: left .7s var(--curva);
}
.entrar:hover, .entrar:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(58, 160, 255, .5); background-position: 100% 0; outline: none; }
.entrar:hover::after, .entrar:focus-visible::after { left: 120%; }
.entrar:active { transform: translateY(0) scale(.985); }
.entrar .texto { display: inline-flex; align-items: center; gap: 10px; transition: opacity .2s, transform .3s var(--curva); }
.entrar .texto i { transition: transform .3s var(--curva); }
.entrar:hover .texto i { transform: translateX(4px); }
.entrar .rueda { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 3px solid rgba(6, 34, 63, .25); border-top-color: #06223f; border-radius: 50%; opacity: 0; }
.entrar.cargando { pointer-events: none; background-position: 100% 0; }
.entrar.cargando .texto { opacity: 0; transform: translateY(8px); }
.entrar.cargando .rueda { opacity: 1; animation: girar .7s linear infinite; }

.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 18px; border-radius: 12px; font-size: 14px; line-height: 1.4; }
.aviso.error { background: rgba(255, 107, 107, .14); border: 1px solid rgba(255, 107, 107, .45); color: #ffd9d9; animation: subir .8s var(--curva) both calc(var(--i, 0) * 110ms + 150ms), sacudir .5s ease 1.3s; }
.aviso.bien { background: rgba(31, 191, 143, .14); border: 1px solid rgba(31, 191, 143, .45); color: #d2f7ea; }
.aviso i { margin-top: 2px; }

.registro { margin: 22px 0 0; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .62); }
.registro a { color: var(--cian); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--curva), color .2s; }
.registro a:hover { color: #fff; background-size: 100% 1px; }
.pie { margin-top: 26px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .4); }
.pie a { color: inherit; text-decoration: underline; }
.pie a:hover { color: #fff; }

/* ---------- Sello "Acceso seguro" con el punto verde que late ---------- */
.estado { display: flex; width: max-content; align-items: center; gap: 8px; padding: 6px 13px; margin: 0 auto 18px; border-radius: 999px; font-size: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .8); }
.estado b { width: 8px; height: 8px; border-radius: 50%; background: var(--esmeralda); animation: latido 2s infinite; }

/* ====================== TARJETA DE CRISTAL ====================== */
.login-cristal .marco { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: safe center; padding: 40px 20px; }
.login-cristal .logo { width: 230px; max-width: 62vw; height: auto; display: block; margin: 0 auto 10px; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .45)); }
.login-cristal .lema-marca { margin: 0 0 26px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.login-cristal .lema-marca::before, .login-cristal .lema-marca::after { content: ""; display: inline-block; vertical-align: middle; width: 28px; height: 1px; margin: 0 12px; background: linear-gradient(90deg, transparent, var(--cian)); }
.login-cristal .lema-marca::after { transform: scaleX(-1); }
.login-cristal .tarjeta {
    position: relative; width: 100%; max-width: 420px; padding: 36px 34px 30px;
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
    border: 1px solid rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
    box-shadow: 0 40px 90px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .22);
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .5s var(--curva), box-shadow .4s;
}
.login-cristal .tarjeta::before { /* brillo que sigue al cursor dentro de la tarjeta */
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
    background: radial-gradient(340px circle at var(--lx, 50%) var(--ly, 0%), rgba(120, 200, 255, .2), transparent 65%);
}
.login-cristal .tarjeta:hover::before { opacity: 1; }
.login-cristal .acceso { position: relative; }
.login-cristal .acceso h1, .login-cristal .acceso .sub { text-align: center; }

/* mascota junto a la tarjeta: asoma por la derecha, se mece y celebra al pasarle el raton */
/* la entrada (parte de invisible) va en el envoltorio y corre una sola vez; el movimiento y la reaccion al raton,
   en la imagen: al quitar el raton no se relanza la entrada y la mascota no desaparece */
.login-cristal .mascota-ingreso { position: absolute; right: -168px; bottom: -22px; height: 270px; animation: mascotaEntra 1s var(--curva) 1s both; }
.login-cristal .mascota-ingreso img { display: block; height: 100%; width: auto; transform-origin: 50% 100%; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .5)); animation: mascotaMece 4.8s ease-in-out 2.1s infinite; }
.login-cristal .mascota-ingreso:hover img { animation: mascotaCelebra .8s ease-in-out 2; }
@keyframes mascotaEntra { from { opacity: 0; transform: translateX(-70px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes mascotaMece { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(1.5deg); } }
@keyframes mascotaCelebra { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-16px) rotate(-3deg); } 70% { transform: translateY(-4px) rotate(2deg); } }
/* sin espacio a los lados: la mascota pasa abajo, pequeña, asomada bajo la esquina de la tarjeta */
@media (max-width: 800px) {
    .login-cristal .mascota-ingreso { right: 4px; bottom: -92px; height: 118px; }
    .login-cristal .marco { padding-bottom: 110px; }
}

/* ---------- Pantallas pequeñas ---------- */
@media (max-width: 480px) {
    .login-cristal .lema-marca { letter-spacing: 2px; font-size: 11px; }
    .login-cristal .lema-marca::before, .login-cristal .lema-marca::after { display: none; }
    .login-cristal .tarjeta { padding: 28px 20px 24px; border-radius: 20px; }
    .acceso h1 { font-size: 24px; }
}
/* quien pide menos movimiento no recibe animaciones ni desplazamientos */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .aparece { opacity: 1; }
    .fondo .foto { transform: scale(1.06); }
    .login-cristal .tarjeta { transform: none; }
}