/* ═══════════════════════════════════════════════════════════
   NISTO ANALYTICS · dashboard styles
   Prefijo: .ana-   |   Tokens: nisto-tokens.css
   ═══════════════════════════════════════════════════════════ */

/* ── Layout ─────────────────────────────────────────────── */
.ana-body   { max-width:1180px; margin:0 auto; padding:26px 34px 90px; }
.ana-header { position:sticky; top:0; z-index:40;
              background:rgba(244,245,246,.9); backdrop-filter:blur(10px);
              border-bottom:1px solid var(--border-default,#E8E8E6); }
.ana-header-inner { max-width:1180px; margin:0 auto; padding:20px 34px 16px;
                    display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* ── Section label (mono, uppercase) ────────────────────── */
.ana-label { font-family:'JetBrains Mono',monospace; font-size:11px;
             letter-spacing:1px; text-transform:uppercase;
             color:var(--text-faint,#A6A7AC);
             display:flex; align-items:center; gap:7px; margin-bottom:10px; }

/* ── Reusable card ──────────────────────────────────────── */
.ana-card { background:var(--surface-card,#fff);
            border:1px solid var(--border-default,#E8E8E6);
            border-radius:14px; padding:20px 22px;
            box-shadow:0 1px 2px rgba(16,16,18,.04); }

/* ── KPI grid ───────────────────────────────────────────── */
.ana-kpi-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }

.ana-kpi     { display:flex; flex-direction:column; gap:10px; }
.ana-kpi-top { display:flex; align-items:center; gap:8px; }
.ana-kpi-icon{ width:26px; height:26px; border-radius:7px;
               display:flex; align-items:center; justify-content:center;
               background:var(--neutral-100,#F1F1EF); color:var(--text-muted,#76777C); flex-shrink:0; }
.ana-kpi-icon.green { background:#E9F4EC; color:#1A7A45; }
.ana-kpi-title { font-size:12px; color:var(--text-muted,#76777C); }
.ana-kpi-val   { font-size:31px; font-weight:600; letter-spacing:-1px;
                 color:var(--text-strong,#0E0E10); line-height:1; }

/* Delta pill */
.ana-delta   { display:inline-flex; align-items:center; gap:3px;
               font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500;
               padding:2px 7px; border-radius:99px; line-height:1.4; }
.ana-delta.up   { background:#E9F4EC; color:#1A7A45; }
.ana-delta.down { background:#FBEEE5; color:#C2451F; }
.ana-delta.flat { background:var(--neutral-100,#F1F1EF); color:var(--text-muted,#76777C); }

/* ── Coverage + Heatmap row ─────────────────────────────── */
.ana-cov-row { display:grid; grid-template-columns:minmax(400px,.82fr) 1.18fr;
               gap:16px; align-items:stretch; margin-top:16px; }

/* ── Donut ───────────────────────────────────────────────── */
.ana-donut-wrap { position:relative; width:126px; height:126px; margin:0 auto; }
.ana-donut-svg  { width:126px; height:126px; transform:rotate(-90deg); }
.ana-donut-center { position:absolute; inset:0; display:flex; flex-direction:column;
                    align-items:center; justify-content:center; text-align:center; }
.ana-donut-pct  { font-size:28px; font-weight:700; color:#1FA355; line-height:1; }
.ana-donut-sub  { font-family:'JetBrains Mono',monospace; font-size:10px;
                  text-transform:uppercase; letter-spacing:.5px;
                  color:var(--text-faint,#A6A7AC); margin-top:2px; }

/* ── Split bar (coverage breakdown) ─────────────────────── */
.ana-split-bar  { display:flex; height:13px; border-radius:99px; overflow:hidden; }
.ana-split-seg  { min-width:2px; transition:flex .3s ease; }
.ana-legend     { display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:10px; }
.ana-legend-dot { width:9px; height:9px; border-radius:2px; flex-shrink:0; }
.ana-legend-item{ display:flex; align-items:center; gap:6px; font-size:12px;
                  color:var(--text-body,#3C3D41); }

/* ── Heatmap ────────────────────────────────────────────── */
.ana-hm-grid  { display:grid; grid-template-columns:repeat(24,1fr); gap:3px; }
.ana-hm-cell  { aspect-ratio:1; border-radius:3px; background:#F6F1EE;
                transition:transform .12s ease; cursor:default; }
.ana-hm-cell:hover { transform:scale(1.18); border-radius:2px; }
.ana-hm-row-label { font-family:'JetBrains Mono',monospace; font-size:10px;
                    color:var(--text-faint,#A6A7AC); text-transform:uppercase; }
.ana-hm-legend { display:flex; align-items:center; gap:8px; margin-top:10px;
                 font-size:11px; color:var(--text-muted,#76777C); }
.ana-hm-grad   { width:130px; height:9px; border-radius:99px;
                 background:linear-gradient(90deg,#FFE9E1,#FF6A45,#C2451F); }

/* ── Toggle pill (Recibidos / Enviados) ─────────────────── */
.ana-toggle     { display:inline-flex; gap:2px; padding:2px;
                  background:var(--neutral-100,#F1F1EF); border-radius:8px; }
.ana-toggle-btn { border:none; background:transparent; font-size:13px; font-weight:500;
                  color:var(--text-muted,#76777C); padding:6px 12px; border-radius:6px;
                  cursor:pointer; transition:all .15s ease; }
.ana-toggle-btn.active { background:#fff; color:var(--text-strong,#0E0E10);
                         box-shadow:0 1px 2px rgba(16,16,18,.06); }

/* ── Response time ──────────────────────────────────────── */
.ana-rt       { display:grid; grid-template-columns:300px 1fr; overflow:hidden; }
.ana-rt-agent { background:#F3FAF5; border-right:1px solid #E4F1EA; padding:26px 24px;
                display:flex; flex-direction:column; gap:6px; }
.ana-rt-big   { font-size:52px; font-weight:600; letter-spacing:-2px;
                color:#1FA355; line-height:1; }
.ana-rt-human { padding:22px 24px; }
.ana-rt-row   { display:grid; grid-template-columns:186px 1fr 60px;
                align-items:center; gap:10px; padding:6px 0; }
.ana-rt-bar-track { height:8px; border-radius:99px; background:var(--neutral-100,#F1F1EF); }
.ana-rt-bar-fill  { height:100%; border-radius:99px; background:#1FA355; transition:width .3s ease; }

/* ── Channel table ──────────────────────────────────────── */
.ana-ch-header { display:grid; grid-template-columns:1.5fr 1fr 1.1fr 1fr 1.5fr;
                 font-family:'JetBrains Mono',monospace; font-size:11px;
                 letter-spacing:.5px; text-transform:uppercase;
                 color:var(--text-faint,#A6A7AC); padding:10px 22px; }
.ana-ch-row    { display:grid; grid-template-columns:1.5fr 1fr 1.1fr 1fr 1.5fr;
                 align-items:center; padding:15px 22px;
                 border-bottom:1px solid var(--neutral-100,#F1F1EF);
                 font-size:14px; color:var(--text-body,#3C3D41); }
.ana-ch-icon   { width:32px; height:32px; border-radius:9px;
                 background:var(--neutral-50,#F7F7F6);
                 display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ana-ch-name   { display:flex; align-items:center; gap:10px; font-weight:500;
                 color:var(--text-strong,#0E0E10); }
.ana-ch-cov-track { max-width:120px; height:7px; border-radius:99px;
                    background:var(--neutral-100,#F1F1EF); }
.ana-ch-cov-fill  { height:100%; border-radius:99px; background:#1FA355; }

/* ── Custom dropdown ────────────────────────────────────── */
.ana-dd         { position:relative; }
.ana-dd-trigger { display:inline-flex; align-items:center; gap:8px;
                  background:#fff; border:1px solid #D9DADD; border-radius:10px;
                  padding:8px 11px; font-size:13px; font-weight:500;
                  cursor:pointer; white-space:nowrap; }
.ana-dd-trigger:hover { border-color:#B7B8BB; }
.ana-dd-menu    { position:absolute; top:calc(100% + 6px); left:0; z-index:70;
                  min-width:200px; background:#fff;
                  border:1px solid var(--border-default,#E8E8E6); border-radius:12px;
                  box-shadow:0 16px 40px -16px rgba(16,16,18,.28); padding:5px; }
.ana-dd-opt     { display:flex; align-items:center; justify-content:space-between;
                  gap:14px; width:100%; text-align:left; border:none;
                  background:transparent; font-size:13px; color:var(--text-strong,#0E0E10);
                  padding:8px 10px; border-radius:8px; cursor:pointer; white-space:nowrap; }
.ana-dd-opt:hover,
.ana-dd-opt.active { background:var(--neutral-50,#F6F7F6); }

/* ── Skeleton / loading ─────────────────────────────────── */
.ana-sk    { background:#ECEDEE; border-radius:6px; }
@keyframes ana-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.ana-pulse { animation:ana-pulse 1.35s ease-in-out infinite; }

/* ── Entry animation ────────────────────────────────────── */
@keyframes ana-rise { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.ana-rise  { animation:ana-rise .34s ease both; }

/* ── Empty / Error states ───────────────────────────────── */
.ana-empty     { text-align:center; max-width:720px; margin:0 auto; padding:104px 24px 60px; }
.ana-empty-icon{ width:66px; height:66px; border-radius:18px; margin:0 auto 18px;
                 display:flex; align-items:center; justify-content:center;
                 background:var(--neutral-100,#F1F1EF); color:var(--text-muted,#76777C); }
.ana-empty-icon.error { background:#FBEEE5; color:#C2451F; }
.ana-empty h3  { font-size:20px; font-weight:600; color:var(--text-strong,#0E0E10); margin:0 0 6px; }
.ana-empty p   { font-size:13.5px; color:var(--text-muted,#76777C);
                 max-width:400px; margin:0 auto 18px; line-height:1.5; }
.ana-btn-primary   { display:inline-flex; align-items:center; gap:6px;
                     background:var(--text-strong,#0E0E10); color:#fff;
                     border:none; border-radius:10px; padding:11px 18px;
                     font-size:14px; font-weight:600; cursor:pointer; }
.ana-btn-secondary { display:inline-flex; align-items:center; gap:6px;
                     background:#fff; color:var(--text-strong,#0E0E10);
                     border:1px solid #D9DADD; border-radius:10px; padding:11px 18px;
                     font-size:14px; font-weight:600; cursor:pointer; }
.ana-btn-primary:hover   { opacity:.88; }
.ana-btn-secondary:hover { border-color:#B7B8BB; }

/* ── Tabular numbers ────────────────────────────────────── */
.ana-tabnum { font-variant-numeric:tabular-nums; }

/* ── Responsive (mobile) ────────────────────────────────── */
@media (max-width:768px) {
  .ana-body         { padding:16px 16px 60px; }
  .ana-header-inner { padding:16px 16px 12px; }
  .ana-kpi-grid     { grid-template-columns:1fr 1fr; }
  .ana-kpi-grid > :last-child:nth-child(odd) { grid-column:1 / -1; }
  .ana-cov-row      { grid-template-columns:1fr; }
  .ana-rt           { grid-template-columns:1fr; }
  .ana-rt-agent     { border-right:none; border-bottom:1px solid #E4F1EA; }
  .ana-ch-grid      { overflow-x:auto; }
  .ana-ch-header,
  .ana-ch-row       { min-width:640px; }
}