:root{
--rojo:#b5121b; --negro:#000; --blanco:#fff;
--line:#e5e7eb; --muted:#6b7280; --free:#10b981; --busy:#ef4444; --mine:#111827;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#111;background:#fff}


.salas-wrapper{max-width:1100px;margin:18px auto;padding:0 16px}
.salas-header{display:flex;flex-direction:column;gap:8px}
.salas-header h2{margin:0 0 4px;color:var(--rojo)}
.salas-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.room-tabs{display:flex;flex-wrap:wrap;gap:6px}
.tab{border:2px solid #111;background:#fff;color:#111;padding:6px 10px;border-radius:999px;cursor:pointer;font-weight:700}
.tab.is-active{background:#111;color:#fff}
.week-nav{margin-left:auto;display:flex;align-items:center;gap:8px}
.week-nav button{border:1px solid var(--line);background:#fff;padding:6px 10px;border-radius:8px;cursor:pointer}
.week-nav #weekLabel{min-width:210px;text-align:center;color:#111;font-weight:700}
.admin-tools .btn{background:var(--rojo);border:1px solid #7f0d13;color:#fff;padding:8px 10px;border-radius:10px;cursor:pointer;font-weight:800}


.legend{margin-top:6px;display:flex;gap:10px;align-items:center}
.pill{display:inline-block;font-size:12px;border-radius:999px;padding:4px 8px;border:1px solid var(--line)}
.pill.free{background:#ecfdf5;color:#065f46}
.pill.busy{background:#fef2f2;color:#991b1b}
.pill.mine{background:#eef2ff;color:#1e293b}


.grid-wrap{margin-top:10px;overflow:auto;border:1px solid var(--line);border-radius:12px}
.week-grid{width:100%;border-collapse:separate;border-spacing:0}
.week-grid thead th{position:sticky;top:0;background:#111;color:#fff;padding:8px;border-bottom:1px solid var(--line)}
.time-col{width:86px;background:#fafafa;color:#111;border-right:1px solid var(--line)}
.week-grid th,.week-grid td{border-right:1px solid var(--line)}
.week-grid tbody td{height:44px;cursor:default;position:relative}
.week-grid tbody tr:nth-child(2n) td{background:#fcfcfd}


/* estados */
.slot{width:100%;height:100%;display:block}
.slot.free{background:linear-gradient(180deg, #fff, #f9fafb)}
.slot.busy{background:rgba(239,68,68,.14)}
.slot.mine{outline:2px dashed #111}


/* Admin panel */
.admin-panel{margin-top:10px;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff}
.admin-panel h3{margin:0 0 6px}
.admin-row{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap}
.btn.outline{background:#fff;color:#111;border:2px solid #111}


/* Responsive */
@media (max-width:760px){
.time-col{width:64px}
.week-nav #weekLabel{min-width:160px}
}