:root{ --acc2:#6B8E23;
  --bg:#070A06;
  --card:#10130C;
  --txt:#e7eefc;
  --muted:#a9b4c7;

  /* KEI corporate accent: verde oliva */
  --acc:#556B2F;
  --acc-2:#5e7e1f;          /* hover */
  --acc-line: rgba(107,142,35,0.55);
  --acc-bg: rgba(107,142,35,0.10);

  --line:rgba(85,107,47,0.35);
  --danger-line: rgba(170,60,60,0.60);
  --danger-bg: rgba(170,60,60,0.10);
  --success-line: rgba(60,170,100,0.60);
  --success-bg: rgba(60,170,100,0.10);
}

*{ box-sizing:border-box; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial; }
body{ margin:0; background:var(--bg); color:var(--txt); font-size:14px; }

/* Tipografía general (más compacta) */
h1{ font-size:22px; margin:0 0 10px; }
h2{ font-size:18px; margin:0 0 10px; }
h3{ font-size:16px; margin:0 0 8px; }
a{ color:var(--acc); text-decoration:none; }
a:hover{ color:var(--acc-2); }

.container{ max-width:1200px; margin:18px auto; padding:0 14px; }

.topbar{
  position:sticky; top:0;
  background:rgba(11,15,20,0.9);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--acc-line);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
}
.brand{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.brand a{ color:var(--txt); font-weight:800; letter-spacing:0.5px; }
.nav{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.user{ color:var(--muted); }

.btn{
  padding:8px 12px;
  border:1px solid var(--acc-line);
  border-radius:12px;
  color:var(--txt);
  background:transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn:hover{ background:var(--acc-bg); border-color:rgba(107,142,35,0.8); }
.btn.primary{ background:var(--acc-bg); }
.btn.primary:hover{ background:rgba(107,142,35,0.16); }

.btn.danger{ border-color:var(--danger-line); }
.btn.danger:hover{ background:var(--danger-bg); border-color:rgba(170,60,60,0.85); }

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  margin:12px 0;
}

.grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
@media (max-width:1000px){ .grid3{ grid-template-columns:1fr 1fr; } }
@media (max-width:900px){ .grid,.grid3{ grid-template-columns:1fr; } }

label{ display:block; margin:10px 0 6px; color:var(--muted); font-size:14px; }
input, select, textarea{
  width:100%;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0b0e08;
  color:var(--txt);
}

table{ width:100%; border-collapse:collapse; }
th,td{ padding:10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th{ color:var(--muted); font-weight:600; font-size:13px; }

.actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.badge{
  display:inline-block;
  padding:3px 10px;
  border:1px solid var(--acc-line);
  border-radius:999px;
  color:var(--muted);
  font-size:12px;
}

.notice{
  padding:10px;
  border:1px solid var(--acc-line);
  background:var(--acc-bg);
  border-radius:12px;
  color:var(--muted);
}
.notice.danger{ border-color:var(--danger-line); background:var(--danger-bg); color:var(--txt); }
.notice.success{ border-color:var(--success-line); background:var(--success-bg); color:var(--txt); }

.muted{ color:var(--muted); }

.big{ font-size:14px; font-weight:700; }

.kpi-input{
  display:grid;
  grid-template-columns: 1fr 180px 1fr;
  gap:10px;
  align-items:end;
}
@media (max-width:900px){ .kpi-input{ grid-template-columns:1fr; } }

/* TV (panel) */
.tv{ max-width:1500px; }
.tv h1{ font-size:22px; margin:0 0 10px; }
.tv .spark{ display:flex; gap:6px; flex-wrap:wrap; }
.tv .spark span{ padding:4px 8px; border:1px solid var(--line); border-radius:10px; font-size:12px; color:var(--muted); }

/* TV pantalla pública (sin interacción, densa) */
.tv-screen{ max-width:1800px; }
.tv-screen .header-row{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline; }
.tv-screen h1{ font-size:22px; margin:0; }
.tv-screen .meta{ color:var(--muted); font-size:13px; }
.tv-screen table{ table-layout:fixed; }
.tv-screen th, .tv-screen td{ padding:8px; font-size:13px; }
.tv-screen .col-dept{ width:13%; }
.tv-screen .col-kpi{ width:29%; }
.tv-screen .col-last{ width:16%; }
.tv-screen .col-spark{ width:28%; }
.tv-screen .col-avg{ width:14%; }
.tv-screen .kpi-name{ font-weight:800; color:var(--txt); }
.tv-screen .kpi-code{ font-size:11px; color:var(--muted); }

/* ===== TV Public (compact by sections) ===== */
.tv-screen .tv-head{ margin-bottom:10px; }
.tv-screen .tv-section{ padding:10px; margin:10px 0; }
.tv-screen h2{ margin:0 0 8px 0; font-size:16px; }
.tv-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  align-items:start;
}
@media (max-width: 1100px){
  .tv-grid{ grid-template-columns: 1fr; }
}

.tv-mini{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.tv-mini td{
  padding:6px 8px;
  border-bottom:1px solid var(--line);
}
.tv-mini tr:last-child td{ border-bottom:none; }
.tv-mini .kpi-name{ font-weight:700; }
.tv-mini .kpi-val{ text-align:right; font-variant-numeric: tabular-nums; }

.tv-matrix{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.tv-matrix th, .tv-matrix td{
  padding:6px 8px;
  border-bottom:1px solid var(--line);
}
.tv-matrix th{
  color:var(--muted);
  font-weight:700;
}
.tv-matrix th:not(:first-child){ text-align:right; }
.tv-matrix tr:last-child td{ border-bottom:none; }
.tv-matrix td:first-child{ font-weight:700; }
.tv-matrix .kpi-val{ text-align:right; font-variant-numeric: tabular-nums; }

/* extra compact: reduce global card spacing inside TV */
.tv-screen .card{ margin:10px 0; }


/* Olive table headers */
thead th{ background: rgba(85,107,47,0.16); }

/* Safety list readability (multi-line rows) */
table.safety-list td, table.safety-list th{ padding:10px; }

/* Make main+sub rows feel like one item */
table.safety-list tr.mainrow td{
  background: transparent;
  border-bottom:0;
}
table.safety-list tr.subrow td{
  padding-top:0;
  padding-bottom:14px;
  background: transparent;
  border-top:0;
  position:relative;
}

/* Clickable safety blocks */
table.safety-list tr.safety-click{ cursor:pointer; }
table.safety-list tr.safety-click:hover td{
  background: rgba(255,255,255,0.03);
}

/* Left accent that spans both lines */
table.safety-list tr.mainrow td:first-child{
  border-left:4px solid rgba(107,142,35,0.35);
}
table.safety-list tr.subrow td{
  border-left:4px solid rgba(107,142,35,0.35);
}

/* Continuation cue: vertical connector + indent */
table.safety-list tr.subrow td:before{
  content:'';
  position:absolute;
  left:18px;
  top:0;
  bottom:0;
  width:2px;
  background: rgba(107,142,35,0.18);
}

.subrow-wrap{ display:flex; flex-direction:column; gap:8px; padding-left:28px; }
.subrow-desc{ color:var(--txt); }
.subrow-desc:before{ content:'↳ '; color:var(--muted); }
.subrow-meta{ display:flex; flex-wrap:wrap; gap:18px; color:var(--muted); font-size:13px; }


/* Mostrar KPIs (tv.php) - 5 días en columnas */
.tv-kpi-table th.num, .tv-kpi-table td.num{ text-align:right; font-variant-numeric: tabular-nums; }
.tv-kpi-table th.col-day, .tv-kpi-table td.col-day{ border-left:1px solid var(--line); }
.tv-kpi-table th.col-month, .tv-kpi-table td.col-month{ border-left:1px solid var(--line); }

/* Resaltar "ayer" (último laborable) */
.tv-kpi-table th.is-yesterday,
.tv-kpi-table td.is-yesterday{
  background: rgba(107,142,35,0.22);
}
.tv-kpi-table th.is-yesterday{ font-weight:800; }


/* Modal (dialog) */
dialog.modal{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
  color:var(--txt);
  padding:14px;
  width:min(560px, 92vw);
}
dialog::backdrop{
  background:rgba(0,0,0,0.65);
}