/* La página de entrar de monografia.preview.rapidyx.com: el MISMO login de Costos (apps/finance/fe: pages/Login.tsx,
   estilo/acceso.css y los tokens de estilo/sistema.css), que es el de la granja, con el nombre de este sitio. Sin
   framework: lo de sistema.css que usa el login (las fuentes, los tokens del registro negro, la base, la cabecera, el
   botón y el campo) y, abajo, acceso.css tal cual.

   Las fuentes van al lado de este CSS (url sin carpeta): en la imagen, entrar/fuentes/ se copia a la misma carpeta que
   entrar.css, porque la puerta sirve sólo nombres sin carpetas bajo /entrar/ (ver el Dockerfile). */

/* ── fuentes (autoalojadas, OFL: fuentes/OFL.txt) ─────────────────────────────────────────────── */

@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("archivo-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("archivo-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: italic; font-weight: 800; font-stretch: 62% 125%; font-display: swap;
  src: url("archivo-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: italic; font-weight: 800; font-stretch: 62% 125%; font-display: swap;
  src: url("archivo-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "Archivo Respaldo"; font-style: normal; font-weight: 400 800; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 98.3%; ascent-override: 89.5%; descent-override: 21.4%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Respaldo"; font-style: italic; font-weight: 400 800; src: local("Arial Bold Italic"), local("Arial-BoldItalicMT"), local("Helvetica Neue Bold Italic"); size-adjust: 68.7%; ascent-override: 128.1%; descent-override: 30.6%; line-gap-override: 0%; }

/* ── tokens: el registro negro de sistema.css (el que usa el login; acá no hay selector de tema) ─────── */

:root, .cabecera, .registro-negro {
  color-scheme: dark;
  --fondo: #000000;
  --superficie: #0E0E10;     /* barra-dir: 1,1 sobre negro, lo mismo que blanco sobre papel */
  --superficie-2: #1B1B1D;   /* marco */
  --superficie-3: #2A2A2D;   /* anillo */
  --filete: #2E2E31;
  --filete-2: #3A3A3E;
  --borde-control: #8A8A84;  /* 1,5 px: inputs, chips, botones línea */
  --tinta: #F3F3EF;          /* papel */
  --tinta-2: #BDBDB8;        /* gris de lectura */
  --tinta-3: #9C9C97;        /* ceniza: 7,62:1 sobre negro */
  --foco: #F3F3EF;
  --accion: #2060E0;         /* rayo: lo que pedís */
  --accion-hondo: #1A4FBF;
  --sobre-accion: #FFFFFF;
  --ahora: #2060E0;          /* rayo: el tiempo de ahora (3,5:1 sobre la superficie negra, 5,5 sobre blanco) */
  --ahora-fondo: #13254A;
  --resalte: #16336E;
  --riel: #1B1B1D;
  --dato: #BDBDB8;           /* la columna de un día común: 10,7:1 sobre la superficie */
  --ok: #3E9568;             --ok-graf: #268255;       --ok-fondo: #13211B;
  --falla: #F87171;          --falla-graf: #F87171;    --falla-fondo: #2F1C1E;
  --aviso: #ECB655;          --aviso-graf: #ECB655;    --aviso-fondo: #292218;
  --neutro-fondo: #1F1F21;
  --pend: #3A3A3E;
  --velo: rgba(0, 0, 0, .66);
}

/* la forma y la letra van SÓLO en :root: si fueran con los colores, la cabecera las redefiniría y el alto de 44 px
   con el dedo no le llegaría a sus botones */
:root {
  --letra: "Archivo", "Archivo Respaldo", "Helvetica Neue", Arial, sans-serif;

  --r-fila: 4px;
  --r-control: 6px;
  --r-panel: 10px;
  --r-tarjeta: 14px;
  --alto-cabecera: 56px;
  --alto-control: 36px;
  --curva: cubic-bezier(.2, .7, .1, 1);   /* «abrir», la de todo lo interactivo */
}

@media (pointer: coarse) { :root { --alto-control: 44px; } }

/* ── base ─────────────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
/* las cifras tabulares en todas las piezas (cada `font:` abreviado resetea font-variant-*): la cuenta atrás no baila */
*, *::before, *::after { font-variant-numeric: tabular-nums; font-variant-ligatures: no-contextual; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-cabecera) + 8px); }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 400 14px/1.45 var(--letra);
  font-variant-numeric: tabular-nums;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
}
h1, h2, h3, h4 { font-family: var(--letra); margin: 0; line-height: 1.2; text-wrap: balance; }
/* la voz display de rapidyx.com: itálica 800 al 62 %, nunca bajo 24 px */
h1 { font-size: 32px; font-style: italic; font-weight: 800; font-stretch: 62%; letter-spacing: -.005em; line-height: .95; }
@media (min-width: 900px) { h1 { font-size: 40px; } }
h2 { font-size: 16px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
b, strong { font-weight: 600; }
/* el link de rapidyx.com: el color del texto que lo rodea, subrayado de 2 px que al pasar se apaga; nunca azul */
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .27em; }
a:hover { text-decoration-color: var(--tinta-3); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
::selection { background: var(--resalte); color: var(--tinta); }

/* ── la cabecera, el botón y el campo (sistema.css) ───────────────────────────────────────────── */

.cabecera {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  height: var(--alto-cabecera); padding: 0 16px;
  background: var(--fondo); color: var(--tinta); border-bottom: 1px solid var(--superficie-2);
}
/* el logo de Rapidyx (el archivo) + «Monografía G112» en la voz de texto: el logo manda, el sitio es un rótulo */
.marca { display: flex; align-items: center; gap: 11px; min-height: 44px; text-decoration: none; flex: none; color: var(--tinta); }
.marca img { display: block; height: 24px; width: auto; }
.marca .separa { width: 1px; height: 20px; background: var(--filete-2); }
.marca .nombre { font: 600 17px/1 var(--letra); padding-right: 2px; }

/* el botón de siempre es el «botón línea» de la marca: 1,5 px, texto 600, radio 6 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--alto-control); padding: 0 14px; border-radius: var(--r-control);
  border: 1.5px solid var(--borde-control); background: transparent; color: var(--tinta);
  font: 600 14px/1.1 var(--letra);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 200ms var(--curva), border-color 200ms var(--curva), transform 200ms var(--curva);
}
.btn:hover { border-color: var(--tinta); background: var(--superficie-2); }
/* apretado, como el botón de rapidyx.com: se achica a .98 en 120 ms y vuelve en 200 */
.btn:active { transform: scale(.98); transition-duration: 120ms; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; color: var(--tinta-3); border-color: var(--filete); background: transparent; transform: none; }
/* el primario es el rayo: «acá pedís». Uno por vista */
.btn.primario { background: var(--accion); border-color: var(--accion); color: var(--sobre-accion); }
.btn.primario:hover { background: var(--accion-hondo); border-color: var(--accion-hondo); }
.btn.primario:disabled { background: var(--superficie-3); border-color: var(--superficie-3); color: var(--tinta-3); }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span, .campo > label { font: 600 13px/1.2 var(--letra); color: var(--tinta-2); }
.entrada {
  height: var(--alto-control); padding: 0 10px; border-radius: var(--r-control);
  border: 1.5px solid var(--borde-control); background: var(--superficie); min-width: 0;
  font-size: 16px;
}
.entrada:hover { border-color: var(--tinta-2); }
.entrada:focus { outline: 2px solid var(--foco); outline-offset: 1px; border-color: var(--tinta); }
.entrada::placeholder { color: var(--tinta-3); opacity: 1; }
.ancho-completo { width: 100%; }

/* ── el login: estilo/acceso.css de Costos, tal cual ───────────────────────────────────────────── */

/* El login: el MISMO de la granja (granja-android, plataforma/web/src/estilo/acceso.css), con el nombre de este sitio.
   La banda negra de la cabecera con el logo blanco de Rapidyx (sin navegación), el titular en la voz display de la
   landing y el formulario en la tarjeta. La tira de 16 celdas: quieta en gris, se encienden en rayo mientras el API
   verifica, verdes al entrar y, con demasiados intentos, las que faltan de la espera en el ámbar del aviso.
   Los tokens del timeout de la granja son acá los del aviso (--aviso-graf, --aviso-fondo). */

.cabecera.cabecera-entrar { position: static; height: 76px; }
/* el logo blanco, grande y entero también en el teléfono: es lo primero que se ve. Las MISMAS medidas que /entrar de
   la granja (banda de 76 px, logo de 42, filete de 28, rótulo de 20): las tres herramientas se ven iguales. */
.cabecera-entrar .marca img.logo { height: 42px; width: auto; }
.cabecera-entrar .marca .separa { height: 28px; }
.cabecera-entrar .marca .nombre { font-size: 20px; }

.entrar {
  min-height: calc(100dvh - 76px); display: grid; align-items: start; justify-items: center;
  padding: 32px 16px max(40px, env(safe-area-inset-bottom));
}
.entrar-marco { width: min(1000px, 100%); display: grid; gap: 28px; }

.entrar-granja { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.entrar-granja h1 { font-size: 48px; line-height: .9; }
.entrar-bajada { color: var(--tinta-2); font-size: 16px; max-width: 34ch; margin: 0; }

/* la tira de la granja: 16 celdas */
.celdas.tira16 { display: block; width: 252px; max-width: 100%; height: 12px; margin-top: 6px; }
.celdas rect { fill: var(--pend); transition: fill 200ms var(--curva); }
.celdas rect.viva { fill: var(--ahora); }
.celdas rect.lista { fill: var(--ok-graf); }
.celdas rect.espera { fill: var(--aviso-graf); }
@media (prefers-reduced-motion: reduce) { .celdas rect { transition: none; } }

.entrar-panel {
  background: var(--superficie); border: 1px solid var(--filete); border-radius: var(--r-tarjeta);
  padding: 22px 20px 20px;
}
.entrar-aviso {
  display: flex; gap: 8px; align-items: flex-start; margin: 0 0 16px; padding: 10px 12px;
  border-radius: var(--r-control); background: var(--superficie-2); color: var(--tinta-2); font-size: 14px;
}
.entrar-aviso svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }

.entrar-form { display: flex; flex-direction: column; gap: 16px; }
/* 16 px en los campos: el teléfono no hace zoom al tocarlos; 44 px de alto para el dedo */
.entrar-form .entrada { width: 100%; height: 44px; font-size: 16px; }
.entrar-form .campo > label { font-size: 14px; color: var(--tinta); }

.clave-caja { position: relative; display: flex; }
.clave-caja .entrada { padding-right: 46px; }
.clave-caja .ver {
  position: absolute; top: 4px; right: 4px; width: 38px; height: calc(100% - 8px);
  display: grid; place-items: center; border: 0; border-radius: calc(var(--r-control) - 2px);
  background: transparent; color: var(--tinta-3); cursor: pointer;
}
.clave-caja .ver:hover { color: var(--tinta); background: var(--superficie-2); }
.clave-caja .ver[aria-pressed="true"] { color: var(--tinta); }
.clave-caja .ver svg { width: 18px; height: 18px; }
/* con el dedo, «Mostrar» mide 44×44: el campo crece a 52 de alto para que entre adentro */
@media (pointer: coarse) {
  .entrar-form .entrada { height: 52px; }
  .clave-caja .entrada { padding-right: 54px; }
  .clave-caja .ver { width: 44px; height: 44px; }
}

.entrada[aria-invalid="true"] { border-color: var(--falla); }
.entrar-error {
  display: flex; gap: 8px; align-items: flex-start; margin: 0;
  color: var(--falla); font: 600 14px/1.35 var(--letra);
}
.entrar-error svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.entrar-error.espera { color: var(--tinta); }
.entrar-error.espera svg { color: var(--aviso); }

/* «Entrar» es el rayo de la pantalla: el botón de la landing (48 de alto, 600, radio 6) */
.btn.entrar-boton { min-height: 48px; margin-top: 4px; font-size: 16px; }
.btn.entrar-boton:disabled { cursor: default; background: var(--superficie-3); border-color: var(--superficie-3); color: var(--tinta); }
.btn.entrar-boton[aria-busy="true"] { background: var(--accion-hondo); border-color: var(--accion-hondo); color: var(--sobre-accion); }
/* la cuenta regresiva: el ámbar del aviso, con el número en tinta */
.entrar-boton .cuenta-atras {
  margin-left: 6px; padding: 2px 7px; border-radius: var(--r-fila);
  background: var(--aviso-fondo); color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--aviso-graf); font-variant-numeric: tabular-nums;
}

@media (min-width: 760px) {
  .entrar { align-items: center; padding: 48px 40px; }
  .entrar-marco { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 64px; align-items: center; }
  .entrar-granja { gap: 18px; }
  /* el tamaño del h1 de la landing en escritorio */
  .entrar-granja h1 { font-size: clamp(64px, 6.111vw, 88px); }
  .entrar-bajada { font-size: 18px; }
  .entrar-panel { padding: 28px 28px 26px; }
}