:root{
  color-scheme: light;
  --navy:#2C3A8C;
  --navy-dark:#171F52;
  --navy-mid:#212C72;
  --orange:#F2A230;
  --orange-dark:#D6841A;
  --black:#14141A;
  --bg:#F3F4FA;
  --card:#FFFFFF;
  --border:#E4E6F1;
  --text:#1D1E2C;
  --muted:#6B6E85;
  --navy-bg:#EBEDF9;
  --orange-bg:#FDF0DC;
  --gray-bg:#EEF0F5;
  --radius:14px;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family: 'Segoe UI', Arial, 'Helvetica Neue', sans-serif;
  background:var(--bg); color:var(--text); display:flex; min-height:100vh;
}
h1,h2,h3,h4{ font-family:'Arial Black','Segoe UI Black','Helvetica Neue',Arial,sans-serif; letter-spacing:.2px; margin:0 0 4px; color:var(--navy-dark); }
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:#c7cbe0;border-radius:8px;}

/* ---------- SIDEBAR ---------- */
#sidebar{
  width:278px; flex-shrink:0; background:linear-gradient(180deg,var(--navy-dark) 0%, var(--navy) 100%);
  color:#fff; height:100vh; position:sticky; top:0; overflow-y:auto; overflow-x:hidden;
  transition: width .22s ease, margin-left .22s ease; z-index:20;
}
#sidebar.collapsed{ width:0; }
.sb-brand{ display:flex; align-items:center; gap:10px; padding:20px 18px 14px; border-bottom:1px solid rgba(255,255,255,.12); white-space:nowrap; }
.sb-brand img{ width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); background:#fff; border-radius:8px; padding:3px;}
.sb-brand .t1{ font-weight:800; font-size:15px; letter-spacing:.5px; line-height:1.1; }
.sb-brand .t2{ font-size:10px; letter-spacing:2px; color:var(--orange); font-weight:700; }
.sb-nav{ padding:10px 10px 30px; white-space:nowrap; }
.nav-toggle{
  width:100%; text-align:left; background:transparent; border:none; color:#fff; cursor:pointer;
  padding:11px 12px; border-radius:10px; font-size:13.5px; font-weight:700; display:flex; align-items:center; justify-content:space-between;
  margin-top:4px;
}
.nav-toggle:hover, .nav-toggle.active{ background:rgba(255,255,255,.1); }
.nav-toggle .ic{ margin-right:8px; }
.nav-toggle .chev{ transition: transform .2s; opacity:.7; font-size:11px;}
.nav-toggle.open .chev{ transform: rotate(180deg); }
.nav-sub{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.nav-sub.open{ max-height:900px; }
.nav-item{
  display:block; width:100%; text-align:left; background:transparent; border:none; color:rgba(255,255,255,.82);
  padding:9px 14px 9px 34px; font-size:12.8px; cursor:pointer; border-radius:8px; border-left:2px solid transparent;
}
.nav-item:hover{ background:rgba(255,255,255,.08); color:#fff; }
.nav-item.active{ background:rgba(242,162,48,.18); color:#fff; border-left:2px solid var(--orange); font-weight:700; }
.nav-toggle-2{
  width:100%; text-align:left; background:transparent; border:none; color:rgba(255,255,255,.9); cursor:pointer;
  padding:9px 14px 9px 30px; font-size:12.8px; font-weight:700; display:flex; align-items:center; justify-content:space-between;
}
.nav-toggle-2 .chev{ transition: transform .2s; opacity:.7; font-size:10px;}
.nav-toggle-2.open .chev{ transform: rotate(180deg); }
.nav-sub-2{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.nav-sub-2.open{ max-height:400px; }
.nav-item-2{
  display:block; width:100%; text-align:left; background:transparent; border:none; color:rgba(255,255,255,.75);
  padding:8px 14px 8px 48px; font-size:12.3px; cursor:pointer; border-radius:8px;
}
.nav-item-2:hover{ background:rgba(255,255,255,.08); color:#fff; }
.nav-item-2.active{ background:rgba(242,162,48,.18); color:#fff; font-weight:700; }

/* ---------- MAIN ---------- */
#main{ flex:1; min-width:0; }
#topbar{
  position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:14px; padding:12px 22px;
}
#hamburger{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center; font-size:18px; color:var(--navy);
}
#hamburger:hover{ background:var(--bg); }
#topbar .title{ font-weight:800; font-size:16px; color:var(--navy-dark); }
#topbar .subtitle{ font-size:12px; color:var(--muted); }
#content{ padding:22px 26px 60px; max-width:1500px; }

/* ---------- COMPONENTS ---------- */
.kpi-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:16px; }
.kpi{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:10px 14px;
  border-top:3px solid var(--navy);
}
.kpi.orange{ border-top-color:var(--orange); }
.kpi.navy2{ border-top-color:var(--navy-dark); }
.kpi.gray{ border-top-color:var(--muted); }
.kpi .lbl{ font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.kpi .val{ font-size:19px; font-weight:800; color:var(--navy-dark); margin-top:2px; }
.kpi .sub{ font-size:11px; color:var(--muted); margin-top:2px;}
.kpi .sub.up{ color:var(--navy-dark); font-weight:700;}
.kpi .sub.down{ color:var(--orange-dark); font-weight:700;}
.kpi.clickable{ cursor:pointer; transition:box-shadow .15s, transform .15s; }
.kpi.clickable:hover{ box-shadow:0 3px 14px rgba(23,31,82,.12); transform:translateY(-1px); }
.kpi-row-secondary{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:16px; }
.kpi-row-secondary .kpi{ flex:1 1 170px; max-width:220px; text-align:center; }
.kpi .val2{ font-size:15px; font-weight:800; color:var(--navy-dark); margin-top:2px; }

.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:22px; }
.card .card-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px;}
.card .card-h h3{ font-size:15px; }
.card .card-h .desc{ font-size:12px; color:var(--muted); margin-top:2px; }
.section-title{ font-size:16px; margin:22px 0 12px; padding-bottom:6px; border-bottom:2px solid var(--border); }
.grid-2{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; }
.grid-2b{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:1000px){ .grid-2,.grid-2b{ grid-template-columns:1fr; } }

table.dt{ width:100%; border-collapse:collapse; font-size:12.6px; }
table.dt th{ background:var(--navy); color:#fff; text-align:left; padding:9px 10px; font-weight:700; position:sticky; top:0; white-space:nowrap;}
table.dt td{ padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap;}
table.dt tbody tr:hover{ background:#F7F8FF; }
table.dt tbody tr:nth-child(even){ background:#FBFBFE; }
.table-scroll{ overflow:auto; max-height:560px; border:1px solid var(--border); border-radius:10px;}
.bar-cell{ display:flex; align-items:center; gap:8px; }
.bar-track{ flex:1; height:7px; background:#EDEEF6; border-radius:6px; overflow:hidden; min-width:50px;}
.bar-fill{ height:100%; background:linear-gradient(90deg,var(--navy),var(--orange)); border-radius:6px;}

.select-brand, .search-input{
  border:1px solid var(--border); border-radius:9px; padding:8px 12px; font-size:12.8px; color:var(--text); background:#fff;
}
select.select-brand{ min-width:220px; }

.form-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:14px; }
.form-field{ display:flex; flex-direction:column; gap:5px; }
.form-field label{ font-size:11.5px; font-weight:700; color:var(--muted); }
.form-field input, .form-field select, .form-field textarea{
  border:1px solid var(--border); border-radius:9px; padding:8px 12px; font-size:12.8px; color:var(--text); background:#fff; font-family:inherit;
}
.form-field.checkbox{ flex-direction:row; align-items:center; gap:8px; }
.form-field.checkbox label{ font-size:12.8px; font-weight:400; color:var(--text); }
.form-msg{ font-size:12.6px; font-weight:700; padding:9px 12px; border-radius:9px; margin-top:12px; }
.form-msg.ok{ background:var(--navy-bg); color:var(--navy); }
.form-msg.err{ background:#FBEAEA; color:#B3261E; }
.row-actions{ display:flex; gap:6px; }
.row-actions button{ border:none; background:none; cursor:pointer; font-size:14px; padding:2px 4px; }

.btn{
  border:none; border-radius:9px; padding:10px 18px; font-size:12.8px; font-weight:700; cursor:pointer;
  transition:box-shadow .15s, transform .15s; display:inline-flex; align-items:center; gap:7px;
}
.btn:hover{ box-shadow:0 3px 12px rgba(23,31,82,.18); transform:translateY(-1px); }
.btn.primary{ background:var(--navy); color:#fff; }
.btn.primary:hover{ background:var(--navy-mid); }
.btn.ghost{ background:#fff; color:var(--navy); border:1.5px solid var(--navy); }
.btn.ghost:hover{ background:var(--navy-bg); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 4px; }

.kpi.pending{ border-top-color:var(--muted); border-style:dashed; background:#FAFAFC; }
.kpi.pending .val{ color:var(--muted); font-size:15px; }
.badge-soon{ display:inline-block; background:var(--gray-bg); color:var(--muted); font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; padding:2px 8px; border-radius:20px; margin-top:6px; }

/* Fuera de @media print a propósito: algunos navegadores (sobre todo al "Guardar como PDF") ignoran
   @page si está anidado dentro de @media print. Declarado así, a nivel raíz, aplica siempre que se
   imprime/exporta, y fuerza la hoja en horizontal sin que la persona tenga que elegirlo a mano. */
@page{ size: 279mm 216mm; margin: 7mm; }
@media print{
  #sidebar, #topbar, .no-print{ display:none !important; }
  #main{ margin:0; }
  #content{ display:none !important; }
  body{ background:#fff; }
  #printArea{ display:block !important; }
  .card{ box-shadow:none; border:1px solid #ccc; break-inside:avoid; }
  .pedido-page{ break-inside:avoid; }
  .pedido-page table{ break-inside:auto; }
  .pedido-page tr{ break-inside:avoid; }
}
#printArea{ display:none; }
.pill{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:700; }
.pill.ok{ background:var(--navy-bg); color:var(--navy); }
.pill.no{ background:var(--gray-bg); color:var(--muted); }
.pill.warn{ background:var(--orange-bg); color:var(--orange-dark); }
.pill.proj{ background:#EEF0FB; color:var(--navy); border:1px dashed var(--navy); }
.pill.alert{ background:var(--black); color:#fff; }

.accordion-item{ border:1px solid var(--border); border-radius:12px; margin-bottom:12px; overflow:hidden; }
.accordion-head{
  padding:13px 16px; background:#F7F8FD; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  font-weight:700; color:var(--navy-dark); font-size:13.5px;
}
.accordion-head:hover{ background:#EFF1FB; }
.accordion-head .chev{ transition: transform .2s; color:var(--muted); }
.accordion-item.open > .accordion-head .chev{ transform:rotate(180deg); }
.accordion-body{ display:none; }
/* combinador directo (>, no descendiente): así, al abrir un acordeón NO se despliegan en cascada
   los acordeones anidados dentro de su contenido (p.ej. oficina dentro de sede, historial dentro de oficina) */
.accordion-item.open > .accordion-body{ display:block; }
.accordion-body-inner{ padding:14px 16px; }

.month-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:3px; min-width:340px; }
.month-cell{ height:22px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:700; color:#fff; cursor:default;}
.month-cell.occ{ background:var(--navy); }
.month-cell.occ-unpaid{ background:var(--orange); color:#4a2e00; }
.month-cell.free{ background:#E7E8F2; color:#9598b3; }
.month-cell.vacant-flag{ outline:2px solid var(--orange); }
.month-legend{ display:flex; gap:16px; font-size:11.5px; color:var(--muted); margin:8px 0 4px; flex-wrap:wrap;}
.month-legend span{ display:inline-flex; align-items:center; gap:5px; }
.legend-dot{ width:10px;height:10px;border-radius:3px;display:inline-block; }

.toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.badge-count{ font-size:11.5px; color:var(--muted); }
.pager{ display:flex; gap:6px; align-items:center; margin-top:10px; font-size:12px;}
.pager button{ border:1px solid var(--border); background:#fff; border-radius:7px; padding:5px 10px; cursor:pointer;}
.pager button:disabled{ opacity:.4; cursor:default; }
.pager button.active{ background:var(--navy); color:#fff; border-color:var(--navy); }

.chip-year{ display:inline-flex; gap:6px; }
.footnote{ font-size:11px; color:var(--muted); margin-top:6px; }
.empty-state{ padding:40px; text-align:center; color:var(--muted); }
canvas{ max-width:100%; }
th.sortable{ cursor:pointer; user-select:none; }
th.sortable:after{ content:'↕'; opacity:.5; margin-left:5px; font-size:10px;}
th.sortable.asc:after{ content:'↑'; opacity:1;}
th.sortable.desc:after{ content:'↓'; opacity:1;}

/* transposed monthly table */
table.dt.transposed th:first-child, table.dt.transposed td:first-child{ position:sticky; left:0; background:#fff; z-index:2; font-weight:700; max-width:150px; white-space:normal; line-height:1.25; }
table.dt.transposed th:first-child{ background:var(--navy); z-index:3; }
table.dt.transposed td.col-proj{ background:#F7F8FD; }
table.dt.transposed th.col-proj{ background:var(--navy-mid); }
/* el último td de cada fila (columna Total) también queda fijo, para ver siempre la etiqueta (izq.) y el total (der.) sin desplazar */
table.dt.transposed td:last-child, table.dt.transposed th:last-child{ position:sticky; right:0; z-index:2; background:#fff; box-shadow:-2px 0 4px rgba(0,0,0,.06); }
table.dt.transposed th:last-child{ background:var(--navy); z-index:3; }
tr.row-utilidad td{ background:var(--navy-bg) !important; color:var(--navy-dark); font-weight:800; }
tr.row-utilidad td:first-child, tr.row-utilidad td:last-child{ background:var(--navy) !important; color:#fff; }
tr.row-margen td{ background:var(--orange-bg) !important; color:var(--orange-dark); font-weight:800; }
tr.row-margen td:first-child, tr.row-margen td:last-child{ background:var(--orange) !important; color:#fff; }
tr.row-total td{ background:#F1F2F8 !important; font-weight:800; border-top:2px solid var(--navy); }

.group-row td{ background:var(--navy-dark); color:#fff; font-weight:800; font-size:11.5px; letter-spacing:.4px; text-transform:uppercase; padding:7px 10px !important; }
.group-header{
  font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:#fff;
  background:var(--navy-dark); padding:9px 14px; border-radius:9px; margin:14px 0 8px;
}
.group-header:first-child{ margin-top:0; }
.contract-badge{ display:inline-block; padding:2px 8px; border-radius:20px; font-size:10.5px; font-weight:700; margin-left:6px; }
.contract-badge.expiring{ background:var(--black); color:#fff; }
.filter-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.free-panel{ margin-top:14px; border:1px dashed var(--navy); border-radius:12px; padding:14px 16px; background:var(--navy-bg); display:none; }
.free-panel.open{ display:block; }
.free-panel h4{ font-size:13px; margin-bottom:8px; }
.free-panel ul{ margin:0; padding-left:18px; font-size:12.5px; columns:2; }
.free-panel li{ margin-bottom:4px; }
.free-panel-group{ margin-bottom:12px; }
.free-panel-group:last-child{ margin-bottom:0; }
.free-panel-group-h{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--navy-dark); margin-bottom:4px; }
.office-mini{ display:flex; gap:14px; flex-wrap:wrap; font-size:11.8px; color:var(--muted); margin-top:2px; }
.office-mini b{ color:var(--text); }

.cell-money{ font-weight:700; }
.cell-sub{ display:block; font-size:9.5px; margin-top:1px; font-weight:600; }
.cell-sub.vacant{ color:var(--orange-dark); }
.cell-sub.pending{ color:var(--navy); }
tr.cat-row td{ background:var(--navy-mid); color:#fff; font-weight:700; padding:7px 10px !important; }
.kpi-mini-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:6px 0 18px; }
.cmp-bar-row{ display:flex; align-items:center; gap:10px; margin:8px 0; font-size:12.5px; }
.cmp-bar-track{ flex:1; height:18px; background:#EDEEF6; border-radius:9px; overflow:hidden; }
.cmp-bar-fill{ height:100%; border-radius:9px; transition:width .3s; }
.top-acc > .accordion-head{ font-size:14.5px; }
.group-acc{ border:none; margin-bottom:14px; }
.group-acc > .accordion-head{
  background:var(--navy-dark); color:#fff; border-radius:9px; padding:9px 14px;
  font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
}
.group-acc > .accordion-head:hover{ background:var(--navy); }
.group-acc > .accordion-head .chev{ color:#fff; }
.group-acc > .accordion-body > .accordion-body-inner{ padding:14px 0 0; }
.month-strip{ display:flex; gap:5px; flex-wrap:wrap; margin-top:5px; }
.month-chip{ background:var(--navy-bg); color:var(--navy-dark); border-radius:6px; padding:2px 7px; font-size:10px; font-weight:700; white-space:nowrap; }
.month-chip.vacant{ background:var(--gray-bg); color:var(--muted); }
.month-chip.pending{ background:var(--orange-bg); color:var(--orange-dark); }
.acc-header-block{ display:flex; flex-direction:column; gap:2px; width:100%; }
.acc-header-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }

table.dt.tree-table{ font-size:11px; }
table.dt.tree-table th{ text-align:center; padding:6px 5px; }
table.dt.tree-table td{ text-align:center; padding:5px; }
table.dt.tree-table td:first-child{ text-align:left; }
table.dt.tree-table th:first-child, table.dt.tree-table td:first-child{
  position:sticky; left:0; z-index:2; background:#fff; min-width:150px; max-width:190px; white-space:normal;
}
table.dt.tree-table th:first-child{ background:var(--navy); z-index:3; }
table.dt.tree-table thead th{ z-index:4; }
table.dt.tree-table thead tr.tree-subhead th{ top:28px; } /* fallback; ajustado dinámicamente por JS al alto real de la 1a fila */
table.dt.tree-table th.col-ing, table.dt.tree-table td.col-ing{ min-width:62px; }
table.dt.tree-table th.col-vac, table.dt.tree-table td.col-vac{ min-width:48px; }
table.dt.tree-table th.col-pend, table.dt.tree-table td.col-pend{ min-width:48px; }
table.dt.tree-table th.m-div, table.dt.tree-table td.m-div{ border-left:1px solid var(--navy); }
tr.tree-parent{ cursor:pointer; background:#F7F8FD; font-weight:700; }
tr.tree-parent:hover{ background:#EFF1FB; }
tr.tree-parent td:first-child{ color:var(--navy-dark); background:#F7F8FD; }
.tree-arrow{ display:inline-block; width:12px; color:var(--navy); transition:transform .15s; }
tr.tree-child td:first-child{ color:var(--text); font-weight:400; background:#fff; }
tr.row-total td:first-child{ background:#F1F2F8; }
.red-cell{ color:#C0392B; font-weight:800; }