/* ═══════════════════════════════════════════════════════════════
   CBI GLASS SYSTEM v1.0 — Glassmorphism / Liquid Glass (aditivo)
   Task 86 · Rediseño Fase 0.

   QUÉ ES
   -------
   Capa de UTILIDADES aditiva sobre la base dark de CBI. NO sustituye
   ni reescribe css/tokens.css, css/components.css, css/terminal.css
   ni css/themes.css — convive con las 4 superficies (terminal, ops/
   desk, hub, landing) sin depender de qué sistema de variables tenga
   cada una cargado.

   CÓMO SE CARGA
   --------------
   <link rel="stylesheet" href="/css/glass-system.css">
   Cárgalo DESPUÉS de la hoja de tokens/tema propia de cada app (para
   que --purple/--blue/--green/--gold/--bg0 ya existan y el glass
   herede el acento de esa superficie). Si la app no define esas
   variables, cada var() cae al valor de marca CBI por defecto
   (--purple #9f7aea · --blue #4ea8f5 · --green #38c9a0 · --gold
   #c9a227) para no depender del orden de carga.

   CÓMO SE APLICA (progresivo — NO masivo)
   ------------------------------------------
   Añade la clase directamente sobre un elemento YA existente (no
   reescribas su CSS, solo suma la clase):
     .glass         → superficie base (fondo translúcido + blur)
     .glass-card    → tarjeta glass, padding + radius de card
     .glass-panel   → panel glass, padding mayor, pensado para
                      secciones/paneles de dashboard
     .glass-elev-1  → +blur/sombra sutil (nivel 1)
     .glass-elev-2  → +blur/sombra medio (nivel 2, default en .glass)
     .glass-elev-3  → +blur/sombra fuerte (nivel 3, para modales/hero)
     .glass-liquid  → añade el sheen especular animado ("liquid")
                      encima de .glass/.glass-card/.glass-panel

   IMPORTANTE: nunca apliques estas clases a un selector reutilizado
   docenas de veces en la página (p.ej. una clase de card compartida
   por todo un grid) — eso la propagaría de golpe a todas las
   instancias. Aplica la clase sobre el elemento concreto (por id o
   añadiendo una clase adicional a UNA instancia), y ve extendiendo
   superficie a superficie.

   ACCESIBILIDAD / ROBUSTEZ (no se puede desactivar por accidente)
   ------------------------------------------------------------------
   - @supports not (backdrop-filter) → fondo sólido translúcido, sin
     blur, mismo contraste.
   - prefers-reduced-transparency: reduce → todas las superficies
     glass pasan a fondo sólido (sin blur ni transparencia).
   - prefers-reduced-motion: reduce → el sheen de .glass-liquid se
     desactiva (ya cubierto también por la regla global de
     tokens.css, esta es una capa de seguridad adicional por si esta
     hoja se usa sin tokens.css).
   - El texto sobre glass usa var(--text0/--text-0) del sistema de
     cada app (ya AA en dark); no bajes la opacidad del texto sobre
     una superficie .glass.
   - Blur limitado a 1 nivel: no anides .glass dentro de .glass
     (dos backdrop-filter apilados degradan el rendimiento en scroll).

   COMPONENTE: DataTable CBI (.glass-datatable)
   ------------------------------------------------
   Estructura reutilizable para tablas de datos financieros:

   <div class="glass-datatable glass-panel">
     <div class="glass-datatable__toolbar">
       <div class="glass-datatable__periods" role="tablist">
         <button class="glass-datatable__period is-active" role="tab" aria-selected="true">TTM</button>
         <button class="glass-datatable__period" role="tab" aria-selected="false">Annual</button>
         <button class="glass-datatable__period" role="tab" aria-selected="false">Quarterly</button>
       </div>
       <select class="glass-datatable__currency">
         <option>USD</option><option>EUR</option>
       </select>
       <div class="glass-datatable__actions">
         <button class="glass-datatable__icon-btn" title="Descargar" aria-label="Descargar">⬇</button>
         <button class="glass-datatable__icon-btn" title="Full width" aria-label="Full width">⤢</button>
       </div>
     </div>
     <div class="glass-datatable__scroll">
       <table class="glass-datatable__table">
         <thead>
           <tr><th>Métrica</th><th>2023</th><th>2024</th><th>2025</th></tr>
         </thead>
         <tbody>
           <tr class="glass-datatable__row">
             <td>
               <button class="glass-datatable__expand-btn" aria-expanded="false"
                 onclick="this.closest('tr').classList.toggle('is-expanded');
                          this.setAttribute('aria-expanded', this.closest('tr').classList.contains('is-expanded'))">
                 <span class="glass-datatable__chevron">›</span> Revenue
               </button>
             </td>
             <td>€12.4M</td><td>€15.1M</td><td>€18.9M</td>
           </tr>
           <tr class="glass-datatable__expand-panel"><td colspan="4">
             <!-- mini-gráfico de tendencia inyectado aquí (Chart.js) -->
           </td></tr>
         </tbody>
       </table>
     </div>
     <div class="glass-datatable__footer">
       Fuente: <span class="glass-datatable__source">CBI Research</span>
       · Última actualización: <span class="glass-datatable__updated">—</span>
     </div>
   </div>

   El pie "Fuente · Última actualización" es OBLIGATORIO en cualquier
   instancia real (no decorativo) — no lo omitas al integrar datos.
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  /* Superficie glass — 3 niveles de opacidad */
  --glass-bg-1: rgba(255, 255, 255, 0.04);
  --glass-bg-2: rgba(255, 255, 255, 0.07);
  --glass-bg-3: rgba(255, 255, 255, 0.10);

  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-strong: rgba(255, 255, 255, 0.16);

  --glass-blur: 18px;
  --glass-blur-sm: 10px;
  --glass-blur-lg: 28px;
  --glass-saturate: 140%;

  /* Highlight especular en el borde superior (efecto "liquid") */
  --glass-highlight: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.03) 45%,
    rgba(255, 255, 255, 0) 100%
  );

  /* Sombras en capas por nivel de elevación */
  --glass-shadow-1: 0 2px 12px rgba(0, 0, 0, 0.28);
  --glass-shadow-2: 0 8px 28px rgba(0, 0, 0, 0.36), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  --glass-shadow-3: 0 20px 60px rgba(0, 0, 0, 0.46), 0 1px 0 rgba(255, 255, 255, 0.07) inset;

  --glass-radius: 14px;
  --glass-radius-lg: 20px;

  /* Glows de acento (radiales), usan el color de marca de cada app
     con fallback a la paleta CBI si la app no define la variable */
  --glass-glow-purple: radial-gradient(circle, var(--purple, #9f7aea) 0%, transparent 72%);
  --glass-glow-blue:   radial-gradient(circle, var(--blue, #4ea8f5) 0%, transparent 72%);
  --glass-glow-green:  radial-gradient(circle, var(--green, #38c9a0) 0%, transparent 72%);
  --glass-glow-gold:   radial-gradient(circle, var(--gold, #c9a227) 0%, transparent 72%);
}

/* ── FALLBACK: sin soporte de backdrop-filter ── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-bg-1: rgba(14, 18, 26, 0.92);
    --glass-bg-2: rgba(14, 18, 26, 0.95);
    --glass-bg-3: rgba(14, 18, 26, 0.98);
  }
}

/* ── FALLBACK: transparencia reducida por preferencia del SO ── */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg-1: rgba(14, 18, 26, 0.94);
    --glass-bg-2: rgba(14, 18, 26, 0.97);
    --glass-bg-3: rgba(14, 18, 26, 0.99);
  }
}

/* ── MODO CLARO — hub/landing usan data-theme="light", terminal usa
   data-theme="white" (ver css/themes.css); cubrimos ambos ── */
:root[data-theme="light"],
:root[data-theme="white"],
html[data-theme="white"] {
  --glass-bg-1: rgba(10, 13, 18, 0.03);
  --glass-bg-2: rgba(10, 13, 18, 0.05);
  --glass-bg-3: rgba(10, 13, 18, 0.08);
  --glass-border: rgba(10, 13, 18, 0.10);
  --glass-border-strong: rgba(10, 13, 18, 0.18);
  --glass-highlight: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.08) 45%,
    rgba(255, 255, 255, 0) 100%
  );
  --glass-shadow-1: 0 2px 12px rgba(20, 24, 34, 0.06);
  --glass-shadow-2: 0 8px 28px rgba(20, 24, 34, 0.08), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
  --glass-shadow-3: 0 20px 60px rgba(20, 24, 34, 0.10), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="light"],
  :root[data-theme="white"],
  html[data-theme="white"] {
    --glass-bg-1: rgba(248, 249, 252, 0.94);
    --glass-bg-2: rgba(248, 249, 252, 0.97);
    --glass-bg-3: rgba(248, 249, 252, 0.99);
  }
}

/* ── BASE SURFACE ── */
.glass,
.glass-card,
.glass-panel {
  position: relative;
  isolation: isolate;
  background: var(--glass-bg-2);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow-2);
}

/* Highlight especular — línea superior, no interfiere con el contenido */
.glass::before,
.glass-card::before,
.glass-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--glass-highlight);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.glass-card {
  padding: 16px;
  border-radius: var(--glass-radius);
}

