/* ============================================================================
   HAPEE — GLASS / MESH design layer  (2026-07 · rediseño look&feel)
   ----------------------------------------------------------------------------
   Se carga DESPUÉS de telnex-tokens/components/utilities y del <style> inline
   de base.html, así que gana la cascada. NO reescribe templates: remapea los
   ~10 primitivos neutros que alimentan todos los tokens (--surface, --bg,
   --soft, --line, --ink…) a superficies de vidrio translúcido, pinta un fondo
   "mesh" fijo detrás de todo, y aplica backdrop-filter a los contenedores
   estructurales (sidebar, topbar, cards, dropdowns).

   Dos temas, ambos glass, fieles a las maquetas hapee1 (Glass/mesh, claro) y
   hapee2 (Glass oscuro):
     [data-theme="light"]  → mesh cálido coral/durazno/rosa sobre papel claro
     [data-theme="dark"]   → mesh coral+magenta+violeta sobre negro

   Aislamiento: @media print restaura papel blanco y apaga blur/mesh; .inf-doc
   (informes/PDF) se neutraliza para no heredar vidrio.
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────
   1) PRIMITIVOS DE VIDRIO  ·  tema claro (default)
   ───────────────────────────────────────────────────────────────────────── */
:root,
:root[data-theme="light"] {
  /* superficies de vidrio */
  --glass-bg:        rgba(255, 255, 255, 0.62);
  --glass-bg-2:      rgba(255, 255, 255, 0.46);
  --glass-bg-3:      rgba(255, 255, 255, 0.34);
  --glass-brd:       rgba(255, 255, 255, 0.75);
  --glass-brd-soft:  rgba(43, 39, 34, 0.06);
  --glass-blur:      22px;
  --glass-sat:       1.5;
  --glass-shadow:    0 20px 50px -24px rgba(60, 30, 20, 0.30),
                     0 2px 10px -6px rgba(60, 30, 20, 0.12),
                     inset 0 1px 0 rgba(255, 255, 255, 0.55);

  /* mesh de fondo (claro, alto contraste bajo, mucho aire) */
  --mesh-base: #EFE7E6;
  --mesh:
    radial-gradient(1200px 900px at 6% -8%,  rgba(255, 138, 101, 0.40), transparent 60%),
    radial-gradient(1000px 820px at 102% 6%, rgba(255, 190, 150, 0.34), transparent 58%),
    radial-gradient(1150px 1050px at 104% 108%, rgba(255, 132, 168, 0.42), transparent 60%),
    radial-gradient(1000px 950px at -8% 112%, rgba(196, 170, 255, 0.26), transparent 62%),
    radial-gradient(760px 640px at 42% 44%, rgba(255, 255, 255, 0.60), transparent 62%);

  /* ── Remap de los PRIMITIVOS neutros del sistema (base.html :root) ──
     Todo lo demás (th-*, --bg-surface, --text-*, Tailwind surface-*) cascada
     desde acá vía var(). */
  --surface: var(--glass-bg);
  --bg:      transparent;          /* deja ver el mesh */
  --line2:   var(--glass-bg-2);
  --soft:    var(--glass-bg-2);
  --warm:    var(--glass-bg-3);
  --line:    var(--glass-brd);
  --n200:    rgba(43, 39, 34, 0.14);
  --ink3:    #6E655C;   /* antes #8A8179 — se perdía sobre el vidrio */
  --ink2:    #524B44;
  --ink:     #241F1B;
  --ink-0:   #241F1B;

  /* aliases directos que en base.html están hardcodeados a hex (los piso) */
  --bg-base:        transparent;
  --bg-surface:     var(--glass-bg);
  --bg-surface-2:   var(--glass-bg-2);
  --bg-surface-3:   var(--glass-bg-3);
  --card-hover:     rgba(255, 255, 255, 0.58);
  --input-bg:       rgba(255, 255, 255, 0.55);
  --border-color:   var(--glass-brd);
  --border-hover:   rgba(255, 255, 255, 0.95);
  --scrollbar-thumb: rgba(43, 39, 34, 0.18);
  --scrollbar-hover: rgba(43, 39, 34, 0.30);
  --loader-bg:      var(--mesh-base);

  /* th-* espejo (algunos se leen directo) */
  --th-card:        var(--glass-bg);
  --th-card-2:      var(--glass-bg-2);
  --th-surface:     var(--glass-bg);
  --th-border:      var(--glass-brd);
  --th-hover:       var(--card-hover);

  color-scheme: light;
}

