*{box-sizing:border-box}
:root{
  --bg:#eef2f7;
  --surface:#ffffff;
  --navy:#08111f;
  --navy-2:#101c2e;
  --line:#cbd5e1;
  --text:#172033;
  --muted:#64748b;
  --blue-soft:#eaf3ff;
  --green-soft:#e9f8f0;
  --red-soft:#fff0f1;
  --amber-soft:#fff7df;
}
html,body{min-height:100%;margin:0}
body{
  background:linear-gradient(145deg,#e8edf4 0%,#f7f9fc 48%,#e9eef5 100%);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.app{padding:24px;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.board-shell{
  width:min(1500px,100%);
  background:var(--surface);
  border:1px solid #d7dee8;
  border-radius:16px;
  box-shadow:0 18px 45px rgba(15,23,42,.12),0 3px 10px rgba(15,23,42,.06);
  overflow:hidden;
}
.board-scroll{overflow:auto}
.board{
  width:100%;
  min-width:1080px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}
.col-camion{width:18%}.col-inicio{width:10%}.col-fin{width:10%}.col-estado{width:14%}
.col-demora{width:10%}.col-cambio{width:11%}.col-muertos{width:9%}.col-equipo{width:12%}
.board th{
  height:48px;
  padding:0 10px;
  background:linear-gradient(180deg,#111d30 0%,#08111f 100%);
  color:#f8fafc;
  border-right:1px solid #243149;
  border-bottom:2px solid #2563eb;
  font-size:12px;
  font-weight:800;
  letter-spacing:.05em;
  text-align:center;
  white-space:nowrap;
}
.board th:first-child{border-top-left-radius:15px}.board th:last-child{border-right:0;border-top-right-radius:15px}
.board td{
  height:44px;
  padding:7px 10px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
  text-align:center;
  font-size:14px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.board td:last-child{border-right:0}
.board tbody tr:nth-child(even) td{background:#f8fafc}
.board tbody tr:hover td{background:#f1f5f9}
.board tbody tr.empty td{color:transparent;background:#fbfcfe}
.camion-cell{text-align:left!important;padding-left:16px!important;font-weight:800!important;color:#0f172a}
.inicio-cell{color:#166534;background:var(--green-soft)!important}
.fin-cell{color:#b42318;background:var(--red-soft)!important}
.estado-cell{font-size:12px!important;font-weight:800!important;letter-spacing:.02em}
.estado-esperando{color:#64748b;background:#f1f5f9!important}
.estado-en-descarga{color:#075985;background:var(--blue-soft)!important}
.estado-pendiente-muertos{color:#92400e;background:var(--amber-soft)!important}
.estado-finalizado{color:#166534;background:var(--green-soft)!important}
.board tbody td:nth-child(5),.board tbody td:nth-child(6),.board tbody td:nth-child(8){color:#334155}
.board tbody td:nth-child(7){font-weight:800}
.totals-row td{
  height:50px;
  border-bottom:0;
  background:#0b1626;
  color:#fff;
  border-right:1px solid #25344a;
}
.totals-row td:first-child{border-bottom-left-radius:15px}.totals-row td:last-child{border-bottom-right-radius:15px;border-right:0}
.hora-fin-label{font-size:11px!important;font-weight:800!important;letter-spacing:.06em;text-align:right!important;color:#aebbd0!important}
.hora-fin-value{font-size:15px!important;font-weight:850!important;color:#fff!important;text-align:left!important}
.muertos-total-label{font-size:11px!important;font-weight:850!important;letter-spacing:.08em;text-align:right!important;color:#aebbd0!important}
.muertos-total-value{font-size:18px!important;font-weight:900!important;color:#fff!important;text-align:center!important}
@media(max-width:700px){
  .app{padding:10px}.board-shell{border-radius:12px}.board{min-width:1000px}
  .board th{height:42px}.board td{height:40px;font-size:13px}
}

.board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 20px;background:#fff;border-bottom:1px solid #d7dee8}
.page-title{font-size:18px;font-weight:900;letter-spacing:.06em;color:#08111f}.page-subtitle{margin-top:3px;font-size:12px;color:#64748b;font-weight:650}
.history-button{border:0;border-radius:10px;padding:11px 16px;background:#0b1626;color:#fff;font-weight:850;letter-spacing:.03em;cursor:pointer;box-shadow:0 4px 12px rgba(15,23,42,.15)}
.history-button:hover{filter:brightness(1.08)}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(2,8,23,.58);z-index:20}
.modal.open{display:flex}.modal-card{width:min(900px,100%);max-height:94vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:0 25px 70px rgba(0,0,0,.28);padding:20px}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.modal-title{font-size:20px;font-weight:900;color:#08111f}.modal-subtitle{font-size:13px;color:#64748b;margin-top:4px}.close-button{border:0;background:#eef2f7;width:38px;height:38px;border-radius:10px;font-size:25px;cursor:pointer;color:#334155}
.calendar-head{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:8px;margin:20px 0 10px}.calendar-head button{border:1px solid #d7dee8;background:#f8fafc;border-radius:9px;height:38px;font-size:25px;cursor:pointer}.calendar-head strong{text-align:center;font-size:17px}
.weekdays,.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.weekdays{margin-bottom:6px}.weekdays span{text-align:center;font-size:11px;font-weight:850;color:#64748b;padding:5px}
.calendar-day{min-height:42px;border:1px solid #e2e8f0;border-radius:9px;background:#fff;font-weight:750;color:#334155;cursor:pointer}.calendar-day:hover{background:#f1f5f9}.calendar-day.has-record{background:#dbeafe;border-color:#60a5fa;color:#075985;font-weight:900;box-shadow:inset 0 0 0 1px #93c5fd}.calendar-day.blank{border-color:transparent;background:transparent;cursor:default}
.history-detail{margin-top:18px;border-top:1px solid #e2e8f0;padding-top:14px}.history-empty{padding:18px;text-align:center;color:#64748b;background:#f8fafc;border-radius:10px}.history-selected{display:flex;justify-content:space-between;gap:15px;padding:12px 14px;border-radius:10px;background:#eef6ff;color:#0f3b61;font-size:14px}
@media(max-width:700px){.board-toolbar{padding:12px}.page-title{font-size:15px}.history-button{padding:9px 11px;font-size:11px}.modal-card{padding:14px}.calendar-day{min-height:38px}.history-selected{flex-direction:column;gap:4px}}
.toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
@media(max-width:700px){.toolbar-actions{gap:6px}.toolbar-actions .history-button{padding:9px 10px;font-size:10px}}

.page-controls{
  width:min(1500px,100%);
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.history-button,.today-button{
  border:0;
  border-radius:10px;
  padding:10px 15px;
  background:#0b1626;
  color:#fff;
  font-weight:850;
  font-size:12px;
  letter-spacing:.03em;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(15,23,42,.12);
}
.today-button{background:#1d4ed8}
.history-button:hover,.today-button:hover{filter:brightness(1.08)}
.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2,8,23,.58);
  z-index:20;
}
.modal.open{display:flex}
.modal-card{
  width:min(900px,100%);
  max-height:94vh;
  overflow:auto;
  background:#fff;
  border-radius:18px;
  box-shadow:0 25px 70px rgba(0,0,0,.28);
  padding:20px;
}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}
.modal-title{font-size:20px;font-weight:900;color:#08111f}
.modal-subtitle{font-size:13px;color:#64748b;margin-top:4px}
.close-button{border:0;background:#eef2f7;width:38px;height:38px;border-radius:10px;font-size:25px;cursor:pointer;color:#334155}
.calendar-head{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:8px;margin:20px 0 10px}
.calendar-head button{border:1px solid #d7dee8;background:#f8fafc;border-radius:9px;height:38px;font-size:25px;cursor:pointer}
.calendar-head strong{text-align:center;font-size:17px}
.weekdays,.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.weekdays{margin-bottom:6px}
.weekdays span{text-align:center;font-size:11px;font-weight:850;color:#64748b;padding:5px}
.calendar-day{min-height:42px;border:1px solid #e2e8f0;border-radius:9px;background:#fff;font-weight:750;color:#334155;cursor:pointer}
.calendar-day:hover{background:#f1f5f9}
.calendar-day.has-record{background:#dbeafe;border-color:#60a5fa;color:#075985;font-weight:900;box-shadow:inset 0 0 0 1px #93c5fd}
.calendar-day.blank{border-color:transparent;background:transparent;cursor:default}
.history-empty{padding:18px;text-align:center;color:#64748b;background:#f8fafc;border-radius:10px;grid-column:1/-1}
@media(max-width:700px){
  .page-controls{justify-content:stretch;gap:6px}
  .history-button,.today-button{flex:1;padding:9px 10px;font-size:10px}
  .modal-card{padding:14px}
  .calendar-day{min-height:38px}
}