:root{--navy:#1E293B;--blue:#5DA9E9;--blue-d:#4B93D6;--half:#BFDDF7;--tint:#EAF2FB;--tint2:#DCEBFA;--g1:#4B5563;--g2:#5B6675;--line:#D9E0E8;--inp:#8CA0B1;--off:#DDE3EA;--bg:#F5F8FB;--ok:#1E7B4B;--err:#B42318}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--navy);font-size:14px;line-height:1.45}
h1,h2{font-family:'Syne','Montserrat',sans-serif;font-weight:800;margin:0;color:var(--navy)}
h2{font-size:18px}
a{color:var(--blue-d)}
.hint{color:var(--g2);font-size:12px;margin:8px 0 0}
.lead{color:var(--g1);margin:6px 0 16px}
.inline{display:inline;margin:0}
.mt{margin-top:24px}
.spacer{flex:1}

/* Topbar */
.topbar{display:flex;align-items:center;gap:14px;padding:12px 24px;background:#fff;border-bottom:1px solid var(--line);flex-wrap:wrap}
.topbar .logo{height:34px;display:block}
.brand h1{font-size:18px;line-height:1.1}
.brand .sub{font-size:12px;color:var(--g2)}
.chip{background:var(--tint);border:1px solid var(--tint2);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:8px;padding:9px 16px;font:600 13px 'Montserrat',sans-serif;text-decoration:none;cursor:pointer;border:1.5px solid transparent;min-height:40px}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover{background:#0f172a}
.btn-outline{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--tint)}
.btn.block{display:flex;width:100%}
.btn.big{min-height:46px;font-size:14px}
.btn.grow{flex:1}
button.link{background:none;border:0;padding:4px 0;color:var(--blue-d);font:600 12px 'Montserrat',sans-serif;cursor:pointer;text-decoration:underline}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* Layout principal */
.layout{display:grid;grid-template-columns:1fr 380px;gap:20px;padding:20px 24px;max-width:1440px;margin:0 auto;align-items:start}
.card{background:#fff;border:1px solid var(--line);border-radius:14px}
.pad{padding:22px}
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
.tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.tl{font-size:11px;color:var(--g1);font-weight:600}
.tv{font:800 26px 'Syne',sans-serif;margin-top:4px}
.mapcard{padding:20px}
.maphead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.legend{list-style:none;margin:0;padding:0;display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--g1)}
.legend li{display:flex;align-items:center;gap:6px}
.sw{width:16px;height:16px;border-radius:5px;background:#fff;border:1.5px solid var(--navy);display:inline-block}
.sw.half{background:var(--half);border-color:var(--blue-d)}
.sw.full{background:var(--navy)}
.sw.office{background:var(--off);border:1.5px dashed var(--g2)}
.sw.sel{background:#fff;border-color:var(--blue);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--blue)}

/* Mapa */
.maprows{display:flex;flex-direction:column;gap:12px}
.maprow{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:92px;border-radius:12px;border:1.5px solid var(--navy);background:#fff;color:var(--navy);text-decoration:none;transition:transform .08s}
.cell:hover{transform:translateY(-2px)}
.cid{font:800 16px 'Syne',sans-serif}
.dots{display:flex;gap:6px}
.d{width:11px;height:11px;border-radius:50%;border:1.5px solid currentColor;display:inline-block;background:transparent}
.d.on{background:currentColor}
.otag{display:none;font-size:11px;font-weight:700}
.s-half{background:var(--half);border-color:var(--blue-d)}
.s-full{background:var(--navy);color:#fff;border-color:var(--navy)}
.s-office{background:var(--off);border:1.5px dashed var(--g2);color:var(--g1)}
.s-office .dots{display:none}
.s-office .otag{display:block}
.cell.is-sel{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--blue)}
.pasillo{margin-top:18px;background:var(--tint);border:1px solid var(--tint2);border-radius:10px;text-align:center;padding:12px;font:700 12px 'Syne',sans-serif;letter-spacing:.2em;color:var(--g1)}
.pasillo.small{margin-top:10px;padding:6px;font-size:9px}
.note{font-size:12px;color:var(--g2);margin:14px 0 0}

/* Panel de detalle */
.panel{padding:20px}
.panelhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.state{font-size:11px;font-weight:700;border-radius:999px;padding:4px 10px;border:1px solid var(--navy)}
.state.s-free{background:#fff}
.state.s-half{background:var(--half);border-color:var(--blue-d)}
.state.s-full{background:var(--navy);color:#fff}
.state.s-office{background:var(--off);border:1px dashed var(--g2);color:var(--g1)}
.slot{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:var(--bg)}
.slot.office{border-style:dashed}
.slot-tag{font-size:11px;font-weight:700;color:var(--g2);text-transform:uppercase;letter-spacing:.06em}
.slot-name{font:700 15px 'Montserrat',sans-serif;margin-top:2px}
.slot-meta{font-size:12px;color:var(--g1)}
.readonly{background:var(--tint);border-radius:10px;padding:10px 12px;font-size:12px;color:var(--g1);margin-top:12px}
.adminbox{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.adminlabel{font:700 11px 'Montserrat',sans-serif;letter-spacing:.12em;color:var(--g2);margin-bottom:8px}

/* Formularios */
label{display:block;font-size:12px;font-weight:600;color:var(--g1);margin:12px 0 4px}
label.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--navy);margin:0 0 12px}
input[type=text],input[type=email],input[type=password],input[type=date],select{width:100%;border:1.5px solid var(--inp);border-radius:8px;padding:10px 12px;font:500 14px 'Montserrat',sans-serif;color:var(--navy);background:#fff;min-height:42px}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--navy)}
fieldset{border:1px solid var(--line);border-radius:10px;padding:4px 14px 14px;margin:0 0 12px}
legend{font:800 13px 'Syne',sans-serif;padding:0 6px}
.actions{display:flex;gap:10px;margin-top:6px}
[hidden]{display:none!important}
.flash{border-radius:10px;padding:10px 14px;font-size:13px;margin:0 0 12px;font-weight:600;word-break:break-word}
.flash-ok{background:#E8F5EE;color:var(--ok);border:1px solid #BFE3CF}
.flash-err{background:#FDECEA;color:var(--err);border:1px solid #F5C2BD}

/* Login */
.loginwrap{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.loginbrand{background:var(--tint);padding:56px 64px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.biglogo{width:220px;height:auto}
.loginbrand h1{font-size:30px}
.loginbrand p{color:var(--g1);max-width:440px;margin:0}
.minimap{margin-top:12px;max-width:380px;display:flex;flex-direction:column;gap:6px}
.minimap .maprow{gap:6px}
.mini{height:34px;border-radius:6px;border:1.5px solid var(--navy);background:#fff;display:flex;align-items:center;justify-content:center;gap:4px}
.mini .d{width:7px;height:7px;border-width:1px}
.loginform{background:#fff;padding:56px 64px;display:flex;flex-direction:column;justify-content:center;max-width:560px;width:100%}
.loginform h1{font-size:28px}
.pw{position:relative}
.pw input{padding-right:84px}
.pw .link{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
.loginform .btn{margin-top:16px}
.or{display:flex;align-items:center;gap:12px;color:var(--g2);font-size:12px;margin:16px 0 0}
.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line)}
.box{background:var(--tint);border-radius:10px;padding:10px 12px}

/* Páginas angostas y administración */
.narrow{max-width:460px;margin:32px auto;padding:0 16px}
.admin{max-width:1200px;margin:0 auto;padding:20px 24px}
.backrow{margin-bottom:14px}
.adminlayout{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.table{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px}
.table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--g2);border-bottom:1px solid var(--line);padding:8px 8px}
.table td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.table .wrap{word-break:break-word}
.actionscell form{display:block}
.pill{font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px;display:inline-block}
.pill.on{background:#E8F5EE;color:var(--ok)}
.pill.off{background:var(--off);color:var(--g1)}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.roles>div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px}
.roles p{margin:4px 0 0;font-size:12px;color:var(--g1)}
.adminlayout aside h2{margin-bottom:6px}

/* Responsive */
@media (max-width:1100px){
    .layout,.adminlayout{grid-template-columns:1fr}
    .tiles{grid-template-columns:repeat(3,1fr)}
    .roles{grid-template-columns:1fr}
}
@media (max-width:860px){
    .loginwrap{grid-template-columns:1fr}
    .loginbrand,.loginform{padding:32px 24px;max-width:none}
    .table{display:block;overflow-x:auto}
}
@media (max-width:560px){
    .topbar{padding:10px 14px}
    .layout{padding:14px}
    .tiles{grid-template-columns:repeat(2,1fr)}
    .maprow{gap:6px}
    .maprows{gap:6px}
    .cell{min-height:72px}
    .cid{font-size:13px}
}