/* ═══════════════════════════════════════════════════════════════════════
   glass.css — Liquid Glass + identidad visual del Revenue OS (2026-09-19)

   Rediseño visual pedido por el dueño (contradice a propósito la regla
   "no reestilizar" de CLAUDE.md: se decidió el 2026-09-19 tras ver el
   antes/después del PR #220). Se carga DESPUÉS de css/ux.css.

   Qué hace:
   1. Liquid Glass (Apple): superficies translúcidas con desenfoque, borde
      especular, esquinas continuas grandes, barra lateral y cabeceras
      flotantes, botones cápsula, fondo de malla con halos de marca.
      Se logra redefiniendo los tokens (--surface, --surface2, radios) para
      que TODOS los módulos hereden el vidrio sin tocar su CSS.
   2. Cabecera única: una sola escala de título/subtítulo/acciones para
      la cabecera de index.html y las de los módulos; tablas más densas.
   3. Identidad: acento por módulo (--module-accent), CTA en degradado
      --grad-ai, iconos más grandes, títulos más contundentes.
   4. Sidebar tipo Linear/Gong: grupos colapsables, contadores por módulo,
      créditos y usuario integrados abajo (js/ux.js + js/dashboard-flow.js).
   5. El flujo del dashboard (.rf-*) que pinta js/dashboard-flow.js.

   Nada de colores nuevos fuera de los halos del fondo; todo respeta
   prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens de vidrio ──────────────────────────────────────────────── */
:root {
  --r: 14px; --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --radius: 14px;

  --bg:        #EEF1F7;
  --surface:   rgba(255,255,255,.62);
  --surface2:  rgba(10,10,15,.035);
  --surface3:  rgba(10,10,15,.065);
  --surface-raised: rgba(255,255,255,.92);
  --glass:     rgba(255,255,255,.58);
  --frost:     rgba(255,255,255,.7);
  --frost-mid: rgba(255,255,255,.6);
  --frost-soft:rgba(255,255,255,.48);
  --glass-edge:   rgba(255,255,255,.75);
  --glass-hi:     rgba(255,255,255,.9);
  --glass-blur:   blur(28px) saturate(1.7);
  --glass-shadow: 0 1px 2px rgba(10,10,15,.04), 0 14px 44px -20px rgba(20,30,80,.28);
  --glass-shadow-lg: 0 2px 6px rgba(10,10,15,.05), 0 30px 80px -30px rgba(20,30,80,.4);

  --sidebar-w: 268px;     /* 244 de panel + 12 de aire a cada lado */
  --sidebar-panel: 244px;
  --rail-w: 88px;         /* 64 + 24 */
  --sidebar-inset: 12px;
  --module-accent: var(--accent);
}
html[data-theme="dark"] {
  --bg:        #06070B;
  --surface:   rgba(30,33,46,.55);
  --surface2:  rgba(255,255,255,.05);
  --surface3:  rgba(255,255,255,.085);
  --surface-raised: rgba(52,56,74,.92);
  --glass:     rgba(14,15,22,.6);
  --frost:     rgba(14,15,22,.72);
  --frost-mid: rgba(14,15,22,.62);
  --frost-soft:rgba(14,15,22,.5);
  --glass-edge:   rgba(255,255,255,.11);
  --glass-hi:     rgba(255,255,255,.2);
  --glass-shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 44px -20px rgba(0,0,0,.7);
  --glass-shadow-lg: 0 2px 6px rgba(0,0,0,.45), 0 30px 80px -30px rgba(0,0,0,.85);
}

/* ── Fondo de malla: el vidrio necesita algo que refractar ─────────────── */
body { background: var(--bg); }
body::before { opacity: .35; }
body::after {
  inset: -12%;
  background:
    radial-gradient(38% 34% at 14% 10%, rgba(31,75,255,.22), transparent 70%),
    radial-gradient(30% 30% at 88% 6%,  rgba(8,145,178,.18), transparent 70%),
    radial-gradient(34% 32% at 78% 92%, rgba(124,92,252,.18), transparent 70%),
    radial-gradient(26% 26% at 20% 88%, rgba(14,169,104,.10), transparent 70%);
  opacity: 1;
  animation: glassDrift 48s ease-in-out infinite alternate;
  will-change: transform;
}
html[data-theme="dark"] body::after {
  background:
    radial-gradient(38% 34% at 14% 10%, rgba(59,104,255,.28), transparent 70%),
    radial-gradient(30% 30% at 88% 6%,  rgba(44,184,212,.16), transparent 70%),
    radial-gradient(34% 32% at 78% 92%, rgba(161,139,255,.2), transparent 70%),
    radial-gradient(26% 26% at 20% 88%, rgba(51,194,132,.1), transparent 70%);
  opacity: 1;
}
@keyframes glassDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.04); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}

