/* =============================================================================
   SEHL SOVEREIGN — CAPA DE RESKIN  ·  v1
   Convierte el "Deep Glass" (obsidiana + cian neón) a la doctrina SEHL
   (Oro Imperial + Gris Cenizo + Marfil + Platino).  Solo presentación.

   · Se carga DESPUÉS de design-system.css y del theme.css del Style Center,
     por lo que GANA en cascada. Reversible: quitar el <link> y vuelve atrás.
   · No toca markup, JS ni backend → ninguna función se pierde.
   · Re-mapea los tokens que los componentes ya consumen (var(--bg-*),
     var(--gold), var(--neon-*), var(--blur-*), var(--text-*)…), así reskina
     las 255 páginas — incluido el Tape Chart — de una sola vez.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1) RE-MAPEO DE TOKENS  (gana por orden de carga; sin !important)
   --------------------------------------------------------------------------- */
:root{
  /* Cenizo canónico */
  --sehl-ash-1000:#0B0D0F; --sehl-ash-950:#111316; --sehl-ash-900:#191C20;
  --sehl-ash-850:#1E2227;  --sehl-ash-800:#23272C; --sehl-ash-700:#2D3238;
  --sehl-ash-600:#555B63;  --sehl-ash-500:#737A82; --sehl-ash-400:#989EA5;
  /* Oro */
  --sehl-gold-deep:#8F672A; --sehl-gold:#C89A47; --sehl-gold-light:#E4C77C; --sehl-gold-pale:#F1DEAE;
  --sehl-gold-grad:linear-gradient(135deg,#F1DEAE 0%,#E4C77C 34%,#C89A47 68%,#8F672A 100%);
  --sehl-gold-line:rgba(200,154,71,.48);
  /* Sovereign glass cenizo */
  --sehl-glass:rgba(35,39,44,.78);
  --sehl-glass-2:rgba(30,34,39,.60);

  /* --- surfaces --- */
  --bg-base:#191C20;
  --bg-abyss:#111316;
  --bg-surface:#23272C;
  --bg-elevated:#2D3238;

  /* --- cristal: films neutros cenizos en vez de blancos --- */
  --glass-01:rgba(244,243,239,0.05);
  --glass-02:rgba(244,243,239,0.035);
  --glass-03:rgba(244,243,239,0.02);

  /* --- bordes: sin "cristal mojado"; reborde superior con tinte oro --- */
  --border-shine:rgba(244,243,239,0.12);
  --border-soft:rgba(244,243,239,0.10);
  --border-subtle:rgba(244,243,239,0.06);
  --reflect-top:rgba(228,199,124,0.18);
  --reflect-inner:rgba(244,243,239,0.08);

  /* --- desenfoque moderado (doctrina prohíbe 40–80px) --- */
  --blur-heavy:blur(18px) saturate(125%);
  --blur-medium:blur(16px) saturate(120%);
  --blur-light:blur(12px) saturate(115%);

  /* --- sombras profundas, baja opacidad, inset oro tenue --- */
  --shadow-deep:0 22px 54px rgba(0,0,0,0.42), inset 0 1px 0 0 rgba(228,199,124,0.10);
  --shadow-card:0 10px 28px rgba(0,0,0,0.34), inset 0 1px 0 0 rgba(244,243,239,0.06);
  --shadow-float:0 28px 64px rgba(0,0,0,0.52), 0 12px 24px rgba(0,0,0,0.26);

  /* --- acento oro --- */
  --gold:rgba(200,154,71,0.95);
  --gold-soft:rgba(200,154,71,0.50);
  --text-gold:#E4C77C;

  /* --- estados funcionales SEHL (apagados, nunca neón) --- */
  --blue-soft:#9EB5CB;   /* llegadas / info — azul acero */
  --green-soft:#8FB78A;  /* en casa / éxito — salvia */
  --rose-soft:#D58A80;   /* salidas / negativo — terracota */
  --violet-soft:#B2A5C9; /* huéspedes / grupo — violeta polvoriento */
  --peach-soft:#D2A07A;  /* pendiente / no-show — durazno */
  --pms-amber:#D6A557;   /* tape: reserved/pending/today — ámbar apagado */
  --pms-peach:#D2A07A;

  /* --- "neón" canónico → equivalentes soberanos (mata el cian) --- */
  --neon-cyan:#9EB5CB;
  --neon-cyan-soft:rgba(158,181,203,0.14);
  --neon-cyan-glow:rgba(158,181,203,0.28);
  --neon-violet:#B2A5C9;
  --neon-gold:#C89A47;
  --neon-emerald:#8FB78A;

  /* --- texto marfil/platino --- */
  --text-primary:#F4F3EF;
  --text-secondary:#C5C8CC;
  --text-muted:#989EA5;
}

/* fondo soberano de marca (radial oro + cenizo) */
body, body.deep-glass{
  background:
    radial-gradient(ellipse 82% 62% at 50% -18%, rgba(200,154,71,0.10) 0%, transparent 62%),
    radial-gradient(ellipse 62% 52% at 92% 92%, rgba(85,91,99,0.13) 0%, transparent 62%),
    linear-gradient(160deg, #111316 0%, #191C20 48%, #111316 100%) !important;
  background-attachment:fixed !important;
}

/* ---------------------------------------------------------------------------
   2) FAMILIA DE PANELES / TARJETAS — unificación soberana
   (mismo material Sovereign Glass, reborde superior oro, radios consistentes)
   --------------------------------------------------------------------------- */
.glass-panel, .glass-card, .dash-panel, .dash-card, .card, .panel,
.hub-card, .metric-card, .kpi-card, .settings-card, .auth-card{
  background:var(--sehl-glass) !important;
  backdrop-filter:var(--blur-medium) !important;
  -webkit-backdrop-filter:var(--blur-medium) !important;
  border:1px solid var(--border-subtle) !important;
  border-top-color:rgba(228,199,124,0.16) !important;
  box-shadow:var(--shadow-card) !important;
}
.glass-panel{ border-radius:var(--r-xl, 20px) !important; }
.glass-card, .dash-card, .card, .panel, .hub-card, .metric-card,
.kpi-card, .settings-card, .auth-card{ border-radius:var(--r-lg, 16px) !important; }

/* hover sobrio: el borde se tiñe de oro (sin glow en cada tarjeta) */
.glass-panel:hover, .glass-card:hover, .dash-card:hover, .card:hover,
.hub-card:hover, .metric-card:hover, .kpi-card:hover, .settings-card:hover{
  border-color:rgba(200,154,71,0.26) !important;
  transform:translateY(-1px);
  transition:border-color var(--t-base,180ms) var(--ease-standard, cubic-bezier(.22,.61,.36,1)),
             transform var(--t-base,180ms) var(--ease-standard, cubic-bezier(.22,.61,.36,1));
}

/* títulos de panel: Cinzel (autoridad) + microetiqueta dorada */
.dash-panel-title, .dash-chart-title{
  font-family:'Cinzel','Times New Roman',serif !important;
  color:var(--sehl-gold-light) !important;
  letter-spacing:0.12em !important;
}

/* ---------------------------------------------------------------------------
   3) TABLAS — cabecera Inter semibold, hover oro ≤6%, divisores suaves
   --------------------------------------------------------------------------- */
.data-table thead th, .sehl-table thead th, .res-table thead th{
  color:var(--text-muted) !important;
  border-bottom:1px solid var(--border-soft) !important;
  text-transform:uppercase; letter-spacing:.05em;
}
.data-table tbody tr:hover, .sehl-table tbody tr:hover, .res-table tbody tr:hover{
  background:rgba(200,154,71,0.06) !important;
}
.data-table tbody td, .sehl-table tbody td, .res-table tbody td{
  border-bottom:1px solid var(--border-subtle) !important;
}

/* ---------------------------------------------------------------------------
   4) BOTONES / ACENTOS — el primario es oro ceremonial, no cian
   --------------------------------------------------------------------------- */
.btn.primary, .pms-btn.primary, .tb-action.primary, .tc-bar.primary{
  background:var(--gold-soft) !important;
  border:1px solid var(--sehl-gold-line) !important;
  color:#1a1206 !important;
}
.btn.primary:hover, .pms-btn.primary:hover, .tb-action.primary:hover{
  background:rgba(200,154,71,0.85) !important;
}
/* foco visible dorado (accesibilidad) */
:focus-visible{ outline:2px solid var(--sehl-gold-light) !important; outline-offset:3px; }

/* marca lateral activa del sidebar en oro */
.nav-item.active, .nav-subitem.active{
  color:var(--sehl-gold-light) !important;
  border-left-color:var(--sehl-gold) !important;
  background:linear-gradient(90deg, rgba(200,154,71,0.14), rgba(200,154,71,0.03)) !important;
}

/* ---------------------------------------------------------------------------
   5) TAPE CHART — estilo soberano, FUNCIONES INTACTAS (solo color/forma)
   Estados por doctrina: llegada=acero · en casa=salvia · salida=terracota ·
   grupo=violeta · pendiente/today=ámbar · VIP=oro.
   --------------------------------------------------------------------------- */
.tc-wrap{ background:transparent !important; }
.tc-track{ background-color:transparent !important; }  /* color sí, pero NO resetear la grilla (background-image) */
.tc-cell{
  background:rgba(244,243,239,0.022) !important;
  border-color:var(--border-subtle) !important;
}
.tc-cell:hover{ background:rgba(200,154,71,0.05) !important; }

/* columna/línea de HOY en oro */
.tc-cell.is-today, .tc-col-today, .tcx-today{
  background:rgba(200,154,71,0.07) !important;
  box-shadow:inset 1px 0 0 0 var(--sehl-gold-line) !important;
}

/* barras de reserva — radios suaves + estados SEHL (clases reales del tape) */
.tc-bar, .tc-res, .tc-block{
  border-radius:8px !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.28) !important;
}
.tc-barlabel b{ color:inherit; }
.tc-res.tc-confirmed { background:#9EB5CB !important; color:#10131a !important; }  /* llegada — azul acero */
.tc-res.tc-checked_in{ background:#8FB78A !important; color:#12180f !important; }  /* en casa — salvia */
.tc-res.tc-checked_out{ background:#D58A80 !important; color:#1a0f0d !important; } /* salida — terracota */
.tc-res.tc-new       { background:#B2A5C9 !important; color:#16121c !important; }  /* nueva/grupo — violeta */
.tc-res.tc-dueout    { box-shadow:inset 0 0 0 2px #D6A557, 0 4px 12px rgba(0,0,0,.28) !important; } /* sale hoy — ámbar */
.tc-res.tc-vip       { box-shadow:0 0 0 2px var(--sehl-gold), 0 0 14px rgba(200,154,71,.30), 0 1px 3px rgba(0,0,0,.3) !important; } /* VIP — anillo oro */
.tc-bar:hover, .tc-res:hover{ filter:brightness(1.07); }

/* KPIs del tape (tcx-kpi) y valores in-house → acero, no cian */
.tcx-kpi .tcx-ldot, .fd2-kpi--in_house .fd2-kpi-value, .fd2-kpi--occ .fd2-occ-val{
  color:var(--blue-soft) !important;
}

/* riel inferior / etiquetas de fila */
.tc-rowlabel, .tc-c-room, .tc-sumlabel{ color:var(--text-secondary) !important; }
.tc-c-type, .tc-c-state{ color:var(--text-muted) !important; }

/* menú contextual del tape (mover, swap, split, bloquear, HK…) — cenizo elevado */
.tc-menu, .tcm-card, .tc-tip{
  background:rgba(45,50,56,0.98) !important;
  border:1px solid var(--border-soft) !important;
  box-shadow:var(--shadow-float) !important;
}
.tc-menu-act:hover, .tcm-chip:hover{
  background:linear-gradient(90deg, rgba(200,154,71,0.16), rgba(200,154,71,0.045)) !important;
  color:var(--sehl-gold-light) !important;
}

/* ---------------------------------------------------------------------------
   5b) TAPE — rail compacto de 4 columnas: Núm · Tipo · Limpieza · Ocupancia.
   Limpieza = punto (verde=limpia / rojo=sucia). Ocupancia = círculo
   (lleno=ocupada / aro=vacía). Los anchos suman LW (182px) → sin hueco muerto.
   --------------------------------------------------------------------------- */
.tc .tc-c-room{ flex:0 0 50px !important; width:50px !important; min-width:50px !important; }
.tc .tc-c-type{ flex:0 0 52px !important; width:52px !important; min-width:52px !important; }
.tc .tc-c-hsk, .tc .tc-c-occ{ flex:0 0 30px !important; width:30px !important; min-width:30px !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.tc .tc-c-state{ flex:0 0 60px !important; width:60px !important; min-width:60px !important; }   /* celda combinada en filas ribbon/summary (= HK+Occ) */
.tc .tc-c-state .tc-state-t{ display:none !important; }
.tc .tc-h.tc-c-hsk, .tc .tc-h.tc-c-occ{ font-size:9px !important; color:var(--text-muted,#989ea5) !important; justify-content:center !important; }
.tc .tc-occi{ width:11px !important; height:11px !important; border-width:2px !important; background:#3FA66A !important; border-color:#3FA66A !important; }  /* vacío = verde lleno */
.tc .tc-occi.full{ background:#D74C40 !important; border-color:#D74C40 !important; }       /* ocupado = rojo lleno */
.tc .tc-occi.resv{ background:transparent !important; border-color:var(--sehl-brand-gold,#C89A47) !important; border-style:dashed !important; }  /* reservado = aro dorado punteado */
/* día actual: quitar la raya vertical; se queda solo la celda de fecha iluminada (.tc-tday) */
.tc-todayline{ display:none !important; }
/* contenedor del tape: la grilla llena el panel (sin la "caja dentro de caja") */
.tc-wrap{ padding:0 !important; }
.tc .tc-hkdot{ width:11px !important; height:11px !important; }   /* mismo tamaño que el círculo de ocupación */
.tc .tc-hkdot.hk-clean, .tc .tc-hkdot.hk-inspected{ background:#8FB78A !important; }   /* limpia = verde */
.tc .tc-hkdot.hk-dirty{ background:#E3C04E !important; }                                /* sucia = amarillo */
/* texto de la barra de reserva = nombre del huésped en negro (legible sobre el color) */
.tc .tc-barlabel, .tc .tc-barlabel b, .tc .tc-barlabel small{ color:#120D07 !important; }
/* líneas verticales también en la cabecera de fechas (combina con la grilla del track) */
.tc-v2 .tc-day{ border-right:1px solid rgba(244,243,239,.12) !important; }
/* el toggle "Status" oculta también las columnas nuevas HK/Oc */
.tc.tc-hide-state .tc-c-hsk, .tc.tc-hide-state .tc-c-occ{ display:none !important; }
/* número de habitación bien ubicado en su celda angosta */
.tc .tc-c-room{ justify-content:flex-start !important; padding-left:10px !important; overflow:hidden !important; }
.tc .tc-c-room .tc-rnum{ font-size:12.5px !important; }
.tc .tc-h.tc-c-room{ padding-left:10px !important; }

/* ---------------------------------------------------------------------------
   6) RESPETO A reduced-motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}

/* ---------------------------------------------------------------------------
   7) TIPOGRAFÍA SEHL — Cinzel (autoridad) · Inter (UI/cuerpo) · JetBrains Mono (datos)
   Las fuentes ya se cargan en base.html; aquí se garantizan en TODO el PMS.
   --------------------------------------------------------------------------- */
:root{
  --font-display:'Cinzel','Times New Roman',serif;
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-data:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
}
body, .app-shell, .app-main, .app-content,
input, select, textarea, button, .nav-item, .nav-subitem, .tb-action{ font-family:var(--font-ui); }
/* H1/H2 y títulos principales = Cinzel (H3 y cuerpo siguen en Inter, por doctrina) */
h1, h2, .app-title, .section-title, .page-title, .dash-pagetitle,
.sidebar-brand, .auth-title, .hub-title{ font-family:var(--font-display) !important; letter-spacing:.02em; }
/* Cifras / IDs / métricas / código = JetBrains Mono, tabular */
.mono, .num, .tabular, .kpi-value, .dash-kpi-value, .donut-value, .metric-value,
.amount, .col-amount, .tcx-kpi-value, code, kbd, samp, .footer-ver{
  font-family:var(--font-data) !important; font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------------------
   8) TOP BAR — AI Advisor + menú de usuario (elementos nuevos)
   --------------------------------------------------------------------------- */
.topbar-end{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
/* AI + usuario viven DENTRO de .topbar-actions (columna derecha de la grilla del topbar);
   permitir que la columna acomode sus ítems sin tirar nada a una segunda fila del bar */
.app-topbar .topbar-actions{ flex-wrap:wrap !important; row-gap:6px !important; }
.app-topbar .topbar-actions .tb-ai,
.app-topbar .topbar-actions .tb-usermenu{ flex:0 0 auto; }

.tb-ai{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 13px; border-radius:999px;
  border:1px solid rgba(178,165,201,.35); background:rgba(178,165,201,.12); color:#CFC5E2;
  font-family:var(--font-ui); font-size:12px; font-weight:600; letter-spacing:.02em; cursor:pointer;
  transition:background .18s, border-color .18s;
}
.tb-ai:hover{ background:rgba(178,165,201,.22); border-color:rgba(178,165,201,.6); }
.tb-ai svg{ width:15px; height:15px; }
@media (max-width:1180px){ .tb-ai .tb-ai-label{ display:none; } .tb-ai{ padding:0 10px; } }
/* Botones de ícono de la derecha = IDÉNTICOS a los de la izquierda (.tb-btn 32x32),
   anulando la regla "pill" de .topbar-actions>a que los deformaba y ocultaba el ícono */
.app-topbar .topbar-actions a.tb-btn,
.app-topbar .topbar-actions button.tb-btn{
  width:32px !important; height:32px !important; min-height:32px !important;
  padding:0 !important; border-radius:var(--r-sm,8px) !important; font-size:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  background:var(--glass-02, rgba(244,243,239,.035)) !important;
  border:1px solid rgba(218,185,128,.22) !important; color:var(--gold) !important; box-shadow:none !important;
}
.app-topbar .topbar-actions a.tb-btn:hover,
.app-topbar .topbar-actions button.tb-btn:hover{
  border-color:rgba(228,199,124,.55) !important; background:rgba(200,154,71,.10) !important; transform:translateY(-1px) !important;
}
.app-topbar .topbar-actions a.tb-btn svg,
.app-topbar .topbar-actions button.tb-btn svg{
  width:17px !important; height:17px !important; display:block !important;
  stroke:currentColor !important; fill:none !important;
}

.tb-usermenu{ position:relative; }
.tb-userbtn{
  display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 7px 0 5px; border-radius:var(--r-sm,8px);
  border:1px solid rgba(218,185,128,.22); background:var(--glass-02, rgba(244,243,239,.035)); color:var(--gold); cursor:pointer;
  transition:background .18s, border-color .18s;
}
.tb-userbtn:hover{ border-color:rgba(228,199,124,.55); background:rgba(200,154,71,.10); }
.tb-caret{ opacity:.8; stroke:currentColor; fill:none; }
.tb-avatar{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-ui); font-weight:800; font-size:12px; color:var(--gold);
  background:transparent;
}
.tb-avatar svg{ stroke:currentColor !important; fill:none; stroke-width:1.7; }
.tb-avatar-lg{ width:38px; height:38px; font-size:15px; background:rgba(200,154,71,.14); border:1px solid var(--sehl-gold-line); }
.tb-avatar-lg{ width:38px; height:38px; font-size:15px; }

.tb-usercard{
  position:absolute; top:46px; right:0; min-width:236px; z-index:120; display:none;
  background:rgba(45,50,56,.99); border:1px solid var(--border-soft); border-radius:14px;
  box-shadow:var(--shadow-float); padding:8px; backdrop-filter:var(--blur-medium);
}
.tb-usermenu.open .tb-usercard{ display:block; }
.tb-uc-head{ display:flex; align-items:center; gap:10px; padding:8px 8px 12px; border-bottom:1px solid var(--border-subtle); margin-bottom:6px; }
.tb-uc-name{ font-family:var(--font-display); font-size:14px; color:var(--text-primary); }
.tb-uc-role{ font-size:11px; color:var(--text-muted); }
.tb-uc-row{ display:flex; align-items:center; gap:9px; padding:8px 10px; font-size:12px; color:var(--text-muted); }
.tb-uc-item{
  display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:9px; width:100%;
  font-family:var(--font-ui); font-size:13px; color:var(--text-secondary); text-decoration:none;
  background:transparent; border:none; text-align:left; cursor:pointer;
}
.tb-uc-item:hover{ background:linear-gradient(90deg,rgba(200,154,71,.16),rgba(200,154,71,.045)); color:var(--sehl-gold-light); }
.tb-uc-item svg, .tb-uc-row svg{ stroke:currentColor; fill:none; stroke-width:1.7; }
.tb-uc-danger:hover{ background:rgba(213,138,128,.14); color:#D58A80; }
.tb-uc-logout{ margin:0; }

/* AI Advisor — panel lateral (solo guía) */
.ai-scrim{ position:fixed; inset:0; background:rgba(11,13,15,.5); backdrop-filter:blur(2px); z-index:140; opacity:0; pointer-events:none; transition:opacity .2s; }
.ai-scrim.open{ opacity:1; pointer-events:auto; }
.ai-drawer{
  position:fixed; top:0; right:0; bottom:0; width:380px; max-width:92vw; z-index:150; transform:translateX(100%);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1); background:rgba(30,34,39,.99);
  border-left:1px solid var(--border-soft); box-shadow:var(--shadow-float); display:flex; flex-direction:column;
}
.ai-drawer.open{ transform:none; }
.ai-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border-subtle); }
.ai-head h2{ font-family:var(--font-display); font-size:16px; color:var(--sehl-gold-light); margin:0; display:flex; align-items:center; gap:9px; }
.ai-head h2 svg{ width:18px; height:18px; stroke:#B2A5C9; fill:none; }
.ai-close{ width:32px; height:32px; border-radius:8px; background:transparent; border:none; color:var(--text-muted); font-size:20px; cursor:pointer; }
.ai-close:hover{ background:rgba(244,243,239,.06); color:var(--text-primary); }
.ai-body{ padding:18px 20px; overflow-y:auto; flex:1; }
.ai-tag{ display:inline-block; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#CFC5E2;
  background:rgba(178,165,201,.12); border:1px solid rgba(178,165,201,.3); border-radius:999px; padding:3px 9px; margin-bottom:14px; }
.ai-note{ display:flex; gap:10px; padding:12px; border-radius:12px; background:rgba(178,165,201,.10); border:1px solid rgba(178,165,201,.22); margin-bottom:10px; }
.ai-note p{ font-size:12.5px; line-height:1.55; color:var(--text-secondary); margin:0; }
.ai-foot{ padding:14px 20px; border-top:1px solid var(--border-subtle); font-size:11px; color:var(--text-muted); }

/* ---------------------------------------------------------------------------
   9) DASHBOARD — donuts y tarjetas con el estilo SEHL (anillos gruesos, cristal cenizo)
   --------------------------------------------------------------------------- */
.dash-pro .occupancy-grid{ gap:20px !important; }
/* Donuts desnudos como la preview — sin tarjeta individual (un solo panel los contiene) */
.dash-pro .occupancy-item{ background:transparent !important; border:none !important; box-shadow:none !important; padding:10px 6px !important; }
.dash-pro .donut{ max-width:158px !important; }
.dash-pro .donut-bg{ stroke-width:20 !important; stroke:rgba(244,243,239,.06) !important; }
.dash-pro .donut-seg{ stroke-width:20 !important; stroke-linecap:round !important; }
.dash-pro .donut-value{ font-family:var(--font-data) !important; font-size:27px !important; font-weight:700 !important; color:var(--text-primary) !important; }
.dash-pro .donut-label{ letter-spacing:.10em !important; color:var(--text-muted) !important; }

/* KPI strip (Revenue / ADR / RevPAR / Occupancy) — igual que la preview */
.dash-pro .dash-kpis{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:16px 0;
  background:rgba(244,243,239,.06); border-radius:16px; overflow:hidden;
  border:1px solid var(--border-subtle); border-top-color:rgba(228,199,124,.14);
}
.dash-pro .dash-kpi{
  padding:18px 22px; display:flex; flex-direction:column; gap:4px; transition:background .2s;
  background:linear-gradient(160deg, var(--sehl-ash-800,#23272C), var(--sehl-ash-900,#191C20));
}
.dash-pro .dash-kpi:hover{ background:linear-gradient(160deg, var(--sehl-ash-800,#23272C), rgba(200,154,71,.05)); }
.dash-pro .dash-kpi-label{ font-family:var(--font-display); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); }
.dash-pro .dash-kpi-value{ font-family:var(--font-data); font-size:26px; font-weight:700; line-height:1.1; color:var(--sehl-gold-light,#E4C77C); font-variant-numeric:tabular-nums; }
.dash-pro .dash-kpi-sub{ font-family:var(--font-ui); font-size:10px; color:var(--text-muted); }

/* Grilla inferior de 3 paneles (preview) */
.dash-pro .dash-bottom{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-top:16px; }
@media (max-width:1100px){
  .dash-pro .dash-kpis{ grid-template-columns:repeat(2,1fr); }
  .dash-pro .dash-bottom{ grid-template-columns:1fr; }
}

/* =====================================================================
   SOLID MODE — remove glass / blur / glow, use solid surfaces with a
   subtle shine so it still looks premium. Loaded last → wins the cascade.
   ===================================================================== */
:root{
  /* 1) No backdrop blur anywhere (every backdrop-filter reads these tokens) */
  --blur-heavy:none; --blur-medium:none; --blur-light:none;

  /* 2) Solid surface tokens (components reading var(--glass*) become opaque) */
  --glass:#23272C; --sehl-glass:#23272C; --sehl-glass-2:#1E2227;
  --bg-surface:#23272C; --bg-elevated:#2D3238;

  /* 3) Crisp depth + a thin top shine (no wet-glass white highlight) */
  --shadow-deep: 0 14px 32px rgba(0,0,0,.46), inset 0 1px 0 rgba(244,243,239,.07);
  --shadow-card: 0 6px 16px rgba(0,0,0,.34), inset 0 1px 0 rgba(244,243,239,.06);
  --shadow-float:0 18px 38px rgba(0,0,0,.50), inset 0 1px 0 rgba(244,243,239,.08);

  /* 4) Tame the glass-sheen tokens (Style Center sets these bright white) */
  --reflect-top:rgba(228,199,124,.20); --reflect-inner:rgba(244,243,239,.06);
  --border-shine:rgba(244,243,239,.12);

  /* 5) More alive accents — same SEHL hues, a touch more saturation/brightness */
  --blue-soft:#86B4E2; --green-soft:#84C892; --rose-soft:#E0917F;
  --violet-soft:#B89DDC; --peach-soft:#E2A877;
  --gold-light:#EBCE86;
}

/* Kill any remaining backdrop blur across every surface (safety net) */
.glass-panel,.dash-panel,.sidebar,.app-topbar,.modal,.drawer,.tc,.ads2-panel,
.ads2-dd-menu,.fd2-panel,.tc-menu,.tc-drawer,.ai-scrim,
[class*="glass"],[class*="scrim"],[class*="-menu"],[class*="drawer"]{
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}

/* Solid panels: satin gradient (lighter at top = the "brillo") + gold top edge */
.glass-panel,.dash-panel,.ads2-panel,.fd2-panel{
  background:linear-gradient(180deg,#282D33 0%,#23272C 62%) !important;
  border:1px solid rgba(244,243,239,.09) !important;
  border-top:1px solid rgba(228,199,124,.22) !important;
  box-shadow:0 6px 16px rgba(0,0,0,.36), inset 0 1px 0 rgba(244,243,239,.07) !important;
}
/* KPI cards / tiles: same satin treatment so the whole UI reads solid */
.fd2-kpi,.dash-kpi,.tcx-kpi,.ads2-foot{
  background:linear-gradient(180deg,#282D33 0%,#23272C 70%) !important;
  border:1px solid rgba(244,243,239,.08) !important;
  box-shadow:inset 0 1px 0 rgba(244,243,239,.06) !important;
}
.fd2-kpi.active,.fd2-kpi:hover{ border-color:rgba(228,199,124,.42) !important; }

/* Solid sidebar + opaque scrims (dim without blur) */
.sidebar{ background:var(--bg-base,#191C20) !important; }
.ai-scrim,[class*="scrim"]{ background:rgba(11,13,15,.64) !important; }

/* Dropdowns / menus / modals: solid elevated surface, crisp edge */
.ads2-dd-menu,.tc-menu,.modal,[class*="-menu"]{
  background:var(--bg-elevated,#2D3238) !important;
  box-shadow:var(--shadow-float) !important;
}

/* Gold / primary buttons: NO gold fill (it caused unreadable dark-on-gold text).
   Outlined style instead — dark surface + gold text + gold border = readable. */
.ads2-btn.gold,.fd2-btn.primary,.btn.gold,.btn-primary,.btn.btn-primary,.btn.primary,
.tc-autoassign-btn,.sehl-btn--primary,a.gold,button.gold,
[class*="btn"].gold,[class*="btn"].primary,[class*="btn"][class*="gold"]{
  background:rgba(255,255,255,.04) !important;
  color:var(--gold-light,#E4C77C) !important;
  border:1px solid rgba(200,154,71,.55) !important;
  font-weight:700 !important; text-shadow:none !important; filter:none !important;
}
.ads2-btn.gold:hover,.fd2-btn.primary:hover,.btn.gold:hover,.btn-primary:hover,
.btn.primary:hover,.sehl-btn--primary:hover,.tc-autoassign-btn:hover,
[class*="btn"].gold:hover,[class*="btn"].primary:hover{
  background:rgba(200,154,71,.16) !important; border-color:rgba(200,154,71,.85) !important;
}
.ads2-btn.gold svg,.fd2-btn.primary svg,.btn.gold svg,.btn-primary svg,
.btn.primary svg,.sehl-btn--primary svg,.tc-autoassign-btn svg{
  stroke:var(--gold-light,#E4C77C) !important;
}

/* =====================================================================
   GLOBAL RESPONSIVE LAYER — additive, complements the existing breakpoints
   (the sidebar already becomes an off-canvas drawer ≤880, the tape falls
   back to a card list on phones). This stacks dense grids, wraps toolbars,
   scrolls wide tables and scales padding. Desktop (>1024) is untouched.
   ===================================================================== */
@media (max-width:1024px){
  .dash-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .dash-bottom{ grid-template-columns:1fr 1fr !important; }
}
@media (max-width:760px){
  .app-content{ padding:14px !important; }
  .dash-kpis, .fd2-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .dash-bottom{ grid-template-columns:1fr !important; }
  /* toolbars / filter rows / tab strips wrap instead of overflowing */
  .filter-bar,.ec-actions,.ads2-hd,.ads2-topbar,.ads2-tabs,.tcx-row,.fd2-toolbar,
  .topbar-actions{ flex-wrap:wrap !important; row-gap:8px !important; }
  /* wide data tables scroll horizontally instead of breaking the page */
  .data-table{ display:block !important; width:100% !important; overflow-x:auto !important;
               -webkit-overflow-scrolling:touch !important; white-space:nowrap !important; }
}
@media (max-width:480px){
  .app-content{ padding:10px !important; }
  .dash-kpis,.fd2-kpis{ grid-template-columns:1fr 1fr !important; }
  .app-title{ font-size:16px !important; letter-spacing:.10em !important; }
  .ec-field{ flex:1 1 100% !important; }
}