/* =============================================================================
   El login de la version nueva: SOLO lo suyo.
   La marca -las dos columnas, el panel de marca con el logo, la malla y el pie, el
   sol/luna- y las piezas de toda pagina publica -el titulo, el campo, el boton
   principal, el aviso de error- estan en te.publico.css y las pone
   _LayoutPublico.cshtml, el de todas las paginas que se ven sin entrar (24/10/2026).
   Todo el color sale de te.tokens.css -ni un valor suelto-, asi que el claro y el
   oscuro salen solos.
   ============================================================================= */

/* --- el boton de la huella: es el protagonista, asi que ocupa como tal --- */

.lgHuella {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .95rem;
    padding: 1.05rem 1.2rem;
    border: 1px solid var(--te-acento);
    border-radius: 14px;
    background: var(--te-acento-suave);
    color: var(--te-texto);
    font: inherit;
    font-weight: 550;
    cursor: pointer;
    text-align: left;
    transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}

.lgHuella:hover {
    background: var(--te-acento-foco);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -12px var(--te-acento);
}

.lgHuella:active { transform: translateY(0); }

.lgHuella .lgIco { width: 30px; height: 30px; flex: none; color: var(--te-acento-vivo); }
.lgHuella small { display: block; font-weight: 400; color: var(--te-texto-suave); font-size: .8rem; margin-top: .1rem; }

/* El anillo que late mientras el sistema pide la huella. */
.lgHuella.lgPidiendo { animation: lgPulso 1.1s ease-in-out infinite; }
@keyframes lgPulso {
    0%,100% { box-shadow: 0 0 0 0 var(--te-acento-foco); }
    50%     { box-shadow: 0 0 0 10px transparent; }
}

/* El movil: segunda opcion, no segunda categoria. Mismo tamano de golpe que la
   huella pero sin relleno, para que se lea como alternativa y no como "lo otro". */
