/* ============================================
   COAJ ESPACIOS - CSS COMPLETO
   Colores: #032845, #0A3D5C, #E8552A, #FF6B35
   ============================================ */

/* ============================================
   1. VARIABLES CSS
   ============================================ */
:root {
  --coaj-primary: #032845;
  --coaj-secondary: #0A3D5C;
  --coaj-accent: #E8552A;
  --coaj-accent-light: #FF6B35;
  --coaj-accent-glow: rgba(232,85,42,0.12);
  --coaj-accent-soft: rgba(232,85,42,0.06);

  --success: #059669;
  --success-bg: rgba(5,150,105,0.08);
  --warning: #d97706;
  --warning-bg: rgba(217,119,6,0.08);
  --error: #dc2626;
  --info: #3b82f6;
  --info-bg: rgba(59,130,246,0.08);
  --purple: #7c3aed;
  --purple-bg: rgba(124,58,237,0.08);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================
   2. TEMA CLARO
   ============================================ */
[data-theme="light"], :root {
  --bg-page: #f5f7fa;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --bg-muted: #f1f5f9;
  --bg-input: #f8fafc;

  --text-primary: #032845;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;

  --border: #e2e8f0;
  --border-light: #f1f5f9;

  --shadow-sm: 0 1px 2px rgba(3,40,69,0.04);
  --shadow-md: 0 4px 12px rgba(3,40,69,0.08);
  --shadow-lg: 0 8px 24px rgba(3,40,69,0.12);
  --shadow-xl: 0 16px 48px rgba(3,40,69,0.16);
}

/* ============================================
   3. TEMA OSCURO
   ============================================ */
[data-theme="dark"] {
  --bg-page: #0f172a;
  --bg-card: #1e293b;
  --bg-elevated: #334155;
  --bg-muted: #1e293b;
  --bg-input: #1e293b;

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --text-inverse: #0f172a;

  --border: #334155;
  --border-light: #1e293b;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.5);
}

/* ============================================
   4. RESET
   ============================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg-page); color:var(--text-primary);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; }
button { font-family:inherit; cursor:pointer; }
img { max-width:100%; display:block; }
.material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; }
.hidden { display:none!important; }

/* ============================================
   5. LOGIN MODAL (igual que actividades)
   ============================================ */
.login-overlay {
  position:fixed; inset:0;
  background:linear-gradient(135deg,var(--coaj-primary) 0%,var(--coaj-secondary) 100%);
  z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:var(--space-lg);
}
.login-overlay.hidden { display:none; }
.login-card {
  background:var(--bg-card); border-radius:var(--radius-xl);
  width:100%; max-width:400px; overflow:hidden; box-shadow:var(--shadow-xl);
}
.login-header {
  background:linear-gradient(135deg,var(--coaj-accent) 0%,var(--coaj-accent-light) 100%);
  padding:var(--space-xl) var(--space-lg); text-align:center; color:white;
}
.login-logo {
  width:72px; height:72px; border-radius:50%;
  background:white; object-fit:contain; padding:8px;
  margin:0 auto var(--space-md);
}
.login-header h2 { font-size:1.5rem; font-weight:700; margin-bottom:var(--space-xs); }
.login-header p { font-size:0.9rem; opacity:0.9; }
.login-body { padding:var(--space-lg); }
.btn-guest {
  width:100%; padding:var(--space-md); background:var(--success); color:white;
  border:none; border-radius:var(--radius-md); font-size:0.95rem; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:var(--space-sm);
  transition:all 0.2s ease;
}
.btn-guest:hover { background:#047857; transform:translateY(-1px); }
.login-divider {
  display:flex; align-items:center; gap:var(--space-md);
  margin:var(--space-lg) 0; color:var(--text-muted); font-size:0.8rem;
}
.login-divider::before,.login-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.form-group { margin-bottom:var(--space-md); }
.input-field {
  display:flex; align-items:center; gap:var(--space-sm);
  background:var(--bg-input); border:2px solid var(--border);
  border-radius:var(--radius-md); padding:0 var(--space-md); transition:all 0.2s ease;
}
.input-field:focus-within { border-color:var(--coaj-accent); box-shadow:0 0 0 3px rgba(232,85,42,0.1); }
.input-field .material-symbols-outlined { color:var(--text-muted); font-size:20px; }
.input-field input {
  flex:1; border:none; background:transparent; padding:var(--space-md) 0;
  font-size:0.95rem; color:var(--text-primary); outline:none;
}
.input-field input::placeholder { color:var(--text-muted); }
.login-error {
  background:rgba(220,38,38,0.1); color:var(--error);
  padding:var(--space-sm) var(--space-md); border-radius:var(--radius-sm);
  font-size:0.85rem; margin-bottom:var(--space-md); display:none;
}
.btn-login {
  width:100%; padding:var(--space-md); background:var(--coaj-accent); color:white;
  border:none; border-radius:var(--radius-md); font-size:0.95rem; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:var(--space-sm);
  transition:all 0.2s ease;
}
.btn-login:hover:not(:disabled) { background:var(--coaj-accent-light); }
.btn-login:disabled { opacity:0.6; cursor:not-allowed; }

/* ============================================
   6. APP LAYOUT
   ============================================ */
.app { min-height:100vh; display:flex; flex-direction:column; }

/* ============================================
   7. HEADER (igual que actividades)
   ============================================ */
.header {
  position:sticky; top:0; z-index:100;
  background:var(--bg-card);
  padding:var(--space-md) var(--space-lg);
  padding-top:calc(var(--space-md) + var(--safe-top));
  border-bottom:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  max-width:1400px; margin:0 auto; gap:var(--space-md);
}
.header-brand { display:flex; align-items:center; gap:var(--space-md); text-decoration:none; }
.header-logo {
  width:40px; height:40px; border-radius:50%;
  background:white; object-fit:contain; padding:4px; box-shadow:var(--shadow-sm);
}
.header-text { display:flex; flex-direction:column; }
.header-greeting {
  font-size:0.7rem; color:var(--text-muted); font-weight:500;
  text-transform:uppercase; letter-spacing:0.5px;
}
.header-title { font-size:1.1rem; font-weight:700; color:var(--text-primary); }

.desktop-nav { display:none; align-items:center; gap:var(--space-xs); }
.desktop-nav-item {
  display:flex; align-items:center; gap:var(--space-xs);
  padding:var(--space-sm) var(--space-md); color:var(--text-secondary);
  font-size:0.9rem; font-weight:500; border-radius:var(--radius-md); transition:all 0.2s ease;
}
.desktop-nav-item:hover { background:var(--bg-muted); color:var(--text-primary); }
.desktop-nav-item.active { background:var(--coaj-accent); color:white; }
.desktop-nav-item .material-symbols-outlined { font-size:20px; }

.header-actions { display:flex; align-items:center; gap:var(--space-sm); }
.icon-btn {
  width:40px; height:40px; border-radius:var(--radius-md);
  background:var(--bg-muted); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; transition:all 0.2s ease;
}
.icon-btn:hover { background:var(--border); }
.icon-btn .material-symbols-outlined { font-size:20px; color:var(--text-secondary); }
.avatar-btn {
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,var(--coaj-accent),var(--coaj-accent-light));
  border:none; display:flex; align-items:center; justify-content:center;
  color:white; font-weight:700; font-size:0.95rem; transition:all 0.2s ease;
}
.avatar-btn:hover { transform:scale(1.05); box-shadow:0 4px 12px rgba(232,85,42,0.3); }

/* ============================================
   8. USER MENU
   ============================================ */
.user-menu {
  position:absolute; top:calc(100% + var(--space-sm)); right:var(--space-lg);
  background:var(--bg-card); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); border:1px solid var(--border);
  width:220px; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:all 0.2s ease;
}
.user-menu.active { opacity:1; visibility:visible; transform:translateY(0); }
.user-menu-header {
  display:flex; align-items:center; gap:var(--space-md);
  padding:var(--space-md); border-bottom:1px solid var(--border);
}
.user-menu-avatar {
  width:40px; height:40px; border-radius:50%;
  background:linear-gradient(135deg,var(--coaj-accent),var(--coaj-accent-light));
  display:flex; align-items:center; justify-content:center; color:white; font-weight:700;
}
.user-menu-name { font-weight:600; color:var(--text-primary); }
.user-menu-item {
  display:flex; align-items:center; gap:var(--space-md);
  padding:var(--space-md); color:var(--text-secondary); font-size:0.9rem;
  background:none; border:none; width:100%; text-align:left; transition:background 0.2s ease;
}
.user-menu-item:hover { background:var(--bg-muted); }
.user-menu-item .material-symbols-outlined { font-size:20px; }
.user-menu-item.logout { color:var(--error); border-top:1px solid var(--border); }

