/* =========================================================================
   ARMAZÓN — ACCESO
   Las nueve pantallas de `templates/registration/`: entrar, cuenta bloqueada,
   recuperar contraseña (4 pasos) y cambiar contraseña (2).

   ---------------------------------------------------------------------
   POR QUÉ NO ES UN ARQUETIPO
   ---------------------------------------------------------------------
   Los cinco arquetipos describen cómo se trabaja DENTRO de una sub-app, y
   estas pantallas no son de ninguna: no hay fila, ni expediente, ni KPI, ni
   conversación, ni ajuste. Es la capa que el plan (§3.1) dejó apuntada como
   «shell con/sin sidebar», ortogonal a los arquetipos: una caja centrada, sin
   navegación, con una sola cosa que hacer.

   Y es chrome de PLATAFORMA, no de app: es la primera pantalla del producto y
   el único sitio donde el logotipo es el protagonista. Por eso vive aquí y no
   en `apps/`, y por eso cuando OdontoHR decida su marca podrá reutilizar este
   fichero tal cual — no hay ni un valor de marca escrito dentro.

   ---------------------------------------------------------------------
   DÓNDE ESTÁ EL ACENTO (DESIGN.md §5: tres sitios como mucho)
   ---------------------------------------------------------------------
   Logotipo · botón primario · anillo de foco. Ni un borde, ni un icono, ni un
   fondo más. El estado de estas pantallas —sesión caducada, credenciales mal,
   correo enviado, enlace expirado— lo cuenta `.ds-note` con su icono y su
   texto, que es el componente que ya existe para eso.

   Se carga solo en estas pantallas, en el hueco de arquetipo del `extra_css`.
   ========================================================================= */

/* =========================================================================
   1. EL LIENZO
   Centrado en la ventana. Fondo escalonado para que la caja blanca se
   despegue sin sombra (DESIGN.md §1: las tarjetas no llevan sombra).
   ========================================================================= */

.ds-acceso {
  display: flex;
  min-height: 100vh;
  padding: var(--s-9) var(--s-6);
  background: var(--n-50);
}

/* El lienzo llega al borde de la ventana aunque NADIE haya reseteado el `body`
   (2026-08-17). Las nueve pantallas de `registration/` pasan por `base.html`, que
   trae `static/css/base.css` con su reset, así que esto no cambia nada allí. Pero
   la puerta de la PWA del Coordinador es un documento autónomo —no puede pasar
   por `base.html`, que inyecta tres `<script>` que su contrato prohíbe— y sin
   esta regla el margen por defecto del navegador le dejaba una banda blanca
   alrededor del lienzo. El armazón es quien necesita tocar el borde, así que la
   regla es suya y no de la app que lo use. */
body:has(.ds-acceso) { margin: 0; }

/* La medida de la caja. Un formulario de dos campos leído en una columna
   estrecha: más ancho no cabe más información, solo hace el renglón más
   largo. Es el mismo criterio con el que el arquetipo B fija su lista.

   Centrado con `margin: auto` y NO con `align-items/justify-content: center`
   en el contenedor: cuando el contenido es más alto que la ventana —la
   pantalla de cambio de contraseña en un portátil, tres campos y la lista de
   reglas— el centrado por alineación desborda por ARRIBA y esa parte no se
   alcanza con scroll. Los márgenes automáticos centran igual y ceden cuando
   no cabe. */
.ds-acceso__caja {
  width: 100%;
  max-width: 400px;
  margin: auto;
}

/* =========================================================================
   2. LA MARCA
   El logotipo va FUERA de la tarjeta, no dentro: dentro competiría con el
   título por el mismo espacio y la tarjeta empezaría por decoración en vez
   de por lo que hay que hacer.
   ========================================================================= */

.ds-acceso__marca {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s-8);
}

.ds-acceso__logo {
  width: 220px;
  max-width: 100%;
  height: auto;
}

/* =========================================================================
   3. LA CABECERA DE LA TARJETA
   Título de lo que se va a hacer y, debajo, la frase que sitúa. El título es
   un <h1> real: estas pantallas no tenían ninguno y el lector de pantalla
   entraba en un documento sin encabezados.
   ========================================================================= */

.ds-acceso__titulo {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-tight);
}

.ds-acceso__sub {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--n-500);
}

/* =========================================================================
   4. EL FORMULARIO
   ========================================================================= */

.ds-acceso__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}

/* 16px en los campos, y no `--fs-base`, por una razón que solo se ve en el
   móvil: Safari de iOS hace zoom al enfocar un campo de menos de 16px, y el
   zoom deja la caja de acceso descuadrada justo cuando se empieza a teclear.
   Es el único sitio del sistema donde el tamaño del campo se sale de la
   escala de densidad, y es porque aquí el ancho no es escaso. */
.ds-acceso .ds-input,
.ds-acceso .ds-select {
  font-size: var(--fs-md);
}

/* La acción ocupa el ancho de la caja. En una pantalla con una sola cosa que
   hacer, un botón a su ancho natural deja la mitad del renglón preguntando
   qué más había. */
.ds-acceso__enviar {
  width: 100%;
  margin-top: var(--s-3);
}

