/* css/login-v2.css — el panel "Iniciar sesion" de auth.php, y NADA MAS.
 *
 * TODO CUELGA DE .lg2 A PROPOSITO. La maqueta original traia resets a nivel de
 * ELEMENTO (button{}, img{}, a{}, body{}) y auth.php tiene otras CINCO pantallas
 * que NO se rediseñaron —registro, gate de invitacion, forgot, reset, alta
 * hecha—: un solo selector desnudo acá las repinta a todas, incluido el gate de
 * invitacion y el switcher de idioma, que ni salen en la maqueta. Ninguna regla
 * de este archivo puede salir de .lg2.
 *
 * LOS TOKENS NO ESTAN ACA. --fg-1, --bg-inset, --divider, --neon-*, --font-* y
 * los otros 85 los trae css/sc-design-tokens.css, que ya corria en prod para
 * dashboard-mobile/monitor/chat y que auth.php linkea ANTES que este archivo.
 * Copiarlos acá era la otra opcion y dejaba dos paletas que driftan — ese
 * archivo dice "FUENTE UNICA" en su propio comentario. Se comprobo que declarar
 * sus 91 variables no repinta nada de auth.php: de las 14 que el <style> de esa
 * pagina consume (--accent --bg --text --card …) no coincide NI UNA.
 *
 * ⚠️ Ese archivo NO es solo variables —trae .sc-display-*, .sc-readout*,
 * [data-metric-color] y [data-theme]— pero ninguno de esos selectores matchea el
 * markup de auth.php, comprobado. El disparador a vigilar no es "que le metan
 * una regla de elemento": es que le metan una regla cuyo selector matchee algo
 * de auth.php, que es mas facil de que pase y mas dificil de notar.
 */

/* El panel es una solapa: .tab-panel{display:none} lo tapa y .active lo destapa.
 * .lg2{display:flex} a secas EMPATA en especificidad con esas dos y quien gana
 * depende del orden de los archivos — con la suerte al reves, el login se ve
 * arriba del registro. Con las tres clases juntas le gana a las dos siempre. */
.tab-panel.lg2.active{display:flex;flex-direction:column;gap:22px}
/* -webkit-font-smoothing lo daba el body{} de la maqueta, y auth.php no lo tiene
 * en ningun lado. Sobre fondo oscuro se nota: sin esto el texto sale un pelo mas
 * grueso que en la maqueta aprobada. Es heredable, asi que alcanza con ponerlo
 * en el contenedor. */
.lg2{font-family:var(--font-body);color:var(--fg-1);-webkit-font-smoothing:antialiased}

/* ---------- formulario ---------- */
/* .lg2-form y no .form como en la maqueta: `form` es un nombre demasiado goloso
 * para una clase suelta en un archivo que comparte documento con otras cinco
 * pantallas. Los demas (.field, .control, .row, .check, .cta, .or) se quedan con
 * el nombre de la maqueta porque .lg2 ya los acota y cambiarlos era divergir del
 * diseño aprobado por prolijidad. */
.lg2 .lg2-form{display:flex;flex-direction:column;gap:14px}
.lg2 .field{display:flex;flex-direction:column;gap:7px}
.lg2 .field label{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--fg-3)}
.lg2 .control{display:flex;align-items:center;gap:8px;height:50px;padding:0 14px;background:var(--bg-inset);border:1px solid var(--divider);border-radius:var(--radius-sm);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.lg2 .control:focus-within{border-color:rgba(255,110,200,.55);box-shadow:0 0 0 3px rgba(255,46,166,.12)}
.lg2 .control input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--fg-1);font-family:var(--font-body);font-size:15px;letter-spacing:.01em}
.lg2 .control input::placeholder{color:var(--fg-4)}
/* El autofill de Chrome/Safari le fuerza al input un fondo opaco claro y texto
 * oscuro, y como acá el input es transparente (el fondo lo pone .control), una
 * contraseña guardada pintaba un bloque blanco flotando adentro de la caja. El
 * box-shadow inset es el unico modo de taparlo: background-color no le gana. */
