/* ============================================================================
   LA PUERTA — estética común de las pantallas de entrada.
   ============================================================================
   La usan `entrar.html` (elección), `ingresar.html` (login del personal) y
   `jubilados.html` (alta). Son tres páginas que la misma persona puede recorrer
   en un mismo trámite y antes cada una tenía su propio `<style>`.

   Línea de diseño tomada de **Venta Ambulante** (`public/css/app.css` +
   `index.html` › `#v-menu`), por pedido explícito del usuario.

   🔴 NO HAY TARJETA CONTENEDORA, y ÉSE era el error de la primera versión.
   Se había metido todo —marca, botones, pie— adentro de una caja blanca flotando
   en el medio de la pantalla. Venta Ambulante hace lo contrario: la marca y las
   tarjetas van SUELTAS sobre el fondo, y las únicas superficies blancas son los
   botones y las tarjetas de rol. La diferencia es enorme en un teléfono: la caja
   encajona el contenido en dos tercios de la pantalla y se lee como una página
   web adentro de un marco; sin caja, la app ES la pantalla.
   Comentario textual del usuario (28-ago-2026): *«el login sigue metido todo en
   una tarjeta, no tiene la estructura de venta ambulante»*.

   ⚠️ ESTAS PÁGINAS NO CARGAN `styles.css`. Son páginas de paso: se pintan solas
   para no arrastrar el CSS del sitio ni su conmutador de tema.
   ============================================================================ */

:root {
  --pu-verde:       #007242;
  --pu-verde-suave: #00925a;
  --pu-tinta:       #16281e;
  --pu-tenue:       #4a5b52;
  --pu-debil:       #6b7d73;
  --pu-linea:       rgba(0, 114, 66, .16);
  --pu-linea-viva:  rgba(0, 114, 66, .42);
  --pu-fondo:       #f4f7f5;
  --pu-punto:       rgba(0, 114, 66, .07);
  --pu-sombra:      0 2px 10px rgba(0, 60, 35, .05);

  /* El paso de la cuadrícula CRECE con el ancho. Es lo que más fácil se pasa por
     alto: 22 px dan unas diez marcas en un teléfono —la densidad que se buscaba—
     y ochenta en un monitor. Lo que hay que mantener parejo es la cantidad de
     marcas a la vista, no el tamaño de la celda. */
  --pu-paso: 22px;
}
@media (min-width: 640px)  { :root { --pu-paso: 28px; } }
@media (min-width: 1100px) { :root { --pu-paso: 34px; } }

/* ── El lienzo ─────────────────────────────────────────────────────────────
   🔴 `overscroll-behavior-y: none` ES EL ARREGLO DEL SCROLL, y no `100dvh`.
   La primera versión ya usaba `dvh` y el contenido entraba entero —medido, sin
   scroll— y sin embargo al arrastrar de arriba hacia abajo la pantalla se movía
   igual. Eso NO era scroll: era el **rebote elástico** del navegador móvil, que
   deja despegar la página aunque no haya nada más abajo. Se siente idéntico a un
   scroll y no se arregla midiendo alturas — hay que apagarlo. Copiado de
   `html, body` de Venta Ambulante, donde ya estaba resuelto.

   🔴 `100dvh` Y NO `100vh`: en un teléfono `100vh` mide la altura CON la barra
   de direcciones escondida, así que la página queda más alta que lo visible.
   `100vh` primero como respaldo para navegadores viejos.

   🔴 `min-height` y no `height`: si el contenido crece —un error largo, el panel
   de instalación abierto— con altura fija se recortaría sin poder desplazarse. */
html, body.pin-puerta {
  overscroll-behavior-y: none;
}
/* `manipulation` mata el doble-toque para agrandar y, de paso, el retardo de
   300 ms que el navegador esperaba por si venía el segundo toque. En una pantalla
   que se usa con una mano, ese retardo se siente como que el botón no anduvo. */
html, body.pin-puerta, .pin-puerta button, .pin-puerta a { touch-action: manipulation; }

