*{box-sizing:border-box}
/* El atributo `hidden` gana a cualquier regla de display. Sin esto, un
   `.algo{display:block}` deja visible un elemento marcado como oculto. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scrollbar-width:thin; scrollbar-color:rgba(96,115,133,.4) transparent}
/* Barra de desplazamiento general (áreas claras), sutil y acorde a la paleta */
::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(96,115,133,.38); border-radius:10px;
  border:3px solid transparent; background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(96,115,133,.6); background-clip:padding-box}
body{
  margin:0; font-family:var(--font); background:var(--bg); color:var(--ink);
  line-height:1.55; letter-spacing:-.006em;   /* Inter pide un pelo de tracking negativo */
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent-strong)}
h1,h2,h3{font-family:var(--font-display)}

/* Layout */
.topbar{
  display:flex; align-items:center; gap:14px;
  background:var(--panel); color:var(--panel-ink); padding:14px clamp(16px,4vw,32px);
}
.topbar .brand{font-weight:800; letter-spacing:-.01em; font-size:17px; margin-right:auto; color:#fff; text-decoration:none}
.topbar .brand span{color:var(--accent-strong); filter:brightness(1.6)}
.topbar a.navlink{color:var(--panel-muted); text-decoration:none; font-size:14px; font-weight:600}
.topbar a.navlink:hover{color:#fff}

.container{max-width:1080px; margin:0 auto; padding:clamp(24px,5vw,56px) clamp(16px,4vw,32px)}

/* Card */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:clamp(20px,4vw,32px);
}
.card.narrow{max-width:420px; margin:0 auto}
/* Tarjeta de contexto dentro de un formulario (saldo de la unidad al cobrar). */
.card.soft{background:var(--accent-soft); border-color:transparent; box-shadow:none; padding:16px 18px}
.card.medium{max-width:720px}
.card.small{max-width:520px}
/* Tarjeta en fila: texto a la izquierda, acción a la derecha (modo de coeficientes). */
.card.row{display:flex; gap:var(--sp-4); align-items:center; flex-wrap:wrap}
.card.row .grow{flex:1; min-width:240px}

h1{font-family:var(--font-display); font-size:clamp(23px,3.6vw,32px); font-weight:700; letter-spacing:-.025em; margin:0 0 8px; text-wrap:balance; line-height:1.15}
.lede{color:var(--muted); margin:0 0 24px}
.eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-strong); margin:0 0 10px}

/* Form — todos los controles con el mismo estilo y tamaño cómodo */
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:18px}
.field label{font-size:13px; font-weight:600; color:var(--ink)}
.field input, .field select, .field textarea{
  font:inherit; width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--ink); min-height:46px; transition:border-color .12s ease, box-shadow .12s ease;
}
.field textarea{min-height:auto; line-height:1.5; resize:vertical}
.field select{appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  padding-right:38px}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.field input:disabled{background:var(--bg); color:var(--muted); cursor:not-allowed}
/* Control suelto fuera de un .field (respuesta rápida de PQRS, notas). */
.input-std{font:inherit; width:100%; padding:11px 13px; border:1px solid var(--line);
  border-radius:10px; background:var(--surface); color:var(--ink)}
textarea.input-std{resize:vertical; line-height:1.5}
.input-std:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
/* Campo de solo lectura fuera de un .field (correo que no se puede cambiar). */
.input-static{font:inherit; width:100%; padding:11px 13px; border:1px solid var(--line);
  border-radius:10px; background:var(--bg); color:var(--muted)}
/* Campo + botón en la misma línea (coeficiente + «Sugerir por área»). */
.row-inline{display:flex; gap:var(--sp-2); align-items:center}
.row-inline > input, .row-inline > select{flex:1}
.row-inline .btn{white-space:nowrap}
.check{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink); margin-bottom:20px; cursor:pointer}
.check input{width:auto; min-height:auto; margin:0}

/* Botón primario */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  width:auto; text-align:center; border:0; cursor:pointer; font:inherit;
  background:var(--accent-strong); color:var(--accent-ink); font-weight:600; font-size:14.5px;
  padding:11px 20px; border-radius:10px; box-shadow:0 1px 2px rgba(12,20,32,.10);
  transition:filter .12s ease, transform .12s ease, box-shadow .12s ease; text-decoration:none;
}
/* Ancho completo: solo donde se declara (login, acciones a pantalla completa en móvil). */
.btn-block{width:100%}
.btn:hover{filter:brightness(1.06); box-shadow:0 3px 10px rgba(13,148,136,.28)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.btn.ghost{background:var(--accent-soft); color:var(--accent-strong); box-shadow:none}

/* Chips de estado */
.chip{font-size:var(--text-xs); font-weight:700; padding:4px 11px; border-radius:999px; display:inline-flex;
  align-items:center; vertical-align:middle; gap:6px;
  color:var(--muted); background:color-mix(in srgb, var(--muted) 12%, transparent)}
.chip::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.chip.good{color:var(--good); background:var(--good-bg)}
.chip.warn{color:var(--warn); background:var(--warn-bg)}
.chip.bad{color:var(--bad); background:var(--bad-bg)}

/* Toasts (mensajes emergentes que se auto-desvanecen) */
.toasts{position:fixed; top:16px; right:16px; z-index:1000; display:flex; flex-direction:column; gap:10px;
  width:min(360px, calc(100vw - 32px)); pointer-events:none}
.toast{pointer-events:auto; display:flex; align-items:flex-start; gap:10px; padding:13px 14px;
  border-radius:12px; font-size:14px; line-height:1.4; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-left:4px solid var(--muted);
  box-shadow:0 6px 24px rgba(16,24,40,.16); animation:toast-in .26s cubic-bezier(.2,.8,.2,1)}
.toast.out{animation:toast-out .26s ease forwards}
.toast .toast-msg{flex:1; min-width:0}
.toast .toast-x{flex:0 0 auto; background:transparent; border:0; color:var(--muted); font-size:20px;
  line-height:1; cursor:pointer; padding:0 2px; margin:-2px -2px 0 0}
.toast .toast-x:hover{color:var(--ink)}
.toast.success{border-left-color:var(--good)}
.toast.info{border-left-color:var(--accent)}
.toast.warning{border-left-color:var(--warn)}
.toast.danger{border-left-color:var(--bad)}
@keyframes toast-in{from{opacity:0; transform:translateX(24px)}to{opacity:1; transform:none}}
@keyframes toast-out{to{opacity:0; transform:translateX(24px)}}
@media (prefers-reduced-motion:reduce){.toast{animation:none} .toast.out{animation:none; opacity:0}}

.form-error{color:var(--bad); font-size:var(--text-sm)}

/* ===================== App shell (área autenticada) ===================== */
.layout{display:flex; min-height:100vh}

.sidebar{
  flex:0 0 250px; width:250px; background:var(--sidebar-bg); color:var(--sidebar-ink);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  transition:flex-basis .18s ease, width .18s ease;
}
.side-top{display:flex; align-items:center; border-bottom:1px solid var(--sidebar-line)}
.sidebar .side-brand{
  display:flex; align-items:center; gap:9px; padding:18px 12px 18px 20px; font-family:var(--font-display); font-weight:700;
  letter-spacing:-.01em; font-size:16px; color:#fff; text-decoration:none; flex:1; min-width:0;
}
.sidebar .side-brand .lbl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sidebar .side-brand .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:0 0 auto}
.side-collapse{flex:0 0 auto; margin-right:10px; width:28px; height:28px; border-radius:8px;
  background:var(--sidebar-hover); border:0; color:var(--sidebar-ink); font-size:18px; line-height:1;
  cursor:pointer; display:grid; place-items:center; transition:background .12s ease}
.side-collapse:hover{background:var(--sidebar-active)}

.nav{flex:1; overflow-y:auto; padding:12px 12px 20px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent}       /* Firefox */
.nav::-webkit-scrollbar{width:9px}
.nav::-webkit-scrollbar-track{background:transparent}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16); border-radius:9px;
  border:2px solid transparent; background-clip:padding-box}
.nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.30); background-clip:padding-box}
.nav-section{margin-top:6px}
.nav-group{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--sidebar-muted); margin:10px 0 4px; padding:6px 12px; border-radius:8px;
  background:transparent; border:0; cursor:pointer; text-align:left; transition:background .12s ease}
.nav-group:hover{background:var(--sidebar-hover); color:var(--sidebar-ink)}
.nav-group .chev{font-size:14px; transition:transform .15s ease; opacity:.7}
.nav-section.open .nav-group .chev{transform:rotate(90deg)}
.nav-section:not(.open) .nav-sub{display:none}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px;
  color:var(--sidebar-ink); text-decoration:none; font-size:14px; font-weight:500;
  margin-bottom:2px; transition:background .12s ease;
}
.nav-item .ic{width:20px; height:20px; flex:0 0 auto; display:inline-flex; align-items:center;
  justify-content:center; opacity:.9}
.nav-item:hover{background:var(--sidebar-hover)}
.nav-item.active{background:var(--sidebar-active); font-weight:700; box-shadow:inset 3px 0 0 var(--accent)}
.nav-item.disabled{color:var(--sidebar-muted); cursor:default}
.nav-item.disabled:hover{background:transparent}
.nav-item em{margin-left:auto; font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sidebar-muted); border:1px solid var(--sidebar-line); border-radius:999px; padding:2px 6px}

.side-user{
  display:flex; align-items:center; gap:10px; padding:14px 16px; border-top:1px solid var(--sidebar-line);
}
.side-user .avatar{width:34px; height:34px; border-radius:50%; background:var(--accent-strong); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:14px; flex:0 0 auto}
.side-user b{display:block; font-size:13px; line-height:1.2; color:#fff}
.side-user span{display:block; font-size:var(--text-xs); color:var(--sidebar-muted)}

.main-col{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar-app{
  display:flex; align-items:center; gap:14px; background:var(--surface);
  border-bottom:1px solid var(--line); padding:12px clamp(16px,3vw,28px); position:sticky; top:0; z-index:20;
}
.topbar-app .page-title{font-family:var(--font-display); font-size:16px; font-weight:600; margin:0; letter-spacing:-.01em}
.topbar-app .spacer{margin-left:auto}
.topbar-app .topbar-right{display:flex; align-items:center; gap:14px; margin-left:auto}
.topbar-app .logout{color:var(--muted); text-decoration:none; font-size:14px; font-weight:600}
.topbar-app .logout:hover{color:var(--ink)}

.hamburger{display:none; background:transparent; border:1px solid var(--line); color:var(--ink);
  width:38px; height:38px; border-radius:10px; font-size:18px; cursor:pointer; align-items:center; justify-content:center}
.hamburger:focus-visible{outline:3px solid var(--accent-soft)}

.content{flex:1; padding:clamp(20px,4vw,36px) clamp(16px,3vw,28px)}
.content > h1{margin-top:0}

.scrim{display:none; position:fixed; inset:0; background:rgba(8,14,22,.5); z-index:40}

/* ===== Tarjetas de indicadores (stat tiles) ===== */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:8px; align-items:start}
.kpi{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent-soft) 55%, var(--surface)) 0%, var(--surface) 54%);
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
  padding:22px 22px 20px; display:flex; flex-direction:column; gap:14px;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* Barra de acento superior — firma visual del panel */
.kpi::before{content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent))}
/* Encabezado: título + icono opcional */
.kpi .k-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
/* Etiqueta de dato. Nace en la tarjeta de indicador pero se usa también suelta
   como rótulo de un bloque de datos (previsualización, detalle, tesorería). */
.k-lab{font-size:var(--text-xs); color:var(--muted); font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin:0}
.kpi .k-ic{width:38px; height:38px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-strong); font-size:18px}
/* Valor: nítido y en tamaño legible, con la tipografía display */
.kpi .k-val{font-family:var(--font-display); font-size:27px; font-weight:700; letter-spacing:-.025em; color:var(--ink); margin:0;
  font-variant-numeric:tabular-nums; line-height:1.1; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
/* Valor que no es una cifra (una fecha, un texto corto): un punto por debajo. */
.kpi .k-val.sm{font-size:var(--text-xl)}
.kpi .k-val.soon{font-size:14px; font-weight:600; color:var(--muted)}
.kpi .k-sub{font-size:var(--text-sm); color:var(--muted); margin:0}
/* Acento de color por semántica (barra + icono + cifra) */
.kpi.accent-good::before{background:linear-gradient(90deg, var(--good), color-mix(in srgb, var(--good) 30%, transparent))}
.kpi.accent-bad::before{background:linear-gradient(90deg, var(--bad), color-mix(in srgb, var(--bad) 30%, transparent))}
.kpi.accent-warn::before{background:linear-gradient(90deg, var(--warn), color-mix(in srgb, var(--warn) 30%, transparent))}
.kpi.accent-good .k-ic{background:var(--good-bg); color:var(--good)}
.kpi.accent-bad .k-ic{background:var(--bad-bg); color:var(--bad)}
.kpi.accent-warn .k-ic{background:var(--warn-bg); color:var(--warn)}
.kpi.accent-good .k-val{color:var(--good)} .kpi.accent-bad .k-val{color:var(--bad)}

/* Hero stat — la cifra insignia del panel, tratada como panel oscuro del landing */
.kpi.feature{
  background:linear-gradient(155deg, var(--panel) 0%, color-mix(in srgb, var(--panel) 78%, var(--accent)) 100%);
  border-color:transparent; color:#fff;
}
.kpi.feature::before{background:var(--accent); height:3px}
.kpi.feature .k-lab{color:rgba(255,255,255,.68)}
.kpi.feature .k-val{color:#fff; font-size:30px}
.kpi.feature .k-sub{color:rgba(255,255,255,.72)}
.kpi.feature .k-ic{background:rgba(255,255,255,.14); color:#fff}
.kpi.feature .k-val span{color:rgba(255,255,255,.6)!important}

/* Tarjetas que son enlaces (panel · convivencia): sin subrayado + elevación al pasar */
a.kpi{text-decoration:none; color:inherit}
a.kpi:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow-lg)}

/* ---- Barra lateral contraída (riel de solo iconos) ---- */
body.sidebar-collapsed .sidebar{flex-basis:64px; width:64px}
body.sidebar-collapsed .sidebar .lbl,
body.sidebar-collapsed .nav-group{display:none}
/* En modo riel se muestran todos los iconos (el acordeón no aplica) */
body.sidebar-collapsed .nav-sub{display:block}
body.sidebar-collapsed .nav-section{margin-top:0}
body.sidebar-collapsed .side-brand{justify-content:center; padding:18px 0}
body.sidebar-collapsed .side-collapse{transform:rotate(180deg)}   /* la flecha apunta a expandir */
body.sidebar-collapsed .nav-item{justify-content:center; padding:11px 0; gap:0}
body.sidebar-collapsed .nav-item .ic{width:22px; height:22px}
body.sidebar-collapsed .side-user{justify-content:center; padding:14px 0}
/* Tooltip del nombre al pasar el mouse sobre un ítem contraído */
body.sidebar-collapsed .nav-item{position:relative}
body.sidebar-collapsed .nav-item:hover::after{
  content:attr(title); position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%);
  background:var(--panel); color:var(--panel-ink); font-size:var(--text-sm); font-weight:600; padding:6px 10px; border-radius:8px;
  white-space:nowrap; z-index:60; box-shadow:0 6px 20px rgba(0,0,0,.3); pointer-events:none}

@media (max-width:900px){
  .sidebar{position:fixed; left:0; top:0; z-index:50; transform:translateX(-100%);
    transition:transform .22s ease; box-shadow:0 20px 60px rgba(0,0,0,.4)}
  body.nav-open .sidebar{transform:none}
  body.nav-open .scrim{display:block}
  .hamburger{display:inline-flex}
  /* En móvil el drawer siempre se muestra completo (no colapsado) */
  body.sidebar-collapsed .sidebar{flex-basis:250px; width:250px}
  body.sidebar-collapsed .sidebar .lbl{display:revert}
  body.sidebar-collapsed .nav-group{display:flex}
  body.sidebar-collapsed .nav-item{justify-content:flex-start; padding:9px 12px; gap:11px}
  body.sidebar-collapsed .nav-section:not(.open) .nav-sub{display:none}
  .side-collapse{display:none}   /* en móvil se usa el botón ☰, no el de contraer */
}

/* ===================== Contenido: tablas, banners, formularios ===================== */
.page-head{display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:20px}
.page-head .grow{flex:1; min-width:220px}
.page-head h1{margin:0 0 4px}
.page-head .lede{margin:0}
.crumb{font-size:13px; color:var(--muted); margin:0 0 6px}
.crumb a{color:var(--muted)}
.actions{display:flex; gap:10px; flex-wrap:wrap}

/* Encabezado de sección dentro de una página — marcador de acento a la izquierda */
.section-head{display:flex; align-items:center; gap:12px; margin:30px 0 14px}
.section-head::before{content:""; flex:0 0 auto; width:4px; height:22px; border-radius:4px;
  background:linear-gradient(var(--accent), var(--accent-strong))}
.section-head h2{font-family:var(--font-display); font-size:18px; font-weight:700; letter-spacing:-.015em; margin:0; line-height:1.2}
.section-head .sh-sub{font-size:13px; color:var(--muted); margin-left:2px}

/* Subtítulos de sección de nivel superior (admin y portal): marcador de acento.
   Solo los h2 que cuelgan directamente del contenido — no los títulos dentro
   de un formulario/tarjeta, que conservan su estilo propio. */
.content > h2, .portal-main > h2{
  position:relative; font-family:var(--font-display); font-size:18px!important; font-weight:700;
  letter-spacing:-.015em; line-height:1.2; margin:30px 0 14px!important; padding-left:16px;
}
.content > h2::before, .portal-main > h2::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:4px; height:22px; border-radius:4px; background:linear-gradient(var(--accent), var(--accent-strong));
}
.btn.xs{padding:5px 10px; font-size:var(--text-xs)}
.btn.sm{padding:9px 16px; font-size:var(--text-base)}
.btn.lg{padding:14px 26px; font-size:16px; font-weight:700; border-radius:12px}
.btn.danger{background:var(--bad)}
.btn.secondary{background:var(--surface); color:var(--ink); border:1px solid var(--line)}

/* ── Interruptor de tema (`_theme_toggle.html`) ───────────────────────────
   Muestra el icono del tema que se está VIENDO, no el del que se irá. Vive en
   las tres cabeceras: barra clara del staff, barra oscura del portal y de la
   página pública, y esquina del ingreso. */