.lg2 .control input:-webkit-autofill,
.lg2 .control input:-webkit-autofill:hover,
.lg2 .control input:-webkit-autofill:focus{-webkit-text-fill-color:var(--fg-1);-webkit-box-shadow:0 0 0 1000px var(--bg-inset) inset;caret-color:var(--fg-1)}

/* El ojito es HOOK del JS de mas abajo (.pw-toggle[data-target]) y por eso
 * conserva la clase — pero esa clase trae position:absolute del <style> viejo,
 * pensada para el .pw-wrap que acá ya no existe. Sin apagarle el absolute se
 * posiciona contra lo que encuentre y se va de la caja. */
/* background/border/cursor van explicitos aunque .pw-toggle ya los traiga del
 * <style> de auth.php: era la unica regla del archivo que necesitaba que OTRA
 * regla, en otro archivo, siguiera existiendo para verse bien. El dia que se
 * limpie ese <style> el ojito aparece con borde de boton nativo. */
.lg2 .control .pw-toggle{position:static;transform:none;right:auto;top:auto;flex:none;width:34px;height:34px;padding:0;background:none;border:none;cursor:pointer;display:grid;place-items:center;border-radius:6px;color:var(--fg-3);font-family:var(--font-body);opacity:.6}
.lg2 .control .pw-toggle:hover{background:var(--bg-2);color:var(--fg-1);opacity:1}
.lg2 .control .pw-toggle svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}

.lg2 .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:2px}
.lg2 .check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--fg-2);cursor:pointer}
.lg2 .check input{appearance:none;-webkit-appearance:none;flex:none;width:19px;height:19px;margin:0;border:1.5px solid rgba(255,110,200,.4);border-radius:4px;background:var(--bg-inset);display:grid;place-items:center;cursor:pointer}
.lg2 .check input:checked{background:var(--neon-magenta);border-color:var(--neon-magenta);box-shadow:0 0 14px rgba(255,46,166,.45)}
/* box-sizing explicito: el reset de auth.php es `*{}` PELADO, sin ::before ni
 * ::after (el de la maqueta si los incluia). En content-box el tilde mide 11x7 en
 * vez de 9x5 y sale grande y descentrado. */
.lg2 .check input:checked::after{content:"";box-sizing:border-box;width:9px;height:5px;border-left:2px solid var(--fg-on-neon);border-bottom:2px solid var(--fg-on-neon);transform:translateY(-1px) rotate(-45deg)}
.lg2 .forgot{font-size:13.5px;color:var(--fg-3);text-decoration:none}
.lg2 .forgot:hover{color:var(--neon-aqua)}

.lg2 .cta{height:54px;border:none;cursor:pointer;border-radius:var(--radius-sm);background:linear-gradient(100deg,var(--neon-magenta),var(--neon-violet));color:#fff;font-family:var(--font-display);font-size:13.5px;letter-spacing:var(--track-label);text-transform:uppercase;box-shadow:0 10px 26px rgba(255,46,166,.28);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.lg2 .cta:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(255,46,166,.4)}
/* :active no esta en la maqueta y se agrega por consistencia con el resto de la
 * app, donde todos los botones grandes hunden al tocarlos. */
.lg2 .cta:active{transform:scale(.99)}

/* ---------- separador ---------- */
.lg2 .or{display:flex;align-items:center;gap:12px;color:var(--fg-3);font-size:11px;font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase}
.lg2 .or::before,.lg2 .or::after{content:"";flex:1;height:1px;background:var(--divider)}

/* ---------- proveedores: grilla de 2 columnas agrupada por audiencia ---------- */
.lg2 .providers{display:grid;grid-template-columns:1fr 1fr;gap:9px 10px;align-items:stretch}
.lg2 .providers h3{grid-column:span 2;display:flex;align-items:center;gap:9px;margin:6px 0 0;font-family:var(--font-body);font-size:10.5px;font-weight:600;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--fg-3)}
.lg2 .providers h3::after{content:"";flex:1;height:1px;background:var(--divider)}
.lg2 .providers h3.half{grid-column:span 1}
/* [hidden] PIERDE contra display:flex. Sin esta linea, el encabezado que el
 * servidor emite tapado se ve igual — colgado sobre ningun boton, que es
 * exactamente el caso mas feo. */
