/* ==========================================================================
   SABABA · Capa oscura para las secciones restantes
   Rutas: Reservas · Mi Camino (expediciones/reset) · Mi Espacio · Circle
   Solo estético. Alcance por sección (solo se ven en su ruta). No toca lógica.
   ========================================================================== */

/* --- suelo oscuro en estas rutas --- */
body.mobile-view-reservar, body.mobile-view-mis,
body.mobile-view-expediciones, body.mobile-view-circle,
body.mobile-view-camino { background: #0d150f !important; }

/* El camino trae sus propias tarjetas, así que aquí solo se pinta el suelo. */
#camino {
  background: radial-gradient(96% 24% at 50% 0%, rgba(201,170,106,.10), transparent 46%),
    linear-gradient(180deg, #16241d 0%, #101a12 60%, #0d150f 100%) !important;
  color: #ece5d5;
  min-height: 100vh;
}

/* Prefijo de alcance: las secciones (solo visibles en su ruta) */
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) {
  background: radial-gradient(96% 24% at 50% 0%, rgba(201,170,106,.10), transparent 46%),
    linear-gradient(180deg, #16241d 0%, #101a12 60%, #0d150f 100%) !important;
  color: #ece5d5;
}

/* superficies internas transparentes para que se vea el suelo */
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) :is(.reserve-panel, .app-shell, .house-section, .panel, .card-surface) {
  background: transparent !important; box-shadow: none !important;
}

/* --- tipografía --- */
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) :is(h1, h2, h3) {
  color: #f7f4ee !important; font-family: "Playfair Display", serif; font-weight: 700; letter-spacing: -.01em;
}
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) :is(.eyebrow, .step-kicker) {
  color: #c8a96a !important; font-family: "Montserrat", sans-serif; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) :is(p, li, small, legend, .intro, .selected-space-note) {
  color: #cad0c4 !important;
}
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) .hours-note { color: #9aa48f !important; }
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) label { color: #b9c3b6 !important; }

/* --- píldora de estado --- */
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) .status-pill {
  background: rgba(121,180,152,.12) !important; color: #8fc0a4 !important; border: 1px solid rgba(121,180,152,.4) !important;
}

