/* ============================================================
   layout.css — Estructura general
   ------------------------------------------------------------
   Base del documento, el contenedor de la aplicacion, la pantalla
   de acceso (#puerta), la cabecera y la barra fija de abajo.
   Todo lo que se repite en cada pantalla vive aqui.
   ============================================================ */

/* --- Base --- */
*{box-sizing:border-box}
body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font:15px/1.55 "IBM Plex Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.envoltura{max-width:780px;margin:0 auto;padding:0 16px 96px}
.oculto{display:none!important}

/* --- Pantalla de acceso (#puerta) --- */
#puerta{max-width:400px;margin:0 auto;padding:13vh 16px 40px}
#puerta .marca{width:34px;height:3px;background:var(--guinda);margin-bottom:18px}
#puerta h1{font:600 22px/1.2 "Archivo",sans-serif;letter-spacing:-.02em;margin:0 0 7px}
#puerta p{font-size:14px;color:var(--tenue);margin:0 0 20px}
#puerta input{width:100%;border:1px solid var(--linea);border-radius:2px;padding:11px 12px;
  font:400 15px "IBM Plex Sans",sans-serif;color:var(--tinta);background:var(--papel);
  margin-bottom:10px}
#puerta input:focus{outline:2px solid var(--guinda-claro);outline-offset:1px;
  border-color:transparent}
#campoCodigo{font:500 22px/1 "IBM Plex Mono",monospace;letter-spacing:.32em;text-align:center}
#puerta .boton{width:100%}
#puerta .liga-tenue{display:block;width:100%;background:none;border:none;margin-top:14px;
  font:400 13px "IBM Plex Sans",sans-serif;color:var(--tenue);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
#puerta .liga-tenue:hover{color:var(--guinda)}
#recadoPuerta{display:block;margin-top:12px;font:400 13px "IBM Plex Sans",sans-serif;
  color:var(--tenue)}
#recadoPuerta.mal{color:var(--alto)}


/* --- Encabezado --- */
.cabecera{padding:26px 0 18px;border-bottom:1px solid var(--linea);margin-bottom:18px}
.marca{width:34px;height:3px;background:var(--guinda);margin-bottom:16px}
.cabecera h1{font:600 23px/1.15 "Archivo",sans-serif;letter-spacing:-.02em;margin:0 0 6px}
.subcabecera{font-size:13px;color:var(--tenue);display:flex;gap:6px;flex-wrap:wrap;
  align-items:baseline}
.subcabecera b{font-weight:600;color:var(--tinta)}
.salir{background:none;border:none;padding:0;font:400 13px "IBM Plex Sans",sans-serif;
  color:var(--tenue);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.salir:hover{color:var(--guinda)}


/* --- Barra fija inferior --- */
.barra-baja{position:fixed;left:0;right:0;bottom:0;background:var(--papel);
  border-top:1px solid var(--linea);padding:10px 16px;display:flex;justify-content:center}

/* --- Preferencia de movimiento reducido --- */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}