.lg2 .providers h3[hidden]{display:none}

.lg2 .prov{display:flex;align-items:center;justify-content:center;gap:11px;min-width:0;height:56px;padding:0 8px;cursor:pointer;font-family:var(--font-body);border-radius:var(--radius-sm);border:1px solid transparent;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:filter var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
/* La regla que le faltaba a la maqueta: sin esto un proveedor SOLO en su fila
 * queda a media pancha con un hueco al lado, y ese es el caso MAS FRECUENTE de
 * todos — cualquier navegador de escritorio, donde sólo esta Google. */
.lg2 .prov.wide{grid-column:span 2}
.lg2 .prov:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 12px 26px rgba(0,0,0,.45)}
/* :disabled tampoco esta en la maqueta y NO es decorativo: _showLoading() del JS
 * de Firebase deshabilita #btn-google-signin mientras entra, y sin esto el boton
 * se ve idéntico a uno que se puede tocar. */
.lg2 .prov:disabled{opacity:.5;cursor:not-allowed;transform:none}
.lg2 .prov img{width:34px;height:34px;flex:none;object-fit:contain;display:block}
.lg2 .prov .txt{font-size:17px;font-weight:700;letter-spacing:.01em;line-height:1;white-space:nowrap}
/* Mientras el implante baila, el boton cuenta en que paso va ("Verificando…") y
 * eso NO es un nombre propio corto: con el nowrap de arriba se desborda de media
 * columna. Sólo mientras dura la lectura. */