body.pin-puerta {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  background-color: var(--pu-fondo);
  background-image: radial-gradient(var(--pu-punto) 1.2px, transparent 1.3px);
  background-size: var(--pu-paso) var(--pu-paso);
  color: var(--pu-tinta);
  font-family: var(--pin-font, 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif);
  font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* ── La columna ────────────────────────────────────────────────────────────
   🔴 Es TRANSPARENTE. Conserva el nombre `.pin-puerta-caja` porque `pin-entrar.js`
   y `jubilados.js` lo escriben en `className` junto con el estado, pero ya no
   dibuja ninguna caja: sólo limita el ancho y centra. */
.pin-puerta-caja {
  width: 100%; max-width: 460px; margin: 0 auto; box-sizing: border-box;
  text-align: center;
}

/* 🔴 LOS ESTADOS SÍ SON UNA TARJETA, y no es una inconsistencia: «Ingresando…»,
   «Entrá desde el Backoffice» o «Listo» son MENSAJES, y un mensaje adentro de un
   recuadro se lee como lo que es. Lo que no puede ser una tarjeta es la pantalla
   de entrada, donde el contenido es la app misma. */
.pin-puerta-caja.cargando,
.pin-puerta-caja.error,
.pin-puerta-caja.ok {
  background: #fff; border: 1px solid var(--pu-linea); border-radius: 22px;
  padding: 34px 26px; box-shadow: 0 18px 50px rgba(0, 60, 35, .10);
}
.pin-puerta-caja.error { border-color: rgba(190, 18, 60, .28); }
.pin-puerta-caja.ok    { border-color: rgba(0, 114, 66, .38); }

/* El panel de Personal es una LISTA, no una pantalla de trámite: ancha, alineada
   a la izquierda y sobre superficie blanca para separarla del fondo. */
.pin-puerta-caja.ancha {
  max-width: 780px; text-align: left;
  background: #fff; border: 1px solid var(--pu-linea); border-radius: 22px;
  padding: 30px 28px; box-shadow: var(--pu-sombra);
}
.pin-puerta-caja.ancha .pin-puerta-logo { margin-left: 0; }

/* ── La marca ──────────────────────────────────────────────────────────────
   Más grande que antes: sin caja alrededor, el logo es lo que ancla la pantalla.
   El desplazamiento es ÓPTICO — el lockup no es simétrico (escudo a la izquierda,
   texto extendido a la derecha), así que el centro geométrico no coincide con el
   que percibe el ojo. Mismo ajuste que `.login-logo` en styles.css. */
.pin-puerta-logo {
  height: 54px; width: auto; display: block; margin: 0 auto 20px;
  transform: translateX(-5px);
}
.pin-puerta-caja.cargando .pin-puerta-logo,
.pin-puerta-caja.error .pin-puerta-logo,
.pin-puerta-caja.ok .pin-puerta-logo { height: 44px; margin-bottom: 16px; }

.pin-puerta-caja h1 {
  margin: 0 0 6px; font-size: 25px; font-weight: 700; letter-spacing: -.015em;
  line-height: 1.2; text-wrap: balance;
}
.pin-puerta-caja p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--pu-tenue); text-wrap: pretty; }
.pin-puerta-nota { font-size: 13.5px; color: var(--pu-debil); }

/* Rótulo institucional en versalitas espaciadas: se lee como bajada y no compite
   con el título, que es lo que tiene que mandar en la jerarquía.
   ⚠️ Tiene que entrar en UN renglón: espaciado y en mayúscula, una línea partida
   se lee peor que en texto normal. */
.pin-puerta-rotulo {
  margin: 0 0 26px; color: var(--pu-debil);
  font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
}

/* ── Botones de opción ─────────────────────────────────────────────────────
   Ícono anclado a la IZQUIERDA y texto centrado: así el texto no se corre según
   el largo del rótulo cuando hay varios apilados. Es la anatomía de
   `.login-social` (styles.css), la pantalla que el usuario señaló como referencia. */
.pin-opcion {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: 8px; width: 100%; box-sizing: border-box;
  margin: 0 0 11px; padding: 16px 46px;
  background: #fff; color: var(--pu-tinta);
  border: 1px solid var(--pu-linea); border-radius: 14px; box-shadow: var(--pu-sombra);
  font: inherit; font-size: 15.5px; font-weight: 600; line-height: 1.3;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.pin-opcion:active { transform: scale(.985); background: var(--pu-fondo); }
@media (hover: hover) {
  .pin-opcion:hover { border-color: var(--pu-linea-viva); }
}
/* El ícono sale del flujo para quedar SIEMPRE en el mismo punto de la pila, sin
   que el largo del texto lo mueva. */
.pin-opcion > svg, .pin-opcion > .pin-opcion-ic {
  position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; flex-shrink: 0;
}
.pin-opcion small { font-size: 13px; font-weight: 500; color: var(--pu-tenue); }
.pin-opcion:disabled { opacity: .6; cursor: default; }

.pin-opcion.primaria {
  background: var(--pu-verde); border-color: var(--pu-verde); color: #fff;
}
.pin-opcion.primaria small { color: rgba(255, 255, 255, .8); }
@media (hover: hover) {
  .pin-opcion.primaria:hover { background: var(--pu-verde-suave); border-color: var(--pu-verde-suave); }
}
.pin-opcion.primaria:active { background: var(--pu-verde-suave); }

/* ── Tarjeta de rol ────────────────────────────────────────────────────────
   Con ícono grande, título y una línea que explica. La diferencia con
   `.pin-opcion` no es estética: un botón dice «hacé esto», una tarjeta dice «éste
   sos vos». En la pantalla de elección eso es exactamente lo que se pregunta. */
.pin-rol {
  display: flex; align-items: center; gap: 15px; width: 100%; box-sizing: border-box;
  margin: 0 0 13px; padding: 19px 18px; text-align: left; cursor: pointer;
  background: #fff; color: var(--pu-tinta);
  border: 1px solid var(--pu-linea); border-radius: 18px; text-decoration: none;
  box-shadow: var(--pu-sombra);
  transition: border-color .15s ease, transform .12s ease, background .15s ease;
}
.pin-rol:active { transform: scale(.985); background: var(--pu-fondo); }
@media (hover: hover) {
  .pin-rol:hover { border-color: var(--pu-linea-viva); transform: translateY(-2px); }
}
.pin-rol .ic {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 13px;
  background: rgba(0, 114, 66, .10); color: var(--pu-verde);
  display: flex; align-items: center; justify-content: center;
}
.pin-rol .ic svg { width: 25px; height: 25px; }
.pin-rol b { display: block; font-size: 17px; font-weight: 600; line-height: 1.25; }
.pin-rol small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--pu-debil); text-wrap: pretty; }
.pin-rol .chev { margin-left: auto; flex-shrink: 0; color: rgba(0, 114, 66, .35); }

