/* STOIDER · capa visual compartida
   Solo unifica presentación. No modifica datos, navegación, reservas ni lógica JS. */
:root {
  --stoider-bg: #090d14;
  --stoider-bg-soft: #0d1522;
  --stoider-surface: #141e2e;
  --stoider-surface-2: #18283e;
  --stoider-border: #2a3b54;
  --stoider-text: #f3f7ff;
  --stoider-muted: #9fb0c7;
  --stoider-blue: #3478f6;
  --stoider-blue-light: #8bb8ff;
  color-scheme: dark;
}

/* Base común para los módulos internos */
body {
  background: var(--stoider-bg) !important;
  color: var(--stoider-text);
  -webkit-font-smoothing: antialiased;
}

header {
  background: rgba(9, 13, 20, .96) !important;
  color: var(--stoider-text);
  border-bottom: 1px solid var(--stoider-border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

header b, header strong, .brand { color: var(--stoider-text); }
header small, .brand small { color: #91a8c7 !important; }

main {
  background: transparent;
  color: var(--stoider-text);
}

/* Superficies: conserva la estructura y dimensiones originales */
.card, .panel, .hero, .session, .stat, .detail-sheet,
#login, .login, dialog, .modal, .sheet {
  background-color: var(--stoider-surface);
  border-color: var(--stoider-border);
  color: var(--stoider-text);
}

.hero {
  background-image: linear-gradient(125deg, #1a3457, #122238) !important;
  border-color: #35557d !important;
}

.muted, .tiny, .section-description { color: var(--stoider-muted); }
.eyebrow { color: var(--stoider-blue-light); }

/* Controles consistentes entre módulos */
button, .btn {
  background-color: var(--stoider-blue);
  color: #fff;
  border-radius: 12px;
  font-weight: 750;
}

button.secondary, .btn.secondary, .ghost, button.ghost {
  background-color: #22334b;
  color: #dce9ff;
  border: 1px solid #354c6b;
}

input, select, textarea {
  background-color: var(--stoider-bg-soft) !important;
  color: var(--stoider-text) !important;
  border-color: #354a67 !important;
  border-radius: 11px;
}

input::placeholder, textarea::placeholder { color: #8294ad; }
label { color: #b9c9df; }

/* Navegación inferior coherente */
nav, .bottom-nav {
  background: rgba(15, 24, 38, .98) !important;
  border-top: 1px solid var(--stoider-border) !important;
  backdrop-filter: blur(14px);
}
nav button, .bottom-nav a, .bottom-nav button {
  color: #9aacc5;
}
nav button.active, nav button.on, .bottom-nav .active,
.bottom-nav a[aria-current="page"] {
  color: var(--stoider-blue-light) !important;
  font-weight: 800;
}

/* Accesibilidad y tactilidad móvil */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #82b4ff;
  outline-offset: 3px;
}
button, a { -webkit-tap-highlight-color: transparent; }

/* Agenda: conserva calendario, eventos y controles, pero elimina el salto visual a una app blanca */
body[data-stoider-page="agenda"] main {
  background: transparent !important;
  color: var(--stoider-text) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body[data-stoider-page="agenda"] header {
  background: linear-gradient(120deg, #080e18, #142b49) !important;
}
body[data-stoider-page="agenda"] .card,
body[data-stoider-page="agenda"] dialog,
body[data-stoider-page="agenda"] .form {
  background: var(--stoider-surface) !important;
  color: var(--stoider-text) !important;
  border: 1px solid var(--stoider-border) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.16) !important;
}
body[data-stoider-page="agenda"] .week { background: var(--stoider-bg) !important; }
body[data-stoider-page="agenda"] .day {
  background: #17263a !important;
  border: 1px solid var(--stoider-border) !important;
  color: #c6d5e9 !important;
}
body[data-stoider-page="agenda"] .day.active {
  background: var(--stoider-blue) !important;
  border-color: #76a6ff !important;
  color: #fff !important;
}
body[data-stoider-page="agenda"] input,
body[data-stoider-page="agenda"] select,
body[data-stoider-page="agenda"] textarea {
  background: var(--stoider-bg-soft) !important;
  color: var(--stoider-text) !important;
  border-color: #354a67 !important;
}
body[data-stoider-page="agenda"] label,
body[data-stoider-page="agenda"] h1,
body[data-stoider-page="agenda"] h2,
body[data-stoider-page="agenda"] h3,
body[data-stoider-page="agenda"] strong { color: var(--stoider-text); }
body[data-stoider-page="agenda"] .muted { color: var(--stoider-muted) !important; }
body[data-stoider-page="agenda"] .bottom-nav { background: #101824 !important; }

@media (max-width: 600px) {
  main { padding-bottom: max(105px, calc(90px + env(safe-area-inset-bottom))); }
  header { padding-top: max(12px, env(safe-area-inset-top)); }
}

/* Las tarjetas de sesión del centro también usan la superficie común */
.session { background-color: var(--stoider-surface) !important; color: var(--stoider-text) !important; border: 1px solid var(--stoider-border) !important; }
.session .top, .session h3 { color: #c9dcf7 !important; }
.session p { color: var(--stoider-muted) !important; }
.session .bottom { border-color: var(--stoider-border) !important; color: #dce8f8 !important; }