/* ── Superficies de vidrio (shell + módulos) ──────────────────────────── */
.card, .stat-card, .chart-card, .table-card, .settings-card, .ih-card, .insight-card, .sk-card,
[class$="-card"], [class*="-card "],
.logout-modal, .ux-cmdk-panel, .user-dropdown, .miforms-popup-card, .ctxgate-nav-banner {
  background: var(--surface);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  border-radius: var(--r-lg);
}
.card:hover, .stat-card:hover, .chart-card:hover {
  border-color: var(--glass-hi);
  box-shadow: inset 0 1px 0 #fff, var(--glass-shadow-lg);
}
html[data-theme="dark"] .card:hover, html[data-theme="dark"] .stat-card:hover, html[data-theme="dark"] .chart-card:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), var(--glass-shadow-lg);
}
/* Superficies que flotan sobre contenido: sí necesitan desenfoque real */
.logout-modal, .ux-cmdk-panel, .user-dropdown, .miforms-popup-card, .cmp-modal, .lic-modal {
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow-lg);
  border-radius: var(--r-xl);
}
/* Dropdown del usuario: menos blur para más legibilidad */
.user-dropdown {
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  background: var(--surface-raised);
}
.logout-overlay, .ux-cmdk, .ctxgate-overlay { -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
/* Mismo problema fuera del sistema logout-modal: drawer de "Primeros pasos",
   menú del selector de motor IA y dropdown de selección múltiple del
   contexto son translúcidos (heredan --surface) pero definen su propio
   fondo/borde — no pisamos esos, solo el desenfoque real que les faltaba. */
.tour-panel, .px-engine-menu, .ccx-ms-panel {
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}

/* ── Barra lateral flotante ───────────────────────────────────────────── */
.sidebar {
  top: var(--sidebar-inset); left: var(--sidebar-inset);
  height: calc(100vh - var(--sidebar-inset) * 2);
  width: calc(var(--sidebar-w) - var(--sidebar-inset) * 2) !important;
  min-width: calc(var(--sidebar-w) - var(--sidebar-inset) * 2) !important;
  border-radius: 24px;
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}
.sidebar-logo { border-bottom: 0; height: 60px; padding: 0 14px 0 16px; }
.sidebar-logo .logo-mark { width: 30px; height: 30px; border-radius: 9px; }
.sidebar-logo .logo-mark svg { width: 20px; height: 20px; }
.sidebar-logo .logo-name { font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.sb-search { margin: 0 12px 6px; border-radius: 12px; background: var(--surface2); border-color: transparent; }
.sb-search:hover { background: var(--surface3); border-color: transparent; box-shadow: none; }
.sidebar-section { padding: 8px 12px 1px; }
.sidebar-section .lbl {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: none;
  color: var(--ink-4); padding: 4px 10px 6px; cursor: pointer; border-radius: 8px; user-select: none;
  transition: color var(--dur-1), background var(--dur-1);
}
.sidebar-section .lbl:hover { color: var(--ink-2); background: var(--surface2); }
.sidebar-section .lbl .lbl-chev { width: 12px; height: 12px; opacity: .7; transition: transform var(--dur-2) var(--ease-out); }
.sidebar-section[data-collapsed="1"] .lbl .lbl-chev { transform: rotate(-90deg); }
.nav-item { border-radius: 10px; padding: 7px 10px; margin: 1px 12px; font-size: 13px; font-weight: 500; }
/* Densidad vertical: 13 ítems + 4 grupos + pie con créditos deben caber en 900 px de alto */
.sidebar-nav { padding-bottom: 6px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); }
.sidebar-footer .theme-toggle { margin: 6px 12px 4px; }
#tour-launcher, #miforms-launcher { margin-bottom: 0; }
.nav-item.active { color: var(--ink); font-weight: 600; }
.nav-item.active::before { display: none; }
.nav-glider { background: var(--surface-raised); box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 3px rgba(10,10,15,.08); border-radius: 10px; }
.nav-glider.m2 { background: var(--surface-raised); }
.nav-glider.m3 { background: var(--surface-raised); }
.nav-item.active.m2 { color: var(--cyan); background: transparent; }
.nav-item.active.m3 { color: var(--green); background: transparent; }
.nav-icon { width: 16px; height: 16px; }
.nav-badge { background: var(--surface3); color: var(--ink-2); font-family: var(--font-sans); font-weight: 600; font-size: 10.5px; padding: 1px 7px; }
.nav-badge.teal { background: var(--cyan-soft); color: var(--cyan); }
.nav-badge.accent { background: var(--accent-soft); color: var(--accent-ink); }
.nav-badge.jade { background: var(--green-soft); color: var(--green); }
#nav-bandeja-badge { background: var(--accent); color: #fff; }
.sidebar-footer { border-top: 1px solid var(--hair-2); background: transparent; padding-top: 4px; position: relative; }
.theme-toggle { background: var(--surface2); border-color: transparent; }
.tt-opt.on { background: var(--surface-raised); box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 3px rgba(10,10,15,.1); }
.user-pill { border-radius: 14px; margin: 4px 12px 12px; }
.user-pill:hover, .user-pill.open { background: var(--surface2); }
.avatar { border-radius: 12px; }
.user-dropdown { left: 12px; right: 12px; }

/* Créditos integrados en el pie (js/ux.js mueve #credits-chip a #sb-credits-slot) */
#sb-credits-slot { padding: 0 12px 6px; }
#sb-credits-slot #credits-chip {
  position: static !important; width: 100%; justify-content: center;
  border-radius: 12px !important; padding: 9px 12px !important;
  background: var(--surface2) !important; border-color: transparent !important;
  box-shadow: none !important; font-family: var(--font-sans) !important; font-size: 12.5px !important;
  color: var(--ink-2) !important;
}
#sb-credits-slot #credits-chip:hover { background: var(--surface3) !important; transform: none; }
html[data-rail="1"] #sb-credits-slot { padding: 0 10px 6px; }
html[data-rail="1"] #sb-credits-slot #credits-chip { font-size: 0 !important; padding: 9px 0 !important; gap: 0; }
html[data-rail="1"] #sb-credits-slot #credits-chip svg { width: 15px; height: 15px; }
.topbar-actions { margin-right: 0; }

/* Modo riel: el panel flotante se estrecha */
html[data-rail="1"] .sidebar-logo { padding: 12px 0 6px; }
html[data-rail="1"] .sb-search { margin: 0 10px 4px; }
html[data-rail="1"] .nav-item { margin: 2px 10px; }
html[data-rail="1"] .nav-item[data-tip]::after, html[data-rail="1"] .sb-search[data-tip]::after { left: calc(var(--rail-w) - 4px); }
html[data-rail="1"] .user-dropdown { left: calc(var(--rail-w) + 6px); right: auto; width: 220px; bottom: calc(100% + 6px); position: absolute; }