/* ── Campos ────────────────────────────────────────────────────────────────
   Sobre el fondo, con superficie blanca propia — igual que los botones. */
.pin-campo {
  width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 16px;
  font: inherit; font-size: 17px;
  border: 1px solid var(--pu-linea); border-radius: 14px; background: #fff;
  color: var(--pu-tinta); box-shadow: var(--pu-sombra);
}
.pin-campo:focus { outline: 2px solid var(--pu-verde); outline-offset: 1px; }

/* ── La salida ─────────────────────────────────────────────────────────────
   🔴 TODA pantalla de esta cadena tiene que tener una: quien cancela el ingreso,
   o entra a la de jubilados sin serlo, no puede quedar encerrado. El botón
   «atrás» del navegador no alcanza — en la app instalada no existe.
   Sin caja contenedora, el pie ya no necesita una línea que lo separe: lo separa
   el aire y el hecho de estar sobre el fondo. */
.pin-puerta-pie {
  margin: 24px 0 0;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; font-size: 13px;
}
.pin-volver {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .75); border: 1px solid var(--pu-linea);
  color: var(--pu-verde); font: inherit; font-size: 13.5px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.pin-volver:hover { background: #fff; border-color: var(--pu-linea-viva); }
.pin-volver svg { width: 15px; height: 15px; flex-shrink: 0; }
.pin-puerta-pie a:not(.pin-volver) { color: var(--pu-debil); text-decoration: underline; }
.pin-puerta-pie a:not(.pin-volver):hover { color: var(--pu-verde); }
/* Dentro de una tarjeta de estado sí vuelve la línea: ahí el pie está adentro de
   una superficie y sin separador se pega al texto. */
.pin-puerta-caja.cargando .pin-puerta-pie,
.pin-puerta-caja.error .pin-puerta-pie,
.pin-puerta-caja.ok .pin-puerta-pie,
.pin-puerta-caja.ancha .pin-puerta-pie {
  padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, .07);
}

/* ── Errores ───────────────────────────────────────────────────────────────── */
.pin-puerta-err {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px; text-align: left;
  background: #fdf3f4; border: 1px solid rgba(190, 18, 60, .28);
  color: #9f1239; font-size: 14.5px;
}

/* ── Espera ───────────────────────────────────────────────────────────────── */
.pin-puerta-caja.cargando h1::after {
  content: ''; display: inline-block; width: 13px; height: 13px; margin-left: 9px;
  vertical-align: middle; border: 2px solid rgba(0, 114, 66, .25);
  border-top-color: var(--pu-verde); border-radius: 50%;
  animation: pin-puerta-giro .8s linear infinite;
}
@keyframes pin-puerta-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pin-puerta-caja.cargando h1::after { animation: none; }
  .pin-rol, .pin-opcion { transition: none; }
}

/* ── Angosto ───────────────────────────────────────────────────────────────── */
@media (max-width: 430px) {
  .pin-puerta-logo { height: 48px; margin-bottom: 18px; }
  .pin-puerta-caja h1 { font-size: 23px; }
  .pin-puerta-caja.cargando, .pin-puerta-caja.error, .pin-puerta-caja.ok { padding: 28px 20px; }
}
/* Pantalla muy baja (teléfono apaisado, o teclado abierto): deja de centrarse y
   permite desplazarse, porque acá el scroll SÍ hace falta — lo que no se quería
   era el rebote con la pantalla entera libre. */
@media (max-height: 560px) {
  body.pin-puerta { justify-content: flex-start; }
}