/* ============================================
   9. MAIN
   ============================================ */
.main {
  flex:1; padding:var(--space-lg);
  padding-bottom:calc(80px + var(--safe-bottom));
  max-width:1400px; margin:0 auto; width:100%;
}

/* ============================================
   10. STATS BAR
   ============================================ */
.stats-bar {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--space-md); margin-bottom:var(--space-lg);
}
.stat-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-md) var(--space-lg);
  display:flex; align-items:center; gap:var(--space-md);
  transition:all 0.2s ease;
}
.stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.stat-card .material-symbols-outlined { font-size:28px; color:var(--coaj-secondary); }
.stat-card.accent .material-symbols-outlined { color:var(--coaj-accent); }
.stat-card.success .material-symbols-outlined { color:var(--success); }
.stat-data { display:flex; flex-direction:column; }
.stat-num { font-size:1.5rem; font-weight:800; color:var(--text-primary); line-height:1; }
.stat-label { font-size:0.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; font-weight:600; }

/* ============================================
   11. FILTERS SECTION
   ============================================ */
.filters-section { margin-bottom:var(--space-lg); }

.search-bar {
  display:flex; align-items:center; gap:var(--space-sm);
  background:var(--bg-card); border:2px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-sm) var(--space-md);
  box-shadow:var(--shadow-sm); transition:all 0.2s ease;
  margin-bottom:var(--space-md);
}
.search-bar:focus-within { border-color:var(--coaj-accent); box-shadow:0 0 0 3px rgba(232,85,42,0.1); }
.search-bar .material-symbols-outlined { color:var(--text-muted); font-size:22px; }
.search-bar input {
  flex:1; border:none; background:transparent; padding:var(--space-sm);
  font-size:0.95rem; color:var(--text-primary); outline:none;
}
.search-bar input::placeholder { color:var(--text-muted); }
.search-clear {
  width:32px; height:32px; border-radius:50%; border:none;
  background:var(--bg-muted); display:flex; align-items:center; justify-content:center;
  transition:all 0.2s ease;
}
.search-clear:hover { background:var(--border); }
.search-clear .material-symbols-outlined { font-size:18px; color:var(--text-muted); }

