/* ============================================================
   Entrada y tarjetas de autenticación (Tarea 4).
   Fuente: docs/specs/2026-09-21-tienda-liquid-glass.md, "Entrada" y
   "Geometría". Cubre `sessions/new` (Puerta 2, con su teclado de NIP) y el
   ajuste compartido de `.auth`/`.auth__card` (components.css) que también
   heredan `enrollments/new`, `activations/new` y `screen_baptisms/new`.

   El nombre es `.puerta` y no `.entrada` porque `.entrada*` era el bloque
   del `tablet.css` viejo, compartido entonces con `screen_choices#new`:
   reusarlo le habría cambiado el layout por debajo a una vista de otra
   tarea.
   ============================================================ */

/* ── El parche de `.auth` (components.css, compartido con el login de HQ) ──
   `.auth { display: grid; place-items: center; }` sin `grid-template-columns`
   deja la única pista implícita del tamaño de `.auth__card` (hasta 420px):
   un grid `auto` no encoge por debajo del contenido de sus celdas, así que
   a 390px la tarjeta se salía del viewport en vez de apretarse a `100%`. Con
   una pista explícita que SÍ puede llegar a 0 (`minmax(0, 1fr)`), la celda
   ahora sí encoge al ancho disponible y `width: min(420px, 100%)` de
   `.auth__card` por fin tiene un `100%` real contra el cual medirse. No se
   toca `components.css` (regla de la Tarea 4: ese archivo es de HQ también). */
body.tablet .auth {
  grid-template-columns: minmax(0, 1fr);
}

/* Zonas del bautizo de pantalla (antes un `<div role="radiogroup">` a secas,
   ahora dentro de `.auth__body`): los cuatro `.chip` se envuelven en vez de
   partir la tarjeta a 390px. */
body.tablet .auth__zonas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* El dibujo de la TV en el bautizo y en la ficha (spec 2026-09-30, §1.2): el
   marco acostado o parado, y un punto donde quedó el borde de arriba de la
   imagen horizontal —arriba, a la derecha o a la izquierda— para que el
   vendedor reconozca el sentido del giro sin leer. */
body.tablet .tv-dibujo {
  position: relative;
  display: inline-block;
  inline-size: var(--space-6);
  block-size: var(--space-5);
  border: 2px solid currentColor;
  border-radius: var(--space-1);
}

body.tablet .tv-dibujo--vertical_derecha,
body.tablet .tv-dibujo--vertical_izquierda {
  inline-size: var(--space-5);
  block-size: var(--space-6);
}

body.tablet .tv-dibujo::after {
  content: "";
  position: absolute;
  inline-size: var(--space-1);
  block-size: var(--space-1);
  border-radius: var(--radius-pill);
  background: currentColor;
  inset-block-start: var(--space-1);
  inset-inline-start: 50%;
  translate: -50% 0;
}

body.tablet .tv-dibujo--vertical_derecha::after {
  inset-block-start: 50%;
  inset-inline-start: auto;
  inset-inline-end: var(--space-1);
  translate: 0 -50%;
}

body.tablet .tv-dibujo--vertical_izquierda::after {
  inset-block-start: 50%;
  inset-inline-start: var(--space-1);
  translate: 0 -50%;
}

/* ── Avisos: capa flotante de vidrio, fuera del flujo ─────────────────────
   Antes vivían en el flujo del `<body>`, delante de `.shell`/`.puerta`/
   `.auth`, y empujaban la cabecera ~70px hacia abajo (hallazgo del revisor
   de la Tarea 2). `position: fixed` los saca del flujo sin tocar el resto
   del layout; los textos y las clases `.aviso--alert`/`.aviso--notice` son
   contrato y no cambian. `--vidrio-flota` (vía `.vidrio--flota` en el
   markup) porque flotan sobre lo que sea que haya debajo — cabecera,
   parrilla o la propia tarjeta de la entrada.

   Flotar sobre la cabecera obliga a dos cosas que la primera versión no
   tenía (medido en la revisión: en compacto el aviso cubría la cabecera
   ENTERA —wordmark, tienda y menú de perfil— y se quedaba ahí para siempre,
   porque no hay botón de cierre ni nada que lo retire):

     · `pointer-events: none` — el aviso se lee, no se toca. Así el dedo
       llega al menú de perfil aunque el aviso esté encima.
     · Se va solo a los `--aviso-vida` segundos. Sin JS y sin botón de
       cierre: un aviso es un mensaje de ida, y el vendedor tiene las manos
       ocupadas con el cliente enfrente. `role="status"` (en el markup) ya
       lo anuncia al leer de pantalla en cuanto aparece.

   El desvanecido de salida NO se apaga con `prefers-reduced-motion`: lo que
   esa preferencia pide es que no haya movimiento, y aquí no hay ninguno —
   solo opacidad. Lo que sí importa es que el aviso termine `hidden`: si solo
   bajara la opacidad seguiría capturando el `role="status"` y el espacio. */
