/* ══ LO QUE VIVIA EN panel.css · UNA SOLA COPIA DEL LOGIN (29-oct) ══ El login de PC y la aurora estaban escritos en DOS hojas: aqui, con `#login`, y en `panel.css`, sin prefijo. Ganaba la que cargaba despues y quien corrigiera una dejaba la otra distinta (lo encontro E1b). De `panel.css` se trajeron SOLO las declaraciones que hoy ganan en pantalla, medidas una por una en el navegador (1440, 1180, 700 y 390 de ancho; 450 de alto; claro y oscuro): quitar cualquiera de estas cambia la pantalla. Las otras --las que esta hoja ya pisaba-- no se trajeron: eran la segunda copia. Comprobado antes de quitar: estilos calculados iguales en todos los elementos del login y su aurora (tambien `::before`, `::after` y `::placeholder`), y capturas identicas pixel por pixel a 1440 y 390, en claro y en oscuro. Van AL PRINCIPIO a proposito: en `panel.css` cargaban antes que esta hoja, y asi conservan el mismo orden frente a las reglas de abajo. Es protegido (CLAUDE.md regla 2): no cambia nada visible. */ #login { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; z-index: 60 } #lyk-aurora-canvas { position: fixed; z-index: 0; pointer-events: none; will-change: filter } .login-card { z-index: 2; width: 100%; text-align: center } .login-card .fi::placeholder { color: var(--text-2) } .login-card img { width: 220px; max-width: 78%; margin: 0 auto 26px; display: block } .login-card .field { text-align: left } @media (max-width: 599px), (max-height: 479px) { .login-card img { width: 190px } } /* El codigo QR de entrada. Blanco de verdad, escrito a mano y no por token: un lector de codigos necesita contraste real, no el del tema. La caja mide exactamente lo que mide el codigo. `max-width:none` en la imagen no es adorno: sin el, `.login-card img` (78 %) aplastaba el codigo a lo ancho. */ .qr-lienzo { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 6px; padding: 9px; margin: 6px auto 4px; width: 222px; height: 222px; max-width: 100%; overflow: hidden } .qr-lienzo img { width: 204px; height: 204px; max-width: none; margin: 0; image-rendering: pixelated; display: block } .qr-lienzo .qr-vencido { text-align: center; color: #5D6B7E; font-size: 13px; line-height: 1.5; padding: 0 14px } /* El boton que el mensaje «Toca Generar otro» prometia y no existia. */ .qr-otro { display: none; width: 100%; margin-top: 8px } .qr-otro.se-ve { display: block } /* La entrada en computadora: a la izquierda la marca, una frase y los tres pasos; a la derecha el codigo. El paso que va se engrosa y se aclara; el hecho se apaga sin desaparecer (sin `opacity`, que apagaba tambien el aro). */ .pc-cols { display: grid; align-items: center } .pc-pasos { margin: 0; padding: 0; list-style: none; counter-reset: paso } .pc-pasos li { counter-increment: paso; position: relative } .pc-pasos li::before { content: counter(paso); position: absolute; left: 0 } .pc-pasos li.va::before { box-shadow: 0 0 0 4px rgba(255,194,7,.10) } .pc-pasos li.hecho { color: rgba(248,250,252,.45) } .pc-pasos li.hecho b { color: rgba(248,250,252,.58) } .pc-pasos li.hecho::before { content: "\2713"; background: transparent; border-color: rgba(248,250,252,.26); color: rgba(248,250,252,.52); font-size: 13px } .pc-qr { min-width: 0 } /* El numero de la confirmacion: grande, para leerlo de lejos con el telefono en la mano. */ .num-grande { margin: 14px 0 6px } .nums-fila { display: flex; gap: 10px } .nums-fila button { flex: 1; min-height: 60px; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; border-radius: var(--r-md); border: 1.5px solid rgba(248,250,252,.22); background: rgba(248,250,252,.06); color: var(--blanco); font-family: inherit; cursor: pointer } .nums-fila button:hover { border-color: var(--amar) } /* ── EL LOGIN NO TIENE TEMA, Y ASI SE DICE ── Antes esto eran veinte `!important` peleando con panel.css. La forma correcta, y la que pidio Direccion: forzar el tema oscuro en el contenedor y dejar que los TOKENS den los valores. Un color fuera de `orvik-tokens.css` viola la regla 1 del anexo. `data-tema="oscuro"` lo pone `marca.js` en `#login` al cargar. */ #login[data-tema="oscuro"], #login { background: var(--fondo); color-scheme: dark; } /* ============================================================ EL LOGIN, EN ORVIK 16 de octubre de 2026 · lámina 1 de los mockups Todo lo anterior a iniciar sesión es de la plataforma, sin excepción: aquí el sistema todavía no sabe de qué empresa es quien entra. Por eso esta hoja no usa `--marca` ni una sola vez; usa los colores de Orvik. Está acotada a `#login`. Fuera de esa pantalla no cambia nada, y por eso `panel.css` se queda como está: si algo de esto sale mal, se quita este archivo y el login vuelve al de ayer. El FLUJO no se toca. En computadora se entra sólo con código QR; en celular, con clave de seis dígitos y rostro. Lo que cambia es cómo se ve. ============================================================ */ /* ── El fondo ── */ #login { background: var(--fondo); } #login::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--fondo-tinte); } /* ── La tarjeta de vidrio ── Los valores salen del render del lienzo, no del texto de sus reglas: desenfoque 30, saturación 190%, fondo navy al 38% y borde blanco al 16%. El radio 28 es el del login, un escalón por encima del contenedor de 24. */ #login .login-card { background: var(--vidrio-fondo); -webkit-backdrop-filter: var(--vidrio-filtro); backdrop-filter: var(--vidrio-filtro); border: 1px solid var(--vidrio-borde); border-radius: 28px; padding: var(--e-8); max-width: 420px; box-shadow: 0 24px 70px rgba(0, 0, 0, .45); } /* El brillo del vidrio. Va en un pseudoelemento para no pelearse con el fondo translúcido de arriba. */ /* El brillo lo da ahora la receta de `orvik-tokens.css`: un canto de 1 px con mascara, no un degradado sobre toda la superficie. Esto ultimo era un velo y fue lo que dejo la tarjeta blanca en claro. */ #login .login-card > * { position: relative } /* ── La tipografía del sistema ── */ #login .login-card h1 { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 8px; } #login .login-card p.sub { font-size: 14px; line-height: 20px; font-weight: 400; margin: 0 0 26px; } #login .login-card label { font-size: 13px; line-height: 18px; font-weight: 500; margin-bottom: 7px; } /* Sólo el logotipo, que es hijo directo de la tarjeta. Sin el `>` esta regla alcanzaba también a la imagen del código —que vive dentro de `.qr-lienzo`— y le metía 24 px de margen abajo dentro de una caja con `overflow:hidden`: otro recorte, por el mismo descuido. */ #login .login-card > img { margin-bottom: 24px } /* ── Los campos: 52 de alto, radio 14 ── */ #login .login-card .fi { min-height: 52px; border-radius: var(--r-control-g); background: rgba(255, 255, 255, .07); border: 1px solid var(--vidrio-borde); font-size: 16px; padding: 0 16px; } /* ── El botón principal, con el degradado de Orvik ── Aquí NO va el amarillo: el login es de la plataforma. El degradado es azul→teal, borde blanco al 18%, alto 52. */ #login .login-card .btn:not(.ghost) { min-height: 52px; border-radius: var(--r-control-g); background: var(--marca-degradado-boton); border: 1px solid var(--vidrio-borde); color: #fff; font-size: 16px; font-weight: 500; } #login .login-card .btn:not(.ghost):hover { filter: brightness(1.12) } #login .login-card .btn:not(.ghost):active { filter: brightness(.98) } #login .login-card .btn.ghost { min-height: var(--toque); border-radius: var(--r-control); background: transparent; border: 1px solid var(--vidrio-borde); color: #E8EEF7; font-weight: 500; } /* ── La tarjeta ancha del QR ── */ #login .login-card.ancha { max-width: 840px; padding: 40px; } #login .pc-cols { grid-template-columns: 1fr 300px; gap: 40px; } #login .pc-logo { width: auto; height: 30px; margin: 0 0 22px } #login .pc-frase { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 28px; } /* Los tres pasos. El que va corriendo lleva el teal de Orvik, no el amarillo: es el sistema quien está trabajando, no la empresa operativa. */ #login .pc-pasos li { padding: 0 0 14px 40px; font-size: 14px; line-height: 20px; font-weight: 400; } #login .pc-pasos li::before { width: 28px; height: 28px; top: -3px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .07); border: 0; color: #93A3B8; display: grid; place-items: center; } #login .pc-pasos li.va::before { background: rgba(78, 205, 196, .18); color: var(--marca-principal); border: 0; } #login .pc-pasos li.hecho::before { background: rgba(16, 185, 129, .18); color: #34D399; } /* ── El código NO SE TOCA ── Aquí había un `padding:14px` y un radio nuevo. Los dos sobraban y uno rompía: `.qr-lienzo` mide 222 con `padding:9px` y `overflow:hidden`, así que su hueco útil es exactamente 204 —lo que mide la imagen del código—. Subir el relleno a 14 dejaba el hueco en 194 y el código se cortaba 10 px, cinco por la derecha y cinco por abajo. `panel.css` ya lo tenía escrito tres párrafos más arriba: «se declaran los tres —ancho, alto y max-width— para que ninguna regla de más arriba lo vuelva a deformar». Lo volví a deformar por el otro lado, el de la caja. Un código que una cámara tiene que leer no se decora. Si algún día hay que cambiarle el radio, se cambia junto con la medida y se prueba escaneándolo. */ #login .qr-otro { min-height: var(--toque); border-radius: var(--r-control); border: 1px solid var(--vidrio-borde); background: transparent; color: #E8EEF7; } /* ── El número grande de la confirmación ── */ #login .num-grande { font-size: 44px; line-height: 48px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* ── El pie ── Es de la plataforma y por eso no se personaliza por marca. */ #login .pie-login { font-size: 12px; line-height: 16px; font-weight: 500; color: #64748B; } /* En celular, la tarjeta ancha se vuelve una columna. */ @media (max-width: 760px) { #login .login-card.ancha { padding: var(--e-6) } #login .pc-cols { grid-template-columns: 1fr; gap: 26px } #login .pc-frase { font-size: 24px; line-height: 30px } } /* Con «Reducir transparencia», el vidrio del login se vuelve sólido. El contraste no depende del desenfoque. */ @media (prefers-reduced-transparency: reduce) { #login .login-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--vidrio-solido); } /* El brillo lo da ahora la receta de `orvik-tokens.css`: un canto de 1 px con mascara, no un degradado sobre toda la superficie. Esto ultimo era un velo y fue lo que dejo la tarjeta blanca en claro. */ } /* ── La columna de texto va a la izquierda ── `.login-card` centra todo su contenido, y para una tarjeta de 390 está bien. En la ancha no: tres pasos numerados centrados no se leen como una secuencia, se leen como un adorno. */ #login .login-card.ancha .pc-txt { text-align: left } #login .login-card.ancha .pc-qr { text-align: center } #login .pc-pasos li { text-align: left } /* En celular el título baja a la escala de la app —28/34— porque a 30 «Tu clave de acceso» parte en dos renglones desiguales y lo primero que se lee deja de ser una frase. */ @media (max-width: 480px) { #login .login-card h1 { font-size: 28px; line-height: 34px } #login .login-card { padding: var(--e-6) } } /* ════════ EL LOGIN NO TIENE TEMA CLARO ════════ DEFECTO MÍO, Y ROMPÍA LA ENTRADA: con `data-tema="claro"` la tarjeta salía blanca con el texto blanco encima, ilegible. El porqué: el vidrio es translúcido —navy al 38%— y en claro deja pasar el fondo claro de debajo, así que la tarjeta se aclara hasta el blanco. El texto del login, en cambio, siempre fue blanco: `panel.css` lo pinta con `--blanco` porque la tarjeta de antes era navy al 72% y tapaba en los dos temas. La solución no es oscurecer el vidrio: es que el login NO siga el tema del usuario. El anexo lo dice en su sección 9 —fondo aurora Orvik— y tiene su lógica: antes de iniciar sesión no hay usuario, así que no hay tema que seguir ni empresa que mostrar. Se fija aquí, sin depender de `data-tema` ni de lo que prefiera el sistema operativo. */ #login, :root[data-tema="claro"] #login { background: #070F1E; color-scheme: dark; } :root[data-tema="claro"] #login .login-card, #login .login-card { background: var(--vidrio-fondo); border-color: rgba(255, 255, 255, .16); } :root[data-tema="claro"] #login .login-card h1, :root[data-tema="claro"] #login .login-card .pc-frase, :root[data-tema="claro"] #login .login-card b { color: #F1F5F9 } :root[data-tema="claro"] #login .login-card p.sub, :root[data-tema="claro"] #login .login-card label, :root[data-tema="claro"] #login .pc-pasos li { color: #B4C0D0 } :root[data-tema="claro"] #login .login-card .fi { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); color: #F1F5F9; } :root[data-tema="claro"] #login .qr-cuenta, :root[data-tema="claro"] #login .pie-login { color: #8494AA } :root[data-tema="claro"] #login .login-card .btn.ghost, :root[data-tema="claro"] #login .qr-otro { color: #F1F5F9; border-color: rgba(255, 255, 255, .16); } /* El código SÍ es blanco con negro, y eso no se toca: una cámara necesita contraste real, no el del tema. */ /* ════════ EL LOGIN SE FIJA, Y AQUÍ VA EL PORQUÉ DEL ════════ Lo de arriba no bastó: en tema claro la pantalla seguía saliendo lavada en blanco con el texto encima ilegible. Son varias hojas pintando la misma caja --panel.css, los tokens y el tinte del fondo-- y ganar por orden y especificidad obliga a adivinar cuál pesa más en cada regla. En una pantalla de adorno eso se negocia. En la puerta de entrada no: si se aclara, nadie entra. Por eso aquí se fija y no se discute. No es pereza: es la única pantalla del sistema que NO tiene tema. El anexo lo dice en su sección 9 y la razón es simple: antes de iniciar sesión no hay usuario, así que no hay preferencia que respetar. */ #login::before { background: var(--fondo-tinte) } #login .login-card h1, #login .login-card .pc-frase, #login .login-card b, #login .num-grande { color: #F1F5F9 } #login .login-card p.sub, #login .login-card label, #login .pc-pasos li, #login .login-card .fi { color: #B4C0D0 } #login .qr-cuenta, #login .pie-login, #login .login-card .sub b { color: #8494AA } /* El código NO lleva ni nada: queda exactamente como panel.css lo dejó, 222 de caja, 9 de relleno y 204 de imagen. */ /* ── EL BRILLO DEL VIDRIO ERA EL QUE LO PINTABA DE BLANCO ── Los fondos ya estaban bien --lo medí: la tarjeta daba rgba(7,15,30,.55) y el login rgb(7,15,30)-- y aun así la pantalla salía blanca. No era el `background`: era el `::before` del brillo. Ese pseudoelemento usaba `var(--vidrio-brillo)`, que en tema oscuro es un blanco al 22% --un reflejo-- pero en tema claro vale `rgba(255,255,255,1)`: blanco OPACO. Cubriendo la tarjeta entera. Aquí el brillo se escribe entero y no depende del tema, por lo mismo que todo lo demás de esta pantalla: el login no tiene tema. */ /* El brillo lo da ahora la receta de `orvik-tokens.css`: un canto de 1 px con mascara, no un degradado sobre toda la superficie. Esto ultimo era un velo y fue lo que dejo la tarjeta blanca en claro. */ /* ═══════════════════════════════════════════════════════════════════ LA CLAVE, EN TELEFONO · 20/oct/2026 No: no lo haria. Lo que habia era la tarjeta de escritorio encogida. En un telefono eso significa una caja con borde y sombra flotando en medio de la pantalla, con aire muerto arriba y abajo, un titulo de 30 px, tres renglones de explicacion y un boton con degradado. Un telefono no enseña una tarjeta dentro de una pantalla: la pantalla ES la tarjeta. ── DE DONDE SALEN ESTAS MEDIDAS ── De ningun lado nuevo. Son las de `apps/guardia`, la puerta que ya esta en produccion y que Direccion aprobo: `.puerta` de 340 px, el logotipo de 82, el titulo de 27, la ayuda de 14.5 acotada a 270, el campo de 200 px con los seis digitos a 38 px separados 14, y el boton de 56 de alto a 280 de ancho. Un colaborador que entra por el telefono tiene que ver la misma puerta que ve un guardia, porque es la misma empresa y el mismo acto. Y el lienzo manda lo de arriba: «Antes de la clave, siempre Orvik» (MarcaPantallas, Lote 1). Por eso el logotipo no es el de su empresa. ── POR QUE ESTO NO TOCA LA ENTRADA DE PC ── Porque vive entero dentro de un `@media (max-width: 760px)`, y por debajo de 760 la entrada de PC ni siquiera se dibuja: ahi se decide mostrar la clave. La tarjeta del QR se queda exactamente como esta. ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 760px) { /* ── LA TARJETA DE VIDRIO SE QUEDA ── Primero se quito entera, con la idea de que en telefono la pantalla ES la tarjeta. Direccion la vio sin ella y sin ella no: *"me gusta el diseño"*, dicho sobre la version CON el vidrio. Asi que el vidrio se queda tal cual --fondo, borde, brillo y desenfoque, los de siempre-- y de telefono solo cambia lo de adentro: el logotipo, el tamaño del titulo, los seis digitos grandes y el boton plano. Lo unico que se toca de la caja es el aire de arriba, porque el logotipo quedaba pegado al filo. */ #login #colab-card { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; padding-top: 34px; } #login #colab-card h1 { font-size: 27px; font-weight: 900; letter-spacing: -.5px; margin: 18px 0 10px; text-align: center; } #login #colab-card .sub { font-size: 14.5px; line-height: 1.55; max-width: 270px; margin: 0 0 26px; text-align: center; } /* El rotulo «Clave» sobra: el titulo ya dice que es la clave, y en una pantalla de un solo campo nombrar el campo es repetirse. Se esconde a la vista pero se queda para quien usa lector de pantalla, que si necesita oir que es ese hueco. */ #login #colab-card .field { width: 100%; display: flex; justify-content: center } #login #colab-card .field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Los seis digitos, grandes y separados: se revisan de un vistazo antes de seguir. Las medidas son las de la app del guardia. */ #login #colab-card .fi { /* 236 y no los 200 de la app del guardia: alla la tipografia es Geist y aqui Outfit, mas ancha. Es el ancho medido de seis cifras tabulares a 38 px con 14 de separacion, mas el aire. */ width: 236px; max-width: 100%; text-align: center; font-size: 38px; font-weight: 900; letter-spacing: 14px; /* El interletraje empuja el ultimo digito contra el borde derecho; la sangria lo devuelve al centro. */ text-indent: 7px; border-radius: 18px; padding: 14px 0; } /* El placeholder no son seis digitos distintos: son seis ceros, el caracter mas ancho de esta fuente. Hereda las cifras tabulares, asi que mide exactamente lo mismo que la clave que va a escribirse encima y el campo no da ningun brinco al teclear el primero. */ #login #colab-card .fi::placeholder { letter-spacing: 14px } /* Cero degradados, que es regla de la casa. El boton toma el color de la marca, plano, y el texto que de verdad se lee encima. */ #login #colab-card .btn { background: var(--marca-principal); background-image: none; color: var(--marca-sobre-principal); width: 100%; max-width: 280px; min-height: 56px; font-size: 17px; margin-top: 22px; align-self: center; } } /* El logotipo de la puerta. En computadora no va: esa tarjeta se abre desde la del QR, que ya trae el suyo arriba. */ #login #colab-card .colab-logo { display: none } @media (max-width: 760px) { #login #colab-card .colab-logo { display: block; /* 68 y no los 82 de la app del guardia: alla el logotipo esta solo sobre la pantalla entera y aqui vive dentro de una tarjeta, donde a 82 pesaba mas que el titulo. */ width: 68px; height: 68px; object-fit: contain; filter: drop-shadow(0 6px 20px rgba(4, 20, 40, .45)); } } /* Los seis digitos, en computadora: lo que estaba escrito en el HTML como estilo en linea. Se mueve aqui para que la version de telefono pueda cambiarlo --un estilo en linea le gana a cualquier hoja-- y para que las medidas de esta pantalla vivan todas en el mismo sitio. */ #login .cod-6 { text-align: center; font-size: 28px; font-weight: 800; letter-spacing: .3em; /* La mitad del interletraje. El espaciado deja un hueco DESPUES del ultimo digito, asi que el conjunto se ve corrido a la izquierda; esto lo devuelve al centro exacto. */ text-indent: .15em; /* ── Y TODOS LOS DIGITOS MIDEN LO MISMO ── Outfit no es monoespaciada: medido, «000000» ocupa 236 px y «123456» 207. O sea que la clave se encoge y se estira sola conforme la persona teclea, y el placeholder se salia del campo por el borde derecho mientras los numeros de verdad cabian de sobra. `tabular-nums` le pide a la fuente su juego de cifras de ancho fijo, que es justo para lo que existe. */ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ═══════════════════════════════════════════════════════════════════ LA CLAVE CON EL VIDRIO DE DIRECCIÓN · 31-oct-2026 (Dirección aprobó la maqueta `docs/aud/mockups/logins-boton-luz/`, DECISIONES §1; los logins quedan liberados SÓLO para esto) Lo de arriba para `#colab-card` (la tarjeta de 340/420, esquina 28, título de 27 en 900, el recuadro gigante de la clave y dos botones macizos) queda pisado aquí, en todos los anchos: la tarjeta de la clave usa el MISMO vidrio que `corporativo/index.html` (380 de ancho, esquina 24, relleno 34/28, desenfoque 14), título de 19 y texto de 14, la clave en 6 casillas de 52 y «Volver» como texto subrayado. El botón «luz» vive en `boton-luz.css`. El logotipo NO se toca: es el archivo real con su medida de arriba (`.colab-logo`). Los textos tampoco. La tarjeta del QR (`#pc-card`) y la de autorizar no cambian. ── DE DÓNDE SALEN LOS VALORES (Dirección, 2-nov) ── Los nueve del vidrio son tokens: `orvik-tokens.css` §13. El bloque de variables que esta hoja declaraba se borró; aquí sólo se usan. Esta hoja la carga únicamente `apps/panel/index.html`, y ahí `orvik-tokens.css` se carga antes (medido: renglón 380 contra el 385), así que los nueve llegan siempre. 24 es `--r-contenedor`, 12 `--r-control`, 52 el alto del campo grande de 08 y la casilla activa usa `--marca-suave` y el aqua de la plataforma. ═══════════════════════════════════════════════════════════════════ */ #login #colab-card { display: block; width: 100%; max-width: var(--login-ancho); padding: var(--login-relleno); border-radius: var(--r-contenedor); border: .5px solid var(--vidrio-borde); background: var(--login-vidrio); -webkit-backdrop-filter: var(--login-filtro); backdrop-filter: var(--login-filtro); box-shadow: var(--login-sombra); font-family: var(--fuente-login); } #login #colab-card h1 { font: var(--login-t-titulo); letter-spacing: -.2px; margin: 0 0 6px; text-align: center; } #login #colab-card p.sub { font: var(--login-t-texto); max-width: none; margin: 0 0 var(--e-6); text-align: center; } /* El logotipo: el mismo archivo y la misma medida de arriba; sólo se centra en la tarjeta, que ya no es una columna flexible. */ #login #colab-card .colab-logo { margin: 0 auto var(--e-5) } /* «Clave» se oye, no se ve: el título ya dice que es la clave (como ya estaba en teléfono, ahora en todos los anchos). */ #login #colab-card .field { position: relative; display: block; width: 100%; margin: 0 0 22px } #login #colab-card .field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Las 6 casillas son la vista; `c-clave` queda encima, invisible, y recibe el dedo y el teclado. Letra de 16 para que el iPhone no haga zoom al tocar. */ #login #colab-card .fi { position: absolute; inset: 0; z-index: 1; width: 100%; min-height: 0; height: var(--login-casilla); padding: 0; margin: 0; border: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: 0; text-indent: 0; opacity: 0; } #login .clave-6 { display: flex; justify-content: center; gap: var(--e-2) } #login .clave-6 span { flex: 1 1 0; max-width: 44px; height: var(--login-casilla); display: grid; place-items: center; border-radius: var(--r-control); border: 1px solid var(--vidrio-borde); background: rgba(255, 255, 255, .06); color: #F1F5F9; font: 600 22px/1 var(--fuente-login); font-variant-numeric: tabular-nums; } #login .clave-6 span.on { border-color: var(--foco); box-shadow: 0 0 0 3px var(--marca-suave); } #login #colab-card .luz { margin: 0 } /* «Volver» como texto subrayado: no compite con «Entrar». */ #login #colab-card .volver { display: block; margin: var(--e-3) auto 0; min-height: var(--toque); padding: 0 var(--e-3); background: none; border: 0; color: #B4C0D0; font: 500 15px/20px var(--fuente-login); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }