:root{
  --bg:#f8fafc;
  --card:#ffffff;
  --muted:#475569;
  --accent:#16a34a;
  --accent-contrast:#052e16;
  --text:#0f172a;
  --ring:#2563eb;
  --line:#e5e7eb;
  --day:#ffffff;
  --day-border:#e2e8f0;
  --day-muted:#94a3b8;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0a0f1d;
    --card:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    --muted:#94a3b8;
    --accent:#22c55e;
    --accent-contrast:#051b11;
    --text:#e5e7eb;
    --ring:#2563eb;
    --line:rgba(255,255,255,.1);
    --day:#0b1220;
    --day-border:rgba(255,255,255,.08);
    --day-muted:#93a0b2;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans','Helvetica Neue',Arial,'Apple Color Emoji','Segoe UI Emoji';background:var(--bg);color:var(--text)}
.container{width:min(1100px, 95vw); margin-inline:auto; padding:24px}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px}
.h1{font-size:clamp(1.25rem, 2.2vw, 1.8rem); font-weight:800; letter-spacing:.2px; margin:0 0 8px}
.small{color:var(--muted)}
.header{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px}
.controls button{background:#1f2937; border:1px solid rgba(255,255,255,.1); color:#fff; padding:8px 10px; border-radius:10px; cursor:pointer}
.controls button:focus{outline:2px solid var(--ring); outline-offset:2px}
.row{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; margin:10px 0}
.weekdays, .grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:6px}
@media (max-width:640px){ .weekdays{display:grid} .weekdays div{font-size:.8rem} .grid{grid-template-columns:repeat(7, 1fr)} }
.weekdays div{font-size:.85rem; text-align:center; color:var(--muted)}
.day{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; border-radius:10px; background:var(--day); border:1px solid var(--day-border); cursor:pointer; user-select:none; position:relative; font-weight:700; font-size:1rem}
.day:hover{border-color:var(--ring)}
.day.muted{opacity:.45; cursor:default}
.day.today::after{content:"hoy"; position:absolute; top:6px; left:6px; font-size:.7rem; color:var(--muted)}
.day.selected{outline:3px solid var(--accent); outline-offset:0; background:var(--accent); color:var(--accent-contrast)}
.badge{position:absolute; bottom:6px; right:6px; font-size:.8rem; padding:2px 8px; border-radius:999px; background:#0f172a; color:#fff; opacity:.9}
.footer{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-top:16px; gap:10px}
.legend{display:flex; gap:12px; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:.9rem}
.legend .dot{width:10px; height:10px; border-radius:999px; display:inline-block}
.legend .dot.avail{background:#0f172a}
.legend .dot.sel{background:var(--accent)}
.btn{background:#1f2937; color:#fff; border:1px solid rgba(255,255,255,.12); padding:10px 16px; border-radius:12px; cursor:pointer; text-decoration:none; display:inline-block}
.btn-primary{background:var(--accent); color:var(--accent-contrast); border:none; font-weight:800}
.btn-danger{background:#ef4444; border:none; color:#fff; font-weight:800}
.btn-primary:disabled{opacity:.4; cursor:not-allowed}
.grid-form{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; margin-top:12px}
.field{display:flex; flex-direction:column; gap:6px}
input, select, textarea{background:var(--day); color:var(--text); border:1px solid var(--day-border); border-radius:12px; padding:10px 12px; width:100%}
textarea{min-height:96px; resize:vertical}
input:focus, select:focus, textarea:focus{outline:2px solid var(--ring); outline-offset:2px}
.actions{display:flex; gap:10px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap}
.summary{margin-top:18px; padding:14px; border-radius:12px; background:var(--day); border:1px solid var(--day-border)}
.kv{display:grid; grid-template-columns:220px 1fr; gap:8px; margin:6px 0}
.k{color:var(--muted)}
a, a:visited{color:#2563eb}
table{width:100%; border-collapse:collapse; margin-top:10px}
th, td{border-bottom:1px solid var(--line); padding:8px; text-align:left; font-size:.95rem; vertical-align: top}
form.inline{display:inline}
.filters{display:flex; gap:8px; align-items:center; margin:12px 0; flex-wrap:wrap}
.filters input{max-width:280px}
.note{color:#9ca3af; font-size:.9rem}
.slot-list{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px; margin:12px 0}
.slot{display:flex; gap:8px; align-items:center; padding:8px 10px; background:var(--day); border:1px solid var(--day-border); border-radius:10px}
.tz{font-weight:600}
.rules{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px}
.rule-card{padding:12px; background:var(--day); border:1px solid var(--day-border); border-radius:12px; overflow:visible}
.rule-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px}
.time-row{display:grid; grid-template-columns:1fr 1fr; gap:8px}
@media (max-width:760px){ .time-row{ grid-template-columns:1fr } }
input[type="time"]{ min-width: 160px }