.filters-chips {
  display:flex; gap:var(--space-sm); flex-wrap:wrap;
  margin-bottom:var(--space-md); overflow-x:auto;
  scrollbar-width:none; padding-bottom:2px;
}
.filters-chips::-webkit-scrollbar { display:none; }

.filter-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; background:var(--bg-card);
  border:1.5px solid var(--border); border-radius:var(--radius-full);
  font-size:0.78rem; font-weight:600; white-space:nowrap;
  cursor:pointer; transition:all 0.2s ease; flex-shrink:0;
}
.filter-chip:hover { border-color:var(--coaj-accent); color:var(--coaj-accent); background:var(--coaj-accent-soft); }
.filter-chip.active { background:var(--coaj-accent); color:white; border-color:var(--coaj-accent); box-shadow:0 4px 12px rgba(232,85,42,0.25); }
.filter-chip .material-symbols-outlined { font-size:16px; }
.chip-count {
  padding:1px 7px; border-radius:var(--radius-full);
  font-size:0.65rem; font-weight:700;
  background:var(--bg-muted); color:var(--text-muted);
}
.filter-chip.active .chip-count { background:rgba(255,255,255,0.3); color:white; }

.filters-row { display:flex; gap:var(--space-sm); flex-wrap:wrap; }
.filter-select {
  padding:8px 32px 8px 14px; border-radius:var(--radius-full);
  border:1.5px solid var(--border); background:var(--bg-card); color:var(--text-secondary);
  font-size:0.78rem; font-weight:600; font-family:inherit; cursor:pointer;
  transition:all 0.2s ease; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%238896a6'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.filter-select:focus { outline:none; border-color:var(--coaj-accent); }

/* ============================================
   12. LOADING & EMPTY
   ============================================ */
.loading-state {
  display:none; flex-direction:column; align-items:center;
  justify-content:center; padding:var(--space-2xl); gap:var(--space-md);
}
.loading-state.active { display:flex; }
.spinner {
  width:40px; height:40px; border:3px solid var(--border);
  border-top-color:var(--coaj-accent); border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.loading-state p { color:var(--text-muted); font-size:0.9rem; }

.empty-state {
  text-align:center; padding:var(--space-2xl); display:none;
}
.empty-state.active { display:block; }
.empty-state .material-symbols-outlined { font-size:64px; color:var(--text-muted); margin-bottom:var(--space-md); }
.empty-state h3 { font-size:1.1rem; color:var(--text-secondary); margin-bottom:var(--space-sm); }
.empty-state p { color:var(--text-muted); font-size:0.9rem; }

/* ============================================
   13. CENTRO CARDS (Listado)
   ============================================ */
.centro-card {
  background:var(--bg-card); border-radius:var(--radius-xl);
  border:1px solid var(--border); margin-bottom:var(--space-lg);
  overflow:hidden; transition:all 0.2s ease;
}
.centro-card:hover { box-shadow:var(--shadow-md); }

.centro-card-header {
  display:flex; align-items:center; gap:var(--space-md);
  padding:var(--space-lg);
  background:linear-gradient(135deg,var(--coaj-primary),var(--coaj-secondary));
  color:white; cursor:pointer; position:relative; overflow:hidden;
}
.centro-card-header::before {
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.centro-avatar {
  width:48px; height:48px; border-radius:var(--radius-md);
  background:rgba(255,255,255,0.15); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:800; flex-shrink:0;
  border:2px solid rgba(255,255,255,0.2); position:relative; z-index:1;
}
.centro-card-info { flex:1; min-width:0; position:relative; z-index:1; }
.centro-card-name { font-size:1.1rem; font-weight:700; letter-spacing:-0.01em; }
.centro-card-meta {
  display:flex; align-items:center; gap:12px; margin-top:4px;
  font-size:0.75rem; opacity:0.7;
}
.centro-card-meta-item { display:flex; align-items:center; gap:4px; }
.centro-card-meta-item .material-symbols-outlined { font-size:14px; }
.centro-badges {
  display:flex; gap:6px; flex-wrap:wrap; position:relative; z-index:1;
}
.centro-badge-tag {
  padding:4px 10px; border-radius:var(--radius-full);
  font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.3px;
  background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.15);
}
.centro-toggle-btn {
  position:relative; z-index:1; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,0.1); border:none;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s ease; flex-shrink:0; color:white;
}
.centro-toggle-btn .material-symbols-outlined { font-size:22px; transition:transform 0.3s ease; }
.centro-card.open .centro-toggle-btn { background:var(--coaj-accent); }
.centro-card.open .centro-toggle-btn .material-symbols-outlined { transform:rotate(180deg); }

/* Salas Grid inside centro */
.centro-salas-wrap {
  max-height:0; overflow:hidden;
  transition:max-height 0.5s cubic-bezier(.4,0,.2,1);
}
.centro-card.open .centro-salas-wrap { max-height:5000px; }
.salas-grid-inner { padding:var(--space-md) var(--space-lg) var(--space-lg); }
.salas-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--space-md);
}