.lgMovil {
    width: 100%;
    margin-top: .6rem;
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    padding: .85rem 1.2rem;
    border: 1px dashed var(--te-borde-fuerte);
    border-radius: 14px;
    background: transparent;
    color: var(--te-texto-suave);
    font: inherit; font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.lgMovil:hover {
    border-style: solid;
    border-color: var(--te-acento);
    color: var(--te-texto);
    background: var(--te-acento-suave);
}
.lgIcoMovil { width: var(--te-tam-icono); height: var(--te-tam-icono); flex: none; }

.lgSep {
    display: flex; align-items: center; gap: .8rem;
    margin: 1.5rem 0;
    color: var(--te-texto-legal); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
}
.lgSep::before, .lgSep::after { content: ""; height: 1px; flex: 1; background: var(--te-borde); }

/* --- el formulario de siempre, por debajo: los campos y el boton son los de te.publico.css --- */

.lgFila { display: flex; align-items: center; justify-content: space-between; margin: .3rem 0 1.2rem; font-size: .87rem; }
.lgFila label:not(.teCasilla) { color: var(--te-texto-suave); display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }   /* «Recordarme» es la pastilla */
.lgFila a { color: var(--te-acento-vivo); text-decoration: none; }
.lgFila a:hover { text-decoration: underline; }

.lgIdiomas { display: flex; gap: .55rem; justify-content: center; margin-top: 1.8rem; }
.lgIdiomas img {
    width: 24px; height: 16px;
    object-fit: contain;          /* nunca deformar una bandera */
    opacity: .55;
    transition: opacity .15s ease, transform .15s ease;
}
.lgIdiomas a:hover img { opacity: 1; transform: translateY(-2px); }
/* Un idioma sin bandera en TM_General.Imagenes: su nombre, pequeño y apagado como las banderas (04/10/2026). */
.lgIdiomaTexto {
    font-size: .72rem; line-height: 16px;
    color: var(--te-texto-suave);
    opacity: .7;
}
.lgIdiomas a:hover .lgIdiomaTexto { opacity: 1; }

/* El aviso legal va entero -no se recorta un texto legal- pero deja de mandar en la
   pantalla: mas pequeno, mas apagado y con su propio hueco si se pasa de largo. */
.lgLegal {
    margin-top: 1.6rem;
    text-align: center;
    color: var(--te-texto-legal);
    font-size: .66rem;
    line-height: 1.45;
    max-height: 7.5em;
    overflow-y: auto;
    opacity: .8;
}
.lgLegal:hover { opacity: 1; }

/* ------------------------------------------------------------------- el QR */

.lgModal {
    position: fixed; inset: 0; z-index: 50;
    display: grid; place-items: center;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(3px);
}
.lgModal[hidden] { display: none; }

.lgModalCaja {
    background: var(--te-superficie);
    border: 1px solid var(--te-borde);
    border-radius: 18px;
    padding: 2rem;
    width: min(340px, 90vw);
    text-align: center;
}
.lgModalCaja h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.lgModalCaja p  { margin: 0 0 1.3rem; color: var(--te-texto-suave); font-size: .88rem; }
.lgQR { width: 180px; height: 180px; margin: 0 auto 1.3rem; display: block; }
.lgCerrar {
    border: 1px solid var(--te-borde); background: transparent; color: var(--te-texto-suave);
    border-radius: 9px; padding: .5rem 1.1rem; font: inherit; cursor: pointer;
}
.lgCerrar:hover { border-color: var(--te-borde-fuerte); color: var(--te-texto); }

@media (prefers-reduced-motion: reduce) {
    .lgHuella.lgPidiendo { animation: none; }
    .lgHuella:hover { transform: none; }
}

/* =============================================================================
   MOVIMIENTO

   Tres cosas y ni una mas, con un criterio: una pantalla de acceso se ve varias
   veces al dia, asi que lo que se mueva tiene que pasar DESAPERCIBIDO a la tercera.
   Todo entra una sola vez, salvo el latido del fondo -que es lentisimo a proposito-.
   Y todo se apaga con prefers-reduced-motion, que ya esta al final del fichero.
   ============================================================================= */

/* --- 1. La entrada escalonada -------------------------------------------------
   Cada pieza sube 10 px y aparece, con 70 ms de diferencia. No es decoracion:
   ordena la mirada -logo, mensaje, y por ultimo donde hay que actuar-. La marca,
   el titulo, los campos y el boton entran con te.publico.css (pbEntra); aqui va
   lo que es solo del login, encajado entre ellos. */

@keyframes lgEntra {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.lgHuella,
.lgMovil,
.lgSep,
.lgFila,
.lgIdiomas {
    animation: lgEntra .5s cubic-bezier(.22, .61, .36, 1) backwards;
}

.lgHuella    { animation-delay: .22s; }   /* el protagonista, justo despues del saludo */
.lgMovil     { animation-delay: .26s; }
.lgSep       { animation-delay: .30s; }
.lgFila      { animation-delay: .46s; }
.lgIdiomas   { animation-delay: .56s; }

/* --- 2. La huella se DIBUJA ---------------------------------------------------
   El unico gesto que se permite llamar la atencion, porque es el que cuenta la
   historia de la pantalla. Los trazos llevan pathLength="1", asi que el dash va
   de 0 a 1 sin depender de lo larga que sea cada curva.
   Se dibuja al entrar, y se vuelve a dibujar en bucle mientras el sistema pide
   la huella: ahi ya no es adorno, es "estoy esperandote". */

.lgHuella .lgIco path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: lgTraza 1.1s ease forwards;
}

.lgHuella .lgIco path:nth-child(1) { animation-delay: .40s; }
.lgHuella .lgIco path:nth-child(2) { animation-delay: .48s; }
.lgHuella .lgIco path:nth-child(3) { animation-delay: .56s; }
.lgHuella .lgIco path:nth-child(4) { animation-delay: .64s; }
.lgHuella .lgIco path:nth-child(5) { animation-delay: .72s; }
.lgHuella .lgIco path:nth-child(6) { animation-delay: .80s; }

@keyframes lgTraza { to { stroke-dashoffset: 0; } }

.lgHuella.lgPidiendo .lgIco path {
    animation: lgTraza 1.4s ease-in-out infinite alternate;
}

/* --- 3. El fondo respira: es de la marca, y esta en te.publico.css ----------- */

@media (prefers-reduced-motion: reduce) {
    .lgHuella, .lgSep, .lgFila, .lgIdiomas, .lgMovil { animation: none; }
    .lgHuella .lgIco path { animation: none; stroke-dashoffset: 0; }
}

/* =============================================================================
   EL PANEL DE MENSAJES

   Los mensajes se apilan UNOS ENCIMA DE OTROS -grid de una celda- y se cruzan por
   opacidad. Asi el panel no da saltos cuando uno es mas largo que otro: la altura
   la marca el mas alto y no cambia nunca.
   ============================================================================= */

.lgClaim {
    display: grid;
    grid-template-areas: "m";        /* todos en la misma celda */
    align-items: start;
    min-height: 11rem;               /* reserva sitio: sin esto el pie baila */
}

.lgMensaje {
    grid-area: m;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .55s ease, transform .55s ease, visibility 0s linear .55s;
}

.lgMensaje.activo {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .55s ease, transform .55s ease, visibility 0s;
}

/* --- los puntitos ----------------------------------------------------------- */

.lgPuntos {
    position: relative;
    z-index: 1;
    display: flex;
    gap: .5rem;
    margin-top: 1.4rem;
}

.lgPunto2 {
    width: 22px; height: 3px;
    border-radius: 2px;
    border: 0;
    padding: 0;
    background: var(--te-borde-fuerte);
    cursor: pointer;
    transition: background .3s ease, width .3s ease;
}

.lgPunto2:hover  { background: var(--te-texto-suave); }
.lgPunto2.activo { background: var(--te-acento-vivo); width: 34px; }

@media (prefers-reduced-motion: reduce) {
    .lgMensaje { transition: none; }
}

/* ⏳ TEMPORAL: la linea de diagnostico de WebAuthn. Se va con ella. */
.lgDiag {
    margin-top: 1.2rem;
    padding: .5rem .7rem;
    border: 1px dashed var(--te-borde);
    border-radius: 8px;
    color: var(--te-texto-suave);
    font-family: var(--te-tipo-mono);
    font-size: .68rem;
    text-align: center;
    line-height: 1.6;
}

/* =============================================================================
   El aviso de "entrar sin contrasena la proxima vez".
   Sale UNA vez, DESPUES de entrar, y con un no se acaba para siempre.
   Va en este fichero porque es la misma historia; si acaba usandose en mas
   sitios, se mueve a te.componentes.css.
   ============================================================================= */

.scAviso {
    position: fixed; inset: 0; z-index: 60;
    display: grid; place-items: center;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(3px);
    animation: lgEntra .3s ease backwards;
}

.scCaja {
    width: min(400px, 92vw);
    background: var(--te-superficie);
    border: 1px solid var(--te-borde);
    border-radius: 18px;
    padding: 1.8rem;
    color: var(--te-texto);
    font-family: var(--te-tipo);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.5);
}