.glass-panel {
  padding: 24px;
  border-radius: var(--glass-radius-lg);
}

/* ── ELEVATION LEVELS ── */
.glass-elev-1 {
  backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
  background: var(--glass-bg-1);
  box-shadow: var(--glass-shadow-1);
}
.glass-elev-2 {
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  background: var(--glass-bg-2);
  box-shadow: var(--glass-shadow-2);
}
.glass-elev-3 {
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  background: var(--glass-bg-3);
  border-color: var(--glass-border-strong);
  box-shadow: var(--glass-shadow-3);
}

/* ── LIQUID SHEEN ── */
.glass-liquid::after {
  content: "";
  position: absolute;
  inset: -40% -20%;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.10) 45%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.10) 55%,
    transparent 70%
  );
  transform: translateX(-30%);
  animation: glass-sheen 9s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
:root[data-theme="light"] .glass-liquid::after,
:root[data-theme="white"] .glass-liquid::after,
html[data-theme="white"] .glass-liquid::after {
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 45%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.35) 55%,
    transparent 70%
  );
}
@keyframes glass-sheen {
  0%, 100% { transform: translateX(-30%); }
  50%      { transform: translateX(30%); }
}
@media (prefers-reduced-motion: reduce) {
  .glass-liquid::after { animation: none; display: none; }
}

