:root{--bg:#f5f7fb;--panel:#fff;--text:#1f2937;--muted:#6b7280;--line:#e5e7eb;--primary:#2563eb;--danger:#b91c1c;--ok:#047857}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Arial,sans-serif}a{color:inherit}.app{display:flex;min-height:100vh}.sidebar{width:240px;background:#111827;color:#fff;padding:18px;position:sticky;top:0;height:100vh}.brand{font-weight:800;font-size:18px;margin-bottom:18px}.sidebar a{display:block;color:#d1d5db;text-decoration:none;padding:10px 12px;border-radius:7px;margin:3px 0}.sidebar a.active,.sidebar a:hover{background:#1f2937;color:#fff}.content{flex:1;padding:22px;overflow:auto}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.topbar h1{margin:0;font-size:24px}.panel,.card,.login-card,.widget-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;box-shadow:0 1px 2px rgba(0,0,0,.03);margin-bottom:18px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.card span{display:block;color:var(--muted);font-size:12px}.card strong{font-size:28px}.button,button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;border-radius:7px;padding:8px 11px;text-decoration:none;cursor:pointer;font:inherit;white-space:nowrap}.primary,button.primary{background:var(--primary);border-color:var(--primary);color:#fff}.danger{color:var(--danger)}.full{width:100%;margin-top:12px}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:7px;padding:9px 10px;font:inherit;background:#fff}textarea{min-height:90px}label{display:block;color:var(--muted);font-size:12px;margin:10px 0 5px}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.inline-form,.filters,.actions{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.inline-form>*{max-width:220px}table{width:100%;border-collapse:collapse;min-width:860px}th,td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{font-size:12px;color:var(--muted)}.muted{color:var(--muted)}.small{font-size:12px}.alert{padding:10px 12px;border-radius:7px;margin:10px 0}.alert.error{background:#fef2f2;color:#991b1b}.alert.ok{background:#ecfdf5;color:#065f46}.badge{padding:3px 7px;border-radius:999px;background:#eef2ff}.badge.confirmada{background:#dcfce7}.badge.cancelada,.badge.no_show{background:#fee2e2}.badge.completada{background:#e0f2fe}.login-screen,.widget{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px}.login-card{width:420px}.login-card.wide{width:680px}.widget-card{width:680px;max-width:100%}.hp{position:absolute;left:-9999px}.planning h2{margin-top:20px}.table-row{border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:12px}.table-row h3{margin:0 0 10px}.table-row h3 span{color:var(--muted);font-weight:400}.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.slot{border-radius:7px;padding:8px;border:1px solid var(--line)}.slot.free{background:#f0fdf4}.slot.busy{background:#fff7ed}pre{background:#f3f4f6;padding:12px;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere}@media(max-width:900px){.app{display:block}.sidebar{width:auto;height:auto;position:static}.cards,.grid2,.grid3{grid-template-columns:1fr}.content{padding:14px}table{min-width:720px}.panel{overflow:auto}}
.inline-action { display:inline-flex; margin:0; }
button.small, .button.small { padding:5px 7px; font-size:12px; }
.booking-row.status-pendiente { background:#fff9e8; }
.booking-row.status-confirmada { background:#edf9f1; }
.booking-row.status-cancelada { background:#f3f4f6; color:#6b7280; }
.booking-row.status-completada { background:#eef6ff; }
.booking-row.status-no_show { background:#fff0f0; }
.legend { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.legend .slot { min-width:auto; padding:7px 10px; }
.slot.status-pendiente { background:#fff3c4; border-color:#f2c94c; color:#5c4100; }
.slot.status-confirmada { background:#dff5e6; border-color:#35a65b; color:#115c2d; }
.slot.status-completada { background:#dbeafe; border-color:#4f8dd8; color:#174a83; }
.slot.status-no_show { background:#ffe0e0; border-color:#e05252; color:#8a1f1f; }
.slot.booking-continues { opacity:.72; }
.slot.booking-start { box-shadow:inset 4px 0 0 rgba(0,0,0,.18); }
.table-row h3 span { color:var(--muted); font-size:12px; font-weight:500; }

.labelled-form label { color:var(--text); font-size:13px; min-width:150px; }
.labelled-form .field-help { display:block; color:var(--muted); font-size:11px; line-height:1.25; margin-top:4px; }
.planning-matrix { min-width:980px; }
.planning-matrix th { position:sticky; top:0; background:#fff; z-index:1; }
.planning-matrix td, .planning-matrix th { min-width:120px; }
.planning-matrix .free-cell { background:#f8fafc; color:var(--muted); }
.planning-matrix .status-pendiente { background:#fff3c4; color:#5c4100; }
.planning-matrix .status-confirmada { background:#dff5e6; color:#115c2d; }
.planning-matrix .status-completada { background:#dbeafe; color:#174a83; }
.planning-matrix .status-no_show { background:#ffe0e0; color:#8a1f1f; }
.global-planning { overflow:auto; }

.overlap-cell { background:#fee2e2 !important; border-color:#dc2626 !important; color:#7f1d1d !important; font-weight:700; }

.global-hours { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity; }
.hour-card { flex:0 0 280px; border:1px solid var(--line); border-radius:9px; padding:12px; scroll-snap-align:start; }
.hour-card header { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:8px; }
.hour-card header strong { font-size:18px; }
.hour-card header span { color:var(--muted); font-size:12px; }
.hour-counts { display:flex; gap:8px; margin-bottom:10px; }
.hour-counts span { display:inline-flex; padding:4px 7px; border-radius:999px; background:rgba(255,255,255,.7); border:1px solid rgba(0,0,0,.06); font-size:12px; }
.hour-lists { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hour-lists div { min-width:0; }
.hour-lists b { display:block; font-size:12px; margin-bottom:4px; }
.hour-lists span { display:block; font-size:12px; line-height:1.25; padding:3px 0; overflow-wrap:anywhere; }
.hour-warning { color:#7f1d1d; font-weight:700; margin-bottom:8px; }
.hour-card.global-empty { background:#ecfdf5; border-color:#86efac; }
.hour-card.global-available { background:#fff7ed; border-color:#fdba74; }
.hour-card.global-full { background:#fee2e2; border-color:#f87171; }
.hour-card.global-overlap { background:#fee2e2; border-color:#dc2626; box-shadow:inset 4px 0 0 #dc2626; }
.table-timelines { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin-bottom:18px; }
.table-timeline { border:1px solid var(--line); border-radius:9px; padding:12px; background:#fff; }
.table-timeline h3 { margin:0 0 10px; display:flex; justify-content:space-between; gap:8px; align-items:center; }
.table-timeline h3 span { color:var(--muted); font-size:12px; font-weight:500; }
.slot-list { display:flex; flex-direction:column; gap:6px; }
.slot-line { display:grid; grid-template-columns:58px 1fr; gap:8px; align-items:center; border:1px solid var(--line); border-radius:7px; padding:7px 8px; min-height:36px; }
.slot-line strong { font-size:13px; }
.slot-line span { overflow-wrap:anywhere; }
.slot-line.free { background:#f0fdf4; color:#166534; }
.slot-line.status-pendiente { background:#fff3c4; border-color:#f2c94c; color:#5c4100; }
.slot-line.status-confirmada { background:#dff5e6; border-color:#35a65b; color:#115c2d; }
.slot-line.status-completada { background:#dbeafe; border-color:#4f8dd8; color:#174a83; }
.slot-line.status-no_show { background:#ffe0e0; border-color:#e05252; color:#8a1f1f; }
.slot-line.overlap-cell { background:#fee2e2 !important; border-color:#dc2626 !important; color:#7f1d1d !important; font-weight:700; }
@media(max-width:700px){.hour-card{flex-basis:240px}.hour-lists{grid-template-columns:1fr}.table-timelines{grid-template-columns:1fr}}

/* Planning refinado: vista global sin scroll horizontal y reservas destacadas */
.global-planning { overflow:visible; }
.global-hours-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; align-items:stretch; }
.global-hours-grid .hour-card { flex:auto; min-width:0; padding:0; overflow:hidden; }
.hour-card-link { display:block; padding:12px 12px 8px; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.06); }
.hour-card-link:hover { background:rgba(255,255,255,.45); }
.compact-hour-lists { padding:10px 12px 12px; grid-template-columns:1.15fr .85fr; }
.booking-pill { border:1px solid rgba(0,0,0,.08); border-radius:7px; padding:6px 7px !important; margin:4px 0; background:#fff; font-weight:600; }
.booking-pill em { display:block; font-style:normal; font-weight:500; color:var(--muted); margin-bottom:2px; }
.booking-pill.status-pendiente { background:#fff3c4; border-color:#f2c94c; color:#5c4100; }
.booking-pill.status-confirmada { background:#dff5e6; border-color:#35a65b; color:#115c2d; }
.booking-pill.status-completada { background:#dbeafe; border-color:#4f8dd8; color:#174a83; }
.booking-pill.status-no_show { background:#ffe0e0; border-color:#e05252; color:#8a1f1f; }
.booking-pill.status-overlap { background:#fee2e2; border-color:#dc2626; color:#7f1d1d; }
.slot-line { text-decoration:none; color:inherit; transition:transform .08s ease, box-shadow .08s ease; }
.slot-line:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(15,23,42,.08); }
.slot-line span b { display:inline-flex; margin-right:5px; font-size:11px; text-transform:uppercase; letter-spacing:.02em; }
.slot-line.booking-start { box-shadow:inset 5px 0 0 rgba(0,0,0,.2); }
.slot-line.booking-continues { opacity:.82; }
@media(max-width:900px){.global-hours-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.compact-hour-lists{grid-template-columns:1fr}}
.slot-line.booking-end { outline:2px solid rgba(37,99,235,.22); outline-offset:-3px; }
.slot-line.booking-start.booking-end { box-shadow:inset 5px 0 0 rgba(0,0,0,.2), inset -5px 0 0 rgba(37,99,235,.45); }