/* Pantalla de entrada: el mismo sistema del panel (app.css), una sola hoja sobria. Primero celular. */
.puerta { max-width: 440px; margin: 0 auto; padding: 40px max(16px, env(safe-area-inset-right)) 64px max(16px, env(safe-area-inset-left)); display: grid; gap: 18px; }
.hoja { background: var(--papel); border: 1px solid var(--linea); border-top: 3px solid var(--acento); border-radius: 6px; padding: 26px 22px 24px; display: grid; gap: 14px; }
.hoja h1 { font-size: clamp(25px, 6vw, 30px); line-height: 1.15; }
.paso-entrada { display: grid; gap: 16px; }
.paso-entrada[hidden] { display: none; }
.explica { color: var(--gris); }
.explica b { color: var(--tinta); font-weight: 700; overflow-wrap: anywhere; }
.campo label { font-weight: 700; font-size: 15px; }
.campo input { font: 17px/1.4 var(--f-texto); color: var(--tinta); background: var(--bg); border: 1px solid var(--linea); border-radius: 6px; padding: 11px 12px; min-height: 48px; width: 100%; }
.campo input:focus-visible { outline: 2px solid var(--acento); outline-offset: 0; border-color: transparent; }
.campo input[aria-invalid="true"] { border-color: var(--no); }
.campo input.codigo { font-family: var(--f-dato); font-size: 26px; letter-spacing: .32em; text-align: center; font-variant-numeric: tabular-nums; }
.guardar.ancho { width: 100%; min-height: 48px; }
.otras { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
.enlace { font: 15px var(--f-texto); color: var(--acento); background: none; border: 0; padding: 6px 0; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.enlace:disabled { color: var(--gris-2); text-decoration: none; cursor: default; }
.pie { font-size: 14px; color: var(--gris); text-align: center; text-wrap: balance; }
@media (min-width: 720px) { .puerta { padding-top: 72px; } .hoja { padding: 34px 32px 30px; } }