/* ─── Tokens de diseño (dark-blue, coherente con el resto de dashboards) ─── */
:root{
  --db-bg:#080c14;
  --db-panel-bg:rgba(13,20,33,0.92);
  --db-panel-bg-soft:rgba(15,23,42,0.85);
  --db-border:rgba(59,130,246,0.12);
  --db-border-soft:rgba(59,130,246,0.08);
  --db-accent:#3b82f6;
  --db-accent2:#6366f1;
  --db-danger:#ef4444;
  --db-success:#22c55e;
  --db-warning:#f59e0b;
  --db-text:#e2e8f0;
  --db-text-body:#c9d1e0;
  --db-text-muted:#4b5668;
  --db-radius:10px;
  --db-radius-sm:6px;
  --db-gap:9px;
  --db-transition:0.15s ease;
}
#home{background:var(--db-bg) !important;color:var(--db-text-body);width:100%;height:100%;overflow:hidden}
.db-wrap{display:flex;flex-direction:column;width:100%;height:100vh;padding:12px 16px;box-sizing:border-box;gap:var(--db-gap);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
/* Topbar */
.db-topbar{display:flex;align-items:center;gap:16px;padding:8px 18px;background:var(--db-panel-bg-soft);border:1px solid var(--db-border);border-radius:var(--db-radius);flex-shrink:0;height:46px;box-sizing:border-box;box-shadow:0 1px 2px rgba(0,0,0,0.25)}
.db-title{font-size:18px;font-weight:600;color:#fff;letter-spacing:0.2px;flex:1}
.db-clock{font-size:24px;font-weight:300;color:var(--db-accent);font-variant-numeric:tabular-nums;letter-spacing:1.5px}
.db-date{font-size:11px;color:var(--db-text-muted)}
.db-badge{font-size:10px;font-weight:700;letter-spacing:1.2px;padding:4px 12px;border-radius:20px}
.badge-ok{background:rgba(34,197,94,0.12);color:var(--db-success);border:1px solid rgba(34,197,94,0.3)}
.badge-alert{background:rgba(220,38,38,0.12);color:var(--db-danger);border:1px solid rgba(220,38,38,0.35);animation:dbBlink 1s infinite}
@keyframes dbBlink{0%,100%{opacity:1}50%{opacity:0.45}}
/* KPI */
.db-kpi-row{display:flex;gap:var(--db-gap);flex-shrink:0;height:74px}
.db-kpi{flex:1;position:relative;background:var(--db-panel-bg-soft);border:1px solid var(--db-border);border-radius:var(--db-radius);padding:11px 16px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;transition:border-color var(--db-transition);overflow:hidden}
.kpi-danger{border-color:rgba(220,38,38,0.25);background:rgba(25,8,8,0.85)}
/* El ícono queda como badge decorativo en la esquina, así el número+label
   ocupan todo el ancho de la tarjeta en vez de quedar apretados a la izquierda
   con un hueco vacío a la derecha */
.db-kpi-icon{position:absolute;top:10px;right:12px;width:30px;height:30px;border-radius:var(--db-radius-sm);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;opacity:0.9}
.ic-blue{background:rgba(59,130,246,0.15);color:var(--db-accent)}
.ic-red{background:rgba(220,38,38,0.15);color:var(--db-danger)}
.ic-green{background:rgba(34,197,94,0.15);color:var(--db-success)}
.ic-yellow{background:rgba(245,158,11,0.15);color:var(--db-warning)}
.ic-blue2{background:rgba(99,102,241,0.15);color:var(--db-accent2)}
.db-kpi-body{display:flex;flex-direction:column;min-width:0;width:100%}
.db-kpi-val{font-size:32px;font-weight:600;color:#fff;line-height:1.1;letter-spacing:-0.5px;font-variant-numeric:tabular-nums}
.val-red{color:var(--db-danger)}.val-green{color:var(--db-success)}.val-yellow{color:var(--db-warning)}
.db-kpi-lbl{font-size:12px;font-weight:500;color:var(--db-text-body);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;letter-spacing:0.6px}
.db-kpi-sub{font-size:10px;color:var(--db-text-muted);margin-top:1px}
/* Semáforo de estado de conexión (arriba del KPI "Online") */
.conn-dot{position:absolute;top:11px;left:14px;width:8px;height:8px;border-radius:50%;background:var(--db-text-muted);box-shadow:0 0 0 3px rgba(75,86,104,0.15);transition:background-color var(--db-transition),box-shadow var(--db-transition)}
.conn-dot.conn-ok{background:var(--db-success);box-shadow:0 0 0 3px rgba(34,197,94,0.18)}
.conn-dot.conn-error{background:var(--db-danger);box-shadow:0 0 0 3px rgba(220,38,38,0.2);animation:dbBlink 1s infinite}
/* Layout */
.db-main{display:flex;gap:var(--db-gap);flex:1;min-height:0}
.db-col-l,.db-col-r{display:flex;flex-direction:column;gap:var(--db-gap);width:27%;flex-shrink:0}
.db-col-c{display:flex;flex-direction:column;gap:var(--db-gap);flex:1;min-width:0}
/* Panels */
.db-panel{background:var(--db-panel-bg);border:1px solid var(--db-border-soft);border-radius:var(--db-radius);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,0.2)}
.db-panel-tall{flex:3;min-height:0}
.db-panel-short{flex:1;min-height:100px}
/* Columna derecha: el donut "Proporción Hoy" tiene poca info (2 valores) y no
   necesita tanta altura como un panel-tall genérico; se lo achica un poco y se
   le da más espacio a "Tendencia Semanal" para que las barras respiren */
.db-col-r .db-panel-tall{flex:1.7;min-height:0}
.db-col-r .db-panel-short{flex:1.3;min-height:120px}
.db-panel-face{flex:0 0 254px;flex-direction:row !important;align-items:center;padding:14px 16px;gap:14px}
.db-panel-table{flex:1;min-height:0}
.db-panel-hdr{padding:8px 14px 6px;flex-shrink:0;border-bottom:1px solid var(--db-border-soft);display:flex;align-items:center;gap:8px}
.db-panel-ttl{font-size:10px;font-weight:700;color:var(--db-text-muted);text-transform:uppercase;letter-spacing:1.6px}
.db-panel-count{font-size:9px;color:var(--db-accent);margin-left:4px;font-weight:600}
.db-chart{flex:1;min-height:0;width:100%}
/* Face */
.db-face{width:220px;min-width:220px;height:255px;border-radius:var(--db-radius-sm);object-fit:cover;border:1px solid var(--db-border);flex-shrink:0;background:#0d1421}
.db-face-info{flex:1;display:flex;flex-direction:column;min-width:0}
.db-face-row{display:flex;flex-direction:column;padding:6px 0;border-bottom:1px solid var(--db-border-soft)}
.db-face-row:last-child{border-bottom:none}
.db-face-lbl{font-size:9px;color:var(--db-text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px;font-weight:600}
.db-face-row span:last-child{font-size:14px;color:var(--db-text);font-weight:500}
.alcohol-pos{color:var(--db-danger) !important;font-weight:700 !important}
.alcohol-neg{color:var(--db-success) !important;font-weight:600}
/* Records — NO scroll */
.db-records-body{flex:1;overflow:hidden;padding:4px 10px}
.db-rec-hdr,.db-rec-row{display:grid;grid-template-columns:80px 84px 1fr 120px 140px;gap:8px;padding:5px 6px;font-size:11px;align-items:center}
.db-rec-hdr{color:var(--db-text-muted);font-size:9px;text-transform:uppercase;letter-spacing:1px;font-weight:700;border-bottom:1px solid rgba(59,130,246,0.15);margin-bottom:2px}
.db-rec-row{color:var(--db-text-body);border-bottom:1px solid var(--db-border-soft);transition:background-color var(--db-transition)}
.db-rec-row:last-child{border-bottom:none}
.db-rec-row:hover{background-color:rgba(59,130,246,0.05)}
.row-alert{color:var(--db-danger) !important}
.row-alert span{color:var(--db-danger) !important}
.row-alert:hover{background-color:rgba(220,38,38,0.06)}
/* Scrollbar sutil (por si algún panel llega a necesitar overflow) */
.db-panel ::-webkit-scrollbar{width:6px;height:6px}
.db-panel ::-webkit-scrollbar-thumb{background:rgba(59,130,246,0.25);border-radius:3px}
.db-panel ::-webkit-scrollbar-track{background:transparent}