:root {
  --bg:#f6f7f9; --panel:#ffffff; --text:#1f2937; --muted:#6b7280; --border:#d1d5db;
  --accent:#eba834; --accent-ink:#1a1a1a;
  --today:#eba834; --shadow:0 1px 4px rgba(0,0,0,.08);
}
* { box-sizing:border-box; }
body { margin:0; font-family:Arial, Helvetica, sans-serif; background:var(--bg); color:var(--text); }
header { position:sticky; top:0; z-index:10; background:rgba(255,255,255,.95); border-bottom:2px solid var(--accent); padding:14px 18px; }
h1 { margin:0 0 8px; font-size:20px; display:flex; align-items:center; gap:8px; }
.logo { width:28px; height:28px; }
.toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
button { border:1px solid var(--accent); background:#fff; color:var(--text); padding:7px 10px; border-radius:8px; cursor:pointer; font-size:13px; }
button:hover { background:var(--accent); color:var(--accent-ink); }
.legend { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; font-size:12px; color:var(--muted); }
.badge { display:inline-flex; align-items:center; gap:4px; }
.swatch { width:14px; height:14px; border-radius:4px; border:1px solid rgba(0,0,0,.15); }
main { padding:18px; }
.grid { display:grid; grid-template-columns:repeat(3, minmax(300px,1fr)); gap:16px; }
.month { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px; box-shadow:var(--shadow); }
.month h2 { margin:0 0 10px; font-size:16px; }
.calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.dow { text-align:center; font-size:11px; font-weight:bold; color:var(--muted); padding:3px 0; }
.day { min-height:54px; border:1px solid var(--border); border-radius:8px; padding:5px; cursor:pointer; position:relative; background:#fff; user-select:none; }
.day:hover { outline:2px solid #9ca3af; }
.empty { min-height:54px; }
.num { font-size:11px; color:var(--muted); }
.turno { font-size:21px; font-weight:bold; line-height:20px; margin-top:3px; }
.orig { position:absolute; right:5px; top:5px; font-size:10px; color:var(--muted); background:rgba(255,255,255,.72); border-radius:4px; padding:1px 3px; }
.day.today { box-shadow:inset 0 0 0 2px var(--today); }
.t-M { background:#dbeafe; }
.t-T { background:#fed7aa; }
.t-N { background:#ddd6fe; }
.t-L { background:#dcfce7; }
.t-x { background:#dcfce7; }
.t-f { background:#fecaca; }
.t-otro { background:#fff; }
.hint { margin-top:10px; color:var(--muted); font-size:12px; }
@media (max-width:1100px) { .grid { grid-template-columns:repeat(2, minmax(300px,1fr)); } }
@media (max-width:720px) { main { padding:10px; } .grid { grid-template-columns:1fr; } .legend { margin-left:0; } }
@media print { header { position:static; } button,.hint { display:none; } main { padding:0; } .grid { gap:8px; } .month { break-inside:avoid; box-shadow:none; } }
.install-banner { position:fixed; right:18px; bottom:18px; z-index:20; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; width:min(520px, calc(100vw - 36px)); border:1px solid var(--border); border-radius:8px; background:var(--panel); box-shadow:var(--shadow); padding:14px; }
.install-banner strong, .install-banner span { display:block; }
.install-banner strong { font-size:16px; }
.install-banner span { margin-top:3px; color:var(--muted); font-size:13px; line-height:1.35; }
.install-banner-actions { display:flex; gap:8px; }
.install-banner button { padding:9px 12px; white-space:nowrap; font-size:13px; }
.install-banner .install-accept { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:bold; }
.install-banner[hidden] { display:none; }
@media (max-width:720px) { .install-banner { right:10px; bottom:10px; grid-template-columns:1fr; width:calc(100vw - 20px); gap:11px; } .install-banner-actions { display:grid; grid-template-columns:1fr 1fr; } }
@media print { .install-banner { display:none; } }

.modal-overlay { position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); padding:18px; }
.modal-overlay[hidden] { display:none; }
.modal { background:var(--panel); border-radius:12px; box-shadow:var(--shadow); width:min(480px, 100%); max-height:80vh; display:flex; flex-direction:column; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); }
.modal-header h2 { margin:0; font-size:16px; }
.modal-close { border:none; background:none; font-size:20px; line-height:1; padding:2px 6px; }
.modal-close:hover { background:var(--accent); color:var(--accent-ink); border-radius:6px; }
.modal-body { padding:10px 16px; overflow-y:auto; }
.modal-footer { padding:10px 16px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; }
.change-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:14px; }
.change-row:last-child { border-bottom:none; }
.change-fecha { flex:1; color:var(--muted); }
.change-turno { font-weight:bold; border-radius:6px; padding:2px 8px; min-width:1.6em; text-align:center; }
.change-arrow { color:var(--muted); }
@media print { .modal-overlay { display:none; } }