/* ─────────────────────────────────────────────────────────────────────────
   2) PRIMITIVOS DE VIDRIO  ·  tema oscuro (hapee2 · "la versión que pediste")
   ───────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --glass-bg:        rgba(255, 255, 255, 0.055);
  --glass-bg-2:      rgba(255, 255, 255, 0.085);
  --glass-bg-3:      rgba(255, 255, 255, 0.035);
  --glass-brd:       rgba(255, 255, 255, 0.10);
  --glass-brd-soft:  rgba(255, 255, 255, 0.06);
  --glass-blur:      24px;
  --glass-sat:       1.35;
  --glass-shadow:    0 24px 60px -28px rgba(0, 0, 0, 0.70),
                     0 2px 12px -6px rgba(0, 0, 0, 0.55),
                     inset 0 1px 0 rgba(255, 255, 255, 0.08);

  --mesh-base: #0C0B0D;
  --mesh:
    radial-gradient(1000px 820px at 4% -4%,   rgba(255, 96, 58, 0.30), transparent 55%),
    radial-gradient(1200px 1000px at 106% 110%, rgba(214, 26, 110, 0.50), transparent 58%),
    radial-gradient(920px 820px at 76% 98%,   rgba(150, 60, 230, 0.36), transparent 56%),
    radial-gradient(760px 660px at 104% 60%,  rgba(255, 78, 140, 0.28), transparent 55%),
    radial-gradient(700px 700px at 40% 26%,   rgba(255, 150, 90, 0.06), transparent 60%);

  --surface: var(--glass-bg);
  --bg:      transparent;
  --line2:   var(--glass-bg-2);
  --soft:    var(--glass-bg-2);
  --warm:    var(--glass-bg-3);
  --line:    var(--glass-brd);
  --n200:    rgba(255, 255, 255, 0.16);
  --ink3:    #A89F98;   /* antes #8C857F — ilegible sobre vidrio oscuro */
  --ink2:    #C7BFB9;
  --ink:     #F4EFEB;
  --ink-0:   #F4EFEB;

  --bg-base:        transparent;
  --bg-surface:     var(--glass-bg);
  --bg-surface-2:   var(--glass-bg-2);
  --bg-surface-3:   var(--glass-bg-3);
  --bg-overlay:     rgba(0, 0, 0, 0.55);
  --card-hover:     rgba(255, 255, 255, 0.10);
  --input-bg:       rgba(255, 255, 255, 0.06);
  --border-color:   var(--glass-brd);
  --border-hover:   rgba(255, 255, 255, 0.22);
  --scrollbar-thumb: rgba(255, 255, 255, 0.16);
  --scrollbar-hover: rgba(255, 255, 255, 0.28);
  --loader-bg:      var(--mesh-base);
  --logo-filter:    none;

  --text-primary:   var(--ink);
  --text-secondary: var(--ink2);
  --text-tertiary:  var(--ink3);
  --text-muted:     var(--ink3);

  --th-text:        var(--ink);
  --th-text-2:      var(--ink2);
  --th-text-3:      var(--ink3);
  --th-text-muted:  var(--ink3);
  --th-card:        var(--glass-bg);
  --th-card-2:      var(--glass-bg-2);
  --th-surface:     var(--glass-bg);
  --th-border:      var(--glass-brd);
  --th-hover:       var(--card-hover);

  color-scheme: dark;
}

/* Popups nativos de <select> en dark: las opciones heredan el fondo
   TRANSLÚCIDO del select y Chromium lo compone sobre blanco → lista clara
   con texto claro (ilegible). Fondo sólido explícito para las opciones. */
