/* ════════════════════════════════════════════════════════════════════════════
   Monitor Landings BeCall — app.css
   Wallboard oscuro. Paleta data-viz validada (modo oscuro).
   ════════════════════════════════════════════════════════════════════════════ */
:root{
  --page:#0d0d0d; --surface:#1a1a19; --surface-2:#212120; --surface-3:#292928;
  --ink:#ffffff; --ink-2:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.06);
  --good:#0ca30c; --warn:#fab219; --serious:#ec835a; --crit:#d03b3b;
  --blue:#3987e5; --aqua:#199e70;
  --radius:14px; --radius-sm:10px;
  --font:system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--page); color:var(--ink); font-family:var(--font);
  font-size:14px; line-height:1.4; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-weight:650}
.muted{color:var(--muted)}
b{font-weight:750}

/* ── LOGIN ─────────────────────────────────────────────────────────────── */
.login-page{display:grid;place-items:center;min-height:100vh;
  background:radial-gradient(1200px 600px at 50% -10%, #17201c 0%, var(--page) 60%)}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:38px 40px;width:min(360px,92vw);box-shadow:0 24px 60px rgba(0,0,0,.5);text-align:center}
.login-logo{font-size:22px;letter-spacing:.2px;margin-bottom:4px}
.login-logo .dot,.brand .dot{display:inline-block;width:11px;height:11px;border-radius:50%;
  background:var(--good);box-shadow:0 0 12px var(--good);vertical-align:middle;margin-right:4px}
.login-sub{color:var(--muted);margin:2px 0 24px;font-size:13px}
.login-card input,.login-card button{width:100%;padding:12px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--border);font-size:15px;font-family:inherit}
.login-card input{background:var(--surface-3);color:var(--ink);margin-bottom:12px}
.login-card input:focus{outline:2px solid var(--blue);border-color:transparent}
.login-card button{background:var(--good);color:#04210a;font-weight:750;border:none;cursor:pointer}
.login-card button:hover{filter:brightness(1.08)}
.login-err{color:var(--crit);font-size:13px;margin:12px 0 0}

/* ── TOPBAR ────────────────────────────────────────────────────────────── */
.app{padding:0}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 20px;background:linear-gradient(var(--surface),rgba(26,26,25,.92));
  border-bottom:1px solid var(--border);backdrop-filter:blur(6px)}
.brand{font-size:17px;letter-spacing:.2px;white-space:nowrap}
.brand em{color:var(--muted);font-style:normal;font-weight:500}
.topbar-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pills{display:flex;background:var(--surface-3);border-radius:999px;padding:3px}
.pill{border:none;background:transparent;color:var(--ink-2);padding:6px 14px;border-radius:999px;
  cursor:pointer;font-size:13px;font-weight:600;font-family:inherit}
.pill.is-active{background:var(--blue);color:#04162e}
.select{background:var(--surface-3);color:var(--ink);border:1px solid var(--border);
  border-radius:999px;padding:7px 14px;font-family:inherit;font-size:13px;cursor:pointer}
.clock{font-variant-numeric:tabular-nums;font-size:15px;color:var(--ink-2);min-width:78px;text-align:center}
.poll-age{font-size:11px;color:var(--muted);min-width:20px}
.poll-age.stale{color:var(--warn)}
.logout{color:var(--muted);text-decoration:none;font-size:18px;padding:2px 6px}
.logout:hover{color:var(--crit)}

/* ── KPIs ──────────────────────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.8fr;gap:14px;padding:16px 20px 4px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;position:relative}
.kpi-label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.kpi-value{font-size:40px;font-weight:750;line-height:1.05;margin-top:2px}
.kpi-hero{background:linear-gradient(135deg,#17261d,var(--surface))}
.kpi-hero .kpi-value{color:#fff}
.kpi-spark{position:absolute;right:14px;bottom:10px;left:18px;height:34px;opacity:.9}
.kpi-quality .quality-bars{display:flex;height:22px;border-radius:6px;overflow:hidden;margin:10px 0 8px;background:var(--surface-3)}
.quality-bars span{display:block;height:100%}
.quality-legend{display:flex;gap:14px;font-size:12px;color:var(--ink-2);flex-wrap:wrap}
.quality-legend .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}
.sw.good{background:var(--good)} .sw.warn{background:var(--warn)} .sw.crit{background:var(--crit)}
.rangelabel{color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0}

/* ── ALERTS BAR ────────────────────────────────────────────────────────── */
.alerts-bar{margin:8px 20px 0;display:flex;flex-direction:column;gap:6px}
.alert-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--border);font-size:13px}
.alert-item.critical{background:rgba(208,59,59,.14);border-color:rgba(208,59,59,.4)}
.alert-item.warn{background:rgba(250,178,25,.12);border-color:rgba(250,178,25,.35)}
.alert-item .a-ic{font-size:15px}
.alert-item .a-land{font-weight:700}
.alert-item .a-age{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}