.theme-btn{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 12px;
  border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--ink);
  font:inherit; font-size:var(--text-sm); font-weight:600; cursor:pointer;
  transition:color .12s ease, background .12s ease, border-color .12s ease;
}
.theme-btn .ic-svg{color:var(--accent-strong)}
.theme-btn .t-rotulo{white-space:nowrap}
.theme-btn:hover{border-color:var(--accent); background:var(--accent-soft)}
.theme-btn:focus-visible{outline:3px solid var(--accent-soft); outline-offset:2px}
.theme-btn .t-oscuro{display:none}
.theme-btn.es-oscuro .t-claro{display:none}
.theme-btn.es-oscuro .t-oscuro{display:inline-flex}
/* En pantallas estrechas se queda solo el icono, en redondo. */
@media (max-width:640px){
  .theme-btn{padding:0; width:36px; justify-content:center}
  .theme-btn .t-rotulo{display:none}
}
/* Sobre fondo oscuro (barra pública, barra del portal, hero del landing). */
.topbar .theme-btn, .pt-bar .theme-btn, .lp-nav .theme-btn{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.28); color:#fff}
.topbar .theme-btn .ic-svg, .pt-bar .theme-btn .ic-svg, .lp-nav .theme-btn .ic-svg{color:#5EEAD4}
.topbar .theme-btn:hover, .pt-bar .theme-btn:hover, .lp-nav .theme-btn:hover{
  background:rgba(255,255,255,.20); border-color:rgba(255,255,255,.55)}

/* ── Ingreso (`auth/login.html`) ──────────────────────────────────────────
   Dos columnas: formulario a la izquierda, panel de marca a la derecha. Es la
   primera pantalla de cualquier demo, así que es la única del área privada
   que no usa el shell de la app. En móvil el panel se reduce a la cabecera. */
.lg{min-height:100vh; display:grid; grid-template-columns:1fr 1fr}
.lg-form{position:relative; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(28px,5vw,64px); background:var(--surface)}
.lg-form .theme-btn{position:absolute; top:18px; right:18px}
.lg-form .in{width:100%; max-width:400px; margin:0 auto}
/* La marca del conjunto manda en el ingreso: es lo primero que dice al
   residente que está en el sitio correcto. Al tamaño de la barra (17px) se
   perdía contra el «Ingresar». */
.lg-brand{display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:700;
  font-size:clamp(22px,3.2vw,27px); letter-spacing:-.02em; line-height:1.2;
  color:var(--ink); text-decoration:none; margin-bottom:clamp(24px,5vh,52px)}
.lg-brand .brand-logo{height:44px; max-width:180px}
.lg-brand .dot{width:13px; height:13px; border-radius:50%; background:var(--accent); flex:0 0 auto; margin:0}
.lg-form h1{font-size:clamp(26px,3vw,32px); margin:0 0 6px}
.lg-form .lede{margin:0 0 28px}
.lg-form .btn{margin-top:4px}
.lg-foot{margin-top:auto; padding-top:32px; font-size:var(--text-sm); color:var(--muted)}
.lg-foot a{color:var(--muted)}

/* Panel de marca */
/* Imagen de marca: skyline de torres (`img/login-side.svg`, composición
   vertical pensada para este panel alto y estrecho). Encima,
   una cortina oscura en degradado: sin ella el texto blanco cae sobre las
   ventanas iluminadas y pierde contraste. La imagen va DEBAJO de la cortina en
   la pila de fondos (el primero de la lista es el de más arriba). */
.lg-side{position:relative; isolation:isolate; overflow:hidden; color:#EAF0F6;
  background:
    linear-gradient(155deg, rgba(12,20,32,.72) 0%, rgba(15,42,46,.52) 55%, rgba(11,124,114,.42) 140%),
    url("../img/login-side.svg") center bottom / cover no-repeat,
    linear-gradient(155deg, var(--panel) 0%, #0F2A2E 55%, #0B7C72 140%);
  display:flex; flex-direction:column; justify-content:center; padding:clamp(36px,5vw,64px)}
/* Halo de acento: da profundidad sin necesitar una imagen. */
.lg-side::before{content:""; position:absolute; z-index:-1; width:60vmax; height:60vmax; right:-22vmax; top:-18vmax;
  border-radius:50%; background:radial-gradient(circle, rgba(45,212,191,.20) 0%, transparent 62%)}
.lg-side .eyebrow{color:#5EEAD4}
.lg-side h2{font-family:var(--font-display); font-weight:700; font-size:clamp(24px,2.6vw,32px);
  line-height:1.15; letter-spacing:-.025em; margin:0 0 16px; color:#fff; text-wrap:balance; max-width:18ch}
.lg-side p{font-size:var(--text-md); line-height:1.6; color:#C4D0DE; margin:0; max-width:42ch}
.lg-side ul{list-style:none; margin:32px 0 0; padding:0; display:flex; flex-direction:column; gap:14px}
.lg-side li{display:flex; gap:12px; align-items:flex-start; font-size:var(--text-base); color:#DCE5EE}
.lg-side li .ic-svg{color:#5EEAD4; flex:0 0 auto; margin-top:1px}
.lg-side .ley{margin-top:36px; font-size:var(--text-xs); color:#9FB0C2}

@media (max-width:860px){
  .lg{grid-template-columns:1fr; min-height:100dvh}
  /* En móvil el panel pasa arriba y se queda en lo justo: marca y promesa. */
  .lg-side{order:-1; padding:26px clamp(20px,6vw,32px) 30px}
  .lg-side h2{font-size:22px; margin-bottom:8px}
  .lg-side ul, .lg-side .ley, .lg-side p{display:none}
  .lg-form{padding:32px clamp(20px,6vw,32px) 40px}
  .lg-foot{padding-top:24px}
}

/* ── Diálogo de confirmación (`_confirm_dialog.html`) ───────────────────── */
dialog.confirm{
  padding:0; border:0; border-radius:16px; background:var(--surface); color:var(--ink);
  width:min(420px, calc(100vw - 32px)); box-shadow:var(--shadow-lg);
}
dialog.confirm::backdrop{background:rgba(8,14,22,.55)}
dialog.confirm .cf-box{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; padding:24px}
dialog.confirm .cf-ic{color:var(--warn); margin-top:2px}
dialog.confirm .cf-txt b{display:block; font-family:var(--font-display); font-size:var(--text-lg);
  font-weight:700; letter-spacing:-.015em; line-height:1.3}
dialog.confirm .cf-txt p{margin:6px 0 0; font-size:var(--text-base); color:var(--muted); line-height:1.5}
dialog.confirm .cf-actions{grid-column:2; display:flex; gap:10px; justify-content:flex-end; margin-top:20px}
@media (max-width:420px){
  dialog.confirm .cf-actions{flex-direction:column-reverse}
  dialog.confirm .cf-actions .btn{width:100%}
}

/* ── Aviso (.alert) ───────────────────────────────────────────────────────
   Mensaje al usuario dentro del contenido: info / success / warning / danger.
   Se usa con la macro `aviso()` de `_alert.html`, que además pone el icono.
   No confundir con `.coef-banner`, que muestra una CIFRA con su estado, ni
   con `.toast`, que es efímero y se auto-desvanece. */
.alert{display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:12px;
  border:1px solid var(--line); border-left:4px solid var(--muted); background:var(--surface);
  color:var(--ink); font-size:var(--text-base); line-height:1.5; margin:0 0 var(--sp-4)}
.alert .a-ic{flex:0 0 auto; color:var(--muted); margin-top:1px}
.alert .a-txt{flex:1; min-width:0}
.alert .a-txt b{display:block; font-size:var(--text-md); line-height:1.35}
.alert .a-txt b + *{margin-top:2px}
.alert .a-txt p{margin:0; color:var(--muted); font-size:var(--text-sm)}
.alert .a-act{flex:0 0 auto; align-self:center}
.alert.info{border-left-color:var(--accent); background:var(--accent-soft); border-color:transparent}
.alert.info .a-ic{color:var(--accent-strong)}
.alert.success{border-left-color:var(--good); background:var(--good-bg); border-color:transparent}
.alert.success .a-ic{color:var(--good)}
.alert.warning{border-left-color:var(--warn); background:var(--warn-bg); border-color:transparent}
.alert.warning .a-ic{color:var(--warn)}
.alert.danger{border-left-color:var(--bad); background:var(--bad-bg); border-color:transparent}
.alert.danger .a-ic{color:var(--bad)}
/* Los textos secundarios heredan el tono del aviso, no el gris general. */
.alert.info .a-txt p, .alert.success .a-txt p,
.alert.warning .a-txt p, .alert.danger .a-txt p{color:inherit; opacity:.82}

/* Banner de estado del coeficiente */
.coef-banner{display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:var(--radius);
  border:1px solid var(--line); margin-bottom:22px; background:var(--surface); box-shadow:var(--shadow)}
.coef-banner .big{font-family:var(--font-display); font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
/* Cuando el hueco de la cifra lleva un signo (! o ⚠) y no un número. */
.coef-banner .big.sm{font-size:var(--text-2xl)}
.coef-banner .txt{flex:1; min-width:0}
.coef-banner .txt b{font-size:14px}
.coef-banner .txt span{display:block; font-size:13px; color:var(--muted)}
.coef-banner.ok{border-left:4px solid var(--good)} .coef-banner.ok .big{color:var(--good)}
.coef-banner.incompleto{border-left:4px solid var(--warn)} .coef-banner.incompleto .big{color:var(--warn)}
.coef-banner.excedido{border-left:4px solid var(--bad)} .coef-banner.excedido .big{color:var(--bad)}

/* Tabla de datos */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow)}
table.data{width:100%; border-collapse:collapse; font-size:14px}
table.data th, table.data td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
/* Encabezado: tiene que LEERSE como encabezado. Fondo propio (tinte frío) +
   línea de 2 px + tinta más oscura que el gris de metadatos; con `--muted` a
   secas la fila se confundía con los datos. */
table.data th{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  color:var(--accent-strong); background:var(--accent-tint);
  border-bottom:2px solid var(--accent-tint-line);
  position:sticky; top:0; z-index:1}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:color-mix(in srgb, var(--muted) 5%, transparent)}
table.data th.num, table.data td.num{text-align:right; font-variant-numeric:tabular-nums}
table.data a.rowlink{font-weight:600; text-decoration:none; color:var(--accent-strong)}
.table-foot td{font-weight:700; background:var(--bg)}

/* ── Tabla → tarjetas en móvil ─────────────────────────────────────────────
   Una tabla de 8 columnas no cabe en 390 px: el desplazamiento horizontal
   esconde datos y obliga a arrastrar para leer una sola fila. En móvil cada
   fila se convierte en una tarjeta y cada celda en una línea «rótulo · valor».
   El rótulo sale de `data-th`, que inyecta el script de `base.html` copiando
   el `<th>` de su columna (así no hay que tocar 34 plantillas). Solo se
   aplica a `.table-wrap.cards`, clase que pone ese mismo script cuando la
   tabla es apta (un solo `<thead><tr>`, sin `colspan` en las cabeceras).
   Selector con tres clases a propósito: tiene que ganarle a `.pt table.data
   td` de `portal.css`, que carga después. */
@media (max-width:640px){
  /* El contenedor pierde su marco: si lo conserva, se ve una tarjeta (el
     marco) con otras tarjetas (las filas) dentro. `.pt .table-wrap` de
     portal.css empata en especificidad y carga después, así que hay que
     nombrarlo aquí también. */
  .table-wrap.cards,
  .pt .table-wrap.cards{overflow:visible; border:0; background:transparent; box-shadow:none; border-radius:0; padding:0}
  .table-wrap.cards table.data,
  .table-wrap.cards table.data tbody,
  .table-wrap.cards table.data tfoot,
  .table-wrap.cards table.data tr,
  .table-wrap.cards table.data td{display:block; width:auto}
  .table-wrap.cards table.data thead{display:none}          /* el rótulo va en cada celda */
  /* `border-collapse:collapse` impide que el `overflow:hidden` de la fila
     recorte: la banda teñida se salía por el borde redondeado de la tarjeta. */
  .table-wrap.cards table.data{border-collapse:separate; border-spacing:0}
  .table-wrap.cards table.data tbody tr,
  .table-wrap.cards table.data tfoot tr{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); margin-bottom:var(--sp-3); overflow:hidden;
  }
  .table-wrap.cards table.data tbody tr:hover{background:var(--surface)}
  /* Cada tarjeta lleva su propio encabezado: la primera celda (la que
     identifica la fila) va en banda teñida, el mismo fondo que el cuadro de
     los iconos. En modo tarjeta el `<thead>` desaparece, así que sin esto no
     hay nada que marque dónde empieza cada registro. */
  .table-wrap.cards table.data tr td:first-child{
    background:var(--accent-tint); color:var(--accent-strong); font-weight:700;
    border-bottom:1px solid var(--accent-tint-line); padding:11px var(--sp-4);
  }
  /* El rótulo también va en la banda: sin él, una columna como «#» deja un
     «1» suelto en una franja de color. Mismo patrón que los paneles del
     portal: rótulo en versalitas a la izquierda, dato a la derecha. */
  .table-wrap.cards table.data tr td:first-child::before{color:inherit; opacity:.85}
  .table-wrap.cards table.data tr td:first-child a.rowlink{color:inherit}
  /* Hueco que el total no usa: en tabla es una casilla vacía; en tarjeta sería
     una línea con rótulo y nada al lado. */
  .table-wrap.cards table.data td:empty{display:none}
  .table-wrap.cards table.data td{
    display:flex; gap:var(--sp-4); align-items:baseline; justify-content:space-between;
    white-space:normal; text-align:right; padding:10px var(--sp-4);
    border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  }
  .table-wrap.cards table.data tr td:last-child{border-bottom:0}
  .table-wrap.cards table.data td::before{
    content:attr(data-th); flex:0 0 40%; text-align:left;
    font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
    color:var(--muted); line-height:1.5;
  }
  /* Celda sin rótulo propio (colspan, fila vacía, acciones): ocupa el ancho. */
  .table-wrap.cards table.data td[data-span]{display:block; text-align:left}
  .table-wrap.cards table.data td[data-span]::before{content:none}
  .table-wrap.cards table.data td.empty-row{padding:26px var(--sp-4)}
  .table-wrap.cards table.data td.row-actions{
    display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:flex-start;
    background:color-mix(in srgb, var(--muted) 5%, transparent);
  }
  .table-wrap.cards table.data td.row-actions::before{content:none}
  .table-wrap.cards table.data td.row-actions .ra{flex:1 1 auto; text-align:center}
  /* La fila de totales es su propia tarjeta, destacada. Sin esto el `<tfoot>`
     se quedaba como fila de tabla suelta bajo las tarjetas y las cifras no
     alineaban con nada (presupuesto del portal). */
  .table-wrap.cards table.data tfoot tr,
  .table-wrap.cards table.data tr.table-foot{border-color:var(--accent-tint-line)}
  .table-wrap.cards table.data .table-foot td,
  .table-wrap.cards table.data tfoot td{background:transparent; font-weight:700}
  .table-wrap.cards table.data tfoot td:first-child,
  .table-wrap.cards table.data tr.table-foot td:first-child{background:var(--accent-tint)}
}

/* Estado vacío */
.empty{text-align:center; padding:40px 20px; color:var(--muted); border:1px dashed var(--line); border-radius:var(--radius)}

/* Grid de tarjetas de edificio */
.build-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px}
.build-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px; text-decoration:none; color:var(--ink); display:block; transition:border-color .12s ease}
.build-card:hover{border-color:var(--accent)}
.build-card h3{margin:0 0 4px; font-size:16px}
.build-card p{margin:0; font-size:13px; color:var(--muted)}

/* Formularios (contenido) — rejilla que se adapta al ancho disponible.
   Los campos fluyen en 1, 2, 3… columnas según el espacio y se reacomodan solos. */
.form-card{max-width:960px}
.form-card form{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); column-gap:20px; align-items:start}
.form-row{display:contents}                 /* aplana el grupo: sus campos entran a la rejilla del form */
.form-card form .field{margin-bottom:18px}
/* Elementos que ocupan toda la fila (no se parten en columnas) */
.form-card form .check,
.form-card form > h2, .form-card form > p,
.form-actions{grid-column:1 / -1}
.field:has(textarea){grid-column:1 / -1}     /* los textarea van a ancho completo */
/* Texto de ayuda. Vale dentro de un .field y suelto en la página. */
.hint{font-size:var(--text-sm); color:var(--muted); line-height:1.45}
.hint.accent{color:var(--accent-strong)}
.form-actions{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap}
.form-actions .btn{width:auto; padding:12px 24px}

/* ===================== Portal del propietario ===================== */
.pheader{display:flex; align-items:center; gap:8px 18px; flex-wrap:wrap; background:var(--panel); color:var(--panel-ink); padding:12px clamp(16px,4vw,36px)}
.pheader .brand{font-weight:800; color:#fff; text-decoration:none; font-size:16px; letter-spacing:-.01em; flex:0 0 auto}
.pheader .brand span{color:var(--accent-strong); filter:brightness(1.6)}
.pheader a.pl{color:var(--panel-muted); text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap; padding:4px 0}
.pheader a.pl.on, .pheader a.pl:hover{color:#fff}
.pheader .right{margin-left:auto; display:flex; align-items:center; gap:16px; flex:0 0 auto}
.pheader .who{color:var(--panel-muted); font-size:14px}
/* En móvil, los enlaces del portal fluyen en una tira scrollable bajo la marca. */
@media (max-width:720px){
  .pheader{gap:10px 14px}
  .pheader .right{order:2}
  .pheader .brand{margin-right:auto}
}
.portal-main{max-width:840px; margin:0 auto; padding:clamp(22px,4vw,40px) clamp(16px,4vw,28px)}

.unit-card{display:block; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-bottom:16px; transition:border-color .12s ease}
.unit-card:hover{border-color:var(--accent)}
.unit-card .uc-top{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px}
.unit-card .uc-name{font-weight:700; font-size:16px}
.unit-card .uc-amt{font-family:var(--font-display); font-size:26px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.unit-card .uc-sub{font-size:13px; color:var(--muted)}

/* Badge de no leídos (portal) */
.nav-badge{display:inline-block; min-width:18px; padding:0 5px; height:18px; line-height:18px; text-align:center;
  font-size:11px; font-weight:800; border-radius:999px; background:var(--accent-strong); color:#fff; vertical-align:middle}

/* Anuncios */
.ann{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px 20px; margin-bottom:14px; text-decoration:none; color:var(--ink); display:block}
.ann:hover{border-color:var(--accent)}
.ann .ann-top{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.ann .ann-title{font-weight:700; font-size:16px}
.ann .ann-meta{font-size:var(--text-sm); color:var(--muted)}
.ann .ann-excerpt{font-size:14px; color:var(--muted); margin:0}
.pin{font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--warn);
  background:var(--warn-bg); border-radius:999px; padding:2px 8px}
.ann-body{white-space:pre-wrap; line-height:1.6; font-size:15px}

/* PQRS · hilo de mensajes */
.thread{display:flex; flex-direction:column; gap:10px; margin:14px 0}
.msg{max-width:80%; padding:11px 14px; border-radius:14px; font-size:14px; line-height:1.5; white-space:pre-wrap}
.msg .msg-who{font-size:var(--text-xs); font-weight:700; margin-bottom:3px; opacity:.75}
.msg.them{align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:4px}
.msg.me{align-self:flex-end; background:var(--accent-soft); color:var(--accent-strong); border-bottom-right-radius:4px}
.msg .msg-time{font-size:var(--text-xs); opacity:.6; margin-top:4px}
.status-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.status-tabs a{font-size:13px; font-weight:600; padding:6px 12px; border-radius:999px; text-decoration:none;
  border:1px solid var(--line); color:var(--muted); background:var(--surface)}
.status-tabs a.on{background:var(--accent-strong); color:#fff; border-color:var(--accent-strong)}
.ticket-photo{max-width:280px; border-radius:10px; border:1px solid var(--line); margin-top:10px}

/* Votación · barras de resultados */
.votebar{display:flex; height:14px; border-radius:8px; overflow:hidden; background:var(--line); margin:8px 0 6px}
.votebar.lg{height:16px}   /* barra de recaudo del panel: es el dato principal de la tarjeta */
.votebar span{display:block; height:100%}
.votebar .vb-favor{background:var(--good)}
.votebar .vb-contra{background:var(--bad)}
.votebar .vb-abs{background:var(--muted)}
.vote-legend{display:flex; gap:16px; flex-wrap:wrap; font-size:var(--text-sm); color:var(--muted)}
.vote-legend b{color:var(--ink); font-variant-numeric:tabular-nums}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:middle}
.dot.good{background:var(--good)} .dot.bad{background:var(--bad)} .dot.mut{background:var(--muted)}
.motion-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; margin-bottom:16px}
.vote-options{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.vote-options button{flex:1; min-width:120px}
.badge-approved{font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:3px 10px; border-radius:999px}
.badge-approved.yes{color:var(--good); background:var(--good-bg)}
.badge-approved.no{color:var(--bad); background:var(--bad-bg)}
.quorum-box{display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); margin-bottom:20px}
.quorum-box .big{font-family:var(--font-display); font-size:22px; font-weight:700; font-variant-numeric:tabular-nums}

/* Ayuda / manual */
.help-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-top:8px}
.help-card{display:block; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; transition:border-color .12s ease}
.help-card:hover{border-color:var(--accent)}
.help-card .hc-ic{width:40px; height:40px; line-height:0; border-radius:11px; background:var(--accent-soft); color:var(--accent-strong);
  display:grid; place-items:center; font-size:18px; margin-bottom:12px}
.help-card h3{margin:0 0 4px; font-size:15px}
.help-card p{margin:0; font-size:13px; color:var(--muted)}
.steps{counter-reset:step; margin:14px 0 0; padding:0; list-style:none}
.steps li{position:relative; padding:0 0 18px 46px; counter-increment:step}
.steps li::before{content:counter(step); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%;
  background:var(--accent-strong); color:#fff; display:grid; place-items:center; font-weight:800; font-size:14px}
.steps li:not(:last-child)::after{content:""; position:absolute; left:15px; top:32px; bottom:2px; width:2px; background:var(--line)}
.steps li h4{margin:4px 0 4px; font-size:15px}
.steps li p{margin:0; color:var(--muted); font-size:14px; line-height:1.55}
/* Guía: texto principal + columna de «otras guías». En móvil se apilan. */
.guide-grid{display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:28px; align-items:start}
.guide-main{min-width:0}
.guide-aside{padding:18px}
@media (max-width:820px){.guide-grid{grid-template-columns:1fr}}
.help-side{display:flex; flex-direction:column; gap:6px}
.help-side a{text-decoration:none; color:var(--accent-strong); font-size:14px; padding:6px 0}

/* Icono SVG: se alinea con la línea de texto y hereda el color del contenedor. */
.ic-svg{display:inline-block; vertical-align:-.18em; flex:0 0 auto}
.btn .ic-svg{vertical-align:0}

/* ── Barra de búsqueda y filtros de listado ─────────────────────────────── */
.searchbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 14px}
.sb-input{position:relative; flex:1; min-width:220px; max-width:420px}
.sb-input .sb-ic{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted);
  display:inline-flex; pointer-events:none}
.sb-input input{width:100%; padding:10px 12px 10px 34px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--ink); font:inherit; font-size:14px}
.sb-input input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.sb-filter{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted)}
.sb-filter select{padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface);
  color:var(--ink); font:inherit; font-size:14px}