:root[data-theme="dark"] select option,
:root[data-theme="dark"] select optgroup {
  background-color: #201B24;
  color: #F4EFEB;
}

/* ─────────────────────────────────────────────────────────────────────────
   3) MESH DE FONDO  ·  fijo, detrás de todo
   ───────────────────────────────────────────────────────────────────────── */
html { background: var(--mesh-base); }
body { background: transparent !important; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--mesh-base);
  background-image: var(--mesh);
  /* SIN background-attachment: fixed — redundante (el elemento ya es fixed)
     y fuente clásica de estelas de repintado en Chromium. */
  pointer-events: none;
  /* Capa compuesta propia: sin esto los repintados parciales dejaban
     ESTELAS con los colores del mesh (rojas/rosas) junto al sidebar y las
     pills activas al mover el mouse. */
  transform: translateZ(0);
}
/* grano/textura sutil para que el vidrio no se vea "plano".
   SIN mix-blend-mode (2026-07-24): una capa FIJA de viewport completo con
   blend se re-compone contra TODO en cada repintado parcial — era la fuente
   raíz de las líneas fantasma que aparecían con cualquier hover (incluso
   sobre el chrome del navegador, fuera de la página). El mismo look se logra
   con los puntos pre-mezclados a baja opacidad, sin vía de blend. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 3px 3px;
  transform: translateZ(0);
}

/* ─────────────────────────────────────────────────────────────────────────
   4) SUPERFICIES DE VIDRIO  ·  backdrop-filter en los contenedores estructurales
   ───────────────────────────────────────────────────────────────────────── */
#sidebar,
#main-content > header,
.home-card,
.th-card,
#switcher-panel,
#ag-switcher-panel,
#notif-dropdown,
.zt-flyout,
.mobile-bottom-nav,
.pwa-install-banner {
  /* .kpi-box/.sc-kpi/.sc-qcard SIN blur (2026-07-24): son tiles ANIDADOS en
     cards que ya tienen backdrop-filter — el blur anidado es el último
     generador de costuras en Chromium (y .sc-kpi:hover pisa el transform de
     la capa con translateY). Tienen fondo propio: no necesitan vidrio. */
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* ── FIX artefactos de repintado (líneas fantasma al mover el mouse, ambos
   temas): Chromium invalida PARCIALMENTE las capas con backdrop-filter en
   cada hover y la costura del rect dañado se ve como una línea (borde del
   sidebar, centro del header, cards). Promover cada superficie de vidrio a
   su propia capa compuesta estabiliza el repintado. OJO: NO agregar
   transform a #sidebar (su blur vive en ::before justamente para no crear
   containing block de los flyouts fixed); el resto YA es containing block
   por el propio backdrop-filter, así que el transform no cambia la
   semántica de los descendientes fixed. ── */
#main-content > header,
.home-card,
.th-card,
#switcher-panel,
#ag-switcher-panel,
#notif-dropdown,
.zt-flyout,
.mobile-bottom-nav,
.pwa-install-banner,
#sidebar::before {
  transform: translateZ(0);
  /* will-change fija la capa en GPU de forma PERSISTENTE: translateZ solo
     promueve, pero Chromium aún re-rasterizaba el backdrop en repintados
     parciales dejando la costura del rect dañado como línea fantasma. */
  will-change: transform;
}
body::before,
body::after {
  will-change: transform;
}

/* ── FIX flyouts del menú (bug crítico): backdrop-filter en #sidebar creaba un
   containing block → los .zt-flyout (position:fixed) quedaban atrapados y
   recortados por el overflow del aside = menús INVISIBLES. El blur ahora vive
   en un ::before absoluto (mismo look, sin containing block). ── */
#sidebar {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* Sidebar flotante — vidrio + tinte cálido de acento arriba + borde luminoso */
#sidebar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 44%),
    var(--glass-bg) !important;
}
:root[data-theme="dark"] #sidebar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 46%),
    var(--glass-bg) !important;
}
@media (min-width: 769px) {
  #sidebar.sidebar {
    border: 1px solid var(--glass-brd) !important;
    box-shadow: var(--glass-shadow) !important;
    border-radius: 22px;
  }
}

