/* ══ css/tokens.css ══ */
/* =============================================================================
   TOKENS.CSS v40 — Design System Enterprise
   Fuente única de verdad. Carga ANTES de styles.css.
   
   BACKWARD COMPATIBLE: todos los tokens v35 se mantienen como aliases.
   NUEVOS: brand scale, neutral scale, shadow levels, animation tokens.
   ============================================================================= */

:root {
  /* ── TIPOGRAFÍA: familias ─────────────────────────────────────────── */
  --font-body:    'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Syne', 'Inter', system-ui, sans-serif;
  --font-ui:      'Inter', system-ui, -apple-system, sans-serif;
  --font-data:    'DM Mono', 'Courier New', monospace;
  --font-mono:    'DM Mono', 'JetBrains Mono', 'Fira Code', monospace;

  /* ── TIPOGRAFÍA: escala (7 niveles) ──────────────────────────────── */
  --fs-xs:   10px;   /* labels uppercase, eyebrow */
  --fs-sm:   11px;   /* meta, muted, pills */
  --fs-base: 12px;   /* tablas, controles */
  --fs-12:   12px;   /* alias explícito para compatibilidad */
  --fs-md:   13px;   /* texto secundario */
  --fs-lg:   14px;   /* cuerpo principal */
  --fs-xl:   18px;   /* KPI medianos */
  --fs-2xl:  24px;   /* KPI grandes */
  --fs-3xl:  28px;   /* títulos de página */

  /* ── PESOS ───────────────────────────────────────────────────────── */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-500:      500;  /* alias explícito */
  --fw-semibold: 600;
  --fw-600:      600;  /* alias explícito */
  --fw-bold:     700;
  --fw-700:      700;  /* alias explícito */
  --fw-black:    800;

  /* ── ALTURA DE LÍNEA ─────────────────────────────────────────────── */
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  /* ── ESPACIADO: múltiplos de 4px ─────────────────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── RADIOS ──────────────────────────────────────────────────────── */
  --rad-xs:   4px;
  --rad-sm:   6px;
  --rad-md:   10px;
  --rad-lg:   14px;
  --rad-xl:   20px;
  --rad-pill: 999px;

  /* Aliases de compatibilidad */
  --rad:            var(--rad-lg);
  --rad2:           20px;
  --radius-xs:      4px;
  --radius-sm:      var(--rad-sm);
  --radius-md:      var(--rad-md);
  --radius-lg:      var(--rad-lg);
  --radius-xl:      var(--rad-xl);
  --radius-pill:    var(--rad-pill);
  --radius-control: var(--rad-md);
  --radius-card:    var(--rad-lg);
  --radius-chip:    var(--rad-pill);

  /* ── TRANSICIONES ────────────────────────────────────────────────── */
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    300ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Aliases de compatibilidad */
  --duration-fast:    var(--dur-fast);
  --duration-base:    var(--dur-base);
  --duration-slow:    var(--dur-slow);
  --ease-in-out:      var(--ease-inout);
  --transition-base:  180ms ease;
  --tr:               180ms ease;

  /* ── ANIMACIONES: tokens centralizados ───────────────────────────── */
  --anim-data-enter:    row-in 0.2s var(--ease-out) both;
  --anim-skeleton:      shimmer 1.5s ease infinite;
  --anim-fade-in:       fade-in 0.18s var(--ease-out);
  --anim-slide-up:      slide-up 0.22s var(--ease-out);
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK THEME (default)
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── BRAND GOLD: escala de 5 stops ────────────────────────────────
     Reemplaza los 7 alias sueltos anteriores con una escala coherente.
     Los nombres viejos (--acc, --acc-soft, etc.) se mantienen como aliases.
  ─────────────────────────────────────────────────────────────────── */
  --color-brand-50:   rgba(214, 167, 86, 0.10);  /* fill muy suave */
  --color-brand-100:  rgba(214, 167, 86, 0.18);  /* fill hover */
  --color-brand-400:  rgba(214, 167, 86, 0.34);  /* border */
  --color-brand-600:  #d6a756;                   /* color principal */
  --color-brand-700:  #c99845;                   /* variante */
  --color-brand-800:  #f1d69b;                   /* light (sobre oscuro) */
  --color-brand-950:  #0b1220;                   /* text on brand bg */

  /* Aliases backward-compat */
  --acc:        var(--color-brand-600);
  --acc-2:      var(--color-brand-700);
  --acc-light:  var(--color-brand-800);
  --acc-l:      var(--color-brand-800);
  --acc-soft:   var(--color-brand-50);
  --acc-strong: var(--color-brand-100);
  --acc-border: var(--color-brand-400);

  /* ── NEUTRAL SLATE: escala de 9 stops ─────────────────────────────
     Formaliza bg, surf, card, brd, mut en una escala calculada.
  ─────────────────────────────────────────────────────────────────── */
  --color-neutral-950: #0b1220;
  --color-neutral-900: #111827;
  --color-neutral-800: #172033;
  --color-neutral-750: #1d2940;
  --color-neutral-700: #253247;
  --color-neutral-600: #33435d;
  --color-neutral-400: #94a3b8;
  --color-neutral-300: #9fb0c4;
  --color-neutral-200: #c8d3df;
  --color-neutral-100: #eaf0f7;

  /* Aliases backward-compat */
  --bg:         var(--color-neutral-950);
  --surf:       var(--color-neutral-900);
  --card:       var(--color-neutral-800);
  --card2:      var(--color-neutral-750);
  --card-solid: var(--color-neutral-800);
  --panel:      rgba(17, 24, 39, 0.92);
  --panel-2:    rgba(23, 32, 51, 0.96);
  --control:    #0f172a;
  --control-2:  #162033;
  --brd:        var(--color-neutral-700);
  --brd-2:      var(--color-neutral-600);
  --brd2:       var(--color-neutral-700);   /* alias legacy */
  --brd-soft:   #232f47;                    /* alias legacy */
  --txt:        var(--color-neutral-100);
  --txt2:       var(--color-neutral-200);
  --mut:        var(--color-neutral-400);
  --mut-2:      #7f91a8;
  --txt-soft:   var(--color-neutral-300);

  /* ── SEMÁNTICOS ──────────────────────────────────────────────────── */
  --blu: #6ea8fe;
  --grn: #4cc9a6;
  --pur: #9c8cff;
  --red: #e07a7a;
  --tea: #61c4d8;

  --intent-success:        #4cc9a6;
  --intent-success-soft:   rgba(76, 201, 166, 0.12);
  --intent-success-border: rgba(76, 201, 166, 0.32);
  --intent-warning:        #d6a756;
  --intent-warning-soft:   rgba(214, 167, 86, 0.12);
  --intent-warning-border: rgba(214, 167, 86, 0.32);
  --intent-danger:         #e07a7a;
  --intent-danger-soft:    rgba(224, 122, 122, 0.12);
  --intent-danger-border:  rgba(224, 122, 122, 0.32);
  --intent-info:           #6ea8fe;
  --intent-info-soft:      rgba(110, 168, 254, 0.12);
  --intent-info-border:    rgba(110, 168, 254, 0.32);
  --intent-neutral:        #94a3b8;
  --intent-neutral-soft:   rgba(148, 163, 184, 0.12);

  /* ── SOMBRAS: 3 niveles de elevación ─────────────────────────────── */
  --shadow-0:  none;
  --shadow-1:  0 2px 8px rgba(2, 8, 23, 0.20), 0 1px 3px rgba(2, 8, 23, 0.12);
  --shadow-2:  0 8px 24px rgba(2, 8, 23, 0.28);
  --shadow-3:  0 18px 46px rgba(2, 8, 23, 0.36);

  /* Aliases backward-compat */
  --shadow-sm:     var(--shadow-1);
  --shadow-md:     var(--shadow-2);
  --shadow-lg:     var(--shadow-3);
  --shadow-soft:   0 10px 28px rgba(0,0,0,.18);
  --shadow-strong: 0 22px 56px rgba(0,0,0,.34);
  --shadow-card:   0 4px 24px rgba(0,0,0,.28), 0 1px 4px rgba(0,0,0,.18);
  --shadow-float:  0 18px 50px rgba(0,0,0,.42);
  --sh-card:       var(--shadow-1);
  --sh-float:      var(--shadow-3);

  /* ── TABLA ───────────────────────────────────────────────────────── */
  --table-row-height:    40px;
  --table-cell-padx:     var(--space-3);
  --table-zebra-bg:      rgba(255, 255, 255, 0.018);
  --table-hover-bg:      rgba(214, 167, 86, 0.08);
  --table-pinned-bg:     #172033;
  --table-pinned-shadow: 4px 0 12px -6px rgba(0, 0, 0, 0.45);
  --table-meter-track:   rgba(255, 255, 255, 0.06);
  --table-meter-fill:    linear-gradient(90deg, rgba(214,167,86,.28), rgba(214,167,86,.62));

  /* ── GRÁFICOS ────────────────────────────────────────────────────── */
  --chart-text-strong: #eef4fb;
  --chart-text-soft:   #8ea1b8;
  --chart-grid:        rgba(148, 163, 184, 0.18);
  --chart-accent:      var(--acc);
  --chart-dot-stroke:  #0b1220;

  /* ── GRADIENTES ──────────────────────────────────────────────────── */
  --grad-acc: linear-gradient(135deg, #d6a756 0%, #c99845 100%);
  --grad-blu: linear-gradient(135deg, #6ea8fe 0%, #3b82f6 100%);
  --grad-grn: linear-gradient(135deg, #4cc9a6 0%, #10b981 100%);
  --grad-pur: linear-gradient(135deg, #9c8cff 0%, #7c3aed 100%);
  --grd-card: linear-gradient(165deg, rgba(22,32,52,.98) 0%, rgba(10,16,28,.98) 100%);

  /* ── LAYOUT ──────────────────────────────────────────────────────── */
  --header-height:   58px;
  --panel-gap:       14px;
  --control-height:  40px;
  --metric-gap:      12px;
  --metric-fill:     0%;   /* usado en bars, override via inline style */

  /* ── CARD ────────────────────────────────────────────────────────── */
  --card-hover: rgba(255, 255, 255, 0.04);

  /* ── FOCUS ───────────────────────────────────────────────────────── */
  --focus-ring:         0 0 0 3px rgba(214, 167, 86, 0.22);
  --focus-ring-danger:  0 0 0 3px rgba(224, 122, 122, 0.22);
  --focus-ring-success: 0 0 0 3px rgba(76, 201, 166, 0.22);

  /* ── PROGRESS BAR ────────────────────────────────────────────────── */
  --progress-bar-color: var(--acc);
  --progress-bar-h:     2px;

  /* ── MICROINTERACCIONES ──────────────────────────────────────────── */
  --hover-lift:   translateY(-1px);
  --active-press: translateY(0) scale(0.98);

  /* ── KPI ─────────────────────────────────────────────────────────── */
  --kpi-padding:       var(--space-4);
  --kpi-radius:        var(--rad-lg);
  --kpi-label-size:    var(--fs-xs);
  --kpi-value-size:    var(--fs-2xl);
  --kpi-delta-size:    var(--fs-sm);
  --kpi-spark-height:  26px;
  --kpi-spark-width:   120px;

  /* ── EMPTY STATE ─────────────────────────────────────────────────── */
  --empty-icon-size:  32px;
  --empty-title-size: var(--fs-lg);
  --empty-copy-size:  var(--fs-base);
  --empty-padding:    var(--space-8) var(--space-6);

  /* ── ACSUM tokens (v33+) ─────────────────────────────────────────── */
  --acsum-pos:           var(--intent-success);
  --acsum-pos-soft:      var(--intent-success-soft);
  --acsum-pos-border:    var(--intent-success-border);
  --acsum-neg:           var(--intent-danger);
  --acsum-neg-soft:      var(--intent-danger-soft);
  --acsum-neg-border:    var(--intent-danger-border);
  --acsum-neu:           var(--intent-neutral);
  --acsum-neu-soft:      var(--intent-neutral-soft);
  --acsum-toolbar-bg:    var(--surf);
  --acsum-toolbar-brd:   var(--brd);
  --acsum-btn-on-bg:     var(--acc);
  --acsum-btn-on-color:  #0b1220;
  --acsum-th-size:       10.5px;
  --acsum-td-size:       12.5px;
  --acsum-bar-h:         3px;
  --acsum-bar-radius:    2px;
  --acsum-row-lost-bg:   rgba(224, 122, 122, 0.05);
  --acsum-row-lost-brd:  rgba(224, 122, 122, 0.20);
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  /* Brand Gold en claro */
  --color-brand-50:  rgba(184, 135, 52, 0.08);
  --color-brand-100: rgba(184, 135, 52, 0.15);
  --color-brand-400: rgba(184, 135, 52, 0.28);
  --color-brand-600: #b88734;
  --color-brand-700: #c99845;
  --color-brand-800: #e2b96f;
  --color-brand-950: #ffffff;

  /* Neutral Slate en claro */
  --color-neutral-950: #f4f7fb;
  --color-neutral-900: #ffffff;
  --color-neutral-800: #ffffff;
  --color-neutral-750: #eef3f9;
  --color-neutral-700: #d8e0eb;
  --color-neutral-600: #c7d2e1;
  --color-neutral-400: #64748b;
  --color-neutral-300: #526277;
  --color-neutral-200: #334155;
  --color-neutral-100: #0f172a;

  --brd-2:      #c7d2e1;
  --brd2:       #d8e0eb;
  --brd-soft:   #cdd5e0;
  --mut-2:      #7b8a9b;
  --control:    #f8fafc;
  --control-2:  #eef2f7;
  --panel:      rgba(255,255,255,.94);
  --panel-2:    rgba(248,250,252,.98);

  --blu: #3b82f6;
  --grn: #0f9f86;
  --pur: #7c6ee6;
  --red: #c85b5b;
  --tea: #0f8fa8;

  --intent-success:        #0f9f86;
  --intent-success-soft:   rgba(15,159,134,.10);
  --intent-success-border: rgba(15,159,134,.22);
  --intent-warning:        #b88734;
  --intent-warning-soft:   rgba(184,135,52,.10);
  --intent-warning-border: rgba(184,135,52,.22);
  --intent-danger:         #c85b5b;
  --intent-danger-soft:    rgba(200,91,91,.10);
  --intent-danger-border:  rgba(200,91,91,.22);
  --intent-info:           #3b82f6;
  --intent-info-soft:      rgba(59,130,246,.10);
  --intent-info-border:    rgba(59,130,246,.22);
  --intent-neutral:        #64748b;
  --intent-neutral-soft:   rgba(100,116,139,.10);

  --shadow-0:  none;
  --shadow-1:  0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.05);
  --shadow-2:  0 4px 16px rgba(15,23,42,.09);
  --shadow-3:  0 12px 36px rgba(15,23,42,.12);
  --shadow-soft:   0 4px 12px rgba(15,23,42,.08);
  --shadow-strong: 0 12px 32px rgba(15,23,42,.14);
  --shadow-card:   0 2px 8px rgba(15,23,42,.08);
  --shadow-float:  0 10px 32px rgba(15,23,42,.14);

  --table-zebra-bg:      rgba(15,23,42,.018);
  --table-hover-bg:      rgba(184,135,52,.08);
  --table-pinned-bg:     #ffffff;
  --table-pinned-shadow: 4px 0 12px -6px rgba(15,23,42,.12);
  --table-meter-track:   rgba(15,23,42,.05);
  --table-meter-fill:    linear-gradient(90deg,rgba(184,135,52,.26),rgba(184,135,52,.50));

  --chart-text-strong: #0f172a;
  --chart-text-soft:   #64748b;
  --chart-grid:        rgba(100,116,139,.18);
  --chart-dot-stroke:  #ffffff;
  --card-hover:        rgba(15,23,42,.03);
  --grad-acc:          linear-gradient(135deg, #b88734 0%, #9a7228 100%);
  --grd-card:          linear-gradient(165deg, #f8fafc 0%, #f1f5fb 100%);
  --focus-ring:        0 0 0 3px rgba(184,135,52,.22);

  --acsum-btn-on-color: #ffffff;
  --acsum-row-lost-bg:  rgba(200,91,91,.05);
  --acsum-row-lost-brd: rgba(200,91,91,.18);
}

/* ── BREAKPOINTS: tokens canónicos v41 ──────────────────────────────────────
   5 valores únicos. Nunca usar otro número en media queries.
   En CSS: @media (max-width: var(--bp-xs)) NO funciona — usar los valores
   literales pero referenciar este archivo como fuente de verdad.
   En JS: leer con getComputedStyle(document.documentElement).getPropertyValue()
───────────────────────────────────────────────────────────────────────────── */
:root {
  --bp-xs:  479px;   /* ≤479  Mobile portrait */
  --bp-sm:  480px;   /* 480–767  Mobile landscape + tablet pequeña */
  --bp-md:  768px;   /* 768–1023 Tablet portrait (NUEVO breakpoint) */
  --bp-lg:  1024px;  /* 1024–1279 Tablet landscape + notebook */
  --bp-xl:  1280px;  /* ≥1280 Desktop wide (NUEVO aprovechamiento) */

  /* Touch: target mínimo WCAG 2.1 AA */
  --touch-target: 44px;

  /* Ancho máximo del contenido en wide desktop */
  --max-w-content: 1100px;        /* default */
  --max-w-content-xl: 1320px;     /* ≥1280px */
}


/* ══ styles.css ══ */
:root{
  /* === DARK THEME (default) === */
  --bg:#0a0d16; --surf:#141826; --card:#1b2032; --brd:#2a304a;
  --acc:#fbbf24; --acc-soft:rgba(251,191,36,.14);
  --blu:#60a5fa; --grn:#34d399; --pur:#c084fc;
  --red:#f87171; --tea:#22d3ee; --pnk:#f472b6; --ora:#fb923c;
  --txt:#eef1fa; --mut:#7d869c; --rad:14px;
  /* v30: nuevas variables semánticas */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.18);
  --shadow-md: 0 8px 24px rgba(0,0,0,.28);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.36);
  --card-hover: rgba(255,255,255,.04);
  --grad-acc: linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);
  --grad-blu: linear-gradient(135deg,#60a5fa 0%,#3b82f6 100%);
  --grad-grn: linear-gradient(135deg,#34d399 0%,#10b981 100%);
  --grad-pur: linear-gradient(135deg,#c084fc 0%,#a855f7 100%);
}

/* === LIGHT THEME === */
:root[data-theme="light"]{
  --bg:#f7f8fc; --surf:#ffffff; --card:#ffffff; --brd:#e4e7f0;
  --acc:#d97706; --acc-soft:rgba(217,119,6,.10);
  --blu:#2563eb; --grn:#059669; --pur:#9333ea;
  --red:#dc2626; --tea:#0891b2; --pnk:#db2777; --ora:#ea580c;
  --txt:#1a1f36; --mut:#697086;
  --shadow-sm: 0 1px 3px rgba(15,23,42,.08);
  --shadow-md: 0 6px 20px rgba(15,23,42,.10);
  --shadow-lg: 0 16px 40px rgba(15,23,42,.14);
  --card-hover: rgba(15,23,42,.03);
}
:root[data-theme="light"] body{ background: linear-gradient(180deg,#f7f8fc 0%,#eef0f7 100%); }
:root[data-theme="light"] .kpi-val{ font-weight:800; }
:root[data-theme="light"] .ap{ background:rgba(217,119,6,.08); }
:root[data-theme="light"] input[type=date]::-webkit-calendar-picker-indicator{ filter:none; }
:root[data-theme="light"] select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23697086' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--txt);min-height:100vh;padding-bottom:calc(env(safe-area-inset-bottom,0px)+16px)}

/* ════ HEADER ════ */
.hdr{background:var(--surf);border-bottom:1px solid var(--brd);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:300}
.logo{font-family:'Syne',sans-serif;font-size:17px;font-weight:800;letter-spacing:-.4px}
.logo b{color:var(--acc)}
.pill-status{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--mut);background:var(--card);border:1px solid var(--brd);border-radius:20px;padding:4px 10px}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--mut);transition:all .3s}
.dot.ok{background:var(--grn);box-shadow:0 0 6px var(--grn)}
.dot.err{background:var(--red)}
.dot.spin{background:var(--acc);animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ════ FILTER PANEL ════ */
.filter-panel{background:var(--surf);border-bottom:1px solid var(--brd);position:sticky;top:45px;z-index:200}
.fp-inner{max-width:1100px;margin:0 auto;padding:10px 14px}
.fp-top{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.fp-top-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1}
.pbtn{background:var(--card);border:1px solid var(--brd);border-radius:7px;color:var(--mut);font-size:11px;font-family:'DM Sans',sans-serif;padding:5px 10px;cursor:pointer;transition:all .15s;white-space:nowrap}
.pbtn:hover,.pbtn.on{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.45);color:var(--acc)}
.date-pair{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.date-pair label{font-size:10px;color:var(--mut);white-space:nowrap}
input[type=date]{background:var(--card);border:1px solid var(--brd);border-radius:8px;color:var(--txt);font-family:'DM Sans',sans-serif;font-size:12px;padding:5px 9px;transition:border-color .2s;width:130px}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.4);cursor:pointer}
input[type=date]:focus{outline:none;border-color:var(--acc)}
.btn-xs{background:none;border:1px solid var(--brd);border-radius:7px;color:var(--mut);font-size:11px;font-family:'DM Sans',sans-serif;padding:5px 10px;cursor:pointer;transition:all .15s;white-space:nowrap}
.btn-xs:hover{border-color:var(--red);color:var(--red)}
.btn-toggle{display:inline-flex;align-items:center;gap:6px}
.fp-main-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1}
.fp-collapsed-note{display:none;align-items:center;gap:8px;flex-wrap:wrap;padding-top:2px;color:var(--mut);font-size:11px}
.fp-collapsed-note .fp-note-pill{background:var(--card);border:1px solid var(--brd);border-radius:999px;padding:4px 10px;white-space:nowrap}
.filter-panel.collapsed .fp-main-controls,
.filter-panel.collapsed #btnClrAll,
.filter-panel.collapsed .fp-selects,
.filter-panel.collapsed .pills{display:none}
.filter-panel.collapsed .fp-collapsed-note{display:flex}

/* Cascade selects */
.fp-selects{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:520px){.fp-selects{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.fp-selects{grid-template-columns:repeat(6,1fr)}}
.sel-wrap{display:flex;flex-direction:column;gap:3px}
.sel-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.7px;color:var(--mut);font-weight:500;display:flex;align-items:center;gap:4px}
.snum{width:14px;height:14px;border-radius:50%;background:var(--brd);color:var(--mut);font-size:8px;font-family:'Syne',sans-serif;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.snum.on{background:var(--acc);color:#000}
select{background:var(--card);border:1px solid var(--brd);border-radius:8px;color:var(--txt);font-family:'DM Sans',sans-serif;font-size:12px;padding:7px 10px;width:100%;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;cursor:pointer;transition:border-color .2s}
select:focus{outline:none;border-color:var(--acc)}
select:disabled{opacity:.32;cursor:not-allowed}
select option{background:var(--card)}


.search-wrap{display:flex;flex-direction:column;gap:6px;position:relative}
.search-box{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--brd);border-radius:8px;padding:0 10px;min-height:36px}
.search-box:focus-within{border-color:var(--acc)}
.search-ico{font-size:12px;color:var(--mut);flex-shrink:0}
.search-input{flex:1;background:transparent;border:none;outline:none;color:var(--txt);font-family:'DM Sans',sans-serif;font-size:12px;min-width:0}
.search-input::placeholder{color:var(--mut)}
.search-clear{background:none;border:none;color:var(--mut);cursor:pointer;font-size:12px;padding:0 2px}
.search-meta{font-size:10px;color:var(--mut);min-height:12px}
.search-chips{display:flex;flex-wrap:wrap;gap:5px}
.search-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.25);border-radius:999px;padding:4px 8px;color:var(--acc);font-size:11px;cursor:pointer}
.search-chip-x{opacity:.7}
.search-dd{display:none;position:absolute;left:0;right:0;top:100%;margin-top:4px;background:var(--card);border:1px solid var(--brd);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.28);max-height:280px;overflow:auto;z-index:260}
.search-dd.open{display:block}
.search-dd-head{padding:8px 10px;font-size:10px;color:var(--mut);border-bottom:1px solid var(--brd);background:var(--surf);position:sticky;top:0}
.search-dd-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:none;border:none;color:var(--txt);padding:9px 10px;text-align:left;cursor:pointer}
.search-dd-item:hover{background:rgba(245,158,11,.06)}
.search-dd-main{font-size:12px}
.search-dd-side{font-size:10px;color:var(--mut)}
.search-dd-empty{padding:12px 10px;font-size:11px;color:var(--mut)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:absolute;top:-100%;left:12px;z-index:9999;padding:8px 16px;background:var(--acc);color:#000;font-weight:700;border-radius:0 0 8px 8px;text-decoration:none;font-size:14px;transition:top .15s}
.skip-link:focus{top:0}

/* Active pills */
.pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.ap{background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.25);border-radius:20px;padding:3px 9px;font-size:11px;color:var(--acc);display:flex;align-items:center;gap:4px}
.ap.dp{background:rgba(59,130,246,.09);border-color:rgba(59,130,246,.3);color:var(--blu)}
.ax{cursor:pointer;opacity:.55;font-size:12px;line-height:1;transition:opacity .15s}
.ax:hover{opacity:1}

/* ════ TABS ════ */
.tabs-bar{background:var(--surf);border-bottom:1px solid var(--brd);display:flex;padding:0 14px;overflow-x:auto;scrollbar-width:none;position:sticky;z-index:190}

.tabs-bar::-webkit-scrollbar{display:none}
.tab{font-size:13px;font-weight:500;color:var(--mut);padding:11px 14px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s;user-select:none}
.tab.on{color:var(--acc);border-bottom-color:var(--acc)}

/* ════ PAGES ════ */
.page{display:none}.page.on{display:block}
.wrap{max-width:1100px;margin:0 auto;padding:14px 14px}

/* ════ KPI ROW ════ */
.kpi-row{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:10px}
@media(min-width:520px){.kpi-row{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--card);border:1px solid var(--brd);border-radius:var(--rad);padding:12px 14px;position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:var(--rad) var(--rad) 0 0}
.kpi.a::before{background:var(--acc)}.kpi.b::before{background:var(--blu)}
.kpi.g::before{background:var(--grn)}.kpi.p::before{background:var(--pur)}
.kpi-lbl{font-size:9px;font-weight:500;color:var(--mut);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px}
.kpi-val{font-family:'Syne',sans-serif;font-size:22px;font-weight:700;letter-spacing:-1px;line-height:1}
.kpi.a .kpi-val{color:var(--acc)}.kpi.b .kpi-val{color:var(--blu)}
.kpi.g .kpi-val{color:var(--grn)}.kpi.p .kpi-val{color:var(--pur)}
.kpi.c::before{background:var(--tea)}.kpi.c .kpi-val{color:var(--tea)}
.kpi-sub{margin-top:7px;font-size:11px;line-height:1.35;color:var(--mut);min-height:28px}
.kpi-val.sm{font-size:18px;line-height:1.15;letter-spacing:-.6px}
.kpi.delta.positive::before{background:var(--grn)}.kpi.delta.positive .kpi-val,.kpi.delta.positive .kpi-sub{color:var(--grn)}
.kpi.delta.negative::before{background:var(--red)}.kpi.delta.negative .kpi-val,.kpi.delta.negative .kpi-sub{color:var(--red)}
.kpi.delta.neutral::before{background:var(--tea)}.kpi.delta.neutral .kpi-val{color:var(--tea)}
.proj-stats-row{grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.proj-stats-row{grid-template-columns:repeat(3,1fr)}}

.proj-hero-card{padding:14px 16px;margin-bottom:10px}
.proj-hero-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.proj-hero-title{font-family:'Syne',sans-serif;font-size:22px;font-weight:800;letter-spacing:-.8px;line-height:1.05;color:var(--tea);margin-top:3px}
.proj-hero-sub{margin-top:5px;font-size:11px;line-height:1.4;color:var(--mut)}
.proj-hero-pill{background:rgba(20,184,166,.08);border:1px solid rgba(20,184,166,.22);border-radius:999px;padding:6px 10px;font-size:10px;color:var(--tea);white-space:nowrap}
.proj-hero-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:8px}
@media(min-width:640px){.proj-hero-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.proj-hero-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.proj-hero-item{position:relative;background:rgba(13,15,24,.22);border:1px solid var(--brd);border-radius:12px;padding:12px 12px 10px;overflow:hidden;min-height:92px}
.proj-hero-item::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--tea)}
.proj-hero-item .proj-hero-lbl{font-size:9px;font-weight:500;color:var(--mut);text-transform:uppercase;letter-spacing:.8px;margin-bottom:5px}
.proj-hero-item .proj-hero-val{font-family:'Syne',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.7px;line-height:1.05;color:var(--tea)}
.proj-hero-item .proj-hero-val.sm{font-size:16px;letter-spacing:-.35px}
.proj-hero-subitem{margin-top:8px;font-size:11px;line-height:1.35;color:var(--mut);min-height:30px}
.proj-hero-item.accent::before{background:var(--acc)}
.proj-hero-item.accent .proj-hero-val{color:var(--acc)}
.proj-hero-item.blu::before{background:var(--blu)}
.proj-hero-item.blu .proj-hero-val{color:var(--blu)}
.proj-hero-item.tea::before{background:var(--tea)}
.proj-hero-item.tea .proj-hero-val{color:var(--tea)}
.proj-hero-item.positive::before{background:var(--grn)}
.proj-hero-item.positive .proj-hero-val,.proj-hero-item.positive .proj-hero-subitem{color:var(--grn)}
.proj-hero-item.negative::before{background:var(--red)}
.proj-hero-item.negative .proj-hero-val,.proj-hero-item.negative .proj-hero-subitem{color:var(--red)}
.proj-hero-item.neutral::before{background:var(--tea)}
.proj-hero-item.neutral .proj-hero-val{color:var(--tea)}

/* Grupo KPI strip */
.grupo-strip-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:var(--mut);font-weight:500;margin-bottom:6px}
.grupo-strip{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin-bottom:10px}
.grupo-strip::-webkit-scrollbar{display:none}
.gk{background:var(--card);border:1px solid var(--brd);border-radius:10px;padding:10px 13px;flex-shrink:0;min-width:120px;position:relative;overflow:hidden;cursor:default}
.gk-name{font-size:9px;text-transform:uppercase;letter-spacing:.6px;font-weight:500;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px}
.gk-val{font-family:'Syne',sans-serif;font-size:18px;font-weight:700;letter-spacing:-.5px}
.gk-pct{font-size:9px;margin-top:2px;opacity:.7}
.gk-bar{position:absolute;bottom:0;left:0;height:2px;opacity:.5;transition:width .5s}
.gk.clickable{cursor:pointer;transition:transform .15s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;font:inherit;text-align:left}
.gk.clickable:hover{transform:translateY(-1px)}
.gk.clickable.active{border-color:rgba(245,158,11,.5)!important;box-shadow:0 0 0 1px rgba(245,158,11,.18) inset,0 8px 20px rgba(0,0,0,.18)}
.gk.clickable.active .gk-bar{height:3px;opacity:.95}
.grupo-strip-hint{margin:-2px 0 10px;font-size:11px;line-height:1.45;color:var(--mut)}

/* ════ CARD ════ */
.card{background:var(--card);border:1px solid var(--brd);border-radius:var(--rad);margin-bottom:10px}
.ch{padding:10px 14px;border-bottom:1px solid var(--brd);display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.ct{font-family:'Syne',sans-serif;font-size:10px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.7px}
.cbadge{background:var(--surf);border:1px solid var(--brd);border-radius:20px;padding:2px 9px;font-size:10px;color:var(--mut)}

/* ════ TABLE ════ */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:560px}
thead th{padding:8px 11px;font-size:9px;font-weight:500;color:var(--mut);text-transform:uppercase;letter-spacing:.7px;text-align:left;background:var(--surf);border-bottom:1px solid var(--brd);white-space:nowrap}
tbody tr{border-bottom:1px solid rgba(38,43,61,.45);transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:rgba(245,158,11,.035)}
td{padding:9px 11px;font-size:12px}
th.r,td.r{text-align:right}
td.num{font-family:'Syne',sans-serif;font-size:12px;font-weight:600;color:var(--acc)}
.snote{padding:10px 14px;font-size:11px;color:var(--mut);border-top:1px solid var(--brd);text-align:center;display:none;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.empty{padding:40px 20px;text-align:center;color:var(--mut)}
.eico{font-size:30px;margin-bottom:8px}
.empty p{font-size:12px}

/* ════ ACUMULADOS ════ */
.acum-grid{display:grid;gap:10px}
@media(min-width:600px){.acum-grid{grid-template-columns:1fr 1fr}}
.acum-table th:first-child{min-width:120px}
.acum-rank{font-family:'Syne',sans-serif;font-size:10px;color:var(--mut);width:20px}
.acum-bar-cell{width:90px}
.mini-bar-track{height:5px;background:var(--brd);border-radius:3px;overflow:hidden;width:100%}
.mini-bar{height:100%;border-radius:3px;transition:width .4s}

/* ════ CHARTS ════ */
.charts-grid{display:grid;gap:10px}
@media(min-width:680px){.charts-grid{grid-template-columns:1fr 1fr}}

/* Horizontal bars */
.hbars{padding:12px 14px}
.hb-row{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:11px}
.hb-row:last-child{margin-bottom:0}
.hb-name{width:100px;flex-shrink:0;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.hb-track{flex:1;height:7px;background:var(--brd);border-radius:4px;overflow:hidden}
.hb-fill{height:100%;border-radius:4px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.hb-val{min-width:44px;text-align:right;font-family:'Syne',sans-serif;font-size:10px;font-weight:600}

/* Donut */
.donut-wrap{display:flex;align-items:center;gap:14px;padding:12px 14px;flex-wrap:wrap}
.donut-svg{flex-shrink:0;width:110px;height:110px}
.dlegend{display:flex;flex-direction:column;gap:5px;flex:1;min-width:90px}
.dl{display:flex;align-items:center;gap:6px;font-size:11px}
.dl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dl-name{color:var(--mut);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
.dl-val{font-family:'Syne',sans-serif;font-size:10px;font-weight:600}

/* Line chart */
.lc-wrap{padding:10px 14px 14px;overflow-x:auto}
.lc-svg{overflow:visible;min-width:300px}
.lc-grid{stroke:var(--brd);stroke-width:1}
.lc-lbl{font-size:9px;fill:var(--mut);font-family:'DM Sans',sans-serif}
.lc-area{opacity:.2}
.lc-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.chart-empty{padding:40px 20px;text-align:center;color:var(--mut);font-size:12px}

/* ════ OVERLAY ════ */
.overlay{position:fixed;inset:0;background:rgba(13,15,24,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999;gap:12px;transition:opacity .3s}
.overlay.h{opacity:0;pointer-events:none}
.spin{width:36px;height:36px;border:3px solid var(--brd);border-top-color:var(--acc);border-radius:50%;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.ovtxt{font-family:'Syne',sans-serif;font-size:11px;color:var(--mut);letter-spacing:1.5px}

/* ════ ERROR ════ */
.ebar{background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.2);border-radius:10px;padding:10px 14px;margin-bottom:10px;gap:10px;align-items:flex-start;display:none}
.ebar.v{display:flex}
.ebar-copy{flex:1;min-width:0}
.ebar-actions{display:flex;align-items:center;justify-content:flex-end}
.etit{font-family:'Syne',sans-serif;font-size:12px;color:var(--red);font-weight:700;margin-bottom:2px}
.emsg{font-size:11px;color:#fca5a5;line-height:1.5}
@media(max-width:640px){.ebar{flex-wrap:wrap}.ebar-actions{width:100%;justify-content:flex-start}}

/* ════ COMPARAR ════ */
.cmp-sel-row{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.cmp-sel-row select{flex:1;min-width:180px}
.btn-add{background:var(--acc);color:#000;border:none;border-radius:9px;padding:8px 16px;font-family:'Syne',sans-serif;font-weight:700;font-size:12px;cursor:pointer;transition:opacity .2s;white-space:nowrap}
.btn-add:hover{opacity:.85}.btn-add:disabled{opacity:.3;cursor:not-allowed}
.cmp-g{display:grid;gap:10px}
@media(min-width:560px){.cmp-g{grid-template-columns:1fr 1fr}}
.cc{background:var(--card);border:1px solid var(--brd);border-radius:var(--rad);overflow:hidden}
.cc.top{border-color:var(--acc)}
.cc-head{padding:10px 12px;border-bottom:1px solid var(--brd);display:flex;align-items:center;gap:8px}
.cc-name{font-family:'Syne',sans-serif;font-size:12px;font-weight:700;flex:1;line-height:1.3}
.btn-rm{background:none;border:none;color:var(--mut);font-size:15px;cursor:pointer;padding:2px 5px;border-radius:5px;transition:color .15s}
.btn-rm:hover{color:var(--red)}
.cc-kpis{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--brd)}
.ck{padding:9px 6px;text-align:center;border-right:1px solid var(--brd)}
.ck:last-child{border-right:none}
.ck-lbl{font-size:8px;text-transform:uppercase;letter-spacing:.6px;color:var(--mut);margin-bottom:2px}
.ck-v{font-family:'Syne',sans-serif;font-size:15px;font-weight:700}
.ck-v.a{color:var(--acc)}.ck-v.b{color:var(--blu)}.ck-v.g{color:var(--grn)}
.cc-rows{padding:8px 12px}
.cc-r{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px solid rgba(38,43,61,.4);font-size:10px}
.cc-r:last-child{border-bottom:none}
.cc-rn{flex:1;color:var(--txt);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-rt{width:44px;height:4px;background:var(--brd);border-radius:2px;overflow:hidden;flex-shrink:0}
.cc-rb{height:100%;border-radius:2px;background:var(--acc)}
.cc-rv{font-family:'Syne',sans-serif;font-size:9px;font-weight:600;color:var(--acc);min-width:32px;text-align:right;flex-shrink:0}
.cmp-empty{padding:40px;text-align:center;color:var(--mut);font-size:12px}

/* ════ PROYECCIÓN ════ */
.proj-card{margin-bottom:12px}
.proj-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px}
.proj-field{display:grid;gap:6px}
.proj-field span{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--mut);font-weight:500}
.proj-field input{width:100%;background:var(--card);border:1px solid var(--brd);border-radius:10px;color:var(--txt);font-family:'DM Sans',sans-serif;font-size:13px;padding:10px 12px}
.proj-field input:focus{outline:none;border-color:var(--acc)}
.proj-actions{display:flex;align-items:flex-end;justify-content:flex-start}
.proj-note{padding:0 14px 14px;font-size:12px;line-height:1.6;color:var(--mut)}
.proj-note.ok{color:#fcd34d}
.proj-note.err{color:#fca5a5}
.proj-note.pos{color:#86efac}
.proj-note.neg{color:#fca5a5}
.proj-note.neutral,.proj-note.info{color:#93c5fd}
.proj-note strong{color:var(--txt)}
.proj-empty{padding:36px 20px;text-align:center;color:var(--mut);font-size:12px}
@media(max-width:700px){
  .proj-controls{grid-template-columns:1fr}
  .proj-actions{justify-content:flex-start}
}


html, body {
  min-width: 320px;
}

body {
  line-height: 1.45;
}

button,
input,
select {
  font-family: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
.search-chip:focus-visible {
  outline: 2px solid rgba(245,158,11,.85);
  outline-offset: 2px;
}

.pill-status {
  position: relative;
}

.tab {
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

.tab:focus-visible {
  background: rgba(245,158,11,.08);
}

.page[hidden] {
  display: none !important;
}

.search-wrap.is-open .search-box {
  border-color: rgba(245,158,11,.55);
  box-shadow: 0 0 0 3px rgba(245,158,11,.12);
}

.search-box {
  transition: border-color .18s ease, box-shadow .18s ease;
}

.search-dd-item.active,
.search-dd-item[aria-selected="true"] {
  background: rgba(245,158,11,.14);
}

.search-dd-item:focus-visible {
  outline: none;
  background: rgba(245,158,11,.14);
}

.search-dd[role="listbox"] {
  scroll-padding-top: 44px;
}

.pills:empty {
  display: none;
}

.tw {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 12px;
  scrollbar-width: thin;
  position: relative;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: none;
}

tbody tr:nth-child(even) {
  background: rgba(255,255,255,.012);
}

tbody tr:hover {
  background: rgba(245,158,11,.045);
}

.table-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.table-note-main {
  color: var(--mut);
}

.table-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.table-action-btn {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: 8px;
  color: var(--txt);
  font-size: 11px;
  padding: 6px 12px;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, color .12s ease, background .12s ease;
}

.table-action-btn:hover {
  border-color: rgba(245,158,11,.45);
  color: var(--acc);
  transform: translateY(-1px);
}

.table-action-btn:disabled {
  opacity: .55;
  cursor: wait;
  transform: none;
}

.table-action-btn--accent {
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.28);
  color: var(--acc);
}

.auth-overlay{position:fixed;inset:0;background:rgba(7,10,18,.92);backdrop-filter: none;z-index:1200;display:none;align-items:center;justify-content:center;padding:18px}
.auth-overlay.open{display:flex}
.auth-card{width:min(420px,100%);background:var(--card);border:1px solid var(--brd);border-radius:18px;padding:22px;box-shadow:0 18px 60px rgba(0,0,0,.35)}
.auth-title{font-family:'Syne',sans-serif;font-size:20px;font-weight:700;letter-spacing:-.4px;margin-bottom:6px}
.auth-sub{font-size:12px;color:var(--mut);line-height:1.6;margin-bottom:16px}
.auth-form{display:grid;gap:12px}
.auth-field{display:grid;gap:6px}
.auth-field label{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.7px}
.auth-field input{width:100%;background:var(--surf);color:var(--txt);border:1px solid var(--brd);border-radius:12px;padding:11px 12px;font-size:13px;outline:none}
.auth-field input:focus{border-color:rgba(245,158,11,.45);box-shadow:0 0 0 3px rgba(245,158,11,.12)}
.auth-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:4px}
.auth-btn{border:none;background:var(--acc);color:#111827;border-radius:12px;padding:11px 16px;font-family:'Syne',sans-serif;font-weight:700;cursor:pointer;min-width:140px}
.auth-btn[disabled]{opacity:.6;cursor:wait}
.auth-msg{min-height:18px;font-size:11px;color:var(--mut)}
.auth-msg.err{color:#fca5a5}
.auth-msg.ok{color:#86efac}
.auth-user-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--brd);border-radius:999px;padding:6px 10px;background:var(--card);font-size:11px;color:var(--mut)}
.auth-user-pill strong{color:var(--txt);font-weight:600}
.auth-logout{border:none;background:rgba(245,158,11,.12);color:var(--acc);border-radius:999px;padding:5px 10px;font-size:11px;font-weight:700;cursor:pointer}

@media(max-width: 860px) {
  .tabs-bar {
    padding-inline: 8px;
  }

  .tab {
    padding-inline: 12px;
  }

  .tw {
    margin-inline: -2px;
  }
}


.app-update-toast{position:fixed;right:16px;bottom:calc(env(safe-area-inset-bottom,0px)+16px);z-index:1150;display:flex;align-items:flex-end;gap:12px;max-width:min(420px,calc(100vw - 24px));background:rgba(13,15,24,.96);border:1px solid rgba(245,158,11,.26);border-radius:16px;padding:12px 14px;box-shadow:0 18px 48px rgba(0,0,0,.38)}
.app-update-toast[hidden]{display:none!important}
.app-update-toast__body{display:grid;gap:4px;flex:1;min-width:0}
.app-update-toast__title{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;color:var(--acc);letter-spacing:-.3px}
.app-update-toast__text{font-size:11px;line-height:1.5;color:var(--mut)}
.app-update-toast__text span{color:var(--txt);font-weight:600}
.app-update-toast__actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:640px){.app-update-toast{left:12px;right:12px;bottom:12px;flex-direction:column;align-items:stretch}.app-update-toast__actions{justify-content:stretch}.app-update-toast__actions .table-action-btn{flex:1}}

/* ════ UX FASE 4 · HERO / MOBILE / STORY CARDS ════ */
.page-hero-shell{background:linear-gradient(180deg,rgba(21,24,34,.98),rgba(21,24,34,.84));border-bottom:1px solid var(--brd)}
.page-hero{max-width:1100px;margin:0 auto;padding:16px 14px 14px;display:grid;gap:12px;align-items:end}
@media(min-width:880px){.page-hero{grid-template-columns:minmax(0,1fr) auto;gap:18px}}
.page-hero-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--acc);font-weight:700;margin-bottom:6px}
.page-hero-title{font-family:'Syne',sans-serif;font-size:28px;line-height:1.02;letter-spacing:-1px}
.page-hero-copy{margin-top:8px;max-width:68ch;color:#b7becc;font-size:13px;line-height:1.6}
.page-hero-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hero-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:8px 12px;border-radius:999px;border:1px solid var(--brd);background:rgba(28,32,48,.9);color:var(--txt);font-size:11px;line-height:1.35}
.hero-chip--soft{color:var(--tea);border-color:rgba(20,184,166,.24);background:rgba(20,184,166,.08)}
.hero-chip--action{cursor:pointer;color:var(--acc);border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.08)}
.hero-chip--action:hover{border-color:rgba(245,158,11,.46)}
.story-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:10px;margin-bottom:12px}
@media(min-width:640px){.story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1020px){.story-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.story-card{position:relative;overflow:hidden;padding:14px;border-radius:16px;border:1px solid var(--brd);background:linear-gradient(180deg,rgba(28,32,48,.98),rgba(18,21,32,.96));min-height:148px;display:grid;gap:10px}
.story-card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--acc)}
.story-card.accent::before{background:var(--acc)}
.story-card.blu::before{background:var(--blu)}
.story-card.grn::before{background:var(--grn)}
.story-card.tea::before{background:var(--tea)}
.story-card.pur::before{background:var(--pur)}
.story-card .story-label{font-size:10px;text-transform:uppercase;letter-spacing:.85px;color:var(--mut);font-weight:600}
.story-card .story-title{font-family:'Syne',sans-serif;font-size:18px;line-height:1.08;letter-spacing:-.6px;color:var(--txt)}
.story-card .story-value{font-family:'Syne',sans-serif;font-size:22px;line-height:1;color:var(--acc);letter-spacing:-.8px}
.story-card.blu .story-value{color:var(--blu)}
.story-card.grn .story-value{color:var(--grn)}
.story-card.tea .story-value{color:var(--tea)}
.story-card.pur .story-value{color:var(--pur)}
.story-card .story-meta{font-size:12px;line-height:1.55;color:#c0c6d4}
.story-progress{display:grid;gap:6px}
.story-progress-line{height:6px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden}
.story-progress-bar{height:100%;border-radius:999px;background:var(--acc);min-width:6px}
.story-card.blu .story-progress-bar{background:var(--blu)}
.story-card.grn .story-progress-bar{background:var(--grn)}
.story-card.tea .story-progress-bar{background:var(--tea)}
.story-card.pur .story-progress-bar{background:var(--pur)}
.story-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--mut);font-size:11px}
.mobile-dock{display:none}
@media(max-width:860px){
  body{padding-bottom:calc(env(safe-area-inset-bottom,0px)+92px)}
  .page-hero{padding-top:14px}
  .page-hero-title{font-size:24px}
  .page-hero-copy{font-size:12px}
  .mobile-dock{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px)+10px);z-index:420;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:8px;border:1px solid rgba(245,158,11,.18);border-radius:18px;background:rgba(13,15,24,.94);backdrop-filter: none;box-shadow:0 18px 40px rgba(0,0,0,.28)}
  .mobile-dock-btn{min-height:44px;border:none;border-radius:12px;background:rgba(28,32,48,.96);color:var(--txt);font-size:12px;font-weight:600}
  .mobile-dock-btn:hover{background:rgba(245,158,11,.12);color:var(--acc)}
}
@media(max-width:760px){
  .fp-inner{padding-bottom:12px}
  .page-hero-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .hero-chip,.hero-chip--action{justify-content:center;text-align:center}
  .hero-chip--soft{grid-column:1/-1}
  .tw{overflow:visible}
  table.responsive-stack{min-width:0}
  table.responsive-stack thead{display:none}
  table.responsive-stack,table.responsive-stack tbody,table.responsive-stack tr,table.responsive-stack td{display:block;width:100%}
  table.responsive-stack tbody{display:grid;gap:10px;padding:10px}
  table.responsive-stack tbody tr{background:rgba(255,255,255,.012);border:1px solid rgba(38,43,61,.65);border-radius:14px;padding:8px 10px;overflow:hidden}
  table.responsive-stack td{padding:8px 0;border-bottom:1px dashed rgba(107,114,128,.24);display:flex;justify-content:space-between;gap:12px;text-align:right}
  table.responsive-stack td:last-child{border-bottom:none}
  table.responsive-stack td::before{content:attr(data-label);text-align:left;color:var(--mut);font-size:10px;text-transform:uppercase;letter-spacing:.8px;font-weight:600;white-space:nowrap}
  table.responsive-stack td.r,table.responsive-stack td.num{text-align:right}
  table.responsive-stack tr.row-total td{display:block;text-align:left;border-bottom:none;padding:6px 0}
  table.responsive-stack tr.row-total td::before{display:none}
  .responsive-stack--detail tbody,.responsive-stack--projection tbody,.responsive-stack--acum tbody{padding:10px}
  .responsive-stack--acum td:last-child{padding-bottom:2px}
  .responsive-stack--acum .acum-bar-cell{width:100%}
  .responsive-stack--acum .mini-bar-track{height:8px}
  .responsive-stack--acum td[data-label="Dist."]{display:block;text-align:left}
  .responsive-stack--acum td[data-label="Dist."]::before{display:block;margin-bottom:6px}
  .charts-grid,.acum-grid{grid-template-columns:1fr!important}
  .proj-hero-grid{grid-template-columns:1fr!important}
  .proj-hero-item{min-height:0}
  .grupo-strip,.search-chips,.pills{scrollbar-width:none}
}

/* ════ UX FASE 5 · DETAIL EXPLORER / DAILY COMPARE ════ */
.ch-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.btn-ghost{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.18);color:var(--acc)}
.btn-ghost:hover{border-color:rgba(245,158,11,.34);background:rgba(245,158,11,.14)}
.btn-ghost[disabled]{opacity:.45;cursor:not-allowed}
.detail-subhead{font-size:12px;color:#c0c6d4;line-height:1.5}
.detail-chart-note{padding:0 14px 12px;color:var(--mut);font-size:12px;line-height:1.55}
.detail-toolbar{display:grid;gap:10px;padding:12px 14px;border-bottom:1px solid var(--brd);background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008))}
.detail-toolbar-main{display:grid;grid-template-columns:minmax(260px,1.45fr) repeat(3,minmax(128px,.58fr)) auto;gap:12px;align-items:end}
.detail-toolbar-main--compact{grid-template-columns:minmax(260px,1.5fr) repeat(3,minmax(140px,.62fr)) auto}
.detail-tool-field{display:grid;gap:6px;min-width:0}
.detail-tool-field label{font-size:9px;text-transform:uppercase;letter-spacing:.72px;color:var(--mut);font-weight:700;line-height:1.3;white-space:normal;overflow-wrap:anywhere;max-width:100%}
.detail-tool-field input,.detail-tool-field select{min-height:36px;font-family:'DM Sans',sans-serif;font-size:12px;line-height:1.2;padding:8px 10px}
.detail-tool-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap;align-self:end}
.detail-tool-actions--compact{justify-content:flex-start}
.detail-tool-actions--advanced{justify-content:flex-start}
.detail-tool-btn{min-height:36px;border:1px solid var(--brd);border-radius:10px;background:var(--card);color:var(--txt);padding:0 12px;font-size:12px;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease}
.detail-tool-btn:hover{border-color:rgba(245,158,11,.3);color:var(--acc)}
.detail-tool-btn[disabled]{opacity:.45;cursor:not-allowed}
.detail-tool-btn--accent{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.26);color:var(--acc)}
.detail-toolbar-secondary{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,.9fr);gap:12px;align-items:start}
.detail-toolbar-presets,.detail-toolbar-favorites,.detail-toolbar-advanced{display:grid;gap:8px;padding:10px 12px;border:1px solid rgba(148,163,184,.12);border-radius:14px;background:rgba(15,23,42,.32)}
.detail-toolbar-section-title{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--mut);font-weight:700}
.detail-preset-row{display:flex;gap:8px;flex-wrap:wrap}
.detail-preset-btn{border:1px solid rgba(148,163,184,.16);border-radius:999px;background:rgba(30,41,59,.55);color:var(--txt);font-size:11px;padding:7px 10px;cursor:pointer;transition:all .18s ease}
.detail-preset-btn:hover,.detail-preset-btn.is-active{border-color:rgba(245,158,11,.32);background:rgba(245,158,11,.12);color:var(--acc)}
.detail-favorite-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.detail-toolbar-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.detail-toolbar-meta--context{padding:10px 12px;border:1px solid rgba(148,163,184,.1);border-radius:14px;background:rgba(17,24,39,.28)}
.detail-toolbar-pills{display:flex;gap:8px;flex-wrap:wrap}
.detail-toolbar-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;border:1px solid var(--brd);background:rgba(28,32,48,.8);font-size:11px;color:var(--mut)}
.detail-toolbar-pill strong{color:var(--txt)}
.detail-toolbar-tip{font-size:10.5px;color:var(--mut);line-height:1.45}
.detail-toolbar-filters-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.detail-filter-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;border:1px solid rgba(59,130,246,.24);background:rgba(59,130,246,.1);color:#bfdbfe;font-size:11px;cursor:pointer}
.detail-filter-chip:hover{border-color:rgba(245,158,11,.28);color:#fde68a}
.detail-filter-chip--ghost{cursor:default;border-style:dashed;background:rgba(148,163,184,.06);color:var(--mut)}
.detail-toolbar-advanced{grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end}
.detail-toggle{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--txt);min-height:36px}
.detail-toggle input{accent-color:var(--acc)}
.detail-toggle--switch{padding:0 4px}
.detail-strip-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin:0 0 10px}
.detail-strip-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.detail-strip-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;border:1px solid rgba(245,158,11,.22);background:rgba(245,158,11,.08);font-size:11px;color:#fcd34d;white-space:nowrap}
.detail-search-preview{display:grid;gap:8px}
.detail-search-preview-head{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:11px;color:var(--mut)}
.detail-search-preview-count strong{color:var(--txt)}
.detail-search-preview-note{color:var(--mut)}
.detail-search-preview-list{display:grid;gap:8px}
.detail-search-preview-item{display:grid;gap:4px;padding:10px 12px;border-radius:12px;border:1px solid rgba(148,163,184,.16);background:rgba(15,23,42,.55)}
.detail-search-preview-item mark{background:rgba(245,158,11,.22);color:#fde68a;padding:0 2px;border-radius:4px}
.detail-search-preview-title{font-size:11px;font-weight:600;color:var(--txt)}
.detail-search-preview-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:10px;color:var(--mut)}
.detail-search-preview-meta span{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;background:rgba(148,163,184,.08);border:1px solid rgba(148,163,184,.14)}
.detail-search-preview-empty{padding:10px 12px;border-radius:12px;border:1px dashed rgba(148,163,184,.22);background:rgba(15,23,42,.35);font-size:11px;color:var(--mut)}
.detail-toolbar-main .detail-tool-field--wide{grid-column:auto / span 1}
.detail-toolbar-shell{display:grid;gap:10px}
.detail-toolbar-sheet{display:grid;gap:10px}
.detail-toolbar-sheetbackdrop{display:none}
.detail-toolbar-sheet__head{display:none}
.detail-exec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.detail-exec-card{padding:11px 12px;border:1px solid rgba(148,163,184,.14);border-radius:14px;background:rgba(15,23,42,.38)}
.detail-exec-card__eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--mut);font-weight:700;margin-bottom:6px}
.detail-exec-card__body{display:grid;gap:6px;font-size:11px;color:var(--txt);line-height:1.5}
.detail-insight-stack{display:grid;gap:6px}
.detail-compare-row{display:grid;gap:6px}
.trend-chip{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid rgba(148,163,184,.18);font-weight:700}
.trend-chip.positive{color:var(--grn);background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.24)}
.trend-chip.negative{color:var(--red);background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.24)}
.trend-chip.neutral{color:var(--txt);background:rgba(148,163,184,.10);border-color:rgba(148,163,184,.18)}
.daily-compare-wrap{padding:0 14px 14px}
.daily-compare-shell{display:grid;gap:12px}
.daily-compare-svg{width:100%;height:260px;display:block}
.daily-grid{stroke:rgba(107,114,128,.18);stroke-width:1}
.daily-axis{stroke:rgba(107,114,128,.22);stroke-width:1}
.daily-axis-label,.daily-grid-label{fill:#9ca3af;font-size:10px;font-family:'DM Sans',sans-serif}
.daily-line{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.daily-line.current{stroke-width:3.2}
.daily-dot{stroke:var(--card);stroke-width:1.5}
.daily-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.daily-legend-item{display:grid;gap:8px;padding:11px 12px;border-radius:14px;border:1px solid var(--brd);background:rgba(255,255,255,.018)}
.daily-legend-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.daily-legend-name{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt);font-weight:600}
.daily-legend-dot{width:10px;height:10px;border-radius:999px;flex-shrink:0}
.daily-legend-kpi{font-family:'Syne',sans-serif;font-size:20px;letter-spacing:-.5px}
.daily-legend-sub{font-size:11px;color:var(--mut);line-height:1.4}
.detail-view-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(59,130,246,.26);background:rgba(59,130,246,.08);font-size:11px;color:#bfdbfe}
.detail-toolbar--subtle{background:linear-gradient(180deg,rgba(255,255,255,.014),rgba(255,255,255,.006))}
.acum-explorer-card{margin-bottom:14px}
.acum-mini-note{font-size:10.5px;color:var(--mut);line-height:1.45}

@media (max-width: 1260px){
  .detail-toolbar-main{grid-template-columns:minmax(0,1.15fr) repeat(3,minmax(0,1fr))}
  .detail-toolbar-main--compact{grid-template-columns:minmax(0,1.15fr) repeat(3,minmax(0,1fr))}
  .detail-tool-actions{grid-column:1/-1;justify-content:flex-start}
  .detail-toolbar-secondary{grid-template-columns:1fr}
  .detail-toolbar-advanced{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 1120px){
  .detail-toolbar-main,.detail-toolbar-main--compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-tool-actions{justify-content:flex-start}
  .detail-strip-head{align-items:flex-start}
  .detail-toolbar-advanced{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 760px){
  .detail-toolbar{padding:12px}
  .detail-toolbar-main,.detail-toolbar-main--compact,.detail-toolbar-advanced{grid-template-columns:1fr}
  .detail-toolbar-meta{align-items:flex-start}
  .detail-strip-head{flex-direction:column}
  .detail-strip-actions{justify-content:flex-start}
  .daily-compare-svg{height:230px}
  .daily-legend{grid-template-columns:1fr}
  .detail-chart-note{padding:0 12px 12px}
  .daily-compare-wrap{padding:0 12px 12px}
  .detail-favorite-row{grid-template-columns:1fr}
  .detail-exec-grid{grid-template-columns:1fr}
  .detail-toolbar-shell.is-sheet-open .detail-toolbar-sheetbackdrop{display:block;position:fixed;inset:0;background:rgba(7,10,18,.58);backdrop-filter: none;z-index:520}
  .detail-toolbar-shell.is-sheet-open .detail-toolbar-sheet{position:fixed;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom,0px)+10px);z-index:530;max-height:min(76vh,640px);overflow:auto;padding:14px;border:1px solid rgba(245,158,11,.18);border-radius:20px;background:rgba(13,15,24,.98);box-shadow:0 20px 48px rgba(0,0,0,.34)}
  .detail-toolbar-shell .detail-toolbar-sheet{display:none}
  .detail-toolbar-shell.is-sheet-open .detail-toolbar-sheet{display:grid}
  .detail-toolbar-shell .detail-toolbar-sheet__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
  .detail-toolbar-secondary{grid-template-columns:1fr}
  .detail-toolbar-advanced,.detail-toolbar-advanced--wide{grid-template-columns:1fr}
}

/* Resumen filtrado - explorer avanzado */
.detail-head{position:relative;vertical-align:top}
.detail-head-wrap{display:flex;align-items:center;justify-content:space-between;gap:6px;position:relative}
.detail-head-sort{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:0;cursor:pointer;min-width:0;text-align:left}
.detail-head-sort span:first-child{overflow:hidden;text-overflow:ellipsis}
.detail-head-sortstate{display:inline-flex;align-items:center;gap:4px;color:var(--acc);font-size:10px}
.detail-head-sortstate b{font-size:9px;color:#fde68a}
.detail-head-filter{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border:1px solid rgba(148,163,184,.18);border-radius:999px;background:rgba(17,24,39,.65);color:var(--mut);cursor:pointer;flex-shrink:0;padding:0 6px;font-size:10px}
.detail-head.is-sorted .detail-head-filter,.detail-head-filter:hover{border-color:rgba(245,158,11,.28);color:var(--acc)}
.detail-head.is-filtered .detail-head-filter{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3);color:#fde68a}
.detail-head-filtercount{font-size:10px;font-weight:700;line-height:1}
.detail-col-menu{--detail-col-menu-anchor:26px;position:absolute;top:calc(100% + 6px);right:0;min-width:220px;max-width:min(320px,calc(100vw - 24px));background:rgba(13,15,24,.98);border:1px solid rgba(148,163,184,.16);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.34);padding:10px;display:grid;gap:9px;z-index:80;overflow:visible;opacity:1;transform:translateY(0);transition:opacity .14s ease,transform .14s ease}
.detail-col-menu[data-floating-state="pending"]{opacity:0;pointer-events:none;transform:translateY(-4px)}
.detail-col-menu-layer{position:fixed;inset:0;z-index:620;pointer-events:none;overflow:visible}
.detail-col-menu-layer .detail-col-menu{pointer-events:auto}
.detail-col-menu::before{content:"";position:absolute;top:-7px;left:var(--detail-col-menu-anchor);width:14px;height:14px;background:rgba(13,15,24,.98);border-top:1px solid rgba(148,163,184,.16);border-left:1px solid rgba(148,163,184,.16);transform:translateX(-50%) rotate(45deg);border-top-left-radius:4px}
.detail-col-menu[data-placement="top"]::before{top:auto;bottom:-7px;transform:translateX(-50%) rotate(225deg)}
.detail-col-menu--left{left:0;right:auto}
.detail-col-menu--right{right:0;left:auto}
.detail-col-menu__head{font-size:11px;font-weight:700;color:var(--txt)}
.detail-col-menu__meta{font-size:10px;color:var(--mut)}
.detail-col-menu__actions,.detail-col-menu__footer{display:flex;flex-wrap:wrap;gap:6px}
.detail-col-menu__btn{border:1px solid rgba(148,163,184,.16);border-radius:999px;background:rgba(30,41,59,.6);color:var(--txt);font-size:10px;padding:6px 9px;cursor:pointer}
.detail-col-menu__btn:hover,.detail-col-menu__btn--accent{border-color:rgba(245,158,11,.28);color:var(--acc)}
.detail-col-menu__list{display:grid;gap:5px;max-height:var(--detail-col-menu-list-max-height,220px);overflow:auto;padding-right:2px}
.detail-col-menu__item{display:flex;align-items:flex-start;gap:8px;font-size:11px;color:var(--txt);padding:6px 4px;border-radius:8px}
.detail-col-menu__item:hover{background:rgba(148,163,184,.08)}
.detail-col-menu__item input{margin-top:2px}
.detail-col-menu__empty{font-size:11px;color:var(--mut);padding:8px 4px}
.detail-subtotal-row td,.detail-grandtotal-row td,.detail-summary-row td{font-weight:700}
.detail-subtotal-row td{background:rgba(59,130,246,.07);border-top:1px solid rgba(59,130,246,.18);border-bottom:1px solid rgba(59,130,246,.12)}
.detail-summary-row td{background:rgba(20,184,166,.09);border-top:1px solid rgba(20,184,166,.18);border-bottom:1px solid rgba(20,184,166,.12)}
.detail-grandtotal-row td{background:rgba(245,158,11,.10);border-top:1px solid rgba(245,158,11,.26)}
.detail-data-row--drill{cursor:pointer}
.detail-data-row--drill:hover td{background:rgba(245,158,11,.05)}
.detail-total-label{font-size:11px;letter-spacing:.2px}
.detail-total-value{font-family:'Syne',sans-serif;color:var(--txt)}
.detail-search-preview--compact{gap:6px}
.detail-search-preview-item--compact{padding:7px 9px;border-radius:10px;gap:3px}
.detail-search-preview-meta--compact{gap:5px;font-size:10px}
.detail-search-preview-meta--compact span{padding:3px 6px}
@media (max-width:760px){
  .detail-col-menu,.detail-col-menu--left,.detail-col-menu--right{left:0;right:auto;max-width:min(92vw,340px)}
  .detail-col-menu::before{left:var(--detail-col-menu-anchor)}
  .detail-head-wrap{gap:4px}
}


/* UX refinada · presets y filtros */
.detail-toolbar-pill--accent{border-color:rgba(245,158,11,.24);background:rgba(245,158,11,.08);color:#fde68a}
.detail-toolbar-presets--inline{margin-top:2px;background:rgba(15,23,42,.24)}
.detail-toolbar-presets__head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.detail-preset-row--rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(208px,1fr);overflow:auto;padding-bottom:2px;scroll-snap-type:x proximity}
.detail-preset-row--rail .detail-preset-btn{scroll-snap-align:start}
.detail-preset-btn{display:flex;align-items:flex-start;gap:10px;min-height:68px;border-radius:16px;padding:10px 12px;background:rgba(30,41,59,.52);border:1px solid rgba(148,163,184,.14);text-align:left}
.detail-preset-btn__icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.06);font-size:15px;flex-shrink:0}
.detail-preset-btn__body{display:grid;gap:3px;min-width:0}
.detail-preset-btn__title{font-size:11.5px;font-weight:700;color:var(--txt)}
.detail-preset-btn__hint{font-size:10px;line-height:1.35;color:var(--mut)}
.detail-preset-btn:hover,.detail-preset-btn.is-active{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.16)}
.detail-col-menu__searchwrap{padding:0 0 8px}
.detail-col-menu__search{width:100%;min-height:34px;background:rgba(15,23,42,.68);border:1px solid rgba(148,163,184,.16);border-radius:10px;color:var(--txt);font-family:'DM Sans',sans-serif;font-size:12px;padding:7px 10px}
.detail-col-menu__list{max-height:260px;overflow:auto;padding-right:2px}
.detail-col-menu__item[hidden]{display:none}
.detail-col-menu__footer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.detail-col-menu__btn--accent{border-color:rgba(245,158,11,.32);background:rgba(245,158,11,.12);color:var(--acc)}
@media (max-width: 900px){
  .detail-preset-row--rail{grid-auto-columns:minmax(184px,78vw)}
  .detail-col-menu__footer{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 760px){
  .detail-toolbar-presets__head{align-items:flex-start}
  .detail-preset-btn{min-height:64px;padding:10px}
  .detail-preset-btn__hint{font-size:9.5px}
}

/* ========================================================================
   UX refinement v21 · local filter menus, opaque surfaces, crisper controls
   ======================================================================== */
:root{
  --bg:#0c111b;
  --surf:#141b2a;
  --card:#1a2234;
  --card-solid:#0f1724;
  --brd:#2a3246;
  --txt:#edf1f7;
  --mut:#8b95a7;
  --txt-soft:#c0c7d6;
  --shadow-soft:0 10px 28px rgba(0,0,0,.18);
  --shadow-strong:0 22px 56px rgba(0,0,0,.34);
  --focus-ring:0 0 0 3px rgba(245,158,11,.18);
}

body{
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

button,input,select,textarea{font:inherit}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible{
  outline:none;
  border-color:rgba(245,158,11,.45)!important;
  box-shadow:var(--focus-ring);
}

.hdr,
.filter-panel,
.tabs-bar{
  background:rgba(20,27,42,.98);
}

.hdr{
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}

.filter-panel{
  box-shadow:0 10px 26px rgba(0,0,0,.10);
}

.logo{
  font-size:18px;
  letter-spacing:-.32px;
}

.pill-status{
  background:rgba(17,24,39,.94);
  border-color:rgba(148,163,184,.16);
  color:#a8b2c5;
}

.pbtn,
.btn-xs,
.table-action-btn,
.detail-tool-btn,
.mobile-dock-btn,
.auth-btn,
.auth-logout,
.detail-col-menu__btn,
.detail-head-filter{
  transition:transform .14s ease, border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease;
}

.pbtn,
.btn-xs{
  min-height:32px;
  background:linear-gradient(180deg,rgba(21,27,42,.96),rgba(15,21,33,.96));
  border-color:rgba(148,163,184,.16);
  color:#c7d0df;
}

.pbtn:hover,
.pbtn.on,
.btn-xs:hover,
.table-action-btn:hover,
.detail-tool-btn:hover,
.mobile-dock-btn:hover{
  transform:translateY(-1px);
}

.pbtn:hover,
.pbtn.on{
  background:linear-gradient(180deg,rgba(245,158,11,.18),rgba(245,158,11,.11));
  border-color:rgba(245,158,11,.42);
  color:#ffd48a;
  box-shadow:0 8px 18px rgba(245,158,11,.10);
}

.btn-xs:hover{
  border-color:rgba(245,158,11,.34);
  color:#ffd48a;
}

input[type=date],
select,
.search-box,
.auth-field input,
.proj-field input,
.hero-chip,
.detail-toolbar-pill,
.detail-strip-badge,
.detail-view-badge,
.detail-filter-chip,
.search-dd,
.detail-search-preview-item,
.detail-search-preview-empty,
.daily-legend-item,
.detail-exec-card{
  background:rgba(15,23,36,.96);
  border-color:rgba(148,163,184,.18);
}

input[type=date],
select{
  min-height:36px;
}

.search-box{
  min-height:38px;
}

.search-dd{
  background:#0f1724;
  box-shadow:var(--shadow-strong);
}

.search-dd-head{
  background:#121a29;
}

.tabs-bar{
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.tab{
  font-weight:600;
  color:#aab4c6;
}

.tab.on{
  color:#ffd48a;
}

.page-hero-shell{
  background:linear-gradient(180deg,rgba(20,27,42,.98),rgba(13,18,28,.94));
}

.page-hero-title{
  font-size:30px;
  letter-spacing:-1.1px;
}

.page-hero-copy{
  color:var(--txt-soft);
  line-height:1.62;
}

.hero-chip{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

.card{
  position:relative;
  overflow:visible;
  background:linear-gradient(180deg,rgba(26,34,52,.985),rgba(16,22,34,.985));
  box-shadow:var(--shadow-soft);
}

.kpi,
.story-card,
.proj-hero-item,
.detail-toolbar-presets,
.detail-toolbar-favorites,
.detail-toolbar-advanced,
.detail-toolbar-meta--context{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

.kpi,
.story-card,
.proj-hero-item,
.detail-toolbar-presets,
.detail-toolbar-favorites,
.detail-toolbar-advanced,
.detail-toolbar-meta--context,
.detail-search-preview-item,
.detail-exec-card,
.daily-legend-item{
  border-color:rgba(148,163,184,.16);
}

.detail-toolbar-presets,
.detail-toolbar-favorites,
.detail-toolbar-advanced{
  background:rgba(15,23,42,.46);
}

.detail-toolbar-meta--context{
  background:rgba(15,23,42,.42);
}

.detail-toolbar-pill{
  color:#c7d0df;
}

.detail-tool-btn,
.table-action-btn{
  min-height:36px;
  background:rgba(21,27,42,.96);
  border-color:rgba(148,163,184,.18);
  font-weight:600;
}

.table-action-btn--accent,
.detail-tool-btn--accent,
.detail-col-menu__btn--accent{
  background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.30);
  color:#ffd48a;
}

.tw{
  border-radius:14px;
  scrollbar-gutter:stable both-edges;
}

thead th{
  background:var(--card-solid);
  box-shadow:0 1px 0 rgba(42,50,70,.95), inset 0 -1px 0 rgba(255,255,255,.02);
  backdrop-filter:none;
}

tbody tr:nth-child(even){
  background:rgba(255,255,255,.018);
}

tbody tr:hover,
.detail-data-row--drill:hover td{
  background:rgba(245,158,11,.06);
}

.detail-head-filter{
  background:#121a29;
  border-color:rgba(148,163,184,.22);
  color:#bcc6d7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

.detail-head.is-filtered .detail-head-filter{
  background:rgba(245,158,11,.14);
  color:#ffe3a8;
}

.detail-col-menu-layer{
  position:absolute;
  inset:0;
  z-index:36;
  pointer-events:none;
  overflow:visible;
}

.detail-col-menu,
.detail-col-menu::before{
  background:#0f1724;
}

.detail-col-menu{
  border:1px solid rgba(148,163,184,.24);
  box-shadow:0 24px 60px rgba(0,0,0,.42);
  backdrop-filter:none;
}

.detail-col-menu__head{
  font-size:11.5px;
  color:#f2f5fb;
}

.detail-col-menu__meta,
.search-meta,
.detail-preset-btn__hint{
  color:#a5afc0;
}

.detail-col-menu__btn{
  min-height:32px;
  background:#152033;
  border-color:rgba(148,163,184,.18);
  color:#dbe3f2;
  font-weight:600;
}

.detail-col-menu__btn:hover,
.detail-col-menu__btn--accent{
  border-color:rgba(245,158,11,.30);
  color:#ffd48a;
}

.detail-col-menu__search{
  background:#111b2c;
  border-color:rgba(148,163,184,.18);
}

.detail-col-menu__search::placeholder{
  color:#7f8a9d;
}

.detail-col-menu__item{
  border-radius:10px;
}

.detail-col-menu__item:hover,
.detail-col-menu__item:focus-within{
  background:rgba(148,163,184,.12);
}

.detail-preset-btn{
  background:linear-gradient(180deg,rgba(26,34,52,.94),rgba(16,22,34,.94));
  border-color:rgba(148,163,184,.16);
}

.detail-preset-btn:hover,
.detail-preset-btn.is-active{
  border-color:rgba(245,158,11,.24);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

.detail-preset-btn__icon{
  background:rgba(255,255,255,.08);
}

.mobile-dock{
  background:rgba(13,15,24,.98);
}

@media (max-width:760px){
  .page-hero-title{font-size:24px}
  .detail-col-menu-layer{inset:0 -2px auto -2px}
}

/* --- v22 plan mejoras overrides --- */
@keyframes skeleton-pulse{
  0%,100%{opacity:.55}
  50%{opacity:.2}
}
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
@keyframes page-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes toast-in{
  from{opacity:0;transform:translate(-50%,10px)}
  to{opacity:1;transform:translate(-50%,0)}
}
@keyframes toast-out{
  to{opacity:0;transform:translate(-50%,12px)}
}

.page.on{animation:page-in .18s ease}
.kpi--loading .kpi-val{color:var(--mut)!important;animation:skeleton-pulse 1.4s ease infinite}

.pbtn.on{
  background:rgba(245,158,11,.20)!important;
  border-color:rgba(245,158,11,.65)!important;
  color:var(--acc)!important;
  font-weight:700;
  box-shadow:0 0 0 1px rgba(245,158,11,.22) inset;
}

#heroPeriod{
  color:var(--blu);
  border-color:rgba(59,130,246,.30);
  background:rgba(59,130,246,.09);
}

.skel{
  display:inline-block;
  height:11px;
  border-radius:4px;
  background:linear-gradient(90deg,var(--brd) 25%,rgba(255,255,255,.06) 50%,var(--brd) 75%);
  background-size:200% 100%;
  animation:shimmer 1.6s ease infinite;
  width:80%;
}
.skel--wide{width:95%}
.skeleton-row td{padding-top:12px;padding-bottom:12px}

.cbadge.is-updating{
  animation:skeleton-pulse 1.2s ease infinite;
  opacity:.75;
}

.ux-scroll-top{
  position:fixed;
  right:24px;
  bottom:92px;
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(15,23,36,.96);
  color:var(--txt);
  font-size:18px;
  font-weight:800;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  z-index:80;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease,border-color .18s ease;
}
.ux-scroll-top.visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.ux-scroll-top:hover{
  border-color:rgba(245,158,11,.4);
  color:var(--acc);
}

.ux-toast{
  position:fixed;
  bottom:80px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(21,24,34,.96);
  border:1px solid var(--brd);
  border-radius:999px;
  padding:8px 18px;
  font-size:12px;
  z-index:800;
  animation:toast-in .2s ease,toast-out .3s ease 1.7s forwards;
  box-shadow:0 14px 30px rgba(0,0,0,.24);
}

.detail-copy-cell{
  border:none;
  background:transparent;
  color:inherit;
  font:inherit;
  padding:0;
  margin:0;
  cursor:copy;
}
.detail-copy-cell:hover{
  color:var(--acc);
}

.sel-lbl{font-size:10px;letter-spacing:.5px}
select:hover{border-color:rgba(245,158,11,.35)}
tbody tr:hover{background:rgba(245,158,11,.065)}

@media(max-width:860px){
  .mobile-dock-btn{
    min-height:48px;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* --- v23 ux/ui visual search + table readability overrides --- */
.search-input,
.detail-tool-field input,
.detail-tool-field select,
.detail-col-menu__search,
.detail-tool-btn,
.detail-preset-btn,
.table-action-btn,
.detail-col-menu__btn,
.mobile-dock-btn{
  transition:border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.search-input{
  font-size:13px;
  line-height:1.4;
}

.detail-tool-field label,
.sel-lbl{
  font-size:10px;
  letter-spacing:.56px;
}

.detail-tool-btn,
.table-action-btn,
.detail-col-menu__btn{
  font-weight:600;
}

.detail-tool-btn:hover,
.table-action-btn:hover,
.detail-col-menu__btn:hover,
.detail-preset-btn:hover,
.detail-filter-chip:hover,
.mobile-dock-btn:hover{
  transform:translateY(-1px);
}

.detail-tool-btn:focus-visible,
.table-action-btn:focus-visible,
.detail-col-menu__btn:focus-visible,
.detail-preset-btn:focus-visible,
.detail-filter-chip:focus-visible,
.detail-search-preview-item--action:focus-visible,
.detail-head-filter:focus-visible,
.search-input:focus-visible,
.detail-tool-field input:focus-visible,
.detail-tool-field select:focus-visible,
.detail-col-menu__search:focus-visible,
.mobile-dock-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(245,158,11,.18), 0 0 0 4px rgba(245,158,11,.08);
  border-color:rgba(245,158,11,.44);
}

.thead,
thead th,
.detail-head-sort,
.detail-head-sortstate,
.detail-toolbar-pill,
.detail-strip-badge,
.trend-chip,
.metric-meter__value,
.detail-total-value,
.kpi-val,
.cbadge,
.detail-search-preview-meta,
.detail-glance-card__value,
.detail-glance-card__meta,
.detail-glance-card__eyebrow,
.num,
.r{
  font-variant-numeric:tabular-nums;
}

thead th{
  padding:10px 12px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.52px;
}

.detail-head.is-sorted .detail-head-sort span:first-child{
  color:#fee0a5;
}

.detail-head-sortstate{
  font-weight:700;
}

tbody tr:nth-child(even){
  background:rgba(255,255,255,.02);
}

tbody tr:hover,
.detail-data-row--drill:hover td{
  background:rgba(245,158,11,.075);
}

.detail-search-preview--compact{
  gap:8px;
}

.detail-search-preview-list{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:8px;
}

.detail-search-preview-item--action{
  width:100%;
  appearance:none;
  text-align:left;
  cursor:pointer;
  background:linear-gradient(180deg,rgba(20,28,42,.96),rgba(14,20,31,.96));
  border:1px solid rgba(148,163,184,.16);
  box-shadow:0 10px 26px rgba(0,0,0,.16);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.detail-search-preview-item--action:hover{
  border-color:rgba(245,158,11,.30);
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(0,0,0,.22);
}

.detail-search-preview-kicker{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.detail-search-preview-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.22);
  background:rgba(59,130,246,.10);
  color:#c8ddff;
  font-size:10px;
  font-weight:700;
  letter-spacing:.35px;
  text-transform:uppercase;
}

.detail-search-preview-arrow{
  color:#f8cd7f;
  font-size:12px;
  font-weight:700;
}

.detail-search-preview-title{
  font-size:12px;
  line-height:1.45;
}

.detail-search-preview-meta{
  gap:6px;
}

.detail-search-preview-meta span{
  background:rgba(255,255,255,.055);
}

.detail-search-preview-hint{
  font-size:10.5px;
  line-height:1.45;
  color:#9fa9bc;
}

.detail-glance-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.detail-glance-card{
  position:relative;
  overflow:hidden;
  padding:12px 12px 11px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.14);
  background:linear-gradient(180deg,rgba(23,31,48,.96),rgba(16,22,34,.96));
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}

.detail-glance-card::after{
  content:"";
  position:absolute;
  inset:auto 12px 0 12px;
  height:3px;
  border-radius:999px 999px 0 0;
  background:rgba(148,163,184,.24);
}

.detail-glance-card--accent::after{background:rgba(245,158,11,.82)}
.detail-glance-card--blu::after{background:rgba(59,130,246,.82)}
.detail-glance-card--grn::after{background:rgba(34,197,94,.82)}
.detail-glance-card--pur::after{background:rgba(168,85,247,.82)}

.detail-glance-card__eyebrow{
  font-size:10px;
  font-weight:700;
  letter-spacing:.58px;
  text-transform:uppercase;
  color:#9da8bb;
}

.detail-glance-card__value{
  margin-top:7px;
  font-family:'Syne',sans-serif;
  font-size:21px;
  line-height:1.05;
  letter-spacing:-.35px;
  color:#f5f7fb;
}

.detail-glance-card__meta{
  margin-top:5px;
  font-size:10.5px;
  line-height:1.4;
  color:#9da8bb;
}

.metric-meter{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  min-width:min(100%,118px);
  width:100%;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.032);
  overflow:hidden;
  isolation:isolate;
}

.metric-meter__fill{
  position:absolute;
  inset:2px auto 2px 2px;
  width:var(--metric-fill,0%);
  border-radius:999px;
  opacity:.95;
  z-index:-1;
}

.metric-meter__value{
  position:relative;
  z-index:1;
  font-size:11.5px;
  font-weight:700;
  color:#eef2f9;
  white-space:nowrap;
}

.metric-meter--accent .metric-meter__fill{background:linear-gradient(90deg,rgba(245,158,11,.10),rgba(245,158,11,.34))}
.metric-meter--soft .metric-meter__fill{background:linear-gradient(90deg,rgba(59,130,246,.08),rgba(59,130,246,.28))}
.metric-meter--positive .metric-meter__fill{background:linear-gradient(90deg,rgba(34,197,94,.10),rgba(34,197,94,.30))}
.metric-meter--negative .metric-meter__fill{background:linear-gradient(90deg,rgba(239,68,68,.10),rgba(239,68,68,.30))}
.metric-meter--neutral .metric-meter__fill{background:linear-gradient(90deg,rgba(148,163,184,.08),rgba(148,163,184,.24))}

.metric-meter--accent{border-color:rgba(245,158,11,.20)}
.metric-meter--soft{border-color:rgba(59,130,246,.20)}
.metric-meter--positive{border-color:rgba(34,197,94,.22)}
.metric-meter--negative{border-color:rgba(239,68,68,.22)}
.metric-meter--neutral{border-color:rgba(148,163,184,.20)}

.trend-chip{
  min-width:82px;
  justify-content:center;
}

.detail-copy-cell{
  width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
}

.detail-copy-cell .metric-meter{
  margin-left:auto;
}

@media (max-width: 1180px){
  .detail-glance-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 760px){
  .detail-search-preview-list{
    grid-template-columns:1fr;
  }
  .detail-glance-grid{
    grid-template-columns:1fr;
  }
  .detail-glance-card__value{
    font-size:19px;
  }
  .metric-meter{
    min-height:30px;
  }
}

@media (prefers-reduced-motion: reduce){
  .page.on,
  .kpi--loading .kpi-val,
  .ux-scroll-top,
  .ux-toast,
  .detail-search-preview-item--action,
  .detail-tool-btn,
  .table-action-btn,
  .detail-col-menu__btn,
  .detail-preset-btn,
  .metric-meter__fill,
  .skel{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   v24-PRO · Expert UX & Design Overhaul
   - Faster filter feedback, richer charts, better tables
   - Enhanced color contrast, typography, animations
   ════════════════════════════════════════════════════════════════ */

/* —— Enhanced CSS Variables —— */
:root {
  --bg: #090d16;
  --surf: #101522;
  --card: #141c2e;
  --card-solid: #0d1320;
  --brd: #1f2a40;
  --brd-soft: #232f47;
  --acc: #f5a623;
  --acc-light: #ffd07a;
  --acc-dim: rgba(245,166,35,.14);
  --blu: #4490ff;
  --grn: #22d58a;
  --pur: #b27aff;
  --red: #ff5a5a;
  --tea: #2dd4bf;
  --pnk: #f472b6;
  --ora: #fb923c;
  --txt: #eaf0fb;
  --txt-soft: #b4c0d6;
  --mut: #7a87a0;
  --rad: 14px;
  --rad-sm: 10px;
  --shadow-card: 0 4px 24px rgba(0,0,0,.28), 0 1px 4px rgba(0,0,0,.18);
  --shadow-float: 0 18px 50px rgba(0,0,0,.42);
  --grd-card: linear-gradient(165deg, rgba(22,32,52,.98) 0%, rgba(10,16,28,.98) 100%);
  --transition-base: 160ms ease;
}

/* —— Global smooth rendering —— */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* —— HEADER enhanced —— */
.hdr {
  background: rgba(10,14,22,.98);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 4px 20px rgba(0,0,0,.22);
  padding: 10px 18px;
}
.logo {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--txt);
}
.logo b { color: var(--acc-light); }
.pill-status {
  background: rgba(10,14,22,.9);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 11px;
  padding: 5px 12px;
  gap: 7px;
  border-radius: 999px;
}
.dot { width: 8px; height: 8px; }
.dot.ok { background: var(--grn); box-shadow: 0 0 8px rgba(34,213,138,.55); }

/* —— FILTER PANEL enhanced —— */
.filter-panel {
  background: rgba(12,17,28,.97);
  border-bottom: 1px solid var(--brd);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  backdrop-filter: none;
}
.fp-inner { padding: 12px 18px; }

/* Period buttons — faster hover, clearer active */
.pbtn {
  min-height: 30px;
  padding: 4px 11px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(18,26,40,.9);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--txt-soft);
  transition: all var(--transition-base);
  letter-spacing: .2px;
}
.pbtn:hover {
  background: rgba(245,166,35,.16);
  border-color: rgba(245,166,35,.5);
  color: var(--acc-light);
  box-shadow: 0 0 12px rgba(245,166,35,.12);
  transform: translateY(-1px);
}
.pbtn.on {
  background: rgba(245,166,35,.22) !important;
  border-color: rgba(245,166,35,.7) !important;
  color: var(--acc-light) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 14px rgba(245,166,35,.18) !important;
}

/* Cascade selects enhanced */
.sel-wrap { gap: 4px; }
.sel-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .55px;
  text-transform: uppercase;
  color: var(--mut);
  display: flex;
  align-items: center;
  gap: 5px;
}
.snum {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: var(--mut);
  font-size: 8.5px;
  font-weight: 700;
  transition: all .2s;
  border: 1px solid var(--brd);
}
.snum.on {
  background: var(--acc);
  color: #000;
  border-color: var(--acc);
  box-shadow: 0 0 10px rgba(245,166,35,.35);
}

select {
  background: rgba(13,19,32,.95);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  color: var(--txt);
  font-size: 12px;
  padding: 7px 28px 7px 10px;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  min-height: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a87a0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
select:hover { border-color: rgba(245,166,35,.35); }
select:focus { border-color: rgba(245,166,35,.55); box-shadow: 0 0 0 3px rgba(245,166,35,.12); outline: none; }

input[type=date] {
  background: rgba(13,19,32,.95);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  color: var(--txt);
  font-size: 12px;
  padding: 6px 10px;
  min-height: 36px;
  transition: border-color var(--transition-base);
}
input[type=date]:focus { border-color: rgba(245,166,35,.55); box-shadow: 0 0 0 3px rgba(245,166,35,.12); outline: none; }

.btn-xs {
  min-height: 30px;
  padding: 4px 11px;
  border-radius: 8px;
  background: rgba(18,26,40,.9);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--mut);
  font-size: 11px;
  font-weight: 600;
  transition: all var(--transition-base);
}
.btn-xs:hover {
  border-color: rgba(255,90,90,.4);
  color: var(--red);
  background: rgba(255,90,90,.08);
  transform: translateY(-1px);
}

/* Active filter pills */
.ap {
  background: rgba(245,166,35,.10);
  border: 1px solid rgba(245,166,35,.28);
  color: #ffd07a;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 10px;
  animation: pill-in 180ms ease;
}
.ap.dp { background: rgba(68,144,255,.10); border-color: rgba(68,144,255,.3); color: #93c5ff; }
@keyframes pill-in { from { opacity:0; transform: scale(.88); } to { opacity:1; transform: scale(1); } }

/* —— TABS enhanced —— */
.tabs-bar {
  background: rgba(10,14,22,.98);
  border-bottom: 1px solid var(--brd);
  padding: 0 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.tab {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mut);
  padding: 12px 16px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base), background var(--transition-base);
  letter-spacing: .1px;
  border-radius: 0;
  position: relative;
}
.tab:hover { color: var(--txt-soft); background: rgba(255,255,255,.03); }
.tab.on { color: var(--acc-light); border-bottom-color: var(--acc); }

/* —— PAGE HERO enhanced —— */
.page-hero-shell {
  background: linear-gradient(175deg, rgba(16,24,40,.98) 0%, rgba(9,13,22,.95) 100%);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.page-hero-eyebrow {
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--acc);
  margin-bottom: 5px;
}
.page-hero-title {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1.2px;
  color: var(--txt);
  line-height: 1;
}
.page-hero-copy { color: var(--txt-soft); font-size: 13px; line-height: 1.65; }
.hero-chip {
  background: rgba(13,19,32,.9);
  border: 1px solid rgba(255,255,255,.09);
  color: var(--txt-soft);
  font-size: 11px;
  padding: 7px 13px;
  border-radius: 999px;
}
.hero-chip--soft { color: var(--tea); border-color: rgba(45,212,191,.24); background: rgba(45,212,191,.08); }
.hero-chip--action {
  color: var(--acc-light);
  border-color: rgba(245,166,35,.3);
  background: rgba(245,166,35,.08);
  transition: all var(--transition-base);
  cursor: pointer;
}
.hero-chip--action:hover { border-color: rgba(245,166,35,.5); background: rgba(245,166,35,.13); }

/* —— KPI CARDS enhanced —— */
.kpi-row { gap: 10px; margin-bottom: 14px; }
.kpi {
  background: var(--grd-card);
  border: 1px solid var(--brd-soft);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
  overflow: hidden;
}
.kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(0,0,0,.35); }
.kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
}
.kpi.a::before { background: linear-gradient(90deg, var(--acc), var(--acc-light)); }
.kpi.b::before { background: linear-gradient(90deg, var(--blu), #82b8ff); }
.kpi.g::before { background: linear-gradient(90deg, var(--grn), #6ee7b7); }
.kpi.p::before { background: linear-gradient(90deg, var(--pur), #d8b4fe); }
.kpi.c::before { background: linear-gradient(90deg, var(--tea), #5eead4); }
.kpi-lbl {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--mut);
  margin-bottom: 6px;
}
.kpi-val {
  font-family: 'Syne', sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -1.1px;
  line-height: 1;
}
.kpi.a .kpi-val { color: var(--acc-light); }
.kpi.b .kpi-val { color: #82b8ff; }
.kpi.g .kpi-val { color: #6ee7b7; }
.kpi.p .kpi-val { color: #c4b5fd; }
.kpi.c .kpi-val { color: var(--tea); }

/* —— CARD enhanced —— */
.card {
  background: var(--grd-card);
  border: 1px solid var(--brd-soft);
  border-radius: 18px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
  overflow: visible;
  position: relative;
}
.ch {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.ct {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--txt-soft);
}
.cbadge {
  background: rgba(13,19,32,.95);
  border: 1px solid var(--brd);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 10.5px;
  color: var(--mut);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* —— TABLES enhanced (Resumen Filtrado & Detalle Proyectado) —— */
table { border-collapse: separate; border-spacing: 0; min-width: 560px; width: 100%; }

thead th {
  padding: 11px 13px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .65px;
  color: var(--mut);
  background: rgba(9,13,22,.98);
  border-bottom: 1px solid var(--brd);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
thead th:first-child { padding-left: 16px; }
thead th:last-child { padding-right: 16px; }

tbody tr {
  border-bottom: none;
  transition: background var(--transition-base);
}
tbody td {
  padding: 9px 13px;
  font-size: 12px;
  color: var(--txt-soft);
  border-bottom: 1px solid rgba(255,255,255,.028);
  line-height: 1.4;
}
tbody td:first-child { padding-left: 16px; }
tbody td:last-child { padding-right: 16px; border-bottom: none; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: rgba(255,255,255,.025); }
tbody tr:hover { background: rgba(245,166,35,.08) !important; }
tbody tr:hover td { color: var(--txt); }

td.num, .r {
  font-family: 'Syne', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--acc-light);
  font-variant-numeric: tabular-nums;
}

/* Subtotal / Total rows */
.detail-subtotal-row td {
  background: rgba(68,144,255,.09) !important;
  border-top: 1px solid rgba(68,144,255,.22) !important;
  border-bottom: 1px solid rgba(68,144,255,.16) !important;
  color: #93c5ff;
  font-weight: 700;
}
.detail-summary-row td {
  background: rgba(45,212,191,.10) !important;
  border-top: 1px solid rgba(45,212,191,.22) !important;
  border-bottom: 1px solid rgba(45,212,191,.14) !important;
  color: var(--tea);
  font-weight: 700;
}
.detail-grandtotal-row td {
  background: rgba(245,166,35,.13) !important;
  border-top: 1px solid rgba(245,166,35,.32) !important;
  color: var(--acc-light) !important;
  font-weight: 800;
}

/* Projection table specific — positive/negative variance */
.var-pos { color: #6ee7b7 !important; font-weight: 700; }
.var-neg { color: #fca5a5 !important; font-weight: 700; }

/* —— GRUPO STRIP enhanced —— */
.grupo-strip { gap: 8px; padding-bottom: 4px; margin-bottom: 12px; }
.gk {
  background: var(--grd-card);
  border: 1px solid var(--brd-soft);
  border-radius: 12px;
  padding: 11px 14px;
  min-width: 130px;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.gk.clickable:hover {
  transform: translateY(-2px);
  border-color: rgba(245,166,35,.35);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.gk.clickable.active {
  border-color: rgba(245,166,35,.6) !important;
  background: rgba(245,166,35,.10);
  box-shadow: 0 0 0 1px rgba(245,166,35,.22), 0 8px 22px rgba(0,0,0,.22);
}
.gk-bar { height: 3px; opacity: .7; transition: width .55s cubic-bezier(.4,0,.2,1); border-radius: 2px; }
.gk.clickable.active .gk-bar { height: 4px; opacity: 1; }
.gk-name { font-size: 9px; font-weight: 700; letter-spacing: .5px; color: var(--mut); }
.gk-val { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -.5px; }

/* —— CHARTS enhanced —— */
.hbars { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.hb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}
.hb-name {
  width: 108px;
  flex-shrink: 0;
  color: var(--txt-soft);
  font-size: 10.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.hb-track {
  flex: 1;
  height: 9px;
  background: rgba(255,255,255,.05);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.hb-fill {
  height: 100%;
  border-radius: 6px;
  transition: width .65s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.hb-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, transparent 100%);
  border-radius: 6px;
}
.hb-val {
  min-width: 52px;
  text-align: right;
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Donut chart enhanced */
.donut-wrap {
  padding: 16px;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.donut-svg { width: 120px; height: 120px; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(0,0,0,.35)); }
.dlegend { gap: 6px; flex: 1; min-width: 100px; }
.dl { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 2px 0; }
.dl-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dl-name { flex: 1; color: var(--txt-soft); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-val { font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Line chart enhanced */
.lc-wrap { padding: 12px 16px 16px; overflow-x: auto; }
.lc-svg { overflow: visible; min-width: 300px; }
.lc-grid { stroke: rgba(255,255,255,.06); stroke-width: 1; stroke-dasharray: 4,4; }
.lc-lbl { font-size: 9.5px; fill: var(--mut); font-family: 'DM Sans', sans-serif; }
.lc-area { opacity: .22; }
.lc-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* Daily compare enhanced */
.daily-grid { stroke: rgba(255,255,255,.055); stroke-width: 1; stroke-dasharray: 3,5; }
.daily-grid-label { font-size: 9px; fill: var(--mut); font-family: 'DM Sans', sans-serif; }
.daily-axis { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.daily-axis-label { font-size: 9px; fill: var(--mut); font-family: 'DM Sans', sans-serif; }
.daily-area, .daily-line { pointer-events: none; }
.daily-line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.daily-line.current { stroke-width: 3; }
.daily-dot-hit { cursor: pointer; }
.daily-dot { stroke: var(--card-solid); stroke-width: 2; transition: r .15s ease; }
.daily-dot-hit:hover + .daily-dot { r: 5 !important; }

/* Legend items enhanced */
.daily-legend { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.05); }
.daily-legend-item {
  flex: 1;
  min-width: 160px;
  background: rgba(9,13,22,.8);
  border: 1px solid var(--brd);
  border-radius: 12px;
  padding: 10px 12px;
}
.daily-legend-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.daily-legend-name { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--txt-soft); font-weight: 600; }
.daily-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.daily-legend-kpi { font-family: 'Syne', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.daily-legend-sub { font-size: 10px; color: var(--mut); margin-top: 2px; line-height: 1.45; }

/* —— STORY CARDS enhanced —— */
.story-card {
  background: var(--grd-card);
  border: 1px solid var(--brd-soft);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.story-card:hover { transform: translateY(-2px); box-shadow: 0 12px 38px rgba(0,0,0,.38); }
.story-card::before { height: 3px; border-radius: 18px 18px 0 0; }
.story-card.accent::before { background: linear-gradient(90deg, var(--acc), var(--acc-light)); }
.story-card.blu::before { background: linear-gradient(90deg, var(--blu), #82b8ff); }
.story-card.grn::before { background: linear-gradient(90deg, var(--grn), #6ee7b7); }
.story-card.tea::before { background: linear-gradient(90deg, var(--tea), #5eead4); }
.story-card.pur::before { background: linear-gradient(90deg, var(--pur), #d8b4fe); }
.story-card .story-label { font-size: 9.5px; font-weight: 700; letter-spacing: .8px; color: var(--mut); }
.story-card .story-value { font-family: 'Syne', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.8px; }
.story-card .story-meta { font-size: 11.5px; color: var(--txt-soft); line-height: 1.55; }
.story-progress-line { height: 5px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; }
.story-progress-bar { height: 100%; border-radius: 999px; min-width: 5px; transition: width .8s cubic-bezier(.4,0,.2,1); }

/* —— PROJECTION HERO enhanced —— */
.proj-hero-card { border-radius: 18px; overflow: hidden; }
.proj-hero-title { font-size: 24px; font-weight: 800; letter-spacing: -.8px; color: var(--tea); }
.proj-hero-item {
  background: rgba(10,16,26,.9);
  border: 1px solid var(--brd-soft);
  border-radius: 14px;
  padding: 14px;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.proj-hero-item:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.proj-hero-item::before { height: 3px; background: var(--tea); }
.proj-hero-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .6px; color: var(--mut); margin-bottom: 6px; }
.proj-hero-val { font-family: 'Syne', sans-serif; font-size: 21px; font-weight: 800; letter-spacing: -.6px; }

/* —— DETAIL TOOLBAR enhanced (filter boxes) —— */
.detail-toolbar {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  background: rgba(9,13,22,.6);
  gap: 12px;
}
.detail-tool-field label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .55px;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 4px;
  display: block;
}
.detail-tool-field input,
.detail-tool-field select {
  background: rgba(10,15,24,.95);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  color: var(--txt);
  font-size: 12px;
  min-height: 36px;
  padding: 7px 10px;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.detail-tool-field input:focus,
.detail-tool-field select:focus {
  border-color: rgba(245,166,35,.5);
  box-shadow: 0 0 0 3px rgba(245,166,35,.12);
  outline: none;
}
.detail-tool-btn {
  min-height: 36px;
  background: rgba(18,26,42,.95);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  color: var(--txt-soft);
  font-size: 11px;
  font-weight: 600;
  padding: 7px 14px;
  transition: all var(--transition-base);
  cursor: pointer;
}
.detail-tool-btn:hover {
  border-color: rgba(245,166,35,.4);
  color: var(--acc-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.detail-tool-btn--accent {
  background: rgba(245,166,35,.14);
  border-color: rgba(245,166,35,.35);
  color: var(--acc-light);
}

/* Filter toolbar pills */
.detail-toolbar-pill {
  background: rgba(13,19,32,.95);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  font-size: 11px;
  color: var(--txt-soft);
  padding: 5px 12px;
  font-weight: 600;
}
.detail-toolbar-pill--accent {
  border-color: rgba(245,166,35,.28);
  background: rgba(245,166,35,.10);
  color: var(--acc-light);
}

/* Detail toolbar presets */
.detail-preset-btn {
  background: linear-gradient(160deg, rgba(20,30,48,.96) 0%, rgba(12,18,30,.96) 100%);
  border: 1px solid var(--brd-soft);
  border-radius: 14px;
  transition: all var(--transition-base);
}
.detail-preset-btn:hover,
.detail-preset-btn.is-active {
  border-color: rgba(245,166,35,.3);
  box-shadow: 0 10px 26px rgba(0,0,0,.26);
  transform: translateY(-1px);
}
.detail-preset-btn.is-active {
  background: rgba(245,166,35,.08);
  border-color: rgba(245,166,35,.38);
}
.detail-preset-btn__icon {
  background: rgba(255,255,255,.07);
  border-radius: 10px;
}

/* Table action buttons */
.table-action-btn {
  min-height: 34px;
  background: rgba(18,26,42,.95);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: var(--txt-soft);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 13px;
  transition: all var(--transition-base);
}
.table-action-btn:hover {
  border-color: rgba(245,166,35,.4);
  color: var(--acc-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.table-action-btn--accent {
  background: rgba(245,166,35,.14);
  border-color: rgba(245,166,35,.35);
  color: var(--acc-light);
}

/* —— COLUMN MENU enhanced —— */
.detail-col-menu {
  background: rgba(9,14,24,.99);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.detail-col-menu::before { background: rgba(9,14,24,.99); }
.detail-col-menu__head { font-size: 12px; font-weight: 700; color: var(--txt); }
.detail-col-menu__btn {
  min-height: 30px;
  background: rgba(18,26,42,.9);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  color: var(--txt-soft);
  font-size: 10px;
  font-weight: 600;
  padding: 5px 10px;
  transition: all var(--transition-base);
}
.detail-col-menu__btn:hover,
.detail-col-menu__btn--accent {
  border-color: rgba(245,166,35,.35);
  color: var(--acc-light);
  background: rgba(245,166,35,.10);
}
.detail-col-menu__search {
  background: rgba(10,15,24,.95);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  color: var(--txt);
  font-size: 12px;
  padding: 7px 10px;
}
.detail-col-menu__item:hover,
.detail-col-menu__item:focus-within {
  background: rgba(245,166,35,.07);
}

/* Filter chip */
.detail-filter-chip {
  background: rgba(245,166,35,.11);
  border: 1px solid rgba(245,166,35,.28);
  color: var(--acc-light);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  transition: all var(--transition-base);
}
.detail-filter-chip:hover { background: rgba(245,166,35,.18); border-color: rgba(245,166,35,.45); }

/* —— VIEW BADGE —— */
.detail-view-badge {
  background: rgba(45,212,191,.12);
  border: 1px solid rgba(45,212,191,.28);
  color: var(--tea);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 8px;
  letter-spacing: .35px;
  text-transform: uppercase;
}

/* —— SEARCH BOX enhanced —— */
.search-box {
  background: rgba(10,15,24,.95);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  min-height: 38px;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.search-box:focus-within,
.search-wrap.is-open .search-box {
  border-color: rgba(245,166,35,.5);
  box-shadow: 0 0 0 3px rgba(245,166,35,.12);
}
.search-input { font-size: 12.5px; }
.search-dd {
  background: rgba(9,13,22,.99);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}
.search-dd-head {
  background: rgba(9,13,22,.99);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.search-dd-item { padding: 9px 12px; }
.search-dd-item:hover { background: rgba(245,166,35,.08); }
.search-chip {
  background: rgba(245,166,35,.10);
  border: 1px solid rgba(245,166,35,.28);
  color: var(--acc-light);
  font-size: 11px;
  font-weight: 600;
}

/* —— ACUMULADOS TABLE enhanced —— */
.acum-table thead th { background: rgba(9,13,22,.98); }
.mini-bar-track { background: rgba(255,255,255,.06); height: 5px; }
.mini-bar { transition: width .55s cubic-bezier(.4,0,.2,1); }
.acum-rank { color: var(--mut); font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700; }

/* —— OVERLAY enhanced —— */
.overlay {
  background: rgba(5,8,16,.92);
  backdrop-filter: none;
}
.spin {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255,255,255,.06);
  border-top-color: var(--acc);
  box-shadow: 0 0 24px rgba(245,166,35,.20);
}
.ovtxt {
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--mut);
  font-weight: 700;
}

/* —— MOBILE DOCK enhanced —— */
@media(max-width:860px) {
  .mobile-dock {
    background: rgba(9,13,22,.97);
    border-color: rgba(245,166,35,.16);
    border-radius: 20px;
    backdrop-filter: none;
    box-shadow: 0 16px 40px rgba(0,0,0,.42);
  }
  .mobile-dock-btn {
    background: rgba(20,28,44,.95);
    border-radius: 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--txt-soft);
    min-height: 46px;
  }
  .mobile-dock-btn:hover {
    background: rgba(245,166,35,.14);
    color: var(--acc-light);
  }
}

/* —— PAGE TRANSITIONS enhanced —— */
@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.page.on { animation: page-in .2s cubic-bezier(.4,0,.2,1); }

/* Skeleton shimmer enhanced */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skel {
  background: linear-gradient(90deg,
    rgba(255,255,255,.05) 25%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s ease infinite;
  border-radius: 5px;
}

/* KPI loading animation */
@keyframes skeleton-pulse {
  0%, 100% { opacity: .4; }
  50% { opacity: .15; }
}
.kpi--loading .kpi-val {
  color: transparent !important;
  background: linear-gradient(90deg,
    rgba(255,255,255,.06) 25%,
    rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.06) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease infinite;
  border-radius: 6px;
}

/* —— TOAST enhanced —— */
.ux-toast {
  background: rgba(9,13,22,.98);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 12px;
  box-shadow: 0 16px 36px rgba(0,0,0,.38);
}

/* —— SCROLL TOP BUTTON enhanced —— */
.ux-scroll-top {
  background: rgba(12,18,30,.98);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 12px 32px rgba(0,0,0,.38);
  border-radius: 999px;
}
.ux-scroll-top:hover {
  border-color: rgba(245,166,35,.45);
  color: var(--acc-light);
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
}

/* —— DETAIL STRIP enhanced —— */
.detail-strip-badge {
  background: rgba(13,19,32,.95);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--txt-soft);
  padding: 4px 11px;
}
.detail-strip-head { margin-bottom: 8px; }
.grupo-strip-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .7px; color: var(--mut); text-transform: uppercase; margin-bottom: 7px; }
.grupo-strip-hint { font-size: 11px; color: var(--mut); line-height: 1.5; margin-bottom: 10px; }

/* Variation colors in tables (Detalle Proyectado) */
td[class*="var-"] { font-family: 'Syne', sans-serif; font-variant-numeric: tabular-nums; }

/* —— ERROR BAR enhanced —— */
.ebar {
  background: rgba(255,90,90,.07);
  border: 1px solid rgba(255,90,90,.22);
  border-radius: 14px;
}
.etit { color: var(--red); }

/* —— SNOTE (pagination note) —— */
.snote {
  padding: 10px 16px;
  font-size: 11px;
  color: var(--mut);
  border-top: 1px solid rgba(255,255,255,.05);
  background: rgba(9,13,22,.6);
  border-radius: 0 0 18px 18px;
}

/* —— Hover reveal tooltip on table cells —— */
.detail-total-label { font-size: 11px; letter-spacing: .15px; }
.detail-total-value { font-family: 'Syne', sans-serif; font-weight: 700; color: var(--txt); font-variant-numeric: tabular-nums; }

/* —— Proj hero head badges —— */
.proj-hero-pill {
  background: rgba(45,212,191,.09);
  border: 1px solid rgba(45,212,191,.24);
  color: var(--tea);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  padding: 5px 11px;
}

/* —— Metric meter enhanced —— */
.metric-meter {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  min-height: 28px;
  padding: 4px 10px;
}
.metric-meter__fill { border-radius: 999px; }
.metric-meter__value {
  font-size: 11px;
  font-weight: 700;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
}

/* —— Search preview enhanced —— */
.detail-search-preview-item--action {
  background: linear-gradient(160deg, rgba(18,28,44,.97) 0%, rgba(10,16,28,.97) 100%);
  border: 1px solid var(--brd-soft);
  border-radius: 14px;
  transition: all var(--transition-base);
}
.detail-search-preview-item--action:hover {
  border-color: rgba(245,166,35,.3);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
}

/* —— Glance cards enhanced —— */
.detail-glance-card {
  background: linear-gradient(165deg, rgba(18,28,44,.97) 0%, rgba(10,16,28,.97) 100%);
  border: 1px solid var(--brd-soft);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
.detail-glance-card__eyebrow { color: var(--mut); font-size: 9.5px; font-weight: 700; letter-spacing: .55px; }
.detail-glance-card__value { font-family: 'Syne', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.4px; color: var(--txt); }
.detail-glance-card__meta { font-size: 10.5px; color: var(--txt-soft); line-height: 1.45; }

/* —— Auth card enhanced —— */
.auth-card {
  background: var(--grd-card);
  border: 1px solid var(--brd-soft);
  border-radius: 20px;
  box-shadow: var(--shadow-float);
}
.auth-btn {
  background: var(--acc);
  color: #0a0d16;
  border-radius: 12px;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  transition: all var(--transition-base);
}
.auth-btn:hover { background: var(--acc-light); }

/* —— Chart empty state —— */
.chart-empty {
  padding: 48px 20px;
  text-align: center;
  color: var(--mut);
  font-size: 12px;
  font-weight: 500;
}

/* —— FOCUS RING consistent —— */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.search-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(245,166,35,.2), 0 0 0 4px rgba(245,166,35,.08);
  border-color: rgba(245,166,35,.5) !important;
}

/* —— Resumen/Projection table filter dropdowns —— */
.detail-head-filter {
  background: rgba(12,18,30,.95);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: var(--txt-soft);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  transition: all var(--transition-base);
  min-height: 28px;
}
.detail-head-filter:hover,
.detail-head.is-sorted .detail-head-filter { border-color: rgba(245,166,35,.32); color: var(--acc-light); }
.detail-head.is-filtered .detail-head-filter {
  background: rgba(245,166,35,.14);
  border-color: rgba(245,166,35,.38);
  color: #ffe3a8;
}
.detail-head-filtercount { font-weight: 700; font-size: 10px; }
.detail-head-sortstate { font-weight: 800; color: #fee0a5; }

/* —— App update toast enhanced —— */
.app-update-toast {
  background: rgba(9,13,22,.98);
  border: 1px solid rgba(245,166,35,.28);
  border-radius: 18px;
  box-shadow: var(--shadow-float);
}
.app-update-toast__title { color: var(--acc-light); font-family: 'Syne', sans-serif; }

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
  *,
  .page.on,
  .kpi--loading .kpi-val,
  .ux-scroll-top,
  .ux-toast,
  .skel,
  .hb-fill,
  .story-progress-bar,
  .gk-bar {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* hb-row animation (charts) */
@keyframes hb-in {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Projection table — color positive/negative variation */
.proj-var-pos { color: #6ee7b7 !important; font-weight: 700; font-family: 'Syne', sans-serif; }
.proj-var-neg { color: #fca5a5 !important; font-weight: 700; font-family: 'Syne', sans-serif; }
.proj-var-neu { color: var(--tea) !important; font-weight: 700; font-family: 'Syne', sans-serif; }

/* Charts grid spacing */
.charts-grid { gap: 12px; }
.detail-trend-card .daily-compare-shell { overflow-x: auto; }
.daily-compare-svg { min-width: 500px; }

/* Table wrapper border radius */
.tw { border-radius: 0 0 18px 18px; }

/* ════════════════════════════════════════════════════════════════
   v25 — Bug fixes + UX polish + AI panel integration
   ════════════════════════════════════════════════════════════════ */

/* ── FIX CRÍTICO: card hover transform rompe posición del col-menu ── */
/* El col-menu usa position:absolute dentro de .card — si .card hace
   transform al hacer hover, el stacking context se rompe y el menú
   queda desplazado. Forzamos transform:none en cards con menú abierto. */
.card { transform: none !important; }
.kpi:hover { transform: translateY(-2px); }
.story-card:hover { transform: translateY(-2px); }
.proj-hero-item:hover { transform: translateY(-1px); }
/* Los anteriores son seguros porque no contienen col-menus */

/* ── FIX: z-index del column menu layer ── */
/* El layer se mueve al body cuando el menú se abre. z-index 50 es
   suficiente para estar sobre thead (z:2) pero bajo el panel IA (z:1200) */
.detail-col-menu-layer { z-index: 50 !important; }
#detailColumnMenuLayer { z-index: 50 !important; }

/* ── FIX: Toolbar responsiva — se rompe en ~900px ── */
@media (max-width: 960px) {
  .detail-toolbar-main {
    grid-template-columns: minmax(200px, 1.4fr) repeat(2, minmax(120px, .7fr)) auto !important;
    gap: 10px;
  }
}
@media (max-width: 760px) {
  .detail-toolbar-main {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px;
  }
  .detail-toolbar-main > *:last-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .detail-toolbar-main { grid-template-columns: 1fr !important; }
}

/* ── FIX: Trend chips proyección — mejor contraste ── */
.trend-chip.positive {
  color: #4ade80 !important;
  background: rgba(74,222,128,.13) !important;
  border-color: rgba(74,222,128,.32) !important;
  font-weight: 700;
}
.trend-chip.negative {
  color: #f87171 !important;
  background: rgba(248,113,113,.13) !important;
  border-color: rgba(248,113,113,.32) !important;
  font-weight: 700;
}
.trend-chip.neutral {
  color: #5eead4 !important;
  background: rgba(94,234,212,.1) !important;
  border-color: rgba(94,234,212,.22) !important;
}

/* ── PERF: Páginas ocultas no se renderizan ── */
.page:not(.on) {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

/* ── Scrollbars personalizados en tablas ── */
.tw::-webkit-scrollbar { height: 5px; width: 5px; }
.tw::-webkit-scrollbar-track { background: transparent; }
.tw::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 99px; }
.tw::-webkit-scrollbar-thumb:hover { background: rgba(245,158,11,.4); }
.aimsgs::-webkit-scrollbar { width: 4px; }
.aimsgs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 99px; }

/* ── Debounce visual: feedback inmediato en selects de filtro ── */
select:active { border-color: rgba(245,166,35,.6) !important; }
.pbtn:active { transform: scale(.97); }

/* ── Filtros activos: pill con animación de entrada ── */
@keyframes pill-enter {
  from { opacity: 0; transform: scale(.85) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ap { animation: pill-enter .18s cubic-bezier(.34,1.56,.64,1); }

/* ── KPI loading state mejorado ── */
.kpi--loading {
  pointer-events: none;
}
.kpi--loading .kpi-val {
  display: inline-block;
  min-width: 80px;
  height: 1em;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.06) 25%,
    rgba(255,255,255,.13) 50%,
    rgba(255,255,255,.06) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite !important;
  color: transparent !important;
}
.kpi--loading .kpi-lbl { opacity: .5; }

/* ── Tabla Resumen Filtrado: mejor separación visual de secciones ── */
/* Cabecera de tabla más distinguible */
thead th {
  background: rgba(7,11,20,.98) !important;
  border-bottom: 2px solid rgba(245,166,35,.18) !important;
  font-size: 9.5px !important;
  letter-spacing: .7px !important;
  color: #8b95a7 !important;
}
thead th.is-sorted-asc,
thead th.is-sorted-desc,
.detail-head.is-sorted thead th {
  color: #ffd07a !important;
}

/* Filas de datos con separación clara */
tbody td {
  border-bottom: 1px solid rgba(255,255,255,.032) !important;
  transition: background .12s ease;
}
tbody tr:nth-child(even) { background: rgba(255,255,255,.022) !important; }
tbody tr:hover { background: rgba(245,166,35,.075) !important; }
tbody tr:hover td { color: #eaf0fb !important; }

/* Filas especiales — subtotal, summary, grandtotal */
.detail-subtotal-row td {
  background: rgba(59,130,246,.09) !important;
  border-top: 2px solid rgba(59,130,246,.25) !important;
  border-bottom: 1px solid rgba(59,130,246,.18) !important;
  color: #93c5ff !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
}
.detail-summary-row td {
  background: rgba(45,212,191,.10) !important;
  border-top: 2px solid rgba(45,212,191,.25) !important;
  color: #5eead4 !important;
  font-weight: 700 !important;
}
.detail-grandtotal-row td {
  background: rgba(245,166,35,.13) !important;
  border-top: 2px solid rgba(245,166,35,.35) !important;
  color: #ffd07a !important;
  font-weight: 800 !important;
  font-size: 12px !important;
}

/* ── Tabla Detalle Proyectado: columnas de variación ── */
/* Asegura que los span.trend-chip tengan tamaño adecuado */
td .trend-chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 70px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: 'Syne', sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Botones de filtro en toolbar (Resumen + Proyección) ── */
/* Fix: botones no responden bien en firefox */
.detail-tool-btn,
.table-action-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}
/* Estado activo de los botones de filtro */
.detail-col-menu__btn:active,
.table-action-btn:active,
.detail-tool-btn:active {
  transform: scale(.97) !important;
  opacity: .85;
}
/* Fix: column filter apply button destaca visualmente al tener filtros activos */
.detail-head.is-filtered .detail-head-filter {
  background: rgba(245,166,35,.18) !important;
  border-color: rgba(245,166,35,.45) !important;
  color: #ffd07a !important;
  box-shadow: 0 0 8px rgba(245,166,35,.2) !important;
}
/* Fix: menú columna — fondo opaco total para no ver a través */
.detail-col-menu {
  background: rgba(7,11,20,.99) !important;
  backdrop-filter: none !important;
}

/* ── Barra de navegación tabs — posición sticky mejorada ── */
/* Previene que las tabs queden detrás del panel de filtros en scroll */
.tabs-bar {
  top: calc(var(--filter-panel-height, 120px));
  transition: top .2s ease;
}

/* ── Grupo strip cards — micro-interacción mejorada ── */
.gk.clickable {
  transition: transform .14s cubic-bezier(.34,1.56,.64,1),
              border-color .16s ease,
              box-shadow .16s ease,
              background .16s ease !important;
}
.gk.clickable:active { transform: scale(.97) !important; }
.gk.clickable.active {
  animation: gk-activate .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes gk-activate {
  0%  { transform: scale(1); }
  50% { transform: scale(1.04); }
  100%{ transform: scale(1); }
}

/* ── Overlay de carga — más impacto ── */
.overlay {
  background: rgba(5,8,16,.94) !important;
  backdrop-filter: none !important;
}
.spin {
  border-top-color: #ffd07a !important;
  box-shadow: 0 0 20px rgba(255,208,122,.3) !important;
}

/* ── Toast de acción — más visible ── */
.ux-toast {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  color: #eaf0fb !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  border-color: rgba(245,166,35,.25) !important;
}

/* ── Error bar — padding consistente ── */
.ebar { border-radius: 16px !important; padding: 12px 16px !important; }

/* ── Snote (pie de tabla) — fondo diferenciado ── */
.snote {
  background: rgba(7,11,20,.6) !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 0 0 18px 18px !important;
  font-size: 11px !important;
}

/* ── App-update toast mejorado ── */
.app-update-toast {
  border-radius: 18px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.5) !important;
}

/* ── Accesibilidad: focus ring consistente ── */
:focus-visible {
  outline: 2px solid rgba(245,166,35,.7) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(245,166,35,.22),
              0 0 0 4px rgba(245,166,35,.09) !important;
  border-color: rgba(245,166,35,.55) !important;
}

/* ── Chip de filtro ghost (sin filtros locales) ── */
.detail-filter-chip--ghost {
  background: transparent !important;
  border-color: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.28) !important;
  font-style: italic;
}

/* ── Mark (highlight de búsqueda en tabla) ── */
mark {
  background: rgba(245,166,35,.28);
  color: #ffd07a;
  border-radius: 3px;
  padding: 0 2px;
}

/* ── Selector de período: feedback de fecha seleccionada ── */
input[type=date]:not(:placeholder-shown) {
  border-color: rgba(245,166,35,.4);
  color: #ffd07a;
}

/* ── Proyección: inputs de días hábiles ── */
.proj-field input:focus {
  border-color: rgba(45,212,191,.55) !important;
  box-shadow: 0 0 0 3px rgba(45,212,191,.12) !important;
}

/* ── Reducir animaciones si el usuario lo prefiere ── */
@media (prefers-reduced-motion: reduce) {
  .ap, .gk.clickable, .kpi, .story-card, #aiFab,
  .detail-search-preview-item--action {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v7 — COMPLETE UX REDESIGN
   Better colors · contrast · animations · filter speed · layout
   ═══════════════════════════════════════════════════════════════ */

/* ── Enhanced CSS Variables ── */
:root {
  --bg:       #07090f;
  --surf:     #0d1120;
  --card:     #111827;
  --card2:    #131c2e;
  --brd:      #1e2a40;
  --brd2:     #253045;
  --acc:      #f5a623;
  --acc-l:    #ffd07a;
  --acc-d:    rgba(245,166,35,.14);
  --blu:      #4a9eff;
  --grn:      #22d58a;
  --pur:      #b07fff;
  --red:      #ff5a5a;
  --tea:      #2dd4bf;
  --txt:      #eaf0fb;
  --txt2:     #b4c4d8;
  --mut:      #6b7a94;
  --rad:      14px;
  --rad2:     20px;
  --sh-card:  0 4px 20px rgba(0,0,0,.32);
  --sh-float: 0 20px 56px rgba(0,0,0,.48);
  --tr:       160ms ease;
}

/* ── Base ── */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ── Header ── */
.hdr {
  background: rgba(7,9,15,.98);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 4px 20px rgba(0,0,0,.28);
  padding: 10px 20px;
}
.logo { font-size: 18px; letter-spacing: -.5px; }
.logo b { color: var(--acc-l); }
.pill-status {
  background: rgba(7,9,15,.9);
  border-color: rgba(255,255,255,.08);
  color: #9aacbf;
  padding: 5px 12px;
}
.dot { width: 8px; height: 8px; }
.dot.ok { background: var(--grn); box-shadow: 0 0 10px rgba(34,213,138,.55); }

/* ── Filter Panel ── */
.filter-panel {
  background: rgba(9,12,20,.97);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
}
.fp-inner { padding: 12px 20px; }
.fp-top { gap: 10px; margin-bottom: 10px; }

/* Period buttons — fast visual feedback */
.pbtn {
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(14,20,34,.95);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--txt2);
  transition: all var(--tr);
  letter-spacing: .15px;
}
.pbtn:hover {
  background: rgba(245,166,35,.16);
  border-color: rgba(245,166,35,.48);
  color: var(--acc-l);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245,166,35,.14);
}
.pbtn.on {
  background: rgba(245,166,35,.22) !important;
  border-color: rgba(245,166,35,.68) !important;
  color: var(--acc-l) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px rgba(245,166,35,.2) !important;
}
.pbtn:active { transform: scale(.97); }

/* Select cascade filters */
select {
  background: rgba(10,15,26,.96);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  color: var(--txt);
  min-height: 36px;
  padding: 7px 28px 7px 10px;
  font-size: 12px;
  transition: border-color var(--tr), box-shadow var(--tr);
}
select:hover  { border-color: rgba(245,166,35,.35); }
select:focus  { border-color: rgba(245,166,35,.55); box-shadow: 0 0 0 3px rgba(245,166,35,.12); outline: none; }
select option { background: #111827; }

/* Date inputs */
input[type=date] {
  background: rgba(10,15,26,.96);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  color: var(--txt);
  min-height: 36px;
  padding: 6px 10px;
  font-size: 12px;
  transition: border-color var(--tr);
}
input[type=date]:focus { border-color: rgba(245,166,35,.55); box-shadow: 0 0 0 3px rgba(245,166,35,.12); outline: none; }
input[type=date]:not(:placeholder-shown) { border-color: rgba(245,166,35,.38); color: var(--acc-l); }

.btn-xs {
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 8px;
  background: rgba(14,20,34,.95);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--mut);
  font-size: 11px;
  font-weight: 600;
  transition: all var(--tr);
}
.btn-xs:hover { border-color: rgba(255,90,90,.4); color: var(--red); background: rgba(255,90,90,.08); transform: translateY(-1px); }

/* Filter number badges */
.snum {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: var(--mut);
  font-size: 8.5px;
  font-weight: 700;
  border: 1px solid var(--brd);
  transition: all .2s;
}
.snum.on { background: var(--acc); color: #000; border-color: var(--acc); box-shadow: 0 0 10px rgba(245,166,35,.35); }

/* Active filter pills */
.ap {
  background: rgba(245,166,35,.10);
  border: 1px solid rgba(245,166,35,.28);
  color: var(--acc-l);
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 10px;
  animation: pill-in .18s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pill-in { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }

/* ── Tabs ── */
.tabs-bar {
  background: rgba(7,9,15,.98);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 0 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.tab {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mut);
  padding: 12px 16px;
  letter-spacing: .1px;
  transition: color var(--tr), background var(--tr);
}
.tab:hover { color: var(--txt2); background: rgba(255,255,255,.03); }
.tab.on { color: var(--acc-l); border-bottom-color: var(--acc); }

/* ── KPI Cards ── */
.kpi-row { gap: 10px; margin-bottom: 14px; }
.kpi {
  background: linear-gradient(160deg, rgba(17,24,39,.98) 0%, rgba(10,15,24,.98) 100%);
  border: 1px solid var(--brd2);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: var(--sh-card);
  transition: transform var(--tr), box-shadow var(--tr);
  overflow: hidden;
  position: relative;
}
.kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0,0,0,.38); }
.kpi::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; border-radius:18px 18px 0 0; }
.kpi.a::before { background: linear-gradient(90deg,var(--acc),var(--acc-l)); }
.kpi.b::before { background: linear-gradient(90deg,var(--blu),#82c4ff); }
.kpi.g::before { background: linear-gradient(90deg,var(--grn),#6ee7b7); }
.kpi.p::before { background: linear-gradient(90deg,var(--pur),#d8b4fe); }
.kpi.c::before { background: linear-gradient(90deg,var(--tea),#5eead4); }
.kpi-lbl { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--mut); margin-bottom: 6px; }
.kpi-val { font-family: 'Syne', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -1.1px; line-height: 1; }
.kpi.a .kpi-val { color: var(--acc-l); }
.kpi.b .kpi-val { color: #82c4ff; }
.kpi.g .kpi-val { color: #6ee7b7; }
.kpi.p .kpi-val { color: #c4b5fd; }
.kpi.c .kpi-val { color: var(--tea); }

/* ── Cards ── */
.card {
  background: linear-gradient(160deg, rgba(17,24,39,.98) 0%, rgba(10,15,24,.98) 100%);
  border: 1px solid var(--brd2);
  border-radius: 20px;
  margin-bottom: 12px;
  box-shadow: var(--sh-card);
  overflow: visible;
  position: relative;
  transform: none !important; /* prevent stacking context breaking col-menu */
}
.ch {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.ct {
  font-family: 'Syne', sans-serif;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--txt2);
}
.cbadge {
  background: rgba(10,15,26,.95);
  border: 1px solid var(--brd);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 10.5px; color: var(--mut); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Tables — Resumen Filtrado & Detalle Proyectado ── */
table { border-collapse: separate; border-spacing: 0; min-width: 560px; width: 100%; }
thead th {
  padding: 10px 13px;
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .65px;
  color: #6b7a94;
  background: rgba(5,8,14,.98);
  border-bottom: 2px solid rgba(245,166,35,.15);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
tbody td {
  padding: 9px 13px;
  font-size: 12px;
  color: var(--txt2);
  border-bottom: 1px solid rgba(255,255,255,.03);
  transition: background var(--tr);
  line-height: 1.4;
}
tbody tr:nth-child(even) { background: rgba(255,255,255,.025); }
tbody tr:hover           { background: rgba(245,166,35,.08) !important; }
tbody tr:hover td        { color: var(--txt); }
td.num, .r               { font-family:'Syne',sans-serif; font-size:12px; font-weight:700; color:var(--acc-l); font-variant-numeric:tabular-nums; }

/* Total rows — clear visual hierarchy */
.detail-subtotal-row td   { background:rgba(74,158,255,.09)!important; border-top:2px solid rgba(74,158,255,.22)!important; color:#93c5ff!important; font-weight:700!important; }
.detail-summary-row td    { background:rgba(45,212,191,.10)!important; border-top:2px solid rgba(45,212,191,.22)!important; color:var(--tea)!important; font-weight:700!important; }
.detail-grandtotal-row td { background:rgba(245,166,35,.14)!important; border-top:2px solid rgba(245,166,35,.32)!important; color:var(--acc-l)!important; font-weight:800!important; }

/* Projection variance chips */
.trend-chip { display:inline-flex; align-items:center; justify-content:flex-end; min-width:70px; padding:3px 8px; border-radius:999px; font:700 11px/1 'Syne',sans-serif; font-variant-numeric:tabular-nums; white-space:nowrap; }
.trend-chip.positive { color:#4ade80!important; background:rgba(74,222,128,.13)!important; border:1px solid rgba(74,222,128,.3)!important; }
.trend-chip.negative { color:#f87171!important; background:rgba(248,113,113,.13)!important; border:1px solid rgba(248,113,113,.3)!important; }
.trend-chip.neutral  { color:var(--tea)!important; background:rgba(45,212,191,.10)!important; border:1px solid rgba(45,212,191,.22)!important; }

/* ── Charts ── */
.hbars { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.hb-row { display:flex; align-items:center; gap:10px; }
.hb-name { width:110px; flex-shrink:0; color:var(--txt2); font-size:10.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.hb-track { flex:1; height:9px; background:rgba(255,255,255,.06); border-radius:6px; overflow:hidden; }
.hb-fill { height:100%; border-radius:6px; transition:width .6s cubic-bezier(.4,0,.2,1); }
.hb-fill::after { content:''; position:absolute; top:0;left:0;right:0;bottom:0; background:linear-gradient(180deg,rgba(255,255,255,.22),transparent); border-radius:6px; }
.hb-val { min-width:52px; text-align:right; font-family:'Syne',sans-serif; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
.donut-svg { filter: drop-shadow(0 4px 14px rgba(0,0,0,.4)); }
.lc-grid { stroke:rgba(255,255,255,.055); stroke-dasharray:3,5; }
.lc-line { fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.daily-line { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.daily-line.current { stroke-width:3; }
.daily-legend { padding:14px 16px; border-top:1px solid rgba(255,255,255,.05); display:flex; flex-wrap:wrap; gap:10px; }
.daily-legend-item { flex:1; min-width:160px; background:rgba(7,9,15,.8); border:1px solid var(--brd); border-radius:12px; padding:10px 12px; }
.daily-legend-kpi { font-family:'Syne',sans-serif; font-size:18px; font-weight:800; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }

/* ── Story Cards ── */
.story-card {
  background: linear-gradient(160deg,rgba(17,24,39,.98),rgba(10,15,24,.98));
  border: 1px solid var(--brd2);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--sh-card);
  transition: transform var(--tr), box-shadow var(--tr);
}
.story-card:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(0,0,0,.4); }
.story-card::before { height: 3px; border-radius: 20px 20px 0 0; }
.story-card.accent::before { background: linear-gradient(90deg,var(--acc),var(--acc-l)); }
.story-card.blu::before    { background: linear-gradient(90deg,var(--blu),#82c4ff); }
.story-card.grn::before    { background: linear-gradient(90deg,var(--grn),#6ee7b7); }
.story-card.tea::before    { background: linear-gradient(90deg,var(--tea),#5eead4); }
.story-card.pur::before    { background: linear-gradient(90deg,var(--pur),#d8b4fe); }
.story-card .story-value { font-size:24px; font-weight:800; letter-spacing:-.8px; }
.story-card .story-meta  { font-size:11.5px; color:var(--txt2); line-height:1.55; }
.story-progress-bar { transition: width .8s cubic-bezier(.4,0,.2,1); }

/* ── Action buttons ── */
.table-action-btn, .detail-tool-btn {
  min-height: 34px;
  background: rgba(14,20,34,.95);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: var(--txt2);
  font-size: 11px; font-weight: 600;
  padding: 6px 13px;
  transition: all var(--tr);
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.table-action-btn:hover, .detail-tool-btn:hover {
  border-color: rgba(245,166,35,.4);
  color: var(--acc-l);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
.table-action-btn:active, .detail-tool-btn:active { transform: scale(.97); opacity: .85; }
.table-action-btn--accent, .detail-tool-btn--accent {
  background: rgba(245,166,35,.14);
  border-color: rgba(245,166,35,.35);
  color: var(--acc-l);
}

/* ── Column filter menu ── */
.detail-col-menu {
  background: rgba(5,8,14,.99);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.58);
  backdrop-filter: none;
}
.detail-col-menu::before { background: rgba(5,8,14,.99); }
.detail-head-filter {
  background: rgba(10,15,26,.96);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: var(--txt2);
  font-size: 10px; font-weight: 600;
  transition: all var(--tr);
  min-height: 28px;
}
.detail-head-filter:hover, .detail-head.is-sorted .detail-head-filter { border-color: rgba(245,166,35,.32); color: var(--acc-l); }
.detail-head.is-filtered .detail-head-filter { background:rgba(245,166,35,.18)!important; border-color:rgba(245,166,35,.45)!important; color:#ffd07a!important; box-shadow:0 0 8px rgba(245,166,35,.2)!important; }
.detail-col-menu-layer { z-index: 50 !important; }

/* ── Toolbar responsive fix ── */
@media(max-width:960px) { .detail-toolbar-main { grid-template-columns:minmax(200px,1.4fr) repeat(2,minmax(120px,.7fr)) auto!important; } }
@media(max-width:760px) { .detail-toolbar-main { grid-template-columns:1fr 1fr!important; } .detail-toolbar-main>*:last-child{grid-column:1/-1;} }
@media(max-width:520px) { .detail-toolbar-main { grid-template-columns:1fr!important; } }

/* ── Grupo strip ── */
.gk {
  background: linear-gradient(160deg,rgba(17,24,39,.98),rgba(10,15,24,.98));
  border: 1px solid var(--brd2);
  border-radius: 12px;
  padding: 11px 14px;
  min-width: 130px;
  transition: transform .14s cubic-bezier(.34,1.56,.64,1), border-color var(--tr), box-shadow var(--tr);
}
.gk.clickable:hover { transform:translateY(-2px); border-color:rgba(245,166,35,.35); box-shadow:0 8px 20px rgba(0,0,0,.28); }
.gk.clickable.active { border-color:rgba(245,166,35,.6)!important; background:rgba(245,166,35,.10); box-shadow:0 0 0 1px rgba(245,166,35,.22),0 8px 22px rgba(0,0,0,.25); }
.gk.clickable:active { transform:scale(.97)!important; }

/* ── Search boxes ── */
.search-box { background:rgba(10,15,26,.96); border:1px solid rgba(255,255,255,.1); border-radius:9px; min-height:38px; transition:border-color var(--tr),box-shadow var(--tr); }
.search-box:focus-within, .search-wrap.is-open .search-box { border-color:rgba(245,166,35,.5); box-shadow:0 0 0 3px rgba(245,166,35,.12); }
.search-dd { background:rgba(5,8,14,.99); border:1px solid rgba(255,255,255,.1); border-radius:12px; box-shadow:var(--sh-float); }
.search-dd-item:hover { background:rgba(245,166,35,.08); }
.search-chip { background:rgba(245,166,35,.10); border:1px solid rgba(245,166,35,.28); color:var(--acc-l); font-size:11px; font-weight:600; }

/* ── Overlay ── */
.overlay { background:rgba(4,6,12,.95)!important; backdrop-filter: none!important; }
.spin { border-top-color:var(--acc-l)!important; box-shadow:0 0 20px rgba(255,208,122,.3)!important; }
.ovtxt { font-family:'Syne',sans-serif; font-size:11px; letter-spacing:2px; color:var(--mut); font-weight:700; }

/* ── Scrollbars ── */
.tw::-webkit-scrollbar, .aimsgs::-webkit-scrollbar, .ai-msgs::-webkit-scrollbar { height:5px; width:5px; }
.tw::-webkit-scrollbar-track, .ai-msgs::-webkit-scrollbar-track { background:transparent; }
.tw::-webkit-scrollbar-thumb, .ai-msgs::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:99px; }
.tw::-webkit-scrollbar-thumb:hover { background:rgba(245,166,35,.4); }

/* ── Skeletons ── */
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.skel { background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.05) 75%); background-size:200% 100%; animation:shimmer 1.6s ease infinite; border-radius:5px; }
.kpi--loading .kpi-val { color:transparent!important; background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.06) 75%); background-size:200% 100%; animation:shimmer 1.5s ease infinite!important; border-radius:6px; display:block; min-width:80px; height:1.1em; }

/* ── Page transitions ── */
@keyframes page-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.page.on { animation:page-in .2s cubic-bezier(.4,0,.2,1); }
.page:not(.on) { content-visibility:auto; contain-intrinsic-size:0 600px; }

/* ── Mark / highlight ── */
mark { background:rgba(245,166,35,.28); color:var(--acc-l); border-radius:3px; padding:0 2px; }

/* ── Mobile dock ── */
@media(max-width:860px) {
  .mobile-dock { background:rgba(5,8,14,.98)!important; border-color:rgba(245,166,35,.16)!important; border-radius:20px!important; backdrop-filter: none!important; box-shadow:0 16px 40px rgba(0,0,0,.45)!important; }
  .mobile-dock-btn { background:rgba(14,20,34,.95)!important; border-radius:14px!important; font-size:12.5px!important; font-weight:700!important; color:var(--txt2)!important; min-height:46px!important; }
  .mobile-dock-btn:hover { background:rgba(245,166,35,.14)!important; color:var(--acc-l)!important; }
}

/* ── Error bar ── */
.ebar { background:rgba(255,90,90,.07)!important; border:1px solid rgba(255,90,90,.22)!important; border-radius:16px!important; }
.snote { background:rgba(5,8,14,.6)!important; border-top:1px solid rgba(255,255,255,.05)!important; border-radius:0 0 20px 20px!important; font-size:11px!important; }

/* ── Toast ── */
.ux-toast { background:rgba(7,9,15,.98)!important; border:1px solid rgba(255,255,255,.1)!important; border-radius:999px!important; padding:9px 20px!important; font-family:'DM Sans',sans-serif!important; font-weight:600!important; font-size:12.5px!important; box-shadow:0 16px 36px rgba(0,0,0,.38)!important; }

/* ── Focus ring ── */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none!important;
  box-shadow: 0 0 0 2px rgba(245,166,35,.22), 0 0 0 4px rgba(245,166,35,.09)!important;
  border-color: rgba(245,166,35,.55)!important;
}

/* ── Projection hero ── */
.proj-hero-title { font-size:24px; font-weight:800; letter-spacing:-.8px; color:var(--tea); }
.proj-hero-item { background:rgba(10,15,24,.9); border:1px solid var(--brd2); border-radius:14px; padding:14px; transition:transform var(--tr),box-shadow var(--tr); }
.proj-hero-item:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.3); }

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce) {
  *, .ap, .gk.clickable, .kpi, .story-card, .skel { animation:none!important; transition:none!important; }
}

/* ── AI Panel animation (referenced by index.html) ── */
@keyframes ai-panel-in {
  from { opacity:0; transform:translateY(10px) scale(.98); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ══════════════════════════════════════════════════════════════
   v7.2 — Filter menu: fix overflow + z-index + bounds bugs
   ══════════════════════════════════════════════════════════════ */

/* Enforce maxHeight strictly so menu never bleeds outside viewport.
   overflow:hidden clips the content; the ::before arrow sits in the
   padding-top space (8px) so it remains visible despite clip. */
.detail-col-menu {
  overflow: hidden !important;
  /* Space at top for the ::before triangle arrow */
  margin-top: 0 !important;
}

/* Arrow triangle: keep it visible above the clipped area */
.detail-col-menu::before {
  /* Position above the menu box - not clipped because it's in margin area */
  top: -7px !important;
  z-index: 1 !important;
}

/* When menu opens ABOVE the trigger, arrow is at the bottom */
.detail-col-menu[data-placement="top"]::before {
  top: auto !important;
  bottom: -7px !important;
}

/* Layer z-index: must be above table sticky headers (z:2) and
   all other fixed/absolute elements in the card */
.detail-col-menu-layer {
  z-index: 200 !important;
  /* Keep absolute so menu scrolls with the trigger when page scrolls */
  position: absolute !important;
  overflow: visible !important;
}

/* Ensure the card doesn't clip the layer */
.card {
  overflow: visible !important;
}

/* List: always with scroll when content exceeds max-height */
.detail-col-menu__list {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* max-height is controlled via JS CSS variable */
  max-height: var(--detail-col-menu-list-max-height, 160px) !important;
}

/* Footer: solid background to always be readable over list content */
.detail-col-menu__footer {
  background: #0d1526 !important;
  border-top: 1px solid rgba(148, 163, 184, .2) !important;
  padding-top: 10px !important;
  flex-shrink: 0 !important;
  /* Ensure footer is always at the bottom of the clamped menu */
  position: sticky !important;
  bottom: 0 !important;
  margin: 0 -10px -10px !important;
  padding: 10px 10px 10px !important;
}

/* ─── Bottom sheet: filtros en mobile (< 600px) ────────────────────── */
.filter-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:490;backdrop-filter: none}
.filter-backdrop.visible{display:block}
@media(max-width:599px){
  .filter-panel{position:fixed!important;bottom:0!important;left:0!important;right:0!important;top:auto!important;z-index:500;border-radius:18px 18px 0 0;max-height:82svh;overflow-y:auto;transform:translateY(105%);transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:0 -8px 32px rgba(0,0,0,.35)}
  .filter-panel.sheet-open{transform:translateY(0)}
  .filter-panel .fp-inner{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
}

/* ═══════════════════════════════════════════════════════════════════════
   v30 — VISUAL REFRESH + LIGHT MODE + NUEVOS COMPONENTES
   ═══════════════════════════════════════════════════════════════════════ */

/* ── KPI cards más prolijos ── */
.kpi{
  background:var(--card);
  border:1px solid var(--brd);
  border-radius:16px;
  padding:14px 16px;
  position:relative;
  overflow:hidden;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:var(--shadow-sm);
}
.kpi:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:rgba(251,191,36,.28);
}
.kpi::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:16px 16px 0 0;opacity:.85;
}
.kpi.a::before{ background:var(--grad-acc); }
.kpi.b::before{ background:var(--grad-blu); }
.kpi.g::before{ background:var(--grad-grn); }
.kpi.p::before{ background:var(--grad-pur); }
.kpi-val{
  font-family:'Syne',sans-serif;
  font-size:24px;
  font-weight:800;
  letter-spacing:-1px;
  line-height:1;
  background:var(--grad-acc);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--acc);
}
.kpi.b .kpi-val{ background:var(--grad-blu); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.kpi.g .kpi-val{ background:var(--grad-grn); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.kpi.p .kpi-val{ background:var(--grad-pur); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ── Cards con polish más fino ── */
.card{
  transition:border-color .2s ease, box-shadow .2s ease;
}
.card:hover{
  border-color:rgba(251,191,36,.18);
}

/* ── Tabs activas con underline más visible ── */
.tab.on{
  position:relative;
}
.tab.on::after{
  content:'';position:absolute;bottom:-2px;left:14px;right:14px;
  height:3px;border-radius:3px 3px 0 0;
  background:var(--grad-acc);
}

/* ── Filtro pills más legibles ── */
.ap{
  font-weight:600;
  transition:all .15s ease;
}
.ap:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.ax:hover{ color:var(--red); transform:scale(1.2); }

/* ── Theme toggle en header ── */
.theme-toggle{
  width:34px;height:34px;border-radius:50%;
  background:var(--card);border:1px solid var(--brd);
  color:var(--mut);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;
  transition:all .2s ease;
  margin-right:8px;
}
.theme-toggle:hover{
  background:var(--acc-soft);border-color:var(--acc);color:var(--acc);
  transform:rotate(20deg);
}
.theme-toggle:focus{ outline:2px solid var(--acc); outline-offset:2px; }

/* ── BCRA dollar widget en header ── */
.bcra-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--card);border:1px solid var(--brd);
  border-radius:20px;padding:5px 11px;font-size:11px;
  color:var(--txt);
  transition:all .2s ease;
  margin-right:8px;
  cursor:default;
}
.bcra-pill:hover{ border-color:var(--grn); }
.bcra-pill .bcra-icn{ font-size:13px; line-height:1; }
.bcra-pill .bcra-lbl{ color:var(--mut); font-size:9.5px; text-transform:uppercase; letter-spacing:.6px; font-weight:600; }
.bcra-pill .bcra-val{ font-family:'Syne',sans-serif; font-weight:700; color:var(--grn); font-size:12px; }
.bcra-pill .bcra-sub{ color:var(--mut); font-size:9.5px; }
.bcra-pill.loading .bcra-val{ color:var(--mut); }
.bcra-pill.error{ border-color:rgba(248,113,113,.4); }
.bcra-pill.error .bcra-val{ color:var(--red); }
.bcra-tooltip{ position:relative; }
.bcra-tooltip:hover .bcra-tt-body{ opacity:1; pointer-events:auto; transform:translateY(0); }
.bcra-tt-body{
  position:absolute;top:calc(100% + 8px);right:0;z-index:600;
  background:var(--card);border:1px solid var(--brd);border-radius:12px;
  padding:10px 12px;min-width:240px;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease;
  font-size:11px;
}
.bcra-tt-row{ display:flex;justify-content:space-between;align-items:center;padding:4px 0;gap:18px; }
.bcra-tt-row + .bcra-tt-row{ border-top:1px solid var(--brd); }
.bcra-tt-row .lbl{ color:var(--mut); text-transform:capitalize; }
.bcra-tt-row .val{ color:var(--txt); font-weight:600; font-family:'Syne',sans-serif; }
.bcra-tt-foot{ margin-top:8px;padding-top:8px;border-top:1px solid var(--brd);color:var(--mut);font-size:10px; }
@media(max-width:599px){
  .bcra-pill .bcra-sub, .bcra-pill .bcra-lbl{ display:none; }
}

/* ═══════════════════════════════════════════════════════════
   RESUMEN ACUMULADO — v33 (Entrega 5)
   UI profesional, paleta homogénea, mobile-friendly
   ═══════════════════════════════════════════════════════════ */

/* ── Toolbar principal ── */
.acsum-toolbar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:12px 14px;
  background:var(--acsum-toolbar-bg,var(--surf));
  border:1px solid var(--acsum-toolbar-brd,var(--brd));
  border-radius:14px;margin-bottom:14px;
}
.acsum-toolbar > div{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.acsum-toolbar label{
  font-size:10px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--mut);font-weight:700;white-space:nowrap;
}

/* ── Selector de modo: pill group ── */
.acsum-mode-btns{
  display:flex;gap:3px;
  background:var(--card);border:1px solid var(--brd);
  border-radius:10px;padding:3px;
}
.acsum-mode-btn{
  background:transparent;border:none;color:var(--mut);
  font-size:11.5px;font-weight:600;
  padding:6px 13px;border-radius:7px;cursor:pointer;
  transition:background .15s,color .15s;
  white-space:nowrap;
}
.acsum-mode-btn:hover{ color:var(--txt);background:var(--card2); }
.acsum-mode-btn.on{
  background:var(--acsum-btn-on-bg,var(--acc));
  color:var(--acsum-btn-on-color,#0b1220);
}

/* ── Selector de vista: chips ── */
.acsum-view-btns{ display:flex;flex-wrap:wrap;gap:5px; }
.acsum-view-btn{
  background:var(--card);border:1px solid var(--brd);color:var(--mut);
  font-size:11.5px;font-weight:500;
  padding:5px 13px;border-radius:999px;cursor:pointer;
  transition:all .15s;
}
.acsum-view-btn:hover{ border-color:var(--blu);color:var(--blu); }
.acsum-view-btn.on{
  background:rgba(110,168,254,.13);
  border-color:var(--blu);color:var(--blu);
  font-weight:600;
}

/* ── Meta pills (modo activo / conteo / rango) ── */
.acsum-meta{
  display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  font-size:11px;color:var(--mut);margin-bottom:10px;
}
.acsum-meta-pill{
  background:var(--card);border:1px solid var(--brd);
  border-radius:999px;padding:3px 11px;
  white-space:nowrap;
}
.acsum-meta-pill.highlight{
  background:var(--acsum-pos-soft,rgba(76,201,166,.1));
  border-color:var(--acsum-pos-border);
  color:var(--acsum-pos,var(--grn));
}

/* ── Cabecera de la card (título dinámico + badge) ── */
.acsum-card-title{
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.7px;color:var(--mut);
}
.acsum-period-labels{
  display:inline-flex;gap:8px;align-items:center;margin-left:6px;
  font-size:10.5px;font-weight:600;color:var(--acc);
}
.acsum-period-sep{ color:var(--mut);font-weight:400; }

/* ── Tabla comparativa ── */
.acsum-table{ width:100%;border-collapse:collapse; }
.acsum-table th,.acsum-table td{
  padding:9px 11px;text-align:left;
  font-size:var(--acsum-td-size,12.5px);
  border-bottom:1px solid var(--brd);
}
.acsum-table th{
  font-size:var(--acsum-th-size,10.5px);
  text-transform:uppercase;letter-spacing:.6px;
  color:var(--mut);font-weight:700;
  position:sticky;top:0;z-index:1;
  background:var(--surf);
  white-space:nowrap;
}
.acsum-table th.r,.acsum-table td.r{
  text-align:right;font-variant-numeric:tabular-nums;
}
.acsum-table tbody tr:nth-child(even){
  background:var(--table-zebra-bg);
}
.acsum-table tbody tr:hover{ background:var(--table-hover-bg); }
.acsum-table tbody tr.acsum-row-lost{
  background:var(--acsum-row-lost-bg);
  border-left:2px solid var(--acsum-row-lost-brd);
}
/* Primera col (nombre) más visible */
.acsum-table td:nth-child(2){ font-weight:500;color:var(--txt2); }

/* ── Celdas de variación ── */
.acsum-delta-pos{
  color:var(--acsum-pos,var(--grn));
  font-weight:600;
}
.acsum-delta-neg{
  color:var(--acsum-neg,var(--red));
  font-weight:600;
}
.acsum-delta-zero{ color:var(--acsum-neu,var(--mut)); }

/* ── Mini barra de variación (inline en columna Var %) ── */
.acsum-bar-wrap{
  display:flex;align-items:center;gap:6px;justify-content:flex-end;
}
.acsum-bar-track{
  width:48px;height:var(--acsum-bar-h,3px);
  background:var(--table-meter-track);
  border-radius:var(--acsum-bar-radius,2px);
  overflow:hidden;flex-shrink:0;
}
.acsum-bar-fill{
  height:100%;border-radius:inherit;
  transition:width .3s ease;
}
.acsum-bar-fill.pos{ background:var(--acsum-pos,var(--grn)); }
.acsum-bar-fill.neg{ background:var(--acsum-neg,var(--red)); }

/* ── Tag "perdido" ── */
.acsum-tag-perdido{
  display:inline-block;
  background:var(--acsum-neg-soft,rgba(224,122,122,.12));
  border:1px solid var(--acsum-neg-border,rgba(224,122,122,.3));
  color:var(--acsum-neg,var(--red));
  font-size:9px;padding:1px 6px;border-radius:5px;
  text-transform:uppercase;letter-spacing:.5px;
  font-weight:700;margin-left:6px;vertical-align:middle;
}

/* ── Estado vacío / cargando ── */
.acsum-running{ color:var(--blu); }

/* ── Fila de TOTALES al pie de la tabla ── */
.acsum-row-total{
  border-top:2px solid var(--brd-2,var(--brd));
}
.acsum-row-total td{
  font-weight:700;font-size:12.5px;
  background:var(--card2,var(--card));
  color:var(--txt);
  padding:10px 11px;
}
.acsum-total-label{
  font-size:11px;text-transform:uppercase;
  letter-spacing:.8px;color:var(--mut);font-weight:700;
}

/* ── Columna año actual: leve acento visual ── */
.acsum-col-actual{ color:var(--txt);font-weight:600; }

/* ── Encabezados de período en el título ── */
.acsum-period-labels{
  display:inline-flex;gap:6px;align-items:center;
  margin-left:8px;font-size:11px;
}
.acsum-period-hist{ color:var(--mut); }
.acsum-period-sep{ color:var(--brd-2,var(--brd));font-weight:400; }
.acsum-period-actual{ color:var(--acc);font-weight:700; }

/* ── Columna # más angosta ── */
.acsum-th-num,.acsum-td-num{ min-width:0; }
.acsum-table th.acsum-th-num{ width:32px; }

/* ── Columna nombre: ocupa el espacio disponible ── */
.acsum-td-name{ font-weight:500;color:var(--txt2); }

/* ── Mobile: ocultar columnas secundarias ── */
@media(max-width:599px){
  .acsum-table .col-varkg,
  .acsum-table .col-pct-total{ display:none; }
}

/* ── Charts: bordes más finos en light mode ── */
:root[data-theme="light"] .lc-grid, :root[data-theme="light"] .daily-grid{
  stroke:rgba(15,23,42,.08);
}
:root[data-theme="light"] .lc-lbl, :root[data-theme="light"] .daily-grid-label, :root[data-theme="light"] .daily-axis-label{
  fill:var(--mut);
}

/* ── Chips de filtros mejorados ── */
.filter-count-chip{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--grad-acc);color:#0a0d16;
  border-radius:999px;padding:1px 7px;
  font-size:10px;font-weight:800;
  margin-left:4px;
}


/* ── Projection hierarchy (coordinador > agente) ─────────────────────────── */
.projection-hierarchy-card{margin-top:12px}
.projection-hierarchy-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:0 14px 10px}
.projection-hierarchy-toolbar__summary,.projection-hierarchy-toolbar__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.projection-hierarchy-toolbar__actions{justify-content:flex-end}
.projection-hierarchy-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(45,212,191,.18);background:rgba(45,212,191,.08);font-size:11px;color:var(--tea);white-space:nowrap}
.projection-hierarchy-chip.positive{color:var(--grn);border-color:rgba(34,197,94,.24);background:rgba(34,197,94,.10)}
.projection-hierarchy-chip.negative{color:var(--red);border-color:rgba(239,68,68,.24);background:rgba(239,68,68,.10)}
.projection-hierarchy-chip.neutral{color:var(--txt);border-color:rgba(148,163,184,.18);background:rgba(148,163,184,.10)}
.projection-hierarchy-control{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border-radius:12px;border:1px solid rgba(148,163,184,.16);background:rgba(15,23,42,.28);font-size:11px;color:var(--mut);min-height:34px}
.projection-hierarchy-control select{width:auto;min-width:156px;min-height:32px;padding:6px 30px 6px 10px;font-size:11px;background-color:transparent}
.projection-hierarchy-control--toggle{cursor:pointer;user-select:none}
.projection-hierarchy-control--toggle input{accent-color:var(--tea);margin:0}
.projection-hierarchy-wrap{overflow:auto;padding-bottom:2px}
.projection-hierarchy-table{width:100%;min-width:780px;border-collapse:separate;border-spacing:0}
.projection-hierarchy-table th,.projection-hierarchy-table td{padding:11px 12px;border-bottom:1px solid rgba(148,163,184,.12);vertical-align:middle}
.projection-hierarchy-table thead th{position:sticky;top:0;background:rgba(11,18,32,.97);backdrop-filter: none;z-index:3}
.projection-hierarchy-table th:first-child,.projection-hierarchy-table td:first-child{position:sticky;left:0;z-index:2;box-shadow:1px 0 0 rgba(148,163,184,.08)}
.projection-hierarchy-table thead th:first-child{z-index:4}
.proj-hierarchy-row--group td{background:linear-gradient(180deg,rgba(45,212,191,.10),rgba(45,212,191,.06));font-weight:700}
.proj-hierarchy-row--group td:first-child{background:linear-gradient(180deg,rgba(45,212,191,.14),rgba(45,212,191,.08))}
.proj-hierarchy-row--group.is-positive td:first-child{box-shadow:inset 3px 0 0 rgba(34,197,94,.72),1px 0 0 rgba(148,163,184,.08)}
.proj-hierarchy-row--group.is-negative td:first-child{box-shadow:inset 3px 0 0 rgba(239,68,68,.72),1px 0 0 rgba(148,163,184,.08)}
.proj-hierarchy-row--group.is-neutral td:first-child{box-shadow:inset 3px 0 0 rgba(148,163,184,.52),1px 0 0 rgba(148,163,184,.08)}
.proj-hierarchy-row--agent td{background:rgba(15,23,42,.22)}
.proj-hierarchy-row--agent td:first-child{background:rgba(15,23,42,.28)}
.proj-hierarchy-row--total td{background:linear-gradient(180deg,rgba(245,158,11,.12),rgba(245,158,11,.08));font-weight:800;border-top:1px solid rgba(245,158,11,.28)}
.proj-hierarchy-row--total td:first-child{background:linear-gradient(180deg,rgba(245,158,11,.16),rgba(245,158,11,.10))}
.proj-hierarchy-toggle{display:flex;align-items:flex-start;gap:10px;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.proj-hierarchy-caret{display:inline-flex;align-items:center;justify-content:center;width:16px;color:var(--tea);font-size:12px;line-height:1.2;padding-top:2px;flex:0 0 16px}
.proj-hierarchy-name-wrap{display:flex;flex-direction:column;gap:6px;min-width:0}
.proj-hierarchy-name{font-weight:800;letter-spacing:.15px}
.proj-hierarchy-group-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.proj-hierarchy-pill{display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;border-radius:999px;border:1px solid rgba(45,212,191,.20);background:rgba(45,212,191,.10);color:var(--tea);font-size:10px;font-weight:700;line-height:1}
.proj-hierarchy-pill--subtle{border-color:rgba(148,163,184,.18);background:rgba(148,163,184,.10);color:var(--mut)}
.proj-hierarchy-pill--positive{border-color:rgba(34,197,94,.24);background:rgba(34,197,94,.12);color:var(--grn)}
.proj-hierarchy-pill--negative{border-color:rgba(239,68,68,.24);background:rgba(239,68,68,.12);color:var(--red)}
.proj-hierarchy-agent-cell{display:flex;flex-direction:column;gap:2px;padding-left:28px}
.proj-hierarchy-agent-code{font-weight:700;color:var(--txt)}
.proj-hierarchy-agent-sub{font-size:11px;color:var(--mut);line-height:1.35}
@media(max-width:980px){
  .projection-hierarchy-toolbar{grid-template-columns:1fr}
  .projection-hierarchy-toolbar__actions{justify-content:flex-start}
}
@media(max-width:900px){
  .projection-hierarchy-table{min-width:700px}
}
@media(max-width:640px){
  .projection-hierarchy-toolbar{padding:0 12px 10px}
  .projection-hierarchy-control{width:100%;justify-content:space-between}
  .projection-hierarchy-control select{width:100%;min-width:0;max-width:220px}
  .projection-hierarchy-table{min-width:640px}
  .projection-hierarchy-table th,.projection-hierarchy-table td{padding:9px 10px}
  .proj-hierarchy-agent-cell{padding-left:18px}
}

.projection-family-summary-card{margin-top:12px}
.projection-family-summary-note{padding:0 14px 10px;color:var(--mut);font-size:12px;line-height:1.5}
.projection-family-summary-table .proj-hierarchy-row--summary td{background:rgba(15,23,42,.22);font-weight:700}
.projection-family-summary-table .proj-hierarchy-row--summary td:first-child{background:rgba(15,23,42,.30)}
.projection-family-card,.projection-product-card{margin-top:12px}
@media(max-width:640px){
  .projection-family-summary-note{padding:0 12px 10px}
}

/* v40 · middle-click drag for quick-group strips + share metrics in chart rows */
.grupo-strip.is-middle-dragging{
  cursor:grabbing;
  user-select:none;
  scroll-behavior:auto;
}

.grupo-strip.is-middle-dragging .gk{
  pointer-events:none;
}

body.cursor-middle-dragging,
body.cursor-middle-dragging *{
  cursor:grabbing !important;
}

.hb-metrics{
  min-width:88px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  flex-shrink:0;
}

.hb-share{
  font-size:10px;
  line-height:1.1;
  color:var(--mut);
  font-variant-numeric:tabular-nums;
  letter-spacing:.15px;
}

@media (max-width:760px){
  .hb-metrics{
    min-width:74px;
  }
  .hb-share{
    font-size:9.5px;
  }
}


/* v44 mobile/date/touch refinements */
.detail-date-picker{display:none}
.daily-compare-shell{position:relative}
.daily-touch-tooltip{position:absolute;z-index:6;left:12px;top:12px;padding:7px 10px;border-radius:10px;border:1px solid rgba(245,166,35,.42);background:rgba(13,18,28,.96);color:var(--txt);font-size:11px;line-height:1.35;box-shadow:0 12px 32px rgba(0,0,0,.32);pointer-events:none;max-width:min(260px,calc(100% - 20px))}
.daily-dot-hit.is-active + .daily-dot{r:5 !important;stroke:#0b1220;stroke-width:2.4}


/* v45 mobile polish: tabs + accumulated table density */
@media (max-width: 767px) {
  .tabs-bar {
    box-shadow: none !important;
  }

  .tab {
    -webkit-tap-highlight-color: transparent;
  }

  .acum-table:has(#at-clie) th {
    font-size: 9.2px !important;
  }

  .acum-table:has(#at-clie) td {
    font-size: 10px !important;
  }

  .acum-table:has(#at-clie) td:nth-child(5),
  .acum-table:has(#at-clie) td:nth-child(6) {
    font-variant-numeric: tabular-nums;
  }

  .acum-table:has(#at-coord) td:nth-child(3),
  .acum-table:has(#at-agte) td:nth-child(3),
  .acum-table:has(#at-grp) td:nth-child(3),
  .acum-table:has(#at-mrc) td:nth-child(3),
  .acum-table:has(#at-coord) td:nth-child(4),
  .acum-table:has(#at-agte) td:nth-child(4),
  .acum-table:has(#at-grp) td:nth-child(4),
  .acum-table:has(#at-mrc) td:nth-child(4) {
    font-variant-numeric: tabular-nums;
  }

  .acum-table:has(#at-coord) .mini-bar-track,
  .acum-table:has(#at-agte) .mini-bar-track,
  .acum-table:has(#at-grp) .mini-bar-track,
  .acum-table:has(#at-mrc) .mini-bar-track,
  .acum-table:has(#at-clie) .mini-bar-track {
    height: 6px !important;
  }

  #projectionHierarchyTable th,
  #projectionProductHierarchyTable th,
  #projectionFamilySummaryTable th {
    font-size: 10px !important;
    letter-spacing: .35px !important;
  }
}


/* === Compacto por cliente + expansion inline === */
.detail-data-row--toggle{cursor:pointer}
.detail-data-row--toggle td{transition:background .18s ease,border-color .18s ease}
.detail-data-row--toggle:hover td{background:rgba(245,166,35,.06)}
.detail-data-row--toggle.is-expanded td{background:rgba(245,166,35,.08)}
.detail-client-toggle__label{display:inline-flex;align-items:center;gap:8px;min-width:0}
.detail-client-toggle__caret{display:inline-flex;align-items:center;justify-content:center;width:16px;color:var(--acc-light);font-size:12px;flex-shrink:0}
.detail-client-breakdown-row td{padding:0!important;background:rgba(9,14,28,.78)!important;border-top:1px solid rgba(245,166,35,.12)!important;border-bottom:1px solid rgba(245,166,35,.1)!important}
.detail-client-breakdown{display:grid;gap:14px;padding:16px 18px}
.detail-client-breakdown__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.detail-client-breakdown__eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.65px;color:var(--mut);font-weight:700}
.detail-client-breakdown__title{font-size:15px;font-weight:800;color:var(--txt)}
.detail-client-breakdown__summary{display:flex;gap:8px;flex-wrap:wrap}
.detail-client-breakdown__grid{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(420px,1.3fr);gap:14px}
.detail-client-breakdown__panel{display:grid;gap:10px;padding:12px 14px;border:1px solid rgba(148,163,184,.12);border-radius:14px;background:rgba(15,23,42,.38)}
.detail-client-breakdown__panel-title{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--mut);font-weight:700}
.detail-client-breakdown__table-wrap{overflow:auto;border:1px solid rgba(148,163,184,.08);border-radius:12px}
.detail-client-breakdown__table-wrap--products{max-height:320px}
.detail-client-breakdown__table{width:100%;border-collapse:collapse;min-width:520px}
.detail-client-breakdown__table th,.detail-client-breakdown__table td{padding:9px 10px;border-bottom:1px solid rgba(148,163,184,.08);font-size:12px;vertical-align:top}
.detail-client-breakdown__table th{position:sticky;top:0;background:rgba(11,18,34,.96);z-index:1;color:var(--mut);text-transform:uppercase;font-size:10px;letter-spacing:.55px}
.detail-client-breakdown__table tbody tr:last-child td{border-bottom:none}
.detail-client-breakdown__empty{padding:14px;color:var(--mut);font-size:12px;line-height:1.5}
.detail-client-breakdown--loading,.detail-client-breakdown--error{padding:16px 18px}
@media (max-width: 980px){
  .detail-client-breakdown__grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .detail-client-breakdown{padding:14px}
  .detail-client-breakdown__table{min-width:460px}
}


/* v55 · visual hierarchy refresh (detalle / proyeccion / acumulados / frecuencia) */
:root{
  --ux-card-head-bg: linear-gradient(90deg, rgba(22,32,58,.96) 0%, rgba(17,29,56,.94) 52%, rgba(13,24,47,.96) 100%);
  --ux-card-head-border: rgba(96,165,250,.16);
  --ux-card-head-title: #f7fbff;
  --ux-card-head-eyebrow: #b4c9ea;
  --ux-card-head-badge-bg: rgba(148,163,184,.12);
  --ux-card-head-badge-text: #dbe9ff;
  --ux-card-head-shadow: inset 0 -1px 0 rgba(148,163,184,.08), 0 10px 26px rgba(2,6,23,.16);
  --ux-table-head-bg: linear-gradient(180deg, rgba(31,46,79,.98) 0%, rgba(23,37,68,.98) 100%);
  --ux-table-head-text: #edf4ff;
  --ux-table-head-muted: #c5d4ee;
  --ux-table-head-border: rgba(110,146,209,.24);
  --ux-table-head-shadow: inset 0 -1px 0 rgba(148,163,184,.08), 0 1px 0 rgba(255,255,255,.03);
  --ux-summary-total-bg: linear-gradient(90deg, rgba(251,191,36,.18) 0%, rgba(245,158,11,.14) 100%);
  --ux-summary-total-text: #fff7d6;
}
:root[data-theme="light"]{
  --ux-card-head-bg: linear-gradient(90deg, rgba(236,243,255,.98) 0%, rgba(229,238,255,.98) 52%, rgba(223,234,253,.98) 100%);
  --ux-card-head-border: rgba(37,99,235,.14);
  --ux-card-head-title: #10213f;
  --ux-card-head-eyebrow: #42536d;
  --ux-card-head-badge-bg: rgba(255,255,255,.68);
  --ux-card-head-badge-text: #28426e;
  --ux-card-head-shadow: inset 0 -1px 0 rgba(37,99,235,.08), 0 10px 24px rgba(15,23,42,.06);
  --ux-table-head-bg: linear-gradient(180deg, rgba(232,240,255,.98) 0%, rgba(223,233,252,.98) 100%);
  --ux-table-head-text: #112446;
  --ux-table-head-muted: #445772;
  --ux-table-head-border: rgba(37,99,235,.16);
  --ux-table-head-shadow: inset 0 -1px 0 rgba(37,99,235,.08), 0 1px 0 rgba(255,255,255,.5);
  --ux-summary-total-bg: linear-gradient(90deg, rgba(245,158,11,.18) 0%, rgba(251,191,36,.14) 100%);
  --ux-summary-total-text: #6b3d00;
}

#page-detalle .detail-glance-grid,
#page-acumulados .detail-glance-grid{
  display:none !important;
}

#page-detalle .detail-summary-card > .ch,
#page-proyeccion .projection-card--highlight > .ch,
#page-acumulados .acum-card--highlight > .ch,
#page-resumen-acum .acsum-card--highlight > .ch,
#page-frecuencia .freq-card--highlight > .ch{
  padding: 14px 16px;
  border-bottom: 1px solid var(--ux-card-head-border);
  background: var(--ux-card-head-bg);
  box-shadow: var(--ux-card-head-shadow);
}
#page-detalle .detail-summary-card > .ch .ct,
#page-proyeccion .projection-card--highlight > .ch .ct,
#page-acumulados .acum-card--highlight > .ch .ct,
#page-resumen-acum .acsum-card--highlight > .ch .ct,
#page-frecuencia .freq-card--highlight > .ch .ct{
  color: var(--ux-card-head-title);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
}
#page-detalle .detail-summary-card > .ch .cbadge,
#page-proyeccion .projection-card--highlight > .ch .cbadge,
#page-acumulados .acum-card--highlight > .ch .cbadge,
#page-resumen-acum .acsum-card--highlight > .ch .cbadge,
#page-frecuencia .freq-card--highlight > .ch .cbadge{
  background: var(--ux-card-head-badge-bg);
  color: var(--ux-card-head-badge-text);
  border-color: rgba(148,163,184,.18);
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 12px;
}

#page-detalle #detailHead th,
#page-proyeccion .projection-hierarchy-table thead th,
#page-proyeccion .responsive-stack--projection thead th,
#page-acumulados .acum-table thead th,
#page-resumen-acum .acsum-table thead th,
#page-frecuencia .freq-table thead th{
  background: var(--ux-table-head-bg) !important;
  color: var(--ux-table-head-text);
  border-bottom: 1px solid var(--ux-table-head-border);
  box-shadow: var(--ux-table-head-shadow);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}
#page-detalle #detailHead th,
#page-acumulados .acum-table thead th,
#page-resumen-acum .acsum-table thead th,
#page-frecuencia .freq-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
}
#page-proyeccion .projection-hierarchy-table thead th:first-child{
  box-shadow: inset -1px 0 0 rgba(148,163,184,.08);
}
#page-detalle .detail-summary-card .tw,
#page-proyeccion .projection-card--highlight .tw,
#page-acumulados .acum-card--highlight .tw,
#page-resumen-acum .acsum-card--highlight .tw,
#page-frecuencia .freq-card--highlight .tw{
  background: linear-gradient(180deg, rgba(6,13,28,.08) 0%, rgba(6,13,28,0) 100%);
}

#page-proyeccion .projection-family-summary-card .projection-family-summary-note,
#page-proyeccion .projection-family-summary-card .snote,
#page-acumulados .snote,
#page-resumen-acum .snote,
#page-frecuencia .snote{
  color: var(--ux-card-head-eyebrow);
}
#page-proyeccion .projection-family-summary-table .proj-hierarchy-row--summary-total td{
  background: var(--ux-summary-total-bg) !important;
  color: var(--ux-summary-total-text);
  font-size: 13px;
  font-weight: 800;
  border-top: 1px solid rgba(251,191,36,.26);
  border-bottom: 1px solid rgba(251,191,36,.18);
}
#page-proyeccion .projection-family-summary-table .proj-hierarchy-row--summary-total td:first-child{
  font-size: 14px;
  letter-spacing: .35px;
}
#page-proyeccion .projection-family-summary-table .proj-hierarchy-row--summary-total .trend-chip{
  font-weight: 800;
}
#page-proyeccion .projection-family-summary-table .proj-hierarchy-row--summary td{
  background: rgba(18,28,49,.42);
}
#page-proyeccion .projection-family-summary-table .proj-hierarchy-row--summary td:first-child{
  background: rgba(18,28,49,.54);
}

#page-acumulados .acum-grid{
  align-items: start;
}
@media (min-width: 960px){
  #page-acumulados .acum-grid{
    grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
    gap: 12px;
  }
  #page-acumulados .acum-card--coord,
  #page-acumulados .acum-card--agent,
  #page-acumulados .acum-card--group,
  #page-acumulados .acum-card--brand,
  #page-acumulados .acum-card--client{
    align-self: start;
  }
}

#page-acumulados .acum-card--coord .tw,
#page-acumulados .acum-card--agent .tw,
#page-acumulados .acum-card--group .tw,
#page-acumulados .acum-card--brand .tw,
#page-acumulados .acum-card--client .tw{
  overflow-x: auto;
}
#page-acumulados .acum-card--coord tbody tr:nth-child(even),
#page-acumulados .acum-card--agent tbody tr:nth-child(even),
#page-acumulados .acum-card--group tbody tr:nth-child(even),
#page-acumulados .acum-card--brand tbody tr:nth-child(even),
#page-acumulados .acum-card--client tbody tr:nth-child(even),
#page-resumen-acum .acsum-table tbody tr:nth-child(even),
#page-frecuencia .freq-table tbody tr:nth-child(even){
  background: rgba(148,163,184,.035);
}

@media (max-width: 640px){
  #page-detalle .detail-summary-card > .ch,
  #page-proyeccion .projection-card--highlight > .ch,
  #page-acumulados .acum-card--highlight > .ch,
  #page-resumen-acum .acsum-card--highlight > .ch,
  #page-frecuencia .freq-card--highlight > .ch{
    padding: 12px 14px;
  }
  #page-detalle #detailHead th,
  #page-proyeccion .projection-hierarchy-table thead th,
  #page-acumulados .acum-table thead th,
  #page-resumen-acum .acsum-table thead th,
  #page-frecuencia .freq-table thead th{
    font-size: 10px;
    letter-spacing: .55px;
  }
}

/* ════════════════════════════════════════════════════════════════
   v72 — Filtros de encabezado: panel modal adaptativo
   Desktop: diálogo fijo en viewport. Mobile: bottom sheet.
   ════════════════════════════════════════════════════════════════ */
#detailColumnMenuLayer.detail-col-menu-layer{
  position:fixed!important;
  inset:0!important;
  z-index:850!important;
  pointer-events:auto!important;
  overflow:hidden!important;
}
#detailColumnMenuLayer.detail-col-menu-layer::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(3,7,18,.46);
  backdrop-filter: none;
  opacity:1;
}
#detailColumnMenuLayer .detail-col-menu{
  position:fixed!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,rgba(18,28,47,.99),rgba(9,14,25,.995))!important;
  border:1px solid rgba(148,163,184,.22)!important;
  border-radius:22px!important;
  box-shadow:0 28px 80px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.03) inset!important;
  color:var(--txt)!important;
  opacity:1!important;
  transform:none!important;
  isolation:isolate;
}
#detailColumnMenuLayer .detail-col-menu[data-floating-state="pending"]{
  opacity:0!important;
  pointer-events:none!important;
}
#detailColumnMenuLayer .detail-col-menu::before{
  display:none!important;
}
#detailColumnMenuLayer .detail-col-menu__topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:18px 18px 12px;
  border-bottom:1px solid rgba(148,163,184,.16);
  background:linear-gradient(180deg,rgba(20,31,52,.98),rgba(17,25,42,.94));
  flex:0 0 auto;
}
#detailColumnMenuLayer .detail-col-menu__title{
  display:grid;
  gap:4px;
  min-width:0;
}
#detailColumnMenuLayer .detail-col-menu__title span{
  color:#f8fafc;
  font-family:'Syne','DM Sans',sans-serif;
  font-size:17px;
  font-weight:800;
  line-height:1.15;
}
#detailColumnMenuLayer .detail-col-menu__title small{
  color:#aeb9ca;
  font-size:12px;
  font-weight:700;
  line-height:1.25;
}
#detailColumnMenuLayer .detail-col-menu__iconbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(8,13,23,.88);
  color:#dbeafe;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  flex:0 0 auto;
}
#detailColumnMenuLayer .detail-col-menu__iconbtn:hover{
  border-color:rgba(245,166,35,.38);
  color:#ffd48a;
  background:rgba(245,166,35,.10);
}
#detailColumnMenuLayer .detail-col-menu__status{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:12px 18px;
  background:rgba(13,21,36,.72);
  border-bottom:1px solid rgba(148,163,184,.10);
  flex:0 0 auto;
}
#detailColumnMenuLayer .detail-col-menu__badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(245,166,35,.16);
  border:1px solid rgba(245,166,35,.26);
  color:#ffe1aa;
  font-size:12px;
  font-weight:800;
}
#detailColumnMenuLayer .detail-col-menu__badge--muted{
  background:rgba(59,130,246,.16);
  border-color:rgba(96,165,250,.24);
  color:#cfe1ff;
}
#detailColumnMenuLayer .detail-col-menu__hint{
  color:#aeb9ca;
  font-size:12px;
  font-weight:700;
}
#detailColumnMenuLayer .detail-col-menu__sortbar{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:12px 18px 10px;
  flex:0 0 auto;
}
#detailColumnMenuLayer .detail-col-menu__searchwrap{
  position:relative;
  padding:0 18px 12px!important;
  flex:0 0 auto;
}
#detailColumnMenuLayer .detail-col-menu__search{
  width:100%;
  min-height:44px;
  border-radius:15px;
  border:1px solid rgba(148,163,184,.24)!important;
  background:rgba(8,13,23,.82)!important;
  color:#f8fafc!important;
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  padding:10px 42px 10px 14px!important;
}
#detailColumnMenuLayer .detail-col-menu__search::placeholder{
  color:#8794a8;
}
#detailColumnMenuLayer .detail-col-menu__searchclear{
  position:absolute;
  right:28px;
  top:9px;
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(15,23,42,.88);
  color:#cbd5e1;
  cursor:pointer;
}
#detailColumnMenuLayer .detail-col-menu__searchclear:hover{
  color:#ffd48a;
  border-color:rgba(245,166,35,.34);
}
#detailColumnMenuLayer .detail-col-menu__list{
  display:grid;
  align-content:start;
  gap:6px;
  min-height:160px;
  max-height:var(--detail-col-menu-list-max-height,320px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:8px 14px 10px 18px!important;
  scrollbar-gutter:stable;
  flex:1 1 auto;
}
#detailColumnMenuLayer .detail-col-menu__item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-height:38px;
  padding:9px 10px;
  border-radius:13px;
  color:#e5edf8;
  font-size:13px;
  line-height:1.25;
  border:1px solid transparent;
  cursor:pointer;
}
#detailColumnMenuLayer .detail-col-menu__item:hover,
#detailColumnMenuLayer .detail-col-menu__item:focus-within{
  background:rgba(148,163,184,.12)!important;
  border-color:rgba(148,163,184,.14);
}
#detailColumnMenuLayer .detail-col-menu__item input{
  margin-top:2px;
  accent-color:#f5a623;
  flex:0 0 auto;
}
#detailColumnMenuLayer .detail-col-menu__item span{
  min-width:0;
  overflow-wrap:anywhere;
}
#detailColumnMenuLayer .detail-col-menu__empty{
  color:#aeb9ca;
  font-size:13px;
  padding:12px 10px;
}
#detailColumnMenuLayer .detail-col-menu__quickbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 18px;
  border-top:1px solid rgba(148,163,184,.12);
  background:rgba(13,21,36,.78);
  flex:0 0 auto;
}
#detailColumnMenuLayer .detail-col-menu__linkbtn{
  border:0;
  background:transparent;
  color:#cfe1ff;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  padding:7px 0;
}
#detailColumnMenuLayer .detail-col-menu__linkbtn:hover{
  color:#ffd48a;
}
#detailColumnMenuLayer .detail-col-menu__footer{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px))!important;
  margin:0!important;
  border-top:1px solid rgba(148,163,184,.16)!important;
  background:rgba(8,13,23,.98)!important;
  position:static!important;
  flex:0 0 auto!important;
}
#detailColumnMenuLayer .detail-col-menu__btn{
  min-height:40px;
  border-radius:999px!important;
  border:1px solid rgba(148,163,184,.20)!important;
  background:rgba(20,31,52,.92)!important;
  color:#e5edf8!important;
  font-size:12px;
  font-weight:850;
  padding:9px 12px!important;
  cursor:pointer;
}
#detailColumnMenuLayer .detail-col-menu__btn:hover{
  border-color:rgba(245,166,35,.34)!important;
  color:#ffd48a!important;
}
#detailColumnMenuLayer .detail-col-menu__btn--accent{
  background:linear-gradient(135deg,rgba(245,166,35,.24),rgba(245,158,11,.14))!important;
  border-color:rgba(245,166,35,.42)!important;
  color:#ffe1aa!important;
}
@media (max-width:760px){
  #detailColumnMenuLayer.detail-col-menu-layer::before{
    background:rgba(3,7,18,.62);
  }
  #detailColumnMenuLayer .detail-col-menu{
    border-radius:22px 22px 0 0!important;
    border-left:1px solid rgba(148,163,184,.18)!important;
    border-right:1px solid rgba(148,163,184,.18)!important;
    border-bottom:0!important;
    box-shadow:0 -20px 70px rgba(0,0,0,.58)!important;
  }
  #detailColumnMenuLayer .detail-col-menu__topbar{
    padding:16px 16px 12px;
  }
  #detailColumnMenuLayer .detail-col-menu__title span{
    font-size:16px;
  }
  #detailColumnMenuLayer .detail-col-menu__status{
    padding:10px 16px;
  }
  #detailColumnMenuLayer .detail-col-menu__sortbar{
    grid-template-columns:1fr;
    padding:10px 16px;
  }
  #detailColumnMenuLayer .detail-col-menu__searchwrap{
    padding:0 16px 10px!important;
  }
  #detailColumnMenuLayer .detail-col-menu__searchclear{
    right:26px;
  }
  #detailColumnMenuLayer .detail-col-menu__list{
    min-height:180px;
    padding:8px 12px 10px 16px!important;
  }
  #detailColumnMenuLayer .detail-col-menu__item{
    font-size:13px;
    min-height:42px;
  }
  #detailColumnMenuLayer .detail-col-menu__quickbar{
    padding:9px 16px;
  }
  #detailColumnMenuLayer .detail-col-menu__footer{
    padding-left:16px!important;
    padding-right:16px!important;
  }
}
@media (max-width:420px){
  #detailColumnMenuLayer .detail-col-menu__footer{
    grid-template-columns:1fr!important;
  }
  #detailColumnMenuLayer .detail-col-menu__quickbar{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* ========================================================================
   v73 — Hotfix filtros de encabezado sin capa bloqueante
   Evita que el blur/backdrop quede montado cuando se aplica o cierra un filtro.
   El panel conserva el comportamiento adaptativo, pero sin overlay que bloquee la app.
   ======================================================================== */
#detailColumnMenuLayer.detail-col-menu-layer{
  pointer-events:none!important;
  overflow:visible!important;
}
#detailColumnMenuLayer.detail-col-menu-layer:empty{
  display:none!important;
}
#detailColumnMenuLayer.detail-col-menu-layer::before{
  content:none!important;
  display:none!important;
  background:transparent!important;
  backdrop-filter:none!important;
}
#detailColumnMenuLayer .detail-col-menu{
  pointer-events:auto!important;
}

/* v74 · Vista Jerárquica: solapa independiente de navegación KPI/árbol */
.hierarchy-wrap {
  max-width: 1480px;
}

.hierarchy-root {
  min-height: 560px;
}

.hier-panel {
  position: relative;
  overflow: hidden;
  min-height: 640px;
  padding: clamp(18px, 2.4vw, 32px);
  border: 1px solid rgba(93, 139, 207, .22);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(214, 167, 86, .16), transparent 32%),
    radial-gradient(circle at 14% 38%, rgba(76, 201, 166, .14), transparent 30%),
    linear-gradient(145deg, rgba(10, 17, 30, .98), rgba(6, 11, 20, .96));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.hier-panel.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .035), transparent);
  animation: hierSweep 1.2s linear infinite;
}

@keyframes hierSweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.hier-copy {
  position: absolute;
  left: clamp(18px, 2.3vw, 34px);
  top: clamp(18px, 2.3vw, 34px);
  width: min(300px, 28vw);
  z-index: 2;
}

.hier-eyebrow {
  margin-bottom: 7px;
  color: var(--accent, #d6a756);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hier-copy h2 {
  margin: 0 0 8px;
  color: #f2c96e;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1;
}

.hier-copy p {
  margin: 0;
  color: rgba(226, 235, 249, .72);
  font-size: 14px;
  line-height: 1.45;
}

.hier-mini-pill,
.hier-legend span,
.hier-footnote {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(145, 171, 210, .18);
  border-radius: 999px;
  background: rgba(13, 23, 39, .78);
  color: rgba(226, 235, 249, .76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.hier-mini-pill {
  margin-top: 18px;
  padding: 9px 12px;
  font-size: 12px;
}

.hier-main-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(460px, 92%);
  min-height: 172px;
  margin: 0 auto;
  padding: 24px 30px;
  border: 1px solid rgba(214, 167, 86, .9);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(15, 30, 55, .98), rgba(8, 16, 30, .98));
  color: #d6a756;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(214, 167, 86, .12), 0 0 42px rgba(214, 167, 86, .34), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.hier-main-card:hover,
.hier-main-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 204, 107, .98);
  box-shadow: 0 0 0 1px rgba(214, 167, 86, .2), 0 0 58px rgba(214, 167, 86, .42), inset 0 1px 0 rgba(255, 255, 255, .12);
  outline: none;
}

.hier-main-title {
  color: rgba(226, 235, 249, .92);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hier-main-card strong {
  margin-top: 4px;
  font-size: clamp(44px, 5.2vw, 74px);
  line-height: .95;
  letter-spacing: -.055em;
}

.hier-main-card > span:not(.hier-main-title) {
  margin-top: 8px;
  color: rgba(226, 235, 249, .74);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hier-main-spark {
  position: absolute;
  right: 22px;
  top: 18px;
  width: 104px;
  height: 34px;
  color: #f2aa24;
  opacity: .95;
}

.hier-click-help {
  margin: 12px auto 16px;
  width: max-content;
  max-width: 92%;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(24, 33, 51, .9);
  color: rgba(226, 235, 249, .72);
  font-size: 14px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}

.hier-view-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto 22px;
}

.hier-view-chip {
  min-width: 126px;
  padding: 12px 20px;
  border: 1px solid rgba(145, 171, 210, .26);
  border-radius: 999px;
  background: rgba(9, 17, 30, .82);
  color: rgba(235, 241, 250, .86);
  font-weight: 800;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.hier-view-chip:hover,
.hier-view-chip:focus-visible,
.hier-view-chip.on {
  border-color: rgba(214, 167, 86, .9);
  color: #ffe2a3;
  box-shadow: 0 0 26px rgba(214, 167, 86, .22), inset 0 1px 0 rgba(255, 255, 255, .08);
  outline: none;
}

.hier-view-chip.on {
  background: linear-gradient(180deg, rgba(83, 65, 31, .62), rgba(13, 21, 35, .82));
}

.hier-legend {
  position: absolute;
  top: 190px;
  right: clamp(18px, 2.3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
}

.hier-legend span {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
}

.hier-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.dot-blue { background: #6ea8fe; }
.dot-teal { background: #4cc9a6; }

.hier-stage {
  position: relative;
  margin-top: 10px;
  min-height: 330px;
}

.hier-start-hint,
.hier-empty {
  width: min(560px, 92%);
  margin: 72px auto 0;
  padding: 22px;
  border: 1px dashed rgba(145, 171, 210, .25);
  border-radius: 20px;
  background: rgba(8, 15, 27, .56);
  color: rgba(226, 235, 249, .74);
  text-align: center;
}

.hier-empty.error {
  border-color: rgba(224, 122, 122, .4);
  color: #ffb2b2;
}

.hier-tree {
  position: relative;
  padding-top: 28px;
}

.hier-connector {
  width: min(780px, 74%);
  height: 32px;
  margin: 0 auto -2px;
  border-top: 3px solid rgba(214, 167, 86, .84);
  border-left: 3px solid rgba(214, 167, 86, .84);
  border-right: 3px solid rgba(214, 167, 86, .84);
  border-radius: 22px 22px 0 0;
  filter: drop-shadow(0 0 10px rgba(214, 167, 86, .34));
}

.hier-connector--children {
  width: min(760px, 72%);
  margin-top: 18px;
  border-color: rgba(76, 201, 166, .82);
  filter: drop-shadow(0 0 10px rgba(76, 201, 166, .32));
}

.hier-level {
  display: grid;
  gap: 18px;
  align-items: stretch;
  justify-items: center;
}

.hier-level--primary {
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  max-width: 1050px;
  margin: 0 auto;
}

.hier-level--children,
.hier-level--flat {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  max-width: 1120px;
  margin: 0 auto;
}

.hier-branch,
.hier-child {
  width: 100%;
}

.hier-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  width: 100%;
  min-height: 148px;
  padding: 20px;
  border: 1px solid rgba(110, 168, 254, .68);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(15, 31, 56, .98), rgba(8, 16, 30, .95));
  color: rgba(238, 244, 252, .92);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(110, 168, 254, .18), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.hier-card:hover,
.hier-card:focus-visible {
  transform: translateY(-2px);
  outline: none;
  box-shadow: 0 0 36px rgba(110, 168, 254, .26), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.hier-card--teal {
  border-color: rgba(76, 201, 166, .72);
  box-shadow: 0 0 22px rgba(76, 201, 166, .18), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.hier-card--gold {
  border-color: rgba(214, 167, 86, .72);
  box-shadow: 0 0 22px rgba(214, 167, 86, .18), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.hier-card-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: #6ea8fe;
  background: rgba(110, 168, 254, .08);
  font-size: 22px;
}

.hier-card--teal .hier-card-icon { color: #4cc9a6; background: rgba(76, 201, 166, .08); }
.hier-card--gold .hier-card-icon { color: #d6a756; background: rgba(214, 167, 86, .08); }

.hier-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hier-card-title {
  color: rgba(226, 235, 249, .82);
  font-size: 15px;
  font-weight: 800;
}

.hier-card-value {
  margin-top: 4px;
  color: #f4f7fb;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1;
  letter-spacing: -.04em;
}

.hier-card-caption {
  margin-top: 7px;
  color: rgba(226, 235, 249, .58);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.hier-delta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  margin-top: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.hier-delta.positive { background: rgba(48, 176, 118, .2); color: #74e0a8; }
.hier-delta.negative { background: rgba(224, 122, 122, .2); color: #ff9f9f; }
.hier-delta.neutral { background: rgba(145, 171, 210, .14); color: rgba(226, 235, 249, .74); }

.hier-expand-dot {
  position: absolute;
  left: 50%;
  bottom: -14px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(110, 168, 254, .9);
  border-radius: 999px;
  background: rgba(10, 20, 36, .98);
  color: #8ebcff;
  transform: translateX(-50%);
  box-shadow: 0 0 18px rgba(110, 168, 254, .36);
}

.hier-card--level-2 {
  min-height: 126px;
  padding: 16px;
}

.hier-card--level-2 .hier-card-icon {
  width: 46px;
  height: 46px;
  font-size: 18px;
}

.hier-card--level-2 .hier-card-value {
  font-size: 28px;
}

.hier-footnote {
  position: absolute;
  right: clamp(18px, 2.3vw, 34px);
  bottom: clamp(18px, 2.3vw, 34px);
  max-width: 360px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.35;
}

@media (max-width: 980px) {
  .hier-panel {
    min-height: auto;
    padding: 18px 14px 82px;
    border-radius: 22px;
  }
  .hier-copy {
    position: static;
    width: auto;
    margin-bottom: 18px;
  }
  .hier-main-card {
    min-height: 154px;
    padding: 22px 16px;
  }
  .hier-main-card strong {
    font-size: clamp(42px, 12vw, 58px);
  }
  .hier-main-spark {
    width: 82px;
    right: 16px;
  }
  .hier-legend {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 14px;
  }
  .hier-level--primary,
  .hier-level--children,
  .hier-level--flat {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
  .hier-connector {
    width: 3px;
    height: 28px;
    border: 0;
    border-left: 3px solid rgba(214, 167, 86, .84);
  }
  .hier-connector--children {
    border-left-color: rgba(76, 201, 166, .82);
  }
  .hier-footnote {
    left: 14px;
    right: 14px;
    bottom: 16px;
    max-width: none;
  }
}

/* v75 · Vista Jerárquica: ajustes visuales y apertura progresiva */
.hier-panel {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.hier-stage {
  padding-bottom: 58px;
}

.hier-level--primary {
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  max-width: 1240px;
}

.hier-level--children,
.hier-level--flat {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  max-width: 1320px;
}

.hier-card {
  min-height: 158px;
  padding: 20px 22px;
}

.hier-card-icon {
  width: 62px;
  height: 62px;
}

.hier-card-icon svg {
  width: 35px;
  height: 35px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hier-card--level-2 .hier-card-icon svg {
  width: 28px;
  height: 28px;
}

.hier-card.is-open {
  border-color: rgba(114, 221, 190, .92);
  box-shadow: 0 0 34px rgba(76, 201, 166, .28), inset 0 1px 0 rgba(255, 255, 255, .1);
}

.hier-card-title {
  color: rgba(226, 235, 249, .88);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 850;
  line-height: 1.18;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.hier-card-value {
  margin-top: 5px;
  font-size: clamp(32px, 3vw, 46px);
  line-height: .96;
  letter-spacing: -.055em;
}

.hier-card-caption {
  margin-top: 8px;
  color: rgba(226, 235, 249, .62);
}

.hier-delta {
  padding: 6px 10px;
  line-height: 1.1;
}

.hier-card--level-2 {
  min-height: 140px;
  padding: 18px;
}

.hier-card--level-2 .hier-card-icon {
  width: 50px;
  height: 50px;
}

.hier-card--level-2 .hier-card-title {
  font-size: clamp(14px, 1vw, 16px);
}

.hier-card--level-2 .hier-card-value {
  font-size: clamp(28px, 2.4vw, 36px);
}

.hier-level-note {
  width: max-content;
  max-width: min(92%, 620px);
  margin: 22px auto 0;
  padding: 10px 14px;
  border: 1px dashed rgba(76, 201, 166, .35);
  border-radius: 999px;
  background: rgba(8, 18, 32, .74);
  color: rgba(226, 235, 249, .72);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 980px) {
  .hier-card {
    grid-template-columns: 56px 1fr;
  }
  .hier-card-icon {
    width: 54px;
    height: 54px;
  }
  .hier-card-icon svg {
    width: 30px;
    height: 30px;
  }
}

/* ========================================================================
   v76 · Ajustes Vista Jerárquica + barra compacta de filtros
   - Panel de filtros colapsado en una sola línea.
   - Colores jerárquicos coherentes entre padre, hijos y conectores.
   - Mejor lectura de tarjetas y scroll horizontal controlado en mobile.
   ======================================================================== */
.filter-panel.collapsed{
  min-height:auto!important;
}
.filter-panel.collapsed .fp-inner{
  max-width:min(1480px,96vw)!important;
  padding:8px 14px!important;
}
.filter-panel.collapsed .fp-top{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin-bottom:0!important;
  flex-wrap:nowrap!important;
  min-height:36px!important;
}
.filter-panel.collapsed .fp-top-left{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex:0 0 auto!important;
  flex-wrap:nowrap!important;
}
.filter-panel.collapsed .btn-toggle{
  min-height:32px!important;
  padding:6px 13px!important;
  border-radius:999px!important;
  white-space:nowrap!important;
}
.filter-panel.collapsed .fp-collapsed-note{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex:1 1 auto!important;
  min-width:0!important;
  padding-top:0!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
}
.filter-panel.collapsed .fp-collapsed-note::-webkit-scrollbar{display:none!important;}
.filter-panel.collapsed .fp-collapsed-note .fp-note-pill{
  flex:0 0 auto!important;
  max-width:min(46vw,360px)!important;
  min-height:30px!important;
  display:inline-flex!important;
  align-items:center!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  padding:5px 11px!important;
  border-radius:999px!important;
  font-size:11px!important;
}

.hier-tree{
  --hier-active-color:#6ea8fe;
  --hier-active-soft:rgba(110,168,254,.14);
  --hier-active-bg:rgba(110,168,254,.08);
  --hier-active-shadow:rgba(110,168,254,.25);
}
.hier-tree--blue{
  --hier-active-color:#6ea8fe;
  --hier-active-soft:rgba(110,168,254,.16);
  --hier-active-bg:rgba(110,168,254,.10);
  --hier-active-shadow:rgba(110,168,254,.34);
}
.hier-tree--gold{
  --hier-active-color:#d6a756;
  --hier-active-soft:rgba(214,167,86,.18);
  --hier-active-bg:rgba(214,167,86,.10);
  --hier-active-shadow:rgba(214,167,86,.34);
}
.hier-tree--teal{
  --hier-active-color:#4cc9a6;
  --hier-active-soft:rgba(76,201,166,.18);
  --hier-active-bg:rgba(76,201,166,.10);
  --hier-active-shadow:rgba(76,201,166,.34);
}
.hier-card{
  border-width:2px!important;
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, currentColor 10%, transparent), transparent 34%),
    linear-gradient(145deg, rgba(17,35,64,.98), rgba(7,15,29,.97))!important;
}
.hier-card--blue{
  color:#6ea8fe!important;
  border-color:rgba(110,168,254,.92)!important;
  background:
    radial-gradient(circle at 16% 18%, rgba(110,168,254,.18), transparent 34%),
    linear-gradient(145deg, rgba(16,35,67,.98), rgba(8,17,34,.97))!important;
  box-shadow:0 0 30px rgba(110,168,254,.24), inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.hier-card--gold{
  color:#d6a756!important;
  border-color:rgba(214,167,86,.92)!important;
  background:
    radial-gradient(circle at 16% 18%, rgba(214,167,86,.18), transparent 34%),
    linear-gradient(145deg, rgba(55,38,14,.52), rgba(8,17,34,.97))!important;
  box-shadow:0 0 30px rgba(214,167,86,.24), inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.hier-card--teal{
  color:#4cc9a6!important;
  border-color:rgba(76,201,166,.92)!important;
  background:
    radial-gradient(circle at 16% 18%, rgba(76,201,166,.18), transparent 34%),
    linear-gradient(145deg, rgba(9,48,46,.54), rgba(8,17,34,.97))!important;
  box-shadow:0 0 30px rgba(76,201,166,.24), inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.hier-card.is-open{
  border-color:var(--hier-active-color)!important;
  box-shadow:0 0 38px var(--hier-active-shadow), inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.hier-card-icon{
  border-width:1.5px!important;
  color:inherit!important;
  background:rgba(255,255,255,.035)!important;
}
.hier-card-body{gap:2px!important;}
.hier-card-title{
  color:rgba(235,242,252,.92)!important;
  font-weight:900!important;
  letter-spacing:-.02em!important;
}
.hier-card-value{
  color:#f7fbff!important;
  font-weight:900!important;
  text-wrap:balance!important;
}
.hier-card-caption{
  max-width:100%!important;
  line-height:1.15!important;
  color:rgba(226,235,249,.68)!important;
}
.hier-card--level-2{
  border-color:color-mix(in srgb, var(--hier-active-color) 82%, transparent)!important;
  color:var(--hier-active-color)!important;
  background:
    radial-gradient(circle at 15% 18%, var(--hier-active-soft), transparent 34%),
    linear-gradient(145deg, var(--hier-active-bg), rgba(8,17,34,.97))!important;
  box-shadow:0 0 24px var(--hier-active-shadow), inset 0 1px 0 rgba(255,255,255,.07)!important;
}
.hier-card--level-2 .hier-card-value{font-size:clamp(26px,2.2vw,34px)!important;}
.hier-card--level-2 .hier-delta{
  max-width:100%;
  white-space:normal;
  text-align:center;
  justify-content:center;
}
.hier-children-shell .hier-connector--children{
  border-color:var(--hier-active-color)!important;
  filter:drop-shadow(0 0 12px var(--hier-active-shadow))!important;
}
.hier-expand-dot{
  color:inherit!important;
  border-color:currentColor!important;
  box-shadow:0 0 18px currentColor!important;
}
.hier-scroll-shell,
.hier-children-shell{
  min-width:0;
}

@media (max-width:760px){
  .filter-panel.collapsed .fp-inner{
    padding:7px 10px!important;
  }
  .filter-panel.collapsed .fp-top{
    gap:8px!important;
  }
  .filter-panel.collapsed .btn-toggle{
    min-height:30px!important;
    padding:5px 10px!important;
    font-size:11px!important;
  }
  .filter-panel.collapsed .fp-collapsed-note .fp-note-pill{
    max-width:44vw!important;
    min-height:28px!important;
    padding:4px 9px!important;
    font-size:10.5px!important;
  }

  .hier-stage{
    overflow:hidden!important;
    margin-left:-14px;
    margin-right:-14px;
    padding-left:0;
    padding-right:0;
  }
  .hier-scroll-shell,
  .hier-children-shell{
    overflow-x:auto!important;
    overflow-y:visible!important;
    padding:0 14px 12px!important;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  .hier-level--primary,
  .hier-level--children,
  .hier-level--flat{
    display:flex!important;
    grid-template-columns:none!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    gap:14px!important;
    max-width:none!important;
    width:max-content!important;
    margin:0!important;
  }
  .hier-branch,
  .hier-child{
    flex:0 0 min(82vw,380px)!important;
    width:min(82vw,380px)!important;
    scroll-snap-align:center;
  }
  .hier-card{
    min-height:154px!important;
    grid-template-columns:56px minmax(0,1fr)!important;
    padding:18px!important;
  }
  .hier-card--level-2{
    min-height:150px!important;
  }
  .hier-connector{
    width:calc(100% - 88px)!important;
    min-width:620px!important;
    height:28px!important;
    margin-left:44px!important;
    margin-right:44px!important;
    border-top:3px solid rgba(214,167,86,.84)!important;
    border-left:3px solid rgba(214,167,86,.84)!important;
    border-right:3px solid rgba(214,167,86,.84)!important;
    border-radius:20px 20px 0 0!important;
  }
  .hier-children-shell .hier-connector--children{
    min-width:calc((min(82vw,380px) * 3) + 56px)!important;
    margin-top:12px!important;
  }
  .hier-level-note{
    width:auto!important;
    max-width:calc(100vw - 48px)!important;
    border-radius:20px!important;
  }
}

@media (max-width:420px){
  .hier-branch,
  .hier-child{
    flex-basis:84vw!important;
    width:84vw!important;
  }
  .hier-card-title{font-size:16px!important;}
  .hier-card-value{font-size:clamp(34px,12vw,46px)!important;}
  .hier-card-caption{font-size:11px!important;}
  .hier-delta{font-size:12px!important;}
}

/* ========================================================================
   v77 - Barra de filtros colapsada compacta en una sola linea
   - "Mostrar filtros", periodo y filtros activos comparten un mismo renglon.
   - Reduce altura util ocupada por el panel para liberar espacio de KPIs.
   - Mantiene desplazamiento horizontal interno si el ancho no alcanza.
   ======================================================================== */
.filter-panel.collapsed{
  min-height:0!important;
  --filter-panel-height:46px;
}
.filter-panel.collapsed .fp-inner{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  max-width:min(1480px,96vw)!important;
  padding:5px 14px!important;
  min-height:44px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  white-space:nowrap!important;
}
.filter-panel.collapsed .fp-inner::-webkit-scrollbar{display:none!important;}
.filter-panel.collapsed .fp-top{
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  gap:0!important;
  margin:0!important;
  min-height:0!important;
  width:auto!important;
}
.filter-panel.collapsed .fp-top-left{
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  gap:0!important;
  width:auto!important;
  min-width:0!important;
}
.filter-panel.collapsed #btnToggleFilters,
.filter-panel.collapsed .btn-toggle{
  width:auto!important;
  min-height:30px!important;
  height:30px!important;
  padding:4px 12px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  white-space:nowrap!important;
  flex:0 0 auto!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:750!important;
}
.filter-panel.collapsed .fp-collapsed-note{
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  gap:8px!important;
  padding:0!important;
  margin:0!important;
  min-width:0!important;
  flex-wrap:nowrap!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
.filter-panel.collapsed .fp-collapsed-note .fp-note-pill{
  flex:0 0 auto!important;
  width:auto!important;
  max-width:none!important;
  min-height:30px!important;
  height:30px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  padding:4px 11px!important;
  border-radius:999px!important;
  font-size:11.5px!important;
  line-height:1!important;
}

@media (max-width:760px){
  .filter-panel.collapsed{--filter-panel-height:42px;}
  .filter-panel.collapsed .fp-inner{
    max-width:none!important;
    width:100%!important;
    padding:5px 10px!important;
    min-height:40px!important;
    gap:8px!important;
  }
  .filter-panel.collapsed #btnToggleFilters,
  .filter-panel.collapsed .btn-toggle{
    min-height:28px!important;
    height:28px!important;
    padding:4px 10px!important;
    font-size:11.5px!important;
  }
  .filter-panel.collapsed .fp-collapsed-note{gap:7px!important;}
  .filter-panel.collapsed .fp-collapsed-note .fp-note-pill{
    min-height:28px!important;
    height:28px!important;
    padding:4px 9px!important;
    font-size:10.5px!important;
  }
}

/* ========================================================================
   v78 - Vista Jerárquica: iconos fotográficos por familia
   - Reemplaza los íconos lineales de familias por imágenes semirrealistas.
   - No modifica la lógica de KPIs ni los valores, solo la representación visual.
   ======================================================================== */
.hier-card-icon.has-photo{
  overflow:hidden;
  padding:0!important;
  background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.11), rgba(255,255,255,.02) 68%)!important;
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 18px rgba(15, 23, 42, .28);
}
.hier-card-photo{
  display:block;
  width:84%;
  height:84%;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.30)) saturate(1.04) contrast(1.03);
  transform:translateY(1px);
}
.hier-card--level-1 .hier-card-icon.has-photo{
  width:70px!important;
  height:70px!important;
}
.hier-card--level-2 .hier-card-icon.has-photo{
  width:58px!important;
  height:58px!important;
}
.hier-card--level-2 .hier-card-photo{
  width:88%;
  height:88%;
}
.hier-card--blue .hier-card-icon.has-photo{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 18px rgba(110,168,254,.20);
}
.hier-card--gold .hier-card-icon.has-photo{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 18px rgba(214,167,86,.22);
}
.hier-card--teal .hier-card-icon.has-photo{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 0 18px rgba(76,201,166,.22);
}
@media (max-width:980px){
  .hier-card--level-1 .hier-card-icon.has-photo{
    width:62px!important;
    height:62px!important;
  }
  .hier-card--level-2 .hier-card-icon.has-photo{
    width:54px!important;
    height:54px!important;
  }
}

/* ========================================================================
   v79 - Vista Jerárquica: segunda iteración visual
   - Mantiene valores y lógica.
   - Hace más protagonistas las imágenes de familias dentro de las cards.
   ======================================================================== */
.hier-card.has-photo-hero{
  grid-template-columns:56px minmax(0,1fr)!important;
  grid-template-areas:
    "icon body"
    "media media"!important;
  align-items:start!important;
  row-gap:10px!important;
  min-height:290px!important;
  padding-bottom:16px!important;
}
.hier-card.has-photo-hero .hier-card-icon{
  grid-area:icon!important;
}
.hier-card.has-photo-hero .hier-card-body{
  grid-area:body!important;
  align-self:start!important;
}
.hier-card.has-photo-hero .hier-card-media{
  grid-area:media!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  width:100%!important;
  min-height:132px!important;
  padding:2px 4px 0!important;
  pointer-events:none!important;
}
.hier-card.has-photo-hero .hier-card-hero-photo{
  display:block!important;
  max-width:92%!important;
  max-height:146px!important;
  width:auto!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.30)) saturate(1.06) contrast(1.03)!important;
}
.hier-card.has-photo-hero .hier-delta{
  margin-top:8px!important;
}
.hier-card--blue.has-photo-hero .hier-card-media{
  background:radial-gradient(circle at 50% 100%, rgba(110,168,254,.10), transparent 64%)!important;
}
.hier-card--gold.has-photo-hero .hier-card-media{
  background:radial-gradient(circle at 50% 100%, rgba(214,167,86,.12), transparent 64%)!important;
}
.hier-card--teal.has-photo-hero .hier-card-media{
  background:radial-gradient(circle at 50% 100%, rgba(76,201,166,.11), transparent 64%)!important;
}
@media (max-width:980px){
  .hier-card.has-photo-hero{
    min-height:270px!important;
  }
  .hier-card.has-photo-hero .hier-card-media{
    min-height:120px!important;
  }
  .hier-card.has-photo-hero .hier-card-hero-photo{
    max-height:132px!important;
  }
}
@media (max-width:760px){
  .hier-card.has-photo-hero{
    min-height:254px!important;
  }
  .hier-card.has-photo-hero .hier-card-media{
    min-height:106px!important;
  }
  .hier-card.has-photo-hero .hier-card-hero-photo{
    max-width:90%!important;
    max-height:118px!important;
  }
}

/* ========================================================================
   v80 - Vista Jerárquica: cards compactas + referencia de origen
   - Quita la imagen grande en cards de desglose.
   - Mantiene solo un ícono fotográfico pequeño.
   - Reduce tamaño de KPIs hijos y mejora la referencia visual desde el origen.
   ======================================================================== */
.hier-card{
  display:block!important;
  min-height:136px!important;
  padding:16px 18px 14px!important;
}
.hier-card-body{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  padding-right:52px!important;
}
.hier-card-icon,
.hier-card-icon.has-photo{
  position:absolute!important;
  top:12px!important;
  right:12px!important;
  left:auto!important;
  width:42px!important;
  height:42px!important;
  z-index:1!important;
}
.hier-card-photo{
  width:78%!important;
  height:78%!important;
}
.hier-card-title{
  padding-right:4px!important;
}
.hier-card-value{
  margin-top:6px!important;
}
.hier-card--level-1{
  min-height:132px!important;
}
.hier-card--level-2{
  min-height:112px!important;
  padding:14px 16px 12px!important;
  border-radius:18px!important;
}
.hier-card--level-2 .hier-card-body{
  padding-right:46px!important;
}
.hier-card--level-2 .hier-card-icon,
.hier-card--level-2 .hier-card-icon.has-photo{
  width:38px!important;
  height:38px!important;
  top:10px!important;
  right:10px!important;
}
.hier-card--level-2 .hier-card-title{
  font-size:13px!important;
  line-height:1.15!important;
}
.hier-card--level-2 .hier-card-value{
  font-size:clamp(22px, 1.9vw, 28px)!important;
}
.hier-card--level-2 .hier-card-caption{
  margin-top:5px!important;
  font-size:10px!important;
}
.hier-card--level-2 .hier-delta{
  margin-top:8px!important;
  padding:4px 9px!important;
  font-size:11px!important;
}
.hier-level--children{
  grid-template-columns:repeat(auto-fit, minmax(166px, 186px))!important;
  width:fit-content!important;
  max-width:min(100%, 1120px)!important;
  justify-content:center!important;
  gap:14px!important;
}
.hier-children-shell{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  width:100%!important;
  padding-top:8px!important;
}
.hier-children-origin{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:6px auto 10px!important;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(9, 18, 34, .78);
  color:rgba(235,242,252,.86);
  font-size:12px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 0 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
}
.hier-children-origin::before{
  content:"";
  position:absolute;
  left:50%;
  top:-16px;
  width:2px;
  height:16px;
  background:var(--hier-active-color, rgba(110,168,254,.8));
  transform:translateX(-50%);
  box-shadow:0 0 10px var(--hier-active-shadow, rgba(110,168,254,.24));
}
.hier-origin-arrow{
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--hier-active-color, #6ea8fe);
  font-size:12px;
  line-height:1;
}
.hier-children-origin--blue .hier-origin-arrow{ color:#6ea8fe; }
.hier-children-origin--gold .hier-origin-arrow{ color:#d6a756; }
.hier-children-origin--teal .hier-origin-arrow{ color:#4cc9a6; }
.hier-children-shell .hier-connector--children{
  width:min(640px, 68%)!important;
  margin-top:4px!important;
  margin-bottom:10px!important;
}
.hier-branch.is-source-open .hier-card{
  box-shadow:0 0 38px var(--hier-active-shadow), inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.hier-card.has-photo-hero,
.hier-card .hier-card-media{
  display:none!important;
}

@media (max-width:760px){
  .hier-card{
    min-height:126px!important;
    padding:14px 16px 12px!important;
  }
  .hier-card-body{
    padding-right:44px!important;
  }
  .hier-card-icon,
  .hier-card-icon.has-photo{
    width:36px!important;
    height:36px!important;
    top:10px!important;
    right:10px!important;
  }
  .hier-level--children{
    width:max-content!important;
    max-width:none!important;
  }
  .hier-children-origin{
    max-width:calc(100vw - 34px);
    text-align:center;
  }
}

/* ========================================================================
   v81 - Vista Jerárquica: alineación por origen real + iconos nivel 2 más grandes
   - Elimina la etiqueta central "Desglose de ...".
   - Alinea el grupo hijo hacia el KPI abierto.
   - Hace crecer levemente el icono fotográfico del nivel 2.
   ======================================================================== */
.hier-children-origin{ display:none!important; }

.hier-children-shell{
  position:relative!important;
  padding-top:14px!important;
}
.hier-children-shell::before{
  content:"";
  position:absolute;
  top:-4px;
  left:var(--hier-source-anchor, 50%);
  width:2px;
  height:18px;
  background:var(--hier-active-color, rgba(110,168,254,.84));
  transform:translateX(-50%);
  box-shadow:0 0 12px var(--hier-active-shadow, rgba(110,168,254,.28));
}
.hier-children-shell--from-left{ align-items:flex-start!important; }
.hier-children-shell--from-center{ align-items:center!important; }
.hier-children-shell--from-right{ align-items:flex-end!important; }

.hier-children-shell--from-left .hier-connector--children{
  margin-left:0!important;
  margin-right:auto!important;
}
.hier-children-shell--from-center .hier-connector--children{
  margin-left:auto!important;
  margin-right:auto!important;
}
.hier-children-shell--from-right .hier-connector--children{
  margin-left:auto!important;
  margin-right:0!important;
}

.hier-level--children{
  justify-content:flex-start!important;
}
.hier-children-shell--from-center .hier-level--children{
  justify-content:center!important;
}
.hier-children-shell--from-right .hier-level--children{
  justify-content:flex-end!important;
}

.hier-card--level-2 .hier-card-icon,
.hier-card--level-2 .hier-card-icon.has-photo{
  width:44px!important;
  height:44px!important;
  top:9px!important;
  right:9px!important;
}
.hier-card--level-2 .hier-card-photo{
  width:82%!important;
  height:82%!important;
}
.hier-card--level-2 .hier-card-body{
  padding-right:52px!important;
}

@media (max-width:760px){
  .hier-children-shell::before{
    height:16px!important;
  }
  .hier-card--level-2 .hier-card-icon,
  .hier-card--level-2 .hier-card-icon.has-photo{
    width:40px!important;
    height:40px!important;
  }
  .hier-card--level-2 .hier-card-body{
    padding-right:48px!important;
  }
}

/* v82 — Vista Jerárquica: refinamiento visual y bloque secundario guiado */
.hier-stage-block{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px 18px;
  margin:0;
  border-radius:28px;
  border:1px solid rgba(134,164,212,.18);
  background:
    radial-gradient(circle at top left, rgba(88,130,255,.10), transparent 34%),
    linear-gradient(180deg, rgba(8,16,34,.92), rgba(5,11,26,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 12px 34px rgba(3,8,19,.30);
}
.hier-stage-block + .hier-stage-block{
  margin-top:18px;
}
.hier-stage-block--secondary{
  border-color:color-mix(in srgb, var(--hier-active-color, #6ea8fe) 34%, rgba(134,164,212,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 1px rgba(255,255,255,.02), 0 14px 38px rgba(3,8,19,.34);
}
.hier-stage-block--secondary.is-active{
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--hier-active-color, #6ea8fe) 20%, transparent), transparent 40%),
    linear-gradient(180deg, rgba(8,16,34,.96), rgba(5,11,26,.90));
}
.hier-stage-heading{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.hier-stage-heading strong{
  font-size:16px;
  line-height:1.2;
  letter-spacing:.01em;
  color:#f4f7ff;
}
.hier-stage-kicker{
  display:inline-flex;
  align-self:flex-start;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(118,149,214,.25);
  background:rgba(16,28,52,.68);
  color:#91b6ff;
  font-size:11px;
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.hier-stage-subtitle{
  color:rgba(226,235,249,.74);
  font-size:12px;
  line-height:1.45;
}
.hier-selection-pill{
  display:inline-flex;
  align-self:flex-start;
  align-items:center;
  min-height:34px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(116,146,212,.2);
  background:rgba(10,20,40,.72);
  color:rgba(230,238,255,.84);
  font-size:12px;
  font-weight:600;
  letter-spacing:.01em;
}
.hier-selection-pill--blue{
  color:#cfe1ff;
  border-color:rgba(110,168,254,.32);
  box-shadow:0 0 0 1px rgba(110,168,254,.08) inset, 0 0 18px rgba(110,168,254,.15);
}
.hier-selection-pill--gold{
  color:#f3deb3;
  border-color:rgba(214,167,86,.34);
  box-shadow:0 0 0 1px rgba(214,167,86,.08) inset, 0 0 18px rgba(214,167,86,.14);
}
.hier-selection-pill--teal{
  color:#c7f7eb;
  border-color:rgba(76,201,166,.34);
  box-shadow:0 0 0 1px rgba(76,201,166,.08) inset, 0 0 18px rgba(76,201,166,.14);
}
.hier-stage-block .hier-scroll-shell,
.hier-stage-block .hier-children-shell{
  margin-top:0!important;
}
.hier-stage-block .hier-level--primary{
  padding-top:4px;
}
.hier-stage-block .hier-level-note{
  margin-top:0;
}
.hier-stage-block .hier-children-shell{
  padding-top:18px;
}
.hier-stage-block .hier-children-shell::before{
  top:0;
}
@media (max-width: 900px){
  .hier-stage-block{
    padding:14px 14px 16px;
    border-radius:24px;
  }
  .hier-stage-block + .hier-stage-block{
    margin-top:14px;
  }
  .hier-stage-heading strong{
    font-size:15px;
  }
  .hier-stage-subtitle,
  .hier-selection-pill{
    font-size:11px;
  }
}


/* ========================================================================
   v83 - Vista Jerárquica: distribución ordenada + llave contenedora
   - Los KPIs de cada nivel se acomodan en filas centradas.
   - La llave/linea de flujo toma el ancho y alto completo del grupo.
   - El mismo patrón aplica al nivel 1, al nivel 2 y a vistas planas.
   ======================================================================== */
.hier-flow-frame{
  --hier-flow-width: 900px;
  --hier-flow-card-width: 232px;
  --hier-flow-gap: 18px;
  position:relative!important;
  width:min(100%, calc(var(--hier-flow-width) + 88px))!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:0 44px 34px!important;
  box-sizing:border-box!important;
  isolation:isolate;
}
.hier-flow-frame::after{
  content:"";
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  top:32px;
  bottom:0;
  border-left:3px solid var(--hier-active-color, rgba(110,168,254,.86));
  border-right:3px solid var(--hier-active-color, rgba(110,168,254,.86));
  border-bottom:3px solid var(--hier-active-color, rgba(110,168,254,.86));
  border-radius:0 0 28px 28px;
  opacity:.88;
  filter:drop-shadow(0 0 12px var(--hier-active-shadow, rgba(110,168,254,.28)));
  pointer-events:none;
}
.hier-flow-frame .hier-connector{
  position:relative!important;
  z-index:0!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:34px!important;
  margin:0 0 0!important;
  border-width:3px!important;
  border-top-style:solid!important;
  border-left-style:solid!important;
  border-right-style:solid!important;
  border-bottom:0!important;
  border-radius:24px 24px 0 0!important;
  border-color:var(--hier-active-color, rgba(110,168,254,.86))!important;
  filter:drop-shadow(0 0 12px var(--hier-active-shadow, rgba(110,168,254,.28)))!important;
}
.hier-flow-frame--primary .hier-connector{
  border-color:rgba(214,167,86,.88)!important;
  filter:drop-shadow(0 0 12px rgba(214,167,86,.30))!important;
}
.hier-flow-frame--primary::after{
  border-color:rgba(214,167,86,.82)!important;
  filter:drop-shadow(0 0 12px rgba(214,167,86,.24))!important;
}
.hier-flow-frame .hier-level{
  position:relative!important;
  z-index:1!important;
  margin:20px auto 0!important;
}
.hier-flow-frame--children .hier-level--children,
.hier-flow-frame--flat .hier-level--flat{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:stretch!important;
  gap:var(--hier-flow-gap)!important;
  width:var(--hier-flow-width)!important;
  max-width:100%!important;
  grid-template-columns:none!important;
}
.hier-flow-frame--children .hier-child,
.hier-flow-frame--flat .hier-child{
  flex:0 0 var(--hier-flow-card-width)!important;
  width:var(--hier-flow-card-width)!important;
  max-width:var(--hier-flow-card-width)!important;
}
.hier-flow-frame--primary .hier-level--primary{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:stretch!important;
  gap:var(--hier-flow-gap)!important;
  width:var(--hier-flow-width)!important;
  max-width:100%!important;
  grid-template-columns:none!important;
}
.hier-flow-frame--primary .hier-branch{
  flex:0 0 var(--hier-flow-card-width)!important;
  width:var(--hier-flow-card-width)!important;
  max-width:var(--hier-flow-card-width)!important;
}
.hier-flow-frame--children .hier-card--level-2{
  min-height:160px!important;
}
.hier-flow-frame--children .hier-card--level-2 .hier-card-value{
  font-size:clamp(28px, 2.4vw, 38px)!important;
}
.hier-flow-frame--children .hier-card--level-2 .hier-card-title{
  font-size:15px!important;
}
.hier-flow-frame--children .hier-card--level-2 .hier-card-icon,
.hier-flow-frame--children .hier-card--level-2 .hier-card-icon.has-photo{
  width:48px!important;
  height:48px!important;
}
.hier-stage-block .hier-children-shell{
  overflow:visible!important;
}
.hier-children-shell--from-left .hier-flow-frame{
  margin-left:0!important;
  margin-right:auto!important;
}
.hier-children-shell--from-center .hier-flow-frame{
  margin-left:auto!important;
  margin-right:auto!important;
}
.hier-children-shell--from-right .hier-flow-frame{
  margin-left:auto!important;
  margin-right:0!important;
}
.hier-children-shell .hier-connector--children{
  margin-left:0!important;
  margin-right:0!important;
}
.hier-children-shell::before{
  z-index:2;
}
.hier-flow-frame--children::before{
  content:"";
  position:absolute;
  z-index:2;
  top:32px;
  left:50%;
  width:3px;
  height:14px;
  transform:translateX(-50%);
  background:var(--hier-active-color, rgba(110,168,254,.86));
  box-shadow:0 0 10px var(--hier-active-shadow, rgba(110,168,254,.24));
  pointer-events:none;
}

@media (max-width:1180px){
  .hier-flow-frame{
    width:max-content!important;
    max-width:100%!important;
  }
  .hier-flow-frame--children .hier-level--children,
  .hier-flow-frame--flat .hier-level--flat{
    width:var(--hier-flow-width)!important;
  }
}

@media (max-width:760px){
  .hier-flow-frame{
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    padding:0 36px 28px!important;
  }
  .hier-flow-frame::after{
    top:28px;
    border-width:3px;
    border-radius:0 0 22px 22px;
  }
  .hier-flow-frame .hier-connector{
    height:30px!important;
    border-radius:20px 20px 0 0!important;
  }
  .hier-flow-frame--children .hier-level--children,
  .hier-flow-frame--flat .hier-level--flat,
  .hier-flow-frame--primary .hier-level--primary{
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    width:max-content!important;
    max-width:none!important;
    margin-top:18px!important;
  }
  .hier-flow-frame--children .hier-child,
  .hier-flow-frame--flat .hier-child,
  .hier-flow-frame--primary .hier-branch{
    flex:0 0 min(82vw, 380px)!important;
    width:min(82vw, 380px)!important;
    max-width:min(82vw, 380px)!important;
  }
  .hier-stage-block .hier-scroll-shell,
  .hier-stage-block .hier-children-shell{
    overflow-x:auto!important;
    overflow-y:visible!important;
    padding-left:14px!important;
    padding-right:14px!important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .hier-flow-frame--children::before{
    top:28px;
  }
}


/* ══ css/v31-enhancements.css ══ */
/* =============================================================================
   V31-ENHANCEMENTS.CSS — Mejoras visuales aditivas
   -----------------------------------------------------------------------------
   Se carga DESPUÉS de styles.css y tokens.css.
   Todas las reglas son ADITIVAS (nada se reemplaza), así que si se elimina
   este archivo la app vuelve al estado v30 sin artefactos visuales.
   ============================================================================= */

/* ═══════════════ 1. TABULAR-NUMS en todas las columnas numéricas ═════════════ */
.kpi-val,
.kpi-delta,
td.r,
th.r,
.hb-val,
.gk-val,
.proj-hero-val,
.acsum-table td.r,
.acum-table td.r,
.cbadge,
.detail-strip-badge {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ═══════════════ 2. KPI con delta + sparkline (inyectado por JS) ═════════════ */
.kpi {
  position: relative;
}

.kpi-delta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: var(--kpi-delta-size);
  font-weight: var(--fw-600);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.2;
  letter-spacing: -0.1px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.kpi-delta.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.kpi-delta--up {
  color: var(--intent-success);
}
.kpi-delta--down {
  color: var(--intent-danger);
}
.kpi-delta--neutral {
  color: var(--intent-neutral);
}
.kpi-delta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
}
.kpi-delta-label {
  font-size: 10px;
  color: var(--mut);
  font-weight: var(--fw-500);
  margin-left: 2px;
}

.kpi-spark {
  position: absolute;
  top: 10px;
  right: 10px;
  width: var(--kpi-spark-width);
  height: var(--kpi-spark-height);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}
.kpi-spark.is-visible {
  opacity: 0.85;
}
.kpi-spark path.kpi-spark-line {
  fill: none;
  stroke: var(--acc);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kpi-spark path.kpi-spark-area {
  fill: var(--acc);
  opacity: 0.14;
}
.kpi-spark circle.kpi-spark-dot {
  fill: var(--acc);
}

/* En mobile, el sparkline queda debajo del número, no a la derecha */
@media (max-width: 640px) {
  .kpi-spark {
    position: static;
    width: 100%;
    margin-top: 4px;
  }
}

/* ═══════════════ 3. SKELETON LOADERS refinados ═══════════════════════════════ */
.skel {
  display: inline-block;
  width: 80px;
  height: 14px;
  border-radius: var(--radius-xs);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.09) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s linear infinite;
}
.skel--wide { width: 140px; }
.skel--kpi  { width: 90px; height: 28px; margin-top: 4px; }

:root[data-theme="light"] .skel {
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.04) 0%,
    rgba(15, 23, 42, 0.09) 50%,
    rgba(15, 23, 42, 0.04) 100%
  );
  background-size: 200% 100%;
}

@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ═══════════════ 4. EMPTY STATES mejorados ═════════════════════════════════ */
.empty.empty--v31 {
  padding: var(--empty-padding);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.empty--v31 .eico {
  font-size: var(--empty-icon-size);
  opacity: 0.6;
  filter: grayscale(0.2);
}
.empty--v31 .etit-sub {
  font-size: var(--empty-title-size);
  font-weight: var(--fw-700);
  color: var(--txt);
  font-family: 'Syne', sans-serif;
  letter-spacing: -0.2px;
}
.empty--v31 .ecopy {
  font-size: var(--empty-copy-size);
  color: var(--mut);
  max-width: 360px;
  line-height: var(--lh-base);
}
.empty--v31 .eactions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-2);
}
.empty--v31 .eactions button {
  background: var(--acc-soft);
  border: 1px solid var(--intent-warning-border);
  color: var(--acc);
  padding: 6px 14px;
  border-radius: var(--radius-md);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-12);
  font-weight: var(--fw-600);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
}
.empty--v31 .eactions button:hover {
  transform: var(--hover-lift);
  background: rgba(251, 191, 36, 0.22);
}
.empty--v31 .eactions button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ═══════════════ 5. MICROINTERACTIONS ═════════════════════════════════════════ */
/* Hover lift en filas de tabla (respeta skeletons) */
.acsum-table tbody tr:not(.skeleton-row):hover,
.acum-table tbody tr:not(.skeleton-row):hover {
  background: var(--table-hover-bg);
  transition: background var(--duration-fast) var(--ease-out);
}

/* Focus visible consistente */
button:focus-visible,
.pbtn:focus-visible,
.tab:focus-visible,
.ap:focus-visible,
.btn-xs:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Chips de filtro con animación al agregar */
.ap {
  animation: chip-in var(--duration-base) var(--ease-spring) both;
}
@keyframes chip-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Theme toggle con rotación sutil al cambiar */
.theme-toggle {
  transition: transform var(--duration-slow) var(--ease-spring),
              background var(--duration-base) var(--ease-out);
}
.theme-toggle:hover {
  transform: rotate(-15deg);
}
.theme-toggle:active {
  transform: rotate(0deg) scale(0.92);
}

/* Tab bar con underline animado */
.tabs-bar .tab {
  position: relative;
  transition: color var(--duration-base) var(--ease-out);
}
.tabs-bar .tab::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  background: var(--acc);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--duration-base) var(--ease-out);
}
.tabs-bar .tab.on::after {
  transform: scaleX(1);
}

/* Pills de período con press feedback */
.pbtn:active {
  transform: var(--active-press);
}

/* ═══════════════ 6. TOAST NOTIFICATIONS (ya existe .ux-toast, refinamos) ═══ */
.ux-toast {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 3000;
  background: var(--surf);
  color: var(--txt);
  border: 1px solid var(--brd);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-12);
  font-weight: var(--fw-600);
  box-shadow: var(--shadow-lg, 0 14px 38px rgba(0, 0, 0, 0.32));
  opacity: 0;
  animation: toast-pop var(--duration-slow) var(--ease-spring) forwards;
  max-width: calc(100vw - 32px);
}
@keyframes toast-pop {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ═══════════════ 7. AI PANEL: thumbs feedback ═════════════════════════════════ */
.ai-m.bot .ai-feedback {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ai-m.bot .ai-fb-btn {
  background: none;
  border: 1px solid transparent;
  color: rgba(234, 240, 251, 0.4);
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-out);
  padding: 0;
}
.ai-m.bot .ai-fb-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(234, 240, 251, 0.75);
  border-color: rgba(255, 255, 255, 0.08);
}
.ai-m.bot .ai-fb-btn.on[data-rating="up"] {
  color: var(--intent-success);
  background: var(--intent-success-soft);
  border-color: var(--intent-success-border);
}
.ai-m.bot .ai-fb-btn.on[data-rating="down"] {
  color: var(--intent-danger);
  background: var(--intent-danger-soft);
  border-color: var(--intent-danger-border);
}
.ai-m.bot .ai-fb-note {
  font-size: 10px;
  color: rgba(234, 240, 251, 0.4);
  margin-left: 6px;
}

/* ═══════════════ 8. CONTEXT-AWARE AI SUGGESTIONS (dinámicas) ═══════════════ */
.ai-quick--dynamic {
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding-top: 8px;
}
.ai-quick--dynamic::before {
  content: "💡 Sugerencias según tu vista";
  display: block;
  font: 600 9px/1.3 'DM Sans', sans-serif;
  color: rgba(234, 240, 251, 0.35);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
  width: 100%;
}
.ai-qbtn--dynamic {
  background: rgba(96, 165, 250, 0.08) !important;
  border-color: rgba(96, 165, 250, 0.22) !important;
  color: #93c5ff !important;
}
.ai-qbtn--dynamic:hover {
  background: rgba(96, 165, 250, 0.15) !important;
  color: #bfdbfe !important;
}


/* ══ css/ui-refresh-v32.css ══ */
/* =============================================================================
   UI-REFRESH v32 — Capa final ordenada
   -----------------------------------------------------------------------------
   Objetivo: profesionalizar la UI sin tocar lógica ni contratos.
   Aplica el mini design system v32 sobre filtros, cards, tablas y charts.
   ============================================================================= */

:root {
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

html, body {
  background: var(--bg) !important;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-ui) !important;
}

body {
  color: var(--txt) !important;
  background:
    radial-gradient(circle at top left, rgba(110, 168, 254, 0.08), transparent 28%),
    radial-gradient(circle at top right, rgba(214, 167, 86, 0.06), transparent 24%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, #040814 8%) 100%) !important;
}

.logo,
.page-hero-title,
.kpi-val,
.proj-hero-title,
.proj-hero-item .proj-hero-val,
.gk-val,
.ct,
.acum-rank,
.hb-val,
.dl-val,
.daily-legend-kpi,
.story-card .story-title,
.story-card .story-value,
.detail-total-value,
.detail-glance-card__value,
.auth-title,
.app-update-toast__title,
.bcra-pill .bcra-val,
.bcra-tt-row .val,
.proj-var-pos,
.proj-var-neg,
.proj-var-neu,
.trend-chip,
.btn-add,
.auth-btn,
.ovtxt {
  font-family: var(--font-display) !important;
}

.kpi-lbl,
.sel-lbl,
.page-hero-eyebrow,
.page-hero-copy,
.hero-chip,
thead th,
.grupo-strip-lbl,
.cbadge,
.snote,
.daily-axis-label,
.daily-grid-label,
.lc-lbl,
.search-meta,
.detail-toolbar-section-title,
.detail-toolbar-tip,
.proj-hero-sub,
.proj-hero-item .proj-hero-lbl,
.proj-hero-subitem {
  letter-spacing: 0.01em !important;
}

.hdr {
  min-height: var(--header-height);
  padding: 12px 20px !important;
  background: color-mix(in srgb, var(--panel) 84%, transparent) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  backdrop-filter: none;
  box-shadow: 0 16px 30px rgba(2, 8, 23, 0.22) !important;
}

.logo {
  font-size: 18px !important;
  letter-spacing: -0.04em !important;
  color: var(--txt) !important;
}

.logo b {
  color: var(--acc-2) !important;
}

.theme-toggle,
.pill-status,
.bcra-pill {
  border-radius: 999px !important;
  min-height: 38px;
  background: color-mix(in srgb, var(--panel-2) 90%, transparent) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.pill-status {
  color: var(--mut) !important;
  padding-inline: 12px !important;
}

.bcra-pill .bcra-lbl {
  color: var(--mut) !important;
}

.filter-panel {
  background: color-mix(in srgb, var(--panel) 88%, transparent) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: 0 12px 30px rgba(2, 8, 23, 0.16) !important;
  backdrop-filter: none;
}

.fp-inner {
  padding: 16px 20px !important;
}

.fp-top {
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.fp-main-controls {
  gap: 8px !important;
  align-items: center !important;
}

.date-pair {
  padding: 6px 8px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

.date-pair label {
  color: var(--mut) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.btn-xs,
.pbtn,
.table-action-btn,
.hero-chip--action {
  min-height: 36px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease !important;
}

.btn-xs,
.pbtn,
.table-action-btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  color: var(--txt2) !important;
}

.btn-xs:hover,
.pbtn:hover,
.table-action-btn:hover,
.hero-chip--action:hover {
  transform: translateY(-1px);
}

.pbtn:hover,
.pbtn.on,
.hero-chip--action,
.hero-chip--action:hover {
  color: var(--acc-light) !important;
  border-color: var(--acc-border) !important;
  background: linear-gradient(180deg, rgba(214, 167, 86, 0.16), rgba(214, 167, 86, 0.08)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 24px rgba(214, 167, 86, 0.12);
}

.btn-xs.btn-ghost:hover,
.btn-xs:hover {
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--txt) !important;
}

.fp-selects {
  gap: 12px !important;
}

.sel-wrap {
  display: grid;
  gap: 8px;
  padding: 12px 12px 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.014));
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.sel-lbl {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--txt2) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.snum {
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--mut) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
}

.snum.on {
  background: var(--acc-soft) !important;
  border-color: var(--acc-border) !important;
  color: var(--acc-light) !important;
  box-shadow: 0 0 0 4px rgba(214, 167, 86, 0.08);
}

select,
input[type=date],
.search-box,
.detail-tool-field input,
.detail-tool-field select,
.proj-field input,
.detail-col-menu__search {
  min-height: var(--control-height) !important;
  border-radius: var(--radius-control) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--control) 92%, transparent), color-mix(in srgb, var(--control-2) 90%, transparent)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: var(--txt) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

select:hover,
input[type=date]:hover,
.search-box:hover,
.detail-tool-field input:hover,
.detail-tool-field select:hover,
.proj-field input:hover,
.detail-col-menu__search:hover {
  border-color: rgba(255,255,255,0.14) !important;
}

select:focus,
input[type=date]:focus,
.search-box:focus-within,
.detail-tool-field input:focus,
.detail-tool-field select:focus,
.proj-field input:focus,
.detail-col-menu__search:focus {
  border-color: var(--acc-border) !important;
  box-shadow: var(--focus-ring), inset 0 1px 0 rgba(255,255,255,0.03) !important;
  outline: none !important;
}

.search-input,
.detail-tool-field input,
.detail-tool-field select,
.proj-field input,
.detail-col-menu__search {
  font-size: 12px !important;
}

.search-ico,
.search-meta,
.search-clear {
  color: var(--mut) !important;
}

.search-dd {
  margin-top: 6px;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: color-mix(in srgb, var(--panel-2) 96%, transparent) !important;
  box-shadow: 0 18px 42px rgba(2,8,23,0.32) !important;
  overflow: hidden;
}

.ap,
.detail-toolbar-pill,
.hero-chip,
.cbadge,
.detail-strip-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  border-radius: 999px !important;
  padding: 6px 11px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.ap,
.detail-toolbar-pill,
.hero-chip,
.cbadge {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  color: var(--txt2) !important;
}

.ap {
  background: rgba(214, 167, 86, 0.10) !important;
  border-color: rgba(214, 167, 86, 0.20) !important;
  color: var(--acc-light) !important;
}

.tabs-bar {
  background: color-mix(in srgb, var(--panel) 90%, transparent) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  padding: 0 18px !important;
  backdrop-filter: none;
}

.tab {
  position: relative;
  min-height: 46px;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--mut) !important;
  border-bottom: none !important;
  border-radius: 12px 12px 0 0;
  margin-top: 6px;
  padding: 11px 14px 13px !important;
}

.tab:hover {
  color: var(--txt) !important;
  background: rgba(255,255,255,0.035) !important;
}

.tab.on {
  color: var(--txt) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)) !important;
}

.tab.on::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--acc), var(--tea));
}

.page-hero-shell {
  padding: 18px 14px 4px !important;
}

.page-hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 24px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  background:
    radial-gradient(circle at top right, rgba(214,167,86,0.12), transparent 28%),
    radial-gradient(circle at top left, rgba(110,168,254,0.10), transparent 25%),
    linear-gradient(180deg, rgba(23,32,51,0.92), rgba(14,20,34,0.88)) !important;
  box-shadow: var(--shadow-md) !important;
}

.page-hero-title {
  font-size: clamp(28px, 4vw, 38px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.04em !important;
  color: var(--txt) !important;
}

.page-hero-eyebrow {
  color: var(--acc-light) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
}

.page-hero-copy {
  color: var(--txt-soft) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  max-width: 64ch;
}

.page-hero-meta {
  gap: 10px !important;
}

.hero-chip--soft {
  background: rgba(110,168,254,0.08) !important;
  border-color: rgba(110,168,254,0.18) !important;
  color: #cfe0ff !important;
}

.wrap {
  padding: 16px 14px !important;
}

.kpi-row {
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.kpi,
.card,
.story-card,
.proj-hero-card,
.proj-hero-item,
.gk,
.detail-search-preview,
.detail-toolbar-presets,
.detail-toolbar-favorites,
.detail-toolbar-advanced,
.detail-toolbar-meta--context {
  border-radius: var(--radius-card) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  background: linear-gradient(180deg, rgba(23,32,51,0.96), rgba(17,24,39,0.92)) !important;
  box-shadow: var(--shadow-sm) !important;
}

.kpi {
  padding: 14px 16px !important;
}

.kpi::before,
.proj-hero-item::before,
.gk-bar {
  height: 3px !important;
}

.kpi-lbl {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--mut) !important;
  text-transform: uppercase;
}

.kpi-val {
  font-size: clamp(24px, 3vw, 31px) !important;
  line-height: 1 !important;
  letter-spacing: -0.05em !important;
  font-variant-numeric: tabular-nums;
}

.kpi-sub,
.proj-hero-subitem,
.grupo-strip-hint,
.story-card .story-copy {
  color: var(--txt-soft) !important;
}

.detail-strip-head {
  margin-bottom: 10px !important;
}

.detail-strip-badge {
  background: rgba(110,168,254,0.08) !important;
  border: 1px solid rgba(110,168,254,0.18) !important;
  color: #d5e5ff !important;
}

.gk {
  min-width: 136px !important;
  padding: 12px 14px !important;
}

.gk-name {
  color: var(--txt2) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

.gk-val {
  font-size: 20px !important;
  color: var(--txt) !important;
  font-variant-numeric: tabular-nums;
}

.gk-pct {
  color: var(--mut) !important;
  font-size: 10px !important;
}

.gk.clickable.active {
  border-color: var(--acc-border) !important;
  box-shadow: inset 0 0 0 1px rgba(214,167,86,0.14), 0 14px 28px rgba(2,8,23,0.22) !important;
  background: linear-gradient(180deg, rgba(214,167,86,0.11), rgba(23,32,51,0.92)) !important;
}

.ch {
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.ct {
  font-size: 11px !important;
  color: var(--txt2) !important;
  letter-spacing: 0.08em !important;
}

.detail-toolbar {
  padding: 14px 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008)) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.detail-toolbar-presets,
.detail-toolbar-favorites,
.detail-toolbar-advanced,
.detail-toolbar-meta--context {
  padding: 12px 13px !important;
}

.detail-toolbar-pill strong {
  color: var(--txt) !important;
}

.detail-toolbar-pill--accent {
  background: rgba(214,167,86,0.10) !important;
  border-color: rgba(214,167,86,0.20) !important;
  color: var(--acc-light) !important;
}

.tw {
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

table {
  min-width: 620px !important;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 11px 12px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--txt2) !important;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025)) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

:root[data-theme="light"] thead th {
  background: linear-gradient(180deg, rgba(15,23,42,0.03), rgba(15,23,42,0.015)) !important;
}

tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

tbody tr:nth-child(even) {
  background: var(--table-zebra-bg) !important;
}

tbody tr:hover {
  background: linear-gradient(90deg, rgba(214,167,86,0.08), rgba(97,196,216,0.04)) !important;
}

tbody tr:hover td {
  color: inherit !important;
}

td {
  padding: 10px 12px !important;
  font-size: 12px !important;
  color: var(--txt2);
}

td.num,
.r,
.detail-total-value,
.detail-glance-card__value,
tr td[class*="var-"] {
  font-variant-numeric: tabular-nums;
}

td.num,
.r {
  color: var(--txt) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
}

.detail-subtotal-row td,
.detail-summary-row td,
.detail-grandtotal-row td {
  font-weight: 800 !important;
}

.detail-subtotal-row td {
  background: rgba(110,168,254,0.07) !important;
  border-top: 1px solid rgba(110,168,254,0.16) !important;
  color: #d8e6ff !important;
}

.detail-summary-row td {
  background: rgba(97,196,216,0.08) !important;
  border-top: 1px solid rgba(97,196,216,0.18) !important;
  color: #dbf5fa !important;
}

.detail-grandtotal-row td {
  background: rgba(214,167,86,0.11) !important;
  border-top: 1px solid rgba(214,167,86,0.24) !important;
  color: var(--acc-light) !important;
}

.empty,
.chart-empty {
  color: var(--mut) !important;
}

.hbars,
.donut-wrap,
.lc-wrap {
  padding: 14px 16px 16px !important;
}

.hb-name,
.dl-name {
  color: var(--txt-soft) !important;
}

.hb-track,
.mini-bar-track {
  background: rgba(255,255,255,0.07) !important;
}

.hb-fill,
.mini-bar {
  box-shadow: 0 6px 18px rgba(2,8,23,0.16);
}

.lc-grid,
.daily-grid {
  stroke: var(--chart-grid) !important;
}

.lc-lbl,
.daily-axis-label,
.daily-grid-label {
  fill: var(--chart-text-soft) !important;
  color: var(--chart-text-soft) !important;
}

.daily-area {
  opacity: 0.9;
}

.daily-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 6px 12px rgba(2,8,23,0.16));
}

.daily-dot {
  stroke: var(--chart-dot-stroke) !important;
  stroke-width: 2.2 !important;
}

.daily-dot-hit:hover + .daily-dot {
  r: 5.2 !important;
}

.donut-svg text {
  font-family: var(--font-display) !important;
}

.overlay {
  background: rgba(9, 14, 24, 0.86) !important;
  backdrop-filter: none;
}

.spin {
  border-top-color: var(--acc) !important;
}

@media (max-width: 900px) {
  .page-hero {
    padding: 18px 18px !important;
    border-radius: 24px !important;
  }

  .fp-inner,
  .wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

@media (max-width: 640px) {
  .hdr {
    padding: 10px 12px !important;
  }

  .logo {
    font-size: 16px !important;
  }

  .fp-inner {
    padding: 12px !important;
  }

  .sel-wrap {
    padding: 10px 10px 9px;
    border-radius: 16px;
  }

  .page-hero-shell {
    padding-top: 14px !important;
  }

  .page-hero {
    padding: 16px !important;
  }

  .page-hero-title {
    font-size: 26px !important;
  }

  .kpi-row {
    gap: 10px !important;
  }

  .kpi,
  .card,
  .proj-hero-card,
  .proj-hero-item {
    border-radius: 18px !important;
  }

  .ch,
  .detail-toolbar,
  .hbars,
  .donut-wrap,
  .lc-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* ══ css/ui-v35.css ══ */
/* =============================================================================
   UI-V35.CSS — Mejoras UI/UX Plan v35
   Se carga DESPUÉS de styles.css y ui-refresh-v32.css.
   Solo agrega o sobreescribe selectores específicos. No modifica la estructura.
   ============================================================================= */

/* ══════════════════════════════════════════════════════════════════════════════
   E2 — TABS: bloque canónico único (elimina los 49 conflictos)
   ══════════════════════════════════════════════════════════════════════════════ */

.tabs-bar {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs-bar::-webkit-scrollbar { display: none; }

.tab {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--mut);
  padding: 11px 16px;
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--dur-base) ease, border-color var(--dur-base) ease,
              background var(--dur-base) ease;
  user-select: none;
  outline: none;
  position: relative;
}
.tab:hover {
  color: var(--txt2);
  background: rgba(255, 255, 255, 0.03);
}
.tab:focus-visible {
  box-shadow: inset var(--focus-ring);
  border-radius: var(--rad-sm) var(--rad-sm) 0 0;
}
.tab.on {
  color: var(--acc-light, var(--acc));
  border-bottom-color: var(--acc);
  font-weight: 600;
  background: rgba(214, 167, 86, 0.05);
}
:root[data-theme="light"] .tab.on {
  color: var(--acc);
  background: rgba(184, 135, 52, 0.06);
}
:root[data-theme="light"] .tab:hover {
  background: rgba(15, 23, 42, 0.03);
  color: var(--txt2);
}

/* ══════════════════════════════════════════════════════════════════════════════
   E2 — HEADER: rediseño compacto con identidad
   ══════════════════════════════════════════════════════════════════════════════ */

.hdr {
  background: var(--surf);
  border-bottom: 1px solid var(--brd);
  padding: 0 16px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 300;
  gap: 12px;
}

.logo {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--txt);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.logo b { color: var(--acc); font-weight: 800; }
.logo::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--acc);
  flex-shrink: 0;
}

.hdr-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pill-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--mut);
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: var(--rad-pill);
  padding: 4px 10px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════════
   E3 — PANEL DE FILTROS: separadores visuales por grupo
   ══════════════════════════════════════════════════════════════════════════════ */

.fp-selects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 520px) {
  .fp-selects { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .fp-selects { grid-template-columns: repeat(7, 1fr); gap: 6px; }
}

/* Separador visual entre grupo "Equipo" y "Producto/Región" */
@media (min-width: 900px) {
  .sel-wrap:nth-child(3) { border-left: 1px solid var(--brd); padding-left: 10px; }
}

.sel-lbl {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--mut);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

.snum {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brd);
  color: var(--mut);
  font-size: 8px;
  font-family: var(--font-display, 'Syne', sans-serif);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-base) ease, color var(--dur-base) ease;
}
.snum.on { background: var(--acc); color: #000; }

select {
  border-radius: var(--rad-md);
  font-size: var(--fs-base);
  transition: border-color var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
select:hover { border-color: var(--brd-2); }
select:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--acc-border); }

/* ══════════════════════════════════════════════════════════════════════════════
   E4 — BARRA DE PROGRESO: indicador global de carga en top del header
   ══════════════════════════════════════════════════════════════════════════════ */

#loadProgressBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: var(--progress-bar-h, 2px);
  background: var(--progress-bar-color, var(--acc));
  z-index: 9999;
  transition: width 0.22s ease, opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
}
#loadProgressBar.active {
  opacity: 1;
  width: 75%;
}
#loadProgressBar.done {
  opacity: 0;
  width: 100%;
  transition: width 0.18s ease, opacity 0.4s ease 0.1s;
}

/* ══════════════════════════════════════════════════════════════════════════════
   E4 — SKELETON LOADER: para Resumen Acumulado y tablas
   ══════════════════════════════════════════════════════════════════════════════ */

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.acsum-skeleton-cell {
  display: inline-block;
  height: 12px;
  border-radius: var(--rad-sm);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
}
:root[data-theme="light"] .acsum-skeleton-cell {
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.05) 25%,
    rgba(15, 23, 42, 0.10) 50%,
    rgba(15, 23, 42, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
}

.acsum-skeleton-row td { padding: 10px 11px; }
.acsum-skeleton-row td:first-child .acsum-skeleton-cell { width: 18px; }
.acsum-skeleton-row td:nth-child(2) .acsum-skeleton-cell { width: 60%; }
.acsum-skeleton-row td:not(:first-child):not(:nth-child(2)) .acsum-skeleton-cell { width: 70px; float: right; }

/* ══════════════════════════════════════════════════════════════════════════════
   E5 — TABLA DE DETALLE: ancho fijo para evitar saltos de layout
   ══════════════════════════════════════════════════════════════════════════════ */

#mainTable {
  table-layout: fixed;
  width: 100%;
}
#mainTable th:first-child,
#mainTable td:first-child { width: 40px; }
#mainTable th:nth-child(2),
#mainTable td:nth-child(2) { width: 38%; }

/* ══════════════════════════════════════════════════════════════════════════════
   E5 — HOVER UNIFICADO en todas las tablas
   ══════════════════════════════════════════════════════════════════════════════ */

#mainTable tbody tr:hover,
.acsum-table tbody tr:hover,
.proj-table tbody tr:hover {
  background: var(--table-hover-bg) !important;
  cursor: default;
  transition: background var(--dur-fast) ease;
}

/* ══════════════════════════════════════════════════════════════════════════════
   E6 — TRANSICIÓN DE TABS: fade suave
   ══════════════════════════════════════════════════════════════════════════════ */

@keyframes page-in-v35 {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.page { display: none; }
.page.on {
  display: block;
  animation: page-in-v35 var(--dur-base) var(--ease-out);
}

/* ══════════════════════════════════════════════════════════════════════════════
   E6 — MOBILE DOCK: con íconos SVG y labels más claros
   ══════════════════════════════════════════════════════════════════════════════ */

.mobile-dock-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 48px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--mut);
  background: rgba(28, 32, 48, 0.96);
  border: none;
  border-radius: var(--rad-md);
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.mobile-dock-btn:hover,
.mobile-dock-btn:active {
  background: rgba(214, 167, 86, 0.14);
  color: var(--acc);
}
.mobile-dock-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   E6 — KPI CARDS: escala tipográfica y estado de carga mejorado
   ══════════════════════════════════════════════════════════════════════════════ */

.kpi {
  border-radius: var(--rad-lg);
  transition: box-shadow var(--dur-base) ease;
}
.kpi:hover { box-shadow: var(--shadow-sm); }

.kpi-lbl {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 6px;
}
.kpi-val {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
}
.kpi--loading .kpi-val {
  color: transparent !important;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: var(--rad-sm);
  min-width: 80px;
  display: block;
  height: 1.1em;
}
:root[data-theme="light"] .kpi--loading .kpi-val {
  background: linear-gradient(
    90deg,
    rgba(15, 23, 42, 0.06) 25%,
    rgba(15, 23, 42, 0.12) 50%,
    rgba(15, 23, 42, 0.06) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
}
.kpi--loading .kpi-lbl { opacity: 0.45; }

/* ══════════════════════════════════════════════════════════════════════════════
   E6 — PAGE HERO: títulos más legibles y jerarquizados
   ══════════════════════════════════════════════════════════════════════════════ */

.page-hero-eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--acc);
  margin-bottom: 4px;
}
.page-hero-title {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.05;
  color: var(--txt);
}
.page-hero-copy {
  font-size: var(--fs-md);
  color: var(--mut);
  line-height: var(--lh-loose);
  margin-top: 6px;
  max-width: 68ch;
}

/* Card title (.ct): más legible, menos uppercase stress */
.ct {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   E6 — BUTTONS: hover más visible, tamaño de toque mínimo
   ══════════════════════════════════════════════════════════════════════════════ */

.btn-xs {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--rad-md);
  border: 1px solid var(--brd);
  color: var(--mut);
  background: transparent;
  cursor: pointer;
  transition: all var(--dur-fast) ease;
  min-height: 30px;
}
.btn-xs:hover {
  border-color: var(--acc-border);
  color: var(--acc);
  background: var(--acc-soft);
}

.pbtn {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: var(--rad-md);
  padding: 5px 11px;
  border: 1px solid var(--brd);
  color: var(--mut);
  background: var(--card);
  cursor: pointer;
  transition: all var(--dur-fast) ease;
  white-space: nowrap;
}
.pbtn:hover, .pbtn.on {
  background: var(--acc-soft);
  border-color: var(--acc-border);
  color: var(--acc);
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE ajustes menores
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 599px) {
  .page-hero-title { font-size: 22px; }
  .tab { padding: 10px 12px; font-size: 12px; }
  .hdr { height: 44px; padding: 0 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   V36 — TIPOGRAFÍA DE DATOS: DM Mono reemplaza Syne en contextos numéricos
   ══════════════════════════════════════════════════════════════════════════════ */

/* Números en tablas — cifras tabuladas, alineación perfecta entre filas */
td.num,
td.r,
th.r,
.r {
  font-family: var(--font-data, 'DM Mono', monospace);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.2px;
}

/* Columnas de variación (Var %, Var Kg) — peso ligeramente mayor para legibilidad */
td[class*="var-"],
.acsum-delta-pos,
.acsum-delta-neg,
.acsum-delta-zero,
.trend-chip {
  font-family: var(--font-data, 'DM Mono', monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* KPI: valores grandes — DM Mono para legibilidad de cifras financieras */
.kpi-val {
  font-family: var(--font-data, 'DM Mono', monospace);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Valores en barras, explorador de acumulados */
.hb-val,
.dl-val,
.acum-rank,
.gk-val,
.daily-legend-kpi,
.detail-total-value,
.cc-rv {
  font-family: var(--font-data, 'DM Mono', monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
}

/* Badges numéricos (cbadge con números) */
.cbadge {
  font-family: var(--font-data, 'DM Mono', monospace);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
}

/* Fila total de acsum */
.acsum-row-total .acsum-td-num,
.acsum-td-num {
  font-family: var(--font-data, 'DM Mono', monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   V36 — CONTRASTE: encabezados de card y secciones
   Problema: .ct usaba --mut (#94a3b8) sobre --card (#172033) → ratio 4.2:1 (falla AA)
   Fix: --txt2 → ratio ~7.4:1 (supera AAA)
   ══════════════════════════════════════════════════════════════════════════════ */

.ct {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: var(--txt2);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Encabezados de tabla — también mejoran contraste */
thead th {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 10px;
  font-weight: 700;
  color: var(--txt2);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

/* Subtítulos y notas al pie — mejorar de --mut a --txt-soft */
.ovtxt,
.snote,
.acum-mini-note,
.page-hero-copy {
  color: var(--txt-soft, var(--mut));
}

/* Labels de KPI — de --mut a --txt-soft */
.kpi-lbl {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--txt-soft, var(--mut));
  margin-bottom: 6px;
}

/* cbadge: mejorar visibilidad */
.cbadge {
  background: var(--card2, var(--surf));
  border: 1px solid var(--brd-2, var(--brd));
  color: var(--txt2);
  border-radius: var(--rad-pill);
  padding: 2px 10px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   V36 — ANIMACIONES: 6 nuevas animaciones de datos y UI
   Todas respetan prefers-reduced-motion
   ══════════════════════════════════════════════════════════════════════════════ */

/* 1. Fade-in de filas en tabla comparativa */
@keyframes row-enter {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

.acsum-table tbody tr {
  animation: row-enter 0.22s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both;
}

/* Stagger: cada fila aparece 35ms después que la anterior */
.acsum-table tbody tr:nth-child(1)  { animation-delay: 0ms; }
.acsum-table tbody tr:nth-child(2)  { animation-delay: 35ms; }
.acsum-table tbody tr:nth-child(3)  { animation-delay: 70ms; }
.acsum-table tbody tr:nth-child(4)  { animation-delay: 105ms; }
.acsum-table tbody tr:nth-child(5)  { animation-delay: 140ms; }
.acsum-table tbody tr:nth-child(6)  { animation-delay: 175ms; }
.acsum-table tbody tr:nth-child(7)  { animation-delay: 210ms; }
.acsum-table tbody tr:nth-child(8)  { animation-delay: 245ms; }
.acsum-table tbody tr:nth-child(9)  { animation-delay: 280ms; }
.acsum-table tbody tr:nth-child(10) { animation-delay: 315ms; }
.acsum-table tbody tr:nth-child(n+11) { animation-delay: 350ms; }

/* 2. Barras de variación: crecen desde 0 al renderizar */
@keyframes bar-grow {
  from { width: 0 !important; }
  to   { width: var(--bar-w, 100%); }
}

.acsum-bar-fill {
  animation: bar-grow 0.5s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both;
  animation-delay: 0.3s;
}

/* 3. Pulse en badge cuando se actualiza */
@keyframes badge-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(214, 167, 86, 0.45); }
  60%  { box-shadow: 0 0 0 6px rgba(214, 167, 86, 0); }
  100% { box-shadow: 0 0 0 0 rgba(214, 167, 86, 0); }
}

.cbadge.is-updating {
  animation: badge-pulse 0.7s ease-out;
}

/* 4. KPI card — lift en hover */
.kpi {
  border-radius: var(--rad-lg);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* 5. Fade-in para números en tabla principal al recargarse */
@keyframes num-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#mainTable tbody tr {
  animation: num-appear 0.18s ease both;
}
#mainTable tbody tr:nth-child(odd)  { animation-delay: 0ms; }
#mainTable tbody tr:nth-child(even) { animation-delay: 25ms; }

/* 6. Transición suave de fila total al aparecer */
@keyframes total-slide-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.acsum-row-total {
  animation: total-slide-in 0.3s var(--ease-out) both;
  animation-delay: 0.4s;
}

/* Respetar prefers-reduced-motion — desactivar todas las animaciones */
@media (prefers-reduced-motion: reduce) {
  .acsum-table tbody tr,
  .acsum-bar-fill,
  .acsum-row-total,
  #mainTable tbody tr {
    animation: none !important;
    transition: none !important;
  }
  .kpi:hover {
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   V36 — TIPOGRAFÍA FORMAL: encabezados más jerarquizados
   ══════════════════════════════════════════════════════════════════════════════ */

/* Page hero: mayor peso y contraste */
.page-hero-title {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.05;
  color: var(--txt);
}

/* Títulos de sección dentro de cards — variante más prominente */
.ct-lg {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--txt);
  letter-spacing: 0;
  text-transform: none;
}

/* Logo: más formal con Syne */
.logo {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

/* Acum explorer title y otros títulos de card prominentes */
#acumExplorerTitle,
#detailTitle,
#acsumTitle {
  font-size: 12px;
  font-weight: 700;
  color: var(--txt2);
  letter-spacing: 0.5px;
}

/* Light mode: ajuste de contraste para txt2 */
:root[data-theme="light"] .ct {
  color: var(--txt2);
}
:root[data-theme="light"] thead th {
  color: var(--txt2);
}
:root[data-theme="light"] .kpi-lbl {
  color: var(--mut-2, var(--mut));
}

/* ══════════════════════════════════════════════════════════════════════════════

/* ══════════════════════════════════════════════════════════════════════════════
   V38 — FRECUENCIA DE COMPRA: estilos completos (reemplaza bloque V37)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Toolbar ─────────────────────────────────────────────────────────────────*/
.freq-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: var(--rad-xl);
  margin-bottom: 12px;
}
.freq-toolbar > div {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.freq-toolbar label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--mut);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Botones de modo ─────────────────────────────────────────────────────────*/
.freq-mode-btns { display: flex; gap: 4px; }
.freq-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--card);
  border: 1px solid var(--brd);
  color: var(--mut);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  padding: 6px 13px;
  border-radius: var(--rad-pill);
  cursor: pointer;
  transition: all var(--dur-fast) ease;
  white-space: nowrap;
}
.freq-mode-btn:hover { border-color: var(--acc-border); color: var(--acc); }
.freq-mode-btn.on {
  background: var(--acc-soft);
  border-color: var(--acc-border);
  color: var(--acc-light, var(--acc));
  font-weight: 600;
}

/* ── Botones de vista ────────────────────────────────────────────────────────*/
.freq-view-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.freq-view-btn {
  background: var(--card);
  border: 1px solid var(--brd);
  color: var(--mut);
  font-size: 11.5px;
  font-weight: 500;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  padding: 5px 11px;
  border-radius: var(--rad-pill);
  cursor: pointer;
  transition: all var(--dur-fast) ease;
  white-space: nowrap;
}
.freq-view-btn:hover { border-color: var(--blu); color: var(--blu); }
.freq-view-btn.on {
  background: rgba(110,168,254,.12);
  border-color: var(--blu);
  color: var(--blu);
  font-weight: 600;
}

/* ── Selector de familia interno ─────────────────────────────────────────────*/
.freq-grupo-sel {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: var(--rad-md);
  color: var(--txt);
  font-size: 12px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  padding: 5px 28px 5px 10px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  cursor: pointer;
  max-width: 180px;
  transition: border-color var(--dur-fast) ease;
}
.freq-grupo-sel:hover { border-color: var(--brd-2); }
.freq-grupo-sel:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--acc-border); }

/* ── Meta pills ──────────────────────────────────────────────────────────────*/
.freq-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: var(--mut);
  margin-bottom: 10px;
}
.freq-meta-pill {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: var(--rad-pill);
  padding: 3px 11px;
  white-space: nowrap;
  color: var(--txt2);
  font-size: 11px;
}
.freq-meta-pill-familia {
  background: var(--acc-soft);
  border-color: var(--acc-border);
  color: var(--acc-light, var(--acc));
  font-weight: 600;
}

/* ── Panel de segmentos ──────────────────────────────────────────────────────*/
.freq-seg-shell {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  background: var(--surf);
  border: 1px solid var(--brd);
  border-radius: var(--rad-lg);
  margin-bottom: 10px;
  align-items: center;
}
.freq-seg-shell-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--mut);
  margin-right: 4px;
  flex-shrink: 0;
}
#freqSegPanel { display: flex; flex-wrap: wrap; gap: 6px; }

.freq-seg-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--rad-pill);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--brd);
  background: var(--card);
  color: var(--mut);
  transition: all var(--dur-fast) ease;
}
.freq-seg-pill:hover { border-color: var(--brd-2); color: var(--txt); }
.freq-seg-pill.freq-seg-pill-on { font-weight: 700; }
.freq-seg-pill-count {
  font-family: var(--font-data, 'DM Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.freq-seg-pill-pct { font-size: 10px; opacity: .65; }

/* Pills por segmento — colores */
.freq-seg-frecuente-pill  { border-color: var(--intent-success-border); color: var(--intent-success); }
.freq-seg-frecuente-pill.freq-seg-pill-on  { background: var(--intent-success-soft); }
.freq-seg-semanal-pill    { border-color: rgba(76,201,166,.3); color: var(--grn); }
.freq-seg-semanal-pill.freq-seg-pill-on    { background: rgba(76,201,166,.08); }
.freq-seg-quincenal-pill  { border-color: var(--intent-info-border); color: var(--intent-info); }
.freq-seg-quincenal-pill.freq-seg-pill-on  { background: var(--intent-info-soft); }
.freq-seg-mensual-pill    { border-color: var(--intent-warning-border); color: var(--intent-warning); }
.freq-seg-mensual-pill.freq-seg-pill-on    { background: var(--intent-warning-soft); }
.freq-seg-ocasional-pill  { border-color: var(--brd-2); color: var(--mut); }
.freq-seg-ocasional-pill.freq-seg-pill-on  { background: var(--card2); }
.freq-seg-inactivo-pill   { border-color: var(--intent-danger-border); color: var(--intent-danger); }
.freq-seg-inactivo-pill.freq-seg-pill-on   { background: var(--intent-danger-soft); }

/* ── Tabla base ──────────────────────────────────────────────────────────────*/
.freq-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.freq-table th,
.freq-table td {
  padding: 9px 11px;
  text-align: left;
  border-bottom: 1px solid var(--brd);
  font-size: 12px;
}
.freq-table th {
  font-size: 10px;
  font-weight: 700;
  color: var(--txt2);
  text-transform: uppercase;
  letter-spacing: .6px;
  background: var(--surf);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.freq-table th.r,
.freq-table td.r { text-align: right; }
.freq-table tbody tr:nth-child(even) { background: var(--table-zebra-bg); }
.freq-table tbody tr:hover { background: var(--table-hover-bg) !important; }

/* ── Filas por segmento ──────────────────────────────────────────────────────*/
.freq-row-frecuente { border-left: 3px solid var(--intent-success); }
.freq-row-semanal   { border-left: 3px solid var(--grn); }
.freq-row-quincenal { border-left: 3px solid var(--intent-info); }
.freq-row-mensual   { border-left: 3px solid var(--intent-warning); }
.freq-row-ocasional { border-left: 3px solid var(--brd-2); }
.freq-row-inactivo  { border-left: 3px solid var(--intent-danger); opacity: .8; }

/* Fila total */
.freq-row-total td {
  font-weight: 700;
  font-size: 12px;
  background: var(--card2);
  color: var(--txt);
  padding: 10px 11px;
  border-top: 2px solid var(--brd-2);
}
.freq-total-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--mut);
  font-weight: 700;
}

/* ── Columnas comunes ────────────────────────────────────────────────────────*/
.freq-th-num  { width: 36px; }
.freq-td-num  {
  font-family: var(--font-data, 'DM Mono', monospace);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.freq-td-name { font-weight: 500; color: var(--txt2); }
.freq-td-date {
  font-family: var(--font-data, 'DM Mono', monospace);
  font-size: 11px;
  color: var(--mut);
  white-space: nowrap;
}
.freq-td-dias { font-family: var(--font-data, 'DM Mono', monospace); font-size: 12px; }
.freq-dias-alerta  { color: var(--intent-danger); font-weight: 600; }
.freq-dias-warning { color: var(--intent-warning); }

/* ── CADENCIA: barra de compras/semana ───────────────────────────────────────*/
.freq-rate-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: flex-end;
}
.freq-rate-bar-track {
  width: 48px;
  height: 3px;
  background: var(--table-meter-track);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.freq-rate-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--acc) 0%, var(--acc-2) 100%);
  transition: width .4s var(--ease-out);
  min-width: 2px;
}
.freq-rate-val {
  font-family: var(--font-data, 'DM Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--txt2);
  white-space: nowrap;
}
.freq-rate-unit {
  font-size: 10px;
  font-weight: 400;
  color: var(--mut);
  margin-left: 1px;
}

/* ── Badge de segmento inline ────────────────────────────────────────────────*/
.freq-seg-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 2px 6px;
  border-radius: var(--rad-sm);
  vertical-align: middle;
}
.freq-seg-frecuente { background: var(--intent-success-soft); color: var(--intent-success); border: 1px solid var(--intent-success-border); }
.freq-seg-semanal   { background: rgba(76,201,166,.08); color: var(--grn); border: 1px solid rgba(76,201,166,.25); }
.freq-seg-quincenal { background: var(--intent-info-soft); color: var(--intent-info); border: 1px solid var(--intent-info-border); }
.freq-seg-mensual   { background: var(--intent-warning-soft); color: var(--intent-warning); border: 1px solid var(--intent-warning-border); }
.freq-seg-ocasional { background: var(--card2); color: var(--mut); border: 1px solid var(--brd-2); }
.freq-seg-inactivo  { background: var(--intent-danger-soft); color: var(--intent-danger); border: 1px solid var(--intent-danger-border); }

/* ── PATRÓN SEMANAL: heatmap por día ─────────────────────────────────────────*/
.freq-dow-th {
  min-width: 52px;
  font-size: 10px;
  text-align: center;
}
.freq-dow-cell {
  text-align: center;
  padding: 6px 4px;
  vertical-align: middle;
}
.freq-dow-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  min-width: 6px;
  border-radius: 3px;
  background: rgba(110,168,254,.18);
  padding: 2px 4px;
  transition: width .3s var(--ease-out), background .2s;
  width: 100%;
}
.freq-dow-bar.max {
  background: var(--acc-soft);
  border: 1px solid var(--acc-border);
}
.freq-dow-val {
  font-family: var(--font-data, 'DM Mono', monospace);
  font-size: 10px;
  font-weight: 600;
  color: var(--txt2);
  font-variant-numeric: tabular-nums;
}
.freq-dow-bar.max .freq-dow-val { color: var(--acc-light, var(--acc)); }
.freq-dow-zero { color: var(--mut); opacity: .4; font-size: 11px; }

/* Día preferido */
.freq-dow-pref {
  font-size: 12px;
  font-weight: 600;
  color: var(--acc-light, var(--acc));
  white-space: nowrap;
}

/* Fila patrón */
.freq-row-patron:hover { background: var(--table-hover-bg) !important; }
.freq-row-patron:nth-child(even) { background: var(--table-zebra-bg); }

/* ── Animaciones de filas ────────────────────────────────────────────────────*/
@keyframes freq-row-in {
  from { opacity: 0; transform: translateX(-3px); }
  to   { opacity: 1; transform: translateX(0);    }
}
.freq-table tbody tr {
  animation: freq-row-in .2s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
.freq-table tbody tr:nth-child(1)  { animation-delay:   0ms; }
.freq-table tbody tr:nth-child(2)  { animation-delay:  28ms; }
.freq-table tbody tr:nth-child(3)  { animation-delay:  56ms; }
.freq-table tbody tr:nth-child(4)  { animation-delay:  84ms; }
.freq-table tbody tr:nth-child(5)  { animation-delay: 112ms; }
.freq-table tbody tr:nth-child(6)  { animation-delay: 140ms; }
.freq-table tbody tr:nth-child(7)  { animation-delay: 168ms; }
.freq-table tbody tr:nth-child(n+8){ animation-delay: 196ms; }

@media (prefers-reduced-motion: reduce) {
  .freq-table tbody tr { animation: none !important; }
}

/* ── Responsive ──────────────────────────────────────────────────────────────*/
@media (max-width: 700px) {
  .freq-toolbar { padding: 10px 12px; gap: 8px; }
  .freq-grupo-sel { max-width: 130px; }
  /* Patrón: ocultar Sáb y Dom en mobile */
  .freq-table th.freq-dow-th:nth-last-child(-n+3),
  .freq-table td.freq-dow-cell:nth-last-child(-n+3) { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   V39 — ASISTENTE IA: Markdown en chat + botones de exportación + @media print
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Tablas Markdown dentro de mensajes del asistente ────────────────────── */
.ai-m .ai-md-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 12px;
  font-size: 11.5px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  border-radius: var(--rad-sm);
  overflow: hidden;
  border: 1px solid var(--brd);
}
.ai-m .ai-md-table th {
  background: var(--surf);
  color: var(--txt2);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--brd);
  white-space: nowrap;
}
.ai-m .ai-md-table td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--brd);
  color: var(--txt);
  vertical-align: top;
}
.ai-m .ai-md-table tr:last-child td { border-bottom: none; }
.ai-m .ai-md-table tr:nth-child(even) td { background: var(--table-zebra-bg); }

/* ── Encabezados Markdown ────────────────────────────────────────────────── */
.ai-m .ai-md-h2 {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--txt);
  margin: 12px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--brd);
}
.ai-m .ai-md-h3 {
  font-size: 12px;
  font-weight: 700;
  color: var(--txt2);
  margin: 10px 0 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ai-m .ai-md-hr {
  border: none;
  border-top: 1px solid var(--brd);
  margin: 10px 0;
}

/* ── Barra de exportación ────────────────────────────────────────────────── */
.ai-export-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--brd);
  flex-wrap: wrap;
}
.ai-export-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--mut);
  margin-right: 2px;
}
.ai-export-btn {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  padding: 4px 11px;
  border-radius: var(--rad-pill);
  border: 1px solid var(--brd);
  background: var(--card);
  color: var(--mut);
  cursor: pointer;
  transition: all var(--dur-fast) ease;
  white-space: nowrap;
}
.ai-export-btn:hover {
  border-color: var(--acc-border);
  color: var(--acc);
  background: var(--acc-soft);
}
.ai-export-pdf:hover  { border-color: var(--intent-danger-border); color: var(--intent-danger); background: var(--intent-danger-soft); }
.ai-export-csv:hover  { border-color: var(--intent-success-border); color: var(--intent-success); background: var(--intent-success-soft); }
.ai-export-xlsx:hover { border-color: var(--intent-info-border); color: var(--intent-info); background: var(--intent-info-soft); }

/* ── @media print — reporte limpio para PDF ──────────────────────────────── */
@media print {
  /* Ocultar todo excepto el panel del asistente */
  body > *:not(#aiPanel) { display: none !important; }
  #aiPanel {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: block !important;
    background: #fff !important;
  }
  .aih, .ai-quick-shell, .ai-foot, .ai-export-bar,
  .ai-m.user, #aiFab { display: none !important; }
  .ai-msgs { overflow: visible !important; max-height: none !important; }
  .ai-m.bot {
    color: #111 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 16px !important;
  }
  .ai-m.bot .ai-md-table { border: 1px solid #ccc; }
  .ai-m.bot .ai-md-table th { background: #f5f5f5; }
  .ai-m.bot .ai-md-table td { border-bottom: 1px solid #eee; }
  .ai-m.bot .ai-md-h2 { font-size: 16px; border-bottom: 2px solid #b88734; }
  .ai-m.bot .ai-md-h3 { font-size: 13px; }
}


/* ══ css/design-system.css ══ */
/* =============================================================================
   DESIGN-SYSTEM.CSS v40 — Atomic Design Component Library
   
   Jerarquía:
     Átomos     → variables, tipografía, iconos
     Moléculas  → .ds-btn, .ds-badge, .ds-chip, .ds-input, .ds-stat
     Organismos → .ds-card, .ds-card-header, .ds-table-wrapper, .ds-kpi-row
     Templates  → .ds-error-state, .ds-empty-state, .ds-tab-bar
   
   BACKWARD COMPATIBLE: todas las clases nuevas usan prefijo .ds-
   Las clases existentes (.card, .ct, .kpi, etc.) NO se modifican.
   Se agregan aliases al final: .card-header { @apply .ds-card-header styles }
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   ÁTOMOS: @keyframes centralizados
   ───────────────────────────────────────────────────────────────────────────── */

@keyframes ds-fade-in    { from{opacity:0} to{opacity:1} }
@keyframes ds-slide-up   { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@keyframes ds-slide-down { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
@keyframes ds-scale-in   { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
@keyframes ds-shimmer    { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes ds-pulse-ring {
  0%  { box-shadow: 0 0 0 0 rgba(214,167,86,.40); }
  60% { box-shadow: 0 0 0 8px rgba(214,167,86,0); }
  100%{ box-shadow: 0 0 0 0 rgba(214,167,86,0); }
}
@keyframes ds-count-up   { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

/* ─────────────────────────────────────────────────────────────────────────────
   MOLÉCULA: ds-btn — sistema unificado de botones
   Variantes: --primary | --secondary | --ghost | --danger | --brand
   Tamaños:   --sm | (default) | --lg
   ───────────────────────────────────────────────────────────────────────────── */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  padding: 6px 14px;
  min-height: 32px;
  border-radius: var(--rad-md);
  border: 1px solid var(--brd);
  background: var(--card);
  color: var(--txt2);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--dur-fast) ease;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}
.ds-btn:hover:not([disabled]) {
  background: var(--card2);
  border-color: var(--brd-2);
  color: var(--txt);
}
.ds-btn:active:not([disabled]) { transform: scale(.98); }
.ds-btn:focus-visible { box-shadow: var(--focus-ring); }
.ds-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Brand (gold) */
.ds-btn--brand {
  background: var(--acc-soft);
  border-color: var(--acc-border);
  color: var(--acc-light);
  font-weight: var(--fw-semibold);
}
.ds-btn--brand:hover:not([disabled]) {
  background: var(--acc-strong);
  border-color: var(--acc);
  color: var(--acc-light);
}

/* Primary (filled) */
.ds-btn--primary {
  background: var(--acc);
  border-color: var(--acc);
  color: #0b1220;
  font-weight: var(--fw-bold);
}
.ds-btn--primary:hover:not([disabled]) { background: var(--acc-2); border-color: var(--acc-2); }

/* Ghost */
.ds-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--mut);
}
.ds-btn--ghost:hover:not([disabled]) {
  background: var(--acc-soft);
  border-color: var(--acc-border);
  color: var(--acc);
}

/* Danger */
.ds-btn--danger {
  background: var(--intent-danger-soft);
  border-color: var(--intent-danger-border);
  color: var(--intent-danger);
}
.ds-btn--danger:hover:not([disabled]) { background: rgba(224,122,122,.22); }

/* Sizes */
.ds-btn--sm  { font-size: var(--fs-sm); padding: 4px 10px; min-height: 26px; border-radius: var(--rad-sm); }
.ds-btn--lg  { font-size: var(--fs-md); padding: 8px 18px; min-height: 38px; border-radius: var(--rad-lg); }

/* Pill variant */
.ds-btn--pill { border-radius: var(--rad-pill); }

/* ─────────────────────────────────────────────────────────────────────────────
   MOLÉCULA: ds-badge / ds-chip
   ───────────────────────────────────────────────────────────────────────────── */

.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 2px 7px;
  border-radius: var(--rad-sm);
  border: 1px solid currentColor;
  line-height: 1.4;
  white-space: nowrap;
}
.ds-badge--success { background: var(--intent-success-soft); color: var(--intent-success); border-color: var(--intent-success-border); }
.ds-badge--warning { background: var(--intent-warning-soft); color: var(--intent-warning); border-color: var(--intent-warning-border); }
.ds-badge--danger  { background: var(--intent-danger-soft);  color: var(--intent-danger);  border-color: var(--intent-danger-border);  }
.ds-badge--info    { background: var(--intent-info-soft);    color: var(--intent-info);    border-color: var(--intent-info-border);    }
.ds-badge--neutral { background: var(--intent-neutral-soft); color: var(--intent-neutral); border-color: transparent; }
.ds-badge--brand   { background: var(--acc-soft); color: var(--acc-light); border-color: var(--acc-border); }

.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: 3px 10px;
  border-radius: var(--rad-pill);
  background: var(--card);
  border: 1px solid var(--brd);
  color: var(--txt2);
  white-space: nowrap;
  cursor: default;
}
.ds-chip--active {
  background: var(--acc-soft);
  border-color: var(--acc-border);
  color: var(--acc-light);
}
.ds-chip--dismissible { cursor: pointer; }
.ds-chip--dismissible:hover { border-color: var(--intent-danger-border); color: var(--intent-danger); }

/* ─────────────────────────────────────────────────────────────────────────────
   MOLÉCULA: ds-stat — stat card para datos (molecule of KPI)
   ───────────────────────────────────────────────────────────────────────────── */

.ds-stat {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: var(--rad-lg);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--dur-base) ease, transform var(--dur-base) ease;
}
.ds-stat:hover { box-shadow: var(--shadow-1); transform: translateY(-1px); }
.ds-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--rad-lg) var(--rad-lg) 0 0;
}
.ds-stat--brand::before   { background: var(--acc); }
.ds-stat--info::before    { background: var(--blu); }
.ds-stat--success::before { background: var(--grn); }
.ds-stat--data::before    { background: var(--pur); }
.ds-stat--tea::before     { background: var(--tea); }

.ds-stat__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--txt-soft);
  margin-bottom: var(--space-2);
}
.ds-stat__value {
  font-family: var(--font-data);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -1.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
  animation: ds-count-up .3s var(--ease-out);
}
.ds-stat--brand   .ds-stat__value { color: var(--acc-light); }
.ds-stat--info    .ds-stat__value { color: var(--blu); }
.ds-stat--success .ds-stat__value { color: var(--grn); }
.ds-stat--data    .ds-stat__value { color: var(--pur); }
.ds-stat--tea     .ds-stat__value { color: var(--tea); }

.ds-stat__sub {
  font-size: var(--fs-sm);
  color: var(--mut);
  margin-top: var(--space-2);
  line-height: var(--lh-snug);
}
.ds-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: var(--rad-xs);
  margin-top: var(--space-1);
}
.ds-stat__delta--up    { background: var(--intent-success-soft); color: var(--intent-success); }
.ds-stat__delta--down  { background: var(--intent-danger-soft);  color: var(--intent-danger); }
.ds-stat__delta--flat  { background: var(--intent-neutral-soft); color: var(--intent-neutral); }

/* ─────────────────────────────────────────────────────────────────────────────
   ORGANISMO: ds-card — contenedor de sección
   ───────────────────────────────────────────────────────────────────────────── */

.ds-card {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: var(--rad-lg);
  overflow: hidden;
}
.ds-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--brd);
  flex-wrap: wrap;
}
.ds-card-title {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--txt2);
  text-transform: uppercase;
  letter-spacing: .7px;
}
.ds-card-badge {
  background: var(--card2);
  border: 1px solid var(--brd-2);
  border-radius: var(--rad-pill);
  padding: 2px 10px;
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--txt2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ds-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--brd-2) transparent;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ORGANISMO: ds-tab-bar — navegación principal mejorada
   ───────────────────────────────────────────────────────────────────────────── */

.ds-tab-bar {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.ds-tab-bar::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, var(--surf));
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base);
}
.ds-tab-bar.has-overflow::after { opacity: 1; }
.ds-tab-bar::-webkit-scrollbar { display: none; }

/* ─────────────────────────────────────────────────────────────────────────────
   TEMPLATE: ds-error-state — error contextualizado con 3 variantes
   ───────────────────────────────────────────────────────────────────────────── */

.ds-error-state {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--intent-danger-soft);
  border: 1px solid var(--intent-danger-border);
  border-radius: var(--rad-lg);
  margin: var(--space-3) 0;
}
.ds-error-state.hidden { display: none; }
.ds-error-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.ds-error-body { flex: 1; min-width: 0; }
.ds-error-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--intent-danger);
  margin-bottom: 3px;
}
.ds-error-msg {
  font-size: var(--fs-base);
  color: var(--txt2);
  line-height: var(--lh-snug);
}
.ds-error-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TEMPLATE: ds-empty-state
   ───────────────────────────────────────────────────────────────────────────── */

.ds-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-8) var(--space-6);
  gap: var(--space-3);
}
.ds-empty-icon { font-size: 28px; opacity: .6; }
.ds-empty-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--txt2);
}
.ds-empty-copy {
  font-size: var(--fs-base);
  color: var(--mut);
  max-width: 40ch;
  line-height: var(--lh-loose);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ALIASES BACKWARD-COMPAT: clases existentes → estilos del Design System
   Estas reglas enriquecen las clases originales sin cambiar el HTML existente.
   ───────────────────────────────────────────────────────────────────────────── */

/* .card → ds-card */
.card {
  background: var(--card);
  border: 1px solid var(--brd);
  border-radius: var(--rad-lg);
}

/* .ch → ds-card-header */
.ch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--brd);
  flex-wrap: wrap;
}

/* .ct → ds-card-title: más contraste */
.ct {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--txt2);
  text-transform: uppercase;
  letter-spacing: .7px;
}

/* .cbadge → ds-card-badge */
.cbadge {
  background: var(--card2);
  border: 1px solid var(--brd-2);
  border-radius: var(--rad-pill);
  padding: 2px 10px;
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--txt2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: background var(--dur-fast);
}
.cbadge.is-updating { animation: ds-pulse-ring .7s ease-out; }

/* .tw → ds-table-wrapper */
.tw {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--brd-2) transparent;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TAB BAR: mejoras de mobile (overflow fade + shortnames via data attr)
   ───────────────────────────────────────────────────────────────────────────── */

/* Solo overflow fade — sin tocar position, top ni z-index */
.tabs-bar::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 2px;
  width: 40px;
  background: linear-gradient(to right, transparent, var(--surf));
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base);
}
.tabs-bar.has-overflow::after { opacity: 1; }

/* Tab button — estado canónico con mejor contraste */
.tab {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--mut);
  padding: 11px 16px;
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--dur-base) ease, border-color var(--dur-base) ease, background var(--dur-base) ease;
  user-select: none;
  outline: none;
}
.tab:hover { color: var(--txt2); background: rgba(255,255,255,.03); }
.tab:focus-visible { box-shadow: inset var(--focus-ring); border-radius: var(--rad-sm) var(--rad-sm) 0 0; }
.tab.on {
  color: var(--acc-light);
  border-bottom-color: var(--acc);
  font-weight: var(--fw-semibold);
  background: var(--acc-soft);
}
:root[data-theme="light"] .tab.on  { color: var(--acc); background: var(--acc-soft); }
:root[data-theme="light"] .tab:hover { background: rgba(15,23,42,.03); color: var(--txt2); }

/* Mobile: shortnames via data-short attribute */
@media (max-width: 560px) {
  .tab[data-short]::before { content: attr(data-short); }
  .tab[data-short] .tab-full { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   KPI DELTA: estilos para el sistema kpi-delta.js v31
   ───────────────────────────────────────────────────────────────────────────── */

.kpi-delta-wrap { margin-top: var(--space-2); min-height: 20px; }

.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: var(--rad-xs);
  opacity: 0;
  transition: opacity var(--dur-base);
}
.kpi-delta.is-visible { opacity: 1; animation: ds-count-up .4s var(--ease-out); }
.kpi-delta--up     { background: var(--intent-success-soft); color: var(--intent-success); }
.kpi-delta--down   { background: var(--intent-danger-soft);  color: var(--intent-danger); }
.kpi-delta--neutral{ background: var(--intent-neutral-soft); color: var(--intent-neutral); }

.kpi-delta-icon  { font-size: 9px; }
.kpi-delta-value { font-weight: var(--fw-bold); }
.kpi-delta-label { font-weight: var(--fw-normal); opacity: .75; }

/* Sparkline */
.kpi-spark-wrap { margin-top: var(--space-1); }
.kpi-spark { display: none; }
.kpi-spark.is-visible { display: block; }
.kpi-spark-line { stroke: var(--acc); stroke-width: 1.5; fill: none; }
.kpi-spark-area { fill: var(--acc-soft); }
.kpi-spark-dot  { fill: var(--acc); }

/* ─────────────────────────────────────────────────────────────────────────────
   SNUM: badge de número en filtros — con indicador de activo para Región
   ───────────────────────────────────────────────────────────────────────────── */

.snum {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brd);
  color: var(--mut);
  font-size: 9px;
  font-family: var(--font-data);
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-base), color var(--dur-base), box-shadow var(--dur-base);
}
.snum.on {
  background: var(--acc);
  color: #0b1220;
  box-shadow: 0 0 0 2px var(--acc-soft);
}
/* Símbolo ↯ para Región: mismatch de caracteres — heredar del texto */
.sel-lbl .snum[data-region] {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--fw-bold);
}
.sel-lbl .snum[data-region].on {
  background: var(--acc);
  color: #0b1220;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 599px) {
  .tab { padding: 10px 12px; font-size: 12px; }
  .ds-stat__value { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-stat:hover { transform: none; }
  .kpi-delta { transition: none; }
  .kpi-delta.is-visible { animation: none; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   EBAR: error state mejorado (v40)
   ───────────────────────────────────────────────────────────────────────────── */

.ebar {
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-5);
  background: var(--intent-danger-soft);
  border-bottom: 1px solid var(--intent-danger-border);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  animation: ds-slide-down .2s var(--ease-out);
}
.ebar.v { display: flex; }

.ebar-ico { font-size: 18px; flex-shrink: 0; }

.ebar-copy { flex: 1; min-width: 0; }

.etit {
  font-weight: var(--fw-bold);
  color: var(--intent-danger);
  font-size: var(--fs-md);
  margin-bottom: 2px;
}
.emsg { color: var(--txt2); font-size: var(--fs-base); }

.ebar-actions { flex-shrink: 0; }

.ebar .table-action-btn {
  font-size: var(--fs-sm);
  padding: 4px 12px;
  border-radius: var(--rad-pill);
  border: 1px solid var(--intent-danger-border);
  background: var(--intent-danger-soft);
  color: var(--intent-danger);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all var(--dur-fast);
  white-space: nowrap;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}
.ebar .table-action-btn:hover {
  background: rgba(224,122,122,.22);
  border-color: var(--intent-danger);
}


/* ══ css/responsive.css ══ */
/* =============================================================================
   RESPONSIVE.CSS v42 — Mobile UX Upgrade
   
   REGLAS DE ORO:
   ─ Desktop (≥861px) = INTACTO. Cero cambios intencionales.
   ─ Todo cambio vive dentro de breakpoints mobile/tablet.
   ─ Se reusan tokens del sistema (tokens.css) siempre que existe.
   ─ No !important salvo conflictos documentados con ui-v35 y styles.css.
   ─ No librerías nuevas. CSS puro.
   
   BREAKPOINTS CANÓNICOS (tokens.css v41):
     xs   ≤479px   Mobile portrait
     sm   480-767  Mobile landscape + tablet pequeña
     md   768-1023 Tablet portrait
     lg   1024-1279 Notebook
     xl   ≥1280    Desktop wide
   ============================================================================= */


/* ═══════════════════════════════════════════════════════════════════════════════
   SCROLL HINT EN TABLAS Y STRIPS
   Actúa globalmente cuando JS añade .has-h-overflow
   ═══════════════════════════════════════════════════════════════════════════════ */
.tw { position: relative; }
.tw::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, var(--surf));
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  border-radius: 0 var(--rad-lg) var(--rad-lg) 0;
}
.tw.has-h-overflow::after { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE XS: ≤479px — Portrait
   Dispositivos: iPhone SE (375), iPhone 14 (390), Pixel (412)
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 479px) {

  /* ─────────────────────────────────────────────────────────────────────────
     HEADER: más compacto, eliminar elementos secundarios no críticos
     Objetivo: reducir de ~46px a ~38px, liberar espacio vertical
  ──────────────────────────────────────────────────────────────────────────── */
  .hdr {
    padding: 8px 12px;
  }
  /* Logo: reducir peso tipográfico en mobile */
  .logo {
    font-size: 14px;
    letter-spacing: 0.2px;
  }
  /* Status pill: ocultar texto, solo dot (libera ~80px horizontal) */
  .pill-status {
    padding: 4px 7px;
    gap: 0;
    background: transparent;
    border-color: transparent;
  }
  #stxt { display: none; }
  /* BCRA pill: ocultar completamente en xs (baja ruido en header) */
  .bcra-pill { display: none; }
  /* Theme toggle: reducir padding */
  .theme-toggle { padding: 4px 6px; font-size: 15px; }

  /* ─────────────────────────────────────────────────────────────────────────
     FILTER PANEL: ya es bottom-sheet en <600px. Mejorar el disparador.
     El botón "☰ Mostrar filtros" es el CTA principal de filtrado en mobile.
  ──────────────────────────────────────────────────────────────────────────── */
  #btnToggleFilters {
    font-size: 13px;
    font-weight: 700;
    padding: 9px 16px;
    min-height: 42px;
    border-radius: 10px;
    /* Hacer el botón más prominente como CTA de acción */
    background: var(--acc-soft);
    border-color: var(--acc-border);
    color: var(--acc-light);
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .fp-collapsed-note {
    font-size: 11px;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
  }
  .fp-note-pill {
    font-size: 10px;
    padding: 3px 9px;
  }
  /* Controles dentro del sheet: period buttons */
  .pbtn {
    min-height: 42px;
    padding: 0 11px;
    font-size: 12px;
    font-weight: 600;
  }
  .btn-xs {
    min-height: 38px;
    padding: 7px 13px;
    font-size: 12px;
  }
  select { min-height: 44px; padding: 8px 10px; font-size: 13px; }
  .date-pair label { font-size: 10px; color: var(--txt-soft); }
  .date-pair input[type="date"] {
    min-height: 44px;
    font-size: 13px;
    padding: 8px;
  }
  .fp-top {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .fp-top-left { width: 100%; }
  .fp-main-controls { flex-wrap: wrap; gap: 5px; }
  .date-pair { flex-wrap: wrap; gap: 5px; }

  /* ─────────────────────────────────────────────────────────────────────────
     CONTENEDORES: ancho completo, padding ajustado
  ──────────────────────────────────────────────────────────────────────────── */
  .wrap,
  .fp-inner,
  .page-hero { padding-left: 10px; padding-right: 10px; }

  /* ─────────────────────────────────────────────────────────────────────────
     TABS BAR: altura táctil correcta, font más legible
  ──────────────────────────────────────────────────────────────────────────── */
  .tabs-bar { padding: 0 6px; }
  .tab {
    min-height: 46px;
    padding: 10px 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1px;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     PAGE HERO: ultra-compacto en xs
     Problema: consumía ~120-180px de fold visible con eyebrow + título grande
     + copy de 3 líneas + 4 chips en grid 2x2.
     Solución: reducir todo, ocultar copy, chips en fila scrolleable.
  ──────────────────────────────────────────────────────────────────────────── */
  .page-hero {
    padding: 8px 10px 6px;
    gap: 4px;
  }
  .page-hero-eyebrow {
    font-size: 9px;
    letter-spacing: 0.8px;
    margin-bottom: 2px;
    opacity: 0.7;
  }
  .page-hero-title {
    font-size: 20px;
    letter-spacing: -0.5px;
    line-height: 1.05;
  }
  /* Ocultar copy descriptivo — el usuario ya sabe para qué es */
  .page-hero-copy { display: none; }

  /* Hero chips: fila única con scroll horizontal (no grid 2x2) */
  .page-hero-meta {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
    margin-top: 6px;
    /* Override explícito del grid 2x2 de styles.css @media(max-width:760px) */
    grid-template-columns: unset !important;
  }
  .page-hero-meta::-webkit-scrollbar { display: none; }
  .hero-chip {
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 32px;
    padding: 5px 10px;
    font-size: 10.5px;
    /* Override de justify-content:center de styles.css */
    justify-content: flex-start !important;
    text-align: left !important;
  }
  /* El chip "soft" (Vista general) ya no necesita ser full-width */
  .hero-chip--soft { grid-column: unset !important; }
  /* El chip acción (Mostrar/Ocultar filtros) más prominente */
  .hero-chip--action {
    font-weight: 700;
    background: var(--acc-soft) !important;
    border-color: var(--acc-border) !important;
    color: var(--acc-light) !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     KPI CARDS: grid 2x2, más compactas pero legibles
     Pain point: kpi-lbl a 9px uppercase casi ilegible; kpi-val 22px ok.
     Fix: subir label a 10px, mejorar contraste; reducir padding.
  ──────────────────────────────────────────────────────────────────────────── */
  .kpi {
    padding: 10px 12px;
    border-radius: 12px;
  }
  .kpi-lbl {
    font-size: 10px;          /* era 9px — mejora contraste y legibilidad */
    letter-spacing: 0.5px;   /* era .8px — menos tenso */
    color: var(--txt-soft);   /* era --mut — más legible */
    font-weight: 600;
    margin-bottom: 3px;
  }
  .kpi-val {
    font-size: 20px;
    letter-spacing: -0.8px;
  }
  /* Delta % bajo el valor: más compacto */
  .kpi-delta-wrap { margin-top: 4px; min-height: 16px; }
  .kpi-delta {
    font-size: 9.5px;
    padding: 1px 5px;
  }
  /* Sparkline: ocultar en xs para ganar espacio vertical */
  .kpi-spark-wrap { display: none; }

  /* ─────────────────────────────────────────────────────────────────────────
     GRUPO STRIP: tarjetas de familia
     Pain point: min-width 120px con gap 7px = ~3.5 cards visibles.
     Las cards activas se destacan; las inactivas tienen poco contraste.
     Fix: reducir min-width, mejorar gk-pct, mejorar gk-name contraste.
  ──────────────────────────────────────────────────────────────────────────── */
  .grupo-strip {
    gap: 6px;
    padding-bottom: 8px;
    /* Padding lateral para que el primer card no quede pegado al borde */
    padding-left: 0;
  }
  .gk {
    min-width: 108px;
    max-width: 140px;
    padding: 9px 11px;
    border-radius: 10px;
  }
  .gk-name {
    font-size: 9px;
    max-width: 100%;
    color: var(--txt-soft);  /* era heredado oscuro — más legible */
    letter-spacing: 0.4px;
  }
  .gk-val {
    font-size: 17px;
    letter-spacing: -0.4px;
  }
  .gk-pct {
    font-size: 9px;
    opacity: 1;              /* era .7 — mejora contraste */
    color: var(--mut);
    margin-top: 1px;
  }
  .grupo-strip-lbl {
    font-size: 9px;
    letter-spacing: 0.6px;
  }
  .grupo-strip-hint {
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--mut);
    margin-bottom: 8px;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     TABLAS: columnas reducidas, lectura más limpia
  ──────────────────────────────────────────────────────────────────────────── */
  /* Tabla Detalle: solo Fecha + Cliente + Kilos */
  .responsive-stack--detail thead th:nth-child(3),
  .responsive-stack--detail tbody td:nth-child(3),
  .responsive-stack--detail tfoot td:nth-child(3),
  .responsive-stack--detail thead th:nth-child(4),
  .responsive-stack--detail tbody td:nth-child(4),
  .responsive-stack--detail tfoot td:nth-child(4),
  .responsive-stack--detail thead th:nth-child(5),
  .responsive-stack--detail tbody td:nth-child(5),
  .responsive-stack--detail tfoot td:nth-child(5) { display: none; }

  /* Tabla Proyección: ocultar Var. Kg y Var. % */
  .responsive-stack--projection thead th:nth-child(5),
  .responsive-stack--projection tbody td:nth-child(5),
  .responsive-stack--projection thead th:nth-child(6),
  .responsive-stack--projection tbody td:nth-child(6) { display: none; }

  /* Tabla Acumulados: padding más táctil */
  .acum-table th,
  .acum-table td { padding: 8px 8px; font-size: 12px; }

  /* Resumen Acumulado: ocultar columnas menos prioritarias */
  .acsum-table .col-pct-total { display: none; }
  .acsum-table .col-varkg { display: none; }

  /* ─────────────────────────────────────────────────────────────────────────
     DETAIL TOOLBAR (filtros avanzados de la tabla)
     Pain point: grid 5 columnas en 390px es ilegible.
  ──────────────────────────────────────────────────────────────────────────── */
  .detail-toolbar-main {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     PROYECCIÓN: grid hero a 2 columnas
  ──────────────────────────────────────────────────────────────────────────── */
  .proj-hero-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; }

  /* ─────────────────────────────────────────────────────────────────────────
     FRECUENCIA: toolbar en columna, controles táctiles
  ──────────────────────────────────────────────────────────────────────────── */
  .freq-toolbar {
    flex-direction: column;
    gap: 10px;
    padding: 12px 10px;
  }
  .freq-toolbar > div { width: 100%; }
  .freq-mode-btns { width: 100%; display: flex; }
  .freq-mode-btn {
    flex: 1;
    justify-content: center;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 12px;
  }
  .freq-view-btns { flex-wrap: wrap; gap: 5px; }
  .freq-view-btn { min-height: 38px; padding: 6px 12px; font-size: 12px; }
  .freq-grupo-sel { width: 100%; min-height: 44px; }

  /* ─────────────────────────────────────────────────────────────────────────
     ACUMULADOS: toolbar en columna
  ──────────────────────────────────────────────────────────────────────────── */
  .acsum-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 10px;
  }
  .acsum-mode-btns,
  .acsum-view-btns { flex-wrap: wrap; gap: 5px; }
  .acsum-mode-btn,
  .acsum-view-btn { min-height: 38px; }

  /* ─────────────────────────────────────────────────────────────────────────
     AI FAB + PANEL: separar del mobile dock
  ──────────────────────────────────────────────────────────────────────────── */
  #aiFab {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 100px) !important;
    width: 50px !important;
    height: 50px !important;
    right: 14px !important;
  }
  #aiPanel {
    right: 8px !important;
    left: 8px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 160px) !important;
    width: auto !important;
    border-radius: 18px !important;
    /* Altura máxima que deja espacio para el dock */
    height: min(580px, calc(100vh - 200px)) !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     MOBILE DOCK: más compacto y con mejor contraste
     Pain point: backdrop-filter blur(14px) puede ser pesado en mid-range.
     Fix: reducir blur sin perder el efecto; mejorar label size.
  ──────────────────────────────────────────────────────────────────────────── */
  .mobile-dock {
    left: calc(env(safe-area-inset-left, 0px) + 10px);
    right: calc(env(safe-area-inset-right, 0px) + 10px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    padding: 6px;
    gap: 6px;
    backdrop-filter: none !important;  /* era 14px — más performante */
  }
  .mobile-dock-btn {
    min-height: 46px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1px;
    border-radius: 10px;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     PADDING INFERIOR: espacio para que el dock no tape último contenido
  ──────────────────────────────────────────────────────────────────────────── */
  body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 90px); }

  /* ─────────────────────────────────────────────────────────────────────────
     SEPARACIÓN ENTRE BLOQUES: más ritmo vertical
     Pain point: bloques de KPIs, grupo strip y tabla se pegan visualmente.
  ──────────────────────────────────────────────────────────────────────────── */
  .kpi-row { margin-bottom: 14px; gap: 7px; }
  .grupo-strip-lbl { margin-bottom: 8px; }

  /* ─────────────────────────────────────────────────────────────────────────
     ERROR BAR: adaptado a xs
  ──────────────────────────────────────────────────────────────────────────── */
  .ebar {
    flex-wrap: wrap;
    padding: 8px 12px;
  }
  .ebar-actions { width: 100%; }

  /* ─────────────────────────────────────────────────────────────────────────
     STORY GRID (Gráficos): 1 col en xs
  ──────────────────────────────────────────────────────────────────────────── */
  .story-grid { grid-template-columns: 1fr !important; }
  .charts-grid { grid-template-columns: 1fr !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SM: 480–767px — Mobile landscape + tablet pequeña
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 480px) and (max-width: 767px) {

  /* BCRA: ocultar en sm para liberar header */
  .bcra-pill { display: none; }

  /* KPI: 4 en una fila */
  .kpi-val { font-size: 21px; }
  .kpi-lbl { font-size: 10px; color: var(--txt-soft); }

  /* Sparkline: ocultar en sm también */
  .kpi-spark-wrap { display: none; }

  /* Hero: copy visible pero compacto */
  .page-hero-copy { display: block; font-size: 12px; line-height: 1.5; }
  .page-hero-title { font-size: 22px; }

  /* Hero chips: fila scroll (no grid 2x2) */
  .page-hero-meta {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
    grid-template-columns: unset !important;
  }
  .page-hero-meta::-webkit-scrollbar { display: none; }
  .hero-chip { flex-shrink: 0; white-space: nowrap; }
  .hero-chip--soft { grid-column: unset !important; }

  /* Tabla Detalle: mostrar Fecha + Cliente + Grupo + Kilos */
  .responsive-stack--detail thead th:nth-child(4),
  .responsive-stack--detail tbody td:nth-child(4),
  .responsive-stack--detail tfoot td:nth-child(4),
  .responsive-stack--detail thead th:nth-child(5),
  .responsive-stack--detail tbody td:nth-child(5),
  .responsive-stack--detail tfoot td:nth-child(5) { display: none; }

  /* Touch targets */
  .pbtn { min-height: 40px; }
  .btn-xs { min-height: 36px; }
  select { min-height: 42px; }
  .freq-mode-btn { min-height: 42px; }

  /* Acumulados: ocultar Var. Kg */
  .acsum-table .col-varkg { display: none; }

  /* AI Panel: ancho completo menos márgenes */
  #aiPanel {
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
  }

  /* Freq toolbar: wrap natural */
  .freq-toolbar { flex-wrap: wrap; gap: 10px; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   MD: 768–1023px — Tablet portrait
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {

  .wrap, .fp-inner, .page-hero { max-width: 100%; }

  /* Filtros: 4 columnas */
  .fp-selects { grid-template-columns: repeat(4, 1fr) !important; }

  /* KPI */
  .kpi-row { gap: 10px; }
  .kpi { padding: 14px 16px; }
  .kpi-val { font-size: 24px; }
  .kpi-lbl { font-size: 10px; color: var(--txt-soft); }

  /* Proyección: 3 cols */
  .proj-hero-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  /* Tabla detalle: ocultar Cód. Producto */
  .responsive-stack--detail thead th:nth-child(4),
  .responsive-stack--detail tbody td:nth-child(4),
  .responsive-stack--detail tfoot td:nth-child(4) { display: none; }

  /* Story grid: 2 cols */
  .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Freq: toolbar horizontal */
  .freq-toolbar { flex-direction: row; flex-wrap: wrap; }

  /* Hero */
  .page-hero-copy { display: block; font-size: 13px; }
  .page-hero-title { font-size: 26px; }

  /* Acsum: todas las cols */
  .acsum-table .col-varkg { display: table-cell; }
  .acsum-table .col-pct-total { display: table-cell; }

  /* Sin mobile dock */
  .mobile-dock { display: none !important; }
  body { padding-bottom: 16px !important; }

  /* AI Panel */
  #aiPanel {
    right: 18px !important;
    left: auto !important;
    width: min(400px, calc(100vw - 36px)) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   LG: 1024–1279px — Notebook
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1279px) {

  .wrap, .fp-inner, .page-hero { max-width: var(--max-w-content); }

  .fp-selects { grid-template-columns: repeat(6, 1fr) !important; }
  .proj-hero-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  .responsive-stack--detail thead th,
  .responsive-stack--detail tbody td,
  .responsive-stack--projection thead th,
  .responsive-stack--projection tbody td { display: table-cell; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   XL: ≥1280px — Desktop wide
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {

  .wrap, .fp-inner, .page-hero { max-width: var(--max-w-content-xl); }

  .kpi { padding: 16px 20px; }
  .kpi-val { font-size: 28px; }
  .kpi-lbl { font-size: 10px; }

  .proj-hero-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px; }
  .story-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

  /* Grupo strip: flex+scroll — no convertir a grid */
  .grupo-strip { display: flex; overflow-x: auto; gap: 8px; }
  .gk { max-width: 200px; flex-shrink: 0; }

  .acsum-table .col-varkg { display: table-cell; }
  .acsum-table .col-pct-total { display: table-cell; }

  .fp-selects { gap: 12px; }
  #aiPanel { height: min(680px, calc(100vh - 180px)) !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   LANDSCAPE MOBILE: ≤500px alto + orientación horizontal
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {

  .hdr { padding: 5px 14px; }
  .bcra-pill, .pill-status { display: none; }
  .page-hero { padding: 5px 12px 5px; }
  .page-hero-copy { display: none; }
  .page-hero-title { font-size: 17px; }

  .mobile-dock { display: none !important; }
  body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important; }

  .kpi-row { grid-template-columns: repeat(4, 1fr) !important; }
  .kpi { padding: 7px 10px; }
  .kpi-val { font-size: 17px; }
  .kpi-spark-wrap { display: none; }

  .tab { padding: 8px 11px; min-height: 38px; }
  .tabs-bar { padding: 0 6px; }

  #aiFab { bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important; }
  #aiPanel {
    right: 12px !important;
    left: 12px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 60px) !important;
    width: auto !important;
    height: min(calc(100vh - 80px), 320px) !important;
    border-radius: 14px !important;
  }
  .ai-quick-shell .ai-quick-panel { max-height: 0 !important; opacity: 0 !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE DOCK: safe areas correctas (aplica a ≤860px donde está visible)
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 90px); }
  .mobile-dock {
    left: calc(env(safe-area-inset-left, 0px) + 10px);
    right: calc(env(safe-area-inset-right, 0px) + 10px);
  }
  /* Margen inferior en páginas */
  #page-detalle .wrap > div:last-child,
  #page-proyeccion .wrap > div:last-child,
  #page-acumulados .wrap > div:last-child,
  #page-frecuencia .wrap > div:last-child,
  #page-graficos .wrap > div:last-child { margin-bottom: 14px; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   TABS BAR MOBILE: overflow fade (complementa design-system.css)
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .tabs-bar { padding: 0 6px; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════════════════════ */
@media print {
  .mobile-dock, .tabs-bar, #aiFab, .fp-top { display: none !important; }
  .wrap { max-width: 100% !important; padding: 0 !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .tw::after { transition: none; }
  #aiPanel { animation: none !important; }
  .mobile-dock { backdrop-filter: none !important; background: rgba(13,15,24,.98) !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   FIX v42b: TAB TEXT DUPLICATION (data-short + original text)
   
   design-system.css adds ::before content from data-short at ≤560px.
   But .tab-full class doesn't exist in HTML — original "📋 Detalle" text
   shows simultaneously with the ::before "Detalle".
   Fix: suppress native button text when data-short is active.
   Desktop (≥861px) unaffected — data-short is only consumed at ≤560px.
═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  /* Hide native button text — only ::before content shows */
  .tab[data-short] {
    font-size: 0 !important;        /* collapses "📋 Detalle" */
    color: transparent !important;
    gap: 0;
  }
  .tab[data-short]::before {
    font-size: 12px !important;
    font-weight: 600;
    color: var(--mut);
    display: inline-block;
  }
  /* Preserve active state color on ::before */
  .tab[data-short].on::before { color: var(--acc-light) !important; }
  :root[data-theme="light"] .tab[data-short].on::before { color: var(--acc) !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   FIX v42b: TRANSPARENT STICKY COLUMN BLEED-THROUGH
   
   projection-hierarchy-table td:first-child has position:sticky;left:0
   but semi-transparent RGBA backgrounds let scrolled content bleed through.
   Fix: enforce opaque background on sticky column in mobile.
   Only applies ≤860px where horizontal scroll is most common.
═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* Solid background base on sticky column — prevents bleed-through */
  .projection-hierarchy-table td:first-child {
    background-color: var(--card) !important;
  }
  .projection-hierarchy-table th:first-child {
    background-color: var(--surf) !important;
  }
  /* Group rows: teal tint on solid base */
  .proj-hierarchy-row--group td:first-child {
    background-color: #163030 !important;  /* dark + teal tint, opaque */
  }
  /* Agent rows */
  .proj-hierarchy-row--agent td:first-child {
    background-color: #111827 !important;  /* --surf, opaque */
  }
  /* Total rows */
  .proj-hierarchy-row--total td:first-child {
    background-color: #1e1a0e !important;  /* dark + gold tint, opaque */
  }
  /* Summary rows */
  .projection-family-summary-table .proj-hierarchy-row--summary td:first-child {
    background-color: #111827 !important;
  }
  /* thead: already has rgba(11,18,32,.97) ≈ almost opaque, reinforce */
  .projection-hierarchy-table thead th {
    background-color: rgba(11, 18, 32, 1) !important;
    backdrop-filter: none;   /* backdrop-filter can cause compositing issues on Android */
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   FIX v42b: HORIZONTAL OVERFLOW / BLACK SPACE ON RIGHT
   
   styles.css sets .tw{overflow:visible} at ≤760px for responsive card layout.
   But .projection-hierarchy-wrap also has class .tw — it needs overflow:auto
   to contain horizontal scroll. Override to restore correct behavior.
   
   Also restore overflow on acum tables which also use .tw.
═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Restore scroll container behavior for horizontal-scroll tables */
  .tw.projection-hierarchy-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Ensure the table fills the container width (no black void on right) */
  .tw.projection-hierarchy-wrap .projection-hierarchy-table {
    min-width: max(100%, 780px);
    width: max-content;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   v43 — MOBILE FULL-WIDTH + TABLE SCROLL UNIFICATION

   Objetivo:
   - Aprovechar mejor el ancho real del celular.
   - Evitar que el viewport se estire y aparezca banda negra lateral.
   - Unificar la experiencia de tablas mobile como tablas reales con scroll
     horizontal dentro de su contenedor, sin tocar desktop.
   - Reducir chrome vertical y hacer más liviano el dock/FAB en teléfonos.
═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body,
  .page,
  .page.on,
  .page-hero-shell,
  .page-hero,
  .wrap,
  .hdr,
  .tabs-bar,
  .filter-panel,
  .fp-inner,
  .card {
    max-width: 100%;
  }

  .hdr {
    padding: 8px 10px !important;
  }

  .tabs-bar {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .tab {
    padding-left: 9px;
    padding-right: 9px;
  }

  .fp-inner {
    padding: 8px 8px 12px !important;
  }

  .wrap {
    padding: 10px 8px 14px !important;
  }

  .page-hero {
    padding: 10px 8px 8px !important;
    gap: 8px;
  }

  .page-hero-title {
    font-size: clamp(20px, 7vw, 24px) !important;
    line-height: 1.02;
  }

  .page-hero-copy {
    display: none !important;
  }

  .page-hero-meta {
    gap: 6px !important;
    margin-top: 4px;
  }

  .hero-chip {
    min-height: 30px;
    padding: 5px 9px;
  }

  .card {
    margin-bottom: 12px;
    border-radius: 16px;
  }

  .ch {
    padding-left: 12px;
    padding-right: 12px;
  }

  .ct {
    min-width: 0;
  }

  .cbadge {
    flex-shrink: 0;
  }

  .detail-strip-head {
    gap: 8px;
  }

  .detail-strip-actions {
    width: 100%;
    justify-content: space-between;
  }

  .grupo-strip {
    margin-left: -1px;
    margin-right: -1px;
    padding-left: 1px;
    padding-right: 1px;
    scroll-padding-left: 8px;
    scroll-padding-right: 8px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .gk {
    min-width: min(42vw, 132px);
    scroll-snap-align: start;
  }

  .mobile-dock {
    left: calc(env(safe-area-inset-left, 0px) + 8px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 8px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
    padding: 5px !important;
    gap: 5px !important;
  }

  .mobile-dock-btn {
    min-height: 44px !important;
    font-size: 10.5px !important;
    border-radius: 11px !important;
  }

  #aiFab {
    right: 10px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px) !important;
    width: 48px !important;
    height: 48px !important;
  }

  #aiPanel {
    right: 8px !important;
    left: 8px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 142px) !important;
    width: auto !important;
    height: min(72vh, 580px) !important;
  }

  /* Todos los wrappers de tablas pasan a comportarse como scrollers reales */
  .tw,
  .projection-hierarchy-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable both-edges;
  }

  .tw.has-h-overflow::after {
    opacity: 0.92;
  }

  /* Tablas mobile: volver a layout tabular real para una experiencia homogénea */
  table.responsive-stack,
  .acsum-table,
  .freq-table {
    width: max-content !important;
    min-width: 640px !important;
    border-collapse: separate;
    border-spacing: 0;
  }

  table.responsive-stack thead,
  .acsum-table thead,
  .freq-table thead {
    display: table-header-group !important;
  }

  table.responsive-stack tbody,
  table.responsive-stack tfoot,
  .acsum-table tbody,
  .acsum-table tfoot,
  .freq-table tbody,
  .freq-table tfoot {
    display: table-row-group !important;
    padding: 0 !important;
  }

  table.responsive-stack tr,
  .acsum-table tr,
  .freq-table tr {
    display: table-row !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
  }

  table.responsive-stack th,
  table.responsive-stack td,
  .acsum-table th,
  .acsum-table td,
  .freq-table th,
  .freq-table td {
    display: table-cell !important;
    width: auto !important;
    white-space: nowrap;
    vertical-align: middle;
    padding: 10px 10px !important;
    border-bottom: 1px solid rgba(148, 163, 184, .14);
    text-align: left;
  }

  table.responsive-stack td::before {
    display: none !important;
    content: none !important;
  }

  table.responsive-stack th.r,
  table.responsive-stack td.r,
  table.responsive-stack td.num,
  .acsum-table th.r,
  .acsum-table td.r,
  .freq-table th.r,
  .freq-table td.r {
    text-align: right !important;
  }

  table.responsive-stack thead th,
  .acsum-table thead th,
  .freq-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: rgba(11, 18, 32, .98) !important;
    backdrop-filter: none;
  }

  table.responsive-stack th:first-child,
  table.responsive-stack td:first-child,
  .acsum-table th:first-child,
  .acsum-table td:first-child,
  .freq-table th:first-child,
  .freq-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #111827 !important;
    box-shadow: 1px 0 0 rgba(148, 163, 184, .12);
  }

  table.responsive-stack thead th:first-child,
  .acsum-table thead th:first-child,
  .freq-table thead th:first-child {
    z-index: 4;
  }

  table.responsive-stack tr.row-total td {
    display: table-cell !important;
    background: rgba(245, 158, 11, .10);
    font-weight: 700;
  }

  /* Tablas jerárquicas: más ancho útil y columna fija más estable */
  .projection-family-summary-note,
  .projection-hierarchy-toolbar {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .tw.projection-hierarchy-wrap {
    margin-left: -1px;
    margin-right: -1px;
    padding-left: 1px;
    padding-right: 1px;
  }

  .tw.projection-hierarchy-wrap .projection-hierarchy-table {
    width: max-content;
    min-width: 720px !important;
  }

  .projection-hierarchy-table th,
  .projection-hierarchy-table td {
    white-space: nowrap;
  }

  .projection-hierarchy-table th:first-child,
  .projection-hierarchy-table td:first-child {
    min-width: clamp(176px, 44vw, 228px);
  }
}

@media (max-width: 479px) {
  table.responsive-stack,
  .acsum-table,
  .freq-table {
    min-width: 620px !important;
  }

  .tw.projection-hierarchy-wrap .projection-hierarchy-table {
    min-width: 680px !important;
  }

  .projection-hierarchy-table th:first-child,
  .projection-hierarchy-table td:first-child {
    min-width: clamp(160px, 46vw, 208px);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   v44 — MOBILE DATE PICKER + TABLE COLUMN TUNING
   - Filtro por Fecha con selector calendario en mobile.
   - Acumulados: columna # minima y segunda columna compacta.
   - Proyeccion: primera columna jerarquica mas angosta para dar aire a 2025/2026/Var.
   - Sin impacto intencional en desktop.
═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .detail-col-menu[data-col-type="date"] {
    width: min(92vw, 360px) !important;
    max-width: min(92vw, 360px) !important;
    overflow: auto;
  }

  .detail-col-menu[data-col-type="date"] .detail-col-menu__standard-filter {
    display: none !important;
  }

  .detail-col-menu[data-col-type="date"] .detail-col-menu__meta {
    line-height: 1.45;
  }

  .detail-col-menu[data-col-type="date"] .detail-date-picker {
    display: grid;
    gap: 10px;
  }

  .detail-date-picker__tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }

  .detail-date-picker__tab {
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 999px;
    background: rgba(30, 41, 59, .56);
    color: var(--mut);
    font-size: 10.5px;
    font-weight: 700;
    padding: 7px 10px;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .detail-date-picker__tab.is-active {
    color: var(--acc-light, var(--acc));
    border-color: rgba(245, 166, 35, .34);
    background: rgba(245, 166, 35, .12);
  }

  .detail-date-picker__summary {
    font-size: 10px;
    color: var(--mut);
  }

  .detail-date-picker__panel {
    display: none;
  }

  .detail-date-picker__panel.is-active {
    display: grid;
    gap: 8px;
  }

  .detail-date-picker__weekdays,
  .detail-date-picker__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
  }

  .detail-date-picker__weekdays span {
    text-align: center;
    font-size: 10px;
    color: var(--mut);
    font-weight: 700;
  }

  .detail-date-picker__blank,
  .detail-date-picker__day {
    aspect-ratio: 1 / 1;
    min-height: 34px;
    border-radius: 10px;
  }

  .detail-date-picker__blank {
    background: transparent;
  }

  .detail-date-picker__day {
    border: 1px solid rgba(148, 163, 184, .14);
    background: rgba(15, 23, 42, .48);
    color: var(--txt);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .detail-date-picker__day.is-selected {
    border-color: rgba(245, 166, 35, .42);
    background: rgba(245, 166, 35, .14);
    color: var(--acc-light, var(--acc));
    box-shadow: inset 0 0 0 1px rgba(245, 166, 35, .18);
  }

  .detail-date-picker__day.is-disabled,
  .detail-date-picker__day:disabled {
    opacity: .3;
    color: rgba(139, 149, 167, .6);
    background: rgba(15, 23, 42, .22);
    border-style: dashed;
  }

  .detail-col-menu[data-col-type="date"] .detail-col-menu__footer {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(13, 15, 24, .68), rgba(13, 15, 24, .98));
    padding-top: 8px;
  }

  /* Acumulados: recuperar ancho util para Kilos / % / Dist. */
  .acum-table {
    table-layout: fixed;
    min-width: 560px !important;
  }

  .acum-table th:first-child,
  .acum-table td:first-child {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    padding-left: 10px !important;
    padding-right: 8px !important;
  }

  .acum-table th:nth-child(2),
  .acum-table td:nth-child(2) {
    width: 122px !important;
    min-width: 122px !important;
    max-width: 122px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .acum-table th:nth-child(2) {
    letter-spacing: .5px;
  }

  .acum-table td:nth-child(2),
  .acum-table td:nth-child(3),
  .acum-table td:nth-child(4) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .acum-table th:nth-child(n + 3),
  .acum-table td:nth-child(n + 3) {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Proyeccion: primera columna mas compacta sin perder lectura */
  .tw.projection-hierarchy-wrap .projection-hierarchy-table {
    min-width: 700px !important;
    table-layout: fixed;
  }

  .projection-hierarchy-table th:first-child,
  .projection-hierarchy-table td:first-child {
    width: 216px !important;
    min-width: 216px !important;
    max-width: 216px !important;
  }

  .projection-family-summary-table th:first-child,
  .projection-family-summary-table td:first-child {
    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
  }

  .projection-hierarchy-table th:not(:first-child),
  .projection-hierarchy-table td:not(:first-child) {
    min-width: 96px;
  }

  .proj-hierarchy-toggle,
  .proj-hierarchy-name-wrap,
  .proj-hierarchy-agent-cell {
    min-width: 0;
  }

  .proj-hierarchy-name,
  .proj-hierarchy-agent-code,
  .proj-hierarchy-agent-sub,
  .projection-family-summary-table td:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .proj-hierarchy-group-meta {
    gap: 5px;
  }

  .proj-hierarchy-pill {
    padding: 3px 6px;
    font-size: 9px;
  }

  .proj-hierarchy-agent-cell {
    padding-left: 14px;
  }
}

@media (max-width: 479px) {
  .acum-table th:nth-child(2),
  .acum-table td:nth-child(2) {
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
  }

  .tw.projection-hierarchy-wrap .projection-hierarchy-table {
    min-width: 680px !important;
  }

  .projection-hierarchy-table th:first-child,
  .projection-hierarchy-table td:first-child {
    width: 198px !important;
    min-width: 198px !important;
    max-width: 198px !important;
  }

  .projection-family-summary-table th:first-child,
  .projection-family-summary-table td:first-child {
    width: 154px !important;
    min-width: 154px !important;
    max-width: 154px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   v45 — MOBILE WIDTH REBALANCE + TAB SHADOW CLEANUP
   - Acumulados: tablas que ya entran en mobile pasan a ocupar 100% del ancho.
   - Cliente Top20: compresión adicional para ver todas las columnas.
   - Proyección: primera columna más compacta, con wrap controlado para no perder datos.
   - Tabs: se limpia la sombra/capa detrás de la solapa activa en mobile.
   Desktop no se toca intencionalmente.
═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Tabs mobile: quitar la "capa" sombreada detrás de la tab activa */
  .tabs-bar {
    box-shadow: none !important;
    backdrop-filter: none !important;
    background: rgba(7, 9, 15, .98) !important;
  }

  .tabs-bar::before,
  .tabs-bar::after {
    display: none !important;
    content: none !important;
  }

  .tab,
  .tab:hover,
  .tab.on {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .tab.on::after {
    left: 10px !important;
    right: 10px !important;
    bottom: -1px !important;
  }

  /* Acumulados 5 columnas: llenar el ancho visible en vez de dejar aire muerto */
  .acum-table:has(#at-coord),
  .acum-table:has(#at-agte),
  .acum-table:has(#at-grp),
  .acum-table:has(#at-mrc) {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .acum-table:has(#at-coord) th,
  .acum-table:has(#at-coord) td,
  .acum-table:has(#at-agte) th,
  .acum-table:has(#at-agte) td,
  .acum-table:has(#at-grp) th,
  .acum-table:has(#at-grp) td,
  .acum-table:has(#at-mrc) th,
  .acum-table:has(#at-mrc) td {
    padding: 9px 6px !important;
    font-size: 11.5px !important;
  }

  .acum-table:has(#at-coord) th:nth-child(1),
  .acum-table:has(#at-coord) td:nth-child(1),
  .acum-table:has(#at-agte) th:nth-child(1),
  .acum-table:has(#at-agte) td:nth-child(1),
  .acum-table:has(#at-grp) th:nth-child(1),
  .acum-table:has(#at-grp) td:nth-child(1),
  .acum-table:has(#at-mrc) th:nth-child(1),
  .acum-table:has(#at-mrc) td:nth-child(1) {
    width: 8% !important;
    min-width: 28px !important;
    max-width: 30px !important;
    padding-left: 8px !important;
    padding-right: 4px !important;
  }

  .acum-table:has(#at-coord) th:nth-child(2),
  .acum-table:has(#at-coord) td:nth-child(2),
  .acum-table:has(#at-agte) th:nth-child(2),
  .acum-table:has(#at-agte) td:nth-child(2),
  .acum-table:has(#at-grp) th:nth-child(2),
  .acum-table:has(#at-grp) td:nth-child(2),
  .acum-table:has(#at-mrc) th:nth-child(2),
  .acum-table:has(#at-mrc) td:nth-child(2) {
    width: 38% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .acum-table:has(#at-coord) th:nth-child(3),
  .acum-table:has(#at-coord) td:nth-child(3),
  .acum-table:has(#at-agte) th:nth-child(3),
  .acum-table:has(#at-agte) td:nth-child(3),
  .acum-table:has(#at-grp) th:nth-child(3),
  .acum-table:has(#at-grp) td:nth-child(3),
  .acum-table:has(#at-mrc) th:nth-child(3),
  .acum-table:has(#at-mrc) td:nth-child(3) {
    width: 24% !important;
  }

  .acum-table:has(#at-coord) th:nth-child(4),
  .acum-table:has(#at-coord) td:nth-child(4),
  .acum-table:has(#at-agte) th:nth-child(4),
  .acum-table:has(#at-agte) td:nth-child(4),
  .acum-table:has(#at-grp) th:nth-child(4),
  .acum-table:has(#at-grp) td:nth-child(4),
  .acum-table:has(#at-mrc) th:nth-child(4),
  .acum-table:has(#at-mrc) td:nth-child(4) {
    width: 12% !important;
  }

  .acum-table:has(#at-coord) th:nth-child(5),
  .acum-table:has(#at-coord) td:nth-child(5),
  .acum-table:has(#at-agte) th:nth-child(5),
  .acum-table:has(#at-agte) td:nth-child(5),
  .acum-table:has(#at-grp) th:nth-child(5),
  .acum-table:has(#at-grp) td:nth-child(5),
  .acum-table:has(#at-mrc) th:nth-child(5),
  .acum-table:has(#at-mrc) td:nth-child(5) {
    width: 18% !important;
  }

  /* Cliente Top20: comprimir para que entren todas las columnas en pantalla */
  .acum-table:has(#at-clie) {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .acum-table:has(#at-clie) th,
  .acum-table:has(#at-clie) td {
    padding: 8px 4px !important;
    font-size: 10.2px !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .acum-table:has(#at-clie) th:nth-child(1),
  .acum-table:has(#at-clie) td:nth-child(1) { width: 7% !important; min-width: 24px !important; }
  .acum-table:has(#at-clie) th:nth-child(2),
  .acum-table:has(#at-clie) td:nth-child(2) { width: 24% !important; }
  .acum-table:has(#at-clie) th:nth-child(3),
  .acum-table:has(#at-clie) td:nth-child(3) { width: 11% !important; }
  .acum-table:has(#at-clie) th:nth-child(4),
  .acum-table:has(#at-clie) td:nth-child(4) { width: 18% !important; }
  .acum-table:has(#at-clie) th:nth-child(5),
  .acum-table:has(#at-clie) td:nth-child(5) { width: 22% !important; }
  .acum-table:has(#at-clie) th:nth-child(6),
  .acum-table:has(#at-clie) td:nth-child(6) { width: 8% !important; }
  .acum-table:has(#at-clie) th:nth-child(7),
  .acum-table:has(#at-clie) td:nth-child(7) { width: 10% !important; }

  .acum-table:has(#at-clie) .mini-bar-track {
    min-width: 100%;
  }

  /* Proyección: compactar más la primera columna sin truncar tanto la info */
  .tw.projection-hierarchy-wrap #projectionHierarchyTable,
  .tw.projection-hierarchy-wrap #projectionProductHierarchyTable {
    min-width: 520px !important;
    width: max(100%, 520px) !important;
    table-layout: fixed !important;
  }

  .tw.projection-hierarchy-wrap #projectionFamilySummaryTable {
    min-width: 460px !important;
    width: max(100%, 460px) !important;
    table-layout: fixed !important;
  }

  #projectionHierarchyTable th,
  #projectionHierarchyTable td,
  #projectionProductHierarchyTable th,
  #projectionProductHierarchyTable td,
  #projectionFamilySummaryTable th,
  #projectionFamilySummaryTable td {
    padding: 8px 7px !important;
    font-size: 11px !important;
  }

  #projectionHierarchyTable th:first-child,
  #projectionHierarchyTable td:first-child,
  #projectionProductHierarchyTable th:first-child,
  #projectionProductHierarchyTable td:first-child {
    width: 142px !important;
    min-width: 142px !important;
    max-width: 142px !important;
  }

  #projectionFamilySummaryTable th:first-child,
  #projectionFamilySummaryTable td:first-child {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
  }

  #projectionHierarchyTable th:not(:first-child),
  #projectionHierarchyTable td:not(:first-child),
  #projectionProductHierarchyTable th:not(:first-child),
  #projectionProductHierarchyTable td:not(:first-child),
  #projectionFamilySummaryTable th:not(:first-child),
  #projectionFamilySummaryTable td:not(:first-child) {
    min-width: 74px !important;
  }

  #projectionHierarchyTable .proj-hierarchy-toggle,
  #projectionProductHierarchyTable .proj-hierarchy-toggle {
    gap: 6px !important;
  }

  #projectionHierarchyTable .proj-hierarchy-caret,
  #projectionProductHierarchyTable .proj-hierarchy-caret {
    width: 12px !important;
    flex-basis: 12px !important;
    font-size: 10px !important;
    padding-top: 1px !important;
  }

  #projectionHierarchyTable .proj-hierarchy-agent-cell,
  #projectionProductHierarchyTable .proj-hierarchy-agent-cell {
    padding-left: 12px !important;
    gap: 1px !important;
  }

  #projectionHierarchyTable .proj-hierarchy-group-meta,
  #projectionProductHierarchyTable .proj-hierarchy-group-meta {
    gap: 4px !important;
  }

  #projectionHierarchyTable .proj-hierarchy-pill,
  #projectionProductHierarchyTable .proj-hierarchy-pill {
    padding: 2px 5px !important;
    font-size: 8.5px !important;
  }

  #projectionHierarchyTable .proj-hierarchy-name,
  #projectionProductHierarchyTable .proj-hierarchy-name,
  #projectionHierarchyTable .proj-hierarchy-agent-sub,
  #projectionProductHierarchyTable .proj-hierarchy-agent-sub,
  #projectionFamilySummaryTable td:first-child {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-height: 1.22 !important;
  }

  #projectionHierarchyTable .proj-hierarchy-agent-code,
  #projectionProductHierarchyTable .proj-hierarchy-agent-code {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 479px) {
  .acum-table:has(#at-coord) th,
  .acum-table:has(#at-coord) td,
  .acum-table:has(#at-agte) th,
  .acum-table:has(#at-agte) td,
  .acum-table:has(#at-grp) th,
  .acum-table:has(#at-grp) td,
  .acum-table:has(#at-mrc) th,
  .acum-table:has(#at-mrc) td {
    font-size: 10.8px !important;
  }

  #projectionHierarchyTable th:first-child,
  #projectionHierarchyTable td:first-child,
  #projectionProductHierarchyTable th:first-child,
  #projectionProductHierarchyTable td:first-child {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
  }

  #projectionFamilySummaryTable th:first-child,
  #projectionFamilySummaryTable td:first-child {
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
  }

  .tw.projection-hierarchy-wrap #projectionHierarchyTable,
  .tw.projection-hierarchy-wrap #projectionProductHierarchyTable {
    min-width: 500px !important;
    width: max(100%, 500px) !important;
  }

  .tw.projection-hierarchy-wrap #projectionFamilySummaryTable {
    min-width: 440px !important;
    width: max(100%, 440px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   v46 — MOBILE TABLE NORMALIZATION + PROJECTION FADE REMOVAL
   - Acumulados: unifica ancho visible entre Por Coordinador / Agente / Grupo / Marca.
   - Cliente Top 20: entra completo en mobile priorizando Kilos / % / Dist.
   - Proyección Familia/Producto + Resumen Ejecutivo: se elimina solo el fade lateral.
   Desktop no se modifica intencionalmente.
═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Acumulados 5 columnas: misma disposición visual para todas las vistas */
  .acum-table--coord,
  .acum-table--agent,
  .acum-table--group,
  .acum-table--brand {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .acum-table--coord th,
  .acum-table--coord td,
  .acum-table--agent th,
  .acum-table--agent td,
  .acum-table--group th,
  .acum-table--group td,
  .acum-table--brand th,
  .acum-table--brand td {
    padding: 8px 5px !important;
    font-size: 10.9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0 !important;
  }

  .acum-table--coord th:nth-child(1),
  .acum-table--coord td:nth-child(1),
  .acum-table--agent th:nth-child(1),
  .acum-table--agent td:nth-child(1),
  .acum-table--group th:nth-child(1),
  .acum-table--group td:nth-child(1),
  .acum-table--brand th:nth-child(1),
  .acum-table--brand td:nth-child(1) {
    width: 7% !important;
    min-width: 26px !important;
    max-width: 28px !important;
    padding-left: 8px !important;
    padding-right: 4px !important;
  }

  .acum-table--coord th:nth-child(2),
  .acum-table--coord td:nth-child(2),
  .acum-table--agent th:nth-child(2),
  .acum-table--agent td:nth-child(2),
  .acum-table--group th:nth-child(2),
  .acum-table--group td:nth-child(2),
  .acum-table--brand th:nth-child(2),
  .acum-table--brand td:nth-child(2) {
    width: 32% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .acum-table--coord th:nth-child(3),
  .acum-table--coord td:nth-child(3),
  .acum-table--agent th:nth-child(3),
  .acum-table--agent td:nth-child(3),
  .acum-table--group th:nth-child(3),
  .acum-table--group td:nth-child(3),
  .acum-table--brand th:nth-child(3),
  .acum-table--brand td:nth-child(3) {
    width: 23% !important;
  }

  .acum-table--coord th:nth-child(4),
  .acum-table--coord td:nth-child(4),
  .acum-table--agent th:nth-child(4),
  .acum-table--agent td:nth-child(4),
  .acum-table--group th:nth-child(4),
  .acum-table--group td:nth-child(4),
  .acum-table--brand th:nth-child(4),
  .acum-table--brand td:nth-child(4) {
    width: 12% !important;
  }

  .acum-table--coord th:nth-child(5),
  .acum-table--coord td:nth-child(5),
  .acum-table--agent th:nth-child(5),
  .acum-table--agent td:nth-child(5),
  .acum-table--group th:nth-child(5),
  .acum-table--group td:nth-child(5),
  .acum-table--brand th:nth-child(5),
  .acum-table--brand td:nth-child(5) {
    width: 26% !important;
  }

  .acum-table--coord .mini-bar-track,
  .acum-table--agent .mini-bar-track,
  .acum-table--group .mini-bar-track,
  .acum-table--brand .mini-bar-track {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Cliente Top 20: misma lógica de distribución, priorizando métricas */
  .acum-table--client-top20 {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .acum-table--client-top20 th,
  .acum-table--client-top20 td {
    padding: 8px 4px !important;
    font-size: 9.8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0 !important;
  }

  .acum-table--client-top20 th:nth-child(1),
  .acum-table--client-top20 td:nth-child(1) { width: 6% !important; min-width: 24px !important; }
  .acum-table--client-top20 th:nth-child(2),
  .acum-table--client-top20 td:nth-child(2) { width: 19% !important; }
  .acum-table--client-top20 th:nth-child(3),
  .acum-table--client-top20 td:nth-child(3) { width: 10% !important; }
  .acum-table--client-top20 th:nth-child(4),
  .acum-table--client-top20 td:nth-child(4) { width: 15% !important; }
  .acum-table--client-top20 th:nth-child(5),
  .acum-table--client-top20 td:nth-child(5) { width: 21% !important; }
  .acum-table--client-top20 th:nth-child(6),
  .acum-table--client-top20 td:nth-child(6) { width: 8% !important; }
  .acum-table--client-top20 th:nth-child(7),
  .acum-table--client-top20 td:nth-child(7) { width: 21% !important; }

  .acum-table--client-top20 .mini-bar-track {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Proyección: quitar solo el fade lateral derecho que genera la "sombra" */
  .projection-hierarchy-wrap--no-fade::after,
  .projection-hierarchy-wrap--no-fade.has-h-overflow::after {
    display: none !important;
    opacity: 0 !important;
    content: none !important;
  }
}

@media (max-width: 479px) {
  .acum-table--coord th,
  .acum-table--coord td,
  .acum-table--agent th,
  .acum-table--agent td,
  .acum-table--group th,
  .acum-table--group td,
  .acum-table--brand th,
  .acum-table--brand td {
    font-size: 10.5px !important;
  }

  .acum-table--client-top20 th,
  .acum-table--client-top20 td {
    font-size: 9.4px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   v47 — MOBILE ACCUMULADOS RUNTIME TARGETING FIX
   Causa probable del fallo previo:
   - el ajuste v46 dependía de clases agregadas en index.html;
   - si el HTML quedó viejo en caché o no se reemplazó, esos selectores no matchean.
   Solución:
   - el runtime marca cada tabla por tbody id desde table-ui.js;
   - este bloque usa data-mobile-layout, sin depender del HTML base.
   Desktop no se modifica intencionalmente.
═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .tw[data-mobile-layout="coord"],
  .tw[data-mobile-layout="agent"],
  .tw[data-mobile-layout="group"],
  .tw[data-mobile-layout="brand"],
  .tw[data-mobile-layout="client-top20"] {
    overflow-x: hidden !important;
  }

  .acum-table[data-mobile-layout="coord"],
  .acum-table[data-mobile-layout="agent"],
  .acum-table[data-mobile-layout="group"],
  .acum-table[data-mobile-layout="brand"] {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    display: table !important;
  }

  .acum-table[data-mobile-layout="coord"] th,
  .acum-table[data-mobile-layout="coord"] td,
  .acum-table[data-mobile-layout="agent"] th,
  .acum-table[data-mobile-layout="agent"] td,
  .acum-table[data-mobile-layout="group"] th,
  .acum-table[data-mobile-layout="group"] td,
  .acum-table[data-mobile-layout="brand"] th,
  .acum-table[data-mobile-layout="brand"] td {
    padding: 8px 5px !important;
    font-size: 10.6px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .acum-table[data-mobile-layout="coord"] th:nth-child(1),
  .acum-table[data-mobile-layout="coord"] td:nth-child(1),
  .acum-table[data-mobile-layout="agent"] th:nth-child(1),
  .acum-table[data-mobile-layout="agent"] td:nth-child(1),
  .acum-table[data-mobile-layout="group"] th:nth-child(1),
  .acum-table[data-mobile-layout="group"] td:nth-child(1),
  .acum-table[data-mobile-layout="brand"] th:nth-child(1),
  .acum-table[data-mobile-layout="brand"] td:nth-child(1) {
    width: 6% !important;
    min-width: 22px !important;
    max-width: 24px !important;
    padding-left: 8px !important;
    padding-right: 4px !important;
  }

  .acum-table[data-mobile-layout="coord"] th:nth-child(2),
  .acum-table[data-mobile-layout="coord"] td:nth-child(2),
  .acum-table[data-mobile-layout="agent"] th:nth-child(2),
  .acum-table[data-mobile-layout="agent"] td:nth-child(2),
  .acum-table[data-mobile-layout="group"] th:nth-child(2),
  .acum-table[data-mobile-layout="group"] td:nth-child(2),
  .acum-table[data-mobile-layout="brand"] th:nth-child(2),
  .acum-table[data-mobile-layout="brand"] td:nth-child(2) {
    width: 35% !important;
  }

  .acum-table[data-mobile-layout="coord"] th:nth-child(3),
  .acum-table[data-mobile-layout="coord"] td:nth-child(3),
  .acum-table[data-mobile-layout="agent"] th:nth-child(3),
  .acum-table[data-mobile-layout="agent"] td:nth-child(3),
  .acum-table[data-mobile-layout="group"] th:nth-child(3),
  .acum-table[data-mobile-layout="group"] td:nth-child(3),
  .acum-table[data-mobile-layout="brand"] th:nth-child(3),
  .acum-table[data-mobile-layout="brand"] td:nth-child(3) {
    width: 24% !important;
  }

  .acum-table[data-mobile-layout="coord"] th:nth-child(4),
  .acum-table[data-mobile-layout="coord"] td:nth-child(4),
  .acum-table[data-mobile-layout="agent"] th:nth-child(4),
  .acum-table[data-mobile-layout="agent"] td:nth-child(4),
  .acum-table[data-mobile-layout="group"] th:nth-child(4),
  .acum-table[data-mobile-layout="group"] td:nth-child(4),
  .acum-table[data-mobile-layout="brand"] th:nth-child(4),
  .acum-table[data-mobile-layout="brand"] td:nth-child(4) {
    width: 10% !important;
  }

  .acum-table[data-mobile-layout="coord"] th:nth-child(5),
  .acum-table[data-mobile-layout="coord"] td:nth-child(5),
  .acum-table[data-mobile-layout="agent"] th:nth-child(5),
  .acum-table[data-mobile-layout="agent"] td:nth-child(5),
  .acum-table[data-mobile-layout="group"] th:nth-child(5),
  .acum-table[data-mobile-layout="group"] td:nth-child(5),
  .acum-table[data-mobile-layout="brand"] th:nth-child(5),
  .acum-table[data-mobile-layout="brand"] td:nth-child(5) {
    width: 25% !important;
  }

  .acum-table[data-mobile-layout="coord"] .mini-bar-track,
  .acum-table[data-mobile-layout="agent"] .mini-bar-track,
  .acum-table[data-mobile-layout="group"] .mini-bar-track,
  .acum-table[data-mobile-layout="brand"] .mini-bar-track {
    width: 100% !important;
    min-width: 0 !important;
  }

  .acum-table[data-mobile-layout="client-top20"] {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    display: table !important;
  }

  .acum-table[data-mobile-layout="client-top20"] th,
  .acum-table[data-mobile-layout="client-top20"] td {
    padding: 7px 3px !important;
    font-size: 9.2px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .acum-table[data-mobile-layout="client-top20"] th:nth-child(1),
  .acum-table[data-mobile-layout="client-top20"] td:nth-child(1) { width: 5% !important; min-width: 18px !important; max-width: 20px !important; }
  .acum-table[data-mobile-layout="client-top20"] th:nth-child(2),
  .acum-table[data-mobile-layout="client-top20"] td:nth-child(2) { width: 23% !important; }
  .acum-table[data-mobile-layout="client-top20"] th:nth-child(3),
  .acum-table[data-mobile-layout="client-top20"] td:nth-child(3) { width: 11% !important; }
  .acum-table[data-mobile-layout="client-top20"] th:nth-child(4),
  .acum-table[data-mobile-layout="client-top20"] td:nth-child(4) { width: 20% !important; }
  .acum-table[data-mobile-layout="client-top20"] th:nth-child(5),
  .acum-table[data-mobile-layout="client-top20"] td:nth-child(5) { width: 19% !important; }
  .acum-table[data-mobile-layout="client-top20"] th:nth-child(6),
  .acum-table[data-mobile-layout="client-top20"] td:nth-child(6) { width: 7% !important; }
  .acum-table[data-mobile-layout="client-top20"] th:nth-child(7),
  .acum-table[data-mobile-layout="client-top20"] td:nth-child(7) { width: 15% !important; }

  .acum-table[data-mobile-layout="client-top20"] .mini-bar-track {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 389px) {
  .acum-table[data-mobile-layout="coord"] th,
  .acum-table[data-mobile-layout="coord"] td,
  .acum-table[data-mobile-layout="agent"] th,
  .acum-table[data-mobile-layout="agent"] td,
  .acum-table[data-mobile-layout="group"] th,
  .acum-table[data-mobile-layout="group"] td,
  .acum-table[data-mobile-layout="brand"] th,
  .acum-table[data-mobile-layout="brand"] td {
    font-size: 10.1px !important;
  }

  .acum-table[data-mobile-layout="client-top20"] th,
  .acum-table[data-mobile-layout="client-top20"] td {
    font-size: 8.9px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   v48 · Acumulados mobile: corrección robusta por runtime para Por Agente
   y Por Cliente (Top 20).
   Motivo del fallo previo:
   - el ajuste solo por CSS no terminó de dominar el layout intrínseco cuando
     el contenido textual era más largo;
   - Por Agente y Cliente Top 20 seguían expandiendo la tabla.
   Solución:
   - runtime agrega colgroup + table-layout fixed;
   - clipping explícito en columnas textuales;
   - anchos homogéneos solo en mobile.
═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .tw[data-mobile-layout="coord"],
  .tw[data-mobile-layout="agent"],
  .tw[data-mobile-layout="group"],
  .tw[data-mobile-layout="brand"],
  .tw[data-mobile-layout="client-top20"] {
    overflow-x: hidden !important;
  }

  .acum-table[data-mobile-layout] {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
  }

  .acum-table[data-mobile-layout] thead {
    display: table-header-group !important;
  }

  .acum-table[data-mobile-layout] tbody {
    display: table-row-group !important;
  }

  .acum-table[data-mobile-layout] tr {
    display: table-row !important;
    background: transparent !important;
    border: 0 !important;
  }

  .acum-table[data-mobile-layout] th,
  .acum-table[data-mobile-layout] td {
    display: table-cell !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
  }

  .acum-table[data-mobile-layout] td::before {
    display: none !important;
    content: none !important;
  }

  .acum-table[data-mobile-layout="coord"] th,
  .acum-table[data-mobile-layout="coord"] td,
  .acum-table[data-mobile-layout="agent"] th,
  .acum-table[data-mobile-layout="agent"] td,
  .acum-table[data-mobile-layout="group"] th,
  .acum-table[data-mobile-layout="group"] td,
  .acum-table[data-mobile-layout="brand"] th,
  .acum-table[data-mobile-layout="brand"] td {
    font-size: 10.3px !important;
    line-height: 1.12 !important;
    padding: 7px 4px !important;
  }

  .acum-table[data-mobile-layout="client-top20"] th,
  .acum-table[data-mobile-layout="client-top20"] td {
    font-size: 8.65px !important;
    line-height: 1.08 !important;
    padding: 7px 3px !important;
  }

  .acum-table[data-mobile-layout="client-top20"] th:nth-child(1),
  .acum-table[data-mobile-layout="client-top20"] td:nth-child(1) {
    padding-left: 4px !important;
    padding-right: 2px !important;
  }

  .acum-table[data-mobile-layout] .td-clip {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .acum-table[data-mobile-layout] .td-clip__muted,
  .acum-table[data-mobile-layout] .td-clip--muted {
    color: var(--mut) !important;
  }

  .acum-table[data-mobile-layout] .mini-bar-track {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* v77 - Override mobile: panel colapsado en una sola linea.
   Este bloque va despues de reglas mobile historicas que hacian el boton 100%. */
@media (max-width: 767px) {
  .filter-panel.collapsed .fp-inner{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    padding:5px 10px!important;
    min-height:40px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    white-space:nowrap!important;
  }
  .filter-panel.collapsed .fp-inner::-webkit-scrollbar{display:none!important;}
  .filter-panel.collapsed .fp-top{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:0!important;
    width:auto!important;
    margin:0!important;
    flex:0 0 auto!important;
  }
  .filter-panel.collapsed .fp-top-left{
    width:auto!important;
    display:flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
  }
  .filter-panel.collapsed #btnToggleFilters{
    width:auto!important;
    min-height:28px!important;
    height:28px!important;
    padding:4px 10px!important;
    border-radius:999px!important;
    font-size:11.5px!important;
    line-height:1!important;
    justify-content:center!important;
    flex:0 0 auto!important;
  }
  .filter-panel.collapsed .fp-collapsed-note{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
    margin:0!important;
    padding:0!important;
    flex:0 0 auto!important;
    overflow:visible!important;
  }
  .filter-panel.collapsed .fp-note-pill{
    min-height:28px!important;
    height:28px!important;
    padding:4px 9px!important;
    font-size:10.5px!important;
    display:inline-flex!important;
    align-items:center!important;
    width:auto!important;
    max-width:none!important;
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }
}

/* v78 - Mobile/tablet: tabs compactas y desplazables sin ocupar alto extra. */
@media (max-width:767px){
  .filter-panel.collapsed{--filter-panel-height:36px!important;}
  .filter-panel.collapsed .fp-inner{
    min-height:34px!important;
    padding-top:3px!important;
    padding-bottom:3px!important;
  }
  .tabs-bar{
    top:calc(var(--filter-panel-height,36px) - 1px)!important;
    min-height:40px!important;
    padding:5px 8px!important;
    gap:6px!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
    margin-top:0!important;
  }
  .tabs-bar::-webkit-scrollbar{display:none!important;}
  .tab{
    min-height:29px!important;
    padding:6px 10px!important;
    font-size:11.5px!important;
    line-height:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
  }
}


/* ══ css/ui-v57-visual-refine.css ══ */
/* v57 — visual clarity + mobile tables + accumulated layout */

:root{
  --visual-title-bg-1: rgba(20,31,52,.98);
  --visual-title-bg-2: rgba(13,21,38,.96);
  --visual-title-border: rgba(120,146,203,.26);
  --visual-title-text: #eef4ff;
  --visual-title-badge-bg: rgba(24,36,61,.96);
  --visual-title-badge-border: rgba(132,158,215,.24);
  --visual-title-badge-text: #dbe8ff;
  --visual-head-bg-1: rgba(32,49,82,.98);
  --visual-head-bg-2: rgba(21,34,59,.98);
  --visual-head-border: rgba(132,154,207,.24);
  --visual-head-text: #eaf2ff;
}

/* Global visual headers: stronger contrast, same language across cards */
.card > .ch,
.story-card > .ch,
.projection-hierarchy-card > .ch,
.projection-family-summary-card > .ch,
.projection-family-card > .ch,
.projection-product-card > .ch{
  background: linear-gradient(180deg, var(--visual-title-bg-1), var(--visual-title-bg-2)) !important;
  border-bottom: 1px solid var(--visual-title-border) !important;
  box-shadow: inset 0 -1px 0 rgba(192,211,255,.05);
  padding: 14px 18px 13px !important;
}

.card > .ch .ct,
.story-card > .ch .ct,
.projection-hierarchy-card > .ch .ct,
.projection-family-summary-card > .ch .ct,
.projection-family-card > .ch .ct,
.projection-product-card > .ch .ct,
#acumExplorerTitle,
#freqTitle{
  color: var(--visual-title-text) !important;
  font-size: 11.8px !important;
  font-weight: 800 !important;
  letter-spacing: .92px !important;
  line-height: 1.2;
  text-shadow: 0 1px 0 rgba(0,0,0,.28);
}

.card > .ch .cbadge,
.story-card > .ch .cbadge,
.projection-hierarchy-card > .ch .cbadge,
.projection-family-summary-card > .ch .cbadge,
.projection-family-card > .ch .cbadge,
.projection-product-card > .ch .cbadge,
#acumExplorerBadge,
#freqBadge{
  background: var(--visual-title-badge-bg) !important;
  border-color: var(--visual-title-badge-border) !important;
  color: var(--visual-title-badge-text) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.card table thead th,
#page-frecuencia .freq-table thead th,
#page-resumen-acum .acsum-table thead th,
#page-acumulados .acum-table thead th,
#page-proyeccion .projection-hierarchy-table thead th,
#page-proyeccion .projection-family-summary-table thead th{
  background: linear-gradient(180deg, var(--visual-head-bg-1), var(--visual-head-bg-2)) !important;
  color: var(--visual-head-text) !important;
  border-bottom: 1px solid var(--visual-head-border) !important;
  box-shadow: inset 0 -1px 0 rgba(196,214,255,.06);
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .78px !important;
}

/* Explorer subtle shell titles */
.detail-toolbar--subtle{
  background: linear-gradient(180deg, rgba(16,25,43,.84), rgba(11,18,32,.76));
  border-top: 1px solid rgba(132,154,207,.12);
}

/* Remove reserved right gutter / dark strip around last column */
.card > .tw,
#page-acumulados .tw,
#page-resumen-acum .tw,
#page-frecuencia .tw,
#page-proyeccion .tw{
  scrollbar-gutter: auto !important;
  overflow-x: auto;
  overflow-y: hidden;
  background: transparent;
}

#page-acumulados .acum-table,
#page-resumen-acum .acsum-table,
#page-frecuencia .freq-table{
  min-width: 0;
}

#page-acumulados .acum-table th:last-child,
#page-acumulados .acum-table td:last-child{
  padding-right: 18px !important;
}

#page-acumulados .acum-bar-cell{
  width: 96px;
}

#page-acumulados .mini-bar-track{
  width: 100%;
  max-width: none;
  background: rgba(255,255,255,.08) !important;
}

/* Accumulated cards: denser layout and columns fully visible */
@media (min-width: 1100px){
  #page-acumulados .acum-grid{
    display: grid;
    grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
    grid-template-areas:
      "coord agent"
      "group agent"
      "brand brand"
      "clients clients";
    gap: 14px;
    align-items: start;
  }
  #page-acumulados .acum-card--coord{ grid-area: coord; }
  #page-acumulados .acum-card--agent{ grid-area: agent; }
  #page-acumulados .acum-card--group{ grid-area: group; }
  #page-acumulados .acum-card--brand{ grid-area: brand; }
  #page-acumulados .acum-card--clients{ grid-area: clients; }
}

#page-acumulados .acum-table{
  table-layout: fixed;
  width: 100%;
  min-width: 0 !important;
}

#page-acumulados .acum-table th,
#page-acumulados .acum-table td{
  overflow: hidden;
}

#page-acumulados .acum-table td:nth-child(2),
#page-acumulados .acum-table td:nth-child(3),
#page-acumulados .acum-table td:nth-child(4){
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.28;
}

#page-acumulados .acum-table td:nth-child(3),
#page-acumulados .acum-table td:nth-child(4),
#page-acumulados .acum-table td:nth-child(5),
#page-acumulados .acum-table td:nth-child(6),
#page-acumulados .acum-table td:nth-child(7),
#page-acumulados .acum-table th:nth-child(3),
#page-acumulados .acum-table th:nth-child(4),
#page-acumulados .acum-table th:nth-child(5),
#page-acumulados .acum-table th:nth-child(6),
#page-acumulados .acum-table th:nth-child(7){
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#page-acumulados .acum-table--coord th:nth-child(1),
#page-acumulados .acum-table--coord td:nth-child(1),
#page-acumulados .acum-table--agent th:nth-child(1),
#page-acumulados .acum-table--agent td:nth-child(1),
#page-acumulados .acum-table--group th:nth-child(1),
#page-acumulados .acum-table--group td:nth-child(1),
#page-acumulados .acum-table--brand th:nth-child(1),
#page-acumulados .acum-table--brand td:nth-child(1){ width: 7%; }

#page-acumulados .acum-table--coord th:nth-child(2),
#page-acumulados .acum-table--coord td:nth-child(2){ width: 47%; }
#page-acumulados .acum-table--coord th:nth-child(3),
#page-acumulados .acum-table--coord td:nth-child(3){ width: 22%; }
#page-acumulados .acum-table--coord th:nth-child(4),
#page-acumulados .acum-table--coord td:nth-child(4){ width: 11%; }
#page-acumulados .acum-table--coord th:nth-child(5),
#page-acumulados .acum-table--coord td:nth-child(5){ width: 13%; }

#page-acumulados .acum-table--agent th:nth-child(2),
#page-acumulados .acum-table--agent td:nth-child(2){ width: 43%; }
#page-acumulados .acum-table--agent th:nth-child(3),
#page-acumulados .acum-table--agent td:nth-child(3){ width: 21%; }
#page-acumulados .acum-table--agent th:nth-child(4),
#page-acumulados .acum-table--agent td:nth-child(4){ width: 10%; }
#page-acumulados .acum-table--agent th:nth-child(5),
#page-acumulados .acum-table--agent td:nth-child(5){ width: 15%; }

#page-acumulados .acum-table--group th:nth-child(2),
#page-acumulados .acum-table--group td:nth-child(2),
#page-acumulados .acum-table--brand th:nth-child(2),
#page-acumulados .acum-table--brand td:nth-child(2){ width: 45%; }
#page-acumulados .acum-table--group th:nth-child(3),
#page-acumulados .acum-table--group td:nth-child(3),
#page-acumulados .acum-table--brand th:nth-child(3),
#page-acumulados .acum-table--brand td:nth-child(3){ width: 21%; }
#page-acumulados .acum-table--group th:nth-child(4),
#page-acumulados .acum-table--group td:nth-child(4),
#page-acumulados .acum-table--brand th:nth-child(4),
#page-acumulados .acum-table--brand td:nth-child(4){ width: 10%; }
#page-acumulados .acum-table--group th:nth-child(5),
#page-acumulados .acum-table--group td:nth-child(5),
#page-acumulados .acum-table--brand th:nth-child(5),
#page-acumulados .acum-table--brand td:nth-child(5){ width: 14%; }

#page-acumulados .acum-table--client-top20 th:nth-child(1),
#page-acumulados .acum-table--client-top20 td:nth-child(1){ width: 5%; }
#page-acumulados .acum-table--client-top20 th:nth-child(2),
#page-acumulados .acum-table--client-top20 td:nth-child(2){ width: 30%; }
#page-acumulados .acum-table--client-top20 th:nth-child(3),
#page-acumulados .acum-table--client-top20 td:nth-child(3){ width: 12%; }
#page-acumulados .acum-table--client-top20 th:nth-child(4),
#page-acumulados .acum-table--client-top20 td:nth-child(4){ width: 17%; }
#page-acumulados .acum-table--client-top20 th:nth-child(5),
#page-acumulados .acum-table--client-top20 td:nth-child(5){ width: 15%; }
#page-acumulados .acum-table--client-top20 th:nth-child(6),
#page-acumulados .acum-table--client-top20 td:nth-child(6){ width: 8%; }
#page-acumulados .acum-table--client-top20 th:nth-child(7),
#page-acumulados .acum-table--client-top20 td:nth-child(7){ width: 13%; }

/* Mobile: keep critical numeric tables visible as tables with horizontal scroll */
@media (max-width: 760px){
  #page-acumulados .card > .ch,
  #page-resumen-acum .card > .ch,
  #page-frecuencia .card > .ch,
  #page-proyeccion .card > .ch,
  #page-detalle .card > .ch{
    padding: 12px 14px 11px !important;
  }

  #page-acumulados .card > .ch .ct,
  #page-resumen-acum .card > .ch .ct,
  #page-frecuencia .card > .ch .ct,
  #page-proyeccion .card > .ch .ct,
  #page-detalle .card > .ch .ct{
    font-size: 11.2px !important;
    letter-spacing: .82px !important;
  }

  #page-acumulados .tw,
  #page-resumen-acum .tw,
  #page-frecuencia .tw,
  #page-proyeccion .tw,
  #page-detalle .tw{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: auto !important;
  }

  table.responsive-stack.responsive-stack--acum{
    display: table !important;
    width: 100% !important;
    min-width: 620px !important;
    table-layout: fixed;
  }
  table.responsive-stack.responsive-stack--acum thead{ display: table-header-group !important; }
  table.responsive-stack.responsive-stack--acum tbody{ display: table-row-group !important; padding: 0 !important; }
  table.responsive-stack.responsive-stack--acum tr{ display: table-row !important; background: transparent !important; border: none !important; padding: 0 !important; }
  table.responsive-stack.responsive-stack--acum td,
  table.responsive-stack.responsive-stack--acum th{ display: table-cell !important; }
  table.responsive-stack.responsive-stack--acum td{
    padding: 11px 8px !important;
    font-size: 10.8px !important;
    border-bottom: 1px solid rgba(82,95,124,.18) !important;
    text-align: left;
  }
  table.responsive-stack.responsive-stack--acum td::before{ display: none !important; }
  table.responsive-stack.responsive-stack--acum td.r,
  table.responsive-stack.responsive-stack--acum td.num{ text-align: right !important; }
  table.responsive-stack.responsive-stack--acum td[data-label="Dist."]{ display: table-cell !important; text-align: left !important; }
  table.responsive-stack.responsive-stack--acum .mini-bar-track{ height: 7px !important; }

  #page-acumulados .acum-table--client-top20{ min-width: 780px !important; }
  #page-resumen-acum .acsum-table{ min-width: 860px !important; }
  #page-frecuencia .freq-table{ min-width: 920px !important; }
  #page-proyeccion .projection-hierarchy-table{ min-width: 720px !important; }
  #page-proyeccion .projection-family-summary-table{ min-width: 700px !important; }

  #page-acumulados .acum-table thead th,
  #page-resumen-acum .acsum-table thead th,
  #page-frecuencia .freq-table thead th,
  #page-proyeccion .projection-hierarchy-table thead th,
  #page-proyeccion .projection-family-summary-table thead th{
    font-size: 9.4px !important;
    padding: 10px 8px !important;
    letter-spacing: .58px !important;
  }

  #page-acumulados .acum-table td:nth-child(2),
  #page-acumulados .acum-table td:nth-child(3),
  #page-acumulados .acum-table td:nth-child(4){
    font-size: 10.6px !important;
  }
}

/* v58 — KPI polish + compact toolbar cleanup + mobile detail/accum fit */

/* 1) KPI cards and quick-group cards: stronger hierarchy and number legibility */
.kpi-row .kpi,
.proj-stats-row .kpi {
  background: linear-gradient(180deg, rgba(15, 26, 46, 0.96), rgba(10, 18, 34, 0.96)) !important;
  border-color: rgba(112, 141, 204, 0.22) !important;
  box-shadow: 0 14px 34px rgba(1, 8, 20, 0.28), inset 0 1px 0 rgba(255,255,255,.03);
}

.kpi-lbl {
  color: #d6e3ff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .96px !important;
  text-transform: uppercase;
}

.kpi-val {
  font-family: "DM Mono", "Syne", system-ui, sans-serif !important;
  font-size: clamp(28px, 2.2vw, 34px) !important;
  font-weight: 700 !important;
  line-height: .98 !important;
  letter-spacing: -1.35px !important;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0,0,0,.34);
}

.grupo-strip {
  gap: 10px;
}

.gk {
  min-width: 172px;
  padding: 12px 16px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16, 28, 49, 0.96), rgba(11, 20, 36, 0.96)) !important;
  border-color: rgba(112, 141, 204, 0.22) !important;
  box-shadow: 0 14px 32px rgba(1, 8, 20, 0.24), inset 0 1px 0 rgba(255,255,255,.025);
}

.gk-name {
  color: #dbe7ff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .82px !important;
  text-transform: uppercase;
  margin-bottom: 8px;
  max-width: none;
}

.gk-val {
  color: #f7fbff !important;
  font-family: "DM Mono", "Syne", system-ui, sans-serif !important;
  font-size: clamp(26px, 1.95vw, 33px) !important;
  font-weight: 700 !important;
  line-height: .94 !important;
  letter-spacing: -1.18px !important;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0,0,0,.32);
}

.gk-pct {
  color: #aecdff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .18px;
  opacity: 1 !important;
  margin-top: 8px;
}

.gk-bar {
  height: 3px !important;
  opacity: .95 !important;
}

/* 2) Mobile — Detalle · Por cliente without horizontal scroll */
@media (max-width: 767px) {
  #page-detalle .tw[data-detail-view="cliente"] {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] {
    display: table !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] thead {
    display: table-header-group !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] tbody {
    display: table-row-group !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] tr {
    display: table-row !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] th,
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td {
    display: table-cell !important;
    padding: 9px 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] thead th {
    font-size: 8.9px !important;
    letter-spacing: .44px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] tbody td {
    font-size: 10.1px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(5),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(5) {
    display: none !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(1),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(1) { width: 34% !important; }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(2),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(2) { width: 12% !important; }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(3),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(3) { width: 16% !important; }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(4),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(4) { width: 12% !important; }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(6),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(6) { width: 26% !important; }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(1),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(1) {
    padding-left: 7px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(6),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(6) {
    padding-right: 7px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-head-wrap {
    gap: 2px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-head-sort {
    min-width: 0 !important;
    gap: 2px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-head-sort span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-head-filter {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-head-sortstate {
    font-size: 9px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-copy-cell {
    width: 100%;
    padding: 0 !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-client-toggle__label {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    width: 100%;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-client-toggle__label > span:last-child,
  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-copy-cell,
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td .td-clip {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 3) Mobile — Acumulados: all columns visible, prioritize Kilos and Dist. */
  #page-acumulados .tw[data-mobile-layout] {
    overflow-x: hidden !important;
  }

  #page-acumulados .acum-table[data-mobile-layout] {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  #page-acumulados .acum-table[data-mobile-layout] th,
  #page-acumulados .acum-table[data-mobile-layout] td {
    padding: 8px 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #page-acumulados .acum-table[data-mobile-layout] thead th {
    font-size: 8.6px !important;
    letter-spacing: .42px !important;
  }

  #page-acumulados .acum-table[data-mobile-layout] tbody td {
    font-size: 9.8px !important;
    line-height: 1.1 !important;
  }

  #page-acumulados .acum-table[data-mobile-layout] td:nth-child(2),
  #page-acumulados .acum-table[data-mobile-layout] td:nth-child(3),
  #page-acumulados .acum-table[data-mobile-layout] td:nth-child(4) {
    font-size: 9.1px !important;
  }

  #page-acumulados .acum-table[data-mobile-layout] td:nth-child(3),
  #page-acumulados .acum-table[data-mobile-layout] td:nth-child(4),
  #page-acumulados .acum-table[data-mobile-layout] td:nth-child(5),
  #page-acumulados .acum-table[data-mobile-layout] td:nth-child(6),
  #page-acumulados .acum-table[data-mobile-layout] td:nth-child(7) {
    font-variant-numeric: tabular-nums;
  }

  #page-acumulados .acum-table[data-mobile-layout] td:nth-child(3),
  #page-acumulados .acum-table[data-mobile-layout] td:nth-child(5),
  #page-acumulados .acum-table[data-mobile-layout] td:nth-child(7) {
    font-weight: 700 !important;
  }

  #page-acumulados .acum-table[data-mobile-layout] td:nth-child(1) {
    padding-left: 6px !important;
  }

  #page-acumulados .acum-table[data-mobile-layout] td:last-child,
  #page-acumulados .acum-table[data-mobile-layout] th:last-child {
    padding-right: 6px !important;
  }

  #page-acumulados .acum-table[data-mobile-layout] .mini-bar-track {
    height: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #page-acumulados .acum-table[data-mobile-layout="client-top20"] tbody td:nth-child(2),
  #page-acumulados .acum-table[data-mobile-layout="client-top20"] tbody td:nth-child(3),
  #page-acumulados .acum-table[data-mobile-layout="client-top20"] tbody td:nth-child(4) {
    font-size: 8.6px !important;
  }
}

@media (max-width: 389px) {
  .kpi-val {
    font-size: 24px !important;
  }

  .gk {
    min-width: 154px;
    padding: 11px 14px 13px;
  }

  .gk-val {
    font-size: 23px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] thead th {
    font-size: 8.2px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] tbody td {
    font-size: 9.4px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  #page-acumulados .acum-table[data-mobile-layout] thead th {
    font-size: 8px !important;
  }

  #page-acumulados .acum-table[data-mobile-layout] tbody td {
    font-size: 9.1px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
}


/* ══ css/mobile-detail-v62.css ══ */
/* =============================================================================
   MOBILE-DETAIL-V62.CSS
   Cambios vs v61:
   1) Vista compacta: encabezados completos (Cliente / Grupos / Prods / KG),
      tabla ocupa 100% del ancho real, columna Kilos con barra + %
   2) "Por fecha" rediseñado como filtro maestro que afecta Familias y Productos
   Solo afecta mobile (<=767px). Desktop intacto.
   ============================================================================= */

/* ── VISTA COMPACTA MOBILE: ancho útil completo + encabezados legibles ───────── */
@media (max-width: 767px) {

  /* Contenedor sin scroll horizontal */
  #page-detalle .tw[data-detail-view="cliente"] {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Tabla fija al 100% del viewport */
  #page-detalle table.responsive-stack[data-detail-view="cliente"] {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] thead { display: table-header-group !important; }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] tbody { display: table-row-group !important; }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] tr {
    display: table-row !important; padding: 0 !important;
    background: transparent !important; border: 0 !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] th,
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td {
    display: table-cell !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    vertical-align: middle !important;
    padding: 9px 3px !important;
    white-space: nowrap !important;
  }

  /* Encabezados: texto completo legible */
  #page-detalle table.responsive-stack[data-detail-view="cliente"] thead th {
    font-size: 9.5px !important;
    letter-spacing: .05px !important;
    font-weight: 700 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    text-overflow: clip !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] tbody td {
    font-size: 10.5px !important;
  }

  /* Metric-meter: colapsar en columnas no-Kilos */
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:not(:nth-child(6)) .metric-meter {
    min-width: 0 !important; width: auto !important; min-height: 0 !important;
    padding: 0 !important; border: none !important; background: transparent !important;
    border-radius: 0 !important; display: inline !important;
    isolation: auto !important; overflow: visible !important;
  }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:not(:nth-child(6)) .metric-meter__fill { display: none !important; }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:not(:nth-child(6)) .metric-meter__value {
    font-size: inherit !important; font-weight: 700 !important;
    color: inherit !important; position: static !important; z-index: auto !important;
  }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:not(:nth-child(6)) .metric-meter__pct { display: none !important; }

  /* Ocultar columnas auxiliares para liberar ancho real:
     col 4 = Fechas y col 5 = Registros. Los datos siguen disponibles en el cliente expandido. */
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(4),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(4),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(5),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(5) { display: none !important; }

  /* Distribución visible: Cliente / Grupos / Productos / Kilos */
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(1),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(1) {
    width: 34% !important; padding-left: 10px !important;
  }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(2),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(2) {
    width: 14% !important; text-align: right !important;
  }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(3),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(3) {
    width: 19% !important; text-align: right !important;
  }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(6),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(6) {
    width: 33% !important; padding-right: 8px !important; text-align: right !important;
  }

  /* Columna Kilos: barra + valor + % */
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(6) .metric-meter {
    min-width: 0 !important; width: 100% !important; min-height: 22px !important;
    padding: 2px 6px !important; display: inline-flex !important;
    align-items: center !important; justify-content: flex-end !important;
    gap: 4px !important; border-radius: 999px !important; flex-wrap: nowrap !important;
  }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(6) .metric-meter__value {
    font-size: 10px !important; font-weight: 700 !important;
    white-space: nowrap !important; position: static !important;
    z-index: auto !important; flex-shrink: 0 !important; color: #eef2f9 !important;
  }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(6) .metric-meter__pct {
    display: inline !important; font-size: 8.5px !important; font-weight: 500 !important;
    color: rgba(240,168,64,.8) !important; white-space: nowrap !important; flex-shrink: 0 !important;
  }

  /* Encabezado: controles compactos */
  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-head-wrap {
    gap: 2px !important; flex-wrap: nowrap !important; align-items: center !important;
    justify-content: space-between !important; width: 100% !important;
  }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-head-sort {
    min-width: 0 !important; gap: 1px !important; flex: 1 1 auto !important;
    justify-content: flex-start !important; padding-inline: 0 !important;
  }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(2) .detail-head-sort,
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(3) .detail-head-sort,
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(6) .detail-head-sort {
    justify-content: flex-end !important;
  }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-head-sort span:first-child {
    overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; min-width: 0;
  }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-head-filter {
    min-width: 15px !important; width: 15px !important; height: 22px !important;
    padding: 0 !important; font-size: 7px !important; flex-shrink: 0 !important;
    border-radius: 8px !important;
  }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-head-sortstate {
    font-size: 8px !important; gap: 1px !important; flex-shrink: 0 !important;
  }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-copy-cell {
    width: 100% !important; padding: 0 !important; display: flex !important;
    align-items: center !important; justify-content: flex-end !important;
  }

  /* Toggle del cliente */
  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-client-toggle__label {
    display: flex; align-items: center; gap: 3px; min-width: 0; width: 100%;
  }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-client-toggle__caret {
    flex-shrink: 0; font-size: 9px;
  }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-client-toggle__label > span:last-child,
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td .td-clip {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }

  /* Filas total/subtotal */
  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-grandtotal-row td,
  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-subtotal-row td,
  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-summary-row td {
    display: table-cell !important; font-size: 9.5px !important; padding: 6px 3px !important;
  }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-total-label { padding-left: 10px !important; }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-total-value { padding-right: 8px !important; }
}

/* xs portrait */
@media (max-width: 479px) {
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(1),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(1) { width: 33% !important; }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(2),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(2) { width: 14% !important; }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(3),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(3) { width: 20% !important; }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(6),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(6) { width: 33% !important; }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] thead th { font-size: 8.5px !important; }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] tbody td { font-size: 10px !important; }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(6) .metric-meter__value { font-size: 9.5px !important; }
  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-head-filter { width: 13px !important; min-width: 13px !important; }
}

/* ── OTRAS VISTAS (scroll horiz + sticky col1) ──────────────────────────────── */
@media (max-width: 767px) {
  #page-detalle .tw[data-detail-view="detalle"],
  #page-detalle .tw[data-detail-view="grupo"],
  #page-detalle .tw[data-detail-view="producto"],
  #page-detalle .tw[data-detail-view="fecha"] {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  #page-detalle table.responsive-stack[data-detail-view="detalle"],
  #page-detalle table.responsive-stack[data-detail-view="grupo"],
  #page-detalle table.responsive-stack[data-detail-view="producto"],
  #page-detalle table.responsive-stack[data-detail-view="fecha"] {
    display: table !important; width: max-content !important; min-width: 520px !important;
    max-width: none !important; table-layout: auto !important;
  }
  #page-detalle table.responsive-stack[data-detail-view="detalle"] thead,
  #page-detalle table.responsive-stack[data-detail-view="grupo"] thead,
  #page-detalle table.responsive-stack[data-detail-view="producto"] thead,
  #page-detalle table.responsive-stack[data-detail-view="fecha"] thead { display: table-header-group !important; }
  #page-detalle table.responsive-stack[data-detail-view="detalle"] tbody,
  #page-detalle table.responsive-stack[data-detail-view="grupo"] tbody,
  #page-detalle table.responsive-stack[data-detail-view="producto"] tbody,
  #page-detalle table.responsive-stack[data-detail-view="fecha"] tbody { display: table-row-group !important; }
  #page-detalle table.responsive-stack[data-detail-view="detalle"] tr,
  #page-detalle table.responsive-stack[data-detail-view="grupo"] tr,
  #page-detalle table.responsive-stack[data-detail-view="producto"] tr,
  #page-detalle table.responsive-stack[data-detail-view="fecha"] tr { display: table-row !important; padding: 0 !important; border: 0 !important; }
  #page-detalle table.responsive-stack[data-detail-view="detalle"] th,
  #page-detalle table.responsive-stack[data-detail-view="detalle"] td,
  #page-detalle table.responsive-stack[data-detail-view="grupo"] th,
  #page-detalle table.responsive-stack[data-detail-view="grupo"] td,
  #page-detalle table.responsive-stack[data-detail-view="producto"] th,
  #page-detalle table.responsive-stack[data-detail-view="producto"] td,
  #page-detalle table.responsive-stack[data-detail-view="fecha"] th,
  #page-detalle table.responsive-stack[data-detail-view="fecha"] td {
    display: table-cell !important; white-space: nowrap !important; vertical-align: middle !important;
    padding: 8px 8px !important; font-size: 10.5px !important; border-bottom: 1px solid rgba(148,163,184,.1) !important;
  }
  #page-detalle table.responsive-stack[data-detail-view="detalle"] thead th,
  #page-detalle table.responsive-stack[data-detail-view="grupo"] thead th,
  #page-detalle table.responsive-stack[data-detail-view="producto"] thead th,
  #page-detalle table.responsive-stack[data-detail-view="fecha"] thead th {
    font-size: 9px !important; letter-spacing: .4px !important; position: sticky !important;
    top: 0 !important; z-index: 3 !important; background: rgba(11,18,32,.98) !important;
  }
  #page-detalle table.responsive-stack[data-detail-view="detalle"] th:first-child,
  #page-detalle table.responsive-stack[data-detail-view="detalle"] td:first-child,
  #page-detalle table.responsive-stack[data-detail-view="grupo"] th:first-child,
  #page-detalle table.responsive-stack[data-detail-view="grupo"] td:first-child,
  #page-detalle table.responsive-stack[data-detail-view="producto"] th:first-child,
  #page-detalle table.responsive-stack[data-detail-view="producto"] td:first-child,
  #page-detalle table.responsive-stack[data-detail-view="fecha"] th:first-child,
  #page-detalle table.responsive-stack[data-detail-view="fecha"] td:first-child {
    position: sticky !important; left: 0 !important; z-index: 2 !important;
    background: #111827 !important; box-shadow: 2px 0 4px rgba(0,0,0,.18) !important;
    min-width: 100px !important; max-width: 140px !important;
  }
  #page-detalle table.responsive-stack[data-detail-view="detalle"] thead th:first-child,
  #page-detalle table.responsive-stack[data-detail-view="grupo"] thead th:first-child,
  #page-detalle table.responsive-stack[data-detail-view="producto"] thead th:first-child,
  #page-detalle table.responsive-stack[data-detail-view="fecha"] thead th:first-child {
    z-index: 4 !important; background: rgba(11,18,32,.98) !important;
  }
}

/* ── COMPONENTE MBK-* (cliente expandido mobile) ────────────────────────────── */
@media (max-width: 767px) {

  .detail-client-breakdown-row td { padding: 0 !important; }

  .mbk-root { background: #0a1520; border-top: .5px solid #1a2e48; border-bottom: 2px solid #f0a840; }
  .mbk-head { padding: 10px 12px 8px; border-bottom: .5px solid #162035; background: #0b1828; }
  .mbk-eyebrow { font-size: 8px; color: #4a6a8a; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
  .mbk-title { font-size: 12px; color: #e0eaf5; font-weight: 600; line-height: 1.3; margin-bottom: 7px; }
  .mbk-pills { display: flex; flex-wrap: wrap; gap: 4px; }
  .mbk-pill { font-size: 8.5px; border: .5px solid #1e3a5a; border-radius: 20px; padding: 2px 8px; color: #5a8ab0; background: #081018; white-space: nowrap; }
  .mbk-pill--kg { color: #f0b050; border-color: #6a3a10; background: #150e02; font-weight: 600; }

  /* Tabs */
  .mbk-tabs { display: flex; background: #0c1a2e; border-bottom: .5px solid #162035; }
  .mbk-tab { flex: 1; font-size: 10px; color: #4a6a8a; padding: 9px 4px; text-align: center; cursor: pointer; border: none; background: transparent; border-bottom: 2px solid transparent; transition: all .15s; font-family: inherit; font-weight: 500; -webkit-tap-highlight-color: transparent; }
  .mbk-tab.on { color: #7bb3f0; border-bottom-color: #4a80d0; background: rgba(74,128,208,.06); }

  /* Tab "Por fecha" — indicador visual de que actúa como filtro */
  .mbk-tab:nth-child(2) { position: relative; }
  .mbk-tab:nth-child(2).has-filter { color: #f0b050; border-bottom-color: #f0a840; }
  .mbk-tab:nth-child(2).has-filter::after {
    content: '';
    position: absolute;
    top: 7px; right: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #f0a840;
  }

  .mbk-pane { display: none; padding: 8px 10px 12px; }
  .mbk-pane.on { display: block; }

  /* Familia cards */
  .mbk-fam-card { border: .5px solid #1a2e48; border-left-width: 3px; border-radius: 0 10px 10px 0; margin-bottom: 6px; background: #0d1a2e; overflow: hidden; }
  .mbk-fam-header { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mbk-fam-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .mbk-fam-name { flex: 1; font-size: 10.5px; color: #c0d8f0; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mbk-fam-caret { font-size: 9px; color: #3a5a7a; transition: transform .2s; flex-shrink: 0; }
  .mbk-fam-metrics { display: flex; gap: 4px; padding: 0 10px 8px; }
  .mbk-fam-m { flex: 1; background: #081018; border-radius: 7px; padding: 5px 4px; text-align: center; }
  .mbk-fam-val { display: block; font-size: 12px; font-weight: 600; color: #c0d8f0; line-height: 1.2; }
  .mbk-fam-lbl { display: block; font-size: 7.5px; color: #3a5a7a; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
  .mbk-amber { color: #f0a840; }
  .mbk-blue { color: #7ab0f0; }
  .mbk-fam-prods { border-top: .5px solid #162035; padding: 4px 10px 6px; }

  .mbk-prod-item { display: flex; align-items: center; gap: 5px; padding: 5px 0; border-bottom: .5px solid #0f1929; }
  .mbk-prod-item:last-child { border-bottom: none; }
  .mbk-prod-cod { font-size: 8px; color: #3a5a7a; width: 34px; flex-shrink: 0; }
  .mbk-prod-name { flex: 1; font-size: 9.5px; color: #a0c0e0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mbk-prod-kg { font-size: 9.5px; color: #f0a840; font-weight: 600; text-align: right; white-space: nowrap; flex-shrink: 0; }

  /* Calendario */
  .mbk-cal-root { padding: 6px 0 4px; }
  .mbk-cal-hint { font-size: 9px; color: #4a7ab0; background: #0d1a2e; border: .5px solid #1a3050; border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; line-height: 1.5; text-align: center; }
  .mbk-cal-empty-hint { font-size: 10px; color: #3a5a7a; padding: 16px 0; text-align: center; }
  .mbk-cal-wrap { background: #0d1a2e; border: .5px solid #1a2e48; border-radius: 10px; padding: 8px 8px 6px; margin-bottom: 10px; }
  .mbk-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
  .mbk-cal-nav-btn { font-size: 18px; color: #4a7ab0; background: none; border: none; cursor: pointer; padding: 0 10px; border-radius: 6px; line-height: 1; font-family: inherit; -webkit-tap-highlight-color: transparent; min-height: 32px; }
  .mbk-cal-nav-btn:active { background: rgba(74,122,176,.15); }
  .mbk-cal-month-lbl { font-size: 11px; color: #c0d8f0; font-weight: 600; }
  .mbk-cal-dow-row { display: grid; grid-template-columns: repeat(7,1fr); gap: 1px; margin-bottom: 3px; }
  .mbk-cal-dow-row span { font-size: 8px; color: #3a5a7a; text-align: center; padding: 2px 0; text-transform: uppercase; }
  .mbk-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
  .mbk-cal-cell { font-family: inherit; font-size: 10px; color: #2a4060; text-align: center; padding: 5px 1px; border-radius: 6px; border: .5px solid transparent; cursor: pointer; line-height: 1; -webkit-tap-highlight-color: transparent; min-height: 26px; display: flex; align-items: center; justify-content: center; transition: all .1s; background: transparent; appearance: none; }
  .mbk-cal-cell.has-data { color: #c0d8f0; font-weight: 500; background: rgba(74,128,208,.1); border-color: rgba(74,128,208,.2); }
  .mbk-cal-cell.has-data:active { background: rgba(74,128,208,.25); }
  .mbk-cal-cell.selected { background: #1a3060 !important; border-color: #4a80d0 !important; color: #7bb3f0 !important; font-weight: 700 !important; }
  .mbk-cal-empty { pointer-events: none; }
  .mbk-cal-no-data { color: #2a3a50 !important; cursor: default !important; opacity: .45; }
  .mbk-cal-cell:disabled { pointer-events: none; }

  .mbk-cal-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
  .mbk-cal-btn-clear { font-size: 10px; padding: 5px 12px; border-radius: 7px; border: .5px solid #1a3050; background: transparent; color: #5a7a9a; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; min-height: 32px; }
  .mbk-cal-btn-clear:active { background: rgba(74,128,208,.1); }
  .mbk-cal-sel-lbl { flex: 1; font-size: 9px; color: #4a7ab0; text-align: right; line-height: 1.3; }

  .mbk-empty,
  .mbk-filter-empty { font-size: 10px; color: #3a5a7a; padding: 10px 0; text-align: center; }
  .mbk-filter-empty[hidden] { display: none !important; }

  /* Glance cards */
  #page-detalle .detail-glance-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  #page-detalle .detail-glance-card { padding: 9px 10px !important; border-radius: 12px !important; }
  #page-detalle .detail-glance-card__eyebrow { font-size: 8.5px !important; }
  #page-detalle .detail-glance-card__value { font-size: 15px !important; }
  #page-detalle .detail-glance-card__meta { font-size: 9px !important; }

  /* Note bar */
  #page-detalle .table-note { flex-direction: column !important; gap: 8px !important; padding: 10px 12px !important; }
  #page-detalle .table-note-main { font-size: 10px !important; }
  #page-detalle .table-actions { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
  #page-detalle .table-action-btn { flex: 1; min-width: 120px; min-height: 36px; font-size: 11px !important; padding: 7px 10px !important; justify-content: center; }
}

@media (max-width: 479px) {
  .mbk-title { font-size: 11px; }
  .mbk-tab { font-size: 9.5px; padding: 8px 4px; }
  .mbk-fam-val { font-size: 11px; }
  .mbk-tl-date { width: 36px; font-size: 8.5px; }
  .mbk-tl-kg { width: 44px; font-size: 8.5px; }
  .mbk-cal-cell { font-size: 9.5px; min-height: 24px; }
  .mbk-cal-month-lbl { font-size: 10.5px; }
}


/* ══ css/mobile-detail-v64.css ══ */
/* =============================================================================
   MOBILE-DETAIL-V64.CSS
   Prioridad: estabilizar Detalle mobile sin afectar desktop.
   - Vista compacta por cliente en 4 columnas reales.
   - Encabezados completos y touch targets más claros.
   - "Por fecha" como filtro local para Familias y Productos.
   - Espacio inferior para dock + asistente IA.
   ============================================================================= */

@media (max-width: 767px) {
  :root {
    --mobile-dock-reserve-v64: calc(116px + env(safe-area-inset-bottom, 0px));
  }

  body {
    padding-bottom: var(--mobile-dock-reserve-v64);
  }

  #app,
  .page,
  #page-detalle {
    scroll-padding-bottom: var(--mobile-dock-reserve-v64);
  }

  #page-detalle {
    padding-bottom: var(--mobile-dock-reserve-v64) !important;
  }

  #page-detalle .card:last-child,
  #page-detalle .tw:last-child {
    margin-bottom: var(--mobile-dock-reserve-v64) !important;
  }

  #aiFab {
    bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
    width: 50px !important;
    height: 50px !important;
    right: 12px !important;
  }

  #aiPanel {
    bottom: calc(194px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-dock {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Vista compacta por cliente: 4 columnas legibles */
  #page-detalle .tw[data-detail-view="cliente"] {
    overflow-x: hidden !important;
    border-radius: 16px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(4),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(4),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(5),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(5) {
    display: none !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(1),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(1) {
    width: 31% !important;
    padding-left: 11px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(2),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(2) {
    width: 15% !important;
    text-align: right !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(3),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(3) {
    width: 19% !important;
    text-align: right !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(6),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(6) {
    width: 35% !important;
    padding-right: 10px !important;
    text-align: right !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] thead th {
    padding: 10px 3px !important;
    font-size: 8.2px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    overflow: visible !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-head-wrap {
    gap: 3px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-head-sort {
    justify-content: flex-start !important;
    min-width: 0 !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(2) .detail-head-sort,
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(3) .detail-head-sort,
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(6) .detail-head-sort {
    justify-content: flex-end !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-head-sort span:first-child {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-head-filter {
    width: 17px !important;
    min-width: 17px !important;
    height: 24px !important;
    border-radius: 8px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-head-sortstate {
    font-size: 8px !important;
    transform: translateY(-1px);
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] tbody td {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    font-size: 10.5px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-data-row--toggle {
    cursor: pointer;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-data-row--toggle:active,
  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-data-row--toggle.is-expanded {
    background: rgba(96, 165, 250, .07) !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-client-toggle__label {
    gap: 5px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-client-toggle__caret {
    color: #e8ad55 !important;
    font-size: 10px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(6) .metric-meter {
    min-height: 24px !important;
    padding: 2px 7px !important;
    gap: 5px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(6) .metric-meter__value {
    font-size: 10px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(6) .metric-meter__pct {
    font-size: 8.4px !important;
  }

  /* Cliente expandido mobile */
  .detail-client-breakdown-row td {
    padding: 0 !important;
  }

  .mbk-root {
    border-top: 1px solid rgba(96, 165, 250, .16) !important;
    border-bottom: 2px solid #f0a840 !important;
    background: linear-gradient(180deg, #0b1728 0%, #08111d 100%) !important;
  }

  .mbk-head {
    position: sticky;
    top: 0;
    z-index: 4;
    background: rgba(10, 20, 35, .96) !important;
    backdrop-filter: none;
  }

  .mbk-title {
    font-size: 12.5px !important;
    letter-spacing: .01em;
  }

  .mbk-pill {
    font-size: 9px !important;
    padding: 3px 9px !important;
  }

  .mbk-filter-pill {
    margin: 8px 10px 0;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(240,168,64,.35);
    background: rgba(240,168,64,.12);
    color: #ffd086;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .02em;
  }

  .mbk-filter-pill[hidden] {
    display: none !important;
  }

  .mbk-tab {
    min-height: 42px !important;
    font-size: 10.5px !important;
  }

  .mbk-tab.has-filter {
    color: #f5c46d !important;
    border-bottom-color: #f0a840 !important;
  }

  .mbk-pane {
    padding: 10px 10px 14px !important;
  }

  .mbk-fam-card[hidden],
  .mbk-prod-item[hidden] {
    display: none !important;
  }

  .mbk-fam-card {
    margin-bottom: 9px !important;
    border-radius: 0 13px 13px 0 !important;
    background: rgba(15, 28, 49, .94) !important;
    box-shadow: 0 8px 22px rgba(2, 6, 23, .16);
  }

  .mbk-fam-header {
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 11px 8px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  .mbk-fam-header[aria-expanded="true"] .mbk-fam-caret {
    transform: rotate(90deg);
  }

  .mbk-fam-name {
    font-size: 11px !important;
    letter-spacing: .01em;
  }

  .mbk-fam-metrics {
    gap: 6px !important;
    padding: 0 11px 9px !important;
  }

  .mbk-fam-m {
    border: 1px solid rgba(148, 163, 184, .08);
    padding: 6px 4px !important;
  }

  .mbk-fam-prods[hidden] {
    display: none !important;
  }

  .mbk-fam-prods {
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
  }

  .mbk-prod-item {
    min-height: 28px;
  }

  .mbk-cal-hint {
    color: #93b9e8 !important;
    border-color: rgba(96, 165, 250, .22) !important;
    background: rgba(37, 99, 235, .08) !important;
  }

  .mbk-cal-wrap {
    border-color: rgba(96, 165, 250, .18) !important;
    background: rgba(10, 20, 35, .94) !important;
  }

  .mbk-cal-nav-btn {
    border: 1px solid rgba(148, 163, 184, .14) !important;
    background: rgba(15, 23, 42, .84) !important;
  }

  .mbk-cal-cell {
    border-radius: 8px !important;
    min-height: 31px !important;
  }

  .mbk-cal-cell.has-data {
    color: #e3edf9 !important;
    background: rgba(59, 130, 246, .14) !important;
    border-color: rgba(96, 165, 250, .28) !important;
  }

  .mbk-cal-cell.selected,
  .mbk-cal-cell.is-selected {
    color: #07111f !important;
    background: linear-gradient(135deg, #f0a840, #ffd486) !important;
    border-color: rgba(255, 212, 134, .9) !important;
    box-shadow: 0 0 0 2px rgba(240, 168, 64, .13);
  }

  .mbk-cal-cell:disabled {
    opacity: .42;
  }

  .mbk-cal-actions {
    margin-top: 9px !important;
  }

  .mbk-cal-btn-clear {
    color: #f4c777 !important;
    border-color: rgba(240,168,64,.28) !important;
    background: rgba(240,168,64,.08) !important;
  }

  .mbk-cal-sel-lbl {
    color: #9dc5f5 !important;
    font-weight: 700;
  }

  .mbk-empty--filtered {
    border: 1px dashed rgba(148,163,184,.2);
    border-radius: 12px;
    margin-top: 8px;
    padding: 14px 10px !important;
    background: rgba(15, 23, 42, .42);
  }
}

@media (max-width: 389px) {
  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(1),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(1) {
    width: 30% !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(2),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(2) {
    width: 15% !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(3),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(3) {
    width: 20% !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] th:nth-child(6),
  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(6) {
    width: 35% !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] thead th {
    font-size: 7.7px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] .detail-head-filter {
    width: 15px !important;
    min-width: 15px !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="cliente"] td:nth-child(6) .metric-meter__pct {
    display: none !important;
  }
}


/* ══ css/desktop.css (media (min-width: 768px)) ══ */
@media (min-width: 768px) {
/* =============================================================================
   DESKTOP-VISUAL-V65
   Capa final de profesionalizacion visual desktop.

   Alcance:
   - Solo se activa en pantallas >= 768px.
   - No modifica la experiencia mobile corregida en mobile-detail-v64.css.
   - Consolida criterios visuales de desktop sin eliminar archivos historicos.
   ============================================================================= */

@media (min-width: 768px) {
  :root {
    --desktop-shell-max: min(1440px, calc(100vw - 48px));
    --desktop-shell-pad-x: 24px;
    --desktop-section-gap: 18px;
    --desktop-card-bg: linear-gradient(180deg, rgba(23, 32, 51, 0.96), rgba(13, 20, 34, 0.94));
    --desktop-card-bg-soft: linear-gradient(180deg, rgba(26, 38, 62, 0.82), rgba(12, 19, 33, 0.76));
    --desktop-card-border: rgba(151, 171, 210, 0.16);
    --desktop-card-border-strong: rgba(214, 167, 86, 0.28);
    --desktop-card-shadow: 0 16px 42px rgba(2, 8, 23, 0.24), 0 1px 0 rgba(255,255,255,0.035) inset;
    --desktop-card-shadow-soft: 0 8px 26px rgba(2, 8, 23, 0.18);
    --desktop-control-bg: rgba(9, 15, 27, 0.74);
    --desktop-control-border: rgba(151, 171, 210, 0.16);
    --desktop-table-head-bg: linear-gradient(180deg, rgba(31, 48, 80, 0.98), rgba(18, 30, 52, 0.98));
    --desktop-table-row-bg: rgba(11, 18, 32, 0.28);
    --desktop-table-row-alt: rgba(255,255,255,0.022);
    --desktop-table-row-hover: rgba(214, 167, 86, 0.085);
    --desktop-text-strong: #f1f6ff;
    --desktop-text: #dbe6f4;
    --desktop-text-soft: #9aaec8;
  }

  html {
    scroll-padding-top: 172px;
  }

  body {
    background:
      radial-gradient(circle at 16% -12%, rgba(110, 168, 254, 0.14), transparent 34vw),
      radial-gradient(circle at 86% -10%, rgba(214, 167, 86, 0.11), transparent 32vw),
      linear-gradient(180deg, #08101e 0%, #0b1220 40%, #08101b 100%) !important;
    color: var(--desktop-text);
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.42), transparent 68%);
    z-index: -1;
  }

  .hdr,
  .filter-panel,
  .tabs-bar {
    backdrop-filter: none saturate(1.08);
    -webkit-backdrop-filter: none saturate(1.08);
  }

  .hdr {
    background: rgba(8, 13, 24, 0.86) !important;
    border-bottom: 1px solid rgba(151, 171, 210, 0.14) !important;
    box-shadow: 0 10px 34px rgba(0,0,0,0.18);
  }

  .hdr .logo {
    letter-spacing: 0.16em;
    color: var(--desktop-text-strong);
  }

  .bcra-pill,
  .pill-status,
  .theme-toggle {
    border-color: rgba(151, 171, 210, 0.15) !important;
    background: rgba(9, 15, 27, 0.72) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }

  .filter-panel {
    background: linear-gradient(180deg, rgba(12, 19, 34, 0.94), rgba(9, 15, 27, 0.86)) !important;
    border-bottom: 1px solid rgba(151, 171, 210, 0.14) !important;
  }

  .fp-inner,
  .wrap,
  .page-hero {
    max-width: var(--desktop-shell-max) !important;
  }

  .wrap {
    padding: 20px var(--desktop-shell-pad-x) 28px !important;
  }

  .fp-inner {
    padding: 14px var(--desktop-shell-pad-x) 12px !important;
  }

  .fp-top {
    align-items: center;
    gap: 14px;
    margin-bottom: 12px !important;
  }

  .fp-main-controls {
    gap: 8px !important;
  }

  .pbtn,
  .btn-xs,
  .table-action-btn,
  .hero-chip,
  .acsum-mode-btn,
  .acsum-view-btn,
  .freq-mode-btn,
  .freq-view-btn {
    min-height: 34px;
    border-radius: 999px !important;
    border-color: rgba(151, 171, 210, 0.16) !important;
    background: var(--desktop-control-bg) !important;
    color: var(--desktop-text) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
  }

  .pbtn:hover,
  .btn-xs:hover,
  .table-action-btn:hover,
  .hero-chip--action:hover,
  .acsum-mode-btn:hover,
  .acsum-view-btn:hover,
  .freq-mode-btn:hover,
  .freq-view-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(214, 167, 86, 0.36) !important;
    background: rgba(214, 167, 86, 0.10) !important;
    color: #f8dfaa !important;
  }

  .pbtn.on,
  .tab.on,
  .acsum-mode-btn.on,
  .acsum-view-btn.on,
  .freq-mode-btn.on,
  .freq-view-btn.on {
    color: #f8dfaa !important;
    border-color: rgba(214, 167, 86, 0.42) !important;
    background: linear-gradient(180deg, rgba(214, 167, 86, 0.18), rgba(214, 167, 86, 0.08)) !important;
  }

  .date-pair,
  .sel-wrap,
  .search-box,
  .search-dd,
  .detail-toolbar-presets,
  .detail-toolbar-favorites,
  .detail-toolbar-advanced,
  .detail-toolbar-meta--context,
  .freq-toolbar,
  .acsum-toolbar,
  .freq-seg-shell,
  .freq-meta,
  .acsum-meta {
    border-color: var(--desktop-control-border) !important;
    background: rgba(9, 15, 27, 0.52) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  }

  .fp-selects {
    grid-template-columns: minmax(160px, 0.95fr) minmax(160px, 0.95fr) minmax(260px, 1.45fr) minmax(170px, 1fr) minmax(150px, .85fr) minmax(145px, .8fr) minmax(230px, 1.25fr) !important;
    gap: 10px !important;
  }

  .sel-wrap {
    padding: 10px 11px !important;
    border-radius: 16px !important;
  }

  .sel-lbl {
    margin-bottom: 7px !important;
    color: var(--desktop-text-soft) !important;
    letter-spacing: .72px !important;
  }

  .snum {
    background: rgba(214, 167, 86, 0.13) !important;
    border: 1px solid rgba(214, 167, 86, 0.25) !important;
    color: #f6d89b !important;
  }

  select,
  input,
  textarea {
    border-color: rgba(151, 171, 210, 0.16) !important;
    background-color: rgba(7, 12, 22, 0.72) !important;
    color: var(--desktop-text) !important;
  }

  select:focus,
  input:focus,
  textarea:focus {
    border-color: rgba(214, 167, 86, 0.48) !important;
    box-shadow: 0 0 0 3px rgba(214, 167, 86, 0.12) !important;
  }

  .pills {
    padding-top: 2px;
  }

  .pills .pill,
  .search-chips .chip,
  .detail-toolbar-pill,
  .freq-meta-pill,
  .acsum-meta-pill {
    border-color: rgba(151, 171, 210, 0.16) !important;
    background: rgba(12, 19, 34, 0.68) !important;
    color: var(--desktop-text-soft) !important;
  }

  .tabs-bar {
    justify-content: center;
    gap: 8px;
    padding: 10px var(--desktop-shell-pad-x) !important;
    background: rgba(8, 13, 24, 0.72) !important;
    border-bottom: 1px solid rgba(151, 171, 210, 0.12) !important;
  }

  .tab {
    border: 1px solid rgba(151, 171, 210, 0.12) !important;
    border-radius: 999px !important;
    padding: 9px 15px !important;
    background: rgba(9, 15, 27, 0.42);
    color: #9fb0c4 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: .12px;
  }

  .tab:hover {
    color: #dbe8ff !important;
    background: rgba(255,255,255,0.045) !important;
    transform: translateY(-1px);
  }

  .tab.on {
    box-shadow: 0 8px 24px rgba(214, 167, 86, 0.10), inset 0 1px 0 rgba(255,255,255,0.05);
  }

  .page-hero-shell {
    background: linear-gradient(180deg, rgba(16, 26, 45, 0.78), rgba(8, 13, 24, 0.38)) !important;
    border-bottom: 1px solid rgba(151, 171, 210, 0.10) !important;
  }

  .page-hero {
    padding: 22px var(--desktop-shell-pad-x) 20px !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, auto) !important;
  }

  .page-hero-eyebrow {
    color: #f1d69b !important;
    letter-spacing: 1.5px !important;
  }

  .page-hero-title {
    color: var(--desktop-text-strong) !important;
    font-size: clamp(30px, 2.4vw, 42px) !important;
    line-height: 0.98 !important;
    letter-spacing: -1.35px !important;
  }

  .page-hero-copy {
    color: #a9b9d0 !important;
    max-width: 76ch !important;
  }

  .page-hero-meta {
    justify-content: flex-end;
  }

  .hero-chip {
    padding: 8px 12px !important;
  }

  .hero-chip--soft {
    border-color: rgba(110, 168, 254, 0.24) !important;
    background: rgba(110, 168, 254, 0.10) !important;
    color: #d4e4ff !important;
  }

  .kpi-row {
    gap: 14px !important;
    margin-bottom: 16px !important;
  }

  .kpi,
  .card,
  .story-card,
  .proj-hero-card,
  .projection-hierarchy-card,
  .projection-family-summary-card,
  .projection-product-card,
  .acum-card,
  .detail-trend-card {
    border-radius: 20px !important;
    border-color: var(--desktop-card-border) !important;
    background: var(--desktop-card-bg) !important;
    box-shadow: var(--desktop-card-shadow-soft) !important;
  }

  .kpi {
    min-height: 104px;
    padding: 17px 18px !important;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  }

  .kpi:hover {
    transform: translateY(-2px);
    border-color: rgba(214, 167, 86, 0.22) !important;
    box-shadow: var(--desktop-card-shadow) !important;
  }

  .kpi::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 100% 0%, rgba(255,255,255,0.08), transparent 34%);
    opacity: .72;
  }

  .kpi-lbl {
    color: #93a7c1 !important;
    font-size: 10px !important;
    letter-spacing: 1.05px !important;
  }

  .kpi-val {
    color: var(--desktop-text-strong);
    font-size: clamp(24px, 2.15vw, 34px) !important;
    letter-spacing: -1.25px !important;
  }

  .detail-strip-head {
    margin: 4px 0 10px !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(151, 171, 210, 0.14);
    border-radius: 20px;
    background: var(--desktop-card-bg-soft);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  }

  .grupo-strip-lbl {
    color: var(--desktop-text-strong) !important;
    font-size: 12px !important;
    letter-spacing: .9px !important;
  }

  .grupo-strip-hint {
    color: var(--desktop-text-soft) !important;
  }

  .grupo-strip {
    padding: 2px 2px 8px !important;
    gap: 10px !important;
    scrollbar-gutter: stable;
  }

  .gk,
  .grp-card,
  .projection-family-card,
  .proj-hero-item,
  .story-card {
    border-color: rgba(151, 171, 210, 0.14) !important;
    background: var(--desktop-card-bg-soft) !important;
    box-shadow: 0 8px 24px rgba(2, 8, 23, 0.14) !important;
  }

  .gk:hover,
  .grp-card:hover,
  .projection-family-card:hover,
  .proj-hero-item:hover,
  .story-card:hover {
    transform: translateY(-2px);
    border-color: rgba(214, 167, 86, 0.26) !important;
    box-shadow: var(--desktop-card-shadow-soft) !important;
  }

  .gk.active,
  .grp-card.active,
  [data-detail-group].active {
    border-color: rgba(214, 167, 86, 0.48) !important;
    box-shadow: 0 0 0 1px rgba(214, 167, 86, 0.16), 0 12px 30px rgba(214, 167, 86, 0.08) !important;
  }

  .card > .ch,
  .story-card > .ch,
  .projection-hierarchy-card > .ch,
  .projection-family-summary-card > .ch,
  .projection-family-card > .ch,
  .projection-product-card > .ch {
    min-height: 52px;
    padding: 15px 18px !important;
    background: linear-gradient(180deg, rgba(28, 42, 68, 0.94), rgba(17, 28, 49, 0.92)) !important;
    border-bottom: 1px solid rgba(151, 171, 210, 0.14) !important;
  }

  .card > .ch .ct,
  .story-card > .ch .ct,
  .projection-hierarchy-card > .ch .ct,
  .projection-family-summary-card > .ch .ct,
  .projection-family-card > .ch .ct,
  .projection-product-card > .ch .ct,
  #acumExplorerTitle,
  #freqTitle {
    color: var(--desktop-text-strong) !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
  }

  .cbadge,
  .card > .ch .cbadge,
  #acumExplorerBadge,
  #freqBadge {
    padding: 5px 10px !important;
    border-color: rgba(151, 171, 210, 0.17) !important;
    background: rgba(9, 15, 27, 0.54) !important;
    color: #b8c7dc !important;
  }

  .detail-toolbar {
    padding: 14px 16px !important;
    background: linear-gradient(180deg, rgba(8, 14, 26, 0.50), rgba(8, 14, 26, 0.26)) !important;
    border-bottom-color: rgba(151, 171, 210, 0.12) !important;
  }

  .detail-toolbar-section-title {
    color: #f1d69b !important;
    letter-spacing: 1px !important;
  }

  .detail-toolbar-tip,
  .snote,
  .detail-chart-note {
    color: var(--desktop-text-soft) !important;
  }

  .detail-preset-row--rail {
    gap: 8px !important;
  }

  .tw {
    border-radius: 0 0 20px 20px !important;
    background: rgba(8, 13, 24, 0.24);
  }

  table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  thead th,
  .card table thead th,
  #page-frecuencia .freq-table thead th,
  #page-resumen-acum .acsum-table thead th,
  #page-acumulados .acum-table thead th,
  #page-proyeccion .projection-hierarchy-table thead th,
  #page-proyeccion .projection-family-summary-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    height: 38px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    background: var(--desktop-table-head-bg) !important;
    color: #dbe8ff !important;
    border-bottom: 1px solid rgba(151, 171, 210, 0.18) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: .84px !important;
  }

  tbody td,
  #page-frecuencia .freq-table td,
  #page-resumen-acum .acsum-table td,
  #page-acumulados .acum-table td,
  #page-proyeccion .projection-hierarchy-table td,
  #page-proyeccion .projection-family-summary-table td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    color: #d7e1ee;
    border-bottom: 1px solid rgba(151, 171, 210, 0.075) !important;
  }

  tbody tr:nth-child(even) {
    background: var(--desktop-table-row-alt) !important;
  }

  tbody tr:hover,
  #page-frecuencia .freq-table tbody tr:hover,
  #page-resumen-acum .acsum-table tbody tr:hover,
  #page-acumulados .acum-table tbody tr:hover,
  #page-proyeccion .projection-hierarchy-table tbody tr:hover,
  #page-proyeccion .projection-family-summary-table tbody tr:hover {
    background: var(--desktop-table-row-hover) !important;
  }

  tbody tr:hover td {
    color: var(--desktop-text-strong) !important;
  }

  tfoot td,
  tfoot th,
  .row-total td,
  .acsum-row-total td,
  .freq-row-total td {
    background: rgba(214, 167, 86, 0.10) !important;
    border-top: 1px solid rgba(214, 167, 86, 0.24) !important;
    color: #f4d697 !important;
    font-weight: 800 !important;
  }

  .detail-col-menu,
  .search-dd {
    border-color: rgba(214, 167, 86, 0.20) !important;
    background: rgba(7, 12, 22, 0.98) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.40) !important;
  }

  .daily-compare-shell,
  .daily-compare-wrap,
  .lc-wrap,
  .hbars,
  .donut-wrap {
    border-color: rgba(151, 171, 210, 0.12) !important;
    background: rgba(7, 12, 22, 0.30) !important;
    border-radius: 18px !important;
  }

  .hbars {
    padding: 16px !important;
  }

  .hb-row {
    display: grid !important;
    grid-template-columns: minmax(180px, 1.4fr) minmax(160px, 2fr) minmax(86px, auto) !important;
    gap: 13px !important;
    padding: 9px 0 !important;
  }

  .hb-name {
    width: auto !important;
    min-width: 0 !important;
  }

  .hb-track {
    height: 9px !important;
    border-radius: 99px !important;
    background: rgba(255,255,255,0.075) !important;
  }

  .hb-fill {
    border-radius: 99px !important;
    box-shadow: 0 0 18px rgba(214, 167, 86, 0.10);
  }

  .hb-name,
  .dl-name {
    color: var(--desktop-text) !important;
  }

  .chart-empty,
  .empty {
    color: var(--desktop-text-soft) !important;
  }

  .charts-grid {
    gap: 16px !important;
  }

  @media (min-width: 1180px) {
    .charts-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #page-graficos .detail-trend-card,
    #page-graficos .card:has(#gLinea),
    #page-graficos .card:has(#gClie) {
      grid-column: 1 / -1;
    }
  }

  .proj-hero-card,
  .projection-family-summary-card,
  .projection-hierarchy-card,
  .acum-explorer-card {
    margin-bottom: 16px !important;
  }

  .proj-hero-grid,
  .acum-grid,
  .story-grid {
    gap: 16px !important;
  }

  .projection-hierarchy-toolbar,
  .freq-toolbar,
  .acsum-toolbar {
    border-radius: 18px !important;
    padding: 13px 15px !important;
    margin-bottom: 12px !important;
  }

  .freq-seg-shell,
  .freq-meta,
  .acsum-meta {
    border-radius: 18px !important;
    padding: 10px 12px !important;
  }

  .freq-seg-pill,
  .freq-seg-badge {
    border-radius: 999px !important;
  }

  #aiFab {
    box-shadow: 0 18px 44px rgba(214, 167, 86, 0.26), 0 0 0 1px rgba(255,255,255,0.08) inset !important;
  }

  #aiPanel {
    border-color: rgba(151, 171, 210, 0.18) !important;
    background: linear-gradient(180deg, rgba(15, 24, 41, 0.98), rgba(7, 12, 22, 0.98)) !important;
    box-shadow: 0 22px 66px rgba(0,0,0,0.48) !important;
  }

  .ai-msg,
  .ai-quick-shell,
  .ai-foot {
    border-color: rgba(151, 171, 210, 0.13) !important;
  }

  .mobile-dock {
    display: none !important;
  }

  @supports not selector(:has(*)) {
    #page-graficos .detail-trend-card {
      grid-column: 1 / -1;
    }
  }
}

@media (min-width: 1280px) {
  .detail-toolbar-main,
  .detail-toolbar-main--compact {
    grid-template-columns: minmax(280px, 1.55fr) repeat(3, minmax(150px, .68fr)) auto !important;
  }

  .detail-toolbar-secondary {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .85fr) !important;
  }

  .card,
  .kpi,
  .detail-strip-head,
  .freq-toolbar,
  .acsum-toolbar {
    box-shadow: var(--desktop-card-shadow) !important;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .fp-selects {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .page-hero {
    grid-template-columns: 1fr !important;
  }

  .page-hero-meta {
    justify-content: flex-start;
  }

  .hb-row {
    grid-template-columns: minmax(150px, 1fr) minmax(160px, 1.4fr) minmax(76px, auto) !important;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .kpi,
  .gk,
  .grp-card,
  .tab,
  .pbtn,
  .btn-xs,
  .table-action-btn {
    transition: none !important;
    transform: none !important;
  }
}

/* =============================================================================
   V66 - consolidacion intermedia desktop + correccion de Kilos / %
   - desktop.css reemplaza a desktop-visual-v65.css como capa final desktop.
   - Se preservan tokens/base/componentes historicos como soporte.
   - La columna % queda separada de Kilos en Detalle, Grupo, Producto y Fecha.
   ============================================================================= */

@media (min-width: 768px) {
  #page-detalle table.responsive-stack[data-detail-view="detalle"],
  #page-detalle table.responsive-stack[data-detail-view="grupo"],
  #page-detalle table.responsive-stack[data-detail-view="producto"],
  #page-detalle table.responsive-stack[data-detail-view="fecha"] {
    table-layout: fixed;
    min-width: 1180px;
  }

  #page-detalle table.responsive-stack .detail-head--Kilos,
  #page-detalle table.responsive-stack .detail-cell--Kilos,
  #page-detalle table.responsive-stack .detail-total-kilos {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
  }

  #page-detalle table.responsive-stack .detail-head--Participacion,
  #page-detalle table.responsive-stack .detail-cell--Participacion,
  #page-detalle table.responsive-stack .detail-total-pct {
    width: 76px;
    min-width: 76px;
    max-width: 76px;
    text-align: right !important;
  }

  #page-detalle table.responsive-stack .detail-head--Participacion .detail-head-wrap {
    justify-content: flex-end;
    gap: 4px;
  }

  #page-detalle table.responsive-stack .detail-head-filter--placeholder {
    visibility: hidden;
    pointer-events: none;
    flex: 0 0 20px;
    width: 20px;
    min-width: 20px;
  }

  #page-detalle table.responsive-stack .detail-cell--Kilos .detail-copy-cell,
  #page-detalle table.responsive-stack .detail-cell--Participacion .detail-copy-cell {
    width: 100%;
    min-width: 0;
    justify-content: flex-end;
  }

  #page-detalle table.responsive-stack .detail-cell--Kilos .metric-meter {
    width: 100%;
    min-width: 118px;
    max-width: 132px;
    margin-left: auto;
    padding-right: 12px;
  }

  #page-detalle table.responsive-stack .detail-cell--Kilos .metric-meter__pct {
    display: none !important;
  }

  #page-detalle table.responsive-stack .detail-cell--Kilos .metric-meter__value {
    font-size: 12px;
    line-height: 1;
  }

  #page-detalle table.responsive-stack .detail-cell--Participacion .detail-copy-cell {
    min-height: 28px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid rgba(110, 168, 254, 0.18);
    background: rgba(110, 168, 254, 0.075);
    color: #cfe0ff;
    font-weight: 800;
    letter-spacing: -0.1px;
  }

  #page-detalle table.responsive-stack .detail-pct-value {
    display: inline-block;
    min-width: 48px;
    text-align: right;
    white-space: nowrap;
  }

  #page-detalle table.responsive-stack .detail-grandtotal-row .detail-total-pct,
  #page-detalle table.responsive-stack .detail-summary-row .detail-total-pct,
  #page-detalle table.responsive-stack .detail-subtotal-row .detail-total-pct {
    color: #dbeafe !important;
    background: rgba(110, 168, 254, 0.10) !important;
  }

  #page-detalle table.responsive-stack[data-detail-view="detalle"] .detail-head--Fecha,
  #page-detalle table.responsive-stack[data-detail-view="fecha"] .detail-head--Fecha,
  #page-detalle table.responsive-stack[data-detail-view="detalle"] .detail-cell--Fecha,
  #page-detalle table.responsive-stack[data-detail-view="fecha"] .detail-cell--Fecha {
    width: 132px;
    min-width: 132px;
  }

  #page-detalle table.responsive-stack[data-detail-view="detalle"] .detail-head--Cod_Producto,
  #page-detalle table.responsive-stack[data-detail-view="producto"] .detail-head--Cod_Producto,
  #page-detalle table.responsive-stack[data-detail-view="detalle"] .detail-cell--Cod_Producto,
  #page-detalle table.responsive-stack[data-detail-view="producto"] .detail-cell--Cod_Producto {
    width: 122px;
    min-width: 122px;
  }

  #page-detalle table.responsive-stack[data-detail-view="detalle"] .detail-head--Cliente,
  #page-detalle table.responsive-stack[data-detail-view="detalle"] .detail-cell--Cliente {
    width: 33%;
  }

  #page-detalle table.responsive-stack[data-detail-view="detalle"] .detail-head--Producto_Desc,
  #page-detalle table.responsive-stack[data-detail-view="detalle"] .detail-cell--Producto_Desc {
    width: 25%;
  }

  #page-detalle table.responsive-stack[data-detail-view="detalle"] .detail-head--Grupo_Familia,
  #page-detalle table.responsive-stack[data-detail-view="detalle"] .detail-cell--Grupo_Familia {
    width: 160px;
  }
}

/* =============================================================================
   v68-v72 — Ajustes intermedios de UX de tablas y QA visual desktop.
   Mantiene mobile aislado en mobile-detail-v64.css.
   ============================================================================= */
@media (min-width: 768px) {
  .detail-head.is-filtered {
    background: linear-gradient(180deg, rgba(214, 167, 86, 0.19), rgba(22, 34, 56, 0.98)) !important;
    box-shadow: inset 0 -2px 0 rgba(214, 167, 86, 0.42), inset 0 1px 0 rgba(255,255,255,0.06);
  }

  .detail-head.is-filtered .detail-head-sort span:first-child::after {
    content: " filtrado";
    display: inline-flex;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(214, 167, 86, 0.18);
    color: #f8dfaa;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
  }

  .detail-head-filtercount {
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(214, 167, 86, 0.28) !important;
    color: #ffe2a7 !important;
    font-weight: 900;
  }

  .detail-filter-chip {
    transition: transform .14s ease, border-color .14s ease, background .14s ease;
  }

  .detail-filter-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(214, 167, 86, 0.42) !important;
    background: rgba(214, 167, 86, 0.12) !important;
  }

  .detail-toolbar-pill strong,
  .detail-glance-card__value {
    font-variant-numeric: tabular-nums;
  }

  .detail-col-menu__meta {
    border-radius: 12px;
    padding: 6px 8px;
    background: rgba(110, 168, 254, 0.08);
    border: 1px solid rgba(110, 168, 254, 0.14);
  }

  .api-diagnostics-panel {
    font-variant-numeric: tabular-nums;
  }
}


/* v69-v72: UX avanzada de tablas y limpieza visual controlada */
@media (min-width: 768px) {
  .detail-toolbar-filters-row{
    align-items:center;
    background:linear-gradient(180deg, rgba(248,250,252,.92), rgba(241,245,249,.78));
    border:1px solid rgba(148,163,184,.28);
    border-radius:16px;
    padding:10px 12px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  }

  .detail-filter-chip--column{
    border-color:rgba(99,102,241,.28);
    background:rgba(99,102,241,.08);
    color:#334155;
  }

  .detail-head.is-filtered{
    background:linear-gradient(180deg, rgba(254,243,199,.96), rgba(253,230,138,.76));
    box-shadow:inset 0 -2px 0 rgba(217,119,6,.34);
  }

  .detail-head.is-filtered .detail-head-sort span:first-child::after{
    content:" filtrada";
    margin-left:6px;
    font-size:10px;
    font-weight:800;
    color:#92400e;
    text-transform:uppercase;
    letter-spacing:.04em;
  }

  .detail-head.is-sorted{
    box-shadow:inset 0 -2px 0 rgba(37,99,235,.34);
  }

  .detail-head-sortstate{
    min-width:30px;
    justify-content:center;
    border-radius:999px;
    background:rgba(37,99,235,.10);
    color:#1d4ed8;
  }

  .detail-column-visibility{
    grid-column:1 / -1;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:12px;
    border:1px solid rgba(148,163,184,.22);
    border-radius:16px;
    background:linear-gradient(180deg, rgba(15,23,42,.88), rgba(8,13,24,.94));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 12px 26px rgba(0,0,0,.22);
  }

  .detail-column-visibility__grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
    gap:8px;
  }

  .detail-column-visibility__item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border:1px solid rgba(148,163,184,.22);
    border-radius:12px;
    background:rgba(17,24,39,.86);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    font-size:12px;
    color:#dbe7f7;
  }

  .detail-column-visibility__item:hover{
    border-color:rgba(214,167,86,.34);
    background:rgba(23,32,48,.92);
  }

  .detail-column-visibility__item input{
    accent-color:#2563eb;
  }

  .detail-column-visibility__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:#a9b7cc;
    font-size:12px;
  }

  .detail-column-visibility .detail-toolbar-tip{
    color:#91a4c1!important;
  }

  .detail-tool-btn--sm{
    padding:6px 10px;
    min-height:30px;
    font-size:12px;
  }

  .metric-meter__pct{
    display:none !important;
  }
}
/* =============================================================================
   v70 — eficiencia visual, filtros tipo BI y contención de popovers desktop.
   Esta capa es aditiva, no elimina reglas históricas y mantiene mobile aislado.
   ============================================================================= */
@media (min-width: 768px) {
  .detail-toolbar-filters-row {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    color:var(--desktop-text, #dbe6f4) !important;
    background:linear-gradient(180deg, rgba(15,24,41,.90), rgba(8,13,24,.74)) !important;
    border:1px solid rgba(151,171,210,.18) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045), 0 8px 24px rgba(2,8,23,.12) !important;
  }

  .detail-filter-chip,
  .detail-filter-chip--column,
  .detail-filter-chip--ghost {
    color:var(--desktop-text, #dbe6f4) !important;
    border:1px solid rgba(151,171,210,.20) !important;
    background:rgba(11,18,32,.74) !important;
  }

  .detail-filter-chip:not(.detail-filter-chip--ghost)::after {
    content:" ×";
    color:#f8dfaa;
    font-weight:900;
  }

  .detail-filter-chip--ghost { opacity:.78; }

  .detail-col-menu {
    width:min(360px, calc(100vw - 24px)) !important;
    max-width:min(360px, calc(100vw - 24px)) !important;
    border-radius:18px !important;
    overflow:hidden !important;
    color:var(--desktop-text, #dbe6f4) !important;
    background:linear-gradient(180deg, rgba(10,17,31,.99), rgba(6,10,19,.98)) !important;
    border:1px solid rgba(214,167,86,.24) !important;
  }

  .detail-col-menu::before {
    content:"";
    position:absolute;
    top:-7px;
    left:var(--detail-col-menu-anchor, 28px);
    width:12px;
    height:12px;
    transform:rotate(45deg);
    background:rgba(10,17,31,.99);
    border-left:1px solid rgba(214,167,86,.22);
    border-top:1px solid rgba(214,167,86,.22);
  }

  .detail-col-menu[data-placement="top"]::before {
    top:auto;
    bottom:-7px;
    border-left:0;
    border-top:0;
    border-right:1px solid rgba(214,167,86,.22);
    border-bottom:1px solid rgba(214,167,86,.22);
  }

  .detail-col-menu__head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px 9px;
    background:rgba(214,167,86,.08);
    border-bottom:1px solid rgba(151,171,210,.14);
    font-weight:900;
    letter-spacing:.02em;
  }

  .detail-col-menu__head small {
    flex:0 0 auto;
    max-width:145px;
    padding:3px 8px;
    border-radius:999px;
    color:#f8dfaa;
    background:rgba(214,167,86,.12);
    border:1px solid rgba(214,167,86,.20);
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
  }

  .detail-col-menu__actions,
  .detail-col-menu__footer {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    padding:10px 12px;
  }

  .detail-col-menu__btn {
    border-radius:999px !important;
    border:1px solid rgba(151,171,210,.18) !important;
    background:rgba(15,24,41,.84) !important;
    color:var(--desktop-text, #dbe6f4) !important;
    min-height:30px;
    padding:6px 10px;
  }

  .detail-col-menu__btn:hover {
    border-color:rgba(214,167,86,.42) !important;
    background:rgba(214,167,86,.11) !important;
    color:#f8dfaa !important;
  }

  .detail-col-menu__btn--accent {
    background:linear-gradient(180deg, rgba(214,167,86,.24), rgba(214,167,86,.12)) !important;
    border-color:rgba(214,167,86,.46) !important;
    color:#ffe7b6 !important;
  }

  .detail-col-menu__meta {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin:0 12px 10px;
    color:#a9bad4;
  }

  .detail-col-menu__meta strong {
    flex:0 0 auto;
    color:#cfe0ff;
    font-size:11px;
    font-weight:900;
  }

  .detail-col-menu__searchwrap {
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    align-items:center;
    padding:0 12px 10px;
  }

  .detail-col-menu__search {
    width:100%;
    min-height:34px;
    border-radius:12px !important;
  }

  .detail-col-menu__searchclear {
    width:34px;
    height:34px;
    border-radius:12px;
    border:1px solid rgba(151,171,210,.18);
    background:rgba(15,24,41,.84);
    color:#cfe0ff;
    font-size:18px;
    line-height:1;
    cursor:pointer;
  }

  .detail-col-menu__list {
    max-height:var(--detail-col-menu-list-max-height, 180px) !important;
    overflow:auto;
    padding:4px 8px 8px;
    scrollbar-gutter:stable;
  }

  .detail-col-menu__item {
    display:grid !important;
    grid-template-columns:auto 1fr;
    gap:9px;
    align-items:center;
    padding:8px 9px !important;
    border-radius:11px !important;
    color:var(--desktop-text, #dbe6f4) !important;
  }

  .detail-col-menu__item:hover { background:rgba(110,168,254,.10) !important; }
  .detail-col-menu__item input { accent-color:#d6a756; }

  .detail-col-menu__empty {
    padding:12px;
    color:#9aaec8;
    text-align:center;
  }

  .detail-head.is-filtered .detail-head-sort span:first-child::after {
    content:" filtro" !important;
    background:rgba(214,167,86,.16);
    color:#f8dfaa !important;
  }

  .detail-head.is-sorted .detail-head-sortstate {
    background:rgba(110,168,254,.14) !important;
    color:#cfe0ff !important;
  }
}


/* =============================================================================
   V71 HOTFIX - Dialogos de filtro mas simples, legibles y rapidos
   ============================================================================= */
@media (min-width: 768px) {
  .detail-col-menu {
    width:min(420px, calc(100vw - 24px)) !important;
    max-width:min(420px, calc(100vw - 24px)) !important;
    min-width:min(320px, calc(100vw - 24px)) !important;
    border-radius:16px !important;
    overflow:hidden !important;
    background:#0b1220 !important;
    border:1px solid rgba(151,171,210,.28) !important;
    box-shadow:0 24px 70px rgba(0,0,0,.50), 0 1px 0 rgba(255,255,255,.06) inset !important;
  }

  .detail-col-menu__topbar {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:13px 14px 10px;
    background:linear-gradient(180deg, rgba(30,43,68,.98), rgba(14,23,39,.98));
    border-bottom:1px solid rgba(151,171,210,.18);
  }

  .detail-col-menu__title {
    min-width:0;
    display:grid;
    gap:2px;
  }

  .detail-col-menu__title span {
    font-size:14px;
    font-weight:900;
    color:#f3f7ff;
    letter-spacing:.01em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .detail-col-menu__title small {
    color:#9fb1cc;
    font-size:11px;
    font-weight:750;
  }

  .detail-col-menu__iconbtn {
    width:30px;
    height:30px;
    border-radius:10px;
    border:1px solid rgba(151,171,210,.24);
    background:rgba(8,13,24,.90);
    color:#dce8fa;
    font-size:18px;
    line-height:1;
    cursor:pointer;
  }

  .detail-col-menu__iconbtn:hover,
  .detail-col-menu__searchclear:hover {
    border-color:rgba(214,167,86,.48);
    color:#ffe0a5;
    background:rgba(214,167,86,.12);
  }

  .detail-col-menu__status {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    padding:10px 14px 8px;
    background:rgba(255,255,255,.018);
  }

  .detail-col-menu__badge {
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:3px 9px;
    border-radius:999px;
    background:rgba(214,167,86,.14);
    color:#f8dfaa;
    border:1px solid rgba(214,167,86,.26);
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
  }

  .detail-col-menu__badge--muted {
    background:rgba(110,168,254,.10);
    color:#cfe0ff;
    border-color:rgba(110,168,254,.20);
  }

  .detail-col-menu__hint {
    color:#9fb1cc;
    font-size:11px;
    font-weight:700;
  }

  .detail-col-menu__sortbar {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:7px;
    padding:0 14px 10px;
  }

  .detail-col-menu__sortbar .detail-col-menu__btn {
    min-height:32px;
    padding:6px 8px;
  }

  .detail-col-menu__actions,
  .detail-col-menu__meta,
  .detail-col-menu__head {
    display:none !important;
  }

  .detail-col-menu__searchwrap {
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    align-items:center;
    padding:0 14px 10px !important;
  }

  .detail-col-menu__search {
    min-height:38px !important;
    padding:8px 12px !important;
    border-radius:12px !important;
    background:#111b2d !important;
    border:1px solid rgba(151,171,210,.24) !important;
    color:#eef5ff !important;
  }

  .detail-col-menu__search::placeholder { color:#7f91ad !important; }

  .detail-col-menu__searchclear {
    width:38px !important;
    height:38px !important;
    border-radius:12px !important;
  }

  .detail-col-menu__list {
    max-height:var(--detail-col-menu-list-max-height, 260px) !important;
    overflow:auto !important;
    padding:6px 10px !important;
    background:rgba(7,12,22,.76);
    border-top:1px solid rgba(151,171,210,.10);
    border-bottom:1px solid rgba(151,171,210,.10);
  }

  .detail-col-menu__item {
    display:grid !important;
    grid-template-columns:20px minmax(0, 1fr) !important;
    align-items:center !important;
    gap:10px !important;
    min-height:38px;
    padding:8px 10px !important;
    margin:2px 0;
    border-radius:10px !important;
    color:#e5edf8 !important;
    border:1px solid transparent;
    cursor:pointer;
  }

  .detail-col-menu__item:hover {
    background:rgba(110,168,254,.12) !important;
    border-color:rgba(110,168,254,.18);
  }

  .detail-col-menu__item input {
    width:15px;
    height:15px;
    accent-color:#d6a756;
  }

  .detail-col-menu__item span {
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    font-weight:800;
    letter-spacing:.005em;
  }

  .detail-col-menu__quickbar {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    padding:9px 14px 0;
  }

  .detail-col-menu__linkbtn {
    border:0;
    background:transparent;
    color:#9fc5ff;
    font-weight:850;
    font-size:12px;
    padding:4px 2px;
    cursor:pointer;
  }

  .detail-col-menu__linkbtn:hover { color:#ffe0a5; text-decoration:underline; }

  .detail-col-menu__footer {
    display:flex !important;
    justify-content:flex-end;
    gap:8px;
    padding:10px 14px 14px !important;
    background:#0b1220;
  }

  .detail-col-menu__footer .detail-col-menu__btn {
    min-height:34px;
    padding:7px 13px;
  }

  .detail-col-menu__empty {
    padding:16px 12px !important;
    color:#aabbd1 !important;
    text-align:center;
    font-weight:750;
  }
}

/* v77 - Override desktop: filtro colapsado mas fino y en un solo renglon. */
@media (min-width: 768px) {
  .filter-panel.collapsed .fp-inner{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:10px!important;
    padding:5px 14px!important;
    min-height:44px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    white-space:nowrap!important;
  }
  .filter-panel.collapsed .fp-inner::-webkit-scrollbar{display:none!important;}
  .filter-panel.collapsed .fp-top{
    display:flex!important;
    align-items:center!important;
    gap:0!important;
    width:auto!important;
    margin:0!important;
    flex:0 0 auto!important;
  }
  .filter-panel.collapsed .fp-top-left{
    width:auto!important;
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
  }
  .filter-panel.collapsed #btnToggleFilters,
  .filter-panel.collapsed .btn-toggle{
    width:auto!important;
    min-height:30px!important;
    height:30px!important;
    padding:4px 12px!important;
    border-radius:999px!important;
    font-size:12px!important;
    line-height:1!important;
    flex:0 0 auto!important;
  }
  .filter-panel.collapsed .fp-collapsed-note{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    padding:0!important;
    margin:0!important;
    flex:0 0 auto!important;
  }
  .filter-panel.collapsed .fp-note-pill{
    min-height:30px!important;
    height:30px!important;
    padding:4px 11px!important;
    font-size:11.5px!important;
    line-height:1!important;
    display:inline-flex!important;
    align-items:center!important;
    width:auto!important;
    max-width:none!important;
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }
}

/* v78 - Desktop: solapas mas finas y menos espacio entre filtros y tabs. */
@media (min-width:768px){
  .filter-panel.collapsed{--filter-panel-height:38px!important;}
  .filter-panel.collapsed .fp-inner{
    min-height:36px!important;
    padding-top:3px!important;
    padding-bottom:3px!important;
  }
  .tabs-bar{
    top:calc(var(--filter-panel-height,38px) - 1px)!important;
    min-height:42px!important;
    padding:5px var(--desktop-shell-pad-x)!important;
    gap:6px!important;
    align-items:center!important;
    justify-content:center!important;
    margin-top:0!important;
  }
  .tab{
    min-height:30px!important;
    padding:6px 12px!important;
    font-size:12px!important;
    line-height:1!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
  }
}

}

/* ══ css/ux-v85.css ══ */
/* =============================================================================
   UX-V85.CSS — Mejoras visuales, animaciones y micro-interacciones
   Se carga ÚLTIMO para tener la mayor especificidad.
   Totalmente aditivo: no rompe nada si se elimina.
   ============================================================================= */

/* ═══════════════════════════════════════════════════════════════════════════════
   1. KEYFRAMES CENTRALIZADOS
   ═══════════════════════════════════════════════════════════════════════════════ */

@keyframes ux-page-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ux-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ux-slide-down {
  from { opacity: 0; transform: translateY(-8px) scaleY(0.96); }
  to   { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes ux-chip-pop {
  0%   { opacity: 0; transform: scale(0.78) translateY(4px); }
  70%  { transform: scale(1.06) translateY(-1px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ux-kpi-enter {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ux-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 201, 166, 0.55); }
  50%       { box-shadow: 0 0 0 5px rgba(76, 201, 166, 0); }
}
@keyframes ux-logo-glow {
  0%, 100% { opacity: 1; box-shadow: none; }
  50%       { opacity: 0.75; box-shadow: 0 0 6px var(--acc); }
}
@keyframes ux-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
@keyframes ux-tab-slide-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes ux-hero-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ux-shimmer-sweep {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes ux-progress-glow {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 8px var(--acc); }
}
@keyframes ux-count-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ux-bar-enter {
  from { opacity: 0; transform: scaleX(0); transform-origin: left; }
  to   { opacity: 1; transform: scaleX(1); transform-origin: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2. PAGE TRANSITIONS — contenido de tabs entra con fade + slide
   ═══════════════════════════════════════════════════════════════════════════════ */

.page.on {
  animation: ux-page-enter 0.24s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3. HEADER — glass effect + backdrop blur
   ═══════════════════════════════════════════════════════════════════════════════ */

.hdr {
  backdrop-filter: none saturate(1.4);
  -webkit-backdrop-filter: none saturate(1.4);
  transition: box-shadow var(--dur-base, 180ms) ease;
}
.hdr.scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.32);
}
:root[data-theme="light"] .hdr {
  background: rgba(255, 255, 255, 0.88) !important;
}
:root:not([data-theme="light"]) .hdr {
  background: rgba(17, 24, 39, 0.86) !important;
}

/* Logo accent pulsante */
.logo::before {
  transition: transform 0.2s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)),
              box-shadow 0.2s ease;
  animation: ux-logo-glow 4s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   4. STATUS DOT — pulse mejorado
   ═══════════════════════════════════════════════════════════════════════════════ */

.dot.ok {
  animation: ux-dot-pulse 2.2s ease-in-out infinite !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   5. TABS — indicador animado + hover lift
   ═══════════════════════════════════════════════════════════════════════════════ */

.tab {
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease !important;
}
.tab.on {
  position: relative;
}
.tab.on::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--acc);
  border-radius: 2px 2px 0 0;
  animation: ux-tab-slide-in 0.2s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both;
  transform-origin: left;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   6. KPI CARDS — entrada escalonada + hover elevado
   ═══════════════════════════════════════════════════════════════════════════════ */

.kpi {
  transition: transform 0.2s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
              box-shadow 0.2s ease,
              border-color 0.2s ease !important;
  animation: ux-kpi-enter 0.28s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both;
}

/* stagger por orden */
.kpi-row .kpi:nth-child(1) { animation-delay: 0.04s; }
.kpi-row .kpi:nth-child(2) { animation-delay: 0.08s; }
.kpi-row .kpi:nth-child(3) { animation-delay: 0.12s; }
.kpi-row .kpi:nth-child(4) { animation-delay: 0.16s; }
.kpi-row .kpi:nth-child(5) { animation-delay: 0.20s; }
.kpi-row .kpi:nth-child(6) { animation-delay: 0.24s; }

.kpi:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.30), 0 0 0 1px var(--brd-2, #33435d) !important;
  border-color: var(--brd-2, #33435d) !important;
  z-index: 1;
}
:root[data-theme="light"] .kpi:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12), 0 0 0 1px var(--color-brand-400, rgba(184,135,52,0.28)) !important;
}

/* Accent bar entra con slide */
.kpi::before {
  transition: opacity 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   7. INPUTS & SELECTS — focus glow mejorado
   ═══════════════════════════════════════════════════════════════════════════════ */

select,
input[type=date] {
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
select:focus,
input[type=date]:focus {
  box-shadow: 0 0 0 3px var(--acc-soft, rgba(214,167,86,0.14)) !important;
}

.search-box {
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.search-box:focus-within {
  box-shadow: 0 0 0 3px var(--acc-soft, rgba(214,167,86,0.14)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   8. FILTER PANEL — body animado (requiere .fp-body wrapper en HTML)
   ═══════════════════════════════════════════════════════════════════════════════ */

.fp-body {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.32s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
              opacity 0.22s ease;
  overflow: hidden;
}
.fp-body > * {
  min-height: 0;
  overflow: hidden;
}
.filter-panel.collapsed .fp-body {
  grid-template-rows: 0fr;
  opacity: 0;
}

/* Anular display:none heredado en el body wrapper */
.filter-panel.collapsed .fp-body .fp-selects,
.filter-panel.collapsed .fp-body .pills {
  display: grid !important; /* para .fp-selects */
}
/* pills sigue siendo flex */
.filter-panel.collapsed .fp-body .pills {
  display: flex !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   9. BOTONES — micro-press + hover lift
   ═══════════════════════════════════════════════════════════════════════════════ */

.pbtn,
.btn-xs,
.ds-btn {
  transition: all 0.15s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) !important;
}
.pbtn:hover,
.btn-xs:hover {
  transform: translateY(-1px);
}
.pbtn:active,
.btn-xs:active,
.ds-btn:active:not([disabled]) {
  transform: scale(0.96) translateY(0) !important;
}

/* Period pills activos */
.pbtn.on {
  box-shadow: 0 0 0 2px var(--acc-border, rgba(214,167,86,0.34)) inset;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   10. ACTIVE FILTER PILLS — entrada animada
   ═══════════════════════════════════════════════════════════════════════════════ */

.ap {
  animation: ux-chip-pop 0.22s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)) both;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease !important;
}
.ap:hover {
  background: rgba(245, 158, 11, 0.16) !important;
}
.ax {
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}
.ax:hover {
  transform: rotate(90deg) scale(1.2) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   11. DROPDOWN — slide-down animado
   ═══════════════════════════════════════════════════════════════════════════════ */

.search-dd {
  transform-origin: top center;
}
.search-dd.open {
  animation: ux-slide-down 0.18s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both;
}
.search-dd-item {
  transition: background 0.12s ease !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   12. TABLE ROWS — hover con borde izquierdo accent
   ═══════════════════════════════════════════════════════════════════════════════ */

tbody tr {
  transition: background 0.14s ease !important;
  position: relative;
}
tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--acc, #d6a756);
}
tbody tr:hover td {
  background: var(--table-hover-bg, rgba(214,167,86,0.08)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   13. CARDS / SECCIONES — hover lift sutil
   ═══════════════════════════════════════════════════════════════════════════════ */

.card,
.ds-card,
.ds-stat {
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
}
.ds-stat:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-2, 0 8px 24px rgba(2,8,23,0.28)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   14. HERO SECTION — entrada elegante
   ═══════════════════════════════════════════════════════════════════════════════ */

.page-hero-shell {
  animation: ux-hero-enter 0.30s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) 0.06s both;
}
.hero-chip {
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
}
.hero-chip--action:hover {
  transform: translateY(-1px);
}
.hero-chip--action {
  transition: background 0.18s ease, transform 0.18s ease !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   15. PROGRESS BAR — glow pulsante
   ═══════════════════════════════════════════════════════════════════════════════ */

#loadProgressBar {
  transition: width 0.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) !important;
}
#loadProgressBar.active {
  animation: ux-progress-glow 1.8s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   16. OVERLAY / SPINNER DE CARGA — fade-out suave
   ═══════════════════════════════════════════════════════════════════════════════ */

.overlay {
  transition: opacity 0.4s ease, visibility 0.4s ease !important;
}
.overlay.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   17. SCROLLBAR — fina y sutil en brand
   ═══════════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--brd-2, #33435d);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--mut, #94a3b8);
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--color-neutral-600, #c7d2e1);
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-400, #64748b);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   18. EMPTY STATE — icono flotante
   ═══════════════════════════════════════════════════════════════════════════════ */

.ds-empty-icon,
.empty-icon {
  animation: ux-float 3.5s ease-in-out infinite;
  display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   19. BCRA PILL — transición carga → valor
   ═══════════════════════════════════════════════════════════════════════════════ */

.bcra-pill {
  transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease !important;
}
.bcra-pill.loading .bcra-val {
  background: linear-gradient(90deg,
    var(--brd, #253247) 25%,
    var(--brd-2, #33435d) 50%,
    var(--brd, #253247) 75%);
  background-size: 400px 100%;
  animation: ux-shimmer-sweep 1.6s ease-in-out infinite;
  border-radius: 3px;
  color: transparent;
  min-width: 36px;
  display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   20. CHART / BAR — entrada con grow
   ═══════════════════════════════════════════════════════════════════════════════ */

.hb-bar,
.bar-fill,
[class*="bar-"] {
  animation: ux-bar-enter 0.5s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   21. CBADGE — actualización pulsante
   ═══════════════════════════════════════════════════════════════════════════════ */

.cbadge {
  transition: background 0.18s ease, color 0.18s ease !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   22. TOAST / SNACKBAR — mejor pop
   ═══════════════════════════════════════════════════════════════════════════════ */

.toast,
[class*="toast"] {
  animation: ux-chip-pop 0.25s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)) both;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   23. ROW DRAWER — slide-in desde el fondo
   ═══════════════════════════════════════════════════════════════════════════════ */

.row-drawer,
.drawer-panel {
  transition: transform 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
              opacity 0.25s ease !important;
}
.row-drawer.open,
.drawer-panel.open {
  animation: ux-slide-down 0.28s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   24. SKIP LINK — transición suavizada
   ═══════════════════════════════════════════════════════════════════════════════ */

.skip-link {
  transition: top 0.2s ease !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   25. PREFERS-REDUCED-MOTION — respeto total al usuario
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   26. HEADER SCROLL SHADOW — JS añade clase .scrolled via listener
   ═══════════════════════════════════════════════════════════════════════════════ */

/* (selector ya definido en bloque 3, aquí solo el token) */

/* ═══════════════════════════════════════════════════════════════════════════════
   27. FOCUS RING — más visible en toda la app
   ═══════════════════════════════════════════════════════════════════════════════ */

button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--acc-soft, rgba(214,167,86,0.22)),
              0 0 0 1px var(--acc, #d6a756) !important;
  border-radius: var(--rad-sm, 6px);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   28. THEME TOGGLE — spin animado
   ═══════════════════════════════════════════════════════════════════════════════ */

.theme-toggle {
  transition: transform 0.4s var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)),
              background 0.2s ease !important;
}
.theme-toggle:hover {
  transform: rotate(20deg) scale(1.15) !important;
}
.theme-toggle:active {
  transform: rotate(180deg) scale(0.9) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   29. NUMBER VALUE — animación cuando se actualizan KPIs
   ═══════════════════════════════════════════════════════════════════════════════ */

.kpi-val {
  transition: color 0.3s ease !important;
}
.kpi-val.refreshing {
  animation: ux-count-in 0.25s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   30. SELECTS — chevron animado al abrir
   ═══════════════════════════════════════════════════════════════════════════════ */

.sel-wrap select {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}
.sel-wrap select:hover:not(:disabled) {
  border-color: var(--brd-2, #33435d) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   31. FILTER PANEL — fp-main-controls fade
      (para el período y limpiar-todo en la barra superior)
   ═══════════════════════════════════════════════════════════════════════════════ */

.fp-main-controls {
  transition: opacity 0.2s ease !important;
}
#btnClrAll {
  transition: all 0.18s ease !important;
}
#btnClrAll:hover {
  border-color: var(--red, #e07a7a) !important;
  color: var(--red, #e07a7a) !important;
  transform: scale(1.02) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   32. PILL STATUS (header) — entrada sutil
   ═══════════════════════════════════════════════════════════════════════════════ */

.pill-status {
  transition: background 0.25s ease, border-color 0.25s ease !important;
  animation: ux-fade-in 0.4s ease 0.3s both;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   33. LOGO — entrada en la carga inicial
   ═══════════════════════════════════════════════════════════════════════════════ */

.logo {
  animation: ux-fade-in 0.35s ease 0.05s both;
}


/* ══ css/templates.css ══ */
/* =============================================================================
   TEMPLATES.CSS — Sistema de 8 plantillas visuales

   Uso: data-template="<id>" en <html>
   Ids válidos:
     dark                  Oscura Dashboard (default — sin atributo o con "dark")
     sencillez-sofisticada Sencillez sofisticada
     riqueza-triadica      Riqueza triadica profesional
     premium-cobre         Premium mesa de calidad
     professional-light    Clara Profesional
     corporate-blue        Azul Corporativa
     executive-gray        Gris Ejecutivo
     high-contrast         Alto Contraste

   Cada plantilla:
   ─ Sobreescribe las variables de color del design system
   ─ Sincroniza data-theme para los estilos base (light/dark)
   ─ Ajusta body background, headers, borders, accents
   ─ Es autosuficiente: se puede eliminar sin romper nada
   ============================================================================= */

/* ══════════════════════════════════════════════════════════════════════════════
   PLANTILLA 1: OSCURA DASHBOARD (default)
   Descripción: Dark navy, gold accent — la identidad original refinada
   Basada en los tokens existentes, sin overrides necesarios.
══════════════════════════════════════════════════════════════════════════════ */
/* data-template="dark" o sin atributo — ya está definida por tokens.css */


/* ══════════════════════════════════════════════════════════════════════════════
   PLANTILLA 2: CLARA PROFESIONAL
   Descripción: Blanco limpio, fondo gris perla, accent dorado cálido
   Optimizada para presentaciones y entornos bien iluminados
══════════════════════════════════════════════════════════════════════════════ */
:root[data-template="professional-light"] {
  /* Fondos */
  --color-neutral-950: #f4f7fb;
  --color-neutral-900: #ffffff;
  --color-neutral-800: #ffffff;
  --color-neutral-750: #f0f5fb;
  --color-neutral-700: #dce4f0;
  --color-neutral-600: #c8d4e6;
  --color-neutral-400: #5a6e86;
  --color-neutral-300: #3d5068;
  --color-neutral-200: #233047;
  --color-neutral-100: #0d1b2e;

  /* Accent dorado profesional */
  --color-brand-600: #b88734;
  --color-brand-700: #9a7228;
  --color-brand-800: #7c5c20;
  --color-brand-50:  rgba(184, 135, 52, 0.07);
  --color-brand-100: rgba(184, 135, 52, 0.13);
  --color-brand-400: rgba(184, 135, 52, 0.26);
  --color-brand-950: #ffffff;

  /* Variables operativas */
  --bg:          #f4f7fb;
  --surf:        #ffffff;
  --card:        #ffffff;
  --card2:       #f0f5fb;
  --brd:         #dce4f0;
  --brd-2:       #c8d4e6;
  --brd-soft:    #e2eaf5;
  --txt:         #0d1b2e;
  --txt2:        #233047;
  --txt-soft:    #3d5068;
  --mut:         #5a6e86;
  --mut-2:       #7b8fa8;
  --acc:         #b88734;
  --acc-2:       #9a7228;
  --acc-light:   #7c5c20;
  --acc-soft:    rgba(184, 135, 52, 0.07);
  --acc-strong:  rgba(184, 135, 52, 0.13);
  --acc-border:  rgba(184, 135, 52, 0.26);
  --control:     #f5f8fc;
  --control-2:   #edf2f9;
  --panel:       rgba(255, 255, 255, 0.95);
  --panel-2:     rgba(244, 247, 251, 0.98);
  --grad-acc:    linear-gradient(135deg, #b88734 0%, #9a7228 100%);
  --grd-card:    linear-gradient(165deg, #f8fafd 0%, #f0f5fb 100%);

  /* Semánticos en light */
  --intent-success:        #0b9274;
  --intent-success-soft:   rgba(11, 146, 116, 0.08);
  --intent-success-border: rgba(11, 146, 116, 0.22);
  --intent-danger:         #c04f4f;
  --intent-danger-soft:    rgba(192, 79, 79, 0.08);
  --intent-danger-border:  rgba(192, 79, 79, 0.22);
  --intent-info:           #2d5fc7;
  --intent-info-soft:      rgba(45, 95, 199, 0.08);
  --intent-info-border:    rgba(45, 95, 199, 0.22);
  --intent-neutral:        #5a6e86;
  --intent-neutral-soft:   rgba(90, 110, 134, 0.08);
  --grn: #0b9274;
  --red: #c04f4f;
  --blu: #2d5fc7;

  /* Sombras light */
  --shadow-1: 0 1px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 4px 14px rgba(15, 23, 42, 0.09);
  --shadow-3: 0 12px 32px rgba(15, 23, 42, 0.12);

  /* Tabla */
  --table-hover-bg:  rgba(184, 135, 52, 0.07);
  --table-zebra-bg:  rgba(15, 23, 42, 0.016);
  --table-pinned-bg: #ffffff;
  --table-meter-fill: linear-gradient(90deg, rgba(184, 135, 52, 0.25), rgba(184, 135, 52, 0.55));
  --focus-ring: 0 0 0 3px rgba(184, 135, 52, 0.20);
}

:root[data-template="professional-light"] body {
  background: linear-gradient(180deg, #f4f7fb 0%, #edf2f9 100%) !important;
  color: #0d1b2e !important;
}

:root[data-template="professional-light"] .hdr,
:root[data-template="professional-light"] .filter-panel,
:root[data-template="professional-light"] .tabs-bar {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: #dce4f0 !important;
}

:root[data-template="professional-light"] table thead th {
  background: linear-gradient(180deg, #e8f0fb, #dce8f6) !important;
  color: #1a2e4a !important;
  border-bottom-color: #c8d4e6 !important;
}

:root[data-template="professional-light"] .logo::before {
  background: #b88734 !important;
}

:root[data-template="professional-light"] .kpi {
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PLANTILLA 3: AZUL CORPORATIVA
   Descripción: Navy profundo con accent sky-blue frío
   Para entornos corporativos y presentaciones ejecutivas
══════════════════════════════════════════════════════════════════════════════ */
:root[data-template="corporate-blue"] {
  /* Fondos: deep navy */
  --color-neutral-950: #040b18;
  --color-neutral-900: #071020;
  --color-neutral-800: #0b1a30;
  --color-neutral-750: #0e2040;
  --color-neutral-700: #172b52;
  --color-neutral-600: #234070;
  --color-neutral-400: #7ea6d4;
  --color-neutral-300: #9bbede;
  --color-neutral-200: #c6ddf0;
  --color-neutral-100: #eaf3fb;

  /* Accent: sky blue / light blue */
  --color-brand-600: #38bdf8;
  --color-brand-700: #29a7e0;
  --color-brand-800: #90d8fa;
  --color-brand-50:  rgba(56, 189, 248, 0.08);
  --color-brand-100: rgba(56, 189, 248, 0.16);
  --color-brand-400: rgba(56, 189, 248, 0.32);
  --color-brand-950: #04080f;

  /* Variables operativas */
  --bg:          #040b18;
  --surf:        #071020;
  --card:        #0b1a30;
  --card2:       #0e2040;
  --brd:         #172b52;
  --brd-2:       #234070;
  --brd-soft:    #122344;
  --txt:         #eaf3fb;
  --txt2:        #c6ddf0;
  --txt-soft:    #9bbede;
  --mut:         #7ea6d4;
  --mut-2:       #6090ba;
  --acc:         #38bdf8;
  --acc-2:       #29a7e0;
  --acc-light:   #90d8fa;
  --acc-soft:    rgba(56, 189, 248, 0.08);
  --acc-strong:  rgba(56, 189, 248, 0.16);
  --acc-border:  rgba(56, 189, 248, 0.32);
  --control:     #06101e;
  --control-2:   #0a1828;
  --panel:       rgba(7, 16, 32, 0.92);
  --panel-2:     rgba(11, 26, 48, 0.96);
  --grad-acc:    linear-gradient(135deg, #38bdf8 0%, #29a7e0 100%);
  --grd-card:    linear-gradient(165deg, rgba(14, 32, 64, 0.98), rgba(4, 11, 24, 0.98));

  /* Semánticos azul */
  --intent-success:        #30c48e;
  --intent-success-soft:   rgba(48, 196, 142, 0.10);
  --intent-success-border: rgba(48, 196, 142, 0.28);
  --intent-danger:         #e06868;
  --intent-danger-soft:    rgba(224, 104, 104, 0.10);
  --intent-danger-border:  rgba(224, 104, 104, 0.28);
  --intent-info:           #38bdf8;
  --intent-info-soft:      rgba(56, 189, 248, 0.10);
  --intent-info-border:    rgba(56, 189, 248, 0.28);
  --intent-neutral:        #7ea6d4;
  --intent-neutral-soft:   rgba(126, 166, 212, 0.10);
  --grn: #30c48e;
  --red: #e06868;
  --blu: #38bdf8;
  --pur: #a78bfa;
  --tea: #34d4e8;

  /* Sombras */
  --shadow-1: 0 2px 10px rgba(2, 8, 28, 0.24), 0 1px 3px rgba(2, 8, 28, 0.14);
  --shadow-2: 0 8px 28px rgba(2, 8, 28, 0.32);
  --shadow-3: 0 20px 52px rgba(2, 8, 28, 0.42);

  /* Tabla */
  --table-hover-bg:  rgba(56, 189, 248, 0.09);
  --table-zebra-bg:  rgba(255, 255, 255, 0.016);
  --table-pinned-bg: #0b1a30;
  --table-meter-fill: linear-gradient(90deg, rgba(56, 189, 248, 0.26), rgba(56, 189, 248, 0.60));
  --focus-ring: 0 0 0 3px rgba(56, 189, 248, 0.22);

  --visual-title-bg-1: rgba(14, 32, 64, 0.98);
  --visual-title-bg-2: rgba(7, 16, 32, 0.96);
  --visual-title-border: rgba(56, 189, 248, 0.20);
  --visual-title-text: #eaf3fb;
  --visual-head-bg-1: rgba(23, 43, 82, 0.98);
  --visual-head-bg-2: rgba(14, 32, 64, 0.98);
  --visual-head-border: rgba(56, 189, 248, 0.18);
  --visual-head-text: #c6ddf0;
}

:root[data-template="corporate-blue"] body {
  background:
    radial-gradient(ellipse at 10% -10%, rgba(56, 189, 248, 0.14) 0%, transparent 36vw),
    radial-gradient(ellipse at 90% -8%, rgba(56, 189, 248, 0.08) 0%, transparent 32vw),
    linear-gradient(180deg, #040b18 0%, #060e1e 50%, #040a14 100%) !important;
}

:root[data-template="corporate-blue"] .logo::before {
  background: #38bdf8 !important;
}
:root[data-template="corporate-blue"] .logo b {
  color: #38bdf8 !important;
}
:root[data-template="corporate-blue"] .tab.on {
  border-bottom-color: #38bdf8 !important;
  color: #90d8fa !important;
  background: rgba(56, 189, 248, 0.08) !important;
}
:root[data-template="corporate-blue"] .kpi.a::before { background: #38bdf8 !important; }
:root[data-template="corporate-blue"] .kpi.a .kpi-val { color: #90d8fa !important; }
:root[data-template="corporate-blue"] .pbtn.on {
  background: rgba(56, 189, 248, 0.10) !important;
  border-color: rgba(56, 189, 248, 0.30) !important;
  color: #90d8fa !important;
}
:root[data-template="corporate-blue"] .ap {
  background: rgba(56, 189, 248, 0.08) !important;
  border-color: rgba(56, 189, 248, 0.28) !important;
  color: #90d8fa !important;
}
:root[data-template="corporate-blue"] td.num,
:root[data-template="corporate-blue"] td.r {
  color: #90d8fa !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PLANTILLA 4: GRIS EJECUTIVO
   Descripción: Neutral cálido oscuro, accent ámbar/cobre
   Para análisis serio, sin distracciones de color
══════════════════════════════════════════════════════════════════════════════ */
:root[data-template="executive-gray"] {
  /* Fondos: warm dark gray */
  --color-neutral-950: #0e1014;
  --color-neutral-900: #141719;
  --color-neutral-800: #1c2024;
  --color-neutral-750: #222830;
  --color-neutral-700: #2c333d;
  --color-neutral-600: #3c4554;
  --color-neutral-400: #8a9ab0;
  --color-neutral-300: #9eafc4;
  --color-neutral-200: #c2cede;
  --color-neutral-100: #e8ecf2;

  /* Accent: ámbar cálido */
  --color-brand-600: #e2a554;
  --color-brand-700: #d0924a;
  --color-brand-800: #f5ca88;
  --color-brand-50:  rgba(226, 165, 84, 0.08);
  --color-brand-100: rgba(226, 165, 84, 0.15);
  --color-brand-400: rgba(226, 165, 84, 0.30);
  --color-brand-950: #0e1014;

  /* Variables operativas */
  --bg:          #0e1014;
  --surf:        #141719;
  --card:        #1c2024;
  --card2:       #222830;
  --brd:         #2c333d;
  --brd-2:       #3c4554;
  --brd-soft:    #242a32;
  --txt:         #e8ecf2;
  --txt2:        #c2cede;
  --txt-soft:    #9eafc4;
  --mut:         #8a9ab0;
  --mut-2:       #717e93;
  --acc:         #e2a554;
  --acc-2:       #d0924a;
  --acc-light:   #f5ca88;
  --acc-soft:    rgba(226, 165, 84, 0.08);
  --acc-strong:  rgba(226, 165, 84, 0.15);
  --acc-border:  rgba(226, 165, 84, 0.30);
  --control:     #0c0e12;
  --control-2:   #141618;
  --panel:       rgba(20, 23, 25, 0.94);
  --panel-2:     rgba(28, 32, 36, 0.97);
  --grad-acc:    linear-gradient(135deg, #e2a554 0%, #d0924a 100%);
  --grd-card:    linear-gradient(165deg, rgba(34, 40, 48, 0.98), rgba(14, 16, 20, 0.98));

  /* Semánticos */
  --intent-success:        #4ab89a;
  --intent-success-soft:   rgba(74, 184, 154, 0.10);
  --intent-success-border: rgba(74, 184, 154, 0.28);
  --intent-danger:         #d97272;
  --intent-danger-soft:    rgba(217, 114, 114, 0.10);
  --intent-danger-border:  rgba(217, 114, 114, 0.28);
  --intent-info:           #6898d8;
  --intent-info-soft:      rgba(104, 152, 216, 0.10);
  --intent-info-border:    rgba(104, 152, 216, 0.28);
  --intent-neutral:        #8a9ab0;
  --intent-neutral-soft:   rgba(138, 154, 176, 0.10);
  --grn: #4ab89a;
  --red: #d97272;
  --blu: #6898d8;
  --pur: #9a8ae2;
  --tea: #58c4d4;

  /* Sombras */
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.30);
  --shadow-3: 0 18px 46px rgba(0, 0, 0, 0.38);

  /* Tabla */
  --table-hover-bg:  rgba(226, 165, 84, 0.08);
  --table-zebra-bg:  rgba(255, 255, 255, 0.016);
  --table-pinned-bg: #1c2024;
  --table-meter-fill: linear-gradient(90deg, rgba(226, 165, 84, 0.28), rgba(226, 165, 84, 0.62));
  --focus-ring: 0 0 0 3px rgba(226, 165, 84, 0.22);

  --visual-title-bg-1: rgba(34, 40, 48, 0.98);
  --visual-title-bg-2: rgba(20, 24, 28, 0.96);
  --visual-title-border: rgba(226, 165, 84, 0.18);
  --visual-title-text: #e8ecf2;
  --visual-head-bg-1: rgba(44, 51, 61, 0.98);
  --visual-head-bg-2: rgba(28, 32, 36, 0.98);
  --visual-head-border: rgba(226, 165, 84, 0.16);
  --visual-head-text: #c2cede;
}

:root[data-template="executive-gray"] body {
  background:
    radial-gradient(ellipse at 15% -10%, rgba(226, 165, 84, 0.08) 0%, transparent 34vw),
    linear-gradient(180deg, #0c0e12 0%, #0e1014 60%, #0b0d11 100%) !important;
}

:root[data-template="executive-gray"] .logo::before {
  background: #e2a554 !important;
}
:root[data-template="executive-gray"] .logo b {
  color: #e2a554 !important;
}
:root[data-template="executive-gray"] .tab.on {
  border-bottom-color: #e2a554 !important;
  color: #f5ca88 !important;
  background: rgba(226, 165, 84, 0.07) !important;
}
:root[data-template="executive-gray"] .pbtn.on {
  background: rgba(226, 165, 84, 0.09) !important;
  border-color: rgba(226, 165, 84, 0.28) !important;
  color: #f5ca88 !important;
}
:root[data-template="executive-gray"] .ap {
  background: rgba(226, 165, 84, 0.08) !important;
  border-color: rgba(226, 165, 84, 0.26) !important;
  color: #f5ca88 !important;
}
:root[data-template="executive-gray"] td.num,
:root[data-template="executive-gray"] td.r {
  color: #f5ca88 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PLANTILLA 5: ALTO CONTRASTE
   Descripción: Negro puro, blanco puro, sin gradientes — máxima accesibilidad
   Pensado para WCAG AAA y personas con dificultad visual
══════════════════════════════════════════════════════════════════════════════ */
:root[data-template="high-contrast"] {
  /* Fondos: puros */
  --color-neutral-950: #000000;
  --color-neutral-900: #0a0a0a;
  --color-neutral-800: #121212;
  --color-neutral-750: #1a1a1a;
  --color-neutral-700: #2a2a2a;
  --color-neutral-600: #3a3a3a;
  --color-neutral-400: #a0a0a0;
  --color-neutral-300: #c0c0c0;
  --color-neutral-200: #e0e0e0;
  --color-neutral-100: #ffffff;

  /* Accent: amarillo alto contraste (WCAG 7:1 sobre negro) */
  --color-brand-600: #ffd700;
  --color-brand-700: #f5c800;
  --color-brand-800: #ffe66a;
  --color-brand-50:  rgba(255, 215, 0, 0.10);
  --color-brand-100: rgba(255, 215, 0, 0.20);
  --color-brand-400: rgba(255, 215, 0, 0.50);
  --color-brand-950: #000000;

  /* Variables operativas */
  --bg:          #000000;
  --surf:        #0a0a0a;
  --card:        #121212;
  --card2:       #1a1a1a;
  --brd:         #3a3a3a;
  --brd-2:       #505050;
  --brd-soft:    #2a2a2a;
  --txt:         #ffffff;
  --txt2:        #e0e0e0;
  --txt-soft:    #c0c0c0;
  --mut:         #a0a0a0;
  --mut-2:       #888888;
  --acc:         #ffd700;
  --acc-2:       #f5c800;
  --acc-light:   #ffe66a;
  --acc-soft:    rgba(255, 215, 0, 0.10);
  --acc-strong:  rgba(255, 215, 0, 0.20);
  --acc-border:  rgba(255, 215, 0, 0.50);
  --control:     #080808;
  --control-2:   #101010;
  --panel:       rgba(0, 0, 0, 0.96);
  --panel-2:     rgba(10, 10, 10, 0.98);
  --grad-acc:    linear-gradient(135deg, #ffd700 0%, #f5c800 100%);
  --grd-card:    none;

  /* Semánticos: alto contraste */
  --intent-success:        #00e878;
  --intent-success-soft:   rgba(0, 232, 120, 0.12);
  --intent-success-border: rgba(0, 232, 120, 0.50);
  --intent-danger:         #ff5454;
  --intent-danger-soft:    rgba(255, 84, 84, 0.12);
  --intent-danger-border:  rgba(255, 84, 84, 0.50);
  --intent-info:           #54a8ff;
  --intent-info-soft:      rgba(84, 168, 255, 0.12);
  --intent-info-border:    rgba(84, 168, 255, 0.50);
  --intent-neutral:        #a0a0a0;
  --intent-neutral-soft:   rgba(160, 160, 160, 0.12);
  --grn: #00e878;
  --red: #ff5454;
  --blu: #54a8ff;
  --pur: #c084fc;
  --tea: #44d4f4;

  /* Sombras: ninguna (alto contraste usa bordes, no sombras) */
  --shadow-0:  none;
  --shadow-1:  0 0 0 1px #3a3a3a;
  --shadow-2:  0 0 0 1px #505050;
  --shadow-3:  0 0 0 2px #ffd700;

  /* Tabla */
  --table-hover-bg:  rgba(255, 215, 0, 0.10);
  --table-zebra-bg:  rgba(255, 255, 255, 0.04);
  --table-pinned-bg: #121212;
  --table-meter-fill: linear-gradient(90deg, rgba(255, 215, 0, 0.40), #ffd700);
  --focus-ring: 0 0 0 3px rgba(255, 215, 0, 0.50);

  --visual-title-bg-1: #1a1a1a;
  --visual-title-bg-2: #121212;
  --visual-title-border: rgba(255, 215, 0, 0.30);
  --visual-title-text: #ffffff;
  --visual-head-bg-1: #222222;
  --visual-head-bg-2: #1a1a1a;
  --visual-head-border: rgba(255, 215, 0, 0.28);
  --visual-head-text: #ffffff;
}

:root[data-template="high-contrast"] body {
  background: #000000 !important;
  color: #ffffff !important;
}

:root[data-template="high-contrast"] .hdr {
  background: #000000 !important;
  border-bottom: 2px solid #3a3a3a !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
:root[data-template="high-contrast"] .filter-panel {
  background: #0a0a0a !important;
  border-bottom: 1px solid #3a3a3a !important;
}
:root[data-template="high-contrast"] .tabs-bar {
  background: #0a0a0a !important;
  border-bottom: 1px solid #3a3a3a !important;
}
:root[data-template="high-contrast"] .card {
  border: 1px solid #3a3a3a !important;
  background: #121212 !important;
  box-shadow: none !important;
}
:root[data-template="high-contrast"] .kpi {
  border: 1px solid #3a3a3a !important;
  background: #121212 !important;
  box-shadow: none !important;
}
:root[data-template="high-contrast"] .tab.on {
  border-bottom: 3px solid #ffd700 !important;
  color: #ffd700 !important;
  background: rgba(255, 215, 0, 0.06) !important;
}
:root[data-template="high-contrast"] .tab {
  color: #a0a0a0 !important;
}
:root[data-template="high-contrast"] .tab:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.05) !important;
}
:root[data-template="high-contrast"] .logo::before {
  background: #ffd700 !important;
}
:root[data-template="high-contrast"] .logo b {
  color: #ffd700 !important;
}
:root[data-template="high-contrast"] .kpi.a .kpi-val { color: #ffd700 !important; }
:root[data-template="high-contrast"] .kpi-lbl { color: #a0a0a0 !important; }
:root[data-template="high-contrast"] td.num,
:root[data-template="high-contrast"] td.r { color: #ffd700 !important; }
:root[data-template="high-contrast"] table tbody tr:hover {
  background: rgba(255, 215, 0, 0.10) !important;
}
:root[data-template="high-contrast"] table thead th {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 215, 0, 0.28) !important;
}
:root[data-template="high-contrast"] .pbtn.on {
  background: rgba(255, 215, 0, 0.12) !important;
  border-color: rgba(255, 215, 0, 0.50) !important;
  color: #ffd700 !important;
}
:root[data-template="high-contrast"] .ap {
  background: rgba(255, 215, 0, 0.10) !important;
  border-color: rgba(255, 215, 0, 0.40) !important;
  color: #ffd700 !important;
}
:root[data-template="high-contrast"] select,
:root[data-template="high-contrast"] input[type="text"],
:root[data-template="high-contrast"] input[type="date"] {
  border-color: #505050 !important;
  background: #0a0a0a !important;
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PLANTILLA 6: SENCILLEZ SOFISTICADA
   Descripción: Unificacion de acentos con un steel blue sobrio
   Prioriza cohesion, limpieza visual y menor ruido cromatico
══════════════════════════════════════════════════════════════════════════════ */
:root[data-template="sencillez-sofisticada"] {
  --color-neutral-950: #0b1118;
  --color-neutral-900: #101720;
  --color-neutral-800: #131d28;
  --color-neutral-750: #182433;
  --color-neutral-700: #243242;
  --color-neutral-600: #33465d;
  --color-neutral-400: #94a3b8;
  --color-neutral-300: #b7c4d6;
  --color-neutral-200: #d8e1ec;
  --color-neutral-100: #ffffff;

  --color-brand-600: #4a6fa5;
  --color-brand-700: #5f82b6;
  --color-brand-800: #8ca9cf;
  --color-brand-50: rgba(74, 111, 165, 0.08);
  --color-brand-100: rgba(74, 111, 165, 0.15);
  --color-brand-400: rgba(74, 111, 165, 0.30);
  --color-brand-950: #ffffff;

  --bg: #101720;
  --surf: #111a24;
  --card: #131d28;
  --card2: #182433;
  --brd: #243242;
  --brd-2: #33465d;
  --brd-soft: #1d2a39;
  --txt: #ffffff;
  --txt2: #e9eef5;
  --txt-soft: #cbd5e1;
  --mut: #94a3b8;
  --mut-2: #74859a;
  --acc: #4a6fa5;
  --acc-2: #5f82b6;
  --acc-light: #a9c1e3;
  --acc-soft: rgba(74, 111, 165, 0.08);
  --acc-strong: rgba(74, 111, 165, 0.15);
  --acc-border: rgba(74, 111, 165, 0.30);
  --control: #0f1720;
  --control-2: #141e2b;
  --panel: rgba(16, 23, 32, 0.94);
  --panel-2: rgba(19, 29, 40, 0.97);
  --grad-acc: linear-gradient(135deg, #4a6fa5 0%, #5f82b6 100%);
  --grd-card: linear-gradient(165deg, rgba(24, 36, 51, 0.98), rgba(16, 23, 32, 0.98));

  --intent-success: #62b59a;
  --intent-success-soft: rgba(98, 181, 154, 0.10);
  --intent-success-border: rgba(98, 181, 154, 0.26);
  --intent-danger: #f2a65a;
  --intent-danger-soft: rgba(242, 166, 90, 0.12);
  --intent-danger-border: rgba(242, 166, 90, 0.30);
  --intent-info: #4a6fa5;
  --intent-info-soft: rgba(74, 111, 165, 0.10);
  --intent-info-border: rgba(74, 111, 165, 0.26);
  --intent-neutral: #94a3b8;
  --intent-neutral-soft: rgba(148, 163, 184, 0.10);
  --grn: #6d8fbe;
  --red: #f2a65a;
  --blu: #4a6fa5;
  --pur: #7f92ad;
  --tea: #8da6c7;

  --shadow-1: 0 2px 10px rgba(3, 9, 18, 0.22), 0 1px 3px rgba(3, 9, 18, 0.14);
  --shadow-2: 0 8px 28px rgba(3, 9, 18, 0.30);
  --shadow-3: 0 20px 52px rgba(3, 9, 18, 0.42);

  --table-hover-bg: rgba(74, 111, 165, 0.08);
  --table-zebra-bg: rgba(255, 255, 255, 0.014);
  --table-pinned-bg: #131d28;
  --table-meter-fill: linear-gradient(90deg, rgba(74, 111, 165, 0.26), rgba(74, 111, 165, 0.60));
  --focus-ring: 0 0 0 3px rgba(74, 111, 165, 0.22);

  --visual-title-bg-1: rgba(24, 36, 51, 0.98);
  --visual-title-bg-2: rgba(16, 23, 32, 0.96);
  --visual-title-border: rgba(74, 111, 165, 0.18);
  --visual-title-text: #ffffff;
  --visual-head-bg-1: rgba(36, 50, 66, 0.98);
  --visual-head-bg-2: rgba(24, 36, 51, 0.98);
  --visual-head-border: rgba(74, 111, 165, 0.16);
  --visual-head-text: #d8e1ec;
}

:root[data-template="sencillez-sofisticada"] body {
  background:
    radial-gradient(ellipse at 14% -8%, rgba(74, 111, 165, 0.14) 0%, transparent 34vw),
    radial-gradient(ellipse at 82% 2%, rgba(148, 163, 184, 0.08) 0%, transparent 28vw),
    linear-gradient(180deg, #0d141d 0%, #101720 58%, #0b1118 100%) !important;
}
:root[data-template="sencillez-sofisticada"] .logo::before { background: #4a6fa5 !important; }
:root[data-template="sencillez-sofisticada"] .logo b { color: #a9c1e3 !important; }
:root[data-template="sencillez-sofisticada"] .tab.on {
  border-bottom-color: #4a6fa5 !important;
  color: #a9c1e3 !important;
  background: rgba(74, 111, 165, 0.08) !important;
}
:root[data-template="sencillez-sofisticada"] .pbtn.on,
:root[data-template="sencillez-sofisticada"] .ap {
  background: rgba(74, 111, 165, 0.09) !important;
  border-color: rgba(74, 111, 165, 0.28) !important;
  color: #a9c1e3 !important;
}
:root[data-template="sencillez-sofisticada"] td.num,
:root[data-template="sencillez-sofisticada"] td.r { color: #a9c1e3 !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   PLANTILLA 7: RIQUEZA TRIADICA PROFESIONAL
   Descripción: Diferencia categorias con triada azul + dorado + verde azulado
   Mejora claridad jerarquica sin perder elegancia profesional
══════════════════════════════════════════════════════════════════════════════ */
:root[data-template="riqueza-triadica"] {
  --color-neutral-950: #0b1118;
  --color-neutral-900: #101720;
  --color-neutral-800: #131d28;
  --color-neutral-750: #182433;
  --color-neutral-700: #243242;
  --color-neutral-600: #36495e;
  --color-neutral-400: #9cb0c6;
  --color-neutral-300: #bfd0e3;
  --color-neutral-200: #dbe6f3;
  --color-neutral-100: #ffffff;

  --color-brand-600: #2a9d8f;
  --color-brand-700: #24897d;
  --color-brand-800: #63c3b6;
  --color-brand-50: rgba(42, 157, 143, 0.08);
  --color-brand-100: rgba(42, 157, 143, 0.16);
  --color-brand-400: rgba(42, 157, 143, 0.32);
  --color-brand-950: #ffffff;

  --bg: #101720;
  --surf: #111a24;
  --card: #131d28;
  --card2: #182433;
  --brd: #243242;
  --brd-2: #36495e;
  --brd-soft: #1d2a39;
  --txt: #ffffff;
  --txt2: #eef2f7;
  --txt-soft: #d6dfe9;
  --mut: #9cb0c6;
  --mut-2: #7c92a8;
  --acc: #2a9d8f;
  --acc-2: #3d5a80;
  --acc-light: #6fd1c4;
  --acc-soft: rgba(42, 157, 143, 0.08);
  --acc-strong: rgba(42, 157, 143, 0.16);
  --acc-border: rgba(42, 157, 143, 0.32);
  --control: #0f1720;
  --control-2: #141e2b;
  --panel: rgba(16, 23, 32, 0.94);
  --panel-2: rgba(19, 29, 40, 0.97);
  --grad-acc: linear-gradient(135deg, #2a9d8f 0%, #3d5a80 100%);
  --grd-card: linear-gradient(165deg, rgba(24, 36, 51, 0.98), rgba(16, 23, 32, 0.98));

  --intent-success: #2a9d8f;
  --intent-success-soft: rgba(42, 157, 143, 0.10);
  --intent-success-border: rgba(42, 157, 143, 0.28);
  --intent-danger: #dc3545;
  --intent-danger-soft: rgba(220, 53, 69, 0.12);
  --intent-danger-border: rgba(220, 53, 69, 0.30);
  --intent-info: #3d5a80;
  --intent-info-soft: rgba(61, 90, 128, 0.12);
  --intent-info-border: rgba(61, 90, 128, 0.28);
  --intent-neutral: #9cb0c6;
  --intent-neutral-soft: rgba(156, 176, 198, 0.10);
  --grn: #2a9d8f;
  --red: #dc3545;
  --blu: #3d5a80;
  --pur: #e9c46a;
  --tea: #47b9aa;

  --shadow-1: 0 2px 10px rgba(3, 9, 18, 0.22), 0 1px 3px rgba(3, 9, 18, 0.14);
  --shadow-2: 0 8px 28px rgba(3, 9, 18, 0.30);
  --shadow-3: 0 20px 52px rgba(3, 9, 18, 0.42);

  --table-hover-bg: rgba(42, 157, 143, 0.08);
  --table-zebra-bg: rgba(255, 255, 255, 0.014);
  --table-pinned-bg: #131d28;
  --table-meter-fill: linear-gradient(90deg, rgba(61, 90, 128, 0.34), rgba(233, 196, 106, 0.68));
  --focus-ring: 0 0 0 3px rgba(42, 157, 143, 0.22);

  --visual-title-bg-1: rgba(24, 36, 51, 0.98);
  --visual-title-bg-2: rgba(16, 23, 32, 0.96);
  --visual-title-border: rgba(42, 157, 143, 0.18);
  --visual-title-text: #ffffff;
  --visual-head-bg-1: rgba(36, 50, 66, 0.98);
  --visual-head-bg-2: rgba(24, 36, 51, 0.98);
  --visual-head-border: rgba(61, 90, 128, 0.18);
  --visual-head-text: #dbe6f3;
}

:root[data-template="riqueza-triadica"] body {
  background:
    radial-gradient(ellipse at 12% -10%, rgba(42, 157, 143, 0.14) 0%, transparent 32vw),
    radial-gradient(ellipse at 88% 0%, rgba(61, 90, 128, 0.11) 0%, transparent 28vw),
    linear-gradient(180deg, #0d141d 0%, #101720 58%, #0b1118 100%) !important;
}
:root[data-template="riqueza-triadica"] .logo::before { background: #2a9d8f !important; }
:root[data-template="riqueza-triadica"] .logo b { color: #6fd1c4 !important; }
:root[data-template="riqueza-triadica"] .tab.on {
  border-bottom-color: #2a9d8f !important;
  color: #6fd1c4 !important;
  background: rgba(42, 157, 143, 0.08) !important;
}
:root[data-template="riqueza-triadica"] .pbtn.on,
:root[data-template="riqueza-triadica"] .ap {
  background: rgba(42, 157, 143, 0.09) !important;
  border-color: rgba(42, 157, 143, 0.30) !important;
  color: #6fd1c4 !important;
}
:root[data-template="riqueza-triadica"] td.num,
:root[data-template="riqueza-triadica"] td.r { color: #e9c46a !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   PLANTILLA 8: PREMIUM MESA DE CALIDAD
   Descripción: Anthracite profundo con cobre cepillado y rojo oxido
   Refuerza una lectura premium, calida y ejecutiva
══════════════════════════════════════════════════════════════════════════════ */
:root[data-template="premium-cobre"] {
  --color-neutral-950: #171717;
  --color-neutral-900: #212121;
  --color-neutral-800: #262626;
  --color-neutral-750: #2d2d2d;
  --color-neutral-700: #3a3a3a;
  --color-neutral-600: #555555;
  --color-neutral-400: #808080;
  --color-neutral-300: #a7a7a1;
  --color-neutral-200: #d8d8c6;
  --color-neutral-100: #f5f5dc;

  --color-brand-600: #a87541;
  --color-brand-700: #95663a;
  --color-brand-800: #c89a69;
  --color-brand-50: rgba(168, 117, 65, 0.08);
  --color-brand-100: rgba(168, 117, 65, 0.16);
  --color-brand-400: rgba(168, 117, 65, 0.30);
  --color-brand-950: #f5f5dc;

  --bg: #212121;
  --surf: #1f1f1f;
  --card: #262626;
  --card2: #2d2d2d;
  --brd: #3a3a3a;
  --brd-2: #555555;
  --brd-soft: #2f2f2f;
  --txt: #f5f5dc;
  --txt2: #ece8d2;
  --txt-soft: #d5d2bf;
  --mut: #808080;
  --mut-2: #9a978f;
  --acc: #a87541;
  --acc-2: #95663a;
  --acc-light: #d4ae81;
  --acc-soft: rgba(168, 117, 65, 0.08);
  --acc-strong: rgba(168, 117, 65, 0.16);
  --acc-border: rgba(168, 117, 65, 0.30);
  --control: #1a1a1a;
  --control-2: #202020;
  --panel: rgba(33, 33, 33, 0.95);
  --panel-2: rgba(38, 38, 38, 0.98);
  --grad-acc: linear-gradient(135deg, #a87541 0%, #c89a69 100%);
  --grd-card: linear-gradient(165deg, rgba(45, 45, 45, 0.98), rgba(33, 33, 33, 0.98));

  --intent-success: #5ea392;
  --intent-success-soft: rgba(94, 163, 146, 0.10);
  --intent-success-border: rgba(94, 163, 146, 0.26);
  --intent-danger: #c44b4b;
  --intent-danger-soft: rgba(196, 75, 75, 0.12);
  --intent-danger-border: rgba(196, 75, 75, 0.30);
  --intent-info: #8f8f8f;
  --intent-info-soft: rgba(143, 143, 143, 0.10);
  --intent-info-border: rgba(143, 143, 143, 0.24);
  --intent-neutral: #808080;
  --intent-neutral-soft: rgba(128, 128, 128, 0.10);
  --grn: #5ea392;
  --red: #c44b4b;
  --blu: #a87541;
  --pur: #c89a69;
  --tea: #8f8f8f;

  --shadow-1: 0 2px 10px rgba(0, 0, 0, 0.24), 0 1px 3px rgba(0, 0, 0, 0.16);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.32);
  --shadow-3: 0 20px 52px rgba(0, 0, 0, 0.44);

  --table-hover-bg: rgba(168, 117, 65, 0.08);
  --table-zebra-bg: rgba(255, 255, 255, 0.014);
  --table-pinned-bg: #262626;
  --table-meter-fill: linear-gradient(90deg, rgba(168, 117, 65, 0.32), rgba(200, 154, 105, 0.64));
  --focus-ring: 0 0 0 3px rgba(168, 117, 65, 0.22);

  --visual-title-bg-1: rgba(45, 45, 45, 0.98);
  --visual-title-bg-2: rgba(33, 33, 33, 0.96);
  --visual-title-border: rgba(168, 117, 65, 0.18);
  --visual-title-text: #f5f5dc;
  --visual-head-bg-1: rgba(58, 58, 58, 0.98);
  --visual-head-bg-2: rgba(38, 38, 38, 0.98);
  --visual-head-border: rgba(168, 117, 65, 0.16);
  --visual-head-text: #ece8d2;
}

:root[data-template="premium-cobre"] body {
  background:
    radial-gradient(ellipse at 14% -10%, rgba(168, 117, 65, 0.12) 0%, transparent 34vw),
    linear-gradient(180deg, #1a1a1a 0%, #212121 60%, #181818 100%) !important;
}
:root[data-template="premium-cobre"] .logo::before { background: #a87541 !important; }
:root[data-template="premium-cobre"] .logo b { color: #d4ae81 !important; }
:root[data-template="premium-cobre"] .tab.on {
  border-bottom-color: #a87541 !important;
  color: #d4ae81 !important;
  background: rgba(168, 117, 65, 0.08) !important;
}
:root[data-template="premium-cobre"] .pbtn.on,
:root[data-template="premium-cobre"] .ap {
  background: rgba(168, 117, 65, 0.09) !important;
  border-color: rgba(168, 117, 65, 0.28) !important;
  color: #d4ae81 !important;
}
:root[data-template="premium-cobre"] td.num,
:root[data-template="premium-cobre"] td.r { color: #d4ae81 !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   TEMPLATE SELECTOR UI — Botón y panel desplegable
══════════════════════════════════════════════════════════════════════════════ */

.tmpl-sel {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tmpl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--rad-md, 10px);
  border: 1px solid var(--brd);
  background: var(--card);
  color: var(--mut);
  cursor: pointer;
  font-size: 15px;
  transition: all 0.18s ease;
  padding: 0;
  flex-shrink: 0;
}
.tmpl-btn:hover {
  background: var(--card2);
  border-color: var(--brd-2);
  color: var(--acc-light, var(--acc));
}
.tmpl-btn.is-open,
.tmpl-btn[aria-expanded="true"] {
  background: var(--acc-soft);
  border-color: var(--acc-border);
  color: var(--acc-light, var(--acc));
}

/* Panel flotante */
.tmpl-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 600;
  min-width: 200px;
  background: var(--card);
  border: 1px solid var(--brd-2);
  border-radius: var(--rad-lg, 14px);
  box-shadow: var(--shadow-3, 0 18px 46px rgba(0,0,0,0.36));
  padding: 6px;
  animation: tmpl-panel-open 0.18s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both;
}
.tmpl-panel[hidden] {
  display: none;
}

@keyframes tmpl-panel-open {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Encabezado del panel */
.tmpl-panel-head {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--mut);
  padding: 6px 10px 4px;
  user-select: none;
}

/* Opciones */
.tmpl-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tmpl-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: var(--rad-md, 10px);
  cursor: pointer;
  text-align: left;
  transition: background 0.14s ease, color 0.14s ease;
  color: var(--txt2);
}
.tmpl-opt:hover {
  background: var(--card2, rgba(255,255,255,0.04));
  color: var(--txt);
}
.tmpl-opt.is-active,
.tmpl-opt[aria-selected="true"] {
  background: var(--acc-soft);
  color: var(--acc-light, var(--acc));
}
.tmpl-opt.is-active .tmpl-check { opacity: 1; }

/* Nombre de la opción */
.tmpl-opt-name {
  font-size: 12px;
  font-weight: 500;
  flex: 1;
  line-height: 1.3;
}

/* Checkmark */
.tmpl-check {
  font-size: 11px;
  opacity: 0;
  color: var(--acc);
  flex-shrink: 0;
  transition: opacity 0.14s ease;
}

/* Swatch de color */
.tmpl-swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.10);
  position: relative;
  overflow: hidden;
}
.tmpl-swatch::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Swatches individuales */
.tmpl-swatch--dark {
  background: linear-gradient(135deg, #0b1220 50%, #d6a756 50%);
}
.tmpl-swatch--sencillez-sofisticada {
  background: linear-gradient(135deg, #101720 50%, #4a6fa5 50%);
}
.tmpl-swatch--riqueza-triadica {
  background: linear-gradient(135deg, #101720 34%, #3d5a80 34%, #3d5a80 67%, #2a9d8f 67%);
}
.tmpl-swatch--premium-cobre {
  background: linear-gradient(135deg, #212121 50%, #a87541 50%);
}
.tmpl-swatch--professional-light {
  background: linear-gradient(135deg, #f4f7fb 50%, #b88734 50%);
  border-color: rgba(0,0,0,0.12) !important;
}
.tmpl-swatch--corporate-blue {
  background: linear-gradient(135deg, #040b18 50%, #38bdf8 50%);
}
.tmpl-swatch--executive-gray {
  background: linear-gradient(135deg, #0e1014 50%, #e2a554 50%);
}
.tmpl-swatch--high-contrast {
  background: linear-gradient(135deg, #000000 50%, #ffd700 50%);
}

/* Mobile: panel se abre hacia la izquierda */
@media (max-width: 400px) {
  .tmpl-panel {
    right: auto;
    left: 0;
    min-width: 190px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PLANTILLA 9: AURORA COMERCIAL
   Descripcion: Verde esmeralda · Blanco puro · Sage suave
   Concepto: Dashboard ejecutivo fresco, claro y profesional.
══════════════════════════════════════════════════════════════════════════════ */
:root[data-template="aurora-comercial"] {

  /* Brand: Emerald */
  --color-brand-50:   rgba(16, 185, 129, 0.07);
  --color-brand-100:  rgba(16, 185, 129, 0.14);
  --color-brand-400:  rgba(16, 185, 129, 0.38);
  --color-brand-600:  #10b981;
  --color-brand-700:  #059669;
  --color-brand-800:  #34d399;
  --color-brand-950:  #ffffff;

  --acc:        #10b981;
  --acc-2:      #059669;
  --acc-light:  #34d399;
  --acc-l:      #34d399;
  --acc-soft:   rgba(16,185,129,.07);
  --acc-strong: rgba(16,185,129,.14);
  --acc-border: rgba(16,185,129,.38);

  /* Neutral: Sage White */
  --color-neutral-950: #eef6f1;
  --color-neutral-900: #ffffff;
  --color-neutral-800: #ffffff;
  --color-neutral-750: #f3fdf8;
  --color-neutral-700: #c8dfd3;
  --color-neutral-600: #b0cebc;
  --color-neutral-400: #5a7a68;
  --color-neutral-300: #3d6050;
  --color-neutral-200: #1e3d2e;
  --color-neutral-100: #0d2218;

  --bg:         #eef6f1;
  --surf:       #ffffff;
  --card:       #ffffff;
  --card2:      #f3fdf8;
  --card-solid: #ffffff;
  --brd:        #c8dfd3;
  --brd-2:      #b0cebc;
  --brd2:       #c8dfd3;
  --brd-soft:   #d8ede4;
  --txt:        #0d2218;
  --txt2:       #1e3d2e;
  --txt-soft:   #3d6050;
  --mut:        #5a7a68;
  --mut-2:      #7a9a88;
  --control:    #f0faf5;
  --control-2:  #e6f7ee;
  --panel:      rgba(255,255,255,.94);
  --panel-2:    rgba(248,253,250,.98);

  --blu: #0ea5e9;
  --grn: #10b981;
  --pur: #8b5cf6;
  --red: #ef4444;
  --tea: #14b8a6;

  --intent-success:        #10b981;
  --intent-success-soft:   rgba(16,185,129,.10);
  --intent-success-border: rgba(16,185,129,.25);
  --intent-warning:        #f59e0b;
  --intent-warning-soft:   rgba(245,158,11,.10);
  --intent-warning-border: rgba(245,158,11,.25);
  --intent-danger:         #ef4444;
  --intent-danger-soft:    rgba(239,68,68,.10);
  --intent-danger-border:  rgba(239,68,68,.25);
  --intent-info:           #0ea5e9;
  --intent-info-soft:      rgba(14,165,233,.10);
  --intent-info-border:    rgba(14,165,233,.25);
  --intent-neutral:        #5a7a68;
  --intent-neutral-soft:   rgba(90,122,104,.10);

  /* Sombras — tenidas verde */
  --shadow-0:  none;
  --shadow-1:  0 1px 3px rgba(15,60,35,.06), 0 2px 8px rgba(15,60,35,.04);
  --shadow-2:  0 4px 16px rgba(15,60,35,.09);
  --shadow-3:  0 12px 36px rgba(15,60,35,.13);
  --shadow-sm:     var(--shadow-1);
  --shadow-md:     var(--shadow-2);
  --shadow-lg:     var(--shadow-3);
  --shadow-soft:   0 4px 12px rgba(15,60,35,.07);
  --shadow-strong: 0 12px 32px rgba(15,60,35,.13);
  --shadow-card:   0 2px 8px rgba(15,60,35,.07);
  --shadow-float:  0 10px 32px rgba(15,60,35,.14);
  --sh-card:       var(--shadow-1);
  --sh-float:      var(--shadow-3);

  /* Tabla */
  --table-zebra-bg:      rgba(16,185,129,.025);
  --table-hover-bg:      rgba(16,185,129,.06);
  --table-pinned-bg:     #ffffff;
  --table-pinned-shadow: 4px 0 12px -6px rgba(15,60,35,.12);
  --table-meter-track:   rgba(16,185,129,.08);
  --table-meter-fill:    linear-gradient(90deg, rgba(16,185,129,.40), rgba(5,150,105,.70));

  /* Grafico */
  --chart-text-strong: #0d2218;
  --chart-text-soft:   #5a7a68;
  --chart-grid:        rgba(90,122,104,.15);
  --chart-dot-stroke:  #ffffff;
  --card-hover:        rgba(16,185,129,.04);

  /* Gradientes */
  --grad-acc: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --grad-blu: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  --grad-grn: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  --grad-pur: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
  --grd-card: linear-gradient(160deg, #ffffff 0%, #f8fdf9 100%);

  /* Focus */
  --focus-ring:         0 0 0 3px rgba(16,185,129,.22);
  --focus-ring-danger:  0 0 0 3px rgba(239,68,68,.22);
  --focus-ring-success: 0 0 0 3px rgba(16,185,129,.30);

  /* Hover lift */
  --hover-lift:   translateY(-2px);
  --active-press: translateY(0) scale(0.97);

  /* ACSUM */
  --acsum-btn-on-bg:     #10b981;
  --acsum-btn-on-color:  #ffffff;
  --acsum-row-lost-bg:   rgba(239,68,68,.04);
  --acsum-row-lost-brd:  rgba(239,68,68,.18);
}

:root[data-template="aurora-comercial"] {
  --visual-title-bg-1:     #f0fdf7;
  --visual-title-bg-2:     #e8faf2;
  --visual-title-border:   rgba(16,185,129,.18);
  --visual-title-text:     #0d2218;
  --visual-head-bg-1:      #f0fdf7;
  --visual-head-bg-2:      #ffffff;
  --visual-head-border:    rgba(16,185,129,.12);
  --visual-head-text:      #1e3d2e;
}

/* Swatch en panel selector */
.tmpl-swatch--aurora-comercial {
  background: linear-gradient(135deg, #10b981 50%, #0ea5e9 100%);
}


/* ══ css/theme-aurora.css ══ */
/* =============================================================================
   THEME-AURORA.CSS — Aurora Comercial
   Plantilla visual fresca, clara y profesional para Ventas Dash.
   Activa con: html[data-template="aurora-comercial"]
   Diseno: verde esmeralda + blanco puro + sage suave
   ============================================================================= */

/* FONDO BODY */
[data-template="aurora-comercial"] body {
  background: linear-gradient(160deg, #eef6f1 0%, #e8f2ee 45%, #edf2f7 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* TRANSICION GLOBAL AL CAMBIAR PLANTILLA */
[data-template="aurora-comercial"] .hdr,
[data-template="aurora-comercial"] .filter-panel,
[data-template="aurora-comercial"] .tabs-bar,
[data-template="aurora-comercial"] .card,
[data-template="aurora-comercial"] .kpi {
  transition:
    background 300ms cubic-bezier(0.16,1,0.3,1),
    border-color 300ms ease,
    box-shadow 300ms ease;
}

/* HEADER */
[data-template="aurora-comercial"] .hdr {
  background: rgba(255,255,255,.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1.5px solid rgba(16,185,129,.18);
  box-shadow: 0 2px 16px rgba(15,60,35,.07), 0 1px 3px rgba(15,60,35,.04);
}

[data-template="aurora-comercial"] .logo {
  color: #0d2218;
  font-weight: 800;
  letter-spacing: -0.5px;
}

[data-template="aurora-comercial"] .logo b {
  color: #10b981;
}

[data-template="aurora-comercial"] .logo::before {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16,185,129,.5);
}

[data-template="aurora-comercial"] .pill-status {
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.20);
  color: #2d6a4a;
}

/* PANEL DE FILTROS */
[data-template="aurora-comercial"] .filter-panel {
  background: rgba(255,255,255,.92);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(16,185,129,.12);
  box-shadow: 0 2px 10px rgba(15,60,35,.05);
}

[data-template="aurora-comercial"] .sel-lbl {
  color: #5a7a68;
  font-weight: 600;
}

[data-template="aurora-comercial"] select {
  background: #f3fdf8;
  border-color: rgba(16,185,129,.22);
  color: #0d2218;
}

[data-template="aurora-comercial"] select:hover {
  border-color: rgba(16,185,129,.40);
  background: #edfaf4;
}

[data-template="aurora-comercial"] select:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
  outline: none;
}

/* BOTONES DE PERIODO */
[data-template="aurora-comercial"] .pbtn {
  background: rgba(255,255,255,.8);
  border: 1px solid rgba(16,185,129,.22);
  color: #3d6050;
  border-radius: 10px;
  font-weight: 500;
  transition: all 150ms ease;
}

[data-template="aurora-comercial"] .pbtn:hover {
  background: rgba(16,185,129,.10);
  border-color: rgba(16,185,129,.40);
  color: #059669;
}

[data-template="aurora-comercial"] .pbtn.on {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(16,185,129,.30);
  font-weight: 600;
}

/* TABS BAR */
[data-template="aurora-comercial"] .tabs-bar {
  background: rgba(255,255,255,.92);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(16,185,129,.12);
  box-shadow: 0 2px 8px rgba(15,60,35,.04);
}

[data-template="aurora-comercial"] .tab {
  color: #5a7a68;
  border-radius: 10px;
  font-weight: 500;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
  padding: 6px 14px;
  margin: 2px 1px;
}

[data-template="aurora-comercial"] .tab:hover:not(.on) {
  background: rgba(16,185,129,.09);
  color: #059669;
  transform: translateY(-1px);
}

[data-template="aurora-comercial"] .tab.on {
  background: rgba(16,185,129,.14);
  color: #059669;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(16,185,129,.25);
}

/* PAGE HERO */
[data-template="aurora-comercial"] .page-hero-shell {
  background: linear-gradient(135deg, rgba(16,185,129,.07) 0%, rgba(14,165,233,.04) 100%);
  border-bottom: 1px solid rgba(16,185,129,.10);
}

[data-template="aurora-comercial"] .page-hero-eyebrow {
  color: #10b981;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

[data-template="aurora-comercial"] .page-hero-title {
  color: #0d2218;
  font-weight: 800;
}

[data-template="aurora-comercial"] .page-hero-copy {
  color: #5a7a68;
}

[data-template="aurora-comercial"] .hero-chip {
  background: rgba(16,185,129,.09);
  color: #2d6a4a;
  border: 1px solid rgba(16,185,129,.20);
  border-radius: 20px;
  font-weight: 500;
  transition: all 150ms ease;
}

[data-template="aurora-comercial"] .hero-chip:hover {
  background: rgba(16,185,129,.16);
}

[data-template="aurora-comercial"] .hero-chip--action {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(16,185,129,.25);
}

/* KPI CARDS */
[data-template="aurora-comercial"] .kpi {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(16,185,129,.12);
  box-shadow: 0 2px 12px rgba(15,60,35,.07), 0 1px 3px rgba(15,60,35,.04);
  position: relative;
  overflow: hidden;
  transition:
    transform 200ms cubic-bezier(0.16,1,0.3,1),
    box-shadow 200ms ease;
}

[data-template="aurora-comercial"] .kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(15,60,35,.12), 0 2px 6px rgba(15,60,35,.06);
}

[data-template="aurora-comercial"] .kpi::before {
  height: 3.5px;
  border-radius: 0;
  top: 0; left: 0; right: 0; bottom: auto;
  width: 100%;
}

/* Barra superior por variante */
[data-template="aurora-comercial"] .kpi.a::before {
  background: linear-gradient(90deg, #10b981, #34d399);
  box-shadow: 0 1px 4px rgba(16,185,129,.4);
}
[data-template="aurora-comercial"] .kpi.b::before {
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  box-shadow: 0 1px 4px rgba(14,165,233,.4);
}
[data-template="aurora-comercial"] .kpi.g::before {
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
  box-shadow: 0 1px 4px rgba(139,92,246,.4);
}
[data-template="aurora-comercial"] .kpi.p::before {
  background: linear-gradient(90deg, #f59e0b, #fcd34d);
  box-shadow: 0 1px 4px rgba(245,158,11,.4);
}

[data-template="aurora-comercial"] .kpi-lbl {
  color: #5a7a68;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
}

[data-template="aurora-comercial"] .kpi-val {
  color: #0d2218;
  font-weight: 800;
  letter-spacing: -0.5px;
}

[data-template="aurora-comercial"] .kpi-sub {
  color: #7a9a88;
}

/* CARDS */
[data-template="aurora-comercial"] .card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(16,185,129,.10);
  box-shadow: 0 2px 12px rgba(15,60,35,.06), 0 1px 4px rgba(15,60,35,.03);
}

[data-template="aurora-comercial"] .ch {
  background: linear-gradient(135deg, #f3fdf8 0%, #ffffff 60%);
  border-bottom: 1px solid rgba(16,185,129,.09);
  border-radius: 20px 20px 0 0;
}

[data-template="aurora-comercial"] .ct {
  color: #0d2218;
  font-weight: 700;
}

[data-template="aurora-comercial"] .cbadge {
  background: rgba(16,185,129,.12);
  color: #059669;
  border: 1px solid rgba(16,185,129,.22);
  font-weight: 600;
}

/* BOTONES */
[data-template="aurora-comercial"] .btn-add {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(16,185,129,.30);
  font-weight: 600;
  transition: all 150ms cubic-bezier(0.16,1,0.3,1);
}

[data-template="aurora-comercial"] .btn-add:hover {
  background: linear-gradient(135deg, #0fac77 0%, #04875c 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(16,185,129,.38);
}

[data-template="aurora-comercial"] .btn-add:active {
  transform: scale(0.97) translateY(0);
  box-shadow: 0 1px 4px rgba(16,185,129,.20);
}

[data-template="aurora-comercial"] .btn-xs {
  background: rgba(16,185,129,.09);
  color: #059669;
  border: 1px solid rgba(16,185,129,.22);
  border-radius: 9px;
  font-weight: 500;
  transition: all 140ms ease;
}

[data-template="aurora-comercial"] .btn-xs:hover {
  background: rgba(16,185,129,.16);
  border-color: rgba(16,185,129,.35);
}

[data-template="aurora-comercial"] #btnClrAll {
  background: rgba(239,68,68,.08);
  color: #c53030;
  border-color: rgba(239,68,68,.22);
  border-radius: 9px;
}

[data-template="aurora-comercial"] #btnClrAll:hover {
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.35);
}

/* PILLS / CHIPS */
[data-template="aurora-comercial"] .ap {
  background: rgba(16,185,129,.10);
  color: #1a6645;
  border: 1px solid rgba(16,185,129,.25);
  border-radius: 20px;
  font-weight: 500;
}

[data-template="aurora-comercial"] .ap .ax {
  color: #10b981;
}

[data-template="aurora-comercial"] .ap.dp {
  background: rgba(14,165,233,.10);
  color: #0369a1;
  border-color: rgba(14,165,233,.25);
}

/* TABLAS */
[data-template="aurora-comercial"] table thead th {
  background: linear-gradient(180deg, #f0fdf7 0%, #e8f9f2 100%);
  color: #1a3d2a;
  border-bottom: 2px solid rgba(16,185,129,.18);
  font-weight: 700;
  letter-spacing: 0.3px;
}

[data-template="aurora-comercial"] table tbody tr {
  border-bottom: 1px solid rgba(16,185,129,.06);
  transition: background 120ms ease;
}

[data-template="aurora-comercial"] table tbody tr:hover td {
  background: rgba(16,185,129,.05);
}

[data-template="aurora-comercial"] table tbody tr:nth-child(even) td {
  background: rgba(16,185,129,.025);
}

[data-template="aurora-comercial"] td.num,
[data-template="aurora-comercial"] td.r {
  color: #059669;
  font-weight: 600;
}

[data-template="aurora-comercial"] .mini-bar {
  background: linear-gradient(90deg, rgba(16,185,129,.45), rgba(5,150,105,.75));
  border-radius: 3px;
}

[data-template="aurora-comercial"] .mini-bar-track {
  background: rgba(16,185,129,.08);
  border-radius: 3px;
}

/* BARRAS HORIZONTALES (grupo-strip, ranking) */
[data-template="aurora-comercial"] .hb-fill {
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 4px;
}

[data-template="aurora-comercial"] .hb-track {
  background: rgba(16,185,129,.10);
}

[data-template="aurora-comercial"] .hb-val {
  color: #059669;
  font-weight: 600;
}

/* GRUPO STRIP (kpi family cards) */
[data-template="aurora-comercial"] .gk {
  background: #ffffff;
  border: 1px solid rgba(16,185,129,.12);
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(15,60,35,.05);
  transition: all 150ms ease;
}

[data-template="aurora-comercial"] .gk:hover,
[data-template="aurora-comercial"] .gk.clickable:hover {
  border-color: rgba(16,185,129,.30);
  box-shadow: 0 4px 14px rgba(15,60,35,.09);
  transform: translateY(-1px);
}

[data-template="aurora-comercial"] .gk.clickable.active {
  background: rgba(16,185,129,.08);
  border-color: rgba(16,185,129,.35);
  box-shadow: 0 2px 10px rgba(16,185,129,.15);
}

[data-template="aurora-comercial"] .gk-val {
  color: #059669;
  font-weight: 700;
}

/* JERARQUIA */
[data-template="aurora-comercial"] .hier-card {
  background: #ffffff;
  border-color: rgba(16,185,129,.15);
  box-shadow: 0 2px 10px rgba(15,60,35,.07);
}

[data-template="aurora-comercial"] .hier-card--blue {
  border-color: rgba(14,165,233,.20);
}

[data-template="aurora-comercial"] .hier-card--gold {
  border-color: rgba(245,158,11,.20);
}

[data-template="aurora-comercial"] .hier-card-value {
  color: #0d2218;
}

[data-template="aurora-comercial"] .hier-card-title {
  color: #3d6050;
}

/* TEMPLATE SWITCHER UI */
[data-template="aurora-comercial"] .tmpl-btn {
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.30);
  color: #059669;
}

/* SCROLLBAR */
[data-template="aurora-comercial"] ::-webkit-scrollbar-track {
  background: rgba(16,185,129,.05);
}

[data-template="aurora-comercial"] ::-webkit-scrollbar-thumb {
  background: rgba(16,185,129,.30);
  border-radius: 4px;
}

[data-template="aurora-comercial"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(16,185,129,.45);
}

/* OVERLAY (loading) */
[data-template="aurora-comercial"] .overlay {
  background: rgba(238,246,241,.96);
}

[data-template="aurora-comercial"] .spin {
  border-top-color: #10b981;
}

[data-template="aurora-comercial"] .ovtxt {
  color: #2d6a4a;
}

/* EMPTY STATE */
[data-template="aurora-comercial"] .empty {
  color: #7a9a88;
}

[data-template="aurora-comercial"] .eico {
  color: rgba(16,185,129,.40);
}

/* =============================================================================
   ANIMACIONES AURORA
   ============================================================================= */

@keyframes aurora-kpi-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes aurora-card-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes aurora-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Entrada de KPIs escalonada */
[data-template="aurora-comercial"] .kpi {
  animation: aurora-kpi-enter 0.32s cubic-bezier(0.16,1,0.3,1) both;
}
[data-template="aurora-comercial"] .kpi:nth-child(1) { animation-delay: 0.02s; }
[data-template="aurora-comercial"] .kpi:nth-child(2) { animation-delay: 0.07s; }
[data-template="aurora-comercial"] .kpi:nth-child(3) { animation-delay: 0.12s; }
[data-template="aurora-comercial"] .kpi:nth-child(4) { animation-delay: 0.17s; }
[data-template="aurora-comercial"] .kpi:nth-child(5) { animation-delay: 0.22s; }

/* Entrada de cards */
[data-template="aurora-comercial"] .card {
  animation: aurora-card-enter 0.38s cubic-bezier(0.16,1,0.3,1) both;
  animation-delay: 0.10s;
}

/* Hero section */
[data-template="aurora-comercial"] .page-hero-shell {
  animation: aurora-fade-in 0.28s ease both;
}

/* Grupo strip items */
[data-template="aurora-comercial"] .gk {
  animation: aurora-kpi-enter 0.30s cubic-bezier(0.16,1,0.3,1) both;
}

/* PREFERS-REDUCED-MOTION */
@media (prefers-reduced-motion: reduce) {
  [data-template="aurora-comercial"] .kpi,
  [data-template="aurora-comercial"] .card,
  [data-template="aurora-comercial"] .page-hero-shell,
  [data-template="aurora-comercial"] .gk {
    animation: none;
  }

  [data-template="aurora-comercial"] .kpi:hover,
  [data-template="aurora-comercial"] .gk:hover,
  [data-template="aurora-comercial"] .btn-add:hover {
    transform: none;
  }
}

/* MOBILE AURORA */
@media (max-width: 767px) {
  [data-template="aurora-comercial"] .hdr {
    padding: 0 12px;
  }

  [data-template="aurora-comercial"] .kpi {
    border-radius: 16px;
  }

  [data-template="aurora-comercial"] .card {
    border-radius: 16px;
    border-left: none;
    border-right: none;
  }

  [data-template="aurora-comercial"] body {
    background: linear-gradient(180deg, #eef6f1 0%, #e8f2ee 100%);
    background-attachment: scroll;
  }
}


/* ══ css/visual-v86.css ══ */
/* =============================================================================
   VISUAL-V86.CSS — Mejora visual integral

   Alcance:
   1.  Fix --acc conflict (styles.css pisa el gold de tokens.css)
   2.  Escala tipográfica mínima legible
   3.  KPI cards — jerarquía consistente entre solapas
   4.  Tablas — contraste, headers, hover, totales
   5.  Gráficos — labels, legends
   6.  Navegación — tabs activos, hover
   7.  Grupo strip / comparativas / proyección
   8.  Spacing y layout general
   9.  Mobile touch targets y legibilidad
   10. Colores semánticos unificados

   Reglas:
   ─ Se carga DESPUÉS de todos los demás CSS (posición final en index.html).
   ─ Solo usa !important donde ui-v57 ya lo forzó y es necesario superarlo.
   ─ Usa tokens del design system. Sin colores hardcodeados cuando existe token.
   ─ No modifica comportamiento, solo presentación.
   ============================================================================= */

/* ══════════════════════════════════════════════════════════════════════════════
   FIX #1: RESTAURAR --acc al gold del design system
   styles.css (cargado 2do) pisa tokens.css (1ro) con #fbbf24.
   Al cargar este archivo último, lo restauramos sin !important.
══════════════════════════════════════════════════════════════════════════════ */
:root {
  /* Gold refinado del design system (de tokens.css --color-brand-600) */
  --acc:        #d6a756;
  --acc-2:      #c99845;
  --acc-light:  #f1d69b;
  --acc-soft:   rgba(214, 167, 86, 0.10);
  --acc-strong: rgba(214, 167, 86, 0.18);
  --acc-border: rgba(214, 167, 86, 0.34);
  /* Semánticos: unificar ambos sistemas */
  --grn: var(--intent-success, #4cc9a6);
  --red: var(--intent-danger,  #e07a7a);
  --blu: var(--intent-info,    #6ea8fe);
  --pur: #9c8cff;
  --tea: #61c4d8;
  /* Override grad con nuevo gold */
  --grad-acc: linear-gradient(135deg, #d6a756 0%, #c99845 100%);
}
:root[data-theme="light"] {
  --acc:        #b88734;
  --acc-2:      #9a7228;
  --acc-light:  #8a6420;
  --acc-soft:   rgba(184, 135, 52, 0.08);
  --acc-strong: rgba(184, 135, 52, 0.15);
  --acc-border: rgba(184, 135, 52, 0.28);
  --grn: var(--intent-success, #0f9f86);
  --red: var(--intent-danger,  #c85b5b);
  --blu: var(--intent-info,    #3b82f6);
}

/* ══════════════════════════════════════════════════════════════════════════════
   TOKENS TIPOGRÁFICOS MEJORADOS
   Mínimo legible: 10px labels, 11px meta, 12px datos, 13px body
══════════════════════════════════════════════════════════════════════════════ */
:root {
  /* Escala tipográfica revisada */
  --v86-fs-label:  10px;   /* labels uppercase — era 9px */
  --v86-fs-meta:   11px;   /* textos auxiliares */
  --v86-fs-data:   12px;   /* celdas de tabla, valores */
  --v86-fs-ui:     13px;   /* body UI, botones */
  --v86-fs-title:  11px;   /* títulos de card */
  --v86-kpi-sm:    19px;   /* KPI secundario */
  --v86-kpi-md:    23px;   /* KPI principal */
  --v86-kpi-lg:    26px;   /* KPI hero */
  /* Letter-spacing razonable para labels uppercase */
  --v86-ls-label:  0.5px;  /* era .8px — demasiado en 9px */
  --v86-ls-title:  0.6px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BODY — fondo desktop mejorado (para plantilla dark default)
══════════════════════════════════════════════════════════════════════════════ */
:root:not([data-theme="light"]):not([data-template]) body,
:root[data-template="dark"] body {
  background:
    radial-gradient(ellipse at 14% -8%, rgba(110, 168, 254, 0.12) 0%, transparent 36vw),
    radial-gradient(ellipse at 88% -6%, rgba(214, 167, 86, 0.10) 0%, transparent 34vw),
    linear-gradient(180deg, #080e1a 0%, #0b1220 50%, #070d19 100%) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HEADER — identidad más fuerte
══════════════════════════════════════════════════════════════════════════════ */
.hdr {
  height: 52px !important;
}

/* Logo: espaciado y jerarquía visual mejorados */
.logo {
  font-size: 15px !important;
  letter-spacing: 0.18em !important;
  font-weight: 800 !important;
  gap: 9px !important;
}
.logo b {
  color: var(--acc) !important;
}
.logo::before {
  width: 9px !important;
  height: 9px !important;
  background: var(--acc) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FILTER PANEL — filtros más claros y legibles
══════════════════════════════════════════════════════════════════════════════ */

/* Labels de filtros: subir de 9px a 10px */
.sel-lbl {
  font-size: var(--v86-fs-label) !important;
  letter-spacing: var(--v86-ls-label) !important;
  color: var(--txt-soft, var(--mut)) !important;
  font-weight: 600 !important;
}

/* Period buttons: más legibles */
.pbtn {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 6px 11px !important;
  border-radius: 8px !important;
}
.pbtn.on {
  background: var(--acc-soft) !important;
  border-color: var(--acc-border) !important;
  color: var(--acc-light, var(--acc)) !important;
  font-weight: 600 !important;
}
:root[data-theme="light"] .pbtn.on {
  color: var(--acc) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TABS — navegación más clara
══════════════════════════════════════════════════════════════════════════════ */
.tabs-bar {
  border-bottom-width: 1px !important;
  gap: 2px !important;
  padding: 0 10px !important;
}

.tab {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 11px 13px !important;
  letter-spacing: 0 !important;
  gap: 5px !important;
}
.tab:hover {
  color: var(--txt2, var(--txt)) !important;
}
.tab.on {
  color: var(--acc-light, var(--acc)) !important;
  border-bottom-color: var(--acc) !important;
  background: var(--acc-soft) !important;
  font-weight: 600 !important;
}
:root[data-theme="light"] .tab.on {
  color: var(--acc) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   KPI ROW — jerarquía visual consistente en todas las solapas
══════════════════════════════════════════════════════════════════════════════ */
.kpi {
  padding: 14px 16px !important;
  border-radius: var(--rad-lg, 14px) !important;
  background: var(--card) !important;
  border: 1px solid var(--brd) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Accent bar superior */
.kpi::before {
  height: 2px !important;
  border-radius: var(--rad-lg) var(--rad-lg) 0 0 !important;
}

/* KPI label: 9px → 10px, mejor contraste */
.kpi-lbl {
  font-size: var(--v86-fs-label) !important;
  font-weight: 600 !important;
  color: var(--txt-soft, var(--mut)) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--v86-ls-label) !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
}

/* KPI valor principal */
.kpi-val {
  font-family: var(--font-data, 'DM Mono', monospace) !important;
  font-size: var(--v86-kpi-md) !important;
  font-weight: 700 !important;
  letter-spacing: -1.2px !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

/* KPI subtexto */
.kpi-sub {
  font-size: var(--v86-fs-meta) !important;
  color: var(--mut) !important;
  margin-top: 8px !important;
  line-height: 1.4 !important;
  min-height: 0 !important;
}

/* KPI colores de acento unificados */
.kpi.a .kpi-val { color: var(--acc-light, var(--acc)) !important; }
.kpi.b .kpi-val { color: var(--blu) !important; }
.kpi.g .kpi-val { color: var(--grn) !important; }
.kpi.p .kpi-val { color: var(--pur) !important; }
.kpi.c .kpi-val { color: var(--tea) !important; }
.kpi.a::before  { background: var(--acc) !important; }
.kpi.b::before  { background: var(--blu) !important; }
.kpi.g::before  { background: var(--grn) !important; }
.kpi.p::before  { background: var(--pur) !important; }
.kpi.c::before  { background: var(--tea) !important; }
.kpi.delta.positive .kpi-val { color: var(--grn) !important; }
.kpi.delta.negative .kpi-val { color: var(--red) !important; }
.kpi.delta.neutral  .kpi-val { color: var(--tea) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   GRUPO STRIP (Kilos por Grupo de Familia)
══════════════════════════════════════════════════════════════════════════════ */
.grupo-strip-lbl {
  font-size: var(--v86-fs-label) !important;
  font-weight: 600 !important;
  letter-spacing: var(--v86-ls-label) !important;
  color: var(--txt-soft, var(--mut)) !important;
  margin-bottom: 8px !important;
}

.grupo-strip-hint {
  font-size: 11px !important;
  color: var(--mut) !important;
  line-height: 1.5 !important;
  margin-bottom: 12px !important;
}

.grupo-strip {
  flex-wrap: nowrap !important;
}

.gk {
  border-radius: 10px !important;
  min-width: 130px !important;
  padding: 11px 14px 13px !important;
}
.gk-name {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: rgba(203, 213, 225, 0.90) !important;
  margin-bottom: 5px !important;
  max-width: none !important;
}
.gk-val {
  font-family: var(--font-data, 'DM Mono', monospace) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.6px !important;
  font-variant-numeric: tabular-nums !important;
}
.gk-pct {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(203, 213, 225, 0.85) !important;
  margin-top: 3px !important;
  opacity: 1 !important;
}
.gk.clickable.active {
  border-color: var(--acc-border) !important;
  background: var(--acc-soft) !important;
  box-shadow: 0 0 0 1px var(--acc-soft) inset, 0 6px 18px rgba(0, 0, 0, 0.18) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   CARD HEADERS — títulos más legibles
══════════════════════════════════════════════════════════════════════════════ */

/* Título de card */
.ct,
.ds-card-title {
  font-family: var(--font-body, 'DM Sans', sans-serif) !important;
  font-size: var(--v86-fs-title) !important;
  font-weight: 700 !important;
  letter-spacing: var(--v86-ls-title) !important;
  color: var(--txt2, var(--txt)) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22) !important;
}

/* Badge de conteo en headers */
.cbadge,
.ds-card-badge {
  font-size: 10.5px !important;
  font-family: var(--font-data, 'DM Mono', monospace) !important;
  font-weight: 600 !important;
  padding: 2px 10px !important;
  border-radius: var(--rad-pill, 999px) !important;
  font-variant-numeric: tabular-nums !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TABLAS — contraste, legibilidad, hover
══════════════════════════════════════════════════════════════════════════════ */

/* Column headers */
table thead th,
.card table thead th {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.55px !important;
  padding: 10px 12px !important;
  color: var(--visual-head-text, #eaf2ff) !important;
  white-space: nowrap !important;
  user-select: none !important;
}

/* Sortable header hover */
table thead th:hover {
  color: var(--acc-light, var(--acc)) !important;
  cursor: pointer;
}

/* Datos de tabla */
table tbody td {
  font-size: 12px !important;
  padding: 9px 12px !important;
  line-height: 1.4 !important;
}

/* Separadores de filas más sutiles */
table tbody tr {
  border-bottom-color: rgba(255, 255, 255, 0.045) !important;
  transition: background 0.14s ease !important;
}
:root[data-theme="light"] table tbody tr {
  border-bottom-color: rgba(15, 23, 42, 0.06) !important;
}

/* Hover mejorado */
table tbody tr:hover {
  background: var(--table-hover-bg, rgba(214, 167, 86, 0.08)) !important;
}
table tbody tr:hover td {
  color: var(--txt, #eef1fa) !important;
}

/* Filas alternadas: cebra sutil */
table tbody tr:nth-child(even) {
  background: var(--table-zebra-bg, rgba(255, 255, 255, 0.015));
}
table tbody tr:nth-child(even):hover {
  background: var(--table-hover-bg, rgba(214, 167, 86, 0.08)) !important;
}

/* Valores numéricos en tabla */
td.num,
td.r {
  font-family: var(--font-data, 'DM Mono', monospace) !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--acc-light, var(--acc)) !important;
}
:root[data-theme="light"] td.num,
:root[data-theme="light"] td.r {
  color: var(--acc) !important;
}

/* Total row: más destacado */
table tbody tr.total-row td,
table tfoot td,
table tbody tr:last-child.is-total td {
  font-weight: 700 !important;
  border-top: 1px solid var(--brd-2, #33435d) !important;
  color: var(--txt) !important;
}

/* Mini bar tracks en tablas */
.mini-bar-track {
  height: 5px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border-radius: 3px !important;
}
:root[data-theme="light"] .mini-bar-track {
  background: rgba(15, 23, 42, 0.08) !important;
}
.mini-bar {
  background: linear-gradient(90deg, var(--acc-soft), var(--acc)) !important;
  border-radius: 3px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   GRÁFICOS — labels, legends, barras
══════════════════════════════════════════════════════════════════════════════ */

/* Nombres en horizontal bars */
.hb-name {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--txt-soft, var(--mut)) !important;
  width: 150px !important;
}

/* Valores en barras horizontales */
.hb-val {
  font-family: var(--font-data, 'DM Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--acc-light, var(--acc)) !important;
  min-width: 50px !important;
}
:root[data-theme="light"] .hb-val {
  color: var(--acc) !important;
}

/* Track de barras horizontales: más contraste */
.hb-track {
  height: 8px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border-radius: 5px !important;
}
:root[data-theme="light"] .hb-track {
  background: rgba(15, 23, 42, 0.08) !important;
}

.hb-fill {
  border-radius: 5px !important;
  background: linear-gradient(90deg, var(--acc-border), var(--acc)) !important;
}

/* Donut legend */
.dl-name {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--txt-soft, var(--mut)) !important;
}
.dl-val {
  font-family: var(--font-data, 'DM Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--txt) !important;
}

/* Line chart labels */
.lc-lbl {
  font-size: 9.5px !important;
  font-family: var(--font-ui, 'Inter', sans-serif) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PROYECCIÓN — cards y KPIs
══════════════════════════════════════════════════════════════════════════════ */
.proj-hero-title {
  font-family: var(--font-display, 'Syne', sans-serif) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}

.proj-hero-item .proj-hero-lbl {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.45px !important;
  color: var(--txt-soft, var(--mut)) !important;
}

.proj-hero-item .proj-hero-val {
  font-family: var(--font-data, 'DM Mono', monospace) !important;
  font-size: var(--v86-kpi-sm) !important;
  font-weight: 700 !important;
  letter-spacing: -0.8px !important;
  font-variant-numeric: tabular-nums !important;
}
.proj-hero-item .proj-hero-val.sm {
  font-size: 15px !important;
}
.proj-hero-subitem {
  font-size: 11px !important;
  line-height: 1.45 !important;
}

/* Comparativas (cc cards) */
.ck-lbl {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.45px !important;
  color: var(--txt-soft, var(--mut)) !important;
}
.ck-v {
  font-family: var(--font-data, 'DM Mono', monospace) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
  font-variant-numeric: tabular-nums !important;
}
.cc-r {
  font-size: 11px !important;
  padding: 6px 0 !important;
}
.cc-rv {
  font-family: var(--font-data, 'DM Mono', monospace) !important;
  font-size: 10px !important;
  font-variant-numeric: tabular-nums !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ACUMULADOS — ranking y tablas
══════════════════════════════════════════════════════════════════════════════ */
.acum-rank {
  font-family: var(--font-data, 'DM Mono', monospace) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--mut) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ACTIVE PILLS — más contraste y legibilidad
══════════════════════════════════════════════════════════════════════════════ */
.ap {
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  background: var(--acc-soft) !important;
  border-color: var(--acc-border) !important;
  color: var(--acc-light, var(--acc)) !important;
}
:root[data-theme="light"] .ap {
  color: var(--acc) !important;
}

.ap.dp {
  background: rgba(110, 168, 254, 0.10) !important;
  border-color: rgba(110, 168, 254, 0.28) !important;
  color: var(--blu) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   EMPTY STATE — iconos y textos mejorados
══════════════════════════════════════════════════════════════════════════════ */
.empty {
  padding: 48px 20px !important;
  color: var(--mut) !important;
}
.empty p {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--mut) !important;
}
.eico {
  font-size: 32px !important;
  margin-bottom: 10px !important;
  opacity: 0.6 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   HERO SECTION — más jerarquía y legibilidad
══════════════════════════════════════════════════════════════════════════════ */
.page-hero-eyebrow {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--acc) !important;
  margin-bottom: 5px !important;
}
.page-hero-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.1 !important;
  color: var(--txt) !important;
}
.page-hero-copy {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: var(--mut) !important;
  max-width: 56ch !important;
  margin-top: 5px !important;
}
.hero-chip {
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BOTONES — jerarquía visual
══════════════════════════════════════════════════════════════════════════════ */
.btn-add {
  background: var(--acc) !important;
  border-color: var(--acc) !important;
  color: var(--color-brand-950, #0b1220) !important;
  font-family: var(--font-body, 'DM Sans', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 9px !important;
  padding: 8px 16px !important;
  letter-spacing: 0 !important;
}
.btn-add:hover:not([disabled]) {
  background: var(--acc-2) !important;
}

/* Botón de toggle de filtros */
#btnToggleFilters {
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Limpiar todo */
#btnClrAll {
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   INPUTS Y SELECTS — mejor legibilidad y estados
══════════════════════════════════════════════════════════════════════════════ */
select,
input[type="text"],
input[type="date"],
.proj-field input {
  font-size: 12.5px !important;
  color: var(--txt) !important;
}

/* Placeholder: legible pero no confundible con valor */
.search-input::placeholder {
  color: var(--mut) !important;
  opacity: 0.7 !important;
}

/* Search box mejorado */
.search-box {
  border-radius: 9px !important;
  min-height: 36px !important;
}
.search-input {
  font-size: 12.5px !important;
}

/* Dropdown items */
.search-dd-main {
  font-size: 12.5px !important;
}
.search-dd-side {
  font-size: 10.5px !important;
  color: var(--mut) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SPACING GENERAL — márgenes y separaciones
══════════════════════════════════════════════════════════════════════════════ */

/* KPI row: spacing consistente */
.kpi-row {
  gap: 10px !important;
  margin-bottom: 12px !important;
}

/* Wrap general: padding consistente */
.wrap {
  padding: 14px 14px 24px !important;
}

/* Cards: separación uniforme */
.card {
  margin-bottom: 12px !important;
  border-radius: var(--rad-lg, 14px) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE — touch targets, legibilidad, espaciado
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 479px) {
  /* KPI val: no comprimir demasiado en xs */
  .kpi-val {
    font-size: 19px !important;
    letter-spacing: -0.8px !important;
  }
  .kpi-lbl {
    font-size: 9.5px !important;
  }
  /* Tabs: mínimo touch target */
  .tab {
    font-size: 11.5px !important;
    padding: 10px 10px !important;
    min-height: 44px !important;
  }
  /* Period buttons: touch-friendly */
  .pbtn {
    font-size: 12px !important;
    padding: 8px 12px !important;
    min-height: 40px !important;
  }
  /* Search box: altura mínima táctil */
  .search-box {
    min-height: 44px !important;
  }
  /* Select: más alto para touch */
  select {
    min-height: 40px !important;
    padding: 9px 10px !important;
  }
  /* Grupo strip: ajuste para xs */
  .gk {
    min-width: 105px !important;
    padding: 9px 10px !important;
  }
  .gk-val {
    font-size: 15px !important;
  }
  /* Tabla: texto mínimo aceptable en xs */
  table tbody td {
    font-size: 11.5px !important;
    padding: 8px 9px !important;
  }
  table thead th {
    font-size: 9.5px !important;
    padding: 8px 9px !important;
  }
  /* Hero: más compacto */
  .page-hero-title {
    font-size: 18px !important;
  }
  .page-hero-copy {
    font-size: 12px !important;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  /* Tablet pequeña */
  .kpi-val {
    font-size: 21px !important;
  }
  .tab {
    font-size: 12px !important;
    padding: 10px 11px !important;
  }
}

@media (min-width: 768px) {
  /* Tablet y desktop: escala cómoda */
  .kpi-row {
    gap: 12px !important;
  }
  .kpi {
    padding: 15px 17px !important;
  }
  .kpi-val {
    font-size: 24px !important;
  }
  .kpi-lbl {
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
  }
  /* Desktop: aprovechar el espacio */
  table thead th {
    padding: 11px 14px !important;
    font-size: 10.5px !important;
  }
  table tbody td {
    padding: 10px 14px !important;
    font-size: 12.5px !important;
  }
  /* Tabs más amplios en desktop */
  .tab {
    font-size: 13px !important;
    padding: 12px 15px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ACCESIBILIDAD — contrastes y focus states
══════════════════════════════════════════════════════════════════════════════ */

/* Focus ring unificado */
:focus-visible {
  outline: 2px solid var(--acc) !important;
  outline-offset: 2px !important;
  border-radius: var(--rad-sm, 6px) !important;
}
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 2px solid var(--acc) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px var(--acc-soft) !important;
}

/* Disabled: reducir opacidad uniformemente */
[disabled], :disabled {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   PILL STATUS — header derecho
══════════════════════════════════════════════════════════════════════════════ */
.pill-status {
  font-size: 11.5px !important;
  gap: 6px !important;
}
#stxt {
  font-weight: 500 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   OVERLAY DE CARGA — spinner más refinado
══════════════════════════════════════════════════════════════════════════════ */
.ovtxt {
  font-family: var(--font-body, 'DM Sans', sans-serif) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  color: var(--mut) !important;
}
.spin {
  width: 34px !important;
  height: 34px !important;
  border-color: var(--brd) !important;
  border-top-color: var(--acc) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   NOTA DE FILTROS COLAPSADOS — más visible
══════════════════════════════════════════════════════════════════════════════ */
.fp-collapsed-note {
  font-size: 11px !important;
  color: var(--mut) !important;
}
.fp-note-pill {
  font-size: 11px !important;
  font-weight: 500 !important;
  background: var(--acc-soft) !important;
  border-color: var(--acc-border) !important;
  color: var(--acc-light, var(--acc)) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SNOTE (nota al pie de tabla)
══════════════════════════════════════════════════════════════════════════════ */
.snote {
  font-size: 11.5px !important;
  color: var(--mut) !important;
  padding: 10px 14px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LIGHT THEME — ajustes específicos para mejor contraste en claro
══════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] .kpi {
  background: #ffffff !important;
  border-color: var(--color-neutral-700, #d8e0eb) !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.07) !important;
}
:root[data-theme="light"] .kpi-lbl {
  color: var(--color-neutral-400, #64748b) !important;
}
:root[data-theme="light"] .card {
  background: #ffffff !important;
  border-color: var(--color-neutral-700, #d8e0eb) !important;
}
:root[data-theme="light"] table thead th {
  background: linear-gradient(180deg, #f0f5ff, #e8eef9) !important;
  color: #1e3a5f !important;
  border-bottom-color: #c5d3e8 !important;
}
:root[data-theme="light"] table tbody tr {
  border-bottom-color: rgba(15, 23, 42, 0.06) !important;
}
:root[data-theme="light"] table tbody tr:hover {
  background: rgba(184, 135, 52, 0.07) !important;
}
:root[data-theme="light"] .sel-lbl {
  color: var(--color-neutral-400, #64748b) !important;
}
:root[data-theme="light"] .gk-name {
  color: var(--color-neutral-400, #64748b) !important;
}
:root[data-theme="light"] td.num,
:root[data-theme="light"] td.r {
  color: var(--acc) !important;
}


/* ══ css/hier-rank.css ══ */
/* =============================================================================
   HIER-RANK.CSS — Escala visual por volumen en Vista Jerárquica

   Principio:
   ─ data-rank="0"  → Mayor volumen: más grande, más luminoso, borde fuerte
   ─ data-rank="1"  → Segunda posición: grande, buen brillo
   ─ data-rank="2"  → Tercera: estándar+
   ─ data-rank="3-4"→ Medio: tamaño estándar, glow moderado
   ─ data-rank="5-7"→ Menor: compacto, más apagado
   ─ data-rank="8+" → Último nivel: compacto, mínimo ruido visual

   Las cartas de nivel-2 (--level-2) usan la misma lógica pero con base menor.
   Las tres variantes de acento (blue, teal, gold) se diferencian en sus glows.
   ============================================================================= */

/* ══════════════════════════════════════════════════════════════════════════════
   LÍNEA SUPERIOR DE ACENTO (rank indicator strip)
   Barra fina en la cima de cada carta, más gruesa = mayor jerarquía
══════════════════════════════════════════════════════════════════════════════ */

/* Base: todas las cartas con rank conocido tienen la línea */
.hier-card[data-rank] {
  overflow: hidden; /* contiene el ::before */
}

.hier-card[data-rank]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 20px 20px 0 0;
  pointer-events: none;
  /* Altura y opacidad se definen por rank abajo */
}

/* ── Blue (default) ── */
.hier-card[data-rank]::before                           { background: rgba(110, 168, 254, 0.70); }
.hier-card--teal[data-rank]::before                     { background: rgba(76,  201, 166, 0.70); }
.hier-card--gold[data-rank]::before                     { background: rgba(214, 167, 86,  0.70); }

/* ══════════════════════════════════════════════════════════════════════════════
   RANK 0 — #1 en volumen  (campeón de categoría)
══════════════════════════════════════════════════════════════════════════════ */
.hier-card[data-rank="0"] {
  min-height: 168px;
  padding: 22px 22px 20px;
  border-width: 1.5px;
  border-color: rgba(110, 168, 254, 0.85);
  box-shadow:
    0 0 42px rgba(110, 168, 254, 0.32),
    0 8px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}
.hier-card--teal[data-rank="0"] {
  border-color: rgba(76, 201, 166, 0.85);
  box-shadow:
    0 0 42px rgba(76,  201, 166, 0.30),
    0 8px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}
.hier-card--gold[data-rank="0"] {
  border-color: rgba(214, 167, 86, 0.85);
  box-shadow:
    0 0 42px rgba(214, 167, 86,  0.30),
    0 8px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

.hier-card[data-rank="0"]::before { height: 3px; opacity: 1; }

.hier-card[data-rank="0"] .hier-card-value {
  font-size: clamp(34px, 4.2vw, 48px);
  letter-spacing: -0.05em;
  color: #fff;
}
.hier-card[data-rank="0"] .hier-card-title {
  font-size: 16px;
  color: rgba(238, 244, 252, 0.95);
}
.hier-card[data-rank="0"] .hier-card-icon {
  width: 62px;
  height: 62px;
  font-size: 24px;
}
.hier-card--blue[data-rank="0"] .hier-card-icon,
.hier-card[data-rank="0"]:not(.hier-card--teal):not(.hier-card--gold) .hier-card-icon {
  background: rgba(110, 168, 254, 0.14);
  box-shadow: 0 0 12px rgba(110, 168, 254, 0.20);
}
.hier-card--teal[data-rank="0"] .hier-card-icon {
  background: rgba(76, 201, 166, 0.14);
  box-shadow: 0 0 12px rgba(76, 201, 166, 0.20);
}
.hier-card--gold[data-rank="0"] .hier-card-icon {
  background: rgba(214, 167, 86, 0.14);
  box-shadow: 0 0 12px rgba(214, 167, 86, 0.20);
}
.hier-card[data-rank="0"] .hier-card-caption {
  color: rgba(226, 235, 249, 0.70);
}

/* ══════════════════════════════════════════════════════════════════════════════
   RANK 1 — #2 en volumen
══════════════════════════════════════════════════════════════════════════════ */
.hier-card[data-rank="1"] {
  min-height: 156px;
  padding: 20px 20px 18px;
  border-color: rgba(110, 168, 254, 0.72);
  box-shadow:
    0 0 30px rgba(110, 168, 254, 0.22),
    0 6px 22px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.hier-card--teal[data-rank="1"] {
  border-color: rgba(76, 201, 166, 0.72);
  box-shadow:
    0 0 30px rgba(76, 201, 166, 0.22),
    0 6px 22px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.hier-card--gold[data-rank="1"] {
  border-color: rgba(214, 167, 86, 0.72);
  box-shadow:
    0 0 30px rgba(214, 167, 86, 0.22),
    0 6px 22px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.hier-card[data-rank="1"]::before { height: 2.5px; opacity: 0.88; }

.hier-card[data-rank="1"] .hier-card-value {
  font-size: clamp(30px, 3.8vw, 42px);
  letter-spacing: -0.047em;
}
.hier-card[data-rank="1"] .hier-card-title { font-size: 15.5px; }
.hier-card[data-rank="1"] .hier-card-icon  { width: 58px; height: 58px; font-size: 22px; }

/* ══════════════════════════════════════════════════════════════════════════════
   RANK 2 — #3 en volumen
══════════════════════════════════════════════════════════════════════════════ */
.hier-card[data-rank="2"] {
  min-height: 150px;
  border-color: rgba(110, 168, 254, 0.62);
  box-shadow:
    0 0 24px rgba(110, 168, 254, 0.18),
    0 4px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.hier-card--teal[data-rank="2"] {
  border-color: rgba(76, 201, 166, 0.62);
  box-shadow: 0 0 24px rgba(76, 201, 166, 0.18), 0 4px 18px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
}
.hier-card--gold[data-rank="2"] {
  border-color: rgba(214, 167, 86, 0.62);
  box-shadow: 0 0 24px rgba(214, 167, 86, 0.18), 0 4px 18px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
}

.hier-card[data-rank="2"]::before { height: 2px; opacity: 0.74; }

.hier-card[data-rank="2"] .hier-card-value {
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -0.044em;
}
.hier-card[data-rank="2"] .hier-card-icon  { width: 54px; height: 54px; }

/* ══════════════════════════════════════════════════════════════════════════════
   RANK 3-4 — Posición media-alta
══════════════════════════════════════════════════════════════════════════════ */
.hier-card[data-rank="3"],
.hier-card[data-rank="4"] {
  border-color: rgba(110, 168, 254, 0.48);
  box-shadow: 0 0 18px rgba(110, 168, 254, 0.12), 0 3px 14px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.06);
}
.hier-card--teal[data-rank="3"],
.hier-card--teal[data-rank="4"] {
  border-color: rgba(76, 201, 166, 0.48);
  box-shadow: 0 0 18px rgba(76, 201, 166, 0.12), 0 3px 14px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.06);
}
.hier-card--gold[data-rank="3"],
.hier-card--gold[data-rank="4"] {
  border-color: rgba(214, 167, 86, 0.48);
  box-shadow: 0 0 18px rgba(214, 167, 86, 0.12), 0 3px 14px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.06);
}

.hier-card[data-rank="3"]::before,
.hier-card[data-rank="4"]::before { height: 1.5px; opacity: 0.55; }

.hier-card[data-rank="3"] .hier-card-value,
.hier-card[data-rank="4"] .hier-card-value {
  font-size: clamp(25px, 3.0vw, 33px);
  letter-spacing: -0.04em;
}
.hier-card[data-rank="3"] .hier-card-title,
.hier-card[data-rank="4"] .hier-card-title {
  color: rgba(226, 235, 249, 0.78);
}
.hier-card[data-rank="3"] .hier-card-icon,
.hier-card[data-rank="4"] .hier-card-icon  { width: 50px; height: 50px; font-size: 19px; }

/* ══════════════════════════════════════════════════════════════════════════════
   RANK 5-7 — Posición media-baja
══════════════════════════════════════════════════════════════════════════════ */
.hier-card[data-rank="5"],
.hier-card[data-rank="6"],
.hier-card[data-rank="7"] {
  min-height: 136px;
  padding: 17px;
  border-color: rgba(110, 168, 254, 0.34);
  box-shadow: 0 0 12px rgba(110, 168, 254, 0.08), 0 2px 10px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
}
.hier-card--teal[data-rank="5"],
.hier-card--teal[data-rank="6"],
.hier-card--teal[data-rank="7"] {
  border-color: rgba(76, 201, 166, 0.34);
  box-shadow: 0 0 12px rgba(76, 201, 166, 0.08), 0 2px 10px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
}
.hier-card--gold[data-rank="5"],
.hier-card--gold[data-rank="6"],
.hier-card--gold[data-rank="7"] {
  border-color: rgba(214, 167, 86, 0.34);
  box-shadow: 0 0 12px rgba(214, 167, 86, 0.08), 0 2px 10px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
}

.hier-card[data-rank="5"]::before,
.hier-card[data-rank="6"]::before,
.hier-card[data-rank="7"]::before { height: 1px; opacity: 0.38; }

.hier-card[data-rank="5"] .hier-card-value,
.hier-card[data-rank="6"] .hier-card-value,
.hier-card[data-rank="7"] .hier-card-value {
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -0.035em;
}
.hier-card[data-rank="5"] .hier-card-title,
.hier-card[data-rank="6"] .hier-card-title,
.hier-card[data-rank="7"] .hier-card-title {
  font-size: 13.5px;
  color: rgba(226, 235, 249, 0.70);
}
.hier-card[data-rank="5"] .hier-card-icon,
.hier-card[data-rank="6"] .hier-card-icon,
.hier-card[data-rank="7"] .hier-card-icon { width: 46px; height: 46px; font-size: 17px; }
.hier-card[data-rank="5"] .hier-card-caption,
.hier-card[data-rank="6"] .hier-card-caption,
.hier-card[data-rank="7"] .hier-card-caption {
  color: rgba(226, 235, 249, 0.44);
}

/* ══════════════════════════════════════════════════════════════════════════════
   RANK 8-11 — Cola (últimos en volumen)
══════════════════════════════════════════════════════════════════════════════ */
.hier-card[data-rank="8"],
.hier-card[data-rank="9"],
.hier-card[data-rank="10"],
.hier-card[data-rank="11"] {
  min-height: 122px;
  padding: 15px;
  border-color: rgba(110, 168, 254, 0.22);
  box-shadow: 0 0 8px rgba(110, 168, 254, 0.05), 0 2px 8px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.04);
  background: linear-gradient(145deg, rgba(12, 24, 44, 0.98), rgba(7, 13, 26, 0.96));
}
.hier-card--teal[data-rank="8"],
.hier-card--teal[data-rank="9"],
.hier-card--teal[data-rank="10"],
.hier-card--teal[data-rank="11"] {
  border-color: rgba(76, 201, 166, 0.22);
  box-shadow: 0 0 8px rgba(76, 201, 166, 0.05), 0 2px 8px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.04);
}
.hier-card--gold[data-rank="8"],
.hier-card--gold[data-rank="9"],
.hier-card--gold[data-rank="10"],
.hier-card--gold[data-rank="11"] {
  border-color: rgba(214, 167, 86, 0.22);
  box-shadow: 0 0 8px rgba(214, 167, 86, 0.05), 0 2px 8px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.04);
}

.hier-card[data-rank="8"]::before,
.hier-card[data-rank="9"]::before,
.hier-card[data-rank="10"]::before,
.hier-card[data-rank="11"]::before { height: 0; opacity: 0; }

.hier-card[data-rank="8"] .hier-card-value,
.hier-card[data-rank="9"] .hier-card-value,
.hier-card[data-rank="10"] .hier-card-value,
.hier-card[data-rank="11"] .hier-card-value {
  font-size: clamp(20px, 2.3vw, 24px);
  letter-spacing: -0.03em;
}
.hier-card[data-rank="8"] .hier-card-title,
.hier-card[data-rank="9"] .hier-card-title,
.hier-card[data-rank="10"] .hier-card-title,
.hier-card[data-rank="11"] .hier-card-title {
  font-size: 12.5px;
  color: rgba(226, 235, 249, 0.60);
}
.hier-card[data-rank="8"] .hier-card-icon,
.hier-card[data-rank="9"] .hier-card-icon,
.hier-card[data-rank="10"] .hier-card-icon,
.hier-card[data-rank="11"] .hier-card-icon { width: 40px; height: 40px; font-size: 15px; }
.hier-card[data-rank="8"] .hier-card-caption,
.hier-card[data-rank="9"] .hier-card-caption,
.hier-card[data-rank="10"] .hier-card-caption,
.hier-card[data-rank="11"] .hier-card-caption {
  font-size: 9.5px;
  color: rgba(226, 235, 249, 0.35);
}

/* ══════════════════════════════════════════════════════════════════════════════
   NIVEL 2 (--level-2): misma lógica pero base más pequeña
══════════════════════════════════════════════════════════════════════════════ */
.hier-card--level-2[data-rank="0"] {
  min-height: 138px;
  padding: 18px;
  border-width: 1.5px;
}
.hier-card--level-2[data-rank="0"] .hier-card-value {
  font-size: clamp(28px, 3.2vw, 36px);
}
.hier-card--level-2[data-rank="0"] .hier-card-icon { width: 52px; height: 52px; font-size: 20px; }
.hier-card--level-2[data-rank="0"]::before { height: 3px; opacity: 1; }

.hier-card--level-2[data-rank="1"] .hier-card-value { font-size: clamp(25px, 2.9vw, 32px); }
.hier-card--level-2[data-rank="1"] .hier-card-icon  { width: 48px; height: 48px; }
.hier-card--level-2[data-rank="1"]::before { height: 2.5px; opacity: 0.85; }

.hier-card--level-2[data-rank="2"] .hier-card-value { font-size: clamp(23px, 2.6vw, 29px); }
.hier-card--level-2[data-rank="2"]::before { height: 2px; opacity: 0.70; }

.hier-card--level-2[data-rank="3"] .hier-card-value,
.hier-card--level-2[data-rank="4"] .hier-card-value { font-size: clamp(21px, 2.3vw, 26px); }
.hier-card--level-2[data-rank="3"]::before,
.hier-card--level-2[data-rank="4"]::before { height: 1.5px; opacity: 0.52; }

.hier-card--level-2[data-rank="5"] .hier-card-value,
.hier-card--level-2[data-rank="6"] .hier-card-value,
.hier-card--level-2[data-rank="7"] .hier-card-value {
  font-size: clamp(19px, 2.1vw, 23px);
}
.hier-card--level-2[data-rank="5"]::before,
.hier-card--level-2[data-rank="6"]::before,
.hier-card--level-2[data-rank="7"]::before { height: 1px; opacity: 0.35; }

/* ══════════════════════════════════════════════════════════════════════════════
   HOVER — El rank no debe impedir el efecto hover; añadir el glow propio
══════════════════════════════════════════════════════════════════════════════ */
.hier-card[data-rank="0"]:hover,
.hier-card[data-rank="0"]:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    0 0 56px rgba(110, 168, 254, 0.40),
    0 12px 36px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}
.hier-card--teal[data-rank="0"]:hover,
.hier-card--teal[data-rank="0"]:focus-visible {
  box-shadow:
    0 0 56px rgba(76, 201, 166, 0.38),
    0 12px 36px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}
.hier-card--gold[data-rank="0"]:hover,
.hier-card--gold[data-rank="0"]:focus-visible {
  box-shadow:
    0 0 56px rgba(214, 167, 86, 0.38),
    0 12px 36px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE — simplificar escala en pantallas chicas (no hay espacio para gap grande)
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Comprimir la diferencia de escala en mobile: menos dramático */
  .hier-card[data-rank="0"] .hier-card-value  { font-size: clamp(28px, 9vw, 36px); }
  .hier-card[data-rank="1"] .hier-card-value  { font-size: clamp(26px, 8vw, 32px); }
  .hier-card[data-rank="2"] .hier-card-value  { font-size: clamp(24px, 7.5vw, 30px); }
  .hier-card[data-rank="3"] .hier-card-value,
  .hier-card[data-rank="4"] .hier-card-value  { font-size: clamp(22px, 7vw, 27px); }
  .hier-card[data-rank="5"] .hier-card-value,
  .hier-card[data-rank="6"] .hier-card-value,
  .hier-card[data-rank="7"] .hier-card-value  { font-size: clamp(20px, 6.5vw, 25px); }
  .hier-card[data-rank="8"] .hier-card-value,
  .hier-card[data-rank="9"] .hier-card-value,
  .hier-card[data-rank="10"] .hier-card-value,
  .hier-card[data-rank="11"] .hier-card-value { font-size: clamp(18px, 6vw, 22px); }

  /* Iconos uniformes en mobile para no perder espacio */
  .hier-card[data-rank] .hier-card-icon { width: 46px; height: 46px; font-size: 18px; }
  .hier-card--level-2[data-rank] .hier-card-icon { width: 40px; height: 40px; font-size: 16px; }

  /* Min-heights reducidos en mobile */
  .hier-card[data-rank="0"]  { min-height: 134px; padding: 16px; }
  .hier-card[data-rank="5"],
  .hier-card[data-rank="6"],
  .hier-card[data-rank="7"]  { min-height: 118px; padding: 14px; }
  .hier-card[data-rank="8"],
  .hier-card[data-rank="9"],
  .hier-card[data-rank="10"],
  .hier-card[data-rank="11"] { min-height: 108px; padding: 13px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION — respetar preferencia del usuario
══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hier-card[data-rank] { transition: none; }
}


/* ══ css/ux-v89.css ══ */
/* =============================================================================
   UX-V89.CSS — Mejora visual integral desktop + mobile

   Cargado ÚLTIMO — máxima especificidad sobre todo el stack.
   Totalmente aditivo: no elimina reglas anteriores.

   Áreas de mejora:
   1.  Jerarquía visual de página — separación entre bloques
   2.  Cards y paneles — coherencia entre solapas
   3.  Tablas — headers, hover, separadores
   4.  KPIs — consistencia de altura y espaciado
   5.  Filtros — barra colapsada más pulida
   6.  Tabs — mejor identidad del tab activo
   7.  Botones y chips — mejor jerarquía primario / secundario
   8.  Estados vacíos y de carga — más comunicativos
   9.  Mobile — espaciado, scroll hints, dock
   10. Accesibilidad — focus visible, contraste, disabled
   11. Vista Jerárquica — integración visual con el resto
   12. Ultra-wide — aprovechar pantallas > 1440px
   ============================================================================= */

/* ══════════════════════════════════════════════════════════════════════════════
   0. TOKENS PROPIOS DE V89
   Variables que esta capa introduce sin sobreescribir nada anterior.
══════════════════════════════════════════════════════════════════════════════ */
:root {
  --v89-section-gap:      20px;
  --v89-card-radius:      18px;
  --v89-inner-radius:     14px;
  --v89-toolbar-radius:   16px;
  --v89-chip-radius:      999px;
  --v89-table-head-h:     38px;
  --v89-row-h:            42px;
  --v89-kpi-min-h:        104px;
  --v89-transition:       160ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Separadores de sección */
  --v89-divider:          rgba(148, 163, 184, 0.09);
  --v89-divider-strong:   rgba(148, 163, 184, 0.16);

  /* Gradiente de highlight para encabezados de sección */
  --v89-section-bg:       linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 100%);

  /* Scroll hint color */
  --v89-scroll-hint:      linear-gradient(to right, transparent, var(--surf, #141826) 88%);
  --v89-scroll-hint-left: linear-gradient(to left, transparent, var(--surf, #141826) 88%);
}
:root[data-theme="light"] {
  --v89-divider:          rgba(15, 23, 42, 0.07);
  --v89-divider-strong:   rgba(15, 23, 42, 0.13);
  --v89-section-bg:       linear-gradient(180deg, rgba(15,23,42,0.018) 0%, transparent 100%);
  --v89-scroll-hint:      linear-gradient(to right, transparent, #ffffff 88%);
  --v89-scroll-hint-left: linear-gradient(to left, transparent, #ffffff 88%);
}

/* ══════════════════════════════════════════════════════════════════════════════
   1. LAYOUT GENERAL — Ancho máximo y gaps de sección
══════════════════════════════════════════════════════════════════════════════ */

/* Ultra-wide: ampliar contenedor a 1320px en pantallas >= 1440px */
@media (min-width: 1440px) {
  .wrap,
  .fp-inner,
  .page-hero {
    max-width: 1340px !important;
  }
}

/* Separación vertical entre cards */
.card + .card,
.kpi-row + .card,
.card + .kpi-row {
  margin-top: var(--v89-section-gap);
}

/* Consistencia de radius en todas las cards */
.card,
.kpi,
.proj-hero-card,
.acum-card,
.detail-trend-card,
.freq-toolbar,
.acsum-toolbar,
.detail-strip-head {
  border-radius: var(--v89-card-radius) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   2. CARD HEADERS — coherencia visual entre solapas
══════════════════════════════════════════════════════════════════════════════ */
.ch,
.card > .ch,
.story-card > .ch {
  min-height: 50px !important;
  padding: 13px 18px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid var(--v89-divider-strong) !important;
  border-radius: var(--v89-card-radius) var(--v89-card-radius) 0 0 !important;
}

/* Título de card: más legible */
.ct,
.ds-card-title {
  font-size: 11.5px !important;
  letter-spacing: 0.7px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

/* Badge de conteo */
.cbadge {
  min-height: 24px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: var(--v89-chip-radius) !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   3. KPI CARDS — altura consistente entre solapas
══════════════════════════════════════════════════════════════════════════════ */
.kpi {
  min-height: var(--v89-kpi-min-h) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* Accent bar más gruesa y con gradiente */
.kpi::before {
  height: 2.5px !important;
}
.kpi.a::before { background: linear-gradient(90deg, var(--acc), var(--acc-2)) !important; }
.kpi.b::before { background: linear-gradient(90deg, var(--blu), #3b82f6) !important; }
.kpi.g::before { background: linear-gradient(90deg, var(--grn), #10b981) !important; }
.kpi.p::before { background: linear-gradient(90deg, var(--pur), #7c3aed) !important; }
.kpi.c::before { background: linear-gradient(90deg, var(--tea), #0891b2) !important; }

/* KPI sub: línea de variación más clara */
.kpi-sub {
  min-height: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   4. TABLAS — mejor separación visual y legibilidad
══════════════════════════════════════════════════════════════════════════════ */

/* Table wrapper: mejora el indicador de scroll derecho */
.tw {
  position: relative;
  border-radius: 0 0 var(--v89-card-radius) var(--v89-card-radius);
  overflow: hidden;
}

/* Gradiente de scroll hint en el lado derecho */
.tw::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 48px;
  background: var(--v89-scroll-hint);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 2;
}
.tw.has-h-overflow::after { opacity: 1; }

/* Altura mínima de filas — mejora scaneabilidad */
tbody tr {
  min-height: var(--v89-row-h) !important;
}
tbody td {
  vertical-align: middle !important;
}

/* Valores positivos / negativos en tablas */
.v89-positive,
.delta-pos,
td[data-trend="positive"] {
  color: var(--grn) !important;
}
.v89-negative,
.delta-neg,
td[data-trend="negative"] {
  color: var(--red) !important;
}

/* Fila de total más prominente */
tr.row-total td,
tr.detail-grandtotal-row td,
tr.detail-summary-row td,
tr.acsum-row-total td,
tr.freq-row-total td {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   5. TOOLBARS — consistencia entre solapas
══════════════════════════════════════════════════════════════════════════════ */

/* Toolbar base: padding y radius unificados */
.detail-toolbar,
.freq-toolbar,
.acsum-toolbar,
.projection-hierarchy-toolbar {
  border-radius: var(--v89-toolbar-radius) !important;
  padding: 14px 16px !important;
}

/* Botones de modo/vista dentro de toolbars: grupo pill */
.acsum-mode-btns,
.acsum-view-btns,
.freq-mode-btns,
.freq-view-btns {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

/* Botón activo en toolbars: más visible */
.acsum-mode-btn.on,
.acsum-view-btn.on,
.freq-mode-btn.on,
.freq-view-btn.on {
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

/* Separador visual entre grupos de controles */
.detail-toolbar-section-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   6. NAVEGACIÓN — tabs y barra de filtro
══════════════════════════════════════════════════════════════════════════════ */

/* Tab activo: badge numeral eliminado, color más claro  */
.tab.on {
  font-weight: 700 !important;
}

/* Tab inactivo: mejor contraste que el texto apagado */
.tab:not(.on) {
  opacity: 0.75;
}
.tab:not(.on):hover {
  opacity: 1;
}

/* Barra de tabs: sutil separador inferior  */
.tabs-bar {
  border-bottom-width: 1px !important;
}

/* Filter panel: transición más suave entre abierto/cerrado */
.filter-panel {
  transition: min-height var(--v89-transition), background var(--v89-transition) !important;
}

/* Period buttons activos: checkmark icon accesible */
.pbtn.on {
  position: relative;
}

/* ══════════════════════════════════════════════════════════════════════════════
   7. BOTONES — jerarquía primario / secundario / destructivo
══════════════════════════════════════════════════════════════════════════════ */

/* Botón primario (btn-add): contraste mejorado */
.btn-add {
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 2px 10px rgba(214, 167, 86, 0.22) !important;
}
.btn-add:hover:not([disabled]) {
  box-shadow: 0 4px 16px rgba(214, 167, 86, 0.32) !important;
  transform: translateY(-1px) !important;
}
.btn-add:active:not([disabled]) {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: none !important;
}

/* Botón de limpiar filtros (btn-xs / #btnClrAll): destructive intent */
#btnClrAll:hover {
  background: rgba(224, 122, 122, 0.08) !important;
}

/* Botones de acción de tabla */
.table-action-btn {
  min-height: 32px !important;
  padding: 5px 11px !important;
  border-radius: var(--v89-chip-radius) !important;
  font-size: 12px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   8. CHIPS DE FILTRO ACTIVOS — más informativos
══════════════════════════════════════════════════════════════════════════════ */
.ap {
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  line-height: 1 !important;
  border-radius: var(--v89-chip-radius) !important;
}

/* "×" de dismiss: área clicable mínima */
.ax {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  font-size: 13px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   9. ESTADOS VACÍOS — más comunicativos
══════════════════════════════════════════════════════════════════════════════ */
.empty {
  padding: 56px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.empty p {
  max-width: 40ch !important;
  margin: 0 auto !important;
  line-height: 1.6 !important;
}

.eico {
  display: block !important;
  font-size: 36px !important;
  margin-bottom: 12px !important;
  opacity: 0.55 !important;
  filter: saturate(0.7) !important;
}

/* Estado vacío de jerarquía */
.hier-empty {
  padding: 48px 24px !important;
  text-align: center !important;
  color: var(--mut) !important;
  font-size: 13px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   10. ESTADO DE CARGA — shimmer mejorado
══════════════════════════════════════════════════════════════════════════════ */
@keyframes v89-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.skeleton,
[class*="skeleton"],
.loading-cell {
  background: linear-gradient(
    90deg,
    var(--card, #1b2032) 25%,
    var(--brd, #2a304a) 50%,
    var(--card, #1b2032) 75%
  ) !important;
  background-size: 600px 100% !important;
  animation: v89-shimmer 1.4s ease-in-out infinite !important;
  border-radius: 4px !important;
  color: transparent !important;
}
:root[data-theme="light"] .skeleton,
:root[data-theme="light"] [class*="skeleton"],
:root[data-theme="light"] .loading-cell {
  background: linear-gradient(
    90deg,
    #f4f7fb 25%,
    #e8eef8 50%,
    #f4f7fb 75%
  ) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   11. GRÁFICOS — padding y separación entre chart cards
══════════════════════════════════════════════════════════════════════════════ */
.hbars {
  padding: 14px 16px !important;
}

.hb-row {
  padding: 7px 0 !important;
  border-bottom: 1px solid var(--v89-divider) !important;
}
.hb-row:last-child {
  border-bottom: none !important;
}

/* Donut: más centrado */
.donut-wrap {
  padding: 14px 16px !important;
  justify-content: center !important;
  gap: 20px !important;
}

/* Line chart: más respirable */
.lc-wrap {
  padding: 12px 16px 16px !important;
}

/* graphStoryGrid: 3 KPIs — sobreescribir el repeat(4) del breakpoint XL */
@media (min-width: 1024px) {
  #graphStoryGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ── hbars desktop: grid real + nombre sin clipping ──────────────────────── */
/* ux-v89 carga último (pos 29) → gana sobre visual-v86 (pos 27) con 150px   */
@media (min-width: 768px) {
  .hb-row {
    display: grid !important;
    grid-template-columns: minmax(210px, 1.6fr) minmax(120px, 2fr) minmax(88px, auto) !important;
    align-items: center !important;
    gap: 14px !important;
  }
  .hb-name {
    width: auto !important;
    min-width: 0 !important;
  }
}

/* Top 10 Clientes: full-width card → columna nombre aún más amplia */
@media (min-width: 768px) {
  #gClie .hb-row {
    grid-template-columns: minmax(260px, 1.8fr) minmax(120px, 2fr) minmax(88px, auto) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   12. VISTA JERÁRQUICA — integración visual
══════════════════════════════════════════════════════════════════════════════ */

/* Panel principal */
.hier-panel {
  border-radius: var(--v89-card-radius) !important;
}

/* KPI principal de la jerarquía */
.hier-main-card {
  border-radius: var(--v89-inner-radius) !important;
  transition: transform var(--v89-transition), box-shadow var(--v89-transition) !important;
}
.hier-main-card:hover {
  transform: translateY(-2px) !important;
}

/* Chips de vista */
.hier-view-chip {
  border-radius: var(--v89-chip-radius) !important;
  min-height: 32px !important;
  font-size: 12px !important;
  transition: all var(--v89-transition) !important;
}
.hier-view-chip.on {
  font-weight: 700 !important;
}

/* Cards del nivel 1 y 2 */
.hier-card {
  border-radius: 20px !important;
  transition: transform var(--v89-transition), box-shadow var(--v89-transition) !important;
}
.hier-card:hover {
  transform: translateY(-2px) !important;
}

/* Nota de pie de jerarquía */
.hier-footnote {
  font-size: 11.5px !important;
  padding: 10px 16px !important;
  border-top: 1px solid var(--v89-divider) !important;
  color: var(--mut) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   13. ACCESIBILIDAD — focus ring unificado y contrastes
══════════════════════════════════════════════════════════════════════════════ */

/* Focus ring global refinado */
:focus-visible {
  outline: 2px solid var(--acc) !important;
  outline-offset: 3px !important;
  border-radius: var(--rad-sm, 6px) !important;
}

/* Disabled: opacidad y cursor uniforme */
[disabled],
:disabled,
[aria-disabled="true"] {
  opacity: 0.40 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
/* Excepciones: no queremos pointer-events:none en contenedores */
fieldset[disabled] {
  pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   14. HEADER — identidad más fuerte en ambos temas
══════════════════════════════════════════════════════════════════════════════ */

/* Logo: espaciado refinado */
.logo {
  gap: 10px !important;
  align-items: center !important;
}

/* Status pill: mejor legibilidad */
.pill-status {
  border-radius: var(--v89-chip-radius) !important;
  min-height: 28px !important;
  padding: 3px 10px !important;
}

/* BCRA pill */
.bcra-pill {
  border-radius: var(--v89-chip-radius) !important;
  min-height: 28px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   15. DESKTOP — mejoras específicas (≥ 768px)
══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* Separación entre bloques de herramientas y tabla */
  .detail-toolbar {
    margin-bottom: 14px !important;
  }

  /* Card headers: gradient más visible */
  .card > .ch,
  .story-card > .ch,
  .projection-hierarchy-card > .ch,
  .projection-family-summary-card > .ch,
  .projection-family-card > .ch,
  .projection-product-card > .ch {
    background: linear-gradient(180deg, rgba(30,44,70,0.96), rgba(17,28,48,0.94)) !important;
    border-bottom: 1px solid var(--v89-divider-strong) !important;
  }

  /* Popovers de filtro de columna: transición de apertura */
  .detail-col-menu {
    transform-origin: top left;
    animation: v89-popover-in 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes v89-popover-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Toolbar presete: botones en pill con gap consistente */
  .detail-preset-row--rail {
    gap: 7px !important;
    flex-wrap: wrap !important;
  }

  /* KPI row: max 5 columnas en desktop */
  .kpi-row {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  }

  /* Charts grid: siempre 2 columnas en desktop ancho */
  .charts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Grupo strip: no overflow en desktop */
  .grupo-strip {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }

  /* Toolbar inner: alinear controles a la izquierda */
  .detail-toolbar-inner {
    align-items: flex-start !important;
  }

  /* Snote: más visible */
  .snote {
    font-size: 12px !important;
    padding: 12px 16px !important;
    border-top: 1px solid var(--v89-divider) !important;
    border-radius: 0 0 var(--v89-card-radius) var(--v89-card-radius) !important;
  }

  /* AI FAB: sin obstruir el contenido */
  #aiFab {
    bottom: 24px !important;
    right: 20px !important;
  }

  /* Sección hero: separación más clara */
  .page-hero-shell {
    margin-bottom: 2px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   16. DESKTOP WIDE (≥ 1280px) — Mejor aprovechamiento del espacio
══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {

  /* KPI min-height mayor en wide */
  .kpi {
    min-height: 112px !important;
    padding: 18px 20px !important;
  }

  /* Card: radius más grande */
  .card,
  .proj-hero-card,
  .acum-card,
  .detail-trend-card {
    border-radius: 20px !important;
  }

  /* Tabla: filas más generosas */
  tbody td {
    padding: 11px 14px !important;
  }
  thead th {
    padding: 11px 14px !important;
    height: var(--v89-table-head-h) !important;
  }

  /* Wrap content: algo más de respiro */
  .wrap {
    padding: 22px 28px 32px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   17. MOBILE (≤ 767px) — Mejoras de usabilidad
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Card: radius reducido para aprovechar ancho */
  .card,
  .kpi,
  .proj-hero-card {
    border-radius: 14px !important;
  }

  /* Card headers en mobile: más compactos */
  .ch {
    min-height: 44px !important;
    padding: 10px 14px !important;
  }

  /* KPI: padding reducido pero confortable */
  .kpi {
    padding: 12px 14px !important;
    min-height: 88px !important;
  }

  /* Grupo strip: scroll horizontal suave con hint */
  .grupo-strip {
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
  }
  .gk {
    scroll-snap-align: start !important;
  }

  /* Tabla: altura de fila touch-friendly */
  tbody td,
  thead th {
    padding: 9px 10px !important;
  }

  /* Mobile dock: más definido */
  .mobile-dock {
    border-top: 1px solid var(--v89-divider-strong) !important;
    background: rgba(10, 14, 24, 0.96) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  :root[data-theme="light"] .mobile-dock {
    background: rgba(248, 250, 252, 0.96) !important;
    border-top-color: var(--v89-divider-strong) !important;
  }

  /* Botones del dock: target mínimo de 44px */
  .dock-btn,
  .mobile-dock button {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Vacíos: más compactos en mobile */
  .empty {
    padding: 36px 16px !important;
  }
  .eico {
    font-size: 30px !important;
  }

  /* Chips: sin overflow */
  .ap {
    max-width: calc(100vw - 80px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Snote: text-align izquierda en mobile */
  .snote {
    justify-content: flex-start !important;
    text-align: left !important;
    font-size: 11px !important;
  }

  /* Error bar: responsive */
  .ebar {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .ebar-actions {
    justify-content: flex-start !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   18. MOBILE XS (≤ 479px) — Portrait muy angosto
══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 479px) {

  /* Wrap: padding lateral mínimo */
  .wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Card: margen menor */
  .card {
    margin-bottom: 10px !important;
  }

  /* KPI grid siempre 2 columnas en xs */
  .kpi-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Tabs: scroll suave en xs */
  .tabs-bar {
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .tab {
    scroll-snap-align: start !important;
  }

  /* Gráficos: una columna */
  .charts-grid {
    grid-template-columns: 1fr !important;
  }

  /* Acum grid: una columna */
  .acum-grid {
    grid-template-columns: 1fr !important;
  }

  /* Donut: responsive */
  .donut-wrap {
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   19. TABLET (768px – 1023px) — Mejoras específicas
══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {

  /* KPI: 3 columnas en tablet */
  .kpi-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Charts grid: 2 col pero con menor gap */
  .charts-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Wrap: padding lateral medio */
  .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   20. PROYECCIÓN — KPI y comparativas
══════════════════════════════════════════════════════════════════════════════ */

/* Hero grid: máximo 4 columnas */
@media (min-width: 860px) {
  .proj-hero-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1100px) {
  .proj-hero-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Comparativas: mejor separación */
.cc {
  border-radius: var(--v89-card-radius) !important;
  overflow: hidden !important;
}
.cc-head {
  padding: 12px 14px !important;
  min-height: 48px !important;
}
.cc-name {
  font-size: 13px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   21. FRECUENCIA y ACUMULADOS — toolbars más cohesivos
══════════════════════════════════════════════════════════════════════════════ */

/* Segmentos de frecuencia */
.freq-seg-shell {
  border-radius: var(--v89-inner-radius) !important;
  padding: 10px 14px !important;
}

.freq-seg-pill {
  border-radius: var(--v89-chip-radius) !important;
  min-height: 30px !important;
  padding: 4px 12px !important;
  font-size: 11.5px !important;
}

/* Meta info de acumulados */
.acsum-meta {
  border-radius: var(--v89-inner-radius) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   22. SEARCH DROPDOWN — mejor jerarquía visual
══════════════════════════════════════════════════════════════════════════════ */
.search-dd {
  border-radius: var(--v89-inner-radius) !important;
  overflow: hidden !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255,255,255,0.04) inset !important;
}

.search-dd-head {
  font-size: 10px !important;
  letter-spacing: 0.6px !important;
  font-weight: 600 !important;
  padding: 8px 12px !important;
}

.search-dd-item {
  padding: 9px 12px !important;
  transition: background 0.12s ease !important;
}

.search-dd-main {
  font-size: 13px !important;
  font-weight: 500 !important;
}

.search-dd-side {
  font-size: 11px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   23. OVERLAY — spinner más refinado
══════════════════════════════════════════════════════════════════════════════ */
.overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Progress bar: transición suave */
#loadProgressBar {
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-radius: 0 2px 2px 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   24. FILTROS PANEL — barra colapsada más elegante
══════════════════════════════════════════════════════════════════════════════ */

/* Nota colapsada: chips bien separados */
.fp-collapsed-note {
  gap: 6px !important;
  align-items: center !important;
}

.fp-note-pill {
  border-radius: var(--v89-chip-radius) !important;
  min-height: 26px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Selector wrap: más espacio interno */
.sel-wrap {
  transition: border-color var(--v89-transition) !important;
}
.sel-wrap:focus-within {
  border-color: var(--acc-border) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   25. PREFERS-REDUCED-MOTION
══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   26. LIGHT THEME — ajustes complementarios en claro
══════════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {

  /* Cards en claro: sombra más sutil */
  .card,
  .kpi {
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.04) !important;
  }

  /* Toolbar en claro */
  .detail-toolbar,
  .freq-toolbar,
  .acsum-toolbar {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: var(--v89-divider-strong) !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06) !important;
  }

  /* Card headers en claro */
  .card > .ch {
    background: linear-gradient(180deg, #f0f5ff, #e8eef9) !important;
    border-bottom: 1px solid var(--color-neutral-700, #d8e0eb) !important;
  }

  /* Grupo strip en claro */
  .gk {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07) !important;
  }

  /* Tablas: header claro */
  thead th {
    background: linear-gradient(180deg, #f0f5ff, #e8eef9) !important;
    color: #1e3a5f !important;
    border-bottom: 1px solid #c5d3e8 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   27. TEMPLATES — ajustes para plantillas adicionales
══════════════════════════════════════════════════════════════════════════════ */

/* Corporate Blue */
:root[data-template="corporate-blue"] .kpi::before {
  background: linear-gradient(90deg, #4a9eff, #1e78e8) !important;
}

/* Executive Gray */
:root[data-template="executive-gray"] .kpi::before {
  background: linear-gradient(90deg, #9eb8d8, #6f8fae) !important;
}

/* High Contrast */
:root[data-template="high-contrast"] {
  .card,
  .kpi {
    border-width: 1.5px !important;
  }
  .tab.on {
    border-width: 2px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   28. COLUMNAS VISIBLES — panel de toggle mejorado
══════════════════════════════════════════════════════════════════════════════ */
.detail-column-visibility {
  border-radius: var(--v89-inner-radius) !important;
  padding: 14px !important;
}

.detail-column-visibility__item {
  border-radius: var(--v89-inner-radius) !important;
  min-height: 38px !important;
  transition: background var(--v89-transition), border-color var(--v89-transition) !important;
}

.detail-column-visibility__item:hover {
  cursor: pointer !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   29. DETAIL GLANCE CARDS — comparativa rápida en header
══════════════════════════════════════════════════════════════════════════════ */
.detail-glance-card {
  border-radius: var(--v89-inner-radius) !important;
  transition: transform var(--v89-transition), border-color var(--v89-transition) !important;
}
.detail-glance-card:hover {
  transform: translateY(-1px) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   30. SCROLL HORIZONTAL HINT — ambos lados
   Agrega un gradiente de fade izquierdo cuando se scrollea a la derecha
══════════════════════════════════════════════════════════════════════════════ */
.tw {
  /* Ya tiene ::after para derecha; ::before para izquierda */
}
.tw::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 32px;
  background: var(--v89-scroll-hint-left);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 2;
  border-radius: 0 0 0 var(--v89-card-radius);
}

/* ══════════════════════════════════════════════════════════════════════════════
   TOOLBAR TOGGLE — ocultar/mostrar panel de herramientas (v90)
══════════════════════════════════════════════════════════════════════════════ */
.detail-tool-btn--sm {
  min-height: 26px;
  padding: 0 10px;
  font-size: 11px;
  border-radius: 8px;
  line-height: 1;
  white-space: nowrap;
}

.detail-toolbar.is-toolbar-hidden {
  display: none !important;
}

.btn-toolbar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 0 10px;
  font-size: 11px;
  border-radius: 8px;
  border: 1px solid var(--brd);
  background: var(--card);
  color: var(--mut);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 160ms ease, color 160ms ease;
}
.btn-toolbar-toggle:hover {
  border-color: rgba(214, 167, 86, .35);
  color: var(--acc);
}
.btn-toolbar-toggle .v90-toggle-chevron {
  display: inline-block;
  transition: transform 200ms cubic-bezier(.16,1,.3,1);
  font-style: normal;
}
.btn-toolbar-toggle[aria-expanded="false"] .v90-toggle-chevron {
  transform: rotate(180deg);
}

/* CSV export button in card header */
.btn-ch-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 0 10px;
  font-size: 11px;
  border-radius: 8px;
  border: 1px solid var(--brd);
  background: var(--card);
  color: var(--mut);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 160ms ease, color 160ms ease;
}
.btn-ch-action:hover {
  border-color: rgba(214, 167, 86, .35);
  color: var(--acc);
}
.ch-actions-row {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.tw.has-scroll-left::before { opacity: 1; }


/* ══ css/ui-v95-executive-polish.css ══ */
/* =============================================================================
   UI-V95-EXECUTIVE-POLISH.CSS
   Refinamiento visual incremental para Ventas Dash v95 SQLite local.

   Alcance: solo UI visual frontend. No cambia contratos /api, datos ni backend.
   Cargado al final del stack CSS para consolidar jerarquia ejecutiva, lectura
   numerica, filtros, tablas, rankings, estados y mobile.
   ============================================================================= */

:root {
  --v95-exec-radius: 20px;
  --v95-exec-radius-sm: 14px;
  --v95-exec-hairline: rgba(148, 163, 184, 0.18);
  --v95-exec-hairline-soft: rgba(148, 163, 184, 0.10);
  --v95-exec-panel: linear-gradient(180deg, rgba(19, 29, 48, 0.96), rgba(12, 18, 31, 0.98));
  --v95-exec-card: linear-gradient(180deg, rgba(25, 36, 58, 0.98), rgba(15, 23, 42, 0.98));
  --v95-exec-card-soft: rgba(15, 23, 42, 0.62);
  --v95-exec-shadow: 0 16px 44px rgba(2, 8, 23, 0.30), 0 2px 8px rgba(2, 8, 23, 0.18);
  --v95-exec-shadow-soft: 0 10px 26px rgba(2, 8, 23, 0.20);
  --v95-exec-focus: 0 0 0 3px rgba(214, 167, 86, 0.18);
  --v95-exec-value-ls: -0.045em;
  --v95-exec-muted: color-mix(in srgb, var(--mut, #94a3b8) 82%, var(--txt, #eaf0f7));
  --v95-exec-table-head: linear-gradient(180deg, rgba(30, 43, 70, 0.98), rgba(18, 28, 49, 0.98));
  --v95-exec-table-row: rgba(255, 255, 255, 0.022);
  --v95-exec-table-row-hover: rgba(214, 167, 86, 0.075);
  --v95-exec-success-bg: rgba(76, 201, 166, 0.12);
  --v95-exec-warning-bg: rgba(214, 167, 86, 0.13);
  --v95-exec-danger-bg: rgba(224, 122, 122, 0.12);
}

:root[data-theme="light"] {
  --v95-exec-hairline: rgba(24, 38, 64, 0.14);
  --v95-exec-hairline-soft: rgba(24, 38, 64, 0.08);
  --v95-exec-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 252, 0.98));
  --v95-exec-card: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 249, 253, 0.99));
  --v95-exec-card-soft: rgba(255, 255, 255, 0.76);
  --v95-exec-shadow: 0 16px 42px rgba(15, 23, 42, 0.09), 0 2px 10px rgba(15, 23, 42, 0.06);
  --v95-exec-shadow-soft: 0 10px 24px rgba(15, 23, 42, 0.07);
  --v95-exec-focus: 0 0 0 3px rgba(201, 152, 69, 0.20);
  --v95-exec-muted: #64748b;
  --v95-exec-table-head: linear-gradient(180deg, #eef4fb, #e3ebf7);
  --v95-exec-table-row: rgba(15, 23, 42, 0.018);
  --v95-exec-table-row-hover: rgba(201, 152, 69, 0.08);
}

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

body {
  letter-spacing: -0.005em;
}

:where(.kpi-val, .num, .r, td[class*="value"], .detail-total-value, .hb-val, .daily-compare-value, .trend-chip, .cbadge) {
  font-variant-numeric: tabular-nums lining-nums !important;
}

/* Header y hero: primer pantallazo mas ejecutivo y menos ruidoso */
.hdr {
  border-bottom: 1px solid var(--v95-exec-hairline-soft) !important;
  box-shadow: 0 8px 28px rgba(2, 8, 23, 0.18) !important;
}

.logo {
  letter-spacing: 0.08em !important;
}

.pill-status,
.bcra-pill,
.theme-toggle {
  min-height: 34px !important;
}

.page-hero-shell {
  padding-top: 14px !important;
  padding-bottom: 12px !important;
}

.page-hero {
  background: var(--v95-exec-panel) !important;
  border: 1px solid var(--v95-exec-hairline) !important;
  box-shadow: var(--v95-exec-shadow-soft) !important;
}

.page-hero-title {
  letter-spacing: -0.045em !important;
  line-height: 0.98 !important;
}

.page-hero-copy {
  max-width: 760px !important;
  color: var(--v95-exec-muted) !important;
}

.hero-chip {
  border-color: var(--v95-exec-hairline) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  min-height: 30px !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] .hero-chip {
  background: rgba(255, 255, 255, 0.82) !important;
}

.hero-chip--action {
  color: var(--acc-light, var(--acc)) !important;
  box-shadow: inset 0 0 0 1px rgba(214, 167, 86, 0.08) !important;
}

/* Filtros: controles mas obvios, targets tactiles y agrupacion visual */
.filter-panel {
  border-bottom: 1px solid var(--v95-exec-hairline-soft) !important;
  box-shadow: 0 12px 34px rgba(2, 8, 23, 0.16) !important;
}

.fp-inner {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.fp-top {
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.fp-main-controls {
  gap: 7px !important;
}

.pbtn,
.btn-xs,
.btn-ghost,
.table-action-btn,
.btn-toolbar-toggle,
.btn-ch-action {
  min-height: 34px !important;
  border-radius: 11px !important;
  font-weight: 700 !important;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease !important;
}

.pbtn:hover,
.btn-xs:hover,
.btn-ghost:hover,
.table-action-btn:hover,
.btn-toolbar-toggle:hover,
.btn-ch-action:hover {
  transform: translateY(-1px);
}

.pbtn.on {
  color: var(--acc-light, var(--acc)) !important;
  border-color: rgba(214, 167, 86, 0.58) !important;
  background: linear-gradient(180deg, rgba(214, 167, 86, 0.18), rgba(214, 167, 86, 0.08)) !important;
  box-shadow: inset 0 0 0 1px rgba(214, 167, 86, 0.10), 0 8px 22px rgba(214, 167, 86, 0.10) !important;
}

.date-pair {
  border: 1px solid var(--v95-exec-hairline-soft) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border-radius: 14px !important;
  padding: 5px 7px !important;
}

:root[data-theme="light"] .date-pair {
  background: rgba(255, 255, 255, 0.72) !important;
}

.sel-wrap,
.search-box {
  border-radius: 15px !important;
  border-color: var(--v95-exec-hairline) !important;
  background: var(--v95-exec-card-soft) !important;
}

.sel-wrap:focus-within,
.search-box:focus-within,
.date-pair:focus-within {
  border-color: rgba(214, 167, 86, 0.55) !important;
  box-shadow: var(--v95-exec-focus) !important;
}

.sel-lbl {
  color: var(--txt-soft, var(--mut)) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
}

.snum {
  box-shadow: inset 0 0 0 1px rgba(214, 167, 86, 0.18) !important;
}

select,
input[type="date"],
.search-input {
  font-size: 13px !important;
}

.pills {
  gap: 7px !important;
  margin-top: 10px !important;
}

.ap,
.search-chip,
.fp-note-pill,
.detail-strip-badge,
.cbadge {
  min-height: 28px !important;
  border-radius: 999px !important;
  border-color: rgba(214, 167, 86, 0.30) !important;
  background: rgba(214, 167, 86, 0.10) !important;
  color: var(--acc-light, var(--acc)) !important;
  font-weight: 700 !important;
}

.ap strong,
.search-chip strong {
  color: inherit !important;
}

.ax,
.search-chip-x,
.search-clear {
  opacity: 0.86 !important;
}

.ax:hover,
.search-chip:hover .search-chip-x,
.search-clear:hover {
  opacity: 1 !important;
}

/* KPIs: mas jerarquia, valores comparables y densidad ejecutiva */
.kpi-row {
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.kpi {
  background: var(--v95-exec-card) !important;
  border: 1px solid var(--v95-exec-hairline) !important;
  box-shadow: var(--v95-exec-shadow-soft) !important;
  padding: 16px 17px !important;
  min-height: 112px !important;
}

.kpi:hover {
  border-color: rgba(214, 167, 86, 0.30) !important;
  transform: translateY(-1px);
}

.kpi::before {
  height: 3px !important;
  opacity: 0.95 !important;
}

.kpi-lbl {
  color: var(--v95-exec-muted) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.105em !important;
  margin-bottom: 8px !important;
}

.kpi-val {
  font-family: var(--font-data, 'DM Mono', monospace) !important;
  font-size: clamp(23px, 2.35vw, 34px) !important;
  letter-spacing: var(--v95-exec-value-ls) !important;
  line-height: 0.98 !important;
}

.kpi-val.sm {
  font-size: clamp(18px, 1.8vw, 25px) !important;
}

.kpi-sub {
  color: var(--v95-exec-muted) !important;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
}

/* Cards y toolbars: superficies coherentes entre solapas */
.card,
.proj-hero-card,
.acum-card,
.detail-trend-card,
.freq-toolbar,
.acsum-toolbar,
.detail-toolbar,
.projection-hierarchy-toolbar,
.detail-strip-head {
  background: var(--v95-exec-card) !important;
  border-color: var(--v95-exec-hairline) !important;
  box-shadow: var(--v95-exec-shadow-soft) !important;
}

.card > .ch,
.ch,
.story-card > .ch {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)) !important;
}

:root[data-theme="light"] .card > .ch,
:root[data-theme="light"] .ch,
:root[data-theme="light"] .story-card > .ch {
  background: linear-gradient(180deg, rgba(239, 245, 252, 0.98), rgba(232, 239, 249, 0.96)) !important;
}

.ct,
.ds-card-title,
.detail-toolbar-section-title {
  color: var(--txt, #eaf0f7) !important;
  letter-spacing: 0.085em !important;
}

.snote,
.table-note,
.grupo-strip-hint,
.detail-toolbar-help,
.acsum-help,
.freq-help {
  color: var(--v95-exec-muted) !important;
}

/* Tablas: escaneo comercial, headers firmes y numeracion alineada */
.tw,
.detail-client-breakdown__table-wrap {
  border: 1px solid var(--v95-exec-hairline-soft) !important;
  background: rgba(2, 8, 23, 0.10) !important;
}

:root[data-theme="light"] .tw,
:root[data-theme="light"] .detail-client-breakdown__table-wrap {
  background: rgba(255, 255, 255, 0.58) !important;
}

table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

thead th,
.projection-hierarchy-table thead th,
.acum-table thead th,
.acsum-table thead th,
.freq-table thead th,
.detail-client-breakdown__table th {
  background: var(--v95-exec-table-head) !important;
  color: var(--txt, #eaf0f7) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--v95-exec-hairline) !important;
}

tbody td,
.projection-hierarchy-table td,
.acum-table td,
.acsum-table td,
.freq-table td,
.detail-client-breakdown__table td {
  border-bottom-color: var(--v95-exec-hairline-soft) !important;
}

tbody tr:nth-child(even):not(.row-total):not(.detail-grandtotal-row):not(.detail-summary-row) td {
  background: var(--v95-exec-table-row) !important;
}

tbody tr:hover td {
  background: var(--v95-exec-table-row-hover) !important;
}

td.r,
th.r,
td.num,
th.num,
.detail-total-value,
.acsum-table td:nth-last-child(-n + 4),
.freq-table td:nth-last-child(-n + 4) {
  text-align: right !important;
  font-family: var(--font-data, 'DM Mono', monospace) !important;
  letter-spacing: -0.035em !important;
}

tr.row-total td,
tr.detail-grandtotal-row td,
tr.detail-summary-row td,
tr.acsum-row-total td,
tr.freq-row-total td,
.proj-hierarchy-row--summary-total td {
  background: rgba(214, 167, 86, 0.12) !important;
  border-top: 1px solid rgba(214, 167, 86, 0.30) !important;
  color: var(--txt, #eaf0f7) !important;
}

:root[data-theme="light"] tr.row-total td,
:root[data-theme="light"] tr.detail-grandtotal-row td,
:root[data-theme="light"] tr.detail-summary-row td,
:root[data-theme="light"] tr.acsum-row-total td,
:root[data-theme="light"] tr.freq-row-total td,
:root[data-theme="light"] .proj-hierarchy-row--summary-total td {
  background: rgba(201, 152, 69, 0.12) !important;
}

/* Rankings y barras: peso visual sin perder valor exacto */
.hbars {
  padding: 14px 16px !important;
}

.hb-row,
.gk,
.story-card,
.detail-glance-card,
.hier-card {
  border-color: var(--v95-exec-hairline) !important;
}

.hb-row {
  min-height: 44px !important;
  border-radius: 14px !important;
  padding: 8px 10px !important;
  background: rgba(255, 255, 255, 0.025) !important;
}

:root[data-theme="light"] .hb-row {
  background: rgba(255, 255, 255, 0.70) !important;
}

.hb-name {
  font-weight: 700 !important;
  color: var(--txt, #eaf0f7) !important;
}

.hb-val,
.hb-share {
  font-family: var(--font-data, 'DM Mono', monospace) !important;
  font-weight: 800 !important;
}

.mini-bar-track,
.hb-track {
  background: rgba(148, 163, 184, 0.12) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.mini-bar-fill,
.hb-fill {
  border-radius: 999px !important;
}

.trend-chip,
.freq-seg-badge,
.detail-view-badge {
  min-height: 24px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.trend-chip.positive,
.delta-pos,
.v89-positive {
  background: var(--v95-exec-success-bg) !important;
}

.trend-chip.negative,
.delta-neg,
.v89-negative {
  background: var(--v95-exec-danger-bg) !important;
}

.trend-chip.neutral {
  background: rgba(148, 163, 184, 0.13) !important;
}

/* Estados: loading, vacio, error y offline con tono controlado */
.overlay {
  background: rgba(6, 10, 18, 0.86) !important;
}

.spin {
  border-width: 3px !important;
  box-shadow: 0 0 0 8px rgba(214, 167, 86, 0.08) !important;
}

.ovtxt {
  letter-spacing: 0.14em !important;
  font-weight: 800 !important;
}

.empty,
.chart-empty,
.search-dd-empty,
.hier-empty {
  border: 1px dashed var(--v95-exec-hairline) !important;
  border-radius: 18px !important;
  background: rgba(148, 163, 184, 0.055) !important;
  color: var(--v95-exec-muted) !important;
}

.empty {
  margin: 10px !important;
  padding: 34px 20px !important;
}

.eico {
  filter: saturate(0.92) !important;
  opacity: 0.95 !important;
}

.ebar {
  border-radius: 16px !important;
  border-color: rgba(224, 122, 122, 0.35) !important;
  background: linear-gradient(180deg, rgba(224, 122, 122, 0.12), rgba(224, 122, 122, 0.07)) !important;
  box-shadow: 0 12px 28px rgba(224, 122, 122, 0.08) !important;
}

.etit {
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}

.emsg {
  color: var(--v95-exec-muted) !important;
}

/* Navegacion: tab activo claramente reconocible */
.tabs-bar {
  border-bottom-color: var(--v95-exec-hairline-soft) !important;
  box-shadow: 0 10px 26px rgba(2, 8, 23, 0.12) !important;
}

.tab {
  border-radius: 14px 14px 0 0 !important;
  min-height: 42px !important;
}

.tab.on {
  box-shadow: inset 0 -2px 0 var(--acc, #d6a756), 0 -1px 18px rgba(214, 167, 86, 0.10) !important;
}

/* Mobile: usable con tacto y lectura priorizada */
@media (max-width: 760px) {
  .hdr {
    min-height: 54px !important;
    padding-inline: 12px !important;
  }

  .logo {
    font-size: 14px !important;
  }

  .page-hero-shell {
    padding: 10px 10px 8px !important;
  }

  .page-hero {
    border-radius: 18px !important;
    padding: 15px !important;
  }

  .page-hero-title {
    font-size: clamp(23px, 8vw, 34px) !important;
  }

  .page-hero-meta {
    gap: 7px !important;
  }

  .hero-chip {
    flex: 1 1 auto !important;
    justify-content: center !important;
  }

  .fp-inner {
    padding-inline: 10px !important;
  }

  .fp-top-left,
  .fp-main-controls,
  .date-pair {
    width: 100% !important;
  }

  .pbtn,
  .btn-xs,
  .table-action-btn,
  .btn-toolbar-toggle,
  .btn-ch-action {
    min-height: 40px !important;
  }

  .fp-main-controls .pbtn {
    flex: 1 1 calc(33.333% - 6px) !important;
    justify-content: center !important;
  }

  .date-pair {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 6px 8px !important;
  }

  .sel-wrap,
  .search-box {
    min-height: 46px !important;
  }

  .kpi-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .kpi {
    min-height: 104px !important;
    padding: 14px !important;
  }

  .kpi-val {
    font-size: clamp(21px, 7.4vw, 28px) !important;
  }

  .ch,
  .card > .ch {
    padding: 12px 13px !important;
  }

  .tw {
    border-radius: 16px !important;
  }

  table.responsive-stack tbody {
    gap: 12px !important;
    padding: 12px !important;
  }

  table.responsive-stack tbody tr {
    border-color: var(--v95-exec-hairline) !important;
    background: var(--v95-exec-card) !important;
    box-shadow: var(--v95-exec-shadow-soft) !important;
  }

  table.responsive-stack td {
    padding: 9px 0 !important;
    gap: 14px !important;
  }

  table.responsive-stack td::before {
    color: var(--v95-exec-muted) !important;
    font-weight: 800 !important;
  }

  .hb-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  .empty,
  .chart-empty,
  .hier-empty {
    padding: 26px 16px !important;
  }
}

@media (max-width: 430px) {
  .bcra-lbl,
  .pill-status #stxt {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fp-main-controls .pbtn {
    flex-basis: calc(50% - 5px) !important;
  }

  .kpi-row {
    grid-template-columns: 1fr !important;
  }

  .kpi {
    min-height: 96px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kpi:hover,
  .pbtn:hover,
  .btn-xs:hover,
  .btn-ghost:hover,
  .table-action-btn:hover,
  .btn-toolbar-toggle:hover,
  .btn-ch-action:hover {
    transform: none !important;
  }
}

/* Scroll hints sincronizados con app.js v95: solo se muestran si hay contenido oculto. */
.tw.has-h-overflow::after {
  opacity: 0 !important;
}
.tw.has-scroll-right::after {
  opacity: 1 !important;
}
.tw.has-scroll-left::before {
  opacity: 1 !important;
}

/* ─── Grupo strip: forzar fila única con scroll horizontal (anula ux-v89 desktop wrap) ─── */
@media (min-width: 768px) {
  .grupo-strip {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
}

/* ─── Proyección: color uniforme en filas de grupo (sin alternancia par/impar) ─── */
#projectionProductHierarchyTable tbody tr.proj-hierarchy-row--group,
#projectionProductHierarchyTable tbody tr.proj-hierarchy-row--group:nth-child(even) {
  background: transparent !important;
}

#projectionProductHierarchyTable .proj-hierarchy-row--group td {
  background: rgba(30, 42, 70, 0.85) !important;
}

#projectionProductHierarchyTable .proj-hierarchy-row--group td:first-child {
  background: rgba(22, 35, 62, 0.95) !important;
}


/* ══ css/ui-v96-filter-table-fit.css ══ */
/* =============================================================================
   UI-V96-FILTER-TABLE-FIT.CSS
   Correcciones incrementales solicitadas:
   1) Filtros completos: evita que Cód. Producto quede cortado en desktop.
   2) Resumen filtrado · Por cliente: Familias/Productos sin scroll horizontal.

   Alcance: solo presentación frontend. No cambia endpoints, payloads ni lógica.
   ============================================================================= */

/* Filtros: grilla fluida con wrap controlado y sin columnas fuera de cuadro. */
@media (min-width: 768px) {
  .filter-panel .fp-inner {
    width: 100% !important;
    max-width: min(1620px, calc(100vw - 32px)) !important;
  }

  .filter-panel .fp-selects {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  .filter-panel .fp-selects > .sel-wrap {
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* Cliente y Cód. Producto necesitan más aire por sus buscadores largos. */
  .filter-panel .fp-selects > .sel-wrap:nth-child(3),
  .filter-panel .fp-selects > .sel-wrap:nth-child(7) {
    grid-column: span 2 !important;
  }

  .filter-panel .search-wrap,
  .filter-panel .search-box,
  .filter-panel select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .filter-panel .search-input {
    width: 100% !important;
    min-width: 0 !important;
    text-overflow: ellipsis !important;
  }

  .filter-panel .sel-lbl {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (min-width: 1400px) {
  .filter-panel .fp-selects {
    grid-template-columns:
      minmax(145px, 0.82fr)
      minmax(145px, 0.82fr)
      minmax(260px, 1.35fr)
      minmax(160px, 0.92fr)
      minmax(145px, 0.82fr)
      minmax(145px, 0.82fr)
      minmax(265px, 1.38fr) !important;
  }

  .filter-panel .fp-selects > .sel-wrap:nth-child(3),
  .filter-panel .fp-selects > .sel-wrap:nth-child(7) {
    grid-column: auto !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .filter-panel .fp-selects {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 768px) and (max-width: 860px) {
  .filter-panel .fp-selects {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .filter-panel .fp-selects > .sel-wrap:nth-child(3),
  .filter-panel .fp-selects > .sel-wrap:nth-child(7) {
    grid-column: 1 / -1 !important;
  }
}

/* Resumen filtrado · Por cliente: cada visual usa el ancho completo del cuadro. */
@media (min-width: 768px) {
  .detail-client-breakdown__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .detail-client-breakdown__panel,
  .detail-client-breakdown__table-wrap {
    min-width: 0 !important;
  }

  .detail-client-breakdown__table-wrap {
    overflow-x: hidden !important;
  }

  .detail-client-breakdown__table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  .detail-client-breakdown__table th,
  .detail-client-breakdown__table td {
    padding: 8px 9px !important;
    min-width: 0 !important;
  }

  .detail-client-breakdown__table th.r,
  .detail-client-breakdown__table td.r {
    white-space: nowrap !important;
  }

  .detail-client-breakdown__table td:first-child,
  .detail-client-breakdown__table th:first-child,
  .detail-client-breakdown__table td:nth-child(3),
  .detail-client-breakdown__table th:nth-child(3) {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  /* Familias: Familia, Productos, Registros, Kilos y Part. visibles sin scroll. */
  .detail-client-breakdown__panel:first-child .detail-client-breakdown__table th:nth-child(1),
  .detail-client-breakdown__panel:first-child .detail-client-breakdown__table td:nth-child(1) { width: 36% !important; }
  .detail-client-breakdown__panel:first-child .detail-client-breakdown__table th:nth-child(2),
  .detail-client-breakdown__panel:first-child .detail-client-breakdown__table td:nth-child(2) { width: 16% !important; }
  .detail-client-breakdown__panel:first-child .detail-client-breakdown__table th:nth-child(3),
  .detail-client-breakdown__panel:first-child .detail-client-breakdown__table td:nth-child(3) { width: 17% !important; }
  .detail-client-breakdown__panel:first-child .detail-client-breakdown__table th:nth-child(4),
  .detail-client-breakdown__panel:first-child .detail-client-breakdown__table td:nth-child(4) { width: 18% !important; }
  .detail-client-breakdown__panel:first-child .detail-client-breakdown__table th:nth-child(5),
  .detail-client-breakdown__panel:first-child .detail-client-breakdown__table td:nth-child(5) { width: 13% !important; }

  /* Productos: también queda sin scroll horizontal en el mismo desglose. */
  .detail-client-breakdown__table-wrap--products .detail-client-breakdown__table th:nth-child(1),
  .detail-client-breakdown__table-wrap--products .detail-client-breakdown__table td:nth-child(1) { width: 24% !important; }
  .detail-client-breakdown__table-wrap--products .detail-client-breakdown__table th:nth-child(2),
  .detail-client-breakdown__table-wrap--products .detail-client-breakdown__table td:nth-child(2) { width: 10% !important; }
  .detail-client-breakdown__table-wrap--products .detail-client-breakdown__table th:nth-child(3),
  .detail-client-breakdown__table-wrap--products .detail-client-breakdown__table td:nth-child(3) { width: 34% !important; }
  .detail-client-breakdown__table-wrap--products .detail-client-breakdown__table th:nth-child(4),
  .detail-client-breakdown__table-wrap--products .detail-client-breakdown__table td:nth-child(4) { width: 16% !important; }
  .detail-client-breakdown__table-wrap--products .detail-client-breakdown__table th:nth-child(5),
  .detail-client-breakdown__table-wrap--products .detail-client-breakdown__table td:nth-child(5) { width: 16% !important; }
}

@media (min-width: 768px) and (max-width: 980px) {
  .detail-client-breakdown__table th,
  .detail-client-breakdown__table td {
    padding: 7px 7px !important;
    font-size: 11.5px !important;
  }

  .detail-client-breakdown__table th {
    font-size: 9.5px !important;
    letter-spacing: 0.045em !important;
  }
}


/* ══ css/ui-v99-cadencia-profesional-20d.css ══ */
/* ==========================================================
   v99 — Cadencia profesional 90d + avance hábil
   Enfoque: lectura clara de la nueva fórmula sin tocar flujo UI.
   ========================================================== */

#page-frecuencia .freq-table th[title] {
  cursor: help;
}

#page-frecuencia .freq-confidence-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: rgba(15, 23, 42, 0.58);
  color: var(--muted, #cbd5e1);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

#page-frecuencia .freq-confidence-alta {
  border-color: rgba(34, 197, 94, 0.58);
  background: rgba(16, 185, 129, 0.13);
  color: #34d399;
}

#page-frecuencia .freq-confidence-media {
  border-color: rgba(245, 158, 11, 0.58);
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

#page-frecuencia .freq-confidence-baja {
  border-color: rgba(248, 113, 113, 0.58);
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
}

#page-frecuencia .freq-rate-wrap {
  min-width: 116px;
}

#page-frecuencia .freq-table .freq-td-name {
  max-width: 420px;
}

@media (max-width: 960px) {
  #page-frecuencia .freq-confidence-badge {
    min-width: 48px;
    padding-inline: 7px;
    font-size: 10px;
  }

  #page-frecuencia .freq-rate-wrap {
    min-width: 96px;
  }
}

/* v99: semana comercial lunes-viernes; mes normalizado a 20 días hábiles y peso histórico dinámico por días hábiles faltantes. */


/* ══ css/estacionalidad.css ══ */
/* estacionalidad.css */

/* Selector de vista */
.est-selector {
  display: flex;
  gap: 8px;
  padding: 16px 0 12px;
  border-bottom: 1px solid #1e293b;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.est-view-btn {
  padding: 6px 16px;
  border-radius: 6px;
  border: 1px solid #334155;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}
.est-view-btn.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
  font-weight: 600;
}
.est-view-btn:hover:not(.active) { border-color: #3b82f6; color: #e2e8f0; }

.est-view.hidden { display: none; }

.est-loading { padding: 40px; text-align: center; color: #64748b; }
.est-error { padding: 20px; color: #f87171; background: rgba(220,38,38,.1); border-radius: 8px; }
.est-section-title {
  font-size: 11px; color: #64748b; margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: .05em;
}

/* Leyenda heatmap */
.est-legend { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.est-leg { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #fff; }

/* Heatmap */
.est-table-wrap { overflow-x: auto; margin-bottom: 4px; }
.est-heatmap { border-collapse: collapse; font-size: 12px; width: 100%; }
.est-heatmap th {
  background: #0f172a; color: #64748b; padding: 6px 8px;
  font-size: 11px; font-weight: 600; text-align: center; white-space: nowrap;
}
.est-heatmap th:first-child { text-align: left; min-width: 140px; }
.est-heatmap td {
  padding: 5px 8px; text-align: center;
  font-size: 12px; font-weight: 600;
  border: 1px solid #0f172a;
}
.est-familia-label {
  text-align: left !important; font-weight: 600; color: #e2e8f0;
  background: #1e293b !important; white-space: nowrap;
}
.est-heatmap-row { cursor: pointer; }
.est-heatmap-row:hover td { opacity: .85; }
.est-heatmap-row.est-selected .est-familia-label { color: #3b82f6; }

/* Chart resumen */
.est-chart-wrap {
  margin-top: 20px; padding: 16px;
  background: #1e293b; border-radius: 8px;
}
.est-chart-wrap.hidden { display: none; }
.est-chart-title { font-size: 13px; font-weight: 600; color: #e2e8f0; margin-bottom: 12px; }
#est-resumen-chart, #est-familias-chart { width: 100%; display: block; }

/* Familias */
.est-familia-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.est-familia-chip {
  padding: 4px 12px; border-radius: 20px; border: 1px solid #334155;
  background: transparent; color: #64748b; cursor: pointer; font-size: 12px; transition: all .15s;
}
.est-familia-chip.active { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.est-familias-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .est-familias-split { grid-template-columns: 1fr; } }
.est-familias-table-wrap { overflow-x: auto; }
.est-familias-table { border-collapse: collapse; font-size: 12px; width: 100%; }
.est-familias-table th {
  background: #0f172a; color: #64748b; padding: 5px 8px; text-align: center; font-size: 11px;
}
.est-familias-table td {
  padding: 4px 8px; text-align: right;
  border-bottom: 1px solid #0f172a; color: #e2e8f0; font-size: 12px;
}
.est-tipo-label { text-align: left !important; color: #94a3b8; white-space: nowrap; }
.est-ie-row td { background: rgba(59,130,246,.06); }
.est-prom-row td { border-top: 2px solid #334155; color: #94a3b8; }
.est-familias-chart-wrap { padding: 12px; background: #1e293b; border-radius: 8px; }

/* CodDes acordeón */
.est-accordion { display: flex; flex-direction: column; gap: 4px; }
.est-acc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: #1e293b;
  border: 1px solid #334155; border-left: 3px solid #3b82f6;
  border-radius: 6px; cursor: pointer; user-select: none;
}
.est-acc-header:hover { background: rgba(59,130,246,.05); }
.est-acc-name { font-weight: 700; font-size: 13px; color: #e2e8f0; }
.est-acc-meta { font-size: 11px; color: #64748b; }
.est-acc-toggle { font-size: 12px; color: #64748b; transition: transform .2s; }
.est-acc-item.open .est-acc-toggle { transform: rotate(180deg); }
.est-acc-body { overflow: hidden; max-height: 0; transition: max-height .25s ease; }
.est-acc-body.open { max-height: 800px; }
.est-acc-table-wrap { overflow-x: auto; padding: 4px 0 8px; }
.est-acc-table { border-collapse: collapse; font-size: 11px; width: 100%; }
.est-acc-table th {
  background: #0f172a; color: #64748b; padding: 4px 6px; text-align: center;
}
.est-acc-table td {
  padding: 3px 6px; text-align: center;
  border-bottom: 1px solid #0f172a; font-weight: 600;
}
.est-acc-table td:first-child { text-align: left; color: #94a3b8; font-weight: 400; white-space: nowrap; }

/* Q1 */
.est-q1-wrap { overflow-x: auto; }
.est-q1-table { border-collapse: collapse; font-size: 11px; width: 100%; min-width: 900px; }
.est-q1-table th {
  background: #0f172a; color: #64748b; padding: 5px 6px;
  text-align: center; white-space: nowrap;
}
.est-q1-table th.est-mes-header {
  color: #3b82f6; font-size: 12px; font-weight: 700;
  border-bottom: 2px solid #3b82f6;
}
.est-q1-table td {
  padding: 4px 6px; border-bottom: 1px solid #0f172a;
  text-align: center; color: #e2e8f0;
}
.est-q1-table td:first-child,
.est-q1-table td:nth-child(2) { text-align: left; color: #94a3b8; white-space: nowrap; }
.est-alert-warn { color: #f59e0b; }
.est-alert-ok   { color: #10b981; }
.est-delta-pos  { color: #4ade80; }
.est-delta-neg  { color: #f87171; }


/* ══ css/ux-v101-fluidez.css ══ */
/* ═══════════════════════════════════════════════════════════════════
   UX v101 — Fluidez: fix dropdown clientes + animaciones + micro-UX
   Solo CSS. No cambia ninguna funcion. Cargar al final del <head>.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. FIX: el dropdown del buscador de clientes se cortaba ─────────
   .fp-body usa overflow:hidden para animar el colapso del panel.
   Mientras un dropdown este abierto, liberamos el recorte SOLO en ese
   momento (no afecta la animacion de colapso/expansion del panel). */
.fp-body:has(.search-dd.open),
.fp-body:has(.search-dd.open) > * {
  overflow: visible !important;
}
/* El card del filtro activo se eleva sobre sus vecinos */
.fp-selects .sel-wrap:has(.search-dd.open) {
  position: relative;
  z-index: 320;
}
/* Mas espacio util para la lista de resultados */
.search-dd { max-height: 340px; }

/* ── 2. Entrada animada del dropdown ──────────────────────────────────── */
.search-dd.open {
  animation: ux101-dd-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top center;
  will-change: transform, opacity;
}
@keyframes ux101-dd-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
/* Items del dropdown: hover con desplazamiento sutil */
.search-dd-item {
  transition: background-color 0.14s ease, padding-left 0.14s ease;
  border-left: 2px solid transparent;
}
.search-dd-item:hover,
.search-dd-item[aria-selected="true"] {
  background: rgba(245, 158, 11, 0.10);
  border-left-color: rgba(245, 158, 11, 0.65);
  padding-left: 14px;
}
/* Scrollbar fina y acorde al tema dentro del dropdown */
.search-dd::-webkit-scrollbar { width: 8px; }
.search-dd::-webkit-scrollbar-track { background: transparent; }
.search-dd::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28);
  border-radius: 4px;
}
.search-dd::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.45); }

/* ── 3. Micro-interacciones de filtros ────────────────────────────────── */
.sel-wrap select,
.search-box,
input[type="date"] {
  transition: border-color 0.16s ease, box-shadow 0.16s ease,
              background-color 0.16s ease;
}
.sel-wrap select:hover,
.search-box:hover,
input[type="date"]:hover {
  border-color: rgba(245, 158, 11, 0.45);
}
.sel-wrap select:focus-visible,
input[type="date"]:focus-visible {
  outline: none;
  border-color: rgba(245, 158, 11, 0.75);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}

/* Pills de filtros activos: aparicion animada */
.pills > * { animation: ux101-pill-in 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes ux101-pill-in {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* ── 4. Botones y tabs con respuesta tactil ───────────────────────────── */
button, .btn-xs {
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, transform 0.12s ease,
              box-shadow 0.15s ease;
}
button:active, .btn-xs:active { transform: scale(0.97); }
.tabs-bar button { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }

/* ── 5. Cards y KPIs: elevacion sutil en hover ────────────────────────── */
.kpi, .gk, .cc, .story-card {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s ease, border-color 0.18s ease;
}
.kpi:hover, .gk:hover, .cc:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.30);
  border-color: rgba(148, 163, 184, 0.32);
}

/* Filas de tablas: hover suave */
tbody tr { transition: background-color 0.12s ease; }

/* ── 6. Aparicion suave del contenido al cambiar de vista ─────────────── */
main, .tab-panel, [role="tabpanel"] {
  animation: ux101-fade-in 0.24s ease;
}
@keyframes ux101-fade-in {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}

/* ── 7. Accesibilidad: respetar movimiento reducido ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   UX v103 — Filtros unificados + filas completas + modo liviano
   ═══════════════════════════════════════════════════════════════════ */

/* ── 8. FILAS COMPLETAS EN EL DROPDOWN (fix corte a mitad de item) ──
   Filas de UNA linea con altura uniforme: el nombre se corta con "…"
   y el numero queda siempre visible a la derecha. Con scroll-snap la
   lista se detiene siempre en el borde de una fila: nunca mas un
   cliente cortado por la mitad. */
.search-dd {
  scroll-snap-type: y proximity;
  scroll-padding-top: 34px;            /* alto del encabezado sticky */
  overscroll-behavior: contain;         /* no arrastra el scroll de la pagina */
  scrollbar-gutter: stable;
}
.search-dd-item {
  scroll-snap-align: start;
  min-height: 40px;
  flex-wrap: nowrap;
}
.search-dd-main {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.search-dd-side {
  white-space: nowrap;
  flex-shrink: 0;
}
/* ── 9. SELECTS NATIVOS CON EL MISMO DESPLEGABLE QUE "CLIENTE" ──────
   Chrome/Edge modernos permiten estilar el picker nativo con CSS puro
   (appearance: base-select). En navegadores sin soporte, el select
   sigue siendo 100% nativo: cero riesgo funcional. */
@supports (appearance: base-select) {
  .fp-selects select,
  .detail-head-filter select {
    appearance: base-select;
  }
  .fp-selects select::picker(select),
  .detail-head-filter select::picker(select) {
    appearance: base-select;
    background: var(--card, #131722);
    border: 1px solid var(--brd, #262b3d);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
    padding: 4px;
    margin-top: 4px;
    max-height: 340px;
    scrollbar-width: thin;
    /* misma animacion de entrada que el buscador de clientes */
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                overlay 0.18s allow-discrete, display 0.18s allow-discrete;
  }
  .fp-selects select:open::picker(select),
  .detail-head-filter select:open::picker(select) {
    opacity: 1;
    transform: none;
  }
  @starting-style {
    .fp-selects select:open::picker(select),
    .detail-head-filter select:open::picker(select) {
      opacity: 0;
      transform: translateY(-6px) scale(0.985);
    }
  }
  .fp-selects select option,
  .detail-head-filter select option {
    color: var(--txt, #e5e9f2);
    font-size: 12px;
    padding: 10px;
    min-height: 38px;
    border-radius: 7px;
    border-left: 2px solid transparent;
    transition: background-color 0.14s ease, padding-left 0.14s ease;
  }
  .fp-selects select option:hover,
  .detail-head-filter select option:hover {
    background: rgba(245, 158, 11, 0.10);
    border-left-color: rgba(245, 158, 11, 0.65);
    padding-left: 14px;
  }
  .fp-selects select option:checked,
  .detail-head-filter select option:checked {
    background: rgba(245, 158, 11, 0.14);
    border-left-color: rgba(245, 158, 11, 0.85);
    font-weight: 600;
  }
  .fp-selects select option::checkmark,
  .detail-head-filter select option::checkmark {
    color: rgb(245, 158, 11);
  }
}

/* ── 10. MODO LIVIANO: animar solo transform/opacity (GPU) ──────────
   En PCs modestas, animar box-shadow o colores fuerza repintados
   costosos. Se anula la transicion de sombra: la elevacion en hover
   se resuelve solo con transform (compuesto por GPU, fluido siempre). */
.kpi, .gk, .cc, .story-card {
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.kpi:hover, .gk:hover, .cc:hover {
  transform: translateY(-2px);
  /* sombra fija sin transicion: aparece con el transform, sin repintar cuadro a cuadro */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
button, .btn-xs {
  transition: transform 0.12s ease, background-color 0.15s ease,
              color 0.15s ease, border-color 0.15s ease;
}
/* Fade de cambio de vista mas corto y solo opacidad (GPU) */
main, .tab-panel, [role="tabpanel"] {
  animation-duration: 0.18s;
}
/* El dropdown promueve capa solo mientras esta abierto (ya via .open);
   items sin transicion de padding en equipos lentos: usar translate */
.search-dd-item,
.search-dd-item:hover,
.search-dd-item[aria-selected="true"] {
  padding-left: 10px;   /* sin cambio de padding: cero reflow */
}
.search-dd-item {
  transition: background-color 0.14s ease, border-color 0.14s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   UX v104 — Filtros compactos + capas ordenadas + pulido profesional
   ═══════════════════════════════════════════════════════════════════ */

/* ── 11. FILTROS COMPACTOS: misma funcion, ~30% menos alto ────────── */
.fp-selects { gap: 8px; }
.fp-selects .sel-wrap {
  padding: 8px 10px;
  border-radius: 10px;
}
.fp-selects .sel-wrap label,
.fp-selects .sel-head {
  font-size: 10px;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
/* numeritos de paso (1,2,3...) mas discretos */
.fp-selects .sel-num,
.fp-selects .step-badge {
  width: 16px; height: 16px;
  font-size: 9px;
  line-height: 16px;
}
.fp-selects select,
.fp-selects .search-box {
  min-height: 34px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 12px;
}
.search-meta { font-size: 10px; margin-top: 3px; }
.pills { gap: 6px; margin-top: 6px; }
.pills > * { padding-top: 3px; padding-bottom: 3px; font-size: 11px; }

/* ── 12. CAPAS ORDENADAS: jerarquia z-index unica y explicita ───────
   base(0) < contenido pegajoso(60) < panel filtros(200) <
   dropdowns(320) < overlays/modales(1000+). Evita montajes. */
.filter-panel { z-index: 200; }
.search-dd { z-index: 330; }
.fp-selects .sel-wrap:has(.search-dd.open) { z-index: 325; }
@supports (appearance: base-select) {
  .fp-selects select::picker(select),
  .detail-head-filter select::picker(select) { z-index: 330; }
}
/* tooltips y encabezados sticky de tablas por debajo de los dropdowns */
thead th { z-index: 40; }
[data-tooltip]::after, .tooltip { z-index: 500; }

/* ── 13. PULIDO PROFESIONAL ─────────────────────────────────────────
   Ritmo visual consistente: un solo radio, una sola sombra, foco
   visible uniforme, sin ruido. */
:focus-visible {
  outline: 2px solid rgba(245, 158, 11, 0.7);
  outline-offset: 2px;
  border-radius: 6px;
}
::selection { background: rgba(245, 158, 11, 0.28); }
/* separadores y bordes con el mismo tono en todo el tablero */
.kpi, .gk, .cc, .sel-wrap, .search-dd { border-color: rgba(148, 163, 184, 0.16); }
/* numeros tabulares en KPIs y tablas: cifras alineadas, sin "bailes" */
.kpi-val, td.num, td.r, .mbk-pill {
  font-variant-numeric: tabular-nums;
}
/* transiciones de altura del panel de filtros mas cortas en equipos lentos */
.fp-body { transition-duration: 0.24s; }

/* ═══════════════════════════════════════════════════════════════════
   UX v105 — Animaciones modernas (solo transform/opacity, GPU)
   ═══════════════════════════════════════════════════════════════════ */
/* Entrada escalonada de KPIs al cargar */
.kpi { animation: ux105-rise 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.kpi:nth-child(1) { animation-delay: 0.02s; }
.kpi:nth-child(2) { animation-delay: 0.07s; }
.kpi:nth-child(3) { animation-delay: 0.12s; }
.kpi:nth-child(4) { animation-delay: 0.17s; }
.kpi:nth-child(5) { animation-delay: 0.22s; }
.kpi:nth-child(6) { animation-delay: 0.27s; }
@keyframes ux105-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
/* Cards de contenido: aparicion suave al montar */
.gk, .cc, .story-card { animation: ux105-fade-up 0.32s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
@keyframes ux105-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* Tab activa: subrayado que se expande desde el centro */
.tabs-bar button { position: relative; }
.tabs-bar button::after {
  content: "";
  position: absolute;
  left: 18%; right: 18%; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: rgb(245, 158, 11);
  transform: scaleX(0);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.tabs-bar button[aria-selected="true"]::after,
.tabs-bar button.active::after { transform: scaleX(1); }
/* Boton primario: brillo sutil al hover (compuesto, sin repintado) */
button.primary, .btn-primary, #btnAplicar {
  position: relative;
  overflow: hidden;
}
button.primary::before, .btn-primary::before, #btnAplicar::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  pointer-events: none;
}
button.primary:hover::before, .btn-primary:hover::before, #btnAplicar:hover::before {
  transform: translateX(100%);
}
/* Chips de tendencia: pop al aparecer */
.trend-chip { animation: ux105-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
@keyframes ux105-pop {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* ═══ UX v106: buscadores sin animacion + resaltado + nivel 3 ═══ */
.search-dd.open { animation: none; will-change: auto; }
mark.dd-hl {
  background: rgba(245, 158, 11, 0.24);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.hier-card--level-3 { min-height: 92px; }
.hier-card--level-3 .hier-card-photo { width: 30px; height: 30px; }
.hier-stage-block--tertiary { margin-top: 14px; }
.hier-level--products .hier-card { font-size: 12px; }

/* ═══ UX v107: Nivel 3 en filas legibles con icono por producto ═══ */
.hier-prod-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(100%, 860px);
  margin: 10px auto 0;
}
.hier-prod-row {
  display: grid;
  grid-template-columns: 26px 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: var(--card, #131722);
  font-size: 12px;
  animation: ux105-fade-up 0.28s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.hier-prod-row:hover {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.05);
}
.hier-prod-rank {
  font-size: 10px;
  opacity: 0.55;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hier-prod-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--pi, #f59e0b);
  background: color-mix(in srgb, var(--pi, #f59e0b) 15%, transparent);
}
.hier-prod-icon svg { width: 18px; height: 18px; }
.hier-prod-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.hier-prod-kilos {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hier-prod-delta {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hier-prod-delta.positive { background: rgba(34, 197, 94, 0.14); color: #4ade80; }
.hier-prod-delta.negative { background: rgba(239, 68, 68, 0.14); color: #f87171; }
.hier-prod-delta.neutral  { background: rgba(148, 163, 184, 0.14); color: #94a3b8; }
@media (max-width: 640px) {
  .hier-prod-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .hier-prod-rank, .hier-prod-delta { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   UX v109 — Pulido integral: scroll-top, buscadores flotantes, tema
   claro, tipografia sobria, balance de layout y presets adaptables
   ═══════════════════════════════════════════════════════════════════ */

/* (1) Boton "volver arriba": discreto y sin tapar contenido */
.ux-scroll-top {
  width: 38px !important;
  height: 38px !important;
  opacity: 0.55;
  font-size: 15px;
}
.ux-scroll-top:hover { opacity: 1; }
main, [role="tabpanel"], .tab-panel { padding-bottom: 110px; }

/* (2a) "Buscar dentro del resumen": dropdown flotante, no empuja el layout */
.detail-tool-field--wide { position: relative; }
.detail-tool-field--wide .detail-search-preview {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 340;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--card, #131722);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
  animation: none;
}
/* Se abre solo mientras el campo tiene foco; click afuera lo cierra */
.detail-tool-field--wide:not(:focus-within) .detail-search-preview { display: none; }

/* (2b) Buscadores del panel de filtros: ancho acotado y scroll interno */
.search-dd {
  width: 100%;
  min-width: 260px;
  max-width: 440px;
  max-height: 340px;
  overflow-y: auto;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
}

/* (3 + 11) Numeros sobrios: tipografia neutra, sin glow/neón */
.kpi-val, .gk-val, .story-card-value, .proj-hero-val, .hier-kpi-value,
.hier-card-value, .hier-prod-kilos, td.num, td.r, .bcra-val,
#app [class*="-val"], #app [class*="kpi"] strong {
  font-family: "DM Sans", "Inter", system-ui, sans-serif !important;
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow: none !important;
  letter-spacing: 0.005em;
}
.kpi, .gk, .story-card, .proj-hero { text-shadow: none; }

/* (8) Tema claro uniforme: inputs, selects, buscadores y filas */
:root[data-theme="light"] select,
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] .search-box {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.18);
}
:root[data-theme="light"] .search-box input { background: transparent; color: inherit; }
:root[data-theme="light"] .search-dd,
:root[data-theme="light"] .detail-search-preview {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}
:root[data-theme="light"] .search-dd-item:hover,
:root[data-theme="light"] .search-dd-item[aria-selected="true"] {
  background: rgba(217, 119, 6, 0.10);
}
:root[data-theme="light"] .hier-prod-row { background: #ffffff; border-color: rgba(15, 23, 42, 0.10); }
:root[data-theme="light"] mark.dd-hl { background: rgba(217, 119, 6, 0.22); }

/* (9) Balance de tarjetas: cada card con su alto natural */
.graf-grid, .charts-grid, .story-grid, .acsum-grid { align-items: start; }
.gk { align-self: start; }
.hier-stage-block.is-idle { min-height: 0; padding-block: 10px; }

/* (10) Presets sugeridos: envuelven a varias filas, sin scroll oculto */
.detail-toolbar-presets { overflow: visible; }
.detail-toolbar-presets > div,
.detail-preset-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow-x: visible;
}
.detail-preset-btn { max-width: none; }
.detail-preset-btn__title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* ═══ UX v110: "Buscar dentro del resumen" = combobox real ═══ */
/* El subarbol del buscador se apila POR ENCIMA de Presets y demas capas */
.detail-toolbar-main { position: relative; z-index: 360; }
.detail-tool-field--wide { position: relative; z-index: 361; }

.detail-tool-field--wide .detail-search-preview {
  /* fondo SOLIDO (sin variable con alfa): nada se transluce detras */
  background: #10151f;
  border: 1px solid rgba(148, 163, 184, 0.28);
  padding: 0;
  outline: none;
  z-index: 365;
}
:root[data-theme="light"] .detail-tool-field--wide .detail-search-preview {
  background: #ffffff;
}
/* Encabezado fijo con el conteo, como "25 de 25 productos" */
.detail-search-preview-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: inherit;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  font-size: 11px;
}
.detail-search-preview-list { padding: 4px; display: flex; flex-direction: column; gap: 2px; }
/* Items como filas de combobox: hover ambar, sin perder el estilo */
.detail-search-preview-item {
  border-left: 2px solid transparent;
  border-radius: 8px;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.detail-search-preview-item:hover,
.detail-search-preview-item:focus-visible {
  background: rgba(245, 158, 11, 0.10);
  border-left-color: rgba(245, 158, 11, 0.65);
}
/* Scrollbar fina para la lista predictiva */
.detail-search-preview::-webkit-scrollbar { width: 8px; }
.detail-search-preview::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28);
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   v113 — Buscador del resumen sin animación de re-render
   Mientras se escribe en #detailSearch, el JS agrega la clase
   .detail-search-typing al <body>. Con ella se anulan TODAS las
   animaciones de entrada (fade, stagger, slide) del panel activo,
   para que el filtrado predictivo se vea instantáneo y estable.
   La búsqueda / autocompletado NO se toca: solo la animación.
   ═══════════════════════════════════════════════════════════════════ */
body.detail-search-typing .page.on,
body.detail-search-typing .page.on *,
body.detail-search-typing .page.on *::before,
body.detail-search-typing .page.on *::after {
  animation: none !important;
  transition: none !important;
}