/* Sala Card */
.sala-card {
  display:flex; align-items:center; gap:var(--space-md);
  padding:var(--space-md); background:var(--bg-page);
  border:1.5px solid var(--border); border-radius:var(--radius-md);
  cursor:pointer; transition:all 0.2s ease; position:relative;
}
.sala-card:hover {
  border-color:var(--coaj-accent); background:var(--coaj-accent-soft);
  transform:translateY(-2px); box-shadow:var(--shadow-md);
}
.sala-card:active { transform:translateY(0); }
.sala-card-icon {
  width:42px; height:42px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sala-card-icon.ocio { background:var(--success-bg); color:var(--success); }
.sala-card-icon.estudio { background:var(--info-bg); color:var(--info); }
.sala-card-icon.musica { background:var(--purple-bg); color:var(--purple); }
.sala-card-icon.otros { background:var(--bg-muted); color:var(--text-muted); }
.sala-card-icon .material-symbols-outlined { font-size:22px; }
.sala-card-info { flex:1; min-width:0; }
.sala-card-name {
  font-size:0.88rem; font-weight:600; color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sala-card-details {
  display:flex; align-items:center; gap:8px; margin-top:3px;
  font-size:0.7rem; color:var(--text-muted);
}
.sala-card-details .material-symbols-outlined { font-size:13px; }
.sala-tipo-tag {
  padding:2px 8px; border-radius:var(--radius-full);
  font-size:0.6rem; font-weight:700; text-transform:uppercase;
}
.sala-tipo-tag.ocio { background:var(--success-bg); color:var(--success); }
.sala-tipo-tag.estudio { background:var(--info-bg); color:var(--info); }
.sala-tipo-tag.musica { background:var(--purple-bg); color:var(--purple); }
.sala-tipo-tag.otros { background:var(--bg-muted); color:var(--text-muted); }
.sala-card-arrow {
  color:var(--text-muted); font-size:18px; flex-shrink:0;
  opacity:0; transition:all 0.2s ease;
}
.sala-card:hover .sala-card-arrow { opacity:1; color:var(--coaj-accent); }

/* ============================================
   14. VISTA DETALLE
   ============================================ */
.vista-detalle { display:none; }
.vista-detalle.active { display:block; animation:fadeUp 0.4s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* Back bar */
.detail-back-bar {
  display:flex; align-items:center; gap:var(--space-md);
  margin-bottom:var(--space-lg);
}
.btn-back {
  display:flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:var(--radius-full);
  background:var(--bg-card); border:1.5px solid var(--border);
  font-size:0.82rem; font-weight:600; color:var(--text-secondary);
  transition:all 0.2s ease;
}
.btn-back:hover { border-color:var(--coaj-accent); color:var(--coaj-accent); }
.btn-back .material-symbols-outlined { font-size:18px; }
.breadcrumb {
  display:flex; align-items:center; gap:6px;
  font-size:0.8rem; color:var(--text-muted);
}
.breadcrumb strong { color:var(--text-primary); font-weight:600; }
.breadcrumb .material-symbols-outlined { font-size:14px; }

/* Gallery */
.gallery {
  position:relative; height:360px; border-radius:var(--radius-xl);
  overflow:hidden; margin-bottom:var(--space-lg); box-shadow:var(--shadow-lg);
}
.gallery-slides {
  display:flex; height:100%;
  transition:transform 0.5s cubic-bezier(.4,0,.2,1);
}
.gallery-slide {
  min-width:100%; height:100%;
  background-size:cover; background-position:center; position:relative;
}
.gallery-slide::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(3,40,69,0.7) 0%,transparent 50%);
}
.gallery-overlay-info {
  position:absolute; bottom:0; left:0; right:0;
  padding:var(--space-xl); z-index:2; color:white;
}
.gallery-overlay-info h2 {
  font-size:1.8rem; font-weight:800; letter-spacing:-0.02em;
  margin-bottom:4px; text-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.gallery-overlay-info p {
  font-size:0.88rem; opacity:0.8;
  display:flex; align-items:center; gap:6px;
}
.gallery-overlay-info p .material-symbols-outlined { font-size:16px; }
.gallery-tags {
  display:flex; gap:8px; margin-top:var(--space-md); flex-wrap:wrap;
}
.gallery-tag {
  padding:5px 14px; border-radius:var(--radius-full);
  font-size:0.72rem; font-weight:700;
  background:rgba(255,255,255,0.15); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.2);
}
.gallery-nav-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px); border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,0.15); transition:all 0.2s ease; z-index:5;
}
.gallery-nav-btn:hover { background:#fff; transform:translateY(-50%) scale(1.08); }
.gallery-nav-btn .material-symbols-outlined { font-size:24px; color:var(--coaj-primary); }
.gallery-prev { left:var(--space-md); }
.gallery-next { right:var(--space-md); }
.gallery-dots {
  position:absolute; bottom:var(--space-md); right:var(--space-xl);
  display:flex; gap:6px; z-index:5;
}
.gallery-dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,0.35); border:none; cursor:pointer;
  transition:all 0.2s ease;
}
.gallery-dot.active { background:#fff; width:28px; border-radius:4px; }
.gallery-counter {
  position:absolute; top:var(--space-md); right:var(--space-md); z-index:5;
  padding:6px 14px; border-radius:var(--radius-full);
  background:rgba(0,0,0,0.5); backdrop-filter:blur(8px);
  color:white; font-size:0.72rem; font-weight:700;
}

/* Detail Grid */
.detail-grid {
  display:grid; grid-template-columns:1fr 400px;
  gap:var(--space-lg); align-items:start;
}
.detail-section {
  background:var(--bg-card); border-radius:var(--radius-lg);
  border:1px solid var(--border); padding:var(--space-lg);
  margin-bottom:var(--space-lg);
}
.detail-section-title {
  font-size:0.92rem; font-weight:700; color:var(--text-primary);
  display:flex; align-items:center; gap:var(--space-sm);
  margin-bottom:var(--space-md); padding-bottom:var(--space-sm);
  border-bottom:2px solid var(--border);
}
.detail-section-title .material-symbols-outlined { font-size:20px; color:var(--coaj-accent); }
.detail-section p { color:var(--text-secondary); font-size:0.88rem; line-height:1.75; }

/* Features Grid */
.features-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-sm); }
.feature-item {
  display:flex; align-items:center; gap:var(--space-sm);
  padding:var(--space-md); border-radius:var(--radius-md); background:var(--bg-muted);
}
.feature-icon-box {
  width:36px; height:36px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background:var(--coaj-accent-glow); flex-shrink:0;
}
.feature-icon-box .material-symbols-outlined { font-size:18px; color:var(--coaj-accent); }
.feature-label { font-size:0.65rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; font-weight:600; }
.feature-value { font-size:0.82rem; font-weight:600; color:var(--text-primary); margin-top:1px; }

