/* Capa de ergonomia para las paginas de entrada: login, registro y privacidad.
   Va DESPUES de landing.css y del <style> de cada pagina, y solo cambia el
   aspecto: ni estructura, ni textos, ni ids, ni comportamiento.

   QUE CAMBIO EL 31/10/2026, Y POR QUE
   -----------------------------------
   Hasta hoy esta hoja REDEFINIA la paleta entera y las tres tipografias: traia
   los tokens de la "Sala de mando" -fondos azulados #0d0e11, acento #e5383b,
   IBM Plex Sans y Mono- y los montaba encima de landing.css. El efecto era que
   las tres puertas del producto se leian como otra marca distinta de la landing
   que llevaba hasta ellas: alguien pulsaba LOGIN en redsigma.app y aterrizaba
   en una pantalla de otro color y otra letra.

   AHORA NO DECLARA NI UN COLOR NI UNA FUENTE. La identidad sale entera de
   landing.css -que es la hoja de la landing publicada, la unica fuente de
   verdad de la marca- y esta hoja se queda con lo que de verdad aportaba: los
   blancos de interaccion. Objetivos de 52px, anillo de foco visible, casilla
   que se ve, campos que no se encogen en el movil.

   Si manana cambia el rojo de Red Sigma, cambia en landing.css y estas tres
   paginas lo siguen solas. Esa es la razon de no repetirlo aqui.

   CONTRASTES MEDIDOS sobre la paleta de la landing (AA pide 4.5:1 en texto y
   3:1 en componentes de interfaz):

       --bone  #f7e8ea sobre --surf #1e1a1b .......... 14.51:1
       --muted #c0b4b6 sobre --surf .................. 8.57:1
       --faint #8d8183 sobre --surf .................. 4.60:1
       --accent #e05561 sobre --surf ................. 4.63:1
       --accent-soft #ef8d96 sobre --surf ............ 7.32:1
       --ink #171314 sobre --accent (boton primario) . 4.95:1

   Los tres ajustados son `--faint`, `--accent` y el boton primario, y por eso
   `--faint` NO se usa sobre `--surf-2` en ninguna regla de aqui: ahi cae por
   debajo del minimo. Para cualquier texto que importe se usa `--muted`.

   El boton primario lleva texto OSCURO sobre el rojo, que es como lo resuelve
   la landing: el rojo de la marca es claro, y texto blanco encima se queda en
   2.4:1. No es una preferencia estetica, es el unico reparto que cumple. */

/* ----------------------------------------------------------------- tokens
   Los unicos que se declaran aqui, y todos salen de la paleta de la landing.
   Existen porque nombran COSAS DE ESTA PANTALLA -el anillo de foco, el borde
   de un campo- que la landing no tiene porque no lleva formularios. */
:root {
    /* 3px de anillo en `--accent-soft`: 7.32:1 sobre la caja, visible sin
       mirar a proposito. El foco se mueve con el teclado y hay que saber en
       todo momento donde esta. */
    --ent-anillo: var(--accent-soft);
    /* El borde de un campo es un componente de interfaz: le basta 3:1, no 4.5.
       Mas claro que `--rule-2` porque un campo tiene que decir donde empieza y
       donde acaba antes de que nadie lo toque. */
    --ent-campo-borde: rgba(247, 232, 234, 0.3);
    --ent-campo-fondo: var(--ink-2);
    /* Alto de los objetivos tactiles. 52 y no 44: estas pantallas se usan de
       una pasada y con prisa, y el minimo de 44 es un minimo, no un objetivo. */
    --ent-alto: 52px;
}

/* ------------------------------------------------------------------- base */
html { scroll-behavior: auto; }

/* landing.css aparta el body 232px para la barra lateral del sitio, que estas
   paginas no llevan: sin esto la caja sale descentrada hacia la derecha. */
@media (min-width: 1101px) { body { padding-left: 0; } }

/* Fondo quieto. La landing mueve dos aureolas de color detras del contenido;
   aqui estorban, porque lo unico que toca es leer tres campos y salir. */
body::after { display: none; animation: none; }

/* EL ANILLO DE FOCO NO SE QUITA NUNCA. Es lo unico que le dice a quien navega
   con teclado donde esta parado; sin el, el formulario solo se puede rellenar
   con raton. */
:focus-visible {
    outline: 3px solid var(--ent-anillo);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ------------------------------------------------------------------ cajas
   El filete de acento a la izquierda es lo que ata estas tres paginas entre
   si: son las puertas del producto y se reconocen de un vistazo. */
.acceso-caja, .reg-caja, .priv-caja {
    box-shadow: var(--shadow), inset 3px 0 0 var(--accent);
}

/* ---------------------------------------------------------------- botones */
.btn {
    min-height: var(--ent-alto);
    padding: 0 26px;
}
.btn:focus-visible {
    outline: 3px solid var(--ent-anillo);
    outline-offset: 2px;
}
/* Un boton apagado tiene que PARECER apagado sin depender solo del color: la
   opacidad lo dice tambien a quien no distingue el rojo del gris. */
.btn[disabled], .btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
}