.lg2 .prov.trabajando .txt{font-size:13px;line-height:1.15;white-space:normal;text-align:center}
.lg2 .prov--google{background:#fff;color:#3C4043}
.lg2 .prov--vivokey{background:#2E4C66;color:#fff}
/* .prov--apple y .prov--orcid de la maqueta NO se portan: no hay markup que las
 * emita y una regla sin dueño se lee como que el proveedor existe. Los colores
 * estan en la maqueta (index.html:71,73) para cuando le toque a cada uno — y ojo,
 * el de Apple hay que verificarlo contra la documentacion de Apple, no copiarlo. */

/* La regla de la guideline 4.8 (esconder los proveedores adentro del iOS) NO
 * ESTA ACA A PROPOSITO: vive en el <style> inline de auth.php, al lado de la que
 * hace lo mismo para el panel de registro.
 *
 * El motivo es de cumplimiento, no de estilo. Si esa regla viviera en este
 * archivo, esconder Google en iOS pasaria a depender de que esta hoja CARGUE en
 * el webview; hoy viaja en el HTML y no puede fallar. Una request que falla no
 * puede volverte incumplidor de la App Store. */

/* ══════════════════ .vkm — el modal del implante VivoKey ══════════════════
 *
 * ESTA EN ESTE ARCHIVO PERO NO CUELGA DE .lg2, Y NO ES UN DESCUIDO: el telon es
 * position:fixed y tapa la pantalla entera, asi que su markup vive al fondo del
 * <body> y NO adentro del panel. Cuelga de .vkm, que es su propia raiz.
 *
 * ⚠️ Se aplican igual las dos reglas duras de arriba: ningun selector desnudo
 * —todo bajo .vkm— y no se declara ni un token, se consumen los de
 * css/sc-design-tokens.css. La UNICA regla que sale de .vkm es el bloqueo de
 * scroll, y por eso va con una clase propia en el body (body.vkm-abierto) en vez
 * de tocar body a secas: un body{} pelado le cambia el scroll a las cinco
 * pantallas viejas de auth.php, que es justo el reset de elemento que este
 * archivo existe para evitar.
 *
 * ⚠️ NINGUNA PIEZA QUE EL JS MUESTRE PUEDE LLEVAR display:none ACA.
 * sc-vivokey-modal.js esconde con style.display='none' y muestra con
 * style.display='' — o sea devolviendola a lo que diga ESTA hoja. Un display:none
 * aca sobre .vkm-cuenta, .vkm-error, .vkm-reintentar, .vkm-cerrar, .vkm-sub-link
 * o los renglones [data-vkm-txt] / [data-vkm-aviso] no los esconde hasta que el JS
 * los muestre: los apaga PARA SIEMPRE, sin tirar un solo error — el modal se abre,
 * la logica corre, y la pantalla se queda muda. Las dos que si arrancan en none
 * son .vkm y .vkm-sub-modal, y son exactamente las dos que el JS abre con un
 * display EXPLICITO ('flex').
 */

/* z-index 99990: arriba de .invite-req-overlay (9999) y de todo lo demas de la
 * pagina, pero abajo de #sc-redirect-overlay (99997). Ese overlay es el del
 * rebote de Google y no coexiste con esto, pero cuando una pantalla dice
 * "entrando" el que manda es el que ya resolvio el login. */
.vkm{position:fixed;inset:0;z-index:99990;display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch;background:rgba(0,0,0,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--font-body);color:var(--fg-1);-webkit-font-smoothing:antialiased}
.vkm-card{position:relative;width:100%;max-width:340px;padding:22px 20px 18px;display:flex;flex-direction:column;gap:12px;text-align:center;background:var(--bg-1);border:1px solid var(--border-1);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
/* El foco entra a la tarjeta al abrir (abrir() la enfoca para que el lector de
 * pantalla y el ENTER no se queden en el formulario de atras). Es un contenedor
 * con tabindex, no un control: el anillo del navegador alrededor de toda la
 * tarjeta se lee como si la tarjeta fuera clickeable. */
.vkm-card:focus{outline:none}

/* CUADRADA A PROPOSITO. Las tres ilustraciones son 384x384 y el JS reemplaza el
 * <picture> entero al cambiar de estado; sin el aspect-ratio, el hueco mide lo
 * que mida la imagen que YA cargo, y el salto de escaneando→validando empuja el
 * texto y los botones de abajo justo cuando el usuario los esta leyendo. Con la
 * caja fija, el cambio de estado no mueve nada. */
.vkm-art{width:100%;aspect-ratio:1;overflow:hidden;border-radius:var(--radius-md);background:var(--bg-inset)}
.vkm-art picture{display:block}
.vkm-art img{width:100%;height:auto;display:block}

/* Lo que pidio azrael: "un contador de segundos lindo en nuestras fuentes". Va en
 * var(--font-display) —Bungee, la misma del logo y de los readouts grandes— y
 * grande de verdad: es lo unico que se mueve durante el escaneo y es lo que le
 * dice al usuario que la app no se colgo. */
.vkm-cuenta{font-family:var(--font-display);font-size:52px;line-height:1;letter-spacing:var(--track-display);color:var(--neon-aqua);text-shadow:var(--text-glow-cyan)}

/* Los tres renglones. El hook del JS son los atributos data-vkm-txt /
 * data-vkm-aviso; estas clases solo ponen el aspecto, asi que un renglon puede
 * llevar las dos cosas sin pelearse. */
.vkm-titulo{font-family:var(--font-body);font-size:16.5px;font-weight:600;line-height:1.3;color:var(--fg-1)}
.vkm-sub{font-size:13.5px;line-height:1.45;color:var(--fg-3)}
/* El aviso de tardanza aparece a los 10 s y se queda hasta medio minuto: lleva
 * fondo propio para que se lea como un renglon NUEVO y no como parte del texto
 * que el usuario ya leyo y descarto. */
.vkm-aviso{padding:9px 12px;border-radius:var(--radius-sm);background:var(--bg-inset);border:1px solid var(--divider);font-size:12.5px;line-height:1.4;color:var(--warn)}
.vkm-error{font-size:14.5px;font-weight:600;line-height:1.4;color:var(--danger)}

/* La X cae ENCIMA de la ilustracion, que es rosa fuerte y llena de detalle: sin
 * fondo propio queda un caracter gris flotando sobre la mano y practicamente no
 * se ve. Se comprobo en pantalla. El circulo oscuro semitransparente la despega
 * sin tapar la ilustracion, y los 40px son el piso tactil de la app. */
.vkm-x{position:absolute;top:6px;right:6px;width:40px;height:40px;padding:0;display:grid;place-items:center;background:rgba(11,5,24,.66);border:1px solid var(--divider);cursor:pointer;border-radius:var(--radius-pill);color:var(--fg-1);font-family:var(--font-body);font-size:20px;line-height:1;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.vkm-x:hover{background:var(--bg-2);color:var(--fg-1)}
/* La X SE ESCONDE en 'adentro'. Ofrecer un cancelar en una pantalla que dice
 * "Listo, entrando" es una contradiccion: la cadena resuelve en vez de rechazar,
 * no hay error, el modal cierra, y el usuario queda parado en el login despues de
 * que le dijeron que ya entro. El JS ademas lo guardea en alCancelar() —lo
 * necesita el boton ATRAS de Android, que no pasa por este selector—, asi que
 * esta regla es la mitad visual de esa defensa, no toda. */
.vkm[data-estado="adentro"] .vkm-x{display:none}

.vkm-reintentar{width:100%;height:48px;border:none;cursor:pointer;border-radius:var(--radius-sm);background:linear-gradient(100deg,var(--neon-magenta),var(--neon-violet));color:#fff;font-family:var(--font-display);font-size:12.5px;letter-spacing:var(--track-label);text-transform:uppercase;box-shadow:0 10px 26px rgba(255,46,166,.28);transition:transform var(--dur-fast) var(--ease-out)}
.vkm-reintentar:active{transform:scale(.99)}
.vkm-cerrar{width:100%;height:44px;cursor:pointer;background:none;border:1px solid var(--divider);border-radius:var(--radius-sm);color:var(--fg-3);font-family:var(--font-body);font-size:13.5px}
.vkm-cerrar:hover{color:var(--fg-1);border-color:var(--border-1)}

.vkm-pie{margin-top:2px;padding-top:14px;border-top:1px solid var(--divider);display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;color:var(--fg-3)}
/* min-height 40px: es el piso tactil del resto de la app, y este boton es el
 * unico del pie — con la altura del texto solo, en el telefono se falla. */
.vkm-conocer{min-height:40px;display:inline-flex;align-items:center;padding:0 4px;background:none;border:none;cursor:pointer;font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--neon-aqua);text-decoration:underline;text-underline-offset:3px}
.vkm-conocer:hover{color:var(--fg-1)}

/* El sub-modal de vivokey.com. z-index apenas arriba del telon: se abre DESDE el
 * modal y tiene que taparlo, pero sigue siendo la misma pantalla. */
.vkm-sub-modal{position:fixed;inset:0;z-index:99991;display:none;flex-direction:column;align-items:stretch;justify-content:center;gap:12px;padding:16px;background:var(--bg-0)}
.vkm-sub-modal iframe{width:100%;height:70vh;border:0;background:#fff;border-radius:var(--radius-sm)}
.vkm-sub-volver{align-self:flex-start;min-height:40px;padding:0 14px;cursor:pointer;background:var(--bg-2);border:1px solid var(--divider);border-radius:var(--radius-pill);color:var(--fg-2);font-family:var(--font-body);font-size:13.5px}
.vkm-sub-volver:hover{color:var(--fg-1);border-color:var(--border-1)}
/* La salida de emergencia: el JS la destapa a los 5 s si el iframe no cargo —el
 * dia que vivokey.com le ponga una CSP, esto es lo unico que queda en pantalla,
 * asi que tiene que verse solo y centrado. */
.vkm-sub-link{padding:24px 16px;text-align:center;font-size:14px;line-height:1.5;color:var(--fg-2)}
.vkm-sub-link a{color:var(--neon-aqua);text-decoration:underline;text-underline-offset:3px}

/* El bloqueo de scroll — la unica regla del bloque que no cuelga de .vkm. Sin
 * esto el telon queda quieto y la pagina de atras sigue scrolleando debajo, que
 * en el telefono se ve como si el modal se despegara. */
body.vkm-abierto{overflow:hidden}