.sb-clear{font-size:13px; color:var(--muted); text-decoration:none}
.sb-clear:hover{color:var(--accent-strong); text-decoration:underline}
.sb-count{margin-left:auto; font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.sb-legend{font-size:13px; font-weight:700; color:var(--ink)}
/* Los <input type=date> comparten el aspecto de los selects de la barra. */
.sb-filter input[type=date]{padding:9px 10px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--ink); font:inherit; font-size:14px}
.sb-filter input[type=date]:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
/* El icono del selector nativo es casi invisible en tema oscuro. */
:root[data-theme=dark] .sb-filter input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.7)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .sb-filter input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.7)}
}

/* ── Acciones dentro de una fila de tabla ───────────────────────────────── */
td.row-actions{white-space:nowrap; text-align:right}
.row-actions .ra{display:inline-block; font-size:var(--text-sm); font-weight:700; text-decoration:none; padding:5px 10px;
  border-radius:8px; color:var(--accent-strong); background:var(--accent-soft); margin-left:6px}
.row-actions .ra:hover{filter:brightness(.96)}
.row-actions .ra.muted{color:var(--muted); background:var(--surface-2, transparent); border:1px solid var(--line)}

.unit-filter{width:100%; padding:9px 12px; margin-bottom:6px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--ink); font:inherit; font-size:14px}
.unit-filter:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}