/* ============================================
   15. CALENDARIO (en detalle)
   ============================================ */
.calendar-card {
  background:var(--bg-card); border-radius:var(--radius-lg);
  border:1px solid var(--border); overflow:hidden; box-shadow:var(--shadow-md);
}
.calendar-card-header {
  padding:var(--space-md) var(--space-lg);
  background:linear-gradient(135deg,var(--coaj-primary),var(--coaj-secondary)); color:white;
}
.calendar-card-header h3 {
  font-size:1rem; font-weight:700;
  display:flex; align-items:center; gap:var(--space-sm);
}
.calendar-card-header h3 .material-symbols-outlined { font-size:20px; }
.calendar-card-header p { font-size:0.72rem; opacity:0.6; margin-top:2px; }

.cal-nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-md) var(--space-lg) var(--space-sm);
}
.cal-nav-btn {
  width:30px; height:30px; border-radius:50%; background:var(--bg-muted);
  border:none; display:flex; align-items:center; justify-content:center;
  transition:all 0.2s ease; color:var(--text-primary);
}
.cal-nav-btn:hover { background:var(--coaj-accent); color:white; }
.cal-nav-btn .material-symbols-outlined { font-size:18px; }
.cal-month-label { font-size:0.88rem; font-weight:700; color:var(--text-primary); }