.scCaja h3 { margin: 0 0 .6rem; font-size: 1.2rem; font-weight: 600; }
.scCaja p  { margin: 0 0 1.4rem; color: var(--te-texto-suave); font-size: .92rem; line-height: 1.55; }
.scCaja b  { color: var(--te-texto); }

.scBotones { display: flex; gap: .7rem; justify-content: flex-end; }

.scBotones button { font: inherit; border-radius: 10px; padding: .7rem 1.2rem; cursor: pointer; }

/* El "no" no se esconde ni se pinta de gris casi invisible: si el usuario no
   quiere, tiene que poder decirlo sin buscar. Un no facil es lo que hace que el
   si valga algo. */
.scNo {
    border: 1px solid var(--te-borde-fuerte);
    background: transparent;
    color: var(--te-texto-suave);
}
.scNo:hover { color: var(--te-texto); border-color: var(--te-texto-suave); }

.scSi {
    border: 0;
    background: var(--te-acento);
    color: var(--te-sobre-acento);
    font-weight: 600;
}
.scSi:hover { background: var(--te-acento-vivo); }

.scNota { display: block; margin-top: 1rem; color: var(--te-texto-legal); font-size: .76rem; text-align: right; }

@media (prefers-reduced-motion: reduce) { .scAviso { animation: none; } }

/* "… o usar mi móvil": registra una llave EN EL TELEFONO, con el QR que pinta el propio
   navegador. Va en tono menor y debajo de los dos botones porque es una SEGUNDA llave, no
   una tercera opción al mismo nivel: quien la active tendrá dos y podrá usar cualquiera. */
.scMovil {
    display: block;
    width: 100%;
    margin-top: .9rem;
    padding: .55rem;
    border: 0;
    background: none;
    color: var(--te-acento-vivo);
    font: inherit;
    font-size: .87rem;
    cursor: pointer;
    text-align: center;
    border-radius: 8px;
    transition: background .15s ease;
}
.scMovil:hover { background: var(--te-acento-suave); }

/* =============================================================================
   LAS NOTICIAS (24/09/2026): etiqueta, icono, enlace, la ilustración grande, el
   puntito que se rellena, la tira del móvil y la marca de la vista previa. La
   maqueta que eligió José: https://claude.ai/artifact/Lp7ki8fzfKuNMXf4ufAMns
   ============================================================================= */

.lgClaim { min-height: 17rem; max-width: 27rem; }

.lgCabNoticia { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.15rem; }

.lgIconoNoticia {
    width: 44px; height: 44px; flex: none;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--te-acento-suave);
    border: 1px solid var(--te-borde);
    color: var(--te-acento-vivo);
}
.lgIconoNoticia svg { width: var(--te-tam-icono); height: var(--te-tam-icono); }

/* La etiqueta: el técnico elige el código, el color lo pone esto. */
.lgEtiqueta {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .28rem .7rem;
    border-radius: 999px;
    font-size: .72rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
    color: var(--te-acento-vivo);
    background: var(--te-acento-suave);
}
.lgEtiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lgEtiqueta.et-proximamente { color: var(--te-texto-suave); background: transparent; border: 1px solid var(--te-borde-fuerte); }
.lgEtiqueta.et-aviso { color: var(--te-aviso); background: var(--te-aviso-fondo); }
.lgEtiqueta.et-consejo { color: var(--te-ok); background: var(--te-ok-fondo); }