/* ── Previsualización antes de facturar ─────────────────────────────────── */
.preview-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin:14px 0 18px}
.preview-grid .pv{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px}
.preview-grid .pv .lab{margin:0 0 4px; font-size:12px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.preview-grid .pv .val{margin:0; font-family:var(--font-display, inherit); font-size:22px; font-weight:800; font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ═══════════════ Utilidades ═══════════════
   Sustituyen a los `style=""` en línea. Toda medida sale de los tokens de
   tokens.css (--text-*, --sp-*): no escribir px sueltos en las plantillas. */

/* Títulos de sección dentro de una tarjeta o formulario (no cuelgan de .content,
   así que no reciben el marcador de acento de `.content > h2`). */
.h-section{font-family:var(--font-display); font-size:var(--text-lg); font-weight:700;
  letter-spacing:-.015em; line-height:1.25; margin:0 0 var(--sp-3)}
.h-section.sm{font-size:var(--text-md); margin-bottom:var(--sp-3)}

/* Cifras y columnas numéricas */
.num{text-align:right; font-variant-numeric:tabular-nums}
.figure{font-family:var(--font-display); font-size:var(--text-2xl); font-weight:700;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin:0}
.figure.lg{font-size:var(--text-3xl)}

/* Texto secundario */
.note{font-size:var(--text-sm); color:var(--muted)}
.note.xs{font-size:var(--text-xs)}
.txt-bad{color:var(--bad)} .txt-good{color:var(--good)} .txt-warn{color:var(--warn)} .txt-muted{color:var(--muted)}

/* Espaciado y alineación */
.m0{margin:0}
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.block{display:block} .hidden{display:none} .self-center{align-self:center}
.mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)}
.mb-1{margin-bottom:var(--sp-1)} .mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)}
.mb-4{margin-bottom:var(--sp-4)} .mb-5{margin-bottom:var(--sp-5)} .mb-6{margin-bottom:var(--sp-6)}
.center{text-align:center} .right{text-align:right} .left{text-align:left}
.push{margin-left:auto}                     /* empuja el elemento al extremo de una fila flex */
.wrap{white-space:normal}                   /* celda de tabla que sí puede partir en varias líneas */
.flash-wrap{max-width:1080px; margin:0 auto}
.row-center{display:flex; align-items:center; gap:var(--sp-2)}
.row-center .grow{flex:1; min-width:0}
/* Vista de la cámara al escanear un QR en portería */
.scan-video{width:100%; max-width:420px; border-radius:12px; background:#000; aspect-ratio:1/1; object-fit:cover}
.inline-form{display:inline}
.scroll-y{max-height:360px; overflow:auto}

/* Rejilla de datos compacta (edad de cartera, resúmenes de tesorería) */
.minigrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:var(--sp-3)}
.minigrid .lab{font-size:var(--text-xs); color:var(--muted)}
.minigrid .val{font-weight:700; font-variant-numeric:tabular-nums}