/* Topbar — barra de vidrio translúcida (ya trae backdrop-blur-xl inline) */
#main-content > header {
  background: var(--glass-bg-2) !important;
  border-bottom: 1px solid var(--glass-brd) !important;
}

/* Cards de dashboard — vidrio con borde luminoso + sombra flotante */
.home-card,
.th-card,
.sc-kpi,
.sc-qcard {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-brd) !important;
  box-shadow: var(--glass-shadow);
  border-radius: 18px;
}
.home-card:hover,
.th-card:hover,
.sc-kpi:hover,
.sc-qcard:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-brd)) !important;
}

/* KPI boxes internos + iconos de acceso rápido */
.kpi-box { border: 1px solid var(--glass-brd-soft); }
.sc-qico { background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* Dropdowns / flyouts / paneles */
#notif-dropdown,
.zt-flyout {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-brd) !important;
  box-shadow: var(--glass-shadow) !important;
}
.mobile-bottom-nav {
  background: var(--glass-bg-2) !important;
  border-top: 1px solid var(--glass-brd) !important;
}

/* Ítem de nav activo — pastilla degradada coral→magenta (fiel a las maquetas) */
#sidebar a.bg-primary,
#sidebar .zt-nav-item.bg-primary,
#sidebar .zt-flyout-item.bg-primary,
#sidebar .zt-group-btn.bg-primary,
.mobile-bottom-nav a.bnav-active {
  background: var(--hapee-grad) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px -10px rgba(225, 29, 99, 0.55);
}
#sidebar a.bg-primary svg, #sidebar .zt-nav-item.bg-primary svg, #sidebar .zt-group-btn.bg-primary svg { color: #fff !important; }

/* Inputs de vidrio */
.th-input,
select.th-input,
select,
input[type="text"].th-input,
#switcher-search,
#cliente-search {
  background: var(--input-bg) !important;
  border-color: var(--glass-brd) !important;
}

/* Panel principal: leve lienzo de vidrio para el efecto "dos tarjetas flotando"
   (sin overflow:hidden → no rompe el sticky del header ni el scroll). */
@media (min-width: 769px) {
  #main-content {
    /* NO tocar margin-left → lo maneja md:ml-64 (256px) y deja 12px de aire
       respecto al sidebar flotante (borde derecho en 244px). */
    margin-top: 12px;
    margin-right: 12px;
    margin-bottom: 12px;
    border-radius: 24px;
    background: var(--glass-bg-3);
    box-shadow: var(--glass-shadow);
    min-height: calc(100vh - 24px);
  }
  #main-content > header {
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
}

/* Scrollbars afinadas al vidrio */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); background-clip: content-box; }

/* Título del topbar más presente (como en las maquetas) */
#main-content > header h2 { font-weight: 800; letter-spacing: -0.02em; font-size: 22px; }

/* ─────────────────────────────────────────────────────────────────────────
   4b) MARCA — gradiente hapee, tipografía Manrope, logo, hero de bienvenida
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Gradiente de marca coral→magenta (destaque de pestañas, hero, CTAs) */
  --hapee-grad: linear-gradient(100deg, #F0531E 0%, #E7364C 48%, #E11D63 100%);
}

/* Tipografía Manrope — más fina y estilosa (fiel a las maquetas). Pisa a
   Plus Jakarta en todo el chrome; los informes PDF conservan sus fuentes. */
:root {
  --f-title: 'Manrope', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --f-body:  'Manrope', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --f-ui:    'Manrope', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}
body:not(.inf-doc) { font-family: 'Manrope', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; }
body:not(.inf-doc) h1, body:not(.inf-doc) h2, body:not(.inf-doc) h3 { letter-spacing: -0.02em; }