body.tablet .avisos {
  --aviso-vida: 6s;
  --aviso-desvanecido: .4s;
  position: fixed;
  z-index: 60; /* por encima de cabecera/cápsula/barra (40/39) y su menú (50) */
  top: calc(var(--margen) + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(480px, calc(100% - var(--margen) * 2));
  pointer-events: none;
  animation: aviso-se-va var(--aviso-desvanecido) ease var(--aviso-vida) forwards;
}
/* Nombre propio y no `fade`: `@keyframes` no se puede encerrar bajo
   `body.tablet` (no es un selector), así que el nombre es lo único que evita
   que choque con una animación de HQ. */
@keyframes aviso-se-va {
  to { opacity: 0; visibility: hidden; }
}
body.tablet .aviso {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radio-tarjeta);
  font-size: var(--text-s);
  text-align: center;
  color: var(--tinta-1);
}
/* `tienda/10-base.css` (Tarea 1) ya distingue el BORDE de cada estado; el
   color y el fondo se completan aquí con el mismo truco: reapuntar
   `--color-danger`/`--color-ok`/sus "-soft" (ya aclarados para fondo oscuro
   por `tienda/00-tokens.css` y `10-base.css`) — el mismo patrón que
   `.flash--alert`/`.flash--notice` heredan gratis de `components.css`, que
   `.aviso` no tiene por ser una clase exclusiva del iPad. Va después de
   `10-base.css` en la carga (orden alfabético de Propshaft), así que gana
   la cascada sin necesitar más especificidad. */
body.tablet .aviso--alert { color: var(--color-danger); background: var(--color-danger-soft); }
body.tablet .aviso--notice { color: var(--color-ok); background: var(--color-ok-soft); }

/* ── `.puerta`: Entrada, dos columnas en horizontal, una apilada en vertical
   y compacto (spec, "Entrada"). Flex y no grid: los dos hijos necesitan
   poder encoger por debajo de su ancho de contenido sin el mismo desborde
   que ya se vio arriba en `.auth` — `min-width: 0` en los dos es lo que lo
   permite (el default de un hijo flex es `min-width: auto`, que en la
   columna angosta de un teléfono habría vuelto a desbordar). */
body.tablet .puerta {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: calc(var(--margen) + env(safe-area-inset-top))
           calc(var(--margen) + env(safe-area-inset-right))
           calc(var(--margen) + env(safe-area-inset-bottom))
           calc(var(--margen) + env(safe-area-inset-left));
}
body.tablet .puerta__intro {
  flex: 1 1 360px;
  min-width: 0;
  max-width: 480px;
}
body.tablet .puerta__tarjeta {
  flex: 0 1 420px;
  min-width: 0;
  width: 100%;
}
@media (orientation: portrait) {
  body.tablet .puerta {
    flex-direction: column;
    /* `align-items` cambia de eje con `flex-direction`: en fila alineaba la
       ALTURA (inofensivo); en columna pasa a alinear el ANCHO, y `center`
       ahí encoge cada hijo a su contenido máximo en vez de al disponible —
       el párrafo de `.puerta__texto` en una sola línea es más ancho que
       390px, así que la columna se ponía tan ancha como ÉL y desbordaba.
       `stretch` es lo que deja que `max-width` de abajo por fin corte al
       ancho real de la pantalla. */
    align-items: stretch;
    /* Centrado, no "flex-start": con los dos bloques a su alto natural
       (ver `flex: none` abajo), un iPad vertical (mucho más alto que su
       contenido) se ve mejor con la intro y la tarjeta a la mitad de la
       pantalla que pegadas arriba con medio aparato vacío debajo. */
    justify-content: center;
    padding-block: calc(var(--margen) + env(safe-area-inset-top) + var(--hueco))
                   calc(var(--margen) + env(safe-area-inset-bottom));
    text-align: center;
  }
  body.tablet .puerta__intro,
  body.tablet .puerta__tarjeta {
    /* `flex: 1 1 360px`/`0 1 420px` (arriba) reparten ANCHO sobrante en
       fila; en columna ese mismo `flex-grow` reparte ALTO sobrante, y
       `.puerta__intro` (el que crece) se estiraba para ocupar todo el
       espacio vertical libre — un hueco enorme entre la píldora de la
       tienda y la tarjeta. `flex: none` deja que cada uno mida solo lo
       que su contenido necesita; el espacio entre los dos es `gap`, no
       una tercera "columna" invisible creciendo entre ambos. */
    flex: none;
    width: 100%;
    max-width: min(480px, 100%);
    margin-inline: auto;
  }
}

