/* «Voz del cliente» (static/insights.js), pestaña de Informes. Colores como tokens: el modo
   oscuro tiene sus propios pasos (no una inversión) y se activa con `data-theme="dark"` en
   <html> o, si la página no fija tema, con el modo oscuro del sistema. */
.insights {
  --ins-surface:#ffffff; --ins-surface-2:#faf8f5; --ins-border:#e6ddd2; --ins-ink:#2f2721;
  --ins-ink-2:#5d554d; --ins-muted:#837a70; --ins-grid:#ece6de; --ins-accent:#84633e;
  --ins-now:#2a78d6; --ins-previous:#a8a29a; --ins-up:#a14a17; --ins-down:#1d6b3f;
  --ins-chip:#f2e9dc; --ins-chip-ink:#3e2f22; --ins-warn-bg:#fff6e5; --ins-warn-border:#e7c27d;
  --ins-empty-bg:#f4f1ec;
  color:var(--ins-ink);
}
:root[data-theme="dark"] .insights {
  --ins-surface:#1f1d1a; --ins-surface-2:#262320; --ins-border:#3a3530; --ins-ink:#f2ede6;
  --ins-ink-2:#c9c0b5; --ins-muted:#a39a8f; --ins-grid:#34302b; --ins-accent:#d2ad7f;
  --ins-now:#3987e5; --ins-previous:#7d776f; --ins-up:#f0a070; --ins-down:#6fd09a;
  --ins-chip:#3a3128; --ins-chip-ink:#f2e3cf; --ins-warn-bg:#3a2f1a; --ins-warn-border:#8a6a2a;
  --ins-empty-bg:#2a2622;
  background:var(--ins-surface); color-scheme:dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .insights {
    --ins-surface:#1f1d1a; --ins-surface-2:#262320; --ins-border:#3a3530; --ins-ink:#f2ede6;
    --ins-ink-2:#c9c0b5; --ins-muted:#a39a8f; --ins-grid:#34302b; --ins-accent:#d2ad7f;
    --ins-now:#3987e5; --ins-previous:#7d776f; --ins-up:#f0a070; --ins-down:#6fd09a;
    --ins-chip:#3a3128; --ins-chip-ink:#f2e3cf; --ins-warn-bg:#3a2f1a; --ins-warn-border:#8a6a2a;
    --ins-empty-bg:#2a2622;
    background:var(--ins-surface); color-scheme:dark;
  }
}
.insights .hint { color:var(--ins-muted); }
.insights h2 { margin:0; color:var(--ins-ink); }
.insights h3 { margin:22px 0 8px; font-size:15px; color:var(--ins-ink); }
.ins-controls { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:16px 0 10px; }
.ins-controls label { display:grid; gap:6px; color:var(--ins-ink-2); font-size:12px; font-weight:650; }
.ins-controls select,.ins-controls input { width:100%; min-width:0; padding:8px 10px; border:1px solid var(--ins-border);
  border-radius:8px; background:var(--ins-surface); color:var(--ins-ink); }
.ins-filters,.ins-chips,.ins-pills { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0 14px; }
.ins-filter { display:inline-flex; align-items:center; gap:6px; padding:3px 4px 3px 12px; border:1px solid var(--ins-border);
  border-radius:999px; background:var(--ins-surface); color:var(--ins-ink-2); font-size:12px; font-weight:650; }
.ins-filter select { border:0; background:transparent; color:var(--ins-ink); padding:4px 6px; font-weight:600; max-width:190px; }
.ins-filter.is-active { border-color:var(--ins-accent); background:var(--ins-chip); color:var(--ins-chip-ink); }
.ins-chip { padding:6px 12px; border-radius:999px; border:1px solid var(--ins-border); background:var(--ins-surface);
  color:var(--ins-ink-2); font-size:12.5px; }