/* Logo del sidebar — en oscuro se vuelve blanco (antes no cambiaba de color) */
:root[data-theme="dark"] #sidebar .sidebar-logo,
:root[data-theme="dark"] #sidebar img.logo-adaptive { filter: brightness(0) invert(1); }
:root[data-theme="dark"] #sidebar .sidebar-logo.text-xl { filter: none; color: #fff; }

/* ── Hero de bienvenida (gradiente coral→magenta + mascota) ── */
.hapee-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--hapee-grad);
  border-radius: 22px;
  padding: 30px 36px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 22px 50px -26px rgba(225, 29, 99, 0.6);
  isolation: isolate;
}
.hapee-hero::after {           /* brillo suave arriba-derecha */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(520px 300px at 88% -20%, rgba(255, 255, 255, 0.28), transparent 60%);
}
.hapee-hero-txt { max-width: 62%; }
.hapee-hero-txt h1 {
  color: #fff; font-weight: 800; letter-spacing: -0.03em; line-height: 1.02;
  font-size: clamp(26px, 3.4vw, 40px); margin: 0 0 8px;
}
.hapee-hero-txt p { color: rgba(255, 255, 255, 0.9); font-size: 15px; line-height: 1.55; margin: 0; max-width: 46ch; }
.hapee-hero-bot {
  height: 150px; width: auto; flex-shrink: 0; object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.28));
  align-self: flex-end; margin-bottom: -30px;   /* asoma un poco fuera del hero */
}
@media (max-width: 640px) {
  .hapee-hero { padding: 22px 22px; }
  .hapee-hero-txt { max-width: 68%; }
  .hapee-hero-bot { height: 96px; margin-bottom: -22px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hapee-hero-bot { animation: hapee-float 5s ease-in-out infinite; }
  @keyframes hapee-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
}

/* ─────────────────────────────────────────────────────────────────────────
   5) TRANSICIÓN suave de tema + control del toggle
   ───────────────────────────────────────────────────────────────────────── */
#sidebar, #main-content, .home-card, .th-card, .sc-kpi, .sc-qcard,
#main-content > header, body::before {
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.hapee-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px; cursor: pointer;
  color: var(--text-tertiary); background: transparent; border: none;
  transition: background .15s ease, color .15s ease;
}
.hapee-theme-toggle:hover { background: var(--card-hover); color: var(--text-primary); }
.hapee-theme-toggle .ico-sun  { display: none; }
:root[data-theme="dark"] .hapee-theme-toggle .ico-sun  { display: block; }
:root[data-theme="dark"] .hapee-theme-toggle .ico-moon { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   6) AISLAMIENTO  ·  informes/PDF y print — sin vidrio, papel blanco
   ───────────────────────────────────────────────────────────────────────── */
.inf-doc, .inf-doc * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.inf-doc { background: #ffffff !important; }

@media print {
  :root, :root[data-theme="light"], :root[data-theme="dark"] {
    --surface: #ffffff; --bg: #ffffff; --bg-base: #ffffff;
    --bg-surface: #ffffff; --bg-surface-2: #f7f7f5; --bg-surface-3: #ffffff;
    --line: rgba(0,0,0,.15); --border-color: rgba(0,0,0,.15);
    --ink: #000; --ink2: #444; --ink3: #777;
    --glass-shadow: none;
  }
  html { background: #fff !important; }
  body::before, body::after { display: none !important; }
  * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  #main-content { margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; }
}

/* Sin blur en dispositivos que no lo soportan → cae a translúcido plano */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: rgba(255,255,255,0.92); --glass-bg-2: rgba(255,255,255,0.86); }
  :root[data-theme="dark"] { --glass-bg: rgba(28,26,30,0.94); --glass-bg-2: rgba(34,32,36,0.90); }
}

/* ═══ Botones de acción: SIEMPRE naranjo hapee — nunca colores inventados ═══
   El dueño lo pidió explícito: acciones primarias (Nuevo evento, Nueva campaña,
   Generar con IA, enviar, agregar…) llevan el naranjo del logo/tabs.
   Solo button/a: los chips de marca (span FB / in / Ad) conservan su color. */