/* ── Columna izquierda: wordmark, título, contexto y la píldora de la
   tienda enlazada (spec, "Entrada"). Sin "Cambiar" ni nombre de red: eso
   asume una detección de WiFi que esta pantalla no hace (decisión 6 de la
   spec, "rediseño significa rediseño" — no se construyen funciones que hoy
   no existen); la píldora solo confirma la tienda real del `current_tablet`. */
body.tablet .puerta__logo { display: flex; color: var(--tinta-1); margin-bottom: var(--hueco); }
@media (orientation: portrait) { body.tablet .puerta__logo { justify-content: center; } }
body.tablet .puerta__logo svg { height: 22px; width: auto; }

body.tablet .puerta__titulo {
  margin: 0 0 var(--space-3);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--tinta-1);
}
body.tablet .puerta__texto {
  max-width: 46ch;
  margin: 0 0 var(--hueco);
  color: var(--tinta-2);
  font-size: var(--text-m);
  line-height: 1.5;
}
@media (orientation: portrait) { body.tablet .puerta__texto { margin-inline: auto; } }

body.tablet .puerta__tienda {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control);
  padding: 0 var(--space-4);
  margin: 0;
  border-radius: var(--radio-control);
  background: var(--vidrio-2);
  color: var(--tinta-1);
  font-size: var(--text-s);
  font-weight: var(--weight-medium);
}

/* ── Columna derecha: la tarjeta con sus dos estados ("Quién" y "NIP") ────
   `.puerta__quien` y cada `.puerta__nip` se turnan por `hidden` (lo pone el
   controlador `nip`); los dos caben en el flujo normal de la tarjeta, sin
   posicionamiento absoluto — solo uno está visible a la vez. */
body.tablet .puerta__pregunta,
body.tablet .puerta__nip-titulo {
  margin: 0 0 var(--hueco);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
  color: var(--tinta-1);
  text-align: center;
}

/* `auto-fit` + tope de 180px + `justify-content: center`, y los tres hacen
   falta: con una tienda de UN solo vendedor, `auto-fill` dejaba en pie la
   columna vacía y la ficha se quedaba pegada a la izquierda con medio panel de
   aire al lado. `auto-fit` colapsa la columna que nadie ocupa, el tope impide
   que la ficha suelta se estire a lo ancho de la tarjeta (un botón enorme para
   un nombre) y `justify-content` centra lo que queda.

   El caso de siempre no se mueve: en la tarjeta (~370px por dentro) caben dos
   columnas de ~179px, que es justo lo que ya medían con `1fr`. Con 4
   vendedores siguen siendo dos columnas y dos renglones. */
body.tablet .puerta__gente {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 180px));
  justify-content: center;
  gap: var(--space-3);
}
/* Es un `<a>` (quien ya tiene NIP: salta a su panel) o un `<button>` dentro
   de un `<form>` (quien todavía no, spec: "Estrenar NIP") — mismo aspecto
   para los dos, `text-decoration: none` por si acaso es el enlace. */
body.tablet .puerta__persona {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: calc(var(--tap) * 2);
  padding: var(--space-4);
  border: 1px solid var(--vidrio-borde);
  /* Va DENTRO de `.puerta__tarjeta`, así que su radio es el interior
     (regla 1 de "Geometría"), no el de la tarjeta que la contiene. */
  border-radius: var(--radio-interior);
  background: var(--vidrio-2);
  box-shadow: var(--vidrio-relieve);
  color: var(--tinta-1);
  cursor: pointer;
  font: var(--weight-medium) var(--text-m) var(--font-sans);
  text-align: center;
  text-decoration: none;
  transition: background var(--transicion);
}
body.tablet .puerta__persona:hover,
body.tablet .puerta__persona:focus-visible { background: var(--vidrio-activo); }
/* Quien todavía no tiene NIP puesto (spec: "Estrenar NIP donde hoy aplica",
   mismo texto y mismo destino que ya usaba esta pantalla, movidos aquí). */