/* Cifra secundaria dentro de un k-val: «3 / 40» */
.k-val .of{font-size:var(--text-sm); color:var(--muted); font-weight:600}

/* Fila de tabla sin resultados */
td.empty-row{text-align:center; color:var(--muted); padding:26px}

/* Pasarela de pago (pantalla propia, sin sidebar ni cabecera) */
.gw-screen{min-height:100vh; display:grid; place-items:center; background:var(--bg); padding:var(--sp-5)}
.gw-card{max-width:420px; width:100%}
.gw-head{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-4); font-size:var(--text-md); font-weight:700}
.gw-head .dot{width:10px; height:10px; border-radius:50%; background:var(--accent); margin:0}
.gw-head .chip{margin-left:auto; font-weight:700}
.gw-note{background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  font-size:var(--text-sm); color:var(--muted); margin:var(--sp-2) 0 var(--sp-5)}
.btn.secondary.danger-outline{color:var(--bad); border-color:var(--bad); background:var(--surface)}

/* Documento certificado (paz y salvo): hoja centrada y sobria */
.doc-card{max-width:640px; margin:0 auto; text-align:center; padding:40px}
.doc-card .eyebrow{justify-content:center}
.doc-card h1{margin:var(--sp-2) 0 var(--sp-1)}
.doc-card .lede{margin:0 auto var(--sp-5); max-width:46ch}
.doc-card .coef-banner{justify-content:center}
.doc-card .coef-banner .txt{text-align:left; flex:0 1 auto}
.doc-card .doc-foot{margin:var(--sp-5) 0 0; font-size:var(--text-xs); color:var(--muted)}

