/* AquaLectura — DATACAM visual system: minimalist white + Metro Santiago red */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

:root {
  --bg-0: #f5f5f5;   /* sidebar */
  --bg-1: #ffffff;   /* page */
  --bg-2: #ffffff;   /* panel */
  --bg-3: #fafafa;   /* raised */
  --bg-4: #f0f0f0;   /* hover */

  --fg:        #111111;
  --fg-1:      #1f1f1f;
  --fg-muted:  #6a6a6a;
  --fg-dim:    #8e8e8e;
  --fg-faint:  #c4c4c4;

  --line:        rgba(214, 13, 39, 0.16);
  --line-soft:   rgba(214, 13, 39, 0.08);
  --line-warm:   #d60d27;
  --line-amber:  #d60d27;
  --line-copper: #a30a1e;
  --line-crit:   #d60d27;

  --ok:    #2f7d3a;
  --warn:  #d6a40d;
  --crit:  #d60d27;
  --info:  #5a5a5a;
  --off:   #b0b0b0;

  --accent-warm:  #d60d27;
  --accent-deep:  #a30a1e;

  --radius: 0px;
  --radius-sm: 2px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Geist", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  background: var(--bg-1);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; background: none; border: 0; outline: 0; }
table { border-collapse: collapse; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { margin: 0; font-weight: 500; }
.dc-num { font-family: "Geist Mono", ui-monospace, monospace; font-feature-settings: "tnum"; letter-spacing: -0.01em; }
.dc-muted { color: var(--fg-muted); }
.dc-sep { color: var(--fg-faint); }

/* ── Layout shell ── */
.dc-app { display: grid; grid-template-columns: 240px 1fr; height: 100vh; background: var(--bg-1); }
.dc-main { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--line); overflow: hidden; }

/* Toggle del menú (hamburguesa) — CSS puro vía :has(), sin round-trip */
.dc-app:has(#dc-nav-toggle:checked) { grid-template-columns: 0 1fr; }
.dc-app:has(#dc-nav-toggle:checked) .dc-sidebar { display: none; }
.dc-content { flex: 1; overflow: auto; padding: 24px 28px 56px; }

/* ── Sidebar ── */
.dc-sidebar { display: flex; flex-direction: column; background: var(--bg-0); padding: 18px 12px 16px; gap: 4px; position: relative; }
.dc-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 16px; }
.dc-brand-mark { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; }
.dc-brand-text { line-height: 1.1; }
.dc-brand-name { font-weight: 700; letter-spacing: 0.16em; font-size: 16px; color: var(--fg); }
.dc-brand-sub { font-size: 11.5px; color: var(--fg-muted); letter-spacing: 0.06em; margin-top: 3px; }
.dc-sidebar-line { height: 1px; background: var(--line); margin: 4px 0 6px; }
.dc-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.dc-nav-group-label { font-size: 10px; color: var(--fg-dim); letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 12px 4px; font-weight: 600; }
.dc-nav-item { display: flex; align-items: center; gap: 14px; padding: 12px 12px; position: relative; color: var(--fg-muted); font-size: 14px; transition: color 120ms ease, background 120ms ease; text-align: left; width: 100%; }
.dc-nav-item:hover { color: var(--fg); background: var(--bg-2); }
.dc-nav-item.is-active { color: var(--fg); background: var(--bg-3); }
.dc-nav-icon { display: grid; place-items: center; width: 20px; flex-shrink: 0; }
.dc-nav-label { flex: 1; }
.dc-nav-badge { font-family: "Geist Mono", monospace; font-size: 11px; padding: 2px 7px; min-width: 20px; text-align: center; background: #d60d27; color: #ffffff; font-weight: 600; }
.dc-nav-rail { position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--line-warm); }
.dc-sidebar-foot { display: flex; flex-direction: column; gap: 4px; }

/* ── Header ── */
.dc-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px 12px; border-bottom: 1px solid var(--line); gap: 24px; background: var(--bg-1); }
.dc-header-left { min-width: 0; }
.dc-crumbs { display: flex; gap: 6px; color: var(--fg-dim); font-size: 11px; letter-spacing: 0.04em; }
.dc-crumb.is-last { color: var(--fg-muted); }
.dc-crumb-sep { color: var(--fg-faint); }
.dc-title { font-size: 18px; font-weight: 500; margin: 4px 0 0; letter-spacing: -0.01em; }
.dc-header-right { display: flex; align-items: center; gap: 8px; }
.dc-search { display: flex; align-items: center; gap: 8px; background: var(--bg-2); border: 1px solid var(--line); padding: 7px 10px; min-width: 320px; color: var(--fg-muted); }
.dc-search input { flex: 1; min-width: 0; color: var(--fg); }
.dc-search input::placeholder { color: var(--fg-dim); }
.dc-kbd { font-family: "Geist Mono", monospace; font-size: 10px; padding: 1px 5px; border: 1px solid var(--line); color: var(--fg-dim); }
.dc-header-divider { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.dc-icon-btn { display: grid; place-items: center; width: 32px; height: 32px; color: var(--fg-muted); position: relative; transition: color 120ms ease, background 120ms ease; }
.dc-icon-btn:hover { color: var(--fg); background: var(--bg-3); }
.dc-notif-badge { position: absolute; top: 4px; right: 4px; background: #d60d27; color: #ffffff; font-family: "Geist Mono", monospace; font-size: 9px; font-weight: 600; padding: 1px 4px; min-width: 14px; text-align: center; line-height: 1.2; }
.dc-avatar { width: 32px; height: 32px; display: grid; place-items: center; background: var(--bg-3); font-family: "Geist Mono", monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--fg); border: 1px solid var(--line); }

/* ── Page layout ── */
.dc-page { display: flex; flex-direction: column; gap: 16px; }
.dc-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-filters-spacer { flex: 1; }
.dc-line { height: 1px; background: var(--line); }
.dc-line--soft { background: var(--line-soft); }
.dc-line--warm { background: linear-gradient(90deg, var(--line-warm) 0%, var(--line-warm) 24%, transparent 24.5%, transparent 100%); height: 1px; }
.dc-line--crit  { background: linear-gradient(90deg, var(--line-crit) 0%, var(--line-crit) 8%, transparent 8.5%, transparent 100%); height: 1px; }

/* ── Section ── */
.dc-section { display: flex; flex-direction: column; gap: 12px; background: var(--bg-2); padding: 16px 18px 18px; border: 1px solid var(--line); }
.dc-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dc-section-title { font-size: 13.5px; font-weight: 500; margin: 0; letter-spacing: -0.005em; }
.dc-section-sub { color: var(--fg-muted); font-size: 11.5px; margin: 2px 0 0; }
.dc-section-right { display: flex; align-items: center; gap: 8px; }
.dc-section-body { display: flex; flex-direction: column; gap: 12px; }

/* ── KPI ── */
.dc-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--line); background: var(--bg-2); }
.dc-kpis--4 { grid-template-columns: repeat(4, 1fr); }
.dc-kpi { padding: 16px 18px 14px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dc-kpi:last-child { border-right: 0; }
.dc-kpi-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dc-kpi-label { font-size: 11px; color: var(--fg-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.dc-kpi-delta { font-family: "Geist Mono", monospace; font-size: 10.5px; padding: 1px 6px; }
.dc-kpi-delta--up { color: var(--crit); border: 1px solid color-mix(in oklab, var(--crit) 50%, transparent); }
.dc-kpi-delta--down { color: var(--ok); border: 1px solid color-mix(in oklab, var(--ok) 50%, transparent); }
.dc-kpi-delta--flat { color: var(--fg-dim); border: 1px solid var(--line); }
.dc-kpi-value { display: flex; align-items: baseline; gap: 6px; }
.dc-kpi-value .dc-num { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
.dc-kpi-unit { font-family: "Geist Mono", monospace; color: var(--fg-muted); font-size: 12px; }

/* ── Status / pill ── */
.dc-status { display: inline-flex; align-items: center; gap: 6px; }
.dc-status-dot { display: inline-block; width: 8px; height: 8px; flex-shrink: 0; }
.dc-status-label { color: var(--fg-muted); font-size: 11.5px; }
.dc-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; letter-spacing: 0.02em; font-weight: 500; color: var(--pc); padding: 2px 7px; border: 1px solid color-mix(in oklab, var(--pc) 45%, transparent); background: color-mix(in oklab, var(--pc) 10%, transparent); white-space: nowrap; }

/* ── Chip ── */
.dc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 11.5px; color: var(--fg-muted); border: 1px solid var(--line); background: var(--bg-2); transition: color 120ms ease, border-color 120ms ease; }
.dc-chip:hover { color: var(--fg); border-color: color-mix(in oklab, var(--line-warm) 50%, var(--line)); }
.dc-chip.is-active { color: var(--fg); border-color: color-mix(in oklab, var(--line-warm) 60%, var(--line)); background: color-mix(in oklab, var(--crit) 6%, transparent); }

/* ── Tabs ── */
.dc-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dc-tab { padding: 10px 14px; color: var(--fg-muted); font-size: 12px; position: relative; letter-spacing: 0.01em; }
.dc-tab:hover { color: var(--fg); }
.dc-tab.is-active { color: var(--fg); }
.dc-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line-warm); }
.dc-tab-count { margin-left: 6px; font-family: "Geist Mono", monospace; font-size: 10.5px; color: var(--fg-dim); }

