/*
 * shell.css — SHELL de marca NORA V1 (producción, no maqueta): cabecera con el logotipo OFICIAL, navegación de pasos y banner persistente de suscripción. Solo tokens (ningún color suelto).
 * Reutilizable por cualquier superficie de escritorio que cargue tokens.css + base.css + shell.css + componentes.css. Ver docs/fusion/v1/BRAND-SHELL.md.
 */

/* ── cabecera ── */
.cabecera { background: var(--nora-superficie); border-bottom: 1px solid var(--nora-linea); }
.cabecera-interior { max-width: var(--nora-ancho); margin: 0 auto; padding: var(--nora-e4); display: flex; flex-wrap: wrap; gap: var(--nora-e4) var(--nora-e5); align-items: center; justify-content: space-between; }

/* ── marca (logotipo oficial) ──
   Caja de tamaño fijo con object-fit: contain: el WebP transparente la llena exactamente (misma proporción) y, si el navegador cae al JPG sobre blanco, se ve entero sobre la cabecera blanca
   (nunca se estira ni se recorta). No se aplica ningún filtro, sombra ni recoloreado al logotipo. */
.marca { display: flex; align-items: center; min-height: var(--nora-objetivo); }
.marca picture { display: block; line-height: 0; }
.marca-logo { display: block; width: var(--nora-logo-ancho); height: var(--nora-logo-alto); max-width: 100%; object-fit: contain; object-position: left center; }

/* ── banner persistente de suscripción ──
   En el flujo normal (NO fijo, NO superpuesto): nunca tapa ni bloquea la ventana. Icono + título + texto (nunca solo color); el texto usa --nora-texto sobre el fondo del nivel (≥ 4,5:1). */
.banner-zona:empty { display: none; }
.banner { display: flex; gap: var(--nora-e3); align-items: flex-start; justify-content: center; padding: var(--nora-e3) var(--nora-e4); border-bottom: 4px solid var(--nora-borde); background: var(--nora-info-fondo); color: var(--nora-texto); }
.banner-interior { flex: 1 1 auto; max-width: var(--nora-ancho); display: flex; flex-wrap: wrap; gap: var(--nora-e2) var(--nora-e4); align-items: center; justify-content: space-between; }
.banner .icono { flex: 0 0 auto; font-weight: 800; width: 1.6em; text-align: center; }
.banner .cuerpo { flex: 1 1 18em; min-width: 0; }
.banner .cuerpo > * { margin: 0; }
.banner .titulo { font-weight: 650; }
.banner.aviso { background: var(--nora-aviso-fondo); border-bottom-color: var(--nora-aviso); }
.banner.restringido { background: var(--nora-error-fondo); border-bottom-color: var(--nora-error); }