:root {
  color-scheme: dark;
  --bg: #090d10;
  --sidebar: #0d1216;
  --surface: #11171c;
  --surface-2: #151d23;
  --surface-3: #1a242b;
  --border: #253039;
  --border-soft: #1c262d;
  --text: #f3f7f5;
  --muted: #91a09a;
  --muted-2: #66746e;
  --green: #20d993;
  --green-soft: rgba(32, 217, 147, .13);
  --blue: #66a9ff;
  --amber: #ffbd59;
  --coral: #ff8f7a;
  --red: #ff7272;
  --shadow: 0 24px 70px rgba(0,0,0,.34);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 78% -10%, rgba(32,217,147,.07), transparent 28rem), var(--bg); color: var(--text); font-size: 16px; }
button, input, select { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.eyebrow { margin: 0 0 .38rem; color: var(--green); font-size: .75rem; font-weight: 800; letter-spacing: .13em; }
.brand-mark { display: flex; align-items: flex-end; gap: 4px; width: 46px; height: 38px; margin-bottom: 1.25rem; }
.brand-mark span { display: block; width: 9px; border-radius: 99px; background: var(--green); box-shadow: 0 0 20px rgba(32,217,147,.4); transform: rotate(28deg); }
.brand-mark span:nth-child(1) { height: 18px; opacity: .55; }
.brand-mark span:nth-child(2) { height: 34px; }
.brand-mark span:nth-child(3) { height: 25px; opacity: .78; }
.brand-mark.small { width: 30px; height: 27px; margin: 0; gap: 3px; }
.brand-mark.small span { width: 6px; }
.brand-mark.small span:nth-child(1) { height: 13px; }.brand-mark.small span:nth-child(2) { height: 25px; }.brand-mark.small span:nth-child(3) { height: 18px; }

.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 2rem; }
.login-card { position: relative; width: min(100%, 430px); padding: 3rem; border: 1px solid var(--border); border-radius: 24px; background: linear-gradient(145deg, rgba(23,31,36,.97), rgba(13,18,22,.98)); box-shadow: var(--shadow); overflow: hidden; }
.login-card::before { content: ""; position: absolute; inset: -10rem -10rem auto auto; width: 20rem; height: 20rem; border-radius: 50%; background: rgba(32,217,147,.07); filter: blur(2px); }
.login-card h1 { margin: 0; font-size: clamp(2.2rem, 7vw, 3.2rem); letter-spacing: -.055em; }
.login-copy { margin: .55rem 0 2rem; color: var(--muted); }
.login-form, .password-modal form { display: grid; gap: .68rem; }
label { color: #cbd5d1; font-size: .875rem; font-weight: 650; }
input, select { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 10px; background: #0b1014; color: var(--text); padding: 0 .85rem; outline: none; }
input:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(32,217,147,.12); }
.primary-button, .filter-button { min-height: 46px; border: 0; border-radius: 10px; background: var(--green); color: #04120c; font-weight: 800; cursor: pointer; }
.primary-button { margin-top: .6rem; }
.primary-button:hover, .filter-button:hover { background: #3be4a5; }
.form-error { min-height: 1.2rem; margin: .15rem 0; color: var(--red); font-size: .84rem; }
.secure-note { display: flex; align-items: center; gap: .55rem; margin: 1.5rem 0 0; color: var(--muted-2); font-size: .78rem; }
.status-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 230px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.3rem 1rem; border-right: 1px solid var(--border-soft); background: rgba(13,18,22,.93); backdrop-filter: blur(20px); z-index: 5; }
.sidebar-brand { display: flex; align-items: center; gap: .8rem; padding: .2rem .55rem 1.8rem; }
.sidebar-brand strong, .sidebar-brand span { display: block; }
.sidebar-brand strong { letter-spacing: -.02em; }.sidebar-brand span { margin-top: .1rem; color: var(--muted); font-size: .75rem; }
.sidebar nav { display: grid; gap: .35rem; }
.nav-item { width: 100%; display: flex; align-items: center; gap: .72rem; min-height: 44px; padding: 0 .72rem; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #a7b4af; text-align: left; cursor: pointer; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { border-color: rgba(32,217,147,.18); background: var(--green-soft); color: var(--green); }
.nav-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(255,255,255,.04); font-weight: 800; }
.nav-count { margin-left: auto; min-width: 25px; padding: .1rem .38rem; border-radius: 99px; background: rgba(255,114,114,.12); color: var(--red); font-size: .75rem; text-align: center; }
.sidebar-spacer { flex: 1; }
.connection-state { display: flex; align-items: center; gap: .7rem; margin: 1rem .55rem; padding: .8rem; border: 1px solid var(--border-soft); border-radius: 10px; background: rgba(255,255,255,.018); }
.connection-state strong, .connection-state span { display: block; }.connection-state strong { font-size: .8rem; }.connection-state span { margin-top: .15rem; color: var(--muted-2); font-size: .75rem; }
.nav-item.quiet { font-size: .875rem; }
.theme-toggle { margin-top: .35rem; }

.workspace { width: 100%; min-width: 0; padding: 1.65rem clamp(1rem, 3vw, 2.5rem) 3rem; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.topbar h1 { margin: 0; font-size: clamp(1.55rem, 3vw, 2rem); letter-spacing: -.035em; }
.topbar-actions { display: flex; align-items: center; gap: .75rem; }
.clinic-pill { display: flex; align-items: center; gap: .7rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.clinic-avatar, .user-button span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--green-soft); color: var(--green); font-size: .72rem; font-weight: 850; }
.clinic-pill strong, .clinic-pill span { display: block; }.clinic-pill strong { font-size: .875rem; }.clinic-pill div > span { color: var(--muted); font-size: .75rem; margin-top: .12rem; }
.user-button { width: 42px; height: 42px; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; }
.user-button span { margin: auto; background: var(--surface-3); color: #d7e1dd; }

.filter-panel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem 1.2rem; margin-bottom: 1.2rem; padding: .8rem; border: 1px solid var(--border-soft); border-radius: 14px; background: rgba(17,23,28,.75); }
.custom-range { display: flex; align-items: end; gap: .55rem; }
.custom-range label span { display: block; margin: 0 0 .3rem .1rem; color: var(--muted); font-size: .75rem; }
.custom-range input { min-height: 40px; }
.preset-group { display: flex; gap: .25rem; padding: .25rem; border-radius: 10px; background: #0a0f12; }
.preset-group button { min-height: 40px; padding: 0 .75rem; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: .875rem; cursor: pointer; }
.preset-group button.active { background: var(--surface-3); color: var(--text); box-shadow: 0 3px 9px rgba(0,0,0,.2); }
.filters-form { flex: 1; display: grid; grid-template-columns: repeat(3,minmax(130px,1fr)) minmax(150px,1.1fr) auto auto; align-items: end; gap: .55rem; }
.filters-form label span { display: block; margin: 0 0 .3rem .1rem; color: var(--muted); font-size: .75rem; }
.filters-form input, .filters-form select { min-height: 40px; font-size: .875rem; }
.filter-button { min-height: 40px; padding: 0 1rem; font-size: .875rem; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--muted); font-size: 1.35rem; cursor: pointer; }
.icon-button:hover { color: var(--text); border-color: #45535c; }
.dashboard-error { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid rgba(255,114,114,.3); border-radius: 10px; background: rgba(255,114,114,.08); color: #ffc2c2; }

.kpi-grid { display: grid; grid-template-columns: repeat(6,minmax(150px,1fr)); gap: .8rem; margin-bottom: .8rem; }
.kpi-card { min-height: 137px; padding: 1rem; border: 1px solid var(--border-soft); border-radius: 14px; background: linear-gradient(145deg,var(--surface),#0e1418); }
.kpi-card.primary { border-color: rgba(32,217,147,.25); background: linear-gradient(145deg,rgba(32,217,147,.11),#10171a 65%); }
.kpi-card.warning { border-color: rgba(255,189,89,.18); }
.kpi-top { display: flex; justify-content: space-between; gap: .5rem; color: #b1beb9; font-size: .8125rem; }
.metric-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; background: rgba(255,255,255,.04); color: var(--muted); font-weight: 850; }
.metric-icon.green { color: var(--green); background: var(--green-soft); }.metric-icon.blue { color: var(--blue); background: rgba(102,169,255,.1); }.metric-icon.amber { color: var(--amber); background: rgba(255,189,89,.1); }.metric-icon.red { color: var(--red); background: rgba(255,114,114,.1); }
.kpi-card > strong { display: block; margin-top: .72rem; font-size: 2rem; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.kpi-card small { display: block; margin-top: .25rem; color: var(--muted-2); font-size: .75rem; line-height: 1.35; }

.charts-grid { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(280px,.8fr); gap: .8rem; margin-bottom: .8rem; }
.panel { border: 1px solid var(--border-soft); border-radius: 14px; background: linear-gradient(145deg,rgba(18,25,30,.98),rgba(13,18,22,.98)); box-shadow: 0 10px 35px rgba(0,0,0,.12); }
.chart-panel, .outcome-panel { min-height: 310px; padding: 1.05rem; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.panel-heading h2 { margin: 0; font-size: 1rem; letter-spacing: -.015em; }
.legend { display: flex; gap: .9rem; color: var(--muted); font-size: .75rem; }.legend span { display: flex; align-items: center; gap: .35rem; }.legend i { width: 7px; height: 7px; border-radius: 50%; }.legend-total { background: #40515c; }.legend-answered { background: var(--green); }.legend-unattended { background: var(--coral); }
.insight-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; margin-bottom: .8rem; }
.insight-strip article { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .2rem .8rem; padding: .75rem 1rem; border: 1px solid var(--border-soft); border-radius: 12px; background: rgba(17,23,28,.65); }
.insight-strip span { grid-row: span 2; color: var(--muted); font-size: .78rem; }
.insight-strip strong { font-size: 1.05rem; }
.insight-strip small { color: var(--muted-2); font-size: .72rem; }
.chart-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .9rem; }
.segmented { display: inline-flex; gap: .2rem; padding: .2rem; border-radius: 9px; background: #090e11; }
.segmented button { min-height: 32px; padding: 0 .65rem; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: .75rem; cursor: pointer; }
.segmented button.active { background: var(--surface-3); color: var(--text); }
.activity-chart { height: 230px; display: flex; align-items: stretch; gap: clamp(.24rem,.75vw,.7rem); margin-top: 1rem; padding: 1rem .3rem 0; border-bottom: 1px solid var(--border); overflow-x: auto; background-image: linear-gradient(to bottom, transparent 24%, rgba(255,255,255,.035) 25%, transparent 26%, transparent 49%, rgba(255,255,255,.035) 50%, transparent 51%, transparent 74%, rgba(255,255,255,.035) 75%, transparent 76%); }
.chart-column { flex: 1 0 34px; min-width: 34px; display: grid; grid-template-rows: 18px 1fr 25px; gap: .3rem; }
.bar-value { min-height: 18px; color: var(--muted-2); font-size: .66rem; text-align: center; }
.bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; min-height: 0; }
.bar { width: min(12px,30%); min-height: 2px; border-radius: 5px 5px 2px 2px; transition: height .35s ease; }.bar.total { background: #40515c; }.bar.answered { background: linear-gradient(to top,#0fa66e,var(--green)); box-shadow: 0 0 12px rgba(32,217,147,.12); }.bar.unattended { background: linear-gradient(to top,#b84f43,var(--coral)); }
.day-label { color: var(--muted-2); font-size: .75rem; text-align: center; white-space: nowrap; }
.outcome-chart { display: grid; gap: 1rem; margin-top: 1.45rem; }
.outcome-row { display: grid; grid-template-columns: minmax(110px,1.1fr) minmax(80px,1fr) 28px; align-items: center; gap: .7rem; }
.outcome-label { color: #bdc8c3; font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.outcome-track { height: 7px; border-radius: 99px; background: #202a30; overflow: hidden; }.outcome-fill { height: 100%; border-radius: inherit; background: var(--green); }.outcome-fill.warn { background: var(--amber); }.outcome-fill.bad { background: var(--coral); }.outcome-value { color: var(--muted); font-size: .75rem; text-align: right; }

.dashboard-page { display: grid; gap: .8rem; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(290px,.65fr); gap: .8rem; }
.dashboard-wide { grid-column: 1 / -1; }
.visual-card { min-height: 300px; padding: 1.05rem; }
.donut-wrap { display: grid; grid-template-columns: 145px minmax(0,1fr); align-items: center; gap: 1.4rem; min-height: 220px; padding: .8rem; }
.donut { --donut-value: 0%; position: relative; width: 140px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--green) var(--donut-value), #253039 0); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 0 40px rgba(32,217,147,.08); }
.donut::before { content: ""; position: absolute; inset: 24px; border-radius: 50%; background: #10171b; box-shadow: inset 0 0 0 1px var(--border-soft); }
.donut span,.donut small { position: absolute; z-index: 1; left: 24px; right: 24px; display: block; text-align: center; }.donut span { top: 47px; color: var(--text); font-size: 1.2rem; font-weight: 850; letter-spacing: -.04em; }.donut small { top: 76px; color: var(--muted); font-size: .68rem; }
.mini-legend { display: grid; gap: .7rem; }
.mini-legend p { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: .55rem; margin: 0; color: var(--muted); font-size: .8rem; }
.mini-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }.mini-legend i.warn { background: var(--amber); }.mini-legend i.bad { background: var(--coral); }.mini-legend i.blue { background: var(--blue); }.mini-legend strong { color: var(--text); }
.ranking-chart,.queue-chart { display: grid; gap: .72rem; margin-top: 1.2rem; }
.rank-row { display: grid; grid-template-columns: 24px minmax(100px,.8fr) minmax(90px,1.4fr) 28px; align-items: center; gap: .65rem; }
.rank-position { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; background: rgba(255,255,255,.045); color: var(--muted); font-size: .7rem; font-weight: 800; }
.rank-label { color: #cbd5d1; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-track,.queue-meter { height: 8px; overflow: hidden; border-radius: 99px; background: #202a30; }.rank-track i,.queue-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#0da66d,var(--green)); }
.rank-row > strong { font-size: .77rem; text-align: right; }
.queue-row { display: grid; grid-template-columns: minmax(125px,1fr) minmax(80px,.9fr) 42px; align-items: center; gap: .75rem; }
.queue-row > div:first-child { min-width: 0; }.queue-row strong,.queue-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.queue-row strong { font-size: .78rem; }.queue-row span { margin-top: .12rem; color: var(--muted-2); font-size: .68rem; }.queue-row b { color: var(--muted); font-size: .72rem; text-align: right; }
.empty-state.compact { padding: 2.5rem .5rem; }

/* Dashboard 1.0: una retícula única, tarjetas relacionadas y lenguaje visual común. */
.summary-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.report-button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 40px; padding: 0 .85rem; border: 1px solid rgba(32,217,147,.25); border-radius: 9px; background: var(--green-soft); color: var(--green); font-size: .8rem; font-weight: 750; cursor: pointer; }
.report-button:hover { border-color: var(--green); }
.dashboard-layout { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: .8rem; }
.dashboard-card { min-height: 300px; padding: 1.35rem; overflow: hidden; }
.dashboard-card .panel-heading { margin-bottom: 1.2rem; }
.dashboard-card .panel-heading h2 { margin-top: .08rem; }
.activity-card { grid-column: span 8; }
.attention-card { grid-column: span 4; }
.agents-card { grid-column: span 8; min-height: 420px; }
.queues-card { grid-column: span 4; min-height: 420px; }
.recovery-card { grid-column: 1 / -1; min-height: 230px; }
.panel-help { margin: .32rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.context-note { align-self: center; color: var(--muted); font-size: .72rem; }
.metric-icon.coral { color: var(--coral); background: rgba(255,143,122,.1); }
.attention-score { display: flex; align-items: baseline; gap: .55rem; margin: .2rem 0 1.15rem; }
.attention-score strong { font-size: 2.65rem; letter-spacing: -.065em; }
.attention-score span { color: var(--muted); font-size: .78rem; }
.attention-stack { display: flex; height: 18px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.attention-stack > * { min-width: 2px; height: 100%; }
.stack-attended { background: var(--green); }.stack-queue { background: var(--amber); }.stack-menu { background: var(--coral); }.stack-other { background: #596973; }
.metric-list { display: grid; gap: .75rem; margin-top: 1.2rem; }
.metric-list > div { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: .55rem; margin: 0; color: var(--muted); font-size: .78rem; }
.metric-list i { width: 9px; height: 9px; border-radius: 50%; }
.metric-list strong { color: var(--text); }
.metric-list i.green { background: var(--green); }.metric-list i.queue { background: var(--amber); }.metric-list i.menu { background: var(--coral); }.metric-list i.muted { background: #596973; }
.ranking-chart,.queue-chart { gap: .55rem; margin: 0; padding: .1rem .2rem .4rem; }
.rank-row { width: 100%; min-height: 38px; grid-template-columns: 24px minmax(120px,.9fr) minmax(100px,1.5fr) 32px 62px; padding: .42rem .35rem; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.rank-row:hover,.rank-row:focus-visible { background: var(--surface-2); outline: 1px solid var(--border); }
.rank-row small { color: var(--muted-2); font-size: .68rem; white-space: nowrap; }
.queue-row { min-height: 44px; padding: .35rem .2rem; }
.queue-chart { padding-top: .1rem; }
.recovery-progress { margin-top: .4rem; }
.recovery-track { display: flex; height: 22px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.recovery-track > * { min-width: 2px; height: 100%; }
.recovery-done { background: linear-gradient(90deg,#0da66d,var(--green)); }.recovery-open { background: var(--amber); }
.recovery-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; margin-top: 1.1rem; }
.recovery-metrics > div { padding: .8rem .9rem; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface-2); }
.recovery-metrics span,.recovery-metrics strong,.recovery-metrics small { display: block; }
.recovery-metrics span { color: var(--muted); font-size: .73rem; }.recovery-metrics strong { margin-top: .22rem; font-size: 1.35rem; }.recovery-metrics small { margin-top: .12rem; color: var(--muted-2); font-size: .68rem; }
.agent-toolbar { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .65rem; margin-bottom: 1rem; }
.agent-toolbar label span { display: block; margin-bottom: .32rem; color: var(--muted); font-size: .72rem; }
.agent-kpis { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; }
.agent-kpis > div { min-height: 76px; padding: .8rem .85rem; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface); }
.agent-kpis span,.agent-kpis strong { display: block; }
.agent-kpis span { color: var(--muted); font-size: .74rem; line-height: 1.35; }
.agent-kpis strong { margin-top: .42rem; color: var(--text); font-size: 1.18rem; line-height: 1; font-variant-numeric: tabular-nums; }
.agent-hours { display: flex; align-items: flex-end; gap: .38rem; height: 145px; padding: .8rem .25rem 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
.agent-hour { flex: 1 0 24px; display: grid; grid-template-rows: 1fr 20px; align-items: end; gap: .3rem; height: 100%; }
.agent-hour i { display: block; width: 70%; min-height: 2px; margin: 0 auto; border-radius: 5px 5px 2px 2px; background: var(--green); }
.agent-hour span { color: var(--muted-2); font-size: .58rem; text-align: center; }
.agent-queues { display: grid; gap: .55rem; }
.agent-queue-row { display: grid; grid-template-columns: minmax(120px,1fr) auto; gap: .75rem; padding: .65rem .7rem; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--surface); }
.agent-queue-row span { color: var(--muted); font-size: .75rem; }.agent-queue-row strong { font-size: .78rem; }
.drawer-loading,.muted-copy { color: var(--muted); font-size: .82rem; line-height: 1.5; }
html[data-theme="light"] { color-scheme: light; --bg:#f2f6f4; --sidebar:#ffffff; --surface:#ffffff; --surface-2:#edf3f0; --surface-3:#e2ebe7; --border:#c8d6d0; --border-soft:#dce6e2; --text:#15231e; --muted:#61716a; --muted-2:#82918b; --green:#0ca873; --green-soft:rgba(12,168,115,.11); --blue:#297bd1; --amber:#c9830a; --coral:#df6654; --red:#d74747; --shadow:0 20px 55px rgba(34,57,48,.13); }
html[data-theme="light"] body { background: radial-gradient(circle at 78% -10%,rgba(12,168,115,.08),transparent 28rem),var(--bg); }
html[data-theme="light"] .sidebar { background: rgba(255,255,255,.92); }
html[data-theme="light"] .login-card,html[data-theme="light"] .panel,html[data-theme="light"] .kpi-card,html[data-theme="light"] .patient-kpis article { background: linear-gradient(145deg,#fff,#f7faf9); }
html[data-theme="light"] .kpi-card.primary { background: linear-gradient(145deg,rgba(12,168,115,.1),#fff 68%); }
html[data-theme="light"] .patient-kpis article.coral { background: linear-gradient(145deg,rgba(223,102,84,.08),#fff 70%); }
html[data-theme="light"] .patient-kpis article.green { background: linear-gradient(145deg,var(--green-soft),#fff 70%); }
html[data-theme="light"] .filter-panel,html[data-theme="light"] .insight-strip article,html[data-theme="light"] .patient-board>section { background: rgba(255,255,255,.78); }
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] .patient-comment { background:#fff; }
html[data-theme="light"] .preset-group,html[data-theme="light"] .segmented { background:#e8efec; }
html[data-theme="light"] .route-chip,html[data-theme="light"] .board-card,html[data-theme="light"] .detail-drawer { background:#fff; }
html[data-theme="light"] .rank-label,html[data-theme="light"] td,html[data-theme="light"] label,html[data-theme="light"] .detail-note { color:#33443d; }
html[data-theme="light"] .rank-track,html[data-theme="light"] .queue-meter,html[data-theme="light"] .outcome-track { background:#dce6e2; }
html[data-theme="light"] .activity-chart { background-image:linear-gradient(to bottom,transparent 24%,rgba(20,45,35,.06) 25%,transparent 26%,transparent 49%,rgba(20,45,35,.06) 50%,transparent 51%,transparent 74%,rgba(20,45,35,.06) 75%,transparent 76%); }
html[data-theme="light"] tbody tr:hover,html[data-theme="light"] tbody tr:focus { background:rgba(12,168,115,.045); }
html[data-theme="light"] .user-button span { color:var(--text); }

.calls-panel { overflow: hidden; }
.table-heading { align-items: center; padding: 1rem 1.05rem; border-bottom: 1px solid var(--border-soft); }
.table-meta { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .8125rem; }
.export-actions { display: flex; gap: .4rem; }
.secondary-button, .pagination button { min-height: 36px; padding: 0 .8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: #c5d0cc; font-size: .8125rem; cursor: pointer; }
.secondary-button:hover, .pagination button:hover:not(:disabled) { border-color: #43515a; color: var(--text); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 920px; }
th, td { padding: .82rem 1rem; border-bottom: 1px solid var(--border-soft); text-align: left; }
th { color: var(--muted-2); font-size: .75rem; font-weight: 750; letter-spacing: .035em; text-transform: uppercase; }
td { color: #cdd6d2; font-size: .875rem; }
tbody tr { cursor: pointer; transition: background .15s ease; } tbody tr:hover, tbody tr:focus { background: rgba(255,255,255,.025); outline: none; }
.date-cell strong, .date-cell span { display: block; }.date-cell strong { color: var(--text); font-size: .875rem; }.date-cell span { margin-top: .16rem; color: var(--muted-2); font-size: .75rem; }
.direction { display: inline-flex; align-items: center; gap: .35rem; }.direction i { font-style: normal; color: var(--green); }.direction.outbound i { color: var(--blue); }.direction.internal i { color: var(--amber); }
.route-cell { display: flex; align-items: center; gap: .42rem; }.route-chip { max-width: 125px; padding: .25rem .48rem; border: 1px solid var(--border); border-radius: 6px; color: #b8c5c0; background: #10171b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.route-arrow { color: var(--muted-2); }
.result-badge { display: inline-flex; align-items: center; padding: .28rem .55rem; border-radius: 99px; background: rgba(102,169,255,.1); color: #9bc7ff; font-size: .75rem; font-weight: 700; white-space: nowrap; }.result-badge.good { color: var(--green); background: var(--green-soft); }.result-badge.warn { color: var(--amber); background: rgba(255,189,89,.1); }.result-badge.bad { color: var(--red); background: rgba(255,114,114,.1); }
.open-call { width: 27px; height: 27px; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.empty-state { padding: 4rem 1rem; text-align: center; color: var(--muted); }.empty-state span { display: block; color: var(--green); font-size: 2rem; }.empty-state strong { display: block; margin-top: .7rem; color: var(--text); }.empty-state p { margin: .3rem 0 0; font-size: .875rem; }
.pagination { display: flex; justify-content: flex-end; align-items: center; gap: .8rem; padding: .8rem 1rem; }.pagination span { color: var(--muted); font-size: .75rem; }.pagination button:disabled { opacity: .35; cursor: not-allowed; }

.patients-page { display: grid; gap: .85rem; }
.patients-intro { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: .35rem 0 .25rem; }
.patients-intro h2 { margin: 0; font-size: 1.35rem; }.patients-intro p:not(.eyebrow) { margin: .35rem 0 0; color: var(--muted); font-size: .875rem; }
.patient-controls { display: flex; align-items: end; gap: .8rem; }
.patient-status-filter { width: min(100%,270px); }.patient-status-filter span { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .75rem; }
.patient-kpis { display: grid; grid-template-columns: repeat(5,1fr); gap: .8rem; }
.patient-kpis article { min-height: 115px; padding: 1rem; border: 1px solid var(--border-soft); border-radius: 14px; background: linear-gradient(145deg,var(--surface),#0e1418); }
.patient-kpis article.coral { border-color: rgba(255,143,122,.25); background: linear-gradient(145deg,rgba(255,143,122,.08),#0e1418 70%); }.patient-kpis article.green { border-color: rgba(32,217,147,.25); background: linear-gradient(145deg,var(--green-soft),#0e1418 70%); }
.patient-kpis span,.patient-kpis strong,.patient-kpis small { display: block; }.patient-kpis span { color: #b1beb9; font-size: .8125rem; }.patient-kpis strong { margin-top: .45rem; font-size: 1.7rem; }.patient-kpis small { margin-top: .2rem; color: var(--muted-2); font-size: .75rem; }
.patient-table-panel { overflow: hidden; }.patients-table { min-width: 1260px; }.patients-table tbody tr { cursor: default; }
.patient-row.status-recovered { background: rgba(32,217,147,.085); }.patient-row.status-recovered:hover { background: rgba(32,217,147,.12); }
.patient-row.status-patient_returned { background: rgba(102,169,255,.07); }.patient-row.status-patient_returned:hover { background: rgba(102,169,255,.105); }
.patient-row.status-attempted { background: rgba(255,143,122,.105); }.patient-row.status-attempted:hover { background: rgba(255,143,122,.15); }
.patient-row.status-manual_resolved { background: rgba(255,255,255,.025); opacity: .86; }
.patient-phone,.patient-first { display: block; }.patient-phone { color: var(--text); white-space: nowrap; }.patient-first { margin-top: .18rem; color: var(--muted-2); font-size: .75rem; }.call-count { display: inline-grid; place-items: center; min-width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.045); }
.recovery-badge { display: inline-flex; padding: .32rem .58rem; border-radius: 99px; color: #c6d0cc; background: rgba(255,255,255,.06); font-size: .75rem; font-weight: 750; white-space: nowrap; }.recovery-badge.attempted { color: #ffc0b5; background: rgba(255,143,122,.13); }.recovery-badge.recovered { color: var(--green); background: var(--green-soft); }.recovery-badge.patient_returned { color: #9bc7ff; background: rgba(102,169,255,.11); }.recovery-badge.pending { color: var(--amber); background: rgba(255,189,89,.1); }.recovery-badge.manual_resolved { color: #c6d0cc; background: rgba(255,255,255,.07); }
.attempt-detail { display: block; margin-top: .2rem; color: var(--coral); font-size: .72rem; }
.patient-comment { width: 250px; min-height: 42px; max-height: 100px; resize: vertical; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: 8px; background: #0b1014; color: var(--text); font: inherit; font-size: .8125rem; }.patient-comment:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(32,217,147,.1); }
.patient-actions { display: flex; gap: .4rem; align-items: center; }.patient-actions .secondary-button { white-space: nowrap; }.call-button { display: inline-grid; place-items: center; min-height: 36px; padding: 0 .8rem; border-radius: 8px; background: var(--green); color: #04120c; font-size: .8125rem; font-weight: 800; text-decoration: none; }.call-button:hover { background: #3be4a5; }
.patient-board { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; }
.patient-board > section { min-width: 0; padding: .85rem; border: 1px solid var(--border-soft); border-radius: 14px; background: rgba(17,23,28,.8); }
.patient-board header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; margin-bottom: .75rem; }
.patient-board h3 { margin: 0; font-size: .9rem; }.patient-board header strong { display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.05); }
.board-dot { width: 8px; height: 8px; border-radius: 50%; }.board-dot.pending { background: var(--amber); }.board-dot.attempted { background: var(--coral); }.board-dot.resolved { background: var(--green); }
.board-card { display: grid; gap: .65rem; margin-top: .55rem; padding: .8rem; border: 1px solid var(--border-soft); border-radius: 11px; background: #0d1317; cursor: pointer; transition: border-color .15s ease,transform .15s ease; }
.board-card:hover,.board-card:focus { border-color: #394851; transform: translateY(-1px); outline: none; }.board-card.status-attempted { border-color: rgba(255,143,122,.24); }.board-card.status-recovered { border-color: rgba(32,217,147,.2); }.board-card.status-patient_returned { border-color: rgba(102,169,255,.22); }
.board-card header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: 0; }.board-card header > strong { overflow: hidden; text-overflow: ellipsis; }.board-card p { margin: 0; color: var(--muted); font-size: .73rem; }.board-card strong { font-size: .84rem; }.board-card span,.board-card small,.board-empty { color: var(--muted); font-size: .73rem; }.board-empty { padding: .8rem; }
.board-facts { display: flex; flex-wrap: wrap; gap: .35rem .7rem; }.board-facts span { color: var(--muted); }.board-facts b { color: var(--text); }.board-card .patient-comment { width: 100%; }.board-card .patient-actions { flex-wrap: wrap; }
.history-phone { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

.detail-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.48); backdrop-filter: blur(3px); z-index: 20; }
.detail-drawer { position: fixed; top: 0; right: 0; width: min(100%,480px); height: 100vh; padding: 1.25rem; border-left: 1px solid var(--border); background: #0e1418; box-shadow: -25px 0 70px rgba(0,0,0,.4); transform: translateX(102%); transition: transform .22s ease; z-index: 21; overflow-y: auto; }
.detail-drawer.open { transform: translateX(0); }.detail-drawer header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }.detail-drawer h2 { margin: 0; font-size: 1.2rem; }
.detail-content { padding: 1rem 0; }.detail-summary { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; }.detail-stat { padding: .8rem; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface); }.detail-stat span, .detail-stat strong { display: block; }.detail-stat span { color: var(--muted); font-size: .75rem; }.detail-stat strong { margin-top: .25rem; font-size: .875rem; }
.detail-note { margin: 0; padding: .8rem; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface); color: #cdd6d2; line-height: 1.5; white-space: pre-wrap; }
.detail-section { margin-top: 1.35rem; }.detail-section h3 { margin: 0 0 .75rem; font-size: .875rem; }.timeline { display: grid; }.timeline-step { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: .7rem; min-height: 56px; }.timeline-step:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 1px; background: var(--border); }.timeline-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(32,217,147,.28); border-radius: 9px; background: #10231b; color: var(--green); font-size: .75rem; font-weight: 800; }.timeline-copy strong, .timeline-copy span { display: block; }.timeline-copy strong { font-size: .875rem; }.timeline-copy span { margin-top: .15rem; color: var(--muted); font-size: .75rem; }.attempt-list { display: flex; flex-wrap: wrap; gap: .45rem; }.attempt-chip { padding: .42rem .6rem; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: .75rem; }.attempt-chip.answered { border-color: rgba(32,217,147,.25); color: var(--green); background: var(--green-soft); }

.modal-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(4,7,9,.88); backdrop-filter: blur(10px); z-index: 40; }.password-modal,.confirm-modal { width: min(100%,450px); padding: 2rem; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }.password-modal h2,.confirm-modal h2 { margin: 0; font-size: 1.45rem; }.password-modal > p:not(.eyebrow),.confirm-modal > p:not(.eyebrow) { color: var(--muted); font-size: .84rem; line-height: 1.5; }.password-modal label { margin-top: .35rem; }
.confirm-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.2rem; }.confirm-actions .primary-button { min-height: 36px; margin: 0; padding: 0 .85rem; }
.toast { position: fixed; right: 1rem; bottom: 1rem; max-width: 360px; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-3); color: var(--text); box-shadow: var(--shadow); font-size: .875rem; transform: translateY(150%); transition: transform .2s ease; z-index: 50; }.toast.show { transform: translateY(0); }

@media (max-width: 1250px) { .kpi-grid { grid-template-columns: repeat(3,1fr); }.filters-form { grid-template-columns: repeat(3,1fr); }.phone-search { grid-column: span 2; }.charts-grid { grid-template-columns: 1fr; }.patient-kpis { grid-template-columns: repeat(3,1fr); }.insight-strip { grid-template-columns: repeat(2,1fr); }.dashboard-grid { grid-template-columns: 1fr; }.dashboard-wide { grid-column: auto; }.activity-card,.attention-card,.agents-card,.queues-card { grid-column: 1 / -1; }.agents-card,.queues-card { min-height: auto; } }
@media (max-width: 800px) { .app-shell { display: block; }.sidebar { position: sticky; height: auto; flex-direction: row; align-items: center; padding: .65rem; border-right: 0; border-bottom: 1px solid var(--border); overflow-x: auto; }.sidebar-brand { padding: 0 .5rem 0 0; }.sidebar-brand div:last-child, .connection-state, .sidebar-spacer { display: none; }.sidebar nav { display: flex; }.nav-item { width: auto; white-space: nowrap; padding: 0 .6rem; }.theme-toggle { margin: 0 0 0 .25rem; }.workspace { padding-top: 1rem; }.topbar { align-items: flex-start; }.clinic-pill div { display: none; }.filters-form { grid-template-columns: repeat(2,1fr); flex-basis: 100%; }.phone-search { grid-column: auto; }.kpi-grid { grid-template-columns: repeat(2,1fr); }.insight-strip { grid-template-columns: 1fr; }.charts-grid { display: block; }.outcome-panel { margin-top: .8rem; }.chart-panel, .outcome-panel { min-height: 280px; }.patient-board { grid-template-columns: 1fr; }.patient-controls { align-items: stretch; flex-direction: column; }.donut-wrap { grid-template-columns: 125px 1fr; gap: .8rem; }.donut { width: 120px; }.donut span { top: 38px; }.donut small { top: 67px; }.rank-row { grid-template-columns: 24px minmax(90px,1fr) minmax(70px,1fr) 25px 55px; }.recovery-metrics { grid-template-columns: repeat(2,1fr); }.summary-heading { align-items: flex-start; flex-direction: column; }.dashboard-card { padding: 1rem; } }
@media (max-width: 520px) { .login-card { padding: 2rem 1.35rem; }.topbar-actions { gap: .4rem; }.clinic-pill { display: none; }.filter-panel { padding: .65rem; }.preset-group { width: 100%; overflow-x: auto; }.preset-group button { flex: 1; }.custom-range { width: 100%; flex-direction: column; align-items: stretch; }.filters-form { grid-template-columns: 1fr; }.phone-search { grid-column: auto; }.kpi-grid { grid-template-columns: 1fr 1fr; }.kpi-card { min-height: 125px; padding: .8rem; }.kpi-card > strong { font-size: 1.65rem; }.kpi-top { font-size: .75rem; }.chart-actions { justify-content: flex-start; }.legend { flex-wrap: wrap; }.detail-summary { grid-template-columns: 1fr; }.patients-intro { align-items: stretch; flex-direction: column; }.patient-status-filter { width: 100%; }.patient-kpis { grid-template-columns: 1fr 1fr; }.patient-kpis article { min-height: 105px; padding: .8rem; }.table-meta { flex-wrap: wrap; justify-content: flex-end; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }