/* =========================================================================
   DASHBOARD
   ========================================================================= */
.dash-grid { display: grid; gap: 20px; }
.dash-grid.cols-12 { grid-template-columns: repeat(12, 1fr); }

/* KPI row */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.kpi { background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: 4px; padding: 16px; display: flex; flex-direction: column; gap: 4px; position: relative; overflow: hidden; }
.kpi.accent { background: var(--revin-black); color: #fff; }
.kpi.accent .kpi-eye, .kpi.accent .kpi-sub { color: var(--neutral-300); }
.kpi.accent .kpi-val { color: #fff; }
.kpi.accent::after { content: ""; position: absolute; right: -10px; bottom: -10px; width: 60px; height: 60px; background: var(--revin-red); opacity: 0.15; border-radius: 999px; }
.kpi-eye { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); display: flex; align-items: center; gap: 6px; }
.kpi-eye .icon { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }
.kpi-val { font-family: var(--font-display); font-size: 28px; line-height: 1.1; letter-spacing: .02em; color: var(--fg-1); }
.kpi-val .unit { font-size: 14px; color: var(--fg-2); margin-left: 4px; font-family: var(--font-body); font-weight: 500; }
/* Filas densas (6+ KPIs): la tarjeta baja a ~150px y una cifra de 6 dígitos no
   entra a 28px. Como .kpi es overflow:hidden, sin esto se recorta en silencio. */
.kpi-row.dense .kpi { padding: 14px; }
.kpi-row.dense .kpi-val { font-size: 23px; letter-spacing: 0; }
.kpi-row.dense .kpi-val .unit { font-size: 12px; margin-left: 3px; }
.kpi-row.dense .kpi-eye { font-size: 9px; letter-spacing: .08em; }
.kpi-delta { font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
.kpi-delta.up { color: var(--success); }
.kpi-delta.down { color: var(--revin-red); }
.kpi-sub { font-size: 11px; color: var(--fg-3); margin-top: 2px; }
.kpi-bar { height: 4px; background: var(--bg-inset); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.kpi-bar > span { display: block; height: 100%; background: var(--revin-red); border-radius: 2px; }
.kpi.accent .kpi-bar { background: var(--neutral-700); }

/* Two-col layout */
.dash-2col { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }

/* Today list (Mi día) */
.today-list { display: flex; flex-direction: column; }
.today-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-3); cursor: pointer; }
.today-item:last-child { border-bottom: none; }
.today-item:hover { background: var(--bg-inset); }
.today-item .time-slot { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); width: 60px; flex-shrink: 0; padding-top: 1px; letter-spacing: .04em; }
.today-item .ico-wrap { width: 28px; height: 28px; border-radius: 4px; background: var(--bg-inset); border: 1px solid var(--border-1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--fg-2); }
.today-item .ico-wrap.red { background: var(--red-50); border-color: var(--red-200); color: var(--revin-red); }
.today-item .ico-wrap.green { background: var(--success-bg); border-color: rgba(31,157,85,.2); color: var(--success-fg); }
.today-item .ico-wrap.blue { background: var(--info-bg); border-color: rgba(37,99,168,.2); color: var(--info-fg); }
.today-item .ico-wrap .icon { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.today-body { flex: 1; min-width: 0; }
.today-title { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.today-sub { font-size: 11px; color: var(--fg-2); margin-top: 2px; display: flex; gap: 8px; align-items: center; }
.today-sub .dot-sep { color: var(--fg-4); }
.today-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 120ms; }
.today-item:hover .today-actions { opacity: 1; }

/* Cooling clients alert */
.cooling-card { border: 1px solid var(--red-200); background: var(--bg-surface); border-radius: 4px; overflow: hidden; }
.cooling-card .cc-h { background: var(--red-50); border-bottom: 1px solid var(--red-200); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; }
.cooling-card .cc-h h3 { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--revin-red); display: inline-flex; align-items: center; gap: 8px; }
.cooling-card .cc-h .icon { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.cooling-row { display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border-3); gap: 12px; cursor: pointer; }
.cooling-row:last-child { border-bottom: none; }
.cooling-row:hover { background: var(--red-50); }
.cooling-row .ava { width: 32px; height: 32px; border-radius: 999px; background: var(--bg-inset); border: 1px solid var(--border-1); color: var(--fg-2); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.cooling-body { flex: 1; min-width: 0; }
.cooling-name { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.cooling-sub { font-size: 11px; color: var(--fg-2); margin-top: 1px; }
.cooling-days { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--revin-red); padding: 3px 8px; background: var(--red-50); border: 1px solid var(--red-200); border-radius: 2px; }

/* Charts */
.chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding: 8px 0; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.bar-col .bar-val { font-size: 10px; color: var(--fg-3); font-family: var(--font-mono); }
.bar-col .bar { width: 100%; background: var(--bg-inset); border: 1px solid var(--border-1); border-bottom: 2px solid var(--revin-black); position: relative; }
.bar-col.active .bar { background: var(--revin-red); border-color: var(--revin-red); }
.bar-col .bar-lbl { font-size: 10px; color: var(--fg-2); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* Pie/donut placeholder */
.donut { width: 140px; height: 140px; border-radius: 999px; background: conic-gradient(var(--revin-red) 0 32%, var(--neutral-700) 32% 54%, var(--info) 54% 78%, var(--success) 78% 100%); position: relative; flex-shrink: 0; }
.donut::after { content: ""; position: absolute; inset: 22px; background: var(--bg-surface); border-radius: 999px; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-1); }
.legend-item .swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.legend-item .val { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); }

/* Dashboard variant B — funnel + cards */
.funnel-stack { display: flex; flex-direction: column; gap: 4px; }
.funnel-row { display: flex; align-items: center; gap: 12px; }
.funnel-row .lbl { font-size: 11px; font-weight: 600; color: var(--fg-2); text-transform: uppercase; letter-spacing: .06em; width: 100px; flex-shrink: 0; }
.funnel-bar { height: 26px; background: var(--neutral-800); color: #fff; display: flex; align-items: center; padding: 0 10px; font-size: 11px; font-weight: 700; font-family: var(--font-mono); }
.funnel-bar.red { background: var(--revin-red); }
.funnel-bar.warn { background: var(--warning); }
.funnel-bar.info { background: var(--info); }
.funnel-bar.success { background: var(--success); }
.funnel-bar .pct { margin-left: auto; opacity: .7; }

/* Dashboard variant C — split with hero */
.dash-hero { background: var(--revin-black); color: #fff; padding: 28px 32px; position: relative; overflow: hidden; }
.dash-hero .he-greet { font-size: 13px; color: var(--neutral-300); letter-spacing: .04em; }
.dash-hero h1 { font-size: 36px; margin: 4px 0 16px; color: #fff; line-height: 1.1; }
.dash-hero h1 .red { color: var(--revin-red); }
.dash-hero .stats { display: flex; gap: 32px; }
.dash-hero .stat-num { font-family: var(--font-display); font-size: 24px; color: #fff; }
.dash-hero .stat-lbl { font-size: 10px; color: var(--neutral-300); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }
.dash-hero::after { content: ""; position: absolute; right: -40px; top: 50%; transform: translateY(-50%); width: 280px; height: 280px; background: radial-gradient(circle, var(--revin-red) 0%, transparent 60%); opacity: .15; }
.dash-hero .chev-mark { position: absolute; right: 32px; top: 28px; font-family: var(--font-display); font-size: 48px; color: var(--revin-red); line-height: 1; letter-spacing: -.04em; }