:root { --ink:#18201d; --dark:#111815; --panel:#fff; --canvas:#f2f4f1; --line:#dce1dc; --muted:#68716d; --green:#1d5949; --green-2:#dcebe5; --amber:#a66422; --red:#a13f39; --shadow:0 18px 50px rgba(20,32,27,.1); }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:Inter, Arial, sans-serif; line-height:1.4; }
a { color:inherit; text-decoration:none; }
button, input, select, textarea { color:inherit; font:inherit; }
button { cursor:pointer; }
.admin-boot { min-height:100vh; display:grid; place-content:center; text-align:center; }
.admin-boot span, .login-brand strong { font-family:Georgia, serif; font-size:2rem; font-weight:400; }
.admin-boot p { color:var(--muted); }
.login-screen { min-height:100vh; display:grid; grid-template-columns:minmax(380px,.72fr) 1.28fr; background:var(--dark); }
.login-panel { display:grid; align-content:center; padding:clamp(32px,6vw,92px); background:#f7f8f5; }
.login-brand { display:grid; margin-bottom:72px; }
.login-brand span { margin-top:3px; color:var(--muted); font-size:.67rem; text-transform:uppercase; }
.login-panel h1 { max-width:430px; margin:0 0 12px; font-family:Georgia, serif; font-size:clamp(2.2rem,4vw,4.2rem); font-weight:400; line-height:.95; }
.login-panel > p { max-width:400px; margin:0 0 34px; color:var(--muted); }
.admin-login { display:grid; gap:14px; max-width:420px; }
.admin-login label, .ops-form label { display:grid; gap:6px; }
.admin-login label span, .ops-form label span { color:var(--muted); font-size:.7rem; font-weight:700; text-transform:uppercase; }
.admin-login input, .ops-form input, .ops-form select { width:100%; min-height:48px; padding:9px 12px; border:1px solid var(--line); border-radius:4px; background:var(--panel); outline:0; }
.admin-login input:focus, .ops-form input:focus, .ops-form select:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(29,89,73,.1); }
.admin-login button, .solid-button { min-height:48px; padding:0 18px; border:0; border-radius:4px; background:var(--green); color:#fff; font-weight:700; }
.secondary-button { min-height:44px; border:1px solid var(--line)!important; background:transparent!important; color:var(--ink)!important; }
.login-error { min-height:20px; margin:0; color:var(--red); font-size:.8rem; }
.login-visual { position:relative; min-height:100vh; overflow:hidden; background:url('/assets/images/panoramico-02.jpg') center/cover; }
.login-visual::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(17,24,21,.28),rgba(17,24,21,.72)); }
.login-visual div { position:absolute; right:8%; bottom:8%; z-index:1; max-width:460px; color:#fff; }
.login-visual span { color:rgba(255,255,255,.65); font-size:.72rem; text-transform:uppercase; }
.login-visual strong { display:block; margin-top:12px; font-family:Georgia, serif; font-size:2.5rem; font-weight:400; line-height:1.05; }
.admin-layout { min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr); }
.admin-sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:28px 18px; background:var(--dark); color:#fff; }
.admin-logo { display:grid; padding:0 12px 30px; border-bottom:1px solid rgba(255,255,255,.1); }
.admin-logo strong { font-family:Georgia, serif; font-size:1.55rem; font-weight:400; }
.admin-logo span { color:rgba(255,255,255,.45); font-size:.63rem; text-transform:uppercase; }
.admin-menu { display:grid; gap:5px; margin-top:28px; }
.admin-menu button { display:flex; align-items:center; justify-content:space-between; min-height:46px; padding:0 13px; border:0; background:transparent; color:rgba(255,255,255,.62); text-align:left; }
.admin-menu button::after { content:'›'; opacity:0; }
.admin-menu button.active { background:rgba(255,255,255,.1); color:#fff; }
.admin-menu button.active::after { opacity:1; }
.admin-user { margin-top:auto; padding:18px 12px 0; border-top:1px solid rgba(255,255,255,.1); }
.admin-user strong, .admin-user span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-user span { margin-top:3px; color:rgba(255,255,255,.45); font-size:.67rem; }
.admin-user button { margin-top:14px; padding:0; border:0; background:transparent; color:#d6a67f; font-size:.75rem; }
.admin-main { min-width:0; padding:28px clamp(20px,4vw,58px) 60px; }
.admin-top { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:30px; }
.admin-top span { color:var(--muted); font-size:.7rem; font-weight:700; text-transform:uppercase; }
.admin-top h1 { margin:5px 0 0; font-family:Georgia, serif; font-size:clamp(2rem,4vw,3.6rem); font-weight:400; line-height:1; }
.today-chip { padding:10px 14px; border:1px solid var(--line); background:var(--panel); color:var(--muted); font-size:.75rem; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:24px; }
.metric { min-height:126px; padding:20px; border:1px solid var(--line); border-radius:4px; background:var(--panel); }
.metric span { color:var(--muted); font-size:.68rem; text-transform:uppercase; }
.metric strong { display:block; margin-top:22px; font-family:Georgia, serif; font-size:2rem; font-weight:400; }
.ops-panel { overflow:hidden; border:1px solid var(--line); border-radius:4px; background:var(--panel); box-shadow:0 8px 30px rgba(20,32,27,.04); }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px 20px; border-bottom:1px solid var(--line); }
.panel-head h2, .section-title { margin:0; font-family:Georgia, serif; font-size:1.45rem; font-weight:400; }
.panel-head span { color:var(--muted); font-size:.72rem; }
.table-scroll, .calendar-scroll { overflow:auto; }
.ops-table { width:100%; border-collapse:collapse; font-size:.75rem; }
.ops-table th, .ops-table td { padding:13px 14px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
.ops-table th { color:var(--muted); font-size:.63rem; text-transform:uppercase; }
.ops-table select { min-height:34px; border:1px solid var(--line); background:#fff; }
.booking-code { font-weight:800; }
.subtext { display:block; margin-top:3px; color:var(--muted); font-size:.66rem; }
.status-dot { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--amber); }
.status-dot.confirmed,.status-dot.checked_in { background:var(--green); }
.status-dot.cancelled { background:var(--red); }
.calendar-tools { display:flex; align-items:center; gap:9px; }
.icon-button { width:38px; height:38px; border:1px solid var(--line); background:#fff; font-size:1.1rem; }
.calendar-grid { display:grid; grid-template-columns:130px repeat(14,minmax(44px,1fr)); min-width:850px; }
.cal-head,.cal-unit,.cal-cell { min-height:48px; padding:7px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.cal-head { display:grid; place-items:center; background:#f7f8f5; color:var(--muted); font-size:.65rem; text-transform:capitalize; }
.cal-unit { display:grid; align-content:center; background:#fff; }
.cal-unit span { color:var(--muted); font-size:.58rem; }
.cal-cell { overflow:hidden; background:#fafbf9; color:#fff; font-size:.6rem; white-space:nowrap; }
.cal-cell.booked { background:#39715f; }.cal-cell.pending { background:#ad742f; }.cal-cell.checked_in { background:#164d3f; }.cal-cell.blocked { background:#7d8480; }
.split-view { display:grid; grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr); gap:18px; }
.ops-form { display:grid; gap:12px; padding:20px; border:1px solid var(--line); background:var(--panel); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.record-list { border:1px solid var(--line); background:#fff; }
.record { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 18px; border-bottom:1px solid var(--line); }
.record strong,.record span { display:block; }.record span { margin-top:4px; color:var(--muted); font-size:.68rem; }
.text-button { padding:0; border:0; background:transparent; color:var(--red); font-size:.72rem; }
.unit-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.unit-card { display:grid; gap:13px; padding:18px; border:1px solid var(--line); background:#fff; }
.unit-card header { display:flex; justify-content:space-between; gap:10px; }
.unit-card header span { color:var(--muted); font-size:.65rem; }
.unit-card select { min-height:38px; border:1px solid var(--line); background:#fff; }
.unit-state { width:9px; height:9px; border-radius:50%; background:var(--green); }.unit-state.dirty { background:var(--amber); }.unit-state.inspection { background:#558099; }.unit-state.out_of_service { background:var(--red); }
.empty-state { padding:50px 20px; color:var(--muted); text-align:center; }
.security-stack { min-width:0; display:grid; gap:18px; }
.security-card,.security-section { min-width:0; border:1px solid var(--line); background:var(--panel); }
.security-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.72fr); gap:34px; padding:26px; }
.security-card h2 { margin:10px 0 8px; font-family:Georgia,serif; font-size:1.6rem; font-weight:400; }
.security-card p { max-width:620px; margin:0; color:var(--muted); }
.security-card .ops-form { padding:0; border:0; background:transparent; }
.state-badge { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border-radius:3px; background:#ecefed; color:var(--muted); font-size:.62rem; font-weight:800; text-transform:uppercase; }
.state-badge.enabled { background:var(--green-2); color:var(--green); }
.state-badge.denied { background:#f3dfdd; color:var(--red); }
.compact-form { align-content:start; }
.danger-button { min-height:44px; border:1px solid #d6aaa6; border-radius:4px; background:#fff; color:var(--red); font-weight:700; }
.setup-panel { display:grid; align-content:start; gap:14px; }
.secret-code { overflow-wrap:anywhere; padding:13px; border:1px solid var(--line); background:#f7f8f5; font-size:.86rem; letter-spacing:0; }
.solid-link { display:grid; place-items:center; min-height:42px; border:1px solid var(--green); color:var(--green); font-size:.75rem; font-weight:800; }
.recovery-panel { grid-template-columns:minmax(0,.8fr) minmax(320px,1.2fr); }
.recovery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.recovery-grid code { padding:10px; border:1px solid var(--line); background:#f7f8f5; text-align:center; }
.security-split { min-width:0; display:grid; grid-template-columns:320px minmax(0,1fr); gap:18px; padding:18px; }
.security-section .table-scroll,.security-section .record-list { min-width:0; width:100%; max-width:100%; }
.access-record { display:grid; grid-template-columns:minmax(180px,1fr) 145px 82px; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); }
.access-record strong,.access-record span { display:block; }
.access-record span { margin-top:3px; color:var(--muted); font-size:.68rem; }
.access-record select { min-height:38px; border:1px solid var(--line); background:#fff; }
.access-toggle { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:.7rem; }
.access-toggle span { margin:0; }
.admin-toast { position:fixed; right:22px; bottom:22px; z-index:50; max-width:380px; padding:14px 17px; background:var(--dark); color:#fff; box-shadow:var(--shadow); font-size:.8rem; }
@media (max-width:980px) { .admin-layout{grid-template-columns:82px minmax(0,1fr)} .admin-sidebar{padding:22px 10px}.admin-logo strong{font-size:1.2rem}.admin-logo span,.admin-menu button span,.admin-user strong,.admin-user span{display:none}.admin-menu button{justify-content:center;padding:0;font-size:0}.admin-menu button::before{content:attr(data-short);font-size:.7rem}.admin-menu button::after{display:none}.metric-grid{grid-template-columns:1fr 1fr}.unit-board{grid-template-columns:1fr 1fr}.login-screen{grid-template-columns:1fr}.login-visual{display:none}.security-card,.recovery-panel{grid-template-columns:1fr}.security-split{grid-template-columns:1fr} }
@media (max-width:620px) { .admin-layout{display:block}.admin-sidebar{position:sticky;z-index:10;width:100%;height:auto;display:grid;grid-template-columns:auto 1fr;padding:10px 12px}.admin-logo{padding:0;border:0}.admin-menu{display:flex;justify-content:flex-end;margin:0;overflow-x:auto}.admin-menu button{min-width:44px}.admin-user{display:none}.admin-main{padding:22px 14px 45px}.admin-top{align-items:start}.today-chip{display:none}.metric-grid{grid-template-columns:1fr 1fr}.metric{min-height:105px;padding:14px}.metric strong{margin-top:15px;font-size:1.55rem}.split-view,.unit-board{grid-template-columns:1fr}.field-row{grid-template-columns:1fr}.login-panel{padding:30px 22px}.login-brand{margin-bottom:54px}.ops-table th,.ops-table td{padding:11px 10px}.security-card{padding:18px}.security-split{padding:12px}.recovery-grid{grid-template-columns:1fr}.access-record{grid-template-columns:1fr}.access-record select{width:100%} }