/* ── LAYOUT ────────────────────────────────────────────────────────────── */
.layout{display:grid;grid-template-columns:300px 1fr 320px;gap:14px;padding:14px 20px 24px;align-items:start}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.card-head h3{font-size:14px;color:var(--ink)}

/* ── LANDING CARDS ─────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;align-content:start}
.lcard{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--c,#888);
  border-radius:var(--radius);padding:12px 14px;position:relative;overflow:hidden}
.lcard.status-critical{border-color:rgba(208,59,59,.5);box-shadow:0 0 0 1px rgba(208,59,59,.25) inset;animation:pulse 1.6s infinite}
.lcard.status-warn{border-color:rgba(250,178,25,.4)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 1px rgba(208,59,59,.2) inset}50%{box-shadow:0 0 0 1px rgba(208,59,59,.6) inset,0 0 14px rgba(208,59,59,.25)}}
.lcard-top{display:flex;align-items:center;gap:8px}
.lcard-name{font-weight:700;font-size:13.5px}
.lstatus{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.lstatus.ok{background:var(--good);box-shadow:0 0 8px var(--good)}
.lstatus.warn{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.lstatus.critical{background:var(--crit);box-shadow:0 0 8px var(--crit)}
.lstatus.unknown{background:var(--muted)}
.lcard-nums{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.lcard-today{font-size:30px;font-weight:750;line-height:1}
.lcard-sub{font-size:11px;color:var(--muted)}
.lcard-spark{height:30px;margin-top:6px}
.lcard-foot{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;font-size:11px}
.chip{padding:2px 8px;border-radius:999px;background:var(--surface-3);color:var(--ink-2);white-space:nowrap}
.chip.up{color:var(--good)} .chip.down{color:var(--crit);background:rgba(208,59,59,.15)}
.chip.lv{color:var(--warn)} .chip.er{color:var(--crit)}
.lcard-last{font-size:11px;color:var(--muted);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── CHARTS ────────────────────────────────────────────────────────────── */
.charts{display:flex;flex-direction:column;gap:14px;min-width:0}
.chart-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.chart-box{position:relative;height:230px}
.chart-wide .chart-box{height:250px}
.chart-box--donut{height:230px;display:flex;align-items:center;justify-content:center}
canvas{max-width:100%}

/* ── HERRAMIENTAS (Calculadora · presupuestos) ─────────────────────────── */
.tools{display:flex;flex-direction:column;gap:14px}
.tool-card{border-left:4px solid var(--c,#888)}
.tool-card.status-critical{border-color:rgba(208,59,59,.5);box-shadow:0 0 0 1px rgba(208,59,59,.25) inset}
.tool-card .card-head h3{display:flex;align-items:center;gap:8px}
.tool-sub{font-size:12px;color:var(--muted);margin:-4px 0 12px}
.tool-sub b{color:var(--ink-2)}
.budgets{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.bud-group{background:var(--surface-3);border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:8px 10px}
.bud-grp-name{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin-bottom:6px}
.bud-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:3px 0;font-size:12.5px}
.bud-label{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bud-date{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}

/* ── FEED ──────────────────────────────────────────────────────────────── */
.feed{position:sticky;top:70px;max-height:calc(100vh - 90px);display:flex;flex-direction:column}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good);animation:blink 1.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.feed-list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
.feed-list::-webkit-scrollbar{width:6px}
.feed-list::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:999px}
.feed-item{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;
  padding:8px 4px;border-bottom:1px solid var(--border-2)}
.feed-item.is-new{animation:flashin 1.2s ease}
@keyframes flashin{0%{background:rgba(57,135,229,.22)}100%{background:transparent}}
.fi-bar{width:3px;height:30px;border-radius:2px;background:var(--c,#888)}
.fi-main{min-width:0}
.fi-land,.fi-orig{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.fi-land{font-size:11px;color:var(--muted)}
.fi-orig{font-size:12.5px}
.fi-orig b{color:var(--ink)}
.fi-right{text-align:right;white-space:nowrap}
.fi-time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.tag{display:inline-block;font-size:10px;padding:1px 6px;border-radius:999px;margin-top:2px;font-weight:650}
.tag.ok{background:rgba(12,163,12,.16);color:#4cd94c}
.tag.low{background:rgba(250,178,25,.16);color:var(--warn)}
.tag.err{background:rgba(208,59,59,.18);color:#f07070}

/* ── RESPONSIVE (pantalla fija grande → tablet) ────────────────────────── */
@media (max-width:1280px){
  .layout{grid-template-columns:1fr 320px}
  .cards{grid-column:1 / -1}
}
@media (max-width:920px){
  .kpis{grid-template-columns:1fr 1fr}
  .layout{grid-template-columns:1fr}
  .feed{position:static;max-height:420px}
  .chart-row{grid-template-columns:1fr}
}