/* ── Tema HazloLegal ───────────────────────────────────
   Capa visual común para todas las pantallas (app y demo).
   Se carga después de los estilos propios de cada página y solo
   cambia colores, tipografías y formas: no toca el funcionamiento. */
:root{
  --hl-navy:#14335a; --hl-navy-2:#24497a;
  --hl-green:#3f9b55; --hl-green-d:#2e7d43; --hl-mint:#eef6f0; --hl-mint-2:#d6ebdd;
  --hl-postit:#ffd86b; --hl-postit-2:#fff0c2; --hl-postit-ink:#7a5600;
  --hl-ink:#1b2638; --hl-muted:#5b6678; --hl-line:#e2ebe4;
  --hl-shadow:0 1px 2px rgba(20,51,90,.05),0 10px 26px -18px rgba(20,51,90,.35);
}
body{font-family:'Figtree',system-ui,-apple-system,sans-serif !important;background:var(--hl-mint) !important;color:var(--hl-ink)}

/* Cabecera */
header{background:var(--hl-navy) !important}
header h1{font-family:'Bricolage Grotesque','Figtree',sans-serif !important;font-weight:700 !important;letter-spacing:-.01em}
header img{border-radius:12px !important}
header nav a,.nav-tab{border-radius:999px !important}
.nav-tab.active{background:#fff !important;color:var(--hl-navy) !important}

/* Títulos y cifras */
.section-title,.chart-title,.rooms-title,.cobros-title,.modal-box h3,.detail-h,.ya-firmado h2,.preview-label,.section-label{font-family:'Bricolage Grotesque','Figtree',sans-serif !important;color:var(--hl-navy) !important;letter-spacing:-.01em}
.section-label{text-transform:none !important;letter-spacing:0 !important;font-size:15px !important;font-weight:700 !important}
.stat-card .num,.kpi .val{font-family:'Bricolage Grotesque','Figtree',sans-serif !important;font-weight:800 !important;color:var(--hl-navy)}
.stat-card.green .num,.kpi.green .val{color:var(--hl-green) !important}
.stat-card.amber .num,.kpi.amber .val{color:#c48a00 !important}

/* Tarjetas */
.stat-card,.kpi,.contrato-card,.chart-card,.rooms-card,.cobros-card,.card,.form-panel,.preview-panel,.gantt-wrap,.modal-box,.pdf-block{
  border-radius:18px !important;box-shadow:var(--hl-shadow) !important;border-color:var(--hl-line) !important}
.contrato-card.activo{border-left-color:var(--hl-green) !important}
.contrato-card.pendiente{border-left-color:var(--hl-postit) !important}
.contrato-card.selected{background:#f3f7fd !important}
.hab-badge{background:var(--hl-navy) !important;border-radius:999px !important;padding:4px 12px !important}

/* Botones principales */
.btn-nuevo,.btn-send,.btn-add-cobro,.btn-print,.btn-firmar,.btn-modal-save,.btn-detail-primary{
  background:var(--hl-green) !important;border-radius:999px !important;font-weight:700 !important}
.btn-nuevo:hover,.btn-send:hover,.btn-add-cobro:hover,.btn-print:hover,.btn-firmar:hover,.btn-modal-save:hover,.btn-detail-primary:hover{background:var(--hl-green-d) !important}
.btn-send:disabled,.btn-firmar:disabled,.btn-modal-save:disabled{background:#a9c9b2 !important}
.btn-descargar{background:var(--hl-navy) !important;border-radius:999px !important}
.btn-descargar:hover{background:var(--hl-navy-2) !important}

/* Botones secundarios */
.btn-plantilla,.btn-export,.btn-ver,.btn-nav,.btn-hoy,.btn-clear,.btn-modal-cancel,.btn-detail-sec,.btn-edit-all,
.filter-btn,.btn-zoom,.btn-bulk-cancel,.btn-bulk-delete,.btn-borrar,.btn-modal-extincion,.btn-del-cobro,.auth-salir{border-radius:999px !important}
.filter-btn.active,.btn-zoom.active{background:var(--hl-navy) !important;border-color:var(--hl-navy) !important;color:#fff !important}

/* Estados */
.firma-chip.ok,.badge-firmado,.detail-badge.activo{background:var(--hl-mint-2) !important;color:var(--hl-green-d) !important}
.firma-chip.pendiente,.detail-badge.pendiente{background:var(--hl-postit-2) !important;color:var(--hl-postit-ink) !important}
.data-item span.highlight{color:var(--hl-green) !important}
.step.active{background:var(--hl-navy) !important;color:#fff !important;border-color:var(--hl-navy) !important}
.step.done{background:var(--hl-mint-2) !important;color:var(--hl-green-d) !important;border-color:var(--hl-mint-2) !important}

/* Gráficos */
.bar-col .bar-fill:not(.pending),.room-bar-fill{background:var(--hl-green) !important}
.bar-col .bar-fill.pending{background:#fff !important;border-color:#c9d6cd !important}
.gantt-bar.activo{background:var(--hl-green) !important}
.gantt-bar.pendiente{background:var(--hl-postit) !important;color:var(--hl-navy) !important}

/* Formularios */
.field input,.field textarea,.modal-field input,.modal-field select,.modal-field textarea,.search-wrap input,.year-select{border-radius:12px !important}
.field input:focus,.field textarea:focus,.modal-field input:focus,.modal-field select:focus,.modal-field textarea:focus,.search-wrap input:focus{border-color:var(--hl-green) !important;box-shadow:0 0 0 3px var(--hl-mint-2) !important;outline:none}
.toggle input:checked+.slider{background:var(--hl-green) !important}
.sign-area{border-radius:16px !important}

/* Accesibilidad */
:focus-visible{outline:3px solid var(--hl-postit) !important;outline-offset:2px}

/* Navegación siempre en el mismo sitio: junto al logo, a la izquierda */
header{justify-content:flex-start !important}
header > nav{margin-left:1.75rem !important;margin-right:auto !important;display:flex;gap:.35rem}
header .header-actions{margin-left:auto}
header > .btn-print{margin-left:auto}
header nav a,.nav-tab{padding:7px 16px !important;font-size:13px !important;font-weight:600 !important;line-height:1.2 !important}
@media(max-width:600px){
  header > nav{margin-left:0 !important;margin-right:0 !important;width:100%}
  header > nav a{flex:1;text-align:center}
  header .header-actions{margin-left:0;width:100%}
}
/* Mismo hueco para el título en todas las páginas, para que el menú no se mueva */
header h1{min-width:150px}
header h1 span,header h1 + span{display:none !important}
@media(max-width:600px){header h1{min-width:0}}
header > a:first-child + div{margin-left:4px}
/* Tabla de impagos: desplazable dentro de su tarjeta en móvil, sin mover la página */
.cobros-card{overflow-x:auto}