/* ============================================================
   LAYOUT — cromo de la aplicación (shell), común a todos los
   módulos: body, header, barra de módulo, flash, footer,
   scrollbar y la pantalla-centrada genérica (.idle-screen).
   Ningún módulo debería necesitar tocar este archivo.
   ============================================================ */

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
button { font-family: inherit; }

/* HEADER — verde de marca, texto claro para contraste */
.header { padding: 16px 22px; background: var(--dark-teal); border-bottom: 1px solid var(--dark-teal); display: flex; justify-content: space-between; align-items: center; }
.header-label { font-family: var(--font-display); font-weight: 600; font-size: 10px; color: rgba(255,255,255,0.8); letter-spacing: 0.1em; text-transform: uppercase; }
.header-date { font-size: 13px; color: #fff; margin-top: 2px; text-transform: capitalize; }

/* Slot genérico de sub-navegación en el header (id="header-nav").
   El shell solo lo muestra/oculta; el contenido lo decide cada
   módulo activo (ver Rescate.switchTab para un ejemplo). */
.tabs { display: flex; align-items: center; gap: 18px; }

/* MODULO BAR */
.modulo-bar { padding: 8px 22px; background: var(--surface2); border-bottom: 1px solid var(--border); display: none; align-items: center; justify-content: space-between; }
.modulo-bar-label { font-family: var(--font-display); font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: 0.02em; }

/* Botón "Cambiar módulo" — misma pastilla sólida que un CTA de la
   landing (p. ej. "Sacar turno"), no un link de texto plano. */
.modulo-bar-switch {
  font-family: var(--font-display);
  background: var(--orange);
  border: none;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 7px 16px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(248, 117, 35, 0.4);
  transition: opacity 0.2s;
}
.modulo-bar-switch:hover { opacity: 0.85; }

/* FLASH */
.flash { padding: 11px 22px; font-size: 13px; display: none; }
.flash.ok    { display:block; background:#d4edda; border-bottom:1px solid #b8dfc4; color:#1a5c2a; }
.flash.warn  { display:block; background:#fff3cd; border-bottom:1px solid #ffeaa0; color:#7a5c00; }
.flash.error { display:block; background:#f8d7da; border-bottom:1px solid #f1b8bc; color:#8c1a1a; }

/* Pantalla centrada genérica: la usan la portada y cualquier
   módulo con una vista de "estado inicial" tipo splash. */
.idle-screen { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:40px; padding:40px 24px; }

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#c8b89a; border-radius:3px; }

/* FOOTER — mismo verde que el header, texto claro para contraste */
.app-footer { padding:10px 22px; background:var(--dark-teal); border-top:1px solid var(--dark-teal); display:flex; align-items:center; justify-content:center; gap:10px; flex-shrink:0; }
.footer-logo { height:20px; }
.footer-text { font-size:11px; color:rgba(255,255,255,0.75); letter-spacing:0.04em; }
.footer-text a { color:var(--yellow); text-decoration:none; font-weight:bold; }
.footer-text a:hover { text-decoration:underline; }