.cal-weekdays {
  display:grid; grid-template-columns:repeat(7,1fr);
  padding:var(--space-xs) var(--space-md); gap:2px;
}
.cal-wd {
  text-align:center; font-size:0.6rem; font-weight:700;
  color:var(--text-muted); text-transform:uppercase; padding:6px 0;
}
.cal-days {
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:3px; padding:var(--space-xs) var(--space-md) var(--space-md);
}
.cal-day {
  aspect-ratio:1; border-radius:var(--radius-sm);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:0.82rem; font-weight:500; cursor:pointer;
  transition:all 0.2s ease; background:var(--bg-muted);
  border:2px solid transparent; gap:1px;
}
.cal-day:hover:not(.cal-day-off):not(.cal-day-past) { border-color:var(--coaj-accent); transform:scale(1.05); }
.cal-day-off { opacity:0.2; pointer-events:none; }
.cal-day-past { opacity:0.3; pointer-events:none; }
.cal-day-today { border-color:var(--coaj-secondary); background:rgba(10,61,92,0.08); font-weight:700; }
.cal-day-avail { background:var(--success-bg); border-color:rgba(5,150,105,0.2); }
.cal-day-avail:hover { background:var(--success); color:white; border-color:var(--success); }
.cal-day-sel { background:var(--coaj-accent)!important; color:white!important; border-color:var(--coaj-accent)!important; box-shadow:0 4px 12px rgba(232,85,42,0.35); }
.cal-day-slots { font-size:0.5rem; font-weight:700; opacity:0.75; }