button.bg-purple-600, a.bg-purple-600, button.bg-purple-500, a.bg-purple-500,
button.bg-violet-600, a.bg-violet-600, button.bg-indigo-600, a.bg-indigo-600,
button.bg-blue-600, a.bg-blue-600, button.bg-blue-500, a.bg-blue-500,
button.bg-fuchsia-600, a.bg-fuchsia-600 {
  background: linear-gradient(100deg, #F0531E, #E11D63) !important;
  color: #fff !important;
}
button.bg-purple-600:hover, a.bg-purple-600:hover, button.bg-purple-500:hover, a.bg-purple-500:hover,
button.bg-violet-600:hover, a.bg-violet-600:hover, button.bg-indigo-600:hover, a.bg-indigo-600:hover,
button.bg-blue-600:hover, a.bg-blue-600:hover, button.bg-blue-500:hover, a.bg-blue-500:hover,
button.bg-fuchsia-600:hover, a.bg-fuchsia-600:hover {
  filter: brightness(1.09) saturate(1.05);
}
/* Variantes translúcidas (accents IA tipo bg-purple-600/20 + text-purple-400) */
button.bg-purple-600\/20, a.bg-purple-600\/20,
button.bg-blue-600\/20, a.bg-blue-600\/20,
button.bg-indigo-600\/20, a.bg-indigo-600\/20 {
  background: rgba(240, 83, 30, .13) !important;
  color: #F0531E !important;
  border-color: rgba(240, 83, 30, .32) !important;
}
button.bg-purple-600\/20:hover, a.bg-purple-600\/20:hover,
button.bg-blue-600\/20:hover, a.bg-blue-600\/20:hover,
button.bg-indigo-600\/20:hover, a.bg-indigo-600\/20:hover {
  background: rgba(240, 83, 30, .2) !important;
}


/* ═══ MODALES SÓLIDOS (2026-07-21, pedido del dueño): los popups NO llevan
   vidrio. Sobre un overlay ya se ve el contenido detrás; una tarjeta
   translúcida los hace ilegibles. 100% opacos en ambos temas, sin blur. ═══ */
:root { --bg-surface-modal: #FFFFFF; }
:root[data-theme="dark"] { --bg-surface-modal: #201B24; }

/* Switcher (subcuentas/agencias) y notificaciones: VUELVEN al glass por
   pedido del dueño (el look manda sobre los micro-artefactos de repintado);
   viven en las listas de blur + composición de arriba. */
.fixed.inset-0 > div[style*="var(--bg-surface)"],
.fixed.inset-0 > div > div[style*="var(--bg-surface)"],
[role="dialog"],
[role="alertdialog"],
div[style*="z-index:200"] > .th-surface,
div[style*="z-index: 200"] > .th-surface,
.fixed.inset-0 .th-surface {
  background: var(--bg-surface-modal) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Grises tailwind heredados de la era pre-glass → tokens del tema
   (41 usos de text-gray-400 e ilegibles en dark; chips de marca intactos) */
.text-gray-300, .text-gray-400, .text-gray-500 { color: var(--text-tertiary) !important; }
.text-gray-600, .text-gray-700 { color: var(--text-secondary) !important; }
.text-gray-800, .text-gray-900 { color: var(--text-primary) !important; }


/* ═══ Superficies flotantes legibles: el vidrio muy translúcido perdía el texto ═══
   El chat del robot, notificaciones, palette y dropdowns flotan SOBRE contenido
   con color — usan la superficie casi sólida de los modales en ambos temas. */
#claudio-widget,
#notif-dropdown,
#command-palette, .cmdk-panel, [data-cmdk-root],
.zt-flyout {
  background: var(--bg-surface-modal) !important;
}
#claudio-widget .cw-header {
  background: var(--bg-surface-modal) !important;
  border-bottom: 1px solid var(--border-color);
}
/* burbujas del chat del robot: contraste asegurado */
#claudio-widget .cw-msg-assistant, #claudio-widget .cw-row > div {
  color: var(--text-primary);
}