/* ── 2. Cabecera única (flotante, misma escala en todas las páginas) ──── */
.page { padding: 12px 24px 32px !important; gap: 24px; }
.page > .topbar {
  margin: 0 0 16px !important;
  position: sticky; top: 12px;
  border-radius: 18px !important;
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  padding: 12px 18px; height: auto; min-height: 60px;
}
.page > .topbar > div:first-child { border-left: 3px solid var(--module-accent); padding-left: 12px; min-width: 0; }
.topbar-title { font-size: 20px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.topbar-sub { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0; color: var(--ink-3); margin-top: 2px; text-transform: none; }
/* Títulos de sección DENTRO de un módulo (no la cabecera de página, que ya
   es el <div class="topbar"> compartido — Radar, Prospección y Clientes
   también lo usan desde 2026-09-20, ver index.html). */
.coda-section-title, .ihx-mod-title, .ccx-block-title {
  font-size: 24px !important; font-weight: 700 !important; letter-spacing: -.035em !important; line-height: 1.1 !important;
}
/* Densidad: tablas y filas de contactos más compactas */
.table-card table th, .table-card table td, #prospecting-shell table th, #prospecting-shell table td,
#clients-shell table th, #clients-shell table td { padding: 7px 10px; }
#prospecting-shell table { font-size: 12.5px; }
.empty { padding: 34px 20px; }

/* Acento por módulo */
#page-pro-main { --module-accent: var(--cyan); }
#page-ventas-coach, #page-ventas-reportes { --module-accent: var(--green); }
#page-clients { --module-accent: var(--purple); }
#page-radar, #page-mi-dashboard, #page-mi-research, #page-coda-ai, #page-ai-training, #page-developers { --module-accent: var(--accent-2); }
#page-settings { --module-accent: var(--ink-4); }
#page-integrations { --module-accent: var(--purple); }
.settings-container { margin-left: auto; margin-right: auto; }

/* ── 3. Identidad: botones cápsula, CTA en degradado, tipografía ─────── */
.btn { border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; letter-spacing: -.005em; }
.btn-sm, .btn.sm { padding: 6px 12px; font-size: 12px; }
.btn-primary,
.settings-btn-primary, .ctxgate-btn, .coda-btn-primary, .ihx-btn-generate, .hub-unlock-btn, .miforms-popup-cta, .ccx-confirm-btn {
  background: var(--grad-ai) !important; background-image: var(--grad-ai) !important; color: #fff !important; border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px -8px rgba(31,75,255,.6) !important;
}
.btn-primary:hover, .settings-btn-primary:hover:not([disabled]), .ctxgate-btn:hover, .coda-btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 28px -8px rgba(31,75,255,.7) !important;
}
.btn-primary::after { display: none; }
.btn-ghost, .btn.outline, .settings-btn-secondary, .logout-btn-cancel, .coda-btn:not(.coda-btn-primary) {
  background: var(--surface); border: 1px solid var(--glass-edge); color: var(--ink-2);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px rgba(10,10,15,.04);
  border-radius: 999px;
}
.btn-ghost:hover, .btn.outline:hover { background: var(--surface-raised); color: var(--ink); border-color: var(--glass-hi); }
.btn-teal { background: linear-gradient(135deg, #22B8D8, #0891B2); border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 20px -8px rgba(8,145,178,.6); }
.btn-jade { background: linear-gradient(135deg, #22C07A, #0EA968); border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 20px -8px rgba(14,169,104,.6); }
.settings-btn, .logout-btn, .coda-btn, .ctxgate-btn, .mc-mode-btn { border-radius: 999px; }
.pill { border-radius: 999px; }
.tabs { background: var(--surface2); border: 0; border-radius: 999px; padding: 4px; }
.tab { border-radius: 999px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; padding: 6px 14px; }
.tab.active { background: var(--surface-raised); box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 3px rgba(10,10,15,.1); }
.mc-mode-btn.active { background: var(--cyan-soft); }

.page input:not([type=checkbox]):not([type=radio]):not([type=range]), .page select, .page textarea,
.settings-input, .settings-textarea {
  border-radius: 12px; background: var(--surface2); border: 1px solid var(--hair);
}
.page input:not([type=checkbox]):not([type=radio]):not([type=range]):focus-visible, .page select:focus-visible, .page textarea:focus-visible {
  background: var(--surface-raised);
}

/* ── Slider de vidrio (Apple) ─────────────────────────────────────────────
   Todo input[type=range] de la app: carril fino translúcido con relleno de
   acento y una cuenta de vidrio con reflejo especular que crece al arrastrar.
   Ningún navegador expone el progreso del range en CSS, así que el relleno se
   pinta con --px-range-pct, que mantiene al día js/ux.js (si ese JS no corre,
   el carril simplemente sale vacío: nada se rompe). */
input[type=range] {
  -webkit-appearance: none; appearance: none;
  --px-track: 7px;
  --px-knob: 22px;
  height: var(--px-knob);
  margin: 0; padding: 0; border: 0;
  background: transparent;
  color: var(--module-accent);
  cursor: pointer;
  vertical-align: middle;
  touch-action: pan-y;
}
input[type=range]:focus { outline: none; }
input[type=range]:disabled { opacity: .45; cursor: not-allowed; }

/* Carril: vidrio esmerilado + relleno de acento hasta --px-range-pct */
input[type=range]::-webkit-slider-runnable-track {
  height: var(--px-track); border-radius: 999px;
  background-color: var(--surface3);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.05) 62%, rgba(255,255,255,0)),
    linear-gradient(90deg, var(--module-accent) var(--px-range-pct, 0%), rgba(255,255,255,0) var(--px-range-pct, 0%));
  box-shadow: inset 0 1px 2px rgba(10,10,15,.12), inset 0 0 0 .5px var(--glass-edge);
}
input[type=range]::-moz-range-track {
  height: var(--px-track); border-radius: 999px; border: 0;
  background-color: var(--surface3);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.05) 62%, rgba(255,255,255,0)),
    linear-gradient(90deg, var(--module-accent) var(--px-range-pct, 0%), rgba(255,255,255,0) var(--px-range-pct, 0%));
  box-shadow: inset 0 1px 2px rgba(10,10,15,.12), inset 0 0 0 .5px var(--glass-edge);
}