/* Contenido de la superficie glass siempre por encima de los pseudo-elementos */
.glass > *,
.glass-card > *,
.glass-panel > * {
  position: relative;
  z-index: 2;
}

/* ── AMBIENT GLOW (fondo decorativo detrás de un glass, opcional) ── */
.glass-glow {
  position: relative;
}
.glass-glow::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  filter: blur(60px);
  opacity: 0.35;
  pointer-events: none;
}
.glass-glow--purple::before { background: var(--glass-glow-purple); }
.glass-glow--blue::before   { background: var(--glass-glow-blue); }
.glass-glow--green::before  { background: var(--glass-glow-green); }
.glass-glow--gold::before   { background: var(--glass-glow-gold); }

/* ── TIPOGRAFÍA COMPARTIDA (Syne / DM Sans / DM Mono) ──
   Nota: en TERMINAL/OPS-DESK la tipografía de marca es Space Mono +
   DM Sans + DM Mono (ver CLAUDE.md, "do not substitute") — estas
   clases están disponibles pero solo deben usarse en terminal/desk
   para datos tabulares (.glass-data usa DM Mono, coincide con la
   regla). Los títulos .glass-h1/h2/h3 con Syne son para hub/landing/
   admin, que ya cargan Syne. */
.glass-h1, .glass-h2, .glass-h3 {
  font-family: var(--font-head, 'Syne', system-ui, sans-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}
.glass-h1 { font-size: clamp(28px, 3.4vw, 44px); }
.glass-h2 { font-size: clamp(20px, 2.2vw, 28px); }
.glass-h3 { font-size: 16px; font-weight: 600; }

.glass-body {
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.6;
}
.glass-eyebrow {
  font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text2, var(--text-2, #8a95aa));
}
.glass-data {
  font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

/* ── DATATABLE CBI ── */
.glass-datatable {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  padding: 0;
}
.glass-datatable__toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--glass-border);
  position: relative;
  z-index: 2;
}
.glass-datatable__periods {
  display: inline-flex;
  gap: 2px;
  background: var(--glass-bg-1);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 2px;
}
.glass-datatable__period {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 11px;
  padding: 5px 11px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text2, var(--text-2, #8a95aa));
  cursor: pointer;
  transition: background .15s, color .15s;
}
.glass-datatable__period.is-active,
.glass-datatable__period[aria-selected="true"] {
  background: var(--glass-bg-3);
  color: var(--text0, var(--text-0, #e8edf8));
}
.glass-datatable__currency {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 11px;
  background: var(--glass-bg-1);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--text0, var(--text-0, #e8edf8));
  padding: 5px 8px;
  cursor: pointer;
}
.glass-datatable__actions {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}
.glass-datatable__icon-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg-1);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--text1, var(--text-1, #4a5568));
  cursor: pointer;
  transition: background .15s, color .15s;
}
.glass-datatable__icon-btn:hover {
  background: var(--glass-bg-3);
  color: var(--text0, var(--text-0, #e8edf8));
}
.glass-datatable__scroll {
  overflow-x: auto;
  position: relative;
  z-index: 2;
}
.glass-datatable__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.glass-datatable__table th {
  text-align: right;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text2, var(--text-2, #8a95aa));
  padding: 10px 14px;
  white-space: nowrap;
  border-bottom: 1px solid var(--glass-border);
}
.glass-datatable__table th:first-child,
.glass-datatable__table td:first-child { text-align: left; }
.glass-datatable__table td {
  padding: 10px 14px;
  text-align: right;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--glass-border);
  white-space: nowrap;
}
.glass-datatable__row:hover td { background: var(--glass-bg-1); }
.glass-datatable__expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  cursor: pointer;
  padding: 0;
}
.glass-datatable__chevron {
  display: inline-block;
  transition: transform .15s;
  color: var(--text2, var(--text-2, #8a95aa));
}
.glass-datatable__row.is-expanded .glass-datatable__chevron { transform: rotate(90deg); }
.glass-datatable__expand-panel { display: none; }
.glass-datatable__row.is-expanded + .glass-datatable__expand-panel { display: table-row; }
.glass-datatable__expand-panel td {
  text-align: left;
  background: var(--glass-bg-1);
  padding: 12px 14px;
}
.glass-datatable__footer {
  padding: 10px 16px;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 10.5px;
  color: var(--text2, var(--text-2, #8a95aa));
  border-top: 1px solid var(--glass-border);
  position: relative;
  z-index: 2;
}