/* ----------------------------------------------------------------- campos */
.campo label {
    margin-bottom: 7px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.campo input, .campo select, .campo textarea {
    min-height: var(--ent-alto);
    padding: 0 16px;
    border: 1.5px solid var(--ent-campo-borde);
    border-radius: var(--r-s);
    background: var(--ent-campo-fondo);
    color: var(--bone);
    /* Monoespaciada en lo que se teclea: un correo o un telefono se revisan
       caracter a caracter, y con ancho fijo se ve si falta un digito. */
    font-family: var(--font-mono);
    font-size: 14.5px;
    transition: border-color .18s var(--ease);
}
.campo textarea { padding: 14px 16px; }
.campo input::placeholder { color: var(--faint); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    border-color: var(--accent-soft);
    outline: 3px solid var(--ent-anillo);
    outline-offset: 2px;
}
/* El campo con error se marca por BORDE Y POR TEXTO, no solo por color: quien
   no distingue el rojo necesita leer que pasa. El texto lo pone el JS. */
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] {
    border-color: var(--sev-alta);
}
.campo__err { color: var(--sev-alta); font-size: 13.5px; }

/* El icono del campo se centra sobre el INPUT -etiqueta 18px + 7px de margen
   + mitad de los 52px-, no sobre toda la caja, que incluye ademas la pista y
   el hueco del error. */
.reg-campo { position: relative; }
.reg-campo input { padding-left: 44px; }
.reg-campo > label { line-height: 18px; }
.reg-campo > svg { position: absolute; left: 16px; top: 51px; color: var(--accent-soft); }
.reg-campo input:focus ~ svg { color: var(--accent-soft); }


/* --------------------------------------------------------------- casilla
   La del sistema no se puede teñir ni agrandar, y esta hay que poder darle
   con el dedo. Se dibuja a mano, pero sigue siendo un <input type=checkbox>:
   el teclado, el lector de pantalla y el `required` funcionan igual. */
.check {
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: start;
    margin: var(--s2) 0 var(--s3);
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
}
.check b { color: var(--bone); font-weight: 600; }
.check input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin: 0;
    cursor: pointer;
    border: 2px solid var(--muted);
    border-radius: 6px;
    background: var(--ent-campo-fondo);
    display: inline-grid;
    place-items: center;
    transition: background .18s var(--ease), border-color .18s var(--ease);
}
.check input[type=checkbox]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
/* La palomita en el color del fondo de la pagina, no en blanco: sobre el rojo
   de la marca el oscuro contrasta mas que el blanco. */
.check input[type=checkbox]:checked::after {
    content: "";
    width: 5px;
    height: 10px;
    margin-top: -2px;
    border: solid var(--ink);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}
.check input[type=checkbox]:focus-visible {
    outline: 3px solid var(--ent-anillo);
    outline-offset: 3px;
}

/* --------------------------------------------------------------- estados */
.form__estado {
    border: 1px solid var(--rule-2);
    border-radius: var(--r-s);
    background: var(--surf-2);
    color: var(--bone);
    font-size: 14.5px;
}
.reg-estado--mal { color: var(--sev-alta); border-color: var(--sev-alta); }
.reg-estado--bien { color: var(--sev-baja); border-color: var(--sev-baja); }

/* ------------------------------------------------------------- pantalla
   AQUI ESTABAN LAS REGLAS DE `.ver-*`, y se fueron el 31/10/2026 con la
   pagina que vestian: `web/verificar/` se retiro el 29/10/2026 cuando la liga
   del correo se sustituyo por el codigo de seis digitos. Eran codigo muerto
   -ninguna pagina de este arbol usa esas clases- y un selector que no pinta
   nada hace creer que la pagina sigue ahi. */
@media (max-width: 600px) {
    .acceso-caja, .reg-caja, .priv-caja { padding: 22px 18px; }
    .btn { padding: 0 20px; }
    /* 16px y no menos: por debajo de 16 el navegador del movil hace zoom solo
       al enfocar el campo, y la pantalla se queda descuadrada. */
    .campo input { font-size: 16px; }
}
@media (max-width: 400px) {
    .acceso-pantalla, .reg-pantalla, .priv-pantalla { padding: 12px; }
    .acceso-caja, .reg-caja, .priv-caja { padding: 20px 16px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}