/* Cuenta de vidrio */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--px-knob); height: var(--px-knob); border-radius: 50%;
  margin-top: calc((var(--px-track) - var(--px-knob)) / 2);
  border: .5px solid var(--glass-edge);
  background:
    radial-gradient(130% 130% at 32% 20%, rgba(255,255,255,.98), rgba(255,255,255,.74) 46%, rgba(255,255,255,.46)),
    var(--surface-raised);
  -webkit-backdrop-filter: blur(10px) saturate(1.7);
  backdrop-filter: blur(10px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 3px rgba(10,10,15,.07),
    0 1px 2px rgba(10,10,15,.18), 0 8px 18px -8px rgba(20,30,80,.55);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
input[type=range]::-moz-range-thumb {
  width: var(--px-knob); height: var(--px-knob); border-radius: 50%;
  border: .5px solid var(--glass-edge);
  background:
    radial-gradient(130% 130% at 32% 20%, rgba(255,255,255,.98), rgba(255,255,255,.74) 46%, rgba(255,255,255,.46)),
    var(--surface-raised);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 3px rgba(10,10,15,.07),
    0 1px 2px rgba(10,10,15,.18), 0 8px 18px -8px rgba(20,30,80,.55);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

input[type=range]:hover:not(:disabled)::-webkit-slider-thumb { transform: scale(1.06); }
input[type=range]:hover:not(:disabled)::-moz-range-thumb { transform: scale(1.06); }
input[type=range]:active:not(:disabled)::-webkit-slider-thumb {
  transform: scale(1.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 3px rgba(10,10,15,.07),
    0 2px 4px rgba(10,10,15,.2), 0 14px 26px -10px rgba(20,30,80,.6);
}
input[type=range]:active:not(:disabled)::-moz-range-thumb {
  transform: scale(1.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 3px rgba(10,10,15,.07),
    0 2px 4px rgba(10,10,15,.2), 0 14px 26px -10px rgba(20,30,80,.6);
}
input[type=range]:focus-visible::-webkit-slider-thumb {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(10,10,15,.18),
    0 8px 18px -8px rgba(20,30,80,.55), 0 0 0 4px var(--accent-soft);
}
input[type=range]:focus-visible::-moz-range-thumb {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(10,10,15,.18),
    0 8px 18px -8px rgba(20,30,80,.55), 0 0 0 4px var(--accent-soft);
}
@media (prefers-reduced-motion: reduce) {
  input[type=range]::-webkit-slider-thumb { transition: none; }
  input[type=range]::-moz-range-thumb { transition: none; }
  input[type=range]:hover:not(:disabled)::-webkit-slider-thumb,
  input[type=range]:active:not(:disabled)::-webkit-slider-thumb { transform: none; }
  input[type=range]:hover:not(:disabled)::-moz-range-thumb,
  input[type=range]:active:not(:disabled)::-moz-range-thumb { transform: none; }
}

/* KPIs y tarjetas de área */
.stat-card { padding: 20px 22px; }
.stat-card::before { height: 3px; background: linear-gradient(90deg, var(--module-accent), transparent); opacity: .7; }
.stat-label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.stat-val { font-family: var(--font-sans); font-size: 34px; font-weight: 700; letter-spacing: -.045em; margin-top: 4px; }
.stat-sub { font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0; color: var(--ink-4); margin-top: 6px; line-height: 1.4; }
.chart-title { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.area-icon { width: 46px; height: 46px; border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.area-icon svg { width: 22px; height: 22px; }
.area-name { font-size: 17px; font-weight: 700; letter-spacing: -.025em; }
.area-desc { font-size: 12.5px; }
.area-meta { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--accent-ink); text-transform: none; }
.empty-ic { border-radius: 16px; background: var(--surface-raised); box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 6px var(--accent-soft-2), var(--shadow-1); }

/* ── 4. Barra superior móvil y cajón en vidrio ────────────────────────── */
.ux-mobilebar { background: var(--glass); border-bottom: 1px solid var(--glass-edge); padding-right: 12px; }
.ux-mobilebar-brand { font-family: var(--font-sans); font-weight: 700; letter-spacing: -.02em; }
.ux-cmdk-item { border-radius: 12px; }
.ux-cmdk-input { font-size: 16px; }
#px-toasts > div { border-radius: 16px !important; }
.ux-progress > i { height: 3px; }

/* ── 5. Flujo del Revenue OS en el dashboard (js/dashboard-flow.js) ──── */
.rf { display: flex; flex-direction: column; gap: 12px; }
.rf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 0 2px; }
.rf-eyebrow { font-size: 11.5px; font-weight: 600; color: var(--ink-4); letter-spacing: .02em; }
.rf-title { font-size: 22px; font-weight: 700; letter-spacing: -.035em; line-height: 1.15; margin-top: 2px; }
.rf-title em { font-style: normal; background: var(--grad-ai); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rf-next {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px 10px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  font-size: 13px; color: var(--ink-2);
}
.rf-next b { color: var(--ink); font-weight: 600; }
.rf-next .rf-next-lbl { font-size: 11px; font-weight: 600; color: var(--ink-4); }
.rf-strip {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px;
  position: relative;
}
.rf-step {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 14px 14px 12px; border-radius: 18px; cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2);
  font: inherit; color: inherit; min-width: 0;
}
.rf-step:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, var(--glass-shadow-lg); }
html[data-theme="dark"] .rf-step:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.26), var(--glass-shadow-lg); }
.rf-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rf-step-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rf-ic {
  width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: var(--surface2); color: var(--ink-3); box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  transition: background var(--dur-2), color var(--dur-2);
}
.rf-ic svg { width: 17px; height: 17px; }
.rf-state {
  width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
  background: var(--surface3); color: var(--ink-4);
}
.rf-state svg { width: 10px; height: 10px; }
.rf-name { font-size: 13.5px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-status { font-size: 12px; color: var(--ink-3); line-height: 1.35; min-height: 32px; }
.rf-num { font-size: 22px; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.rf-num small { font-size: 11.5px; font-weight: 500; color: var(--ink-4); letter-spacing: 0; margin-left: 4px; }
/* estados */
.rf-step.is-done .rf-ic { background: var(--green-soft); color: var(--green); }
.rf-step.is-done .rf-state { background: var(--green); color: #fff; }
.rf-step.is-active .rf-ic { background: var(--accent-soft); color: var(--accent-2); }
.rf-step.is-active .rf-state { background: var(--accent-soft); color: var(--accent-ink); }
.rf-step.is-next { border-color: transparent; box-shadow: 0 0 0 2px var(--accent-2), inset 0 1px 0 var(--glass-hi), var(--glass-shadow-lg); }
.rf-step.is-next .rf-ic { background: var(--grad-ai); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 16px -6px rgba(31,75,255,.6); }
.rf-step.is-next .rf-state { background: var(--accent); color: #fff; animation: rfPulse 2.2s ease-in-out infinite; }
@keyframes rfPulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); } 50% { box-shadow: 0 0 0 6px var(--accent-soft); } }
.rf-step.is-unknown .rf-status { color: var(--ink-4); }
/* conectores entre pasos */
.rf-step::after {
  content: ''; position: absolute; top: 30px; right: -10px; width: 10px; height: 2px;
  background: var(--hair-3); z-index: 1;
}
.rf-step.is-done::after { background: var(--green); opacity: .6; }
.rf-step:last-child::after { display: none; }
.rf-cta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

@media (max-width: 1280px) { .rf-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rf-step:nth-child(4)::after { display: none; } }
@media (max-width: 840px)  { .rf-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rf-step:nth-child(4)::after { display: block; } .rf-step:nth-child(even)::after { display: none; } .rf-title { font-size: 19px; } }
@media (max-width: 480px)  { .rf-strip { grid-template-columns: 1fr; } .rf-step::after { display: none; } }

/* ── Responsive del vidrio ────────────────────────────────────────────── */
@media (max-width: 840px) {
  /* glass.css redefine --sidebar-w en :root después de ux.css: se vuelve a anular aquí */
  :root, html[data-rail="1"] { --sidebar-w: 0px; }
  .sidebar {
    top: 0; left: 0; height: 100vh; border-radius: 0 24px 24px 0;
    width: var(--drawer-w) !important; min-width: var(--drawer-w) !important;
  }
  .page { padding: 12px 14px 28px !important; }
  .page > .topbar { top: 8px; padding: 10px 14px; margin: 0 0 4px !important; }
  #page-ventas-coach.page { padding: 12px 14px 28px !important; overflow-x: hidden; }
  #mc-idle { grid-template-columns: 1fr !important; }
  #mc-idle > *, #page-ventas-coach .mc-grid > * { min-width: 0; overflow-wrap: anywhere; }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .rf-step.is-next .rf-state { animation: none; }
  .rf-step:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   INTERIORES (2026-09-20): el vidrio dentro de cada módulo.
   Los módulos inyectan su CSS después de este archivo; se gana por
   especificidad con el id del shell (#ih-research-shell, #ih-v2-shell,
   #clients-shell, #radar-shell, #coda-shell) y no con !important salvo
   donde el módulo pone estilos en línea.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens de superficie interior ───────────────────────────────────── */
:root {
  --pane: var(--surface);
  --pane-edge: var(--glass-edge);
  --pane-hi: var(--glass-hi);
  --pane-shadow: var(--glass-shadow);
  --field: rgba(10,10,15,.045);
  --field-edge: rgba(10,10,15,.08);
}
html[data-theme="dark"] { --field: rgba(255,255,255,.06); --field-edge: rgba(255,255,255,.1); }

/* ── Dashboard: "Qué está funcionando" (js/learning.js) ──────────────── */
.lrn { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.lrn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lrn-head-copy { min-width: 0; flex: 1 1 320px; }
.lrn-eyebrow { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-4); letter-spacing: .02em; }
.lrn-title { margin: 2px 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -.025em; }
.lrn-sub { margin: 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; max-width: 760px; }
.lrn-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.lrn-stat {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
  background: var(--field); border: 1px solid var(--field-edge); font-size: 12px; font-weight: 500; color: var(--ink-2);
}
.lrn-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.lrn-col { padding: 14px 16px; border-radius: 16px; background: var(--field); border: 1px solid var(--field-edge); }
.lrn-col-t { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 10px; }
.lrn-col-t i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); }
.lrn-col-works .lrn-col-t i { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.lrn-col-fails .lrn-col-t i { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.lrn-empty { font-size: 12.5px; color: var(--ink-4); }
.lrn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lrn-item { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-raised); box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px rgba(10,10,15,.05); }
.lrn-scope { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-4); }
.lrn-label { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.lrn-metric { font-size: 12px; color: var(--ink-3); }
.lrn-acts { padding: 12px 16px; border-radius: 16px; background: var(--accent-soft-2); border: 1px solid var(--field-edge); }
.lrn-acts ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.lrn-muted { color: var(--ink-4); }
.lrn-foot, .lrn-note { font-size: 12px; color: var(--ink-4); }
.lrn-note-err { color: var(--red); }

/* ── Contexto de la empresa (#ih-research-shell) ─────────────────────── */
#ih-research-shell .ihx-research { padding: 4px 24px 120px; }
#ih-research-shell .ihx-research-hint { font-size: 13px; color: var(--ink-3); margin: 0 0 14px; max-width: 820px; }
#ih-research-shell .ihx-research-meta { margin: 0 0 14px; }
/* fuente de verdad */
#ih-research-shell .ihx-source-card {
  padding: 18px 20px; border-radius: 20px; margin-bottom: 16px;
  background: var(--pane); border: 1px solid var(--pane-edge); box-shadow: inset 0 1px 0 var(--pane-hi), var(--pane-shadow);
}
#ih-research-shell .ihx-source-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
#ih-research-shell .ihx-source-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--grad-ai); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px -8px rgba(31,75,255,.6); flex-shrink: 0; }
#ih-research-shell .ihx-source-icon svg { width: 19px; height: 19px; }
#ih-research-shell .ihx-source-copy { flex: 1 1 320px; min-width: 0; }
#ih-research-shell .ihx-source-title { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
#ih-research-shell .ihx-source-copy .ihx-field-help { margin: 3px 0 0; font-size: 12.5px; }
#ih-research-shell .ihx-research-engine { margin: 0; }
#ih-research-shell .ihx-source-row { display: flex; gap: 10px; align-items: stretch; }
#ih-research-shell .ihx-source-row input { flex: 1; min-width: 0; font-size: 14px; padding: 12px 14px; border-radius: 14px; background: var(--field); border: 1px solid var(--field-edge); }
#ih-research-shell .ihx-source-row .ihx-btn-ai { border-radius: 999px; padding: 0 18px; }
#ih-research-shell .ihx-source-row-sm input { font-size: 13px; padding: 10px 12px; }
#ih-research-shell .ihx-source-more { margin-top: 14px; border-top: 1px solid var(--field-edge); padding-top: 10px; }
#ih-research-shell .ihx-source-more summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 4px 0; }
#ih-research-shell .ihx-source-more summary::-webkit-details-marker { display: none; }
#ih-research-shell .ihx-source-more summary::before { content: ''; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); margin-right: 4px; transition: transform var(--dur-2) var(--ease-out); opacity: .7; }
#ih-research-shell .ihx-source-more[open] summary::before { transform: rotate(45deg); }
#ih-research-shell .ihx-source-more summary em { font-style: normal; font-weight: 400; color: var(--ink-4); font-size: 12px; }
#ih-research-shell .ihx-source-more-body { display: grid; gap: 8px; padding: 8px 0 2px; }
#ih-research-shell .ihx-source-lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-top: 6px; }
#ih-research-shell .ihx-source-lbl span { font-weight: 400; color: var(--ink-4); margin-left: 6px; }
#ih-research-shell .ihx-source-more textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; background: var(--field); border: 1px solid var(--field-edge); font: inherit; font-size: 13px; resize: vertical; }
/* progreso */
#ih-research-shell .ihx-context-progress { border-radius: 20px; background: var(--pane); border: 1px solid var(--pane-edge); box-shadow: inset 0 1px 0 var(--pane-hi), var(--pane-shadow); margin: 0 0 8px; padding: 18px 20px; }
#ih-research-shell .ihx-context-progress-copy strong { font-size: 17px; letter-spacing: -.02em; }
#ih-research-shell .ihx-context-progress-pct { font-size: 22px; font-weight: 700; letter-spacing: -.03em; background: var(--grad-ai); -webkit-background-clip: text; background-clip: text; color: transparent; }
#ih-research-shell .ihx-context-progress-track { height: 6px; background: var(--field); }
#ih-research-shell .ihx-context-progress-track > span { background: var(--grad-ai); }
#ih-research-shell .ihx-btn-ai { border-radius: 999px; }
/* bloques A / B */
#ih-research-shell .ccx-block { margin-top: 22px; }
#ih-research-shell .ccx-block-title { font-size: 20px; letter-spacing: -.03em; }
#ih-research-shell .ccx-block-mark { border-radius: 12px; width: 38px; height: 38px; }
#ih-research-shell .ccx-block-score { border-radius: 999px; }
/* las 13 tarjetas */
#ih-research-shell .ihx-context-gallery { gap: 14px; }
#ih-research-shell .ihx-context-card {
  border-radius: 18px; background: var(--pane); border: 1px solid var(--pane-edge);
  box-shadow: inset 0 1px 0 var(--pane-hi), var(--pane-shadow);
}
#ih-research-shell .ihx-context-card:hover { border-color: var(--glass-hi); box-shadow: inset 0 1px 0 var(--pane-hi), var(--glass-shadow-lg); }
#ih-research-shell .ihx-context-card.is-complete { border-color: var(--pane-edge); }
#ih-research-shell .ihx-context-card.is-open { border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2), inset 0 1px 0 var(--pane-hi), var(--glass-shadow-lg); }
#ih-research-shell .ihx-context-card-toggle { padding: 18px 18px 16px; gap: 8px 10px; }
#ih-research-shell .ihx-context-card-num { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; color: var(--ink-4); }
#ih-research-shell .ihx-context-card-title { font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
#ih-research-shell .ihx-context-card-status {
  grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; letter-spacing: 0;
  background: var(--field); color: var(--ink-3);
}
#ih-research-shell .ihx-context-card.is-complete .ihx-context-card-status { background: var(--green-soft); color: var(--green); }
#ih-research-shell .ihx-context-card-summary { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; color: var(--ink-3); -webkit-line-clamp: 3; }
#ih-research-shell .ihx-context-card-body { padding: 4px 18px 18px; border-top: 1px solid var(--field-edge); }
#ih-research-shell .ihx-context-card-body input, #ih-research-shell .ihx-context-card-body textarea, #ih-research-shell .ihx-context-card-body select {
  border-radius: 12px; background: var(--field); border: 1px solid var(--field-edge); font-family: var(--font-sans); font-size: 13.5px;
}
#ih-research-shell .ihx-context-card-body .ihx-field > span, #ih-research-shell .ihx-context-card-body label { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
#ih-research-shell .ihx-card-actions .ihx-btn-force, #ih-research-shell .ihx-card-actions .ihx-btn-ai { border-radius: 999px; }
/* síntesis */
#ih-research-shell .ihx-summary-card { margin-top: 18px; }
#ih-research-shell .ihx-summary-panel { padding: 16px 18px; border-radius: 14px; background: var(--field); }
#ih-research-shell .ihx-summary-label { font-family: var(--font-sans); letter-spacing: .04em; }
#ih-research-shell .ihx-summary-panel strong { font-size: 15px; letter-spacing: -.02em; }
#ih-research-shell .ihx-summary-panel p { font-size: 13px; line-height: 1.55; color: var(--ink-2); }
/* barra de acción pegajosa: Guardar + Confirmar en un solo sitio */
#ih-research-shell .ihx-actionbar {
  position: sticky; bottom: 16px; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 22px; padding: 14px 18px; border-radius: 20px;
  background: var(--frost); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow-lg);
}
#ih-research-shell .ihx-actionbar.is-ready:not(.is-confirmed) { border-color: transparent; box-shadow: 0 0 0 2px var(--accent-2), inset 0 1px 0 var(--glass-hi), var(--glass-shadow-lg); }
#ih-research-shell .ihx-actionbar.is-confirmed { box-shadow: 0 0 0 1px rgba(14,169,104,.35), inset 0 1px 0 var(--glass-hi), var(--glass-shadow); }
#ih-research-shell .ihx-actionbar .ccx-confirm-copy { flex: 1 1 380px; min-width: 0; }
#ih-research-shell .ihx-actionbar .ccx-confirm-copy strong { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
#ih-research-shell .ihx-actionbar .ccx-confirm-copy p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
#ih-research-shell .ihx-actionbar .ccx-confirm-missing { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
#ih-research-shell .ihx-actionbar .ccx-confirm-missing button { border-radius: 999px; }
#ih-research-shell .ihx-actionbar-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#ih-research-shell .ihx-actionbar .ihx-btn-force { border-radius: 999px; padding: 10px 16px; font-size: 13px; background: var(--surface); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi); }
#ih-research-shell .ihx-actionbar .ccx-confirm-btn { border-radius: 999px; padding: 11px 20px; font-size: 14px; }
#ih-research-shell .ihx-actionbar .ccx-confirmed-pill { border-radius: 999px; padding: 10px 16px; font-size: 13px; font-weight: 600; background: var(--green-soft); color: var(--green); }
#ih-research-shell .ihx-research-saved { font-size: 12px; color: var(--ink-4); }
/* fuentes adicionales */
#ih-research-shell .ihx-context-sources { margin-top: 22px; padding: 20px; border-radius: 20px; background: var(--pane); border: 1px solid var(--pane-edge); box-shadow: inset 0 1px 0 var(--pane-hi), var(--pane-shadow); }
#ih-research-shell .ihx-context-card-h { font-size: 16px; font-weight: 700; letter-spacing: -.02em; border: 0; padding: 0; margin-bottom: 4px; }
#ih-research-shell .ihx-doc-upload { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin: 12px 0; }
#ih-research-shell .ihx-doc-drop {
  position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 26px 16px; border-radius: 16px; border: 1.5px dashed var(--hair-3); background: var(--field); cursor: pointer; text-align: center;
  transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-2) var(--ease-out);
}
#ih-research-shell .ihx-doc-drop:hover { border-color: var(--accent-2); background: var(--accent-soft-2); transform: translateY(-1px); }
#ih-research-shell .ihx-doc-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
#ih-research-shell .ihx-doc-drop-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--surface-raised); color: var(--accent-2); box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-1); }
#ih-research-shell .ihx-doc-drop-ic svg { width: 18px; height: 18px; }
#ih-research-shell .ihx-doc-drop-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
#ih-research-shell .ihx-doc-drop-s { font-size: 12px; color: var(--ink-4); }
#ih-research-shell .ihx-doc-row { border-radius: 14px; background: var(--field); border: 1px solid var(--field-edge); padding: 12px 14px; }
#ih-research-shell .ihx-doc-name { font-size: 13.5px; }
#ih-research-shell .ihx-doc-status { border-radius: 999px; padding: 3px 9px; letter-spacing: .04em; }
#ih-research-shell .ihx-doc-more { margin-top: 8px; }
#ih-research-shell .ihx-doc-more summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); list-style: none; }
#ih-research-shell .ihx-doc-more summary::-webkit-details-marker { display: none; }
#ih-research-shell .ihx-doc-summary { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); max-height: 320px; overflow: auto; padding-right: 6px; }
@media (max-width: 840px) {
  #ih-research-shell .ihx-research { padding: 4px 14px 120px; }
  #ih-research-shell .ihx-source-row { flex-direction: column; }
  #ih-research-shell .ihx-source-row .ihx-btn-ai { padding: 11px 18px; justify-content: center; }
  #ih-research-shell .ihx-actionbar { bottom: 8px; }
}