/* --- campos de formulario --- */
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) :is(input, select, textarea) {
  background: #0f1c17 !important; color: #ece5d5 !important;
  border: 1px solid rgba(143,161,137,.3) !important; border-radius: 10px !important;
}
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) :is(input, select, textarea):focus { border-color: #c8a96a !important; outline: none !important; }
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) :is(input::placeholder, textarea::placeholder) { color: #7d8a78 !important; }
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) fieldset {
  background: rgba(31,49,42,.42) !important; border: 1px solid rgba(201,170,106,.16) !important;
  border-radius: 12px !important; padding: 14px 16px !important;
}
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) legend { color: #c8a96a !important; font-family: "Montserrat", sans-serif; font-weight: 600; }
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) .radio-line { color: #ece5d5 !important; }
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) input[type="radio"],
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) input[type="checkbox"] { accent-color: #c8a96a; }

/* --- tarjetas de intención (Reservas) --- */
:is(#reservas) .intent-grid button {
  background: rgba(31,49,42,.5) !important; border: 1px solid rgba(201,170,106,.16) !important; border-radius: 16px !important;
  overflow: hidden;
}
:is(#reservas) .intent-grid button strong { color: #f7f4ee !important; font-family: "Playfair Display", serif; }
:is(#reservas) .intent-grid button img { filter: brightness(.8) saturate(1.05); }
:is(#reservas) .intent-grid button.con-ilustra img { filter: none; }
:is(#reservas) .intent-grid button.con-ilustra span { display: none; }

/* --- tarjetas / listas genéricas (Mi Espacio, Mi Camino, Circle) --- */
:is(#mis-reservas, #mis-expediciones, #reset, #circle) :is(.experience-card, .reservation-card, .profile-card, .journey-card, .space-card, .info-card, .circle-card, article) {
  background: rgba(31,49,42,.48) !important; border: 1px solid rgba(201,170,106,.14) !important; border-radius: 16px !important;
  color: #ece5d5 !important; box-shadow: 0 24px 50px -40px rgba(0,0,0,.7) !important;
}

/* --- botones --- */
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) .primary-button {
  background: linear-gradient(180deg, #e6c98a, #c8a96a) !important; color: #241d12 !important; border: none !important;
  text-decoration: none !important; border-radius: 999px !important; box-shadow: 0 16px 40px -18px rgba(201,170,106,.55) !important;
}
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) :is(.ghost-button, .whatsapp-link, .menu-link, .profile-action, .linkq) {
  color: #e6c98a !important; border-color: rgba(230,201,138,.4) !important; background: transparent !important;
}

/* --- nav inferior en penumbra en estas rutas --- */
body:is(.mobile-view-reservar, .mobile-view-mis, .mobile-view-expediciones, .mobile-view-circle, .mobile-view-camino) nav.mobile-app-nav {
  background: #101a14 !important; border: 1px solid rgba(201,170,106,.18) !important; box-shadow: 0 16px 42px rgba(0,0,0,.45) !important;
}
body:is(.mobile-view-reservar, .mobile-view-mis, .mobile-view-expediciones, .mobile-view-circle, .mobile-view-camino) nav.mobile-app-nav a { color: #93a08c !important; }
body:is(.mobile-view-reservar, .mobile-view-mis, .mobile-view-expediciones, .mobile-view-circle, .mobile-view-camino) nav.mobile-app-nav a.active { background: rgba(201,170,106,.15) !important; color: #e6c98a !important; }

/* ========== parche de contraste (títulos <strong>, cards claras, hero lavado) ========== */
/* títulos y valores en negrita que quedaban en café oscuro ilegible */
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) :is(strong, b, em, dt) { color: #f7f4ee !important; }
:is(#reservas, #mis-reservas, #mis-expediciones, #reset, #circle) em small { color: #c8a96a !important; }

/* hero de Mi Espacio: quitar el fondo lavado */
#mis-reservas .mi-espacio-hero { background: transparent !important; box-shadow: none !important; }

/* superficies de tarjeta que faltaban por oscurecer */
:is(#mis-reservas, #mis-expediciones, #reset, #circle) :is(.mi-espacio-card, .territory-card, .journey-territory, .reset-summary, .badge-card) {
  background: rgba(31,49,42,.5) !important; border: 1px solid rgba(201,170,106,.14) !important; color: #ece5d5 !important; box-shadow: 0 24px 50px -42px rgba(0,0,0,.7) !important;
}

/* iconos/marcadores de Circle y placeholders claros */
#circle .circle-benefits article span { color: #e6c98a !important; background: rgba(201,170,106,.14) !important; }
:is(#mis-reservas, #reset) .memory-row > span, :is(#mis-reservas) .circle-profile-icon { background: rgba(201,170,106,.12) !important; }

/* pilares del recorrido (Mi Camino) que seguían en gris claro */
:is(#mis-expediciones, #reset) .journey-territories span {
  background: rgba(31,49,42,.55) !important; border: 1px solid rgba(201,170,106,.14) !important; color: #ece5d5 !important;
}
:is(#mis-expediciones, #reset) .journey-territories b { color: #e6c98a !important; }
/* el % del anillo va sobre fondo claro: mantenerlo oscuro (revierte el strong->crema) */
:is(#mis-expediciones, #reset) .journey-progress-ring strong { color: #241d12 !important; }

/* ===== layout del RESET: apilar (no 2 columnas apretadas) + pilares que envuelven ===== */
:is(#mis-expediciones, #reset) .reset-journey-card {
  display: flex !important; flex-direction: column !important; gap: 0 !important;
}
:is(#mis-expediciones, #reset) .journey-card-hero { width: 100% !important; min-height: 190px !important; }
:is(#mis-expediciones, #reset) .journey-card-body { width: 100% !important; }
:is(#mis-expediciones, #reset) .journey-progress-row { flex-wrap: wrap !important; }
:is(#mis-expediciones, #reset) .journey-territories {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)) !important;
  gap: 10px !important; overflow: visible !important;
}

/* ===== "Tu Mapa Inicial" (reset-form): quitar cajas grises + compactar en 2 columnas ===== */
#reset .reset-form {
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px 12px !important; align-items: end !important;
}
#reset .reset-form label {
  background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important;
  display: flex !important; flex-direction: column !important; gap: 7px !important;
  font-family: "Montserrat", sans-serif !important; font-size: .68rem !important; letter-spacing: .1em !important;
  text-transform: uppercase !important; color: #9aa48f !important;
}
#reset .reset-form label.reset-wide { grid-column: 1 / -1 !important; }
#reset .reset-form :is(input, select, textarea) {
  background: #0f1c17 !important; color: #ece5d5 !important; border: 1px solid rgba(143,161,137,.3) !important;
  border-radius: 10px !important; padding: 12px 14px !important; text-transform: none !important; font-size: 1rem !important;
}
#reset .reset-form input[type="range"] { padding: 0 !important; accent-color: #c8a96a; background: transparent !important; border: none !important; }
#reset .reset-form input[type="file"] { padding: 10px !important; font-size: .8rem !important; }
#reset .reset-form .primary-button { grid-column: 1 / -1 !important; margin-top: 4px !important; }

/* ===== Circle: layout que se montaba en pantallas anchas -> apilar limpio ===== */
#circle .circle-layout { display: flex !important; flex-direction: column !important; gap: 20px !important; }
#circle .circle-benefits {
  display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; margin: 0 !important;
}
#circle .circle-benefits article {
  position: static !important; width: auto !important; margin: 0 !important; min-height: 0 !important;
  display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 22px !important;
}
#circle .circle-benefits article span {
  width: 40px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 999px !important; font-family: "Montserrat", sans-serif !important; font-weight: 700 !important;
}
#circle .circle-benefits article strong { font-family: "Playfair Display", serif !important; font-size: 1.3rem !important; }
#circle .circle-intro { width: auto !important; }

/* QA 001 · las tarjetas 01/02/03 son informativas, NO botones: quitarles el aspecto tocable */
#circle .circle-benefits article {
  background: transparent !important; box-shadow: none !important;
  border: none !important; border-top: 1px solid rgba(201,170,106,.16) !important;
  border-radius: 0 !important; padding: 16px 2px !important; cursor: default !important;
}
#circle .circle-benefits article span {
  width: auto !important; height: auto !important; background: transparent !important;
  border: none !important; border-radius: 0 !important; padding: 0 !important;
  color: #e6c98a !important; font-size: 1.5rem !important; line-height: 1 !important;
  letter-spacing: 0 !important; opacity: 1 !important;
}

/* ===== RESET: dejaba el contenido en 2 columnas (aside | contenido) -> apilar a ancho completo ===== */
#reset .reset-shell { display: block !important; max-width: none !important; grid-template-columns: none !important; }
#reset .reset-side { width: auto !important; max-width: none !important; margin: 0 0 22px !important; }
#reset .reset-content, #reset .reset-view { width: auto !important; max-width: none !important; }
/* botón secundario claro + link de volver -> brasa fantasma */
#reset .secondary-button, #reset .reset-back-link,
:is(#reservas, #mis-reservas, #mis-expediciones, #circle) .secondary-button {
  background: transparent !important; color: #e6c98a !important; text-decoration: none !important;
  border: 1px solid rgba(230,201,138,.4) !important;
}

/* ===== Modal "Explora todos los espacios" (fuera de las rutas -> quedó crema) ===== */
#allSpacesModal { background: rgba(9,15,11,.78) !important; }
#allSpacesModal .all-spaces-card {
  background: linear-gradient(180deg, #16241d, #101a12) !important; color: #ece5d5 !important;
  border: 1px solid rgba(201,170,106,.18) !important; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8) !important;
}
#allSpacesModal .eyebrow { color: #c8a96a !important; }
#allSpacesModal :is(h2, h3) { color: #f7f4ee !important; font-family: "Playfair Display", serif !important; }
#allSpacesModal .all-spaces-zone h3 { color: #e6c98a !important; }
#allSpacesModal .all-space-card {
  background: rgba(31,49,42,.5) !important; border: 1px solid rgba(201,170,106,.14) !important;
  color: #ece5d5 !important; border-radius: 14px !important; overflow: hidden !important;
}
#allSpacesModal .all-space-card strong { color: #f7f4ee !important; font-family: "Playfair Display", serif !important; }
#allSpacesModal .all-space-card :is(span, p) { color: #cad0c4 !important; }
#allSpacesModal .all-space-card img { object-fit: cover !important; background: #0f1c17 !important; }
#allSpacesModal .all-space-card button {
  background: linear-gradient(180deg, #e6c98a, #c8a96a) !important; color: #241d12 !important; border: none !important; border-radius: 999px !important;
}
#allSpacesModal .icon-button {
  background: rgba(236,229,212,.08) !important; color: #ece5d5 !important; border: 1px solid rgba(201,170,106,.3) !important;
}

/* beneficios del Círculo: contexto + mini-descripciones */
#mis-reservas .benefits-profile-card .benefits-note {
  color: #9aa48f !important; font-family: "Montserrat", sans-serif; font-size: .8rem; line-height: 1.5; margin: 6px 0 14px !important;
}
#mis-reservas .benefits-profile-card a { align-items: center !important; }
#mis-reservas .benefits-profile-card a > div { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#mis-reservas .benefits-profile-card a small { color: #9aa48f !important; font-size: .74rem; text-transform: none; letter-spacing: 0; line-height: 1.4; }

/* pulso de brasa cuando se recomiendan espacios (feedback al elegir intención) */
.spaces-panel { border-radius: 16px; scroll-margin-top: 16px; }
.spaces-panel.just-suggested { animation: sabPulse 1.6s ease; }
@keyframes sabPulse {
  0% { box-shadow: 0 0 0 0 rgba(201,170,106,0); }
  18% { box-shadow: 0 0 0 3px rgba(201,170,106,.55); }
  100% { box-shadow: 0 0 0 0 rgba(201,170,106,0); }
}

/* --- La Mesa (ruta mesa) · suelo oscuro + nav en penumbra --- */
body.mobile-view-mesa { background: #0d150f !important; }
#la-mesa {
  background: radial-gradient(96% 24% at 50% 0%, rgba(201,170,106,.10), transparent 46%),
    linear-gradient(180deg, #16241d 0%, #101a12 60%, #0d150f 100%) !important;
}
body.mobile-view-mesa nav.mobile-app-nav {
  background: #101a14 !important; border: 1px solid rgba(201,170,106,.18) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.45) !important;
}
body.mobile-view-mesa nav.mobile-app-nav a { color: #93a08c !important; }
body.mobile-view-mesa nav.mobile-app-nav a.active { background: rgba(201,170,106,.15) !important; color: #e6c98a !important; }

/* ==========================================================================
   Panel de RESERVAS (#adminPanel · 5 toques al logo) en OSCURO
   Coherente con el Centro de administración. Solo estético, scoped al panel.
   ========================================================================== */
#adminPanel {
  background: linear-gradient(180deg, #16241d 0%, #101a12 60%, #0d150f 100%) !important;
  color: #ece5d5 !important;
}
#adminPanel :is(.admin-hero, .admin-section, .schedule-row, .admin-space-row, .reservation-item,
  .experience-admin-card, .admin-metrics span, .admin-card, .card, .space-card) {
  background: rgba(31, 49, 42, 0.5) !important;
  border-color: rgba(201, 170, 106, 0.16) !important;
  box-shadow: none !important;
}
#adminPanel :is(h1, h2, h3, h4) { color: #f7f4ee !important; font-family: "Playfair Display", serif; }
#adminPanel :is(p, span, small, label, li, dt, dd, .admin-hint, strong, b, time) { color: #cad0c4 !important; }
#adminPanel .eyebrow { color: #c8a96a !important; }
#adminPanel .admin-metrics strong { color: #e6c98a !important; }
/* pestañas */
#adminPanel .admin-tabs button {
  background: rgba(31, 49, 42, 0.55) !important; border-color: rgba(201,170,106,.16) !important; color: #cad0c4 !important;
}
#adminPanel .admin-tabs button.active {
  background: linear-gradient(180deg, #e6c98a, #c8a96a) !important; border-color: transparent !important; color: #241d12 !important;
}
/* campos */
#adminPanel :is(input, select, textarea) {
  background: #0f1c17 !important; color: #ece5d5 !important;
  border: 1px solid rgba(143, 161, 137, .3) !important; border-radius: 10px !important;
}
#adminPanel :is(input, select, textarea):focus { border-color: #c8a96a !important; outline: none !important; }
/* botones */
#adminPanel .primary-button { background: linear-gradient(180deg, #e6c98a, #c8a96a) !important; color: #241d12 !important; border: none !important; }
#adminPanel :is(.secondary-button, .ghost-button, .reservation-actions button, .menu-link, .linkq) {
  background: transparent !important; color: #e6c98a !important; border: 1px solid rgba(230, 201, 138, .4) !important;
}
#adminPanel .icon-button { background: rgba(15, 23, 18, .8) !important; color: #9aa48f !important; border: 1px solid rgba(236, 229, 212, .2) !important; }
/* el enlace al Centro (tenía color claro) → adaptado al oscuro */
/* enlace al Centro de administración: la forma de píldora vive aquí, ya no
   incrustada en el HTML */
