/* ── 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;
}