/* ── Marca de la copropiedad (logo subido en Personalización) ───────────── */
/* Alto fijo y ancho libre: aceptamos cualquier proporción sin deformarla. */
.brand-logo{height:22px; width:auto; max-width:120px; object-fit:contain; flex:0 0 auto; display:block}
.pheader .brand-logo, .pt-brand .brand-logo{height:20px}
.pt-brand{display:flex; align-items:center; gap:8px}

/* Vista previa del logo en la pantalla de Personalización */
.logo-preview{
  width:132px; height:88px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--line); border-radius:10px; background:var(--bg); padding:10px;
}
.logo-preview img{max-width:100%; max-height:100%; object-fit:contain}
.logo-preview .logo-empty{font-size:var(--text-xs); color:var(--muted)}
.logo-form{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.logo-form input[type=file]{font-size:var(--text-sm); color:var(--muted); max-width:100%}

/* ═══════════════ Gráficos del panel ═══════════════
   Marcas finas, rejilla recesiva y el texto siempre en tokens de tinta: el
   color de serie vive en la marca, nunca en la letra (una barra teal clara es
   ilegible como texto). Paleta y su validación: tokens.css. */
.chart{position:relative}

/* Columnas: la banda entera es el objetivo del puntero (nunca la barra sola). */
.cols-plot{position:relative; display:flex; align-items:flex-end; gap:2px; height:150px;
  border-bottom:1px solid var(--chart-axis)}
.cols-grid{position:absolute; left:0; right:0; bottom:50%; height:1px; background:var(--chart-grid)}
.cols-band{position:relative; flex:1; height:100%; display:flex; align-items:flex-end; justify-content:center;
  border-radius:6px 6px 0 0; outline-offset:2px}
.cols-band:hover, .cols-band:focus-visible{background:var(--chart-grid)}
.cols-bar{display:block; width:100%; max-width:24px; background:var(--c1); border-radius:4px 4px 0 0; min-height:3px}
.cols-band.is-last .cols-bar{background:var(--accent-strong)}   /* mes en curso */
.cols-target{position:absolute; left:50%; width:34px; max-width:100%; transform:translateX(-50%);
  height:2px; border-radius:2px; background:var(--muted)}
.cols-labs{display:flex; gap:2px; margin-top:6px}
.cols-labs span{flex:1; text-align:center; font-size:var(--text-xs); color:var(--muted)}
.cols-labs span.on{color:var(--ink); font-weight:700}
.cols-note{margin:var(--sp-3) 0 0; font-size:var(--text-xs); color:var(--muted)}
.cols-note b{color:var(--ink); font-size:var(--text-sm)}

/* Leyenda: rectángulo para barras, línea para referencias. */
.chart-key{display:flex; gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-2);
  font-size:var(--text-xs); color:var(--muted)}
.chart-key .k{display:inline-flex; align-items:center; gap:6px}
.chart-key .k b{color:var(--ink); font-weight:700}
.chart-key .sw{width:10px; height:10px; border-radius:3px; background:var(--c1); display:inline-block}
.chart-key .sw.c2{background:var(--c2)} .chart-key .sw.c3{background:var(--c3)}
.chart-key .sw.line{height:2px; border-radius:2px; background:var(--muted); width:14px}

/* Barras horizontales */
.hbars{display:flex; flex-direction:column; gap:10px}
.hb{display:grid; grid-template-columns:minmax(84px,26%) 1fr auto; align-items:center; gap:12px}
.hb-lab{font-size:var(--text-sm); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hb-track{background:var(--chart-track); border-radius:4px; height:14px; overflow:hidden}
.hb-fill{display:block; height:100%; border-radius:0 4px 4px 0; background:var(--c1); min-width:3px;
  transition:width .3s ease}
.hb-fill.seq-1{background:var(--seq-1)} .hb-fill.seq-2{background:var(--seq-2)}
.hb-fill.seq-3{background:var(--seq-3)} .hb-fill.seq-4{background:var(--seq-4)}
.hb-val{font-size:var(--text-sm); font-variant-numeric:tabular-nums; white-space:nowrap}
.hb:hover .hb-fill{filter:brightness(1.06)}

/* Apilada parte-todo: los segmentos se separan con hueco de superficie, no con borde. */
.stack{display:flex; height:16px; border-radius:8px; overflow:hidden; background:var(--chart-track); gap:2px}
.stack .st-seg{height:100%; background:var(--c1)}
.stack .st-seg.c2{background:var(--c2)} .stack .st-seg.c3{background:var(--c3)}

/* Tabla equivalente (ningún valor vive solo en el hover) */
.chart-table{margin-top:var(--sp-3)}
.chart-table summary{font-size:var(--text-xs); color:var(--muted); cursor:pointer; width:fit-content}
.chart-table summary:hover{color:var(--accent-strong)}
.chart-table .table-wrap{margin-top:var(--sp-2)}

/* Tooltip compartido: el valor manda, la etiqueta acompaña. */
.chart-tip{position:fixed; z-index:60; pointer-events:none; opacity:0; transform:translateY(2px);
  transition:opacity .12s ease; background:var(--panel); color:var(--panel-ink);
  padding:7px 10px; border-radius:8px; font-size:var(--text-xs); line-height:1.35;
  box-shadow:var(--shadow-lg); max-width:240px}
.chart-tip.on{opacity:1; transform:none}

/* Rejilla de tarjetas de gráfico */
.chart-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:var(--sp-4); margin-bottom:var(--sp-5)}
.chart-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--sp-5); box-shadow:var(--shadow)}
.chart-card.wide{grid-column:1 / -1}
.chart-card h3{font-family:var(--font-display); font-size:var(--text-lg); font-weight:700; margin:0}
.chart-card .c-sub{margin:2px 0 var(--sp-4); font-size:var(--text-xs); color:var(--muted)}
.chart-card .c-head{display:flex; align-items:flex-start; gap:var(--sp-3)}
.chart-card .c-head .push{margin-left:auto}
@media (max-width:640px){ .chart-card{padding:var(--sp-4)} }

/* Presets de periodo del panel (antes del rango a medida) */
.presets{display:inline-flex; gap:6px; flex-wrap:wrap}
.presets .preset{font-size:var(--text-xs); font-weight:700; text-decoration:none; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:6px 12px; background:var(--surface)}
.presets .preset:hover{color:var(--accent-strong); border-color:var(--accent)}
.presets .preset.on{background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent)}