body.tablet .puerta__persona-nota { color: var(--tinta-3); font-size: var(--text-xs); font-weight: var(--weight-regular); }

body.tablet .puerta__avatar,
body.tablet .puerta__nip-quien .puerta__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  flex: none;
  border-radius: var(--radio-control);
  background: var(--vidrio-2);
  border: 1px solid var(--vidrio-borde);
  color: var(--tinta-1);
  font-size: var(--text-l);
  font-weight: var(--weight-medium);
}
body.tablet .puerta__nombre { display: block; }

/* El panel de NIP: identidad de quien entra, puntos, campo real y teclado
   (spec, "Entrada"). */
body.tablet .puerta__nip-quien {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--hueco);
}
body.tablet .puerta__nip-quien .puerta__nombre {
  font-size: var(--text-l);
  font-weight: var(--weight-medium);
  color: var(--tinta-1);
}

body.tablet .puerta__puntos {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin: 0 0 var(--hueco);
}
body.tablet .puerta__punto {
  width: var(--space-3);
  height: var(--space-3);
  border-radius: var(--radio-control);
  border: 1px solid var(--vidrio-borde);
  background: transparent;
  transition: background var(--transicion), border-color var(--transicion);
}
body.tablet .puerta__punto--on { background: var(--solido); border-color: var(--solido); }

/* El campo real (spec: "el input sigue en el DOM"). Sin JS es un `.input`
   normal, tecleable con el teclado del sistema — el fallback de siempre.
   `[readonly]` SOLO lo pone el controlador `nip` al conectar: una vez que
   los puntos de arriba son la señal visual, mostrar el NIP en claro debajo
   del teclado no aporta nada y sí expone el dígito a quien mire por encima
   del hombro del vendedor. */
body.tablet .puerta__nip-campo {
  display: block;
  margin: 0 auto var(--hueco);
  max-width: 200px;
  text-align: center;
  letter-spacing: .5em;
}
body.tablet .puerta__nip-campo[readonly] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Teclado 3×4 de teclas de vidrio (spec, "Entrada": teclas de 64 px; aquí
   `--tap-xl`, el token de los controles del iPad, que mide 62). Todo botón es
   `inline-flex` centrado (Geometría, regla 4) — nunca padding vertical. */
body.tablet .puerta__teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--hueco);
}
/* Trae también la clase de átomo `.vidrio` (10-base.css) por el borde y el
   relieve; su `padding: var(--relleno)` se anula aquí porque la tecla se
   dimensiona por `height: var(--tap-xl)`, no por relleno — con el de
   `.vidrio` puesto, el número quedaba apretado contra el borde inferior. */
body.tablet .puerta__tecla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--tap-xl);
  padding: 0;
  line-height: 1;
  border: 1px solid var(--vidrio-borde);
  /* Interior, como las tarjetas de persona: el teclado vive dentro de
     `.puerta__tarjeta` (regla 1 de "Geometría"). */
  border-radius: var(--radio-interior);
  background: var(--vidrio-2);
  box-shadow: var(--vidrio-relieve);
  color: var(--tinta-1);
  font: var(--weight-medium) var(--text-xl) var(--font-sans);
  cursor: pointer;
  transition: background var(--transicion);
}
body.tablet .puerta__tecla:hover,
body.tablet .puerta__tecla:active { background: var(--vidrio-activo); }
/* Volver (abajo a la izquierda) y borrar (abajo a la derecha): mismo tamaño
   de tecla, ícono en vez de dígito (spec, "Entrada"). */
body.tablet .puerta__tecla--secundaria { color: var(--tinta-2); font-size: var(--text-l); }

/* «Conectar» ocupa el ancho de la tarjeta, como cualquier acción primaria de
   este lenguaje — el botón mismo ya es `inline-flex` centrado por el átomo
   `.btn` (10-base.css); aquí solo se le da el ancho completo.

   `scroll-margin`: es el ancla con la que `nip#abrir` arrastra la vista
   cuando la tarjeta no cabe (teléfono acostado). Sin este margen el botón
   queda pegado al borde de abajo, como si la pantalla lo hubiera cortado. */
body.tablet .puerta__nip .btn {
  width: 100%;
  scroll-margin-block-end: var(--margen);
}