#adminPanel .admin-hub-link {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 9px 15px;
  border-radius: 999px;
  color: #e6c98a !important;
  background: rgba(201, 170, 106, .14) !important;
  border: 1px solid rgba(230, 201, 138, .4) !important;
  transition: background .18s ease, border-color .18s ease;
}
#adminPanel .admin-hub-link:hover {
  background: rgba(201, 170, 106, .26) !important;
  border-color: rgba(230, 201, 138, .65) !important;
}
/* píldoras de estado de reserva: legibles sobre oscuro */
#adminPanel .reservation-status { background: rgba(0, 0, 0, .22) !important; border: 1px solid rgba(236, 229, 212, .18) !important; }

/* ==========================================================================
   Superficies que se habían quedado en crema
   (modales y paneles sueltos que aparecen ENCIMA de pantallas oscuras)
   El fondo venía en degradado, por eso no se veían en una revisión normal.
   ========================================================================== */

/* --- el modal de la clave: es la PRIMERA pantalla al entrar (5 toques) --- */
.password-modal,
.move-modal { background: rgba(8, 14, 10, .74) !important; }

.password-card,
.move-card {
  background: linear-gradient(180deg, #16241d, #101a12) !important;
  border: 1px solid rgba(201, 170, 106, .22) !important;
  border-radius: 20px !important;
  color: #ece5d5 !important;
  box-shadow: 0 34px 76px -34px rgba(0, 0, 0, .85) !important;
}
:is(.password-card, .move-card) :is(h1, h2, h3) {
  color: #f7f4ee !important; font-family: "Playfair Display", Georgia, serif;
}
:is(.password-card, .move-card) :is(p, label, small, .admin-hint) { color: #9aa48f !important; }
:is(.password-card, .move-card) .eyebrow { color: #c8a96a !important; }
:is(.password-card, .move-card) :is(input, select, textarea) {
  background: #0f1712 !important; color: #ece5d5 !important;
  border: 1px solid rgba(143, 161, 137, .3) !important; border-radius: 10px !important;
}
:is(.password-card, .move-card) :is(input, select, textarea):focus {
  border-color: #c8a96a !important; outline: none !important;
}
:is(.password-card, .move-card) :is(input::placeholder, textarea::placeholder) { color: #7d8a78 !important; }
:is(.password-card, .move-card) .primary-button {
  background: linear-gradient(180deg, #e6c98a, #c8a96a) !important; color: #241d12 !important; border: none !important;
}
:is(.password-card, .move-card) .secondary-button {
  background: rgba(201, 170, 106, .10) !important; color: #e6c98a !important;
  border: 1px solid rgba(201, 170, 106, .35) !important;
}

/* --- piezas sueltas dentro del panel y de Reservas --- */
#adminPanel .admin-mini-card,
:is(#reservas, #mis-reservas) :is(.spaces-panel, .menu-embed-panel, .space-card, .booking-empty-card) {
  background: rgba(31, 49, 42, .5) !important;
  border: 1px solid rgba(201, 170, 106, .16) !important;
  border-radius: 16px !important;
  color: #ece5d5 !important;
}
:is(#reservas, #mis-reservas) :is(.spaces-panel, .menu-embed-panel, .space-card) :is(h2, h3, strong) { color: #f7f4ee !important; }

/* --- avisos y marcos que aparecen sobre el suelo oscuro --- */
.ios-install-card {
  background: linear-gradient(180deg, #16241d, #101a12) !important;
  border: 1px solid rgba(201, 170, 106, .22) !important;
  color: #ece5d5 !important;
}
.ios-install-card :is(h2, h3, strong) { color: #f7f4ee !important; }
.ios-install-card p { color: #9aa48f !important; }
.mobile-genially-frame { background: #101a12 !important; }

/* el botón Salir usa la misma píldora que Centro, pero apagada */
#adminPanel .admin-salir {
  cursor: pointer;
  color: #9aa48f !important;
  background: rgba(255, 250, 240, .05) !important;
  border-color: rgba(236, 229, 212, .2) !important;
}
#adminPanel .admin-salir:hover { color: #e8a893 !important; border-color: rgba(232, 168, 147, .45) !important; }

/* ===== Botón Atrás: volver sin usar la barra de abajo ===== */
.boton-atras {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 400;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(236, 229, 212, 0.18);
  background: rgba(9, 18, 14, 0.82);
  backdrop-filter: blur(8px);
  color: #ece5d4;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.8);
}
.boton-atras span { font-size: 1.1rem; line-height: 1; color: #e6c98a; }
.boton-atras[hidden] { display: none !important; }
@media (min-width: 900px) { .boton-atras { top: 18px; left: 18px; } }