/* EL CÓDIGO DE UN SOLO USO (2026-08-17, con la puerta de la PWA del Coordinador).
   Sube al armazón y no se queda en la hoja de la app porque ya estaba escrito
   **cuatro veces** por separado —club dental, club estética, la vinculación de
   WhatsApp (`.wa-vinc__codigo`) y el Coordinador—, que es el criterio de
   DESIGN.md §2 para llevar algo al núcleo. Un código que llega por Telegram o
   por email se teclea igual en los cuatro sitios, y los cuatro son accesos.

   Mono y NO Sans con un tracking inventado: la anchura fija ya separa los
   dígitos sin escribir un literal de espaciado, y `--font-mono` es lo que el
   sistema usa para lo que se lee carácter a carácter. Tabular por si el campo
   llega con valor: los dígitos no deben bailar al reescribirlos.

   El selector repite `.ds-acceso` porque la regla de arriba —`.ds-acceso
   .ds-input`, que sube el campo a 16px por el zoom de iOS— pesa (0,2,0) y a
   menos peso le ganaría ella. */
.ds-acceso .ds-acceso__codigo {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  letter-spacing: var(--track-micro);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   5. LAS REGLAS DE LA CONTRASEÑA
   Bloque de apoyo, no un aviso: se lee ANTES de teclear y no informa de nada
   que haya pasado, así que no puede ir de `.ds-note` —que es para el estado—
   ni robarle el peso al formulario.
   ========================================================================= */

.ds-acceso__reglas {
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-sm);
  background: var(--n-50);
}

.ds-acceso__reglas ul {
  margin-top: var(--s-4);
  padding-left: var(--s-7);
  list-style: disc;
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--n-600);
}

/* =========================================================================
   6. EL PIE
   Una salida y solo una: desde el acceso se va a recuperar la contraseña,
   desde cualquier otra pantalla se vuelve al acceso. Va en el pie del panel
   —fondo escalonado y regla— para que se lea como lo que es: lo otro que se
   puede hacer aquí, no una segunda acción principal.
   ========================================================================= */

.ds-acceso__pie {
  justify-content: center;
  font-size: var(--fs-sm);
}

/* =========================================================================
   7. ALTURAS CORTAS — O SEA: EL TECLADO ABIERTO   (2026-08-17)

   Avisado sobre la puerta de la PWA del Coordinador, y NO era de ella: es de
   este fichero, o sea de las nueve pantallas de `templates/registration/`.

   El teclado de un móvil **no cambia la anchura, cambia la altura**: deja unos
   300–420 px útiles de los 664 de un iPhone 12. Y este armazón nació para un
   login de escritorio: caja centrada detrás de un logotipo de 220 px. Al
   acortarse la altura, lo primero que se ve es la ceremonia y **el campo donde
   hay que teclear se va por debajo del pliegue** — con el teclado ya levantado,
   que es el peor momento para pedirle a alguien que busque.

   Medido a 390 px de ancho, con el scroll arriba del todo, midiendo cuántos
   píxeles del bloque «campo + acción» quedaban FUERA:

   |                          | 300px | 360px | 420px |
   |--------------------------|------:|------:|------:|
   | `/login/`                |  191  |  131  |   71  |
   | `/password-reset/`       |   93  |   33  |    0  |
   | Coordinador, paso 2      |  150  |   90  |   30  |
   | Coordinador, paso 1      |   32  |    0  |    0  |

   En el paso 2 del Coordinador ni el campo se veía: su borde inferior caía en
   382 con 300 de ventana.

   QUÉ SE RETIRA, Y EN QUÉ ORDEN
   Primero la identidad y luego la orientación, porque son las dos cosas que
   dejan de hacer falta en cuanto alguien está tecleando:
   1. **el logotipo** — con el teclado abierto la identidad ya la dan el título
      y el rótulo de la app; era el bloque más caro (88 px con su margen);
   2. **la frase que sitúa** (`__sub`) — sitúa a quien lee, no a quien teclea;
   3. el aire: relleno del lienzo, relleno del panel y los dos ritmos verticales.
   No se toca nada de lo que hay que leer o pulsar: el título, el aviso de estado
   (`.ds-note`, que es donde dice A DÓNDE se ha mandado el código), el campo, la
   acción ni el pie.

   ⚠️ EL LITERAL DE LA CONSULTA. DESIGN.md §6 solo fija puntos de ruptura de
   ANCHURA (640/1024) y dice que son los únicos literales fuera de `tokens.css`.
   Éste es el primero de ALTURA del sistema, y el informe pide llevarlo al
   contrato. 560 px porque por debajo de eso ninguna pantalla de acceso cabía
   entera (a 500 sí cabían todas menos `/login/`), y porque deja fuera cualquier
   escritorio y cualquier tableta en horizontal: solo entra un teléfono, con o
   sin teclado.
   ========================================================================= */

@media (max-height: 560px) {
  .ds-acceso { padding: var(--s-4) var(--s-6); }

  .ds-acceso__marca,
  .ds-acceso__sub { display: none; }

  /* Ganan a `components.css` y a `base.css` por peso (0,2,0) y solo aquí. */
  .ds-acceso .ds-panel__body { padding: var(--s-5); }
  .ds-acceso .ds-stack { gap: var(--s-5); }
  .ds-acceso__form { gap: var(--s-5); }
}