/* ── Intelligence Hub (#ih-v2-shell): tarjetas coherentes + acciones ─── */
#ih-v2-shell .ihx-wrap { padding: 4px 24px 40px; }
#ih-v2-shell .ihx-toolbar { border: 1px solid var(--pane-edge); border-radius: 18px; background: var(--pane); box-shadow: inset 0 1px 0 var(--pane-hi), var(--pane-shadow); padding: 12px 16px; margin: 0 0 14px; flex-wrap: wrap; }
#ih-v2-shell .ihx-btn-generate, #ih-v2-shell .ihx-btn-force { border-radius: 999px; }
#ih-v2-shell .ihx-tabs { padding: 0 0 12px; gap: 6px; }
#ih-v2-shell .ihx-tab { border-radius: 999px; border: 1px solid transparent; padding: 8px 14px; }
#ih-v2-shell .ihx-tab.is-active { background: var(--surface-raised); border-color: var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 3px rgba(10,10,15,.08); }
#ih-v2-shell .ihx-modules { border-top: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
#ih-v2-shell .ihx-module {
  border-radius: 20px; background: var(--pane); border: 1px solid var(--pane-edge);
  box-shadow: inset 0 1px 0 var(--pane-hi), var(--pane-shadow);
  border-left: 3px solid var(--accent-seg, var(--accent));
}
#ih-v2-shell .ihx-module:hover { border-color: var(--pane-edge); border-left-color: var(--accent-seg, var(--accent)); box-shadow: inset 0 1px 0 var(--pane-hi), var(--glass-shadow-lg); }
#ih-v2-shell .ihx-mod-h { padding: 16px 20px 14px; border-bottom: 1px solid var(--field-edge); }
#ih-v2-shell .ihx-mod-icon { width: 38px; height: 38px; border-radius: 12px; background: var(--surface-raised); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-1); font-size: 17px; }
#ih-v2-shell .ihx-mod-h h3 { font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
#ih-v2-shell .ihx-mod-sub { font-size: 12px; }
#ih-v2-shell .ihx-mod-refresh { border-radius: 999px; width: 28px; height: 28px; }
#ih-v2-shell .ihx-learn-btn { border-radius: 999px; }
#ih-v2-shell .ihx-mod-body { padding: 18px 20px 16px; }
#ih-v2-shell .ihx-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--field-edge); }
#ih-v2-shell .ihx-acts { display: flex; flex-wrap: wrap; gap: 6px; }
#ih-v2-shell .ihx-act {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
  background: var(--surface-raised); border: 1px solid var(--glass-edge); color: var(--ink-2);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px rgba(10,10,15,.04);
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
#ih-v2-shell .ihx-act svg { width: 13px; height: 13px; color: var(--accent-seg, var(--accent-2)); }
#ih-v2-shell .ihx-act:hover:not(:disabled) { transform: translateY(-1px); color: var(--ink); border-color: var(--accent-seg, var(--accent-2)); }
#ih-v2-shell .ihx-act:disabled, #ih-v2-shell .ihx-act.is-busy { opacity: .6; cursor: wait; }
#ih-v2-shell .ihx-act-campaign { background: var(--grad-ai); color: #fff; border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 14px -8px rgba(31,75,255,.6); }
#ih-v2-shell .ihx-act-campaign svg { color: #fff; }
#ih-v2-shell .ihx-act-campaign:hover:not(:disabled) { color: #fff; }
#ih-v2-shell .ihx-fb-btn { border-radius: 999px; }
/* estados vacíos de cada reporte */
#ih-v2-shell .ihx-state-empty, #ih-v2-shell .ihx-state-gen, #ih-v2-shell .ihx-state-err { border-radius: 14px; background: var(--field); }
@media (max-width: 840px) { #ih-v2-shell .ihx-wrap { padding: 4px 14px 40px; } }

/* ── Clientes (#clients-shell): interior en vidrio ───────────────────── */
#clients-shell .cl-head { margin-top: 0; }
#clients-shell .cl-card { border-radius: 20px; background: var(--pane); border: 1px solid var(--pane-edge); box-shadow: inset 0 1px 0 var(--pane-hi), var(--pane-shadow); }
#clients-shell .cl-card-photo { background: var(--field); }
#clients-shell .cl-new-card { border-radius: 20px; border: 1.5px dashed var(--hair-3); background: var(--field); }
#clients-shell .cl-det-head { padding: 18px 20px; border-radius: 20px; background: var(--pane); border: 1px solid var(--pane-edge); box-shadow: inset 0 1px 0 var(--pane-hi), var(--pane-shadow); }
#clients-shell .cl-det-photo { border-radius: 16px; background: var(--field); border-color: var(--field-edge); }
#clients-shell .cl-name-input { font-size: 22px; font-weight: 700; letter-spacing: -.03em; border-radius: 12px; }
#clients-shell .cl-sec { border-radius: 20px; background: var(--pane); border: 1px solid var(--pane-edge); box-shadow: inset 0 1px 0 var(--pane-hi), var(--pane-shadow); padding: 18px 20px; }
#clients-shell .cl-sec-title { font-size: 14px; font-weight: 700; letter-spacing: -.015em; }
#clients-shell .cl-lbl { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ink-4); }
#clients-shell .cl-inp, #clients-shell .cl-sel, #clients-shell .cl-ta { border-radius: 12px; background: var(--field); border: 1px solid var(--field-edge); padding: 9px 12px; }
#clients-shell .cl-inp:focus, #clients-shell .cl-sel:focus, #clients-shell .cl-ta:focus { background: var(--surface-raised); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#clients-shell .cl-open-a { border-radius: 999px; background: var(--surface-raised); border-color: var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi); }
#clients-shell .cl-metric { border-radius: 14px; background: var(--field); border: 1px solid var(--field-edge); padding: 12px 14px; }
#clients-shell .cl-metric-lbl { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ink-4); }
#clients-shell .cl-metric input { background: transparent; border: 0; font-size: 24px; font-weight: 700; letter-spacing: -.03em; padding: 2px 0; width: 100%; color: var(--ink); }
#clients-shell .cl-metric input:focus { outline: none; }
#clients-shell .cl-ratio { border-radius: 14px; background: var(--accent-soft-2); border: 1px solid var(--field-edge); }
#clients-shell .cl-thr { border-radius: 14px; }
#clients-shell .cl-thr-badge { border-radius: 999px; }
#clients-shell .cl-sync-note { border-radius: 12px; background: var(--field); border-color: var(--field-edge); }
#clients-shell .cl-cty { border-radius: 999px; background: var(--surface-raised); border-color: var(--glass-edge); }
#clients-shell .cl-cty.on { background: var(--accent-soft); border-color: var(--accent); }
#clients-shell .cl-mat { border-radius: 12px; background: var(--field); border-color: var(--field-edge); }
#clients-shell .cl-empty { border-radius: 16px; border: 1.5px dashed var(--hair-3); background: var(--field); }
#clients-shell .cl-chip { border-radius: 999px; }
#clients-shell .cl-portal-tgl { border-radius: 999px; }

/* ── Radar (#radar-shell): cabecera con una sola acción ──────────────── */
#radar-shell .rl-wrap { padding: 4px 24px 40px; max-width: none; gap: 14px; }
#radar-shell .rl-top { align-items: center; }
#radar-shell .rl-top-right { padding: 0; margin-left: auto; }
#radar-shell .rl-pill { border-radius: 999px; background: var(--field); }
#radar-shell .rl-pill-on { background: var(--green-soft); }
#radar-shell .rl-tabs { border-bottom: 0; gap: 6px; margin-top: 4px; }
#radar-shell .rl-tab { border: 1px solid transparent; border-radius: 999px; padding: 8px 14px; }
#radar-shell .rl-tab.is-on { background: var(--surface-raised); border-color: var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 3px rgba(10,10,15,.08); }
#radar-shell .rl-tab-badge { border-radius: 999px; }
#radar-shell .card, #radar-shell .rl-planbox { border-radius: 20px; }
#radar-shell .rl-sig, #radar-shell .rl-det { border-radius: 16px; }
#radar-shell .rl-select, #radar-shell .rl-search, #radar-shell .rl-input { border-radius: 12px; background: var(--field); border: 1px solid var(--field-edge); }
#radar-shell .rl-seg { border-radius: 999px; background: var(--field); }
#radar-shell .rl-seg-b { border-radius: 999px; }
/* Filtros multivalor del feed: el botón es cápsula y el panel, vidrio. */
#radar-shell .rl-fbtn { border-radius: 999px; background: var(--field); border-color: var(--field-edge); }
#radar-shell .rl-fpanel {
  border-radius: 16px; background: var(--surface-raised); border-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 18px 40px rgba(10,10,15,.20);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
#radar-shell .rl-fsearch { border-radius: 10px; background: var(--field); border-color: var(--field-edge); }
#radar-shell .rl-fpanel-foot { background: transparent; }
#radar-shell .rl-range { gap: 10px; }
#radar-shell .rl-range input[type=range] { width: 132px; }
#radar-shell .rl-field > input[type=range] { width: 100%; }
@media (max-width: 840px) { #radar-shell .rl-wrap { padding: 4px 14px 40px; } }

/* ── Contexto global (#coda-shell): sobrio, tipográfico ──────────────── */
#coda-shell .coda-wrap { padding: 4px 24px 48px; max-width: none; }
#coda-shell .coda-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-left: 3px solid var(--module-accent); padding-left: 14px; margin: 8px 0 16px; }
#coda-shell .coda-head-title { font-size: 24px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; }
#coda-shell .coda-head-sub { font-size: 13px; color: var(--ink-3); margin-top: 4px; max-width: 760px; line-height: 1.5; }
#coda-shell .coda-intro { background: var(--pane); border: 1px solid var(--pane-edge); border-radius: 18px; box-shadow: inset 0 1px 0 var(--pane-hi), var(--pane-shadow); margin-bottom: 22px; }
#coda-shell .coda-intro-badge { color: var(--ink-3); background: var(--field); border: 1px solid var(--field-edge); border-radius: 999px; font-weight: 600; letter-spacing: .04em; }
#coda-shell .coda-section { margin-bottom: 26px; padding: 22px; border-radius: 22px; background: var(--pane); border: 1px solid var(--pane-edge); box-shadow: inset 0 1px 0 var(--pane-hi), var(--pane-shadow); }
#coda-shell .coda-section-title { font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
#coda-shell .coda-kicker { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c, var(--accent-2)); background: color-mix(in srgb, var(--c, var(--accent)) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 22%, transparent); border-radius: 999px; padding: 4px 10px; }
#coda-shell .coda-section-desc { font-size: 13px; }
#coda-shell .coda-select { border-radius: 12px; background: var(--field); border: 1px solid var(--field-edge); }
#coda-shell .coda-select-opt { border-radius: 999px; }
#coda-shell .coda-btn { border-radius: 999px; }
#coda-shell .coda-dim, #coda-shell .coda-foda-quad, #coda-shell .coda-came-quad {
  border-radius: 18px; background: var(--field); border: 1px solid var(--field-edge);
  border-top: 1px solid var(--field-edge); border-left: 1px solid var(--field-edge);
  box-shadow: none; position: relative; overflow: hidden;
}
#coda-shell .coda-dim::before, #coda-shell .coda-foda-quad::before, #coda-shell .coda-came-quad::before {
  content: ''; position: absolute; left: 16px; right: 16px; top: 0; height: 2px; border-radius: 0 0 2px 2px;
  background: var(--c, var(--accent)); opacity: .7;
}
#coda-shell .coda-dim-letter, #coda-shell .coda-foda-letter {
  background: var(--surface-raised); color: var(--c, var(--accent)); font-family: var(--font-mono); font-weight: 600; font-size: 16px;
  border-radius: 12px; box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-1); border: 1px solid var(--glass-edge);
}
#coda-shell .coda-dim-name, #coda-shell .coda-foda-name { font-weight: 700; letter-spacing: -.015em; }
#coda-shell .coda-foda-origin { color: var(--ink-4); }
#coda-shell .coda-factor, #coda-shell .coda-came-item { background: var(--surface-raised); border-radius: 12px; box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px rgba(10,10,15,.04); }
#coda-shell .coda-impact { border-radius: 999px; }
#coda-shell .coda-factor-action { color: var(--accent-ink); }
#coda-shell .coda-came-badge { background: var(--surface-raised); color: var(--c, var(--accent)); font-family: var(--font-mono); font-weight: 600; font-size: 14px; border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-hi); border-radius: 12px; }
#coda-shell .coda-came-quad-name { color: var(--ink); }
#coda-shell .coda-foda-ta { border-radius: 12px; background: var(--surface-raised); border: 1px solid var(--field-edge); }
#coda-shell .coda-lg-dot { border-radius: 50%; width: 8px; height: 8px; }
#coda-shell .coda-came-placeholder { border-radius: 16px; background: var(--field); }
#coda-shell .coda-came-arrow { font-family: var(--font-mono); color: var(--ink-4); }
#coda-shell .coda-dot-pulse { background: var(--accent-2); }
@media (max-width: 840px) { #coda-shell .coda-wrap { padding: 4px 14px 40px; } #coda-shell .coda-section { padding: 16px; } }

/* Etiquetas de campos del contexto: sans, sin mayúsculas ni tracking mono */
#ih-research-shell .ihx-field > span, #ih-research-shell .ihx-source-lbl, #ih-research-shell .ccx-lbl, #ih-research-shell .ccx-field > span, #ih-research-shell label {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-2);
}
#ih-research-shell .ihx-doc-drop-t, #ih-research-shell .ihx-doc-drop-s, #ih-research-shell .ihx-doc-name { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; }
#ih-research-shell .ihx-doc-drop-t { font-size: 13.5px; font-weight: 600; }
#ih-research-shell .ihx-doc-drop-s { font-size: 12px; font-weight: 400; }
#ih-research-shell .ihx-field-help, #ih-research-shell .ccx-help { font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-3); text-transform: none; letter-spacing: 0; }