.ins-chip.is-active { background:var(--ins-chip); color:var(--ins-chip-ink); border-color:var(--ins-accent); }
.ins-pill { padding:4px 10px; border-radius:999px; background:var(--ins-empty-bg); color:var(--ins-ink-2); font-size:12px; }
.ins-period { margin:6px 0 10px; }
.ins-coverage { margin:8px 0 18px; padding:12px 16px; border-radius:10px; border:1px solid var(--ins-border); background:var(--ins-surface-2); }
.ins-coverage p { margin:4px 0; color:var(--ins-ink-2); font-size:13px; line-height:1.45; }
.ins-coverage p:first-child { color:var(--ins-ink); font-weight:650; }
.ins-coverage-sparse,.ins-coverage-empty { background:var(--ins-warn-bg); border-color:var(--ins-warn-border); }
.ins-block { margin:18px 0 26px; padding:18px 20px; border:1px solid var(--ins-border); border-radius:12px; background:var(--ins-surface); }
.ins-block-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.ins-block > .hint { margin:6px 0 12px; }
.ins-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:10px 0 6px; }
.ins-kpi { display:flex; flex-direction:column; gap:5px; padding:12px 14px; border:1px solid var(--ins-border);
  border-radius:10px; background:var(--ins-surface-2); min-height:96px; }
.ins-kpi-label { font-size:12.5px; font-weight:650; color:var(--ins-ink-2); }
.ins-kpi strong { font-size:25px; line-height:1.1; color:var(--ins-ink); }
.ins-kpi small { font-size:11.5px; color:var(--ins-muted); }
.ins-delta { font-size:12px; color:var(--ins-muted); }
.ins-delta-up { color:var(--ins-up); }
.ins-delta-down { color:var(--ins-down); }
.ins-legend { display:flex; gap:16px; flex-wrap:wrap; margin:12px 0 4px; font-size:12px; color:var(--ins-ink-2); }
.ins-legend span { display:inline-flex; align-items:center; gap:6px; }
.ins-key { display:inline-block; width:16px; height:4px; border-radius:2px; }
.ins-key-now { background:var(--ins-now); height:8px; }
.ins-key-previous { background:var(--ins-previous); }
.ins-chart-wrap { width:100%; overflow:hidden; }
.ins-chart { display:block; width:100%; max-width:900px; height:auto; font-family:inherit; }
.ins-bars { max-width:760px; }
.ins-grid { stroke:var(--ins-grid); stroke-width:1; }
.ins-axis { fill:var(--ins-muted); font-size:11px; }
.ins-label { fill:var(--ins-ink-2); font-size:12px; }
.ins-value { fill:var(--ins-ink); font-size:12px; font-weight:650; }
.ins-line { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.ins-line-now { stroke:var(--ins-now); }
.ins-line-previous { stroke:var(--ins-previous); stroke-dasharray:5 4; }
.ins-dot { fill:var(--ins-now); stroke:var(--ins-surface); stroke-width:2; }
.ins-hit { fill:transparent; }
.ins-point:hover .ins-dot { r:6; }
.ins-bar-row:hover .ins-hit { fill:var(--ins-surface-2); }
.ins-bar-now { fill:var(--ins-now); }
.ins-bar-previous { fill:var(--ins-previous); }
.ins-table-wrap { width:100%; overflow-x:auto; margin:8px 0; }
.ins-table { width:100%; border-collapse:collapse; font-size:13px; }
.ins-table th,.ins-table td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--ins-border); vertical-align:top; color:var(--ins-ink); }
.ins-table thead th { font-size:12px; color:var(--ins-muted); font-weight:650; }
.ins-table tbody th { font-weight:600; }
.ins-expand { padding:0; background:none; color:var(--ins-ink); text-align:left; font-weight:600; border-radius:4px; }
.ins-expand::before { content:'▸ '; color:var(--ins-muted); }
.ins-expand[aria-expanded="true"]::before { content:'▾ '; }
.ins-expand:hover { text-decoration:underline; filter:none!important; }
.ins-detail td { background:var(--ins-surface-2); }
.ins-examples { margin:4px 0 6px; padding-left:18px; color:var(--ins-ink-2); line-height:1.5; }
.ins-summary { margin:8px 0; color:var(--ins-ink-2); }
.ins-empty { margin:10px 0; padding:14px 16px; border-radius:10px; background:var(--ins-empty-bg); color:var(--ins-ink-2); }
.ins-quiet { margin:8px 0; padding-left:18px; line-height:1.6; color:var(--ins-ink-2); }
.ins-quiet strong { color:var(--ins-ink); }
.ins-more summary { cursor:pointer; color:var(--ins-accent); font-weight:650; margin-top:8px; }
@media (max-width:640px) {
  .ins-block { padding:14px 12px; }
  .ins-filter select { max-width:130px; }
}