/* ── Buttons ── */
.dc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12px; color: var(--fg); transition: all 120ms ease; }
.dc-btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--fg-muted); }
.dc-btn--ghost:hover { color: var(--fg); border-color: color-mix(in oklab, var(--line-warm) 50%, var(--line)); }
.dc-btn--solid { background: #d60d27; color: #ffffff; border: 1px solid #d60d27; }
.dc-btn--solid:hover { background: #a30a1e; border-color: #a30a1e; color: #ffffff; }
.dc-btn--sm { padding: 5px 10px; font-size: 11px; }
.dc-btn--xs { padding: 3px 7px; font-size: 10.5px; gap: 4px; }
.dc-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Grids ── */
.dc-grid-2  { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: flex-start; }
.dc-grid-23 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: flex-start; }
.dc-row { display: flex; align-items: center; gap: 12px; }
.dc-col { display: flex; flex-direction: column; gap: 12px; }

/* ── Table ── */
.dc-tablewrap { background: var(--bg-2); border: 1px solid var(--line); overflow: auto; }
.dc-table { width: 100%; font-size: 12.5px; }
.dc-table thead th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 10px 14px; color: var(--fg-muted); font-size: 10.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; background: var(--bg-2); border-bottom: 1px solid var(--line); user-select: none; }
.dc-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.dc-table tbody tr:hover { background: var(--bg-3); }
.dc-table tbody tr:last-child td { border-bottom: 0; }
.ta-right { text-align: right; }
.ta-center { text-align: center; }
.dc-cell-stack { display: flex; flex-direction: column; gap: 2px; }
.dc-cell-strong { font-weight: 500; color: var(--fg); }
.dc-table--compact td, .dc-table--compact th { padding: 7px 10px; }
.dc-bar-cell { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.dc-bar { flex: 1; height: 2px; background: var(--bg-3); position: relative; }
.dc-bar > span { display: block; height: 100%; background: var(--accent-warm); }

/* ── Live feed ── */
.dc-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 0.12em; color: var(--fg-muted); }
.dc-live-dot { width: 6px; height: 6px; background: var(--crit); animation: dcBlink 1.2s ease-in-out infinite; }
.dc-feed { display: flex; flex-direction: column; }
.dc-feed-row { position: relative; display: grid; grid-template-columns: 4px 1fr; gap: 12px; padding: 10px 6px 10px 10px; border-bottom: 1px solid var(--line-soft); }
.dc-feed-row:last-child { border-bottom: 0; }
.dc-feed-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--info); }
.dc-feed-row--critica .dc-feed-rail { background: var(--crit); }
.dc-feed-row--advertencia .dc-feed-rail { background: var(--warn); }
.dc-feed-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.dc-feed-tipo { font-weight: 500; font-size: 12.5px; }
.dc-feed-meta { color: var(--fg-muted); font-size: 11px; margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }

@keyframes dcBlink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Cliente list (ranking bars) ── */
.dc-cli-list { display: flex; flex-direction: column; gap: 12px; }
.dc-cli-row { display: flex; flex-direction: column; gap: 4px; }
.dc-cli-top { display: flex; justify-content: space-between; }
.dc-cli-name { font-size: 12px; }
.dc-cli-val { color: var(--fg); font-size: 12px; }
.dc-cli-bar { height: 2px; background: var(--bg-3); position: relative; }
.dc-cli-bar > span { display: block; height: 100%; background: var(--accent-warm); }
.dc-cli-meta { font-size: 10.5px; color: var(--fg-dim); display: flex; gap: 6px; }

/* ── Drawer ── */
.dc-drawer-backdrop { position: fixed; inset: 0; background: rgba(40,28,14,0.32); z-index: 60; display: flex; justify-content: flex-end; animation: dcFade 180ms ease; }
@keyframes dcFade { from{opacity:0} to{opacity:1} }
.dc-drawer { width: 540px; max-width: 92vw; height: 100%; background: var(--bg-1); border-left: 1px solid var(--line); display: flex; flex-direction: column; animation: dcSlide 220ms cubic-bezier(.2,.7,.2,1); }
.dc-drawer--wide  { width: 720px; }
.dc-drawer--xwide { width: 1100px; }
@keyframes dcSlide { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.dc-drawer-head { padding: 18px 22px 16px; display: flex; justify-content: space-between; gap: 12px; }
.dc-drawer-head h3 { font-size: 17px; font-weight: 500; margin: 4px 0 6px; }
.dc-drawer-body { padding: 16px 22px 32px; overflow: auto; display: flex; flex-direction: column; gap: 16px; }
.dc-drawer-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.dc-drawer-l { font-size: 11px; color: var(--fg-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.dc-drawer-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dc-drawer-section { display: flex; flex-direction: column; gap: 10px; }
.dc-drawer-section-title { font-size: 11px; color: var(--fg-muted); letter-spacing: 0.06em; text-transform: uppercase; }

/* ── Form ── */
.dc-form { display: flex; flex-direction: column; }
.dc-form-row { display: grid; grid-template-columns: 200px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); align-items: center; }
.dc-form-row:last-child { border-bottom: 0; }
.dc-form-l { font-size: 11px; color: var(--fg-muted); letter-spacing: 0.02em; text-transform: uppercase; }
.dc-field { display: flex; flex-direction: column; gap: 6px; }
.dc-field-l { font-size: 11px; color: var(--fg-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.dc-input { width: 100%; padding: 8px 11px; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg); font-size: 12.5px; transition: border-color 120ms ease; }
.dc-input:focus { border-color: var(--line-warm); }
select.dc-input, textarea.dc-input { width: 100%; }

/* ── Timeline ── */
.dc-timeline { display: flex; flex-direction: column; position: relative; padding-left: 4px; }
.dc-tl-row { position: relative; display: grid; grid-template-columns: 16px 140px 1fr; gap: 12px; align-items: flex-start; padding: 11px 6px 11px 16px; }
.dc-tl-rail { position: absolute; left: 7px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.dc-tl-row:first-child .dc-tl-rail { top: 16px; }
.dc-tl-row:last-child .dc-tl-rail { bottom: calc(100% - 16px); }
.dc-tl-dot { position: absolute; left: 3px; top: 16px; width: 9px; height: 9px; background: var(--accent-warm); z-index: 1; }
.dc-tl-row--critica .dc-tl-dot, .dc-tl-row--crit .dc-tl-dot { background: var(--crit); }
.dc-tl-row--ok .dc-tl-dot { background: var(--ok); }
.dc-tl-row--info .dc-tl-dot { background: var(--info); }
.dc-tl-time { color: var(--fg-muted); font-size: 11px; padding-top: 1px; font-family: "Geist Mono", monospace; }
.dc-tl-l { font-weight: 500; font-size: 12.5px; margin-bottom: 2px; }
.dc-tl-sub { font-size: 11.5px; color: var(--fg-muted); }

/* ── Perm matrix / user cell ── */
.dc-user-cell { display: flex; align-items: center; gap: 10px; }

/* ── Empty ── */
.dc-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px; text-align: center; }
.dc-empty-title { font-size: 13px; font-weight: 500; }
.dc-empty-sub { font-size: 12px; color: var(--fg-muted); max-width: 340px; }

/* ── Activaciones-style table rows with severity rail ── */
.dc-act-table { background: var(--bg-2); border: 1px solid var(--line); }
.dc-act-row { position: relative; }
.dc-act-rail { position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; }
.dc-act-rail--critica { background: var(--crit); }
.dc-act-rail--advertencia { background: var(--warn); }
.dc-act-rail--info { background: var(--info); }
.dc-act-rail--ok { background: var(--ok); }

/* ════════════ AquaLectura-specific extensions ════════════ */

/* Login */
.dc-login { min-height: 100vh; display: grid; place-items: center; background: var(--bg-0); }
.dc-login-card { width: 380px; max-width: 92vw; background: var(--bg-1); border: 1px solid var(--line); padding: 36px 32px 28px; }
.dc-login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.dc-login-title { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.dc-login-sub { color: var(--fg-muted); font-size: 12.5px; margin-bottom: 24px; }
.dc-login-form { display: flex; flex-direction: column; gap: 16px; }
.dc-login-extra { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--fg-muted); }
.dc-login-foot { text-align: center; margin-top: 26px; color: var(--fg-dim); font-size: 11px; }
.dc-error { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: color-mix(in oklab, var(--crit) 8%, transparent); border: 1px solid color-mix(in oklab, var(--crit) 35%, transparent); color: var(--crit); font-size: 12.5px; }
.dc-validation { color: var(--crit); font-size: 11px; }

/* Drop zone */
.dc-drop { border: 1px dashed color-mix(in oklab, var(--line-warm) 40%, var(--line)); background: var(--bg-3); padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; }
.dc-drop:hover, .dc-drop.is-active { background: color-mix(in oklab, var(--crit) 5%, transparent); border-color: var(--line-warm); }

/* Progress */
.dc-progress { height: 3px; background: var(--bg-4); position: relative; overflow: hidden; }
.dc-progress > span { display: block; height: 100%; background: var(--accent-warm); transition: width 300ms ease; }

/* Inbox layout (Bandeja) */
.dc-inbox { display: grid; grid-template-columns: 1fr 420px; gap: 16px; align-items: start; }
.dc-inbox-list { background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.dc-inbox-row { position: relative; display: grid; grid-template-columns: 4px 32px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.dc-inbox-row:last-child { border-bottom: 0; }
.dc-inbox-row:hover { background: var(--bg-3); }
.dc-inbox-row.is-active { background: var(--bg-3); }
.dc-inbox-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--info); }
.dc-inbox-row--critica .dc-inbox-rail { background: var(--crit); }
.dc-inbox-row--advertencia .dc-inbox-rail { background: var(--warn); }
.dc-circle { width: 32px; height: 32px; display: grid; place-items: center; background: var(--bg-3); border: 1px solid var(--line); font-family: "Geist Mono", monospace; font-size: 12px; font-weight: 600; }
.dc-inbox-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dc-inbox-meter { font-family: "Geist Mono", monospace; font-size: 12.5px; }
.dc-inbox-cli { font-size: 11.5px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-inbox-consumo { font-family: "Geist Mono", monospace; font-size: 15px; font-weight: 500; }

/* Calendar */
.dc-cal-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.dc-cal-head .d { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-dim); padding: 4px 6px; font-weight: 600; }
.dc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dc-cal-cell { background: var(--bg-2); border: 1px solid var(--line); min-height: 96px; padding: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 11px; }
.dc-cal-cell.is-outside { opacity: 0.4; }
.dc-cal-cell.is-today { border-color: var(--line-warm); }
.dc-cal-day { font-family: "Geist Mono", monospace; font-size: 12px; color: var(--fg-muted); }
.dc-cal-cell.is-today .dc-cal-day { color: var(--accent-warm); font-weight: 600; }
.dc-cal-chip { font-size: 11px; padding: 2px 7px; font-weight: 500; background: color-mix(in oklab, var(--crit) 10%, transparent); border: 1px solid color-mix(in oklab, var(--crit) 30%, transparent); color: var(--accent-deep); width: fit-content; }

/* Minibar (umbrales) */
.dc-minibar { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.dc-minibar-track { width: 100%; height: 22px; background: var(--bg-3); display: flex; align-items: flex-end; }
.dc-minibar-fill { width: 100%; }
.dc-minibar-val { font-family: "Geist Mono", monospace; font-size: 10.5px; }

/* Switch */
.dc-switch { width: 34px; height: 18px; background: var(--bg-4); position: relative; cursor: pointer; border: 1px solid var(--line); transition: background 120ms ease; }
.dc-switch::after { content: ""; position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; background: #fff; border: 1px solid var(--line); transition: transform 120ms ease; }
.dc-switch.is-on { background: var(--accent-warm); border-color: var(--accent-warm); }
.dc-switch.is-on::after { transform: translateX(16px); border-color: var(--accent-warm); }

/* Card list (usuarios) */
.dc-cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dc-card { background: var(--bg-2); border: 1px solid var(--line); padding: 14px 16px; display: grid; grid-template-columns: 40px 1fr auto auto; gap: 14px; align-items: center; }
.dc-role { font-size: 10.5px; padding: 2px 7px; border: 1px solid var(--line); color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.dc-role.is-admin { color: var(--accent-warm); border-color: color-mix(in oklab, var(--accent-warm) 45%, transparent); }

.dc-quicklinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dc-quicklink { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-2); border: 1px solid var(--line); text-align: left; transition: background 120ms ease, border-color 120ms ease; }
.dc-quicklink:hover { background: var(--bg-3); border-color: color-mix(in oklab, var(--line-warm) 40%, var(--line)); }
.dc-quicklink-ic { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); color: var(--accent-warm); flex-shrink: 0; }

.dc-pager { display: flex; align-items: center; gap: 8px; }

#blazor-error-ui { background: var(--crit); bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,0.2); color: #fff; display: none; left: 0; padding: 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.6rem; }
#blazor-error-ui .reload { color: #fff; margin-left: .75rem; text-decoration: underline; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-4); }
::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }

@media (max-width: 1280px) {
  .dc-kpis { grid-template-columns: repeat(3, 1fr); }
  .dc-grid-2, .dc-grid-23, .dc-inbox { grid-template-columns: 1fr; }
  .dc-quicklinks { grid-template-columns: repeat(2, 1fr); }
  .dc-cards-2 { grid-template-columns: 1fr; }
}