.lgMas {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: 1.1rem;
    color: var(--te-acento-vivo);
    font-size: .95rem; font-weight: 550;
    text-decoration: none;
}
.lgMas svg { width: var(--te-tam-icono); height: var(--te-tam-icono); transition: transform .2s ease; }
.lgMas:hover svg { transform: translateX(3px); }

/* La ilustración: el icono de la noticia en grande y con trazo fino, sobre la malla. Se DIBUJA
   al aparecer: los trazos llevan pathLength="1" (lo pone te.login.mensajes.js). */
.lgIlus {
    position: absolute; right: 44px; top: 50%;
    width: 290px; height: 290px;
    transform: translateY(-46%);
    z-index: 0; pointer-events: none;
    color: var(--te-acento-vivo);
}
.lgIlusIco { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.lgIlusIco svg { width: 100%; height: 100%; }
.lgIlusIco.activo { opacity: .34; }
:root[data-tema="claro"] .lgIlusIco.activo { opacity: .30; }
.lgIlusIco path { vector-effect: non-scaling-stroke; stroke-width: 1.6px; stroke-dasharray: 1; stroke-dashoffset: 0; }
.lgIlusIco.activo path { animation: lgTrazaIlus 2.2s cubic-bezier(.3, .6, .3, 1) both; }
@keyframes lgTrazaIlus { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* El puntito de la que se ve se RELLENA mientras dura: así se ve que el panel rota. */
.lgPunto2 { position: relative; overflow: hidden; }
.lgPunto2.activo { background: var(--te-borde-fuerte); width: 48px; }
.lgPunto2 i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--te-acento-vivo); }
.lgPunto2.activo i { animation: lgRota var(--lg-rota, 8s) linear forwards; }
.lgPausa .lgPunto2.activo i { animation-play-state: paused; }
.lgParado .lgPunto2.activo i { animation: none; width: 100%; }   /* parado del todo: el puntito, lleno */
@keyframes lgRota { from { width: 0; } to { width: 100%; } }

/* --- El móvil: la tira encima del formulario, porque el panel de la izquierda desaparece --- */
.lgTira { display: none; }

.lgTiraPila { display: grid; grid-template-areas: "t"; }
.lgTiraItem { grid-area: t; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.lgTiraItem.activo { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.lgTiraCab { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; color: var(--te-acento-vivo); }
.lgTiraCab svg { width: var(--te-tam-icono); height: var(--te-tam-icono); }
.lgTiraCab .lgEtiqueta { font-size: .62rem; padding: .2rem .55rem; }
.lgTiraTit { margin: 0; font-size: 1.12rem; line-height: 1.2; font-weight: 650; letter-spacing: -.01em; }
.lgTiraTit mark { background: none; color: var(--te-acento-vivo); }   /* el resaltado, como en el panel grande */
.lgTira .lgPuntos { margin-top: .75rem; gap: .35rem; }
.lgTira .lgPunto2 { width: 14px; }
.lgTira .lgPunto2.activo { width: 30px; }

@media (max-width: 900px) {
    .lgTira {
        display: block;
        width: 100%;
        margin: .5rem 0 1.6rem;           /* el botón del tema ya no va encima: está en la banda de la marca */
        padding: .9rem 1rem .8rem;
        border: 1px solid var(--te-borde);
        border-radius: 14px;
        background:
            radial-gradient(260px 140px at 0% 0%, var(--te-acento-suave), transparent 70%),
            var(--te-superficie);
    }
}

/* --- La vista previa de SoporteGTE --- */
.lgPreviaMarca {
    position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
    z-index: 70;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: var(--te-aviso-fondo);
    border: 1px solid var(--te-aviso);
    color: var(--te-aviso);
    font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}
/* En estrecho el logo va arriba, y fija la marca tapaba algo: el logo arriba, el botón «Entrar» abajo (SOPORTE, 25/10/2026,
   Móvil en claro y oscuro). Va en el flujo, en una franja encima de todo, y empuja la página. El body no tiene fondo: el de la
   franja es el aviso sobre el papel. */
@media (max-width: 900px) {
    .lgPreviaMarca {
        position: static; transform: none;
        display: block;
        border-radius: 0; border-width: 0 0 1px;
        text-align: center;
        white-space: normal;
        background: linear-gradient(var(--te-aviso-fondo), var(--te-aviso-fondo)), var(--te-fondo);
    }
}
/* Apagado, el FORMULARIO; la tira de noticias no: es justo lo que se está previsualizando. */
.pbPanel[inert] .pbCaja > :not(.lgTira) { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
    .lgIlusIco, .lgTiraItem { transition: none; }
    .lgIlusIco.activo path { animation: none; }
    .lgPunto2.activo i { animation: none; width: 100%; }
    .lgMas svg { transition: none; }
}