:root{--bg:#f6f7fb;--card:#fff;--text:#1f2937;--muted:#6b7280;--ok:#22c55e;--prob:#facc15;--cancel:#fb7185;--empty:#e5e7eb;--accent:#6366f1;--border:#d1d5db}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
header{padding:18px 14px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:white}
header h1{margin:0;font-size:24px}
header p{margin:4px 0 0;opacity:.9}
main{padding:12px;max-width:980px;margin:auto}
.card{background:var(--card);border-radius:16px;padding:14px;margin-bottom:12px;box-shadow:0 6px 20px rgba(0,0,0,.07)}
.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
label{font-size:13px;color:var(--muted);display:block;margin-bottom:4px}
input,select,button{width:100%;border:1px solid var(--border);border-radius:12px;padding:11px;font-size:16px;background:white}
button{border:0;background:var(--accent);color:white;font-weight:700;cursor:pointer}
button.secondary{background:#111827}
button.danger{background:#ef4444}
.mode-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mode{color:#1f2937;border:2px solid transparent;background:#f3f4f6}
.mode.active{border-color:#111827;transform:scale(.98)}
.mode[data-mode="probable"]{background:var(--prob)}
.mode[data-mode="confirmado"]{background:var(--ok);color:white}
.mode[data-mode="cancelado"]{background:var(--cancel);color:white}
.grid-wrap{overflow:auto;border-radius:14px;border:1px solid var(--border)}
table{border-collapse:separate;border-spacing:0;width:100%;min-width:760px;background:white}
th,td{border-bottom:1px solid var(--border);border-right:1px solid var(--border);text-align:center;padding:8px;font-size:13px}
th{position:sticky;top:0;background:#f9fafb;z-index:2}
th:first-child,td:first-child{position:sticky;left:0;background:#f9fafb;z-index:1;font-weight:700}
.hour-cell{font-size:12px;line-height:1.15}
.hour-cell b{font-size:15px}
.slot{height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;user-select:none;cursor:pointer;background:var(--empty);color:#374151}
.slot.confirmado{background:var(--ok);color:white}
.slot.probable{background:var(--prob);color:#4b3b00}
.slot.cancelado{background:var(--cancel);color:white}
.totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.total-box{background:#f9fafb;border:1px solid var(--border);border-radius:14px;padding:12px}
.total-box strong{display:block;font-size:20px;margin-top:4px}
.actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.note{font-size:13px;color:var(--muted);line-height:1.35;min-height:18px}
.hint{background:#eef2ff;color:#3730a3;border-radius:12px;padding:10px;font-size:14px;margin-top:10px}
@media(max-width:700px){.controls,.totals,.actions,.mode-row{grid-template-columns:1fr 1fr}header h1{font-size:22px}}