/* Slots */
.slots-area { padding:0 var(--space-lg) var(--space-lg); }
.slots-label {
  font-size:0.78rem; font-weight:700; color:var(--text-primary);
  margin-bottom:var(--space-sm); display:flex; align-items:center; gap:6px;
}
.slots-label .material-symbols-outlined { font-size:16px; color:var(--coaj-accent); }
.slots-label .slots-date { color:var(--text-muted); font-weight:500; margin-left:auto; font-size:0.72rem; }
.slots-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.slot-btn {
  padding:10px 6px; border-radius:var(--radius-sm);
  border:1.5px solid var(--border); background:var(--bg-card);
  text-align:center; transition:all 0.2s ease; cursor:pointer;
}
.slot-btn:hover:not(.slot-off) { border-color:var(--coaj-accent); background:var(--coaj-accent-soft); }
.slot-btn.slot-sel {
  background:var(--coaj-accent); color:white; border-color:var(--coaj-accent);
  box-shadow:0 4px 12px rgba(232,85,42,0.3);
}
.slot-btn.slot-off { opacity:0.3; pointer-events:none; text-decoration:line-through; }
.slot-time { font-size:0.82rem; font-weight:600; }
.slot-status { font-size:0.58rem; color:var(--text-muted); margin-top:2px; }
.slot-btn.slot-sel .slot-time,.slot-btn.slot-sel .slot-status { color:white; }

/* Booking CTA */
.booking-cta {
  padding:var(--space-md) var(--space-lg);
  border-top:1px solid var(--border);
}
.booking-info { font-size:0.75rem; color:var(--text-muted); margin-bottom:var(--space-sm); text-align:center; }
.booking-info strong { color:var(--text-primary); font-size:0.85rem; display:block; margin-top:2px; }
.btn-reservar {
  width:100%; padding:var(--space-md); border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--coaj-accent),var(--coaj-accent-light));
  color:white; border:none; font-size:0.95rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:var(--space-sm);
  box-shadow:0 8px 28px rgba(232,85,42,0.3); transition:all 0.2s ease;
}
.btn-reservar:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(232,85,42,0.45); }
.btn-reservar:disabled { opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-reservar .material-symbols-outlined { font-size:20px; }

/* ============================================
   16. BOTTOM NAV
   ============================================ */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0;
  background:var(--bg-card); border-top:1px solid var(--border);
  padding:var(--space-sm) var(--space-md);
  padding-bottom:calc(var(--space-sm) + var(--safe-bottom)); z-index:100;
}
.nav-items { display:flex; justify-content:space-around; align-items:center; max-width:500px; margin:0 auto; }
.nav-item {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:var(--space-sm) var(--space-md); color:var(--text-muted);
  font-size:0.65rem; font-weight:600; background:none; border:none;
  cursor:pointer; transition:color 0.2s ease; text-decoration:none;
}
.nav-item .material-symbols-outlined { font-size:22px; }
.nav-item.active { color:var(--coaj-accent); }

/* ============================================
   17. MODALS
   ============================================ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(3,40,69,0.6);
  backdrop-filter:blur(4px); z-index:200;
  opacity:0; visibility:hidden; transition:all 0.3s ease;
}
.modal-overlay.active { opacity:1; visibility:visible; }
.modal-drawer {
  position:fixed; bottom:0; left:0; right:0;
  background:var(--bg-card); border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  max-height:90vh; z-index:201; transform:translateY(100%);
  transition:transform 0.3s ease; display:flex; flex-direction:column;
}
.modal-drawer.active { transform:translateY(0); }
.modal-handle { display:flex; justify-content:center; padding:var(--space-sm) 0; }
.modal-handle::after { content:''; width:40px; height:4px; background:var(--border); border-radius:var(--radius-full); }
.modal-header {
  display:flex; align-items:center; gap:var(--space-md);
  padding:0 var(--space-lg) var(--space-md); border-bottom:1px solid var(--border);
}
.modal-back {
  width:36px; height:36px; border-radius:50%; background:var(--bg-muted);
  border:none; display:flex; align-items:center; justify-content:center;
}
.modal-back .material-symbols-outlined { font-size:20px; color:var(--text-primary); }
.modal-title { flex:1; font-size:1.1rem; font-weight:700; display:flex; align-items:center; gap:var(--space-sm); }
.modal-body {
  flex:1; overflow-y:auto;
  padding:var(--space-md) var(--space-lg);
  padding-bottom:calc(var(--space-lg) + var(--safe-bottom));
}

/* ============================================
   18. TOAST
   ============================================ */
.toast {
  position:fixed; bottom:calc(80px + var(--safe-bottom)); left:50%;
  transform:translateX(-50%) translateY(100px);
  background:var(--coaj-primary); color:white;
  padding:var(--space-md) var(--space-lg); border-radius:var(--radius-full);
  display:flex; align-items:center; gap:var(--space-sm);
  font-weight:600; font-size:0.9rem; box-shadow:var(--shadow-lg);
  opacity:0; transition:all 0.3s ease; z-index:500;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
.toast.success { background:var(--success); }
.toast.error { background:var(--error); }

/* ============================================
   19. RESPONSIVE MOVIL
   ============================================ */
@media (max-width:767px) {
  html,body { overflow-x:hidden; max-width:100vw; }
  .app { overflow-x:hidden; max-width:100vw; }
  .main { padding:var(--space-md); padding-bottom:calc(80px + var(--safe-bottom)); overflow-x:hidden; }
  .stats-bar { grid-template-columns:repeat(2,1fr); gap:var(--space-sm); }
  .stat-card { padding:var(--space-sm) var(--space-md); }
  .stat-card .material-symbols-outlined { font-size:22px; }
  .stat-num { font-size:1.2rem; }
  .centro-card-header { padding:var(--space-md); }
  .centro-card-name { font-size:0.95rem; }
  .centro-badges { display:none; }
  .salas-grid { grid-template-columns:1fr; }
  .gallery { height:220px; border-radius:var(--radius-lg); }
  .gallery-overlay-info h2 { font-size:1.3rem; }
  .gallery-overlay-info { padding:var(--space-md); }
  .detail-grid { grid-template-columns:1fr; gap:var(--space-md); }
  .detail-right { position:static; }
  .features-grid { grid-template-columns:1fr; }
  .slots-grid { grid-template-columns:repeat(3,1fr); }
  .filters-chips { flex-wrap:nowrap; overflow-x:auto; }
}

@media (max-width:400px) {
  .gallery { height:180px; }
  .gallery-nav-btn { width:36px; height:36px; }
  .stat-card .material-symbols-outlined { font-size:20px; }
  .stat-num { font-size:1rem; }
}

/* ============================================
   20. RESPONSIVE DESKTOP
   ============================================ */
@media (min-width:768px) {
  html,body { overflow-x:hidden; }
  .desktop-nav { display:flex; }
  .bottom-nav { display:none; }
  .main { max-width:1400px; margin:0 auto; padding:var(--space-xl); padding-bottom:var(--space-xl); }
  .detail-right { position:sticky; top:100px; }

  .modal-drawer {
    max-width:500px; max-height:80vh; left:50%; right:auto; bottom:auto; top:50%;
    transform:translate(-50%,-50%) scale(0.95); border-radius:var(--radius-xl);
    opacity:0; visibility:hidden;
  }
  .modal-drawer.active { transform:translate(-50%,-50%) scale(1); opacity:1; visibility:visible; }
  .modal-body { max-height:60vh; overflow-y:auto; }
  .login-card { max-width:420px; }
  .toast { bottom:var(--space-xl); }
}

@media (min-width:1024px) {
  .salas-grid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
}