/* ============================================================
   TyP DS — "Trasteros y ·" — sistema de diseño único (tema oscuro).
   Un dato = un componente = un formato. Sin recursos remotos.
   Orden: 1 tokens · 2 base+alias legados (ex style/pkg-*.css) · 3 componentes c-*
   Las clases antiguas siguen definidas como alias hasta que todas las plantillas usen c-*.
   ============================================================ */
:root{
  /* Superficies */
  --bg:#14171c; --bg-elev:#1c2128; --bg-inset:#101317; --bg-hover:#232a33; --bg-row:#1a1f26;
  --border:#2b323c; --border-strong:#3d4653;
  /* Texto */
  --text:#e6e8eb; --muted:#8b949e; --faint:#848d97; --on-accent:#0d1117; --on-fill:#fff;
  /* Acento (acción) */
  --accent:#4a90d9; --accent-hover:#5da0e6; --accent-bg:rgba(74,144,217,.14);
  /* ESTADOS DE COBRO (semáforo): el ÚNICO uso permitido de estos colores */
  --st-debe:#e5534b;
  --st-debe-bg:rgba(184,59,50,.16);
  --st-debe-fill:#b83b32;
  --st-aldia:#3fb950;
  --st-aldia-bg:rgba(46,160,67,.16);
  --st-aldia-fill:#2ea043;
  --st-adelantado:#58a6ff;
  --st-adelantado-bg:rgba(59,130,196,.16);
  --st-adelantado-fill:#3b82c4;
  --st-sindato:#d9a62e;
  --st-sindato-bg:rgba(210,153,34,.16);
  --st-sindato-fill:#d29922;
  --st-libre:#8b949e;
  --st-libre-bg:rgba(139,148,158,.12);
  --st-libre-fill:#3a424d;
  --st-baja:#6e7681;
  --st-baja-bg:rgba(110,118,129,.12);
  --st-baja-fill:var(--st-baja);
  /* Dinero (independiente del semáforo) */
  --m-in:#3fb950; --m-out:#e0742e; --m-inv:#a371f7; --m-dep:#b1bac4; --m-tax:#d9a62e;
  --m-in-bg:rgba(63,185,80,.12); --m-out-bg:rgba(224,116,46,.12); --m-inv-bg:rgba(163,113,247,.12);
  /* Mensajes */
  --ok:#3fb950; --warn:#d9a62e; --danger:#e5534b; --info:#58a6ff;
  --ok-bg:rgba(46,160,67,.14); --warn-bg:rgba(210,153,34,.14); --danger-bg:rgba(184,59,50,.14); --info-bg:rgba(59,130,196,.14);
  --neutral-bg:rgba(139,148,158,.12);
  /* Mapa */
  --map-bg:#181d20; --map-veg:#16231b; --map-parcela:#1d2622; --map-util:#223328;
  --map-parcela-v1:#222e26; --map-muro-v1:#9a8878; --map-camino-line:#4b535e; --map-eje:#5a636f; --slot-stroke:#0d1013; /* mapa v2 (WP3 migra a los de arriba) */
  --map-arena:#3a2f28; --map-camino:#343a43; --map-muro:#b8a48e; --map-valla:#aab2bc;
  --map-rambla:#a371f7; --map-puerta:#58a6ff; --map-edificio:#2b3139;
  /* Tipografía */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:15.5px; --fs-xl:18px; --fs-2xl:22px; --fs-3xl:34px;
  --lh:1.45;
  /* Espaciado (base 4) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  /* Radios y elevación */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px;
  --shadow-sheet:0 -8px 28px rgba(0,0,0,.5); --shadow-pop:0 8px 24px rgba(0,0,0,.45);
  /* Alturas táctiles */
  --tap:44px; --tap-sm:40px; --ctl:42px;
  /* Capas */
  --z-sticky:50; --z-menu:60; --z-tabbar:70; --z-sheet:80; --z-toast:90;

  /* ---- Alias legados (no usar en código nuevo) ---- */
  --accent-text:var(--on-accent);
  --ok-fg:var(--ok); --warn-fg:var(--warn); --danger-fg:var(--danger); --info-fg:var(--info);
  --ok-fill:var(--st-aldia-fill); --warn-fill:var(--st-sindato-fill);
  --danger-fill:var(--st-debe-fill); --info-fill:var(--st-adelantado-fill);
  --s-ing:var(--m-in); --s-gas:var(--m-out); --s-inv:var(--m-inv); --s-pas:var(--muted);
  --grid:#242b34;
}

/* ============================================================
   2 · BASE + ALIAS LEGADOS (ex style.css, pkg-nav.css, pkg-cobros.css, pkg-forms.css)
   Toda <table class="table"> con td[data-l] pasa a tarjeta en < 700 px (antes solo .stack-l).
   ============================================================ */*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14px; line-height:1.45; color:var(--text); background:var(--bg);
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-hover); }
.mono{ font-family: ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;
  font-variant-numeric:tabular-nums; }
.muted{ color:var(--muted); }
.faint{ color:var(--faint); }
.num{ text-align:right; font-variant-numeric:tabular-nums; }
h1{ font-size:20px; font-weight:600; margin:0; }
h2{ font-size:16px; font-weight:600; margin:0; }

/* ---------- Navegación 2 niveles ---------- */
.topbar{ position:sticky; top:0; z-index:50; height:56px; display:flex; align-items:center;
  gap:24px; padding:0 24px; background:var(--bg-elev); border-bottom:1px solid var(--border); }
.brand{ white-space:nowrap; font-size:18px; font-weight:700; color:var(--text); text-decoration:none; }
.brand .dot{ color:var(--accent); font-size:1.3em; line-height:0; }
.nav1{ display:flex; gap:4px; }
.nav1 a{ padding:7px 14px; border-radius:6px; color:var(--muted); text-decoration:none; font-size:14px; }
.nav1 a:hover{ background:var(--bg-hover); color:var(--text); }
.nav1 a.active{ background:var(--bg-hover); color:var(--text); font-weight:600; }
.verifactu{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12px;
  color:var(--muted); background:var(--neutral-bg); padding:4px 10px; border-radius:999px; }
.verifactu::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ok-fg); }
.subnav{ display:flex; gap:4px; height:42px; padding:0 24px; align-items:stretch;
  background:var(--bg); border-bottom:1px solid var(--border); position:sticky; top:56px; z-index:40; }
.subnav a{ display:flex; align-items:center; padding:0 12px; color:var(--muted); text-decoration:none;
  font-size:13.5px; border-bottom:2px solid transparent; margin-bottom:-1px; }
.subnav a:hover{ color:var(--text); }
.subnav a.active{ color:var(--text); font-weight:600; border-bottom-color:var(--accent); }
.nav1{ flex:1 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; }
.nav1::-webkit-scrollbar{ display:none; }
.nav1 a{ flex:none; white-space:nowrap; }
.verifactu{ margin-left:0; }
@media (max-width:1180px){ .verifactu{ display:none; } .topbar{ gap:14px; } }
details.mas{ position:relative; margin-left:8px; }
details.mas > summary{ white-space:nowrap; list-style:none; cursor:pointer; padding:7px 14px; border-radius:6px; color:var(--muted); font-size:14px; }
details.mas > summary::-webkit-details-marker{ display:none; }
details.mas > summary::after{ content:" \25BE"; font-size:11px; }
details.mas > summary:hover, details.mas.active > summary, details.mas[open] > summary{ background:var(--bg-hover); color:var(--text); }
.mas-body{ position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:210px; padding:6px;
  background:var(--bg-elev); border:1px solid var(--border-strong); border-radius:8px; box-shadow:0 10px 28px rgba(0,0,0,.45); }
.mas-body a{ display:block; padding:9px 12px; border-radius:6px; color:var(--text); font-size:14px; }
.mas-body a:hover{ background:var(--bg-hover); }
.mas-body a.active{ font-weight:600; background:var(--bg-hover); }
.mas-body a.salir{ color:var(--danger-fg); border-top:1px solid var(--border); border-radius:0 0 6px 6px; margin-top:4px; padding-top:11px; }

/* ---------- Layout ---------- */
main{ max-width:1360px; margin:0 auto; padding:24px 24px 48px; }
.page-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.page-head .title{ display:flex; align-items:baseline; gap:10px; }
.page-head .count{ color:var(--muted); font-size:12.5px; }
.page-head .spacer{ margin-left:auto; }
.nota{ color:var(--muted); font-size:12.5px; margin:8px 0; }
.hint{ color:var(--faint); font-size:12.5px; margin:4px 0 0; }
code{ background:var(--bg-inset); padding:.1em .35em; border-radius:4px; font-size:.9em; }

/* ---------- Botones ---------- */
.btn{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 14px; font-size:14px;
  font-weight:500; border-radius:6px; border:1px solid transparent; background:transparent;
  color:var(--text); cursor:pointer; white-space:nowrap; text-decoration:none; }
.btn-sm{ height:26px; padding:0 10px; font-size:13px; }
.btn-primary{ background:var(--accent); color:var(--accent-text); font-weight:600; }
.btn-primary:hover{ background:var(--accent-hover); }
.btn-secondary{ background:var(--bg-elev); border-color:var(--border-strong); }
.btn-secondary:hover{ background:var(--bg-hover); }
.btn-ghost{ color:var(--muted); }
.btn-ghost:hover{ background:var(--bg-hover); color:var(--text); }
.btn-ghost-danger{ color:var(--danger-fg); }
.btn-ghost-danger:hover{ background:var(--danger-bg); }
.btn:focus-visible{ outline:2px solid rgba(74,144,217,.5); outline-offset:1px; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

/* Grupo segmentado (− | + y Particular|Empresa) */
.btn-group{ display:inline-flex; }
.btn-group .btn{ border-radius:0; border:1px solid var(--border-strong); margin-left:-1px; }
.btn-group .btn:first-child{ border-radius:6px 0 0 6px; margin-left:0; }
.btn-group .btn:last-child{ border-radius:0 6px 6px 0; }
.btn-group .btn.active{ background:var(--accent); color:var(--accent-text); border-color:var(--accent); font-weight:600; }

/* ---------- Barra de filtros / mini-barra ---------- */
.filter-bar{ display:flex; gap:8px; margin-bottom:12px; align-items:center; flex-wrap:wrap; }
.filter-bar input[type="search"], .filter-bar input.search{ width:260px; }
.toggle-inline{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); cursor:pointer; }

/* ---------- Tablas ---------- */
.table{ width:100%; border-collapse:collapse; background:var(--bg-elev); border:1px solid var(--border);
  border-radius:8px; overflow:hidden; }
.table thead th{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); text-align:left; padding:10px 14px; border-bottom:1px solid var(--border-strong); }
.table tbody td{ padding:12px 16px; line-height:1.5; border-bottom:1px solid var(--border); vertical-align:middle; }
.table tbody tr:last-child td{ border-bottom:none; }
.table tbody tr:hover{ background:var(--bg-hover); }
.table.zebra tbody tr:nth-child(even){ background:var(--bg-row); }
.table td.num, .table th.num{ text-align:right; }
/* Legibilidad: las columnas numéricas se ciñen a su contenido (no envuelven) y
   dejan el ancho sobrante a las columnas de texto (concepto/cliente/categoría). */
.table td.num, .table th.num{ white-space:nowrap; width:1%; }
.table td.txt, .table th.txt{ min-width:320px; }
.table td.txt-lg, .table th.txt-lg{ min-width:360px; }
.table td.txt-sm, .table th.txt-sm{ min-width:200px; }
.table td.center, .table th.center{ text-align:center; }
.table tfoot td{ padding:10px 12px; border-top:2px solid var(--border-strong); font-weight:600; }
.cell-l1{ font-weight:500; }
.cell-l2{ font-size:12.5px; color:var(--muted); }
.doc-prefix{ color:var(--muted); }
.empty-row td{ text-align:center; color:var(--muted); padding:24px 12px; }

/* ---------- Card ---------- */
.card{ background:var(--bg-elev); border:1px solid var(--border); border-radius:8px; padding:24px; }
.card-narrow{ max-width:640px; margin:0 auto; }

/* ---------- Badges (semáforo §4.2) ---------- */
.badge{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 10px;
  border-radius:999px; font-size:12px; font-weight:500;
  background:var(--badge-bg,var(--neutral-bg)); color:var(--badge-fg,var(--muted)); }
.badge::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--badge-fg,var(--muted)); }
.badge-debe{ --badge-bg:var(--st-debe-bg); --badge-fg:var(--st-debe); }
.badge-aldia{ --badge-bg:var(--st-aldia-bg); --badge-fg:var(--st-aldia); }
.badge-adelantado{ --badge-bg:var(--st-adelantado-bg); --badge-fg:var(--st-adelantado); }
.badge-sindato{ --badge-bg:var(--st-sindato-bg); --badge-fg:var(--st-sindato); }
.badge-baja{ --badge-bg:var(--st-baja-bg); --badge-fg:var(--st-baja); }
.badge-neutral{ --badge-bg:var(--neutral-bg); --badge-fg:var(--muted); }

/* ---------- Franja de estado + baja ---------- */
tr.estado{ box-shadow: inset 3px 0 0 var(--estado-color); }
tr.estado-debe{ --estado-color:var(--danger-fg); }
tr.estado-aldia{ --estado-color:var(--ok-fg); }
tr.estado-adelantado{ --estado-color:var(--info-fg); }
tr.estado-sindato{ --estado-color:var(--st-sindato); }
tr.baja{ --estado-color:var(--faint); opacity:.55; box-shadow: inset 3px 0 0 var(--faint); }

/* ---------- Chips (resumen = filtros) ---------- */
.chips{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.chip{ display:flex; flex-direction:column; gap:2px; min-width:110px; padding:10px 14px;
  background:var(--bg-elev); border:1px solid var(--border); border-radius:8px; cursor:pointer; text-decoration:none; }
.chip:hover{ background:var(--bg-hover); }
.chip.active{ border-color:var(--border-strong); background:var(--bg-hover); }
.chip .num{ font-size:20px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:8px; text-align:left; }
.chip .num::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--chip-dot,var(--muted)); }
.chip .lbl{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.chip-deben{ --chip-dot:var(--danger-fg); }
.chip-aldia{ --chip-dot:var(--ok-fg); }
.chip-adelantado{ --chip-dot:var(--info-fg); }
.chip-sindato{ --chip-dot:var(--muted); }
.chip-todos{ --chip-dot:var(--accent); }

/* ---------- Cabecera ordenable ---------- */
th.sortable a{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; }
th.sortable a:hover{ color:var(--text); }
th.sortable .dir{ margin-left:4px; color:var(--accent); }

/* ---------- Acciones de fila (cobros) ---------- */
.row-actions{ display:flex; gap:6px; justify-content:flex-end; align-items:center; }
.row-actions .cobrar-slot{ min-width:96px; display:flex; justify-content:flex-end; }
details.menu{ position:relative; }
details.menu > summary{ list-style:none; cursor:pointer; }
details.menu > summary::-webkit-details-marker{ display:none; }
details.menu[open] > .menu-body{ position:absolute; right:0; top:calc(100% + 4px); z-index:20;
  min-width:200px; background:var(--bg-elev); border:1px solid var(--border-strong);
  border-radius:6px; padding:4px; }
.menu-body button{ display:block; width:100%; text-align:left; padding:7px 10px; font-size:13px;
  color:var(--text); background:none; border:0; border-radius:4px; cursor:pointer; }
.menu-body button:hover{ background:var(--bg-hover); }
.menu-body button.danger{ color:var(--danger-fg); }
.menu-body button.danger:hover{ background:var(--danger-bg); }
.menu-body .fijar-row{ display:flex; gap:6px; align-items:center; padding:6px 8px; }
.menu-body .fijar-row input[type="month"]{ flex:1; min-width:0; }

/* ---------- Formularios ---------- */
label{ display:block; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field > .label, .form-label{ font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); }
input, select, textarea{ height:34px; background:var(--bg-inset); color:var(--text);
  border:1px solid var(--border); border-radius:6px; padding:0 10px; font-size:14px; font-family:inherit; width:100%; }
textarea{ height:auto; padding:8px 10px; }
select{ appearance:auto; }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(74,144,217,.25); }
input[type="checkbox"], input[type="radio"]{ width:18px; height:18px; margin:0; padding:0; flex:none; accent-color:var(--accent); }
input[type="radio"].seg-radio{ width:1px; height:1px; }
.field.row{ flex-direction:row; align-items:center; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
fieldset{ border:none; border-top:1px solid var(--border); padding:16px 0 0; margin:20px 0 0; }
fieldset:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
fieldset > legend{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); padding:0; margin-bottom:4px; }
.check-inline{ display:flex; align-items:center; gap:8px; }
.check-inline.locked{ opacity:.6; pointer-events:none; }
.check-inline .label{ text-transform:none; letter-spacing:normal; font-size:13px; font-weight:400; color:var(--text); }
.form-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.field-error{ color:var(--danger-fg); font-size:12px; margin-top:4px; }
input.err, select.err{ border-color:var(--danger-fg); }

/* ---------- Mensajes ---------- */
.alert{ padding:10px 14px; border-radius:6px; font-size:13px; margin-bottom:16px; }
.alert-danger{ background:var(--danger-bg); border:1px solid var(--danger-fg); color:var(--danger-fg); }
.alert-ok{ background:var(--ok-bg); border:1px solid var(--ok-fg); color:var(--ok-fg); }
.alert-warn{ background:var(--warn-bg); border:1px solid var(--warn-fg); color:var(--warn-fg); }
.envio.ok{ color:var(--ok-fg); font-size:12.5px; }
.envio.error{ color:var(--danger-fg); font-size:12.5px; }
.enviada-tag{ color:var(--muted); font-size:12.5px; }

/* ---------- Dropzone (DNIs) ---------- */
.dropzone{ height:140px; width:100%; border:2px dashed var(--border); border-radius:8px;
  background:var(--bg-inset); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; color:var(--muted); cursor:pointer; text-align:center; padding:12px; }
.dropzone.drag{ border-color:var(--accent); background:var(--info-bg); color:var(--text); }
.dropzone .dz-files{ list-style:none; padding:0; margin:6px 0 0; font-size:12.5px; color:var(--text); }

/* ---------- Generar factura (bloque inline) ---------- */
.inline-panel{ background:var(--bg-elev); border:1px solid var(--border-strong); border-radius:8px;
  padding:16px; margin-bottom:16px; }
details.gen > summary{ list-style:none; }
details.gen > summary::-webkit-details-marker{ display:none; }
details.gen[open] > .inline-panel{ position:static; width:auto; margin-top:12px; }

/* ---------- Indicador HTMX ---------- */
.htmx-request{ opacity:.6; pointer-events:none; }

footer{ color:var(--faint); font-size:11.5px; padding:32px 24px; text-align:center; }

/* ============================================================
   Bloque finanzas (rediseño dashboard + extracto) — prefijo .fx-
   ============================================================ */
.tblwrap{ overflow-x:auto; }
.form-actions.sticky{ position:static; }
.htmx-indicator{ opacity:0; transition:opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator{ opacity:1; }

.fx-scope{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); }
.fx-scope .btn-ghost{ padding:0 8px; }
.fx-scope .period{ min-width:120px; text-align:center; font-weight:600; color:var(--text); font-size:14px; }
.fx-lbl{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.fx-sub{ font-size:12.5px; color:var(--muted); }

.fx-hero{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:12px; margin-bottom:12px; }
.fx-hero .card{ padding:20px 24px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.fx-big{ font-size:48px; line-height:1.05; font-weight:600; letter-spacing:-.01em; }
.fx-delta{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; padding:2px 8px; border-radius:999px; }
.fx-delta.up{ color:var(--ok-fg); background:var(--ok-bg); }
.fx-delta.down{ color:var(--danger-fg); background:var(--danger-bg); }
.fx-spark{ width:100%; height:56px; display:block; margin-top:auto; }
.fx-spark .all{ fill:none; stroke:var(--faint); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.fx-spark .sel{ fill:none; stroke:var(--s-ing); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.fx-spark .dot{ fill:var(--s-ing); stroke:var(--bg-elev); stroke-width:2; }
.fx-legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
.fx-legend span{ display:inline-flex; align-items:center; gap:6px; }
.fx-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.fx-cols{ width:100%; max-width:100%; height:auto; display:block; }
.fx-spark{ max-width:100%; }
.fx-cols .s-ing{ fill:var(--s-ing); } .fx-cols .s-gas{ fill:var(--s-gas); }
.fx-cols .dim{ opacity:.32; }
.fx-cols .grid{ stroke:var(--grid); stroke-width:1; } .fx-cols .base{ stroke:var(--border-strong); stroke-width:1; }
.fx-cols .ax{ fill:var(--faint); font-size:10.5px; font-family:inherit; font-variant-numeric:tabular-nums; }
.fx-cols .val{ fill:var(--text); font-size:11px; font-weight:600; font-family:inherit; }
.fx-cols rect:hover{ filter:brightness(1.18); }

.fx-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:28px; }
.fx-tile{ background:var(--bg-elev); border:1px solid var(--border); border-radius:8px; padding:16px 18px; display:flex; flex-direction:column; gap:8px; min-height:150px; min-width:0; }
.fx-tile .v{ font-size:30px; font-weight:600; line-height:1.1; }
.fx-tile .v.in{ color:var(--m-in); } .fx-tile .v.out{ color:var(--m-out); }
.fx-tile .v.inv{ color:var(--m-inv); } .fx-tile .v.dep{ color:var(--m-dep); } .fx-tile .v.tax{ color:var(--m-tax); }
.fx-tile .foot{ margin-top:auto; font-size:12px; color:var(--faint); }
.fx-bars{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--muted); }
.fx-bars .row{ display:grid; grid-template-columns:86px minmax(0,1fr) auto; align-items:center; gap:8px; }
.fx-bars .track{ height:8px; border-radius:4px; background:var(--bg-inset); overflow:hidden; }
.fx-bars .fill{ height:100%; border-radius:0 4px 4px 0; min-width:2px; }
.fx-bars .val{ color:var(--text); font-variant-numeric:tabular-nums; }
.fx-meter{ height:10px; border-radius:5px; background:rgba(25,158,112,.18); overflow:hidden; }
.fx-meter .fill{ height:100%; background:var(--s-inv); border-radius:0 5px 5px 0; }

.fx-sec{ display:flex; align-items:baseline; gap:10px; margin:0 0 10px; }
.fx-sec .count{ color:var(--muted); font-size:12.5px; }
.fx-two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin:12px 0; }
.fx-two .card{ padding:18px 20px; min-width:0; }
.fx-two h2{ margin-bottom:12px; }
.fx-hbars{ display:flex; flex-direction:column; gap:10px; }
.fx-hbars .row{ display:grid; grid-template-columns:minmax(150px,1.1fr) minmax(0,1fr) auto; align-items:center; gap:12px; font-size:13px; line-height:1.4; }
.fx-hbars .row .txt{ min-width:0; overflow-wrap:anywhere; }
.fx-hbars .track{ height:14px; position:relative; }
.fx-hbars .fill{ height:100%; background:var(--s-gas); border-radius:0 4px 4px 0; min-width:2px; }
.fx-hbars .num{ font-variant-numeric:tabular-nums; }
.fx-dl{ display:grid; grid-template-columns:minmax(0,1fr) auto; row-gap:8px; column-gap:16px; font-size:13.5px; }
.fx-dl dt{ color:var(--muted); margin:0; } .fx-dl dd{ margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.fx-dl .total{ border-top:1px solid var(--border-strong); padding-top:8px; font-weight:600; color:var(--text); }
.fx-dl .total dd{ font-weight:700; }
.fx-inv-list{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px 14px; font-size:13px; }
.fx-inv-list .h{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; }
.fx-inv-list .n{ text-align:right; font-variant-numeric:tabular-nums; }
.fx-stack{ display:flex; height:10px; border-radius:5px; overflow:hidden; gap:2px; margin-top:12px; }
.fx-stack .a{ background:var(--s-inv); } .fx-stack .b{ background:var(--bg-inset); flex:1; }

@media (max-width:900px){ .fx-hero{ grid-template-columns:minmax(0,1fr); } .fx-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } .fx-two{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:520px){ .fx-tiles{ grid-template-columns:minmax(0,1fr); } .fx-big{ font-size:40px; } }

/* ---------- Auth (login / recuperar / reset / cambiar contraseña) ---------- */
.auth-card{ max-width:400px; margin:56px auto; }
.auth-card h1{ margin:0 0 6px; }
.auth-form{ display:flex; flex-direction:column; gap:14px; margin-top:18px; }
.auth-form label{ font-size:13px; color:var(--muted); }
.auth-form input{ width:100%; margin-top:5px; }
.auth-form .btn{ margin-top:6px; width:100%; justify-content:center; height:36px; }
.auth-alt{ margin-top:16px; font-size:14px; }
.auth-alt a{ color:var(--accent); text-decoration:none; }
.auth-alt a:hover{ text-decoration:underline; }
.auth-error{ background:var(--danger-bg); color:var(--danger-fg); border:1px solid var(--danger-fill); border-radius:6px; padding:10px 12px; font-size:14px; margin-top:12px; }
.auth-ok{ background:var(--ok-bg); color:var(--ok-fg); border:1px solid var(--ok-fill); border-radius:6px; padding:10px 12px; font-size:14px; margin-top:12px; }
/* Mostrar/ocultar contraseña */
.pw-field{ position:relative; display:block; margin-top:5px; }
.pw-field input{ margin-top:0; padding-right:42px; }
.pw-toggle{ position:absolute; top:0; right:0; height:100%; width:38px; display:flex;
  align-items:center; justify-content:center; padding:0; margin:0; background:transparent;
  border:none; color:var(--muted); cursor:pointer; }
.pw-toggle:hover{ color:var(--text); }
.pw-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; border-radius:6px; }
.pw-toggle svg{ width:18px; height:18px; display:block; }
.pw-toggle .eye-off{ display:none; }
.pw-toggle.on .eye-open{ display:none; }
.pw-toggle.on .eye-off{ display:block; }

/* Selector Tipo (Gasto/Ingreso) del alta unificada de apunte. Radios ocultos
   controlan la pestaña activa y muestran/ocultan el bloque de justificante
   (solo Gasto) sin JavaScript, via selectores de hermano general (~). */
.seg-radio{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.seg{ display:inline-flex; }
.seg-btn{ padding:7px 20px; font-size:13px; font-weight:500; line-height:1; cursor:pointer;
  background:var(--bg-elev); border:1px solid var(--border-strong); color:var(--text);
  margin-left:-1px; user-select:none; }
.seg-btn:first-of-type{ border-radius:6px 0 0 6px; margin-left:0; }
.seg-btn:last-of-type{ border-radius:0 6px 6px 0; }
#tipo-gasto:checked ~ .seg-field .seg-btn[for="tipo-gasto"],
#tipo-ingreso:checked ~ .seg-field .seg-btn[for="tipo-ingreso"]{
  background:var(--accent); color:var(--accent-text); border-color:var(--accent); font-weight:600; }
.seg-radio:focus-visible ~ .seg-field .seg-btn{ outline:2px solid var(--accent); outline-offset:2px; }
.justif-only{ display:none; }
#tipo-gasto:checked ~ .justif-only{ display:block; }

/* ============================================================
   Componentes del rediseño UX (Fable) — importes, cobros, extracto
   ============================================================ */
/* Importe con desglose IVA: cifra principal grande + "sin IVA X" debajo. */
.amt{ display:inline-flex; flex-direction:column; align-items:flex-end; line-height:1.2; }
.amt-main{ font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--text); }
.amt-main.pos{ color:var(--m-in); } .amt-main.neg{ color:var(--m-out); }
.amt-sub{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.amt.left{ align-items:flex-start; }

/* Mes en letras (columna "Pagado hasta" de Cobros v2). */
.mes-l1{ font-size:15px; font-weight:600; }
.cell-l2.deuda{ color:var(--danger-fg); font-variant-numeric:tabular-nums; }

/* Botón que nombra el mes: "Cobrar oct 2026". */
.btn-mes b{ font-weight:700; }

/* Chip-filtro con 3ª línea de suma (deuda total en "Deben"). */
.chip .sum{ font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--danger-fg); }

/* Separador y ayuda dentro del menú avanzado «⋯». */
.menu-sep{ height:1px; margin:4px 6px; background:var(--border); }
details.menu[open] > .menu-body{ min-width:250px; padding:6px; }
.menu-head{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--faint); padding:4px 8px 6px; }
/* La regla generica `.menu-body button` aplanaba los .btn (fondo/borde a cero) y
   el «Guardar» salia como texto suelto. Restaurar el aspecto de boton aqui. */
.menu-body .btn{ display:inline-flex; width:auto; text-align:center; border-radius:6px; }
.menu-body .btn-secondary{ background:var(--bg-elev); border:1px solid var(--border-strong); color:var(--text); }
.menu-body .btn-secondary:hover{ background:var(--bg-hover); }
.menu-body .corr{ padding:6px 8px 2px; }
.menu-body .corr-lbl{ font-size:11.5px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.menu-body .corr-row{ display:flex; gap:6px; align-items:center; }
.menu-body .corr-row select{ flex:1; min-width:0; height:32px; padding:0 8px; }
.menu-body .corr-save{ width:100%; justify-content:center; margin-top:8px; }
.menu-body .hint{ padding:6px 0 2px; }

/* Feedback tras cobrar. */
tr.just-done{ animation:just-done 1.2s ease-out; }
@keyframes just-done{ from{ background:var(--ok-bg); } to{ background:transparent; } }
.just-done-msg{ font-size:12.5px; color:var(--ok-fg); display:inline-flex; align-items:center; gap:6px; }
.just-done-msg .link{ background:none; border:0; color:var(--accent); cursor:pointer; font-size:12.5px; padding:0; text-decoration:underline; }

/* Franja resumen tipo banco (Extracto). */
.ex-summary{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
.ex-summary .mini{ background:var(--bg-inset); border:1px solid var(--border); border-radius:8px; padding:10px 16px; min-width:120px; }
.ex-summary .mini .k{ font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.ex-summary .mini .val{ font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:2px; }
.ex-summary .mini .val.in{ color:var(--m-in); } .ex-summary .mini .val.out{ color:var(--m-out); }
.ex-summary .mini .val.pos{ color:var(--m-in); } .ex-summary .mini .val.neg{ color:var(--danger-fg); }
.ex-summary .mini .sub{ font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }

/* Cabecera de grupo (mes) en la tabla del extracto. */
tr.grp td{ background:var(--bg-inset); font-size:13px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); padding:8px 16px; }
tr.grp .grp-sum{ float:right; font-weight:500; text-transform:none; letter-spacing:normal; }
tr.grp .grp-sum .in{ color:var(--m-in); } tr.grp .grp-sum .out{ color:var(--m-out); }

/* Pill de contexto ("Bases sin IVA", "Solo declarado", "Beta"). */
.ctx-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:3px 10px; border-radius:999px; background:var(--neutral-bg); color:var(--muted); }
.ctx-pill.warn{ background:var(--warn-bg); color:var(--warn-fg); }

/* Casilla "ingreso esperado / mes" (MRR) en la cabecera de Cobros. */
.mrr-box{ margin-left:auto; text-align:left; background:var(--bg-inset); border:1px solid var(--border);
  border-radius:8px; padding:8px 16px; min-width:180px; }
.mrr-box .k{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.mrr-box .amt{ margin:2px 0; }
.mrr-box .amt-main{ font-size:22px; color:var(--m-in); }
.mrr-box .amt-sub{ font-size:12px; }
.mrr-box .mrr-n{ font-size:11.5px; color:var(--faint); }
@media (max-width:560px){ .mrr-box{ margin-left:0; width:100%; } .page-head{ flex-wrap:wrap; } }

/* ============================================================
   Mapa de la parcela (/mapa) — plano SVG norte arriba + overlay por :target
   ============================================================ */
.s-libre{ --s-fill:var(--st-libre-fill); --s-fg:var(--text); --s-dot:var(--st-baja); }
.s-aldia{ --s-fill:var(--st-aldia-fill); --s-fg:var(--on-fill); --s-dot:var(--st-aldia); }
.s-debe{ --s-fill:var(--st-debe-fill); --s-fg:var(--on-fill); --s-dot:var(--st-debe); }
.s-adelantado{ --s-fill:var(--st-adelantado-fill); --s-fg:var(--on-fill); --s-dot:var(--st-adelantado); }
.s-sindato{ --s-fill:var(--st-sindato-fill); --s-fg:var(--on-accent); --s-dot:var(--st-sindato); }

.mapa-head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin-bottom:8px; }
.mapa-head .count{ color:var(--muted); font-size:12.5px; }
.mapa-head .mapa-ver{ margin-left:auto; font-size:13px; }
.mapa-wrap{ max-width:640px; margin:0 auto 10px; background:var(--bg-inset);
  border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.mapa-wrap:focus{ outline:none; }
.mapa-svg{ display:block; width:100%; height:auto; }
.m-vecino{ fill:var(--map-bg); }
.m-veg{ fill:var(--map-veg); }
.m-parcela{ fill:var(--map-parcela-v1); }
.m-terraza{ fill:var(--map-arena); }
.m-muro{ fill:none; stroke:var(--map-muro-v1); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
.m-camino{ fill:var(--map-camino); stroke:var(--map-camino-line); stroke-width:1; }
.m-camino-eje{ fill:none; stroke:var(--map-eje); stroke-width:1.2; stroke-dasharray:9 7; }
.m-valla{ fill:none; stroke:var(--map-valla); stroke-width:1.6; stroke-dasharray:4 3; }
.m-tramo{ fill:none; stroke:var(--map-rambla); stroke-width:3; stroke-linecap:round; }
.m-puerta{ fill:none; stroke:var(--map-puerta); stroke-width:4.2; stroke-linecap:round; }
.m-rambla-banda{ fill:none; stroke:var(--map-rambla); stroke-width:16; stroke-linecap:round; opacity:.13; }
.m-rambla{ fill:none; stroke:var(--map-rambla); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.m-et{ font-size:11px; fill:var(--muted); letter-spacing:.08em; }
.m-et-p{ fill:var(--info-fg); }
.m-et-r{ fill:var(--map-rambla); }
.m-norte path{ fill:var(--muted); } .m-norte text{ font-size:12px; font-weight:700; fill:var(--muted); }
.slot{ cursor:pointer; outline:none; }
.slot polygon{ fill:var(--s-fill); stroke:var(--slot-stroke); stroke-width:1.4; stroke-linejoin:round; }
.slot:hover polygon, .slot:focus polygon{ stroke:var(--on-fill); stroke-width:2; }
.slot-n{ font-size:14px; font-weight:700; fill:var(--s-fg); pointer-events:none; }

.mapa-leyenda{ display:flex; flex-wrap:wrap; gap:4px 14px; justify-content:center;
  font-size:12.5px; color:var(--muted); margin:0 0 10px; }
.mapa-leyenda span{ display:inline-flex; align-items:center; gap:6px; }
.mapa-leyenda i, .mapa-card h2 i{ width:10px; height:10px; border-radius:3px;
  background:var(--s-fill); display:inline-block; flex:none; }

/* Overlay: capa a pantalla completa con fondo que cierra + hoja inferior (centrada en escritorio). */
.mapa-card{ display:none; }
.mapa-card:target{ display:flex; position:fixed; inset:0; z-index:80; align-items:flex-end; justify-content:center; }
.mapa-card .fondo{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.mapa-card .hoja{ position:relative; width:100%; max-width:420px; padding:16px 18px 20px;
  background:var(--bg-elev); border:1px solid var(--border-strong); border-bottom:none;
  border-radius:14px 14px 0 0; box-shadow:0 -8px 28px rgba(0,0,0,.5); max-height:80vh; overflow:auto; }
@media (min-width:700px){
  .mapa-card:target{ align-items:center; }
  .mapa-card .hoja{ border-bottom:1px solid var(--border-strong); border-radius:14px; }
}
.mapa-card h2{ display:flex; align-items:center; gap:8px; margin-bottom:10px; padding-right:40px; }
.mapa-card h2 .est{ margin-left:auto; font-size:12.5px; font-weight:500; color:var(--muted); }
.mapa-card .cerrar{ position:absolute; top:4px; right:6px; width:44px; height:44px; display:flex;
  align-items:center; justify-content:center; font-size:26px; color:var(--muted); }
.mapa-card dl{ display:grid; grid-template-columns:auto 1fr; gap:8px 14px; margin:0 0 14px; }
.mapa-card dt{ color:var(--muted); font-size:12.5px; }
.mapa-card dd{ margin:0; }
.mapa-card .libre-txt{ font-size:16px; margin:4px 0 8px; color:var(--muted); }
.mapa-card .hoja-enlaces{ margin:12px 0 0; font-size:13px; text-align:center; }
.btn-block{ width:100%; justify-content:center; height:44px; }

/* ---------- Listados (/contenedores, /clientes) ---------- */
.cont-n{ display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:26px;
  padding:0 6px; border-radius:6px; background:var(--s-fill); color:var(--s-fg); font-weight:700; }
.cont-n:hover{ color:var(--s-fg); filter:brightness(1.15); }
.badge{ white-space:nowrap; }
details.bajas{ margin-top:18px; }
details.bajas > summary{ cursor:pointer; color:var(--muted); padding:8px 2px; font-size:13px; }
details.bajas[open] > summary{ margin-bottom:8px; }

/* ============================================================
   Móvil (360-400 px): navegación, botones táctiles, tablas sin desbordar
   ============================================================ */
@media (max-width:700px){
  main{ padding:14px 12px 88px; }
  .topbar{ height:auto; flex-wrap:wrap; gap:6px 10px; padding:8px 12px; position:static; }
  .brand{ flex:none; }
  .nav1{ order:3; flex:1 0 100%; }
  .nav1 a{ display:flex; align-items:center; min-height:40px; padding:7px 12px; }
  .mapa-wrap{ overflow-x:auto; }
  .mapa-svg{ min-width:500px; }
  .verifactu{ display:none; }
  details.mas{ margin-left:auto; }
  details.mas > summary{ display:flex; align-items:center; min-height:40px; }
  .subnav{ padding:0 8px; overflow-x:auto; position:static; height:44px; }
  .subnav a{ flex:none; }
  .page-head{ flex-wrap:wrap; }
  .btn{ min-height:40px; }
  .btn-sm{ height:40px; min-width:40px; justify-content:center; }
  input:not([type=radio]):not([type=checkbox]), select{ height:42px; font-size:16px; }  /* 16px evita el zoom de iOS */
  .grid-2{ grid-template-columns:1fr; }
  .form-actions .btn{ flex:1; justify-content:center; }
  .card{ padding:16px; }
  .chip{ min-width:0; flex:1 1 40%; }
  .filter-bar input[type="search"], .filter-bar input.search{ width:100%; }
  .table td.txt, .table th.txt, .table td.txt-lg, .table th.txt-lg, .table td.txt-sm, .table th.txt-sm{ min-width:0; }

  /* Cobros: cada fila pasa a tarjeta (la tabla no desborda) */
  .table.stack, .table.stack tbody{ display:block; border:none; background:none; }
  .table.stack thead{ display:none; }
  .table.stack tr{ display:grid; grid-template-columns:1fr auto; gap:4px 10px; padding:12px;
    margin-bottom:10px; background:var(--bg-elev); border:1px solid var(--border); border-radius:8px; }
  .table.stack tr.empty-row{ display:block; }
  .table.stack td{ display:block; padding:0; border:none; width:auto; white-space:normal; }
  .table.stack td:nth-child(2){ text-align:right; }
  .table.stack td:nth-child(3)::before{ content:"Pagado hasta "; color:var(--muted); font-family:inherit; font-size:12px; }
  .table.stack td:nth-child(3) .mes-l1{ display:inline; font-size:14px; }
  .table.stack td:nth-child(4){ text-align:right; }
  .table.stack td:nth-child(5){ grid-column:1 / -1; margin-top:6px; }
  .table.stack .row-actions{ justify-content:flex-start; flex-wrap:wrap; }
  details.menu[open] > .menu-body{ position:fixed; left:12px; right:12px; bottom:76px; top:auto;
    max-height:60vh; overflow:auto; z-index:70; min-width:0; box-shadow:0 -8px 28px rgba(0,0,0,.55); }
  .tblwrap{ overflow:visible; }
  th.sortable a{ min-height:32px; }
  .chip{ min-height:48px; }
  .form-actions.sticky{ position:sticky; bottom:0; z-index:10; background:var(--bg);
    padding:10px 0; border-top:1px solid var(--border); margin-top:16px; }
  #fx-filtros .fx-lbl{ flex:0 0 100%; margin-top:6px; }
  #fx-filtros .btn-group{ display:flex; width:100%; }
  #fx-filtros .btn-group .btn{ flex:1; justify-content:center; }
  .fx-cols .ax{ font-size:11px; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td.acc .row-actions{ width:100%; justify-content:flex-start; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td[data-l].wide{ display:block; text-align:left; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td[data-l].wide::before{ display:block; margin-bottom:2px; }

  /* Listados (/clientes, /contenedores): cada fila pasa a tarjeta con etiquetas */
  .table:is(.stack-l,:has(td[data-l]):not(.stack)), .table:is(.stack-l,:has(td[data-l]):not(.stack)) tbody{ display:block; border:none; background:none; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) thead{ display:none; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) tr{ display:block; padding:10px 12px; margin-bottom:10px; background:var(--bg-elev);
    border:1px solid var(--border); border-radius:8px; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td{ display:flex; justify-content:space-between; gap:12px; align-items:baseline;
    padding:4px 0; border:none; width:auto; text-align:right; white-space:normal; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td[data-l]::before{ content:attr(data-l); color:var(--muted); font-size:12px; text-align:left; flex:none; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td.acc{ padding-top:8px; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td[data-l="Cliente"]{ display:block; text-align:left; font-size:15px; padding-bottom:6px; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td[data-l="Cliente"]::before{ display:none; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td[data-l="Nº"]{ justify-content:flex-start; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td[data-l="Nº"]::before{ display:none; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td > div{ text-align:right; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td[data-l="Cliente"] > div{ text-align:left; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) .cell-l1.mono{ white-space:nowrap; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) tr.empty-row td{ display:block; text-align:left; }
}

/* Paquete A — navegación: usuario ⋯, subnav, barra inferior móvil, toast */
html{ scroll-padding-top:60px; }

/* Menú de usuario (⋯) */
details.usermenu{ position:relative; margin-left:auto; }
details.usermenu > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  min-width:40px; min-height:40px; border-radius:6px; color:var(--muted); font-size:20px; line-height:1; }
details.usermenu > summary::-webkit-details-marker{ display:none; }
details.usermenu > summary:hover, details.usermenu[open] > summary{ background:var(--bg-hover); color:var(--text); }
.usermenu-body{ position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:210px; padding:6px;
  background:var(--bg-elev); border:1px solid var(--border-strong); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.45); }
.usermenu-body a{ display:block; padding:11px 12px; border-radius:6px; color:var(--text); font-size:14px; text-decoration:none; }
.usermenu-body a:hover{ background:var(--bg-hover); }
.usermenu-body a.salir{ color:var(--danger-fg); border-top:1px solid var(--border); border-radius:0 0 6px 6px; margin-top:4px; }
.nav1{ flex:0 1 auto; }

/* Barra inferior: solo móvil */
.tabbar{ display:none; }

/* Toast de errores htmx */
.toast{ position:fixed; left:12px; right:12px; bottom:20px; z-index:90; max-width:520px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px;
  background:var(--bg-elev); border:1px solid var(--danger-fg); border-radius:8px; color:var(--text);
  font-size:14px; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.toast[hidden]{ display:none; }
.toast button{ flex:none; min-height:36px; padding:6px 12px; border:1px solid var(--border-strong); border-radius:6px;
  background:var(--bg-hover); color:var(--text); font-size:14px; cursor:pointer; }

@media (max-width:699px){
  html{ scroll-padding-top:96px; }
  /* Topbar compacta y sticky (44 px); la navegación N1 pasa a la tabbar */
  .topbar{ position:sticky; top:0; z-index:50; height:44px; flex-wrap:nowrap; padding:0 12px; gap:8px; }
  .nav1{ display:none; }
  details.usermenu{ margin-left:auto; }
  details.usermenu > summary{ min-height:44px; }
  /* Subnav: pestañas desplazables, sticky bajo la topbar */
  .subnav{ position:sticky; top:44px; z-index:40; height:44px; padding:0 8px; overflow-x:auto; scrollbar-width:none; }
  .subnav::-webkit-scrollbar{ display:none; }
  .subnav a{ flex:none; white-space:nowrap; }
  main{ padding-bottom:80px; }
  footer{ padding-bottom:72px; }
  body.has-nav .toast{ bottom:calc(68px + env(safe-area-inset-bottom)); }

  .tabbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70; height:56px;
    padding-bottom:env(safe-area-inset-bottom); box-sizing:content-box;
    background:var(--bg-elev); border-top:1px solid var(--border); }
  .tabbar > a, .tabbar > details.plus{ flex:1 1 0; min-width:0; }
  .tabbar > a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    color:var(--muted); text-decoration:none; font-size:11px; }
  .tabbar > a.on{ color:var(--accent); font-weight:600; }
  .tabbar > a.on svg{ stroke:var(--accent); }
  details.plus{ position:static; display:flex; align-items:center; justify-content:center; }
  details.plus > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:50%; background:var(--accent); color:var(--accent-text); }
  details.plus > summary::-webkit-details-marker{ display:none; }
  .plus-sheet{ position:fixed; left:12px; right:12px; bottom:calc(68px + env(safe-area-inset-bottom)); z-index:85;
    padding:6px; background:var(--bg-elev); border:1px solid var(--border-strong); border-radius:12px;
    box-shadow:0 -8px 24px rgba(0,0,0,.5); }
  .plus-sheet a{ display:flex; align-items:center; min-height:48px; padding:0 14px; border-radius:8px;
    color:var(--text); font-size:15px; text-decoration:none; }
  .plus-sheet a:hover{ background:var(--bg-hover); }
}

/* Paquete B: Cobros unificado (cliente / contenedor / mapa). Carga despues de style.css. */

/* Conmutador de vista (Por cliente / Por contenedor) */
.seg-vista{ display:inline-flex; margin-left:auto; }
.seg-vista .seg-link{ padding:8px 16px; min-height:40px; display:inline-flex; align-items:center;
  font-size:13px; font-weight:500; color:var(--muted); background:var(--bg-elev);
  border:1px solid var(--border-strong); margin-left:-1px; }
.seg-vista .seg-link:first-child{ border-radius:6px 0 0 6px; margin-left:0; }
.seg-vista .seg-link:last-child{ border-radius:0 6px 6px 0; }
.seg-vista .seg-link.active{ background:var(--bg-hover); color:var(--text); border-color:var(--accent); position:relative; z-index:1; }

/* Tira "Hoy": deuda, facturas pendientes e ingreso esperado en una linea */
.hoy{ display:flex; flex-wrap:wrap; gap:4px 18px; align-items:center; margin:0 0 12px; font-size:13.5px; color:var(--muted); }
.hoy b{ color:var(--text); font-variant-numeric:tabular-nums; }
.hoy .hoy-i{ display:inline-flex; align-items:center; gap:6px; }
.hoy .hoy-i > i{ width:8px; height:8px; border-radius:50%; background:var(--ok-fg); }
.hoy .hoy-debe > i{ background:var(--danger-fg); }
.hoy .hoy-debe, .hoy .hoy-debe b{ color:var(--danger-fg); }

/* Vista por contenedor */
.table .cell-l1 .cont-n{ margin-right:8px; vertical-align:middle; }
.pago-unico{ color:var(--warn-fg, var(--muted)); }
tr.cont-libre{ --estado-color:var(--faint); }
tr.cont-libre .muted{ color:var(--muted); }
@media (max-width:700px){
  /* cabecera compacta: la primera tarjeta cobrable debe verse entera sin scroll */
  .chips{ gap:6px; margin-bottom:10px; flex-wrap:nowrap; }
  .chips .chip{ flex:1 1 0; min-width:0; min-height:0; padding:7px 8px; }
  .chips .chip .num{ font-size:17px; }
  .chips .chip .lbl{ font-size:10px; letter-spacing:.02em; }
  .chips .chip .sum{ display:none; }  /* la deuda ya sale en la tira "Hoy" */
  .hoy{ margin-bottom:8px; font-size:13px; }
  .seg-vista{ margin-left:0; width:100%; }
  .seg-vista .seg-link{ flex:1; justify-content:center; }
  .table.stack tr.cont-libre td.libre-acc{ grid-column:1 / -1; margin-top:6px; }
  .table.stack tr.cont-libre td.libre-acc::before{ content:none; }
  .table.stack tr.cont-libre td.libre-acc .btn{ width:100%; justify-content:center; }
}

/* WhatsApp / enlaces de accion */
a.wa{ color:var(--ok-fg); }
.menu-body a{ display:block; padding:8px 12px; }
.just-done-msg a.link{ color:var(--accent); text-decoration:underline; }

/* Mapa: overlay */
.mapa-card .ok-msg{ font-size:13px; color:var(--ok-fg); margin:0 0 10px; display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center; }
.mapa-card .ok-msg form.inline{ display:inline; }
.mapa-card .ok-msg .link{ background:none; border:0; padding:0; color:var(--accent); cursor:pointer; text-decoration:underline; font-size:13px; }
.mapa-card form + form{ margin-top:8px; }
.mapa-card .btn-block{ min-height:44px; }
.mapa-card .compra{ margin-top:14px; padding-top:10px; border-top:1px solid var(--border); font-size:12.5px; color:var(--muted); }
.mapa-card .compra .k{ text-transform:uppercase; letter-spacing:.06em; font-weight:600; margin-right:4px; }
.slot polygon.hit{ fill:transparent; stroke:none; }
@media (max-width:700px){
  .mapa-svg{ min-width:680px; }  /* slots mas grandes al tacto; el plano ya hace scroll horizontal */
}

/* Paquete C — facturas, clientes y formularios. Solo aqui; no editar style.css. */

/* Checkbox/radio nativos: tamaño fijo, alineados con su etiqueta */
input[type="checkbox"], input[type="radio"]{ width:18px; height:18px; flex:none; margin:0; accent-color:var(--accent); }
.field.check-inline{ flex-direction:row; align-items:center; gap:8px; }

/* ---- Facturas: panel Generar como seccion estatica ---- */
details.gen{ margin:0 0 16px; background:var(--bg-elev); border:1px solid var(--border); border-radius:8px; }
details.gen > summary.gen-sum{ list-style:none; cursor:pointer; padding:12px 14px; font-weight:600; font-size:14px; }
details.gen > summary.gen-sum::-webkit-details-marker{ display:none; }
details.gen > summary.gen-sum::before{ content:"▸ "; color:var(--muted); }
details.gen[open] > summary.gen-sum::before{ content:"▾ "; }
details.gen > .inline-panel{ position:static; width:auto; padding:0 14px 14px; }
.gen .filter-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:12px; }
.pie-verifactu{ margin:20px 0 0; text-align:center; }
.pill-vf{ display:inline-block; padding:3px 12px; font-size:12px; color:var(--muted);
  border:1px solid var(--border-strong); border-radius:999px; }

/* ---- Clientes: conmutador facturable y menu de fila ---- */
.sw-btn{ gap:6px; }
.sw-dot{ width:8px; height:8px; border-radius:50%; background:var(--faint); display:inline-block; }
.sw-dot.on{ background:var(--ok-fg); }
.menu-body a{ display:block; width:100%; padding:7px 10px; font-size:13px; color:var(--text); border-radius:4px; }
.menu-body a:hover{ background:var(--bg-hover); }
td .cell-l1{ color:var(--text); }
a.cell-l1:hover{ color:var(--accent); }

/* ---- Alta: segmento nuevo/existente y rejilla de contenedores ---- */
.seg-modo, .seg-amb{ display:flex; flex-wrap:wrap; position:relative; }
.seg-modo .seg-btn, .seg-amb .seg-btn{ flex:1; min-height:42px; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:8px 12px; }
.seg-modo .seg-radio:checked + .seg-btn, .seg-amb .seg-radio:checked + .seg-btn{
  background:var(--accent); color:var(--accent-text); border-color:var(--accent); font-weight:600; }
.seg-modo .seg-radio:focus-visible + .seg-btn, .seg-amb .seg-radio:focus-visible + .seg-btn{ outline:2px solid var(--accent); outline-offset:2px; }
#wrap-sel-cliente{ margin-top:8px; }
.cont-grid{ display:grid; grid-template-columns:repeat(auto-fill,44px); gap:8px; margin:4px 0; }
.cont-chip{ position:relative; width:44px; height:44px; cursor:pointer; }
.cont-chip input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; }
.cont-chip .cont-n{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:8px;
  font-weight:600; font-size:15px; border:2px solid var(--border-strong); background:var(--bg-inset); color:var(--text); }
.cont-chip.libre .cont-n{ border-color:var(--border-strong); background:var(--bg-inset); }
.cont-chip.ocupado .cont-n{ border:2px dashed var(--border); background:transparent; color:var(--faint); opacity:.7; }
.cont-chip input:checked + .cont-n{ background:var(--accent); border-color:var(--accent); color:var(--accent-text); }
.cont-chip input:focus-visible + .cont-n{ outline:2px solid var(--accent); outline-offset:2px; }
.lg{ display:inline-block; width:10px; height:10px; border-radius:2px; vertical-align:middle; }
.lg.libre{ background:var(--st-libre-fill); } .lg.ocupado{ background:transparent; border:1px dashed var(--faint); }
#lista-sust .fila-trastero{ margin-top:6px; padding:8px 10px; background:var(--bg-inset); border:1px solid var(--border); border-radius:6px; }

/* ---- Movimiento ---- */
.calc-iva{ margin:-6px 0 14px; }

/* ---- Extracto: filtros ---- */
.ex-filtros{ margin-bottom:12px; }
.ex-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; }
.ex-grid .ex-cli{ grid-column:span 1; }
.ex-filtros .field{ margin-bottom:0; }
@media (max-width:1100px){ .ex-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---- Barra de acciones fija en movil ---- */
@media (max-width:700px){
  .form-actions.sticky{ position:sticky; bottom:56px; z-index:10; margin:16px -16px 0; padding:10px 16px;
    background:var(--bg); border-top:1px solid var(--border); }
  .gen-actions .btn, .confirm-actions .btn{ width:100%; min-height:44px; justify-content:center; }
  .gen-actions{ position:sticky; bottom:60px; z-index:10; margin:12px -14px 0; padding:10px 14px; background:var(--bg-elev); border-top:1px solid var(--border); }
  input, select{ min-height:42px; }
  input[type="checkbox"], input[type="radio"]{ min-height:0; }
  input[type="file"]{ height:auto; padding:8px 10px; }
  .ex-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ex-grid .ex-cli, .ex-grid .ex-acc{ grid-column:1 / -1; }
  .seg-amb{ flex-direction:column; }
  .seg-amb .seg-btn{ border-radius:0; margin-left:0; margin-top:-1px; }
  .seg-amb .seg-btn:first-of-type{ border-radius:6px 6px 0 0; margin-top:0; }
  .seg-amb .seg-btn:last-of-type{ border-radius:0 0 6px 6px; }

  /* tablas-tarjeta: acciones a fila completa, sin rotulo en "Acciones" */
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td.acc[data-l]::before{ display:none; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td.acc .row-actions{ width:100%; justify-content:flex-start; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td.acc .row-actions .btn{ flex:1; justify-content:center; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td.col-medio, .table:is(.stack-l,:has(td[data-l]):not(.stack)) td.col-just:not(:has(a)){ display:none; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td.vacio{ display:none; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td.wide{ display:block; text-align:left; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td.wide::before{ display:block; margin-bottom:2px; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td[data-l="Fecha"]{ justify-content:flex-start; font-weight:600; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td[data-l="Fecha"]::before{ display:none; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td.center[data-l="Incluir"]{ justify-content:flex-start; }
  /* pie de totales */
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) tfoot, .table:is(.stack-l,:has(td[data-l]):not(.stack)) tfoot tr{ display:block; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) tfoot tr{ padding:10px 12px; background:var(--bg-elev); border:1px solid var(--border); border-radius:8px; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) tfoot td{ display:flex; justify-content:space-between; padding:2px 0; border:none; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) tfoot td:empty{ display:none; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) tfoot td[data-l]::before{ content:attr(data-l); color:var(--muted); font-size:12px; }
  .table:is(.stack-l,:has(td[data-l]):not(.stack)) td[colspan]{ display:block; }
}

/* Ganchos de JS/plantillas sin estilo propio (documentados para que el test de clases no los pierda) */
.aviso-libera, .gen-tabla, .seg-tipo, .tf-l, .wrap-sust{ }

/* ============================================================
   3 · COMPONENTES CANÓNICOS c-*  (spec §2.3). Todo consume tokens, nunca hex.
   ============================================================ */

/* Números siempre tabulares; etiqueta de campo/sección */
.c-num, .c-amt, .c-paid, .c-debt{ font-variant-numeric:tabular-nums; }
.c-label{ font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.c-title{ font-size:var(--fs-2xl); font-weight:600; margin:0; }

/* Tablas con data-l: tarjeta en < 700 px (generalización de .stack-l; ver bloque móvil) */
.table td[data-l="Saldo"]{ color:var(--muted); font-size:var(--fs-sm); }

/* ---- 2.3.1 Tarjeta base ---- */
.c-card{ background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--sp-3); margin-bottom:10px; box-shadow:inset 3px 0 0 var(--st-color,transparent); }
.c-card.st-debe{ --st-color:var(--st-debe); } .c-card.st-aldia{ --st-color:var(--st-aldia); }
.c-card.st-adelantado{ --st-color:var(--st-adelantado); } .c-card.st-sindato{ --st-color:var(--st-sindato); }
.c-card.st-libre{ --st-color:var(--st-libre); opacity:.85; } .c-card.st-baja{ --st-color:var(--st-baja); opacity:.6; }
.c-card__head{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--sp-2) var(--sp-3); align-items:start; }
.c-card__id{ min-width:0; }
.c-card__name{ font-size:var(--fs-lg); font-weight:600; color:var(--text); overflow-wrap:anywhere; }
.c-card__name:hover{ color:var(--accent); }
.c-card__sub{ font-size:var(--fs-xs); color:var(--muted); margin-top:2px; }
.c-card__state{ text-align:right; }
.c-debt{ font-size:var(--fs-xs); color:var(--st-debe); margin-top:3px; }
.c-card__rows{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-1) var(--sp-3); margin:var(--sp-2) 0; }
.c-row{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-2); font-size:var(--fs-sm); }
.c-row__k{ color:var(--muted); }
.c-row__v{ font-variant-numeric:tabular-nums; text-align:right; }
.c-card__actions{ padding:0; text-align:left; font-size:inherit; color:inherit; display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; margin-top:var(--sp-2); }
.c-card__actions > details{ margin-left:auto; }
.c-card__rows--1{ grid-template-columns:1fr; }
/* móvil: el estado baja a su propia fila (nombre y contacto respiran) y las filas van a 1 columna */
@media (max-width:699px){
  .c-card__head{ grid-template-columns:auto minmax(0,1fr); }
  .c-card__state{ grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:var(--sp-2); text-align:left; }
  .c-card__state .c-debt{ margin-top:0; }
  .c-card__rows{ grid-template-columns:1fr; }
  .c-card__actions{ flex-wrap:nowrap; gap:var(--sp-1); }
  .c-card__actions > .c-btn{ flex:1 1 auto; min-width:0; white-space:normal; line-height:1.2; padding:6px 10px; text-align:center; }
}
@media (min-width:700px){
  .c-card{ padding:var(--sp-4); }
  .c-card__rows{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .c-card__rows--1{ grid-template-columns:1fr; }
}

/* ---- 2.3.2 Chip de nº ---- */
.c-chips{ display:flex; gap:var(--sp-1); flex-wrap:wrap; }
.c-chip-n{ display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 7px;
  border-radius:var(--r-sm); font-weight:700; font-size:var(--fs-md); color:var(--on-fill);
  background:var(--st-fill,var(--st-libre-fill)); font-variant-numeric:tabular-nums; }
a.c-chip-n:hover{ color:var(--on-fill); filter:brightness(1.15); }
.c-chip-n.st-debe{ --st-fill:var(--st-debe-fill); } .c-chip-n.st-aldia{ --st-fill:var(--st-aldia-fill); }
.c-chip-n.st-adelantado{ --st-fill:var(--st-adelantado-fill); }
.c-chip-n.st-sindato{ --st-fill:var(--st-sindato-fill); color:var(--on-accent); }
.c-chip-n.st-libre{ --st-fill:var(--st-libre-fill); color:var(--text); }
.c-chip-n.st-baja{ --st-fill:var(--st-baja); }
.c-chip-n--dim{ opacity:.45; }
.c-chip-n--lg{ min-width:var(--tap); height:var(--tap); font-size:var(--fs-xl); border-radius:var(--r-md); }

/* ---- 2.3.3 Badge de estado ---- */
.c-badge{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 10px; border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:500; white-space:nowrap;
  background:var(--st-bg,var(--st-libre-bg)); color:var(--st-fg,var(--muted)); }
.c-badge::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.c-badge.st-debe{ --st-bg:var(--st-debe-bg); --st-fg:var(--st-debe); }
.c-badge.st-aldia{ --st-bg:var(--st-aldia-bg); --st-fg:var(--st-aldia); }
.c-badge.st-adelantado{ --st-bg:var(--st-adelantado-bg); --st-fg:var(--st-adelantado); }
.c-badge.st-sindato{ --st-bg:var(--st-sindato-bg); --st-fg:var(--st-sindato); }
.c-badge.st-libre{ --st-bg:var(--st-libre-bg); --st-fg:var(--st-libre); }
.c-badge.st-baja{ --st-bg:var(--st-baja-bg); --st-fg:var(--st-baja); }
/* tipo de cliente, ámbito A/B, nº de factura: identificadores, nunca semáforo */
.c-badge--neutral{ --st-bg:var(--st-libre-bg); --st-fg:var(--muted); }
.c-badge--neutral::before{ content:none; }

/* ---- 2.3.4 Importe y "pagado hasta" ---- */
.c-amt{ display:inline-flex; flex-direction:column; align-items:flex-end; line-height:1.2; }
.c-amt__main{ font-size:14.5px; font-weight:600; font-family:var(--mono); }
.c-amt__sub{ font-size:var(--fs-xs); color:var(--muted); }
.c-amt--in .c-amt__main{ color:var(--m-in); } .c-amt--out .c-amt__main{ color:var(--m-out); }
.c-amt--inv .c-amt__main{ color:var(--m-inv); } .c-amt--tax .c-amt__main{ color:var(--m-tax); }
.c-paid{ display:inline-flex; flex-direction:column; align-items:flex-end; }
.c-paid__date{ font-family:var(--mono); }
.c-paid__sub{ font-size:var(--fs-xs); color:var(--muted); }

/* ---- 2.3.5 Botones ---- */
.c-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:var(--tap-sm); padding:0 14px;
  border-radius:var(--r-sm); border:1px solid transparent; background:transparent; color:var(--text);
  font:500 var(--fs-md)/1 var(--font); cursor:pointer; white-space:nowrap; text-decoration:none; }
.c-btn:focus-visible, .c-ibtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.c-btn--primary{ background:var(--accent); color:var(--on-accent); font-weight:600; }
.c-btn--primary:hover{ background:var(--accent-hover); color:var(--on-accent); }
.c-btn--secondary{ background:var(--bg-elev); border-color:var(--border-strong); color:var(--text); }
.c-btn--secondary:hover{ background:var(--bg-hover); color:var(--text); }
/* solo en menús/hojas, con confirmación */
.c-btn--danger{ background:transparent; border-color:var(--danger); color:var(--danger); }
.c-btn--danger:hover{ background:var(--st-debe-bg); color:var(--danger); }
.c-btn--ghost{ background:transparent; color:var(--muted); }
.c-btn--ghost:hover{ background:var(--bg-hover); color:var(--text); }
.c-btn--block{ width:100%; min-height:var(--tap); }
.c-btn--money{ display:inline-block; line-height:1.25; padding-top:10px; padding-bottom:10px; text-align:center; }
.c-btn--money b{ font-weight:700; font-variant-numeric:tabular-nums; }
.c-btn[disabled], .c-btn.is-loading{ opacity:.45; pointer-events:none; }
.c-ibtn{ width:var(--tap); height:var(--tap); display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); color:var(--muted); background:transparent; border:0; cursor:pointer; position:relative;
  list-style:none; padding:0; }
.c-ibtn::-webkit-details-marker{ display:none; }
.c-ibtn:hover{ background:var(--bg-hover); color:var(--text); }
.c-ibtn svg{ width:22px; height:22px; fill:currentColor; }
.c-ibtn--wa{ color:var(--st-aldia); }
.c-ibtn--alert::after{ content:""; position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--st-debe); }

/* ---- 2.3.6 Hojas y menús ---- */
.c-sheet{ position:fixed; inset:0; z-index:var(--z-sheet); display:flex; align-items:flex-end; justify-content:center; }
.c-sheet[hidden], .c-sheet--target:not(:target){ display:none; }   /* --target: overlay por :target (mapa) */
.c-sheet__bg{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.c-sheet__panel{ position:relative; width:100%; max-width:440px; max-height:80vh; overflow:auto;
  padding:var(--sp-2) 18px calc(20px + env(safe-area-inset-bottom));
  background:var(--bg-elev); border:1px solid var(--border-strong); border-bottom:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:var(--shadow-sheet); }
.c-sheet__panel::before{ content:""; display:block; width:36px; height:4px; border-radius:2px;
  background:var(--border-strong); margin:var(--sp-1) auto var(--sp-3); }
.c-sheet__close{ position:absolute; top:var(--sp-1); right:6px; }
@media (min-width:700px){
  .c-sheet{ align-items:center; }
  .c-sheet__panel{ border-radius:var(--r-lg); border-bottom:1px solid var(--border-strong); }
  .c-sheet__panel::before{ display:none; }
}
/* Menú ⋯: popover anclado en PC, hoja inferior con asa en < 700 px */
.c-menu{ position:relative; }
.c-menu > summary{ list-style:none; cursor:pointer; }
.c-menu > summary::-webkit-details-marker{ display:none; }
.c-menu[open] > .c-menu__body{ position:absolute; right:0; top:calc(100% + var(--sp-1)); z-index:var(--z-menu);
  min-width:240px; padding:var(--sp-2); background:var(--bg-elev); border:1px solid var(--border-strong);
  border-radius:var(--r-md); box-shadow:var(--shadow-pop); }
.c-menu__item{ display:flex; align-items:center; gap:var(--sp-2); width:100%; min-height:var(--tap-sm); padding:0 var(--sp-3);
  border:0; border-radius:var(--r-sm); background:none; color:var(--text); font:inherit; font-size:var(--fs-md);
  text-align:left; cursor:pointer; }
.c-menu__item:hover{ background:var(--bg-hover); color:var(--text); }
.c-menu__item--danger{ color:var(--danger); } .c-menu__item--danger:hover{ background:var(--st-debe-bg); color:var(--danger); }
.c-menu__sep{ height:1px; margin:var(--sp-1) var(--sp-2); background:var(--border); }
.c-menu__head{ padding:var(--sp-2) var(--sp-3) var(--sp-1); }
@media (max-width:699px){
  .c-menu[open]::before{ content:""; position:fixed; inset:0; z-index:calc(var(--z-menu) - 1); background:rgba(0,0,0,.55); pointer-events:none; }
  .c-menu[open] > .c-menu__body{ position:fixed; left:0; right:0; bottom:0; top:auto; max-height:80vh; overflow:auto;
    min-width:0; border-radius:var(--r-xl) var(--r-xl) 0 0; border-bottom:0; box-shadow:var(--shadow-sheet);
    padding:var(--sp-2) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom)); }
  .c-menu[open] > .c-menu__body::before{ content:""; display:block; width:36px; height:4px; border-radius:2px;
    background:var(--border-strong); margin:var(--sp-1) auto var(--sp-3); }
  .c-menu__item{ min-height:var(--tap); }
}

/* ---- 2.3.7 Formularios ---- */
.c-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; min-width:0; }
.c-field__label{ font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.c-field__hint{ font-size:var(--fs-xs); color:var(--faint); }
.c-field__error{ font-size:var(--fs-xs); color:var(--danger); }
.c-field input:not([type=radio]):not([type=checkbox]), .c-field select, .c-field textarea{ height:34px; }
.c-field textarea{ height:auto; min-height:80px; }
.c-field--error input, .c-field--error select, .c-field--error textarea{ border-color:var(--danger); }
@media (max-width:699px){
  .c-field input:not([type=radio]):not([type=checkbox]), .c-field select{ height:var(--ctl); font-size:16px; }
}
/* Segmento: radios ocultos + etiquetas, o enlaces; activo = .is-active / radio:checked / aria-current */
.c-seg{ display:inline-flex; }
.c-seg__radio{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.c-seg__opt{ display:inline-flex; align-items:center; justify-content:center; min-height:var(--ctl); padding:0 var(--sp-5);
  font-size:var(--fs-sm); font-weight:500; line-height:1; color:var(--muted); background:var(--bg-elev);
  border:1px solid var(--border-strong); margin-left:-1px; cursor:pointer; }
.c-seg__opt:first-of-type{ border-radius:var(--r-sm) 0 0 var(--r-sm); margin-left:0; }
.c-seg__opt:last-of-type{ border-radius:0 var(--r-sm) var(--r-sm) 0; }
.c-seg__radio:checked + .c-seg__opt, .c-seg__opt.is-active, .c-seg__opt[aria-current]{
  background:var(--bg-hover); color:var(--text); border-color:var(--accent); position:relative; z-index:1; }
.c-seg__radio:focus-visible + .c-seg__opt{ outline:2px solid var(--accent); outline-offset:2px; }
.c-seg--block{ display:flex; width:100%; } .c-seg--block .c-seg__opt{ flex:1; }
.c-check{ display:flex; align-items:center; gap:var(--sp-2); min-height:var(--tap-sm); font-size:var(--fs-md); cursor:pointer; }
.c-check input[type=checkbox]{ width:18px; height:18px; accent-color:var(--accent); }
.c-form-actions{ display:flex; justify-content:flex-end; gap:var(--sp-2); margin-top:var(--sp-5); }
@media (max-width:699px){
  .c-form-actions{ position:sticky; bottom:calc(56px + env(safe-area-inset-bottom)); z-index:var(--z-sticky);
    background:var(--bg); padding:10px 0; border-top:1px solid var(--border); }
  .c-form-actions .c-btn{ flex:1; min-height:var(--tap); }
}

/* ---- 2.3.8 Página, cabeceras, tira Hoy, filtros, vacíos, errores, toast ---- */
.c-page__head{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.c-page__title{ font-size:var(--fs-2xl); font-weight:600; margin:0; }
.c-page__sum{ color:var(--muted); font-size:var(--fs-sm); }
.c-page__act{ margin-left:auto; display:flex; gap:var(--sp-2); align-items:center; }
@media (max-width:699px){
  .c-page__title{ display:none; }          /* el título vive en la topbar móvil */
  .c-page__act{ margin-left:0; width:100%; }
}
/* Topbar móvil 44 px: ← / título / acciones (el marcado lo monta base.html) */
.c-appbar{ display:flex; align-items:center; gap:var(--sp-1); height:var(--tap); padding:0 var(--sp-1);
  background:var(--bg-elev); border-bottom:1px solid var(--border); }
.c-appbar__title{ flex:1; min-width:0; font-size:var(--fs-xl); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 var(--sp-2); }
.c-today{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-4); margin:0 0 var(--sp-3);
  font-size:var(--fs-sm); color:var(--muted); }
.c-today b{ color:var(--text); font-variant-numeric:tabular-nums; }
.c-today__i{ display:inline-flex; align-items:center; gap:6px; }
.c-today__i::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--st-aldia); }
.c-today__i--debe, .c-today__i--debe b{ color:var(--st-debe); }
.c-today__i--debe::before{ background:var(--st-debe); }
.c-today__i--warn::before{ background:var(--st-sindato); }
.c-filters{ display:flex; gap:var(--sp-2); overflow-x:auto; scrollbar-width:none; margin-bottom:var(--sp-3); padding-bottom:2px; }
.c-filters::-webkit-scrollbar{ display:none; }
.c-chip{ flex:none; display:inline-flex; align-items:center; gap:6px; min-height:var(--tap); padding:0 var(--sp-4);
  border-radius:var(--r-pill); background:var(--bg-elev); border:1px solid var(--border); color:var(--muted);
  font-size:var(--fs-sm); font-weight:500; white-space:nowrap; cursor:pointer; }
.c-chip b{ color:var(--text); font-variant-numeric:tabular-nums; }
.c-chip:hover{ background:var(--bg-hover); color:var(--text); }
.c-chip.is-active, .c-chip[aria-current]{ background:var(--accent-bg); border-color:var(--accent); color:var(--text); }
.c-chip::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--st-libre); display:none; }
.c-chip--debe::before, .c-chip--aldia::before, .c-chip--adelantado::before, .c-chip--sindato::before{ display:block; }
.c-chip--debe::before{ background:var(--st-debe); } .c-chip--aldia::before{ background:var(--st-aldia); }
.c-chip--adelantado::before{ background:var(--st-adelantado); } .c-chip--sindato::before{ background:var(--st-sindato); }
@media (min-width:700px){ .c-chip{ min-height:var(--ctl); } }
.c-empty{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); padding:var(--sp-8) var(--sp-4);
  text-align:center; color:var(--muted); }
.c-empty__icon{ font-size:32px; line-height:1; color:var(--faint); }
.c-error{ max-width:420px; margin:var(--sp-8) auto; padding:var(--sp-6); text-align:center; background:var(--bg-elev);
  border:1px solid var(--border); border-radius:var(--r-lg); }
.c-error__title{ font-size:var(--fs-xl); font-weight:600; margin:0 0 var(--sp-2); }
.c-error__msg{ color:var(--muted); margin:0 0 var(--sp-4); }
.c-error__act{ display:flex; gap:var(--sp-2); justify-content:center; flex-wrap:wrap; }
.c-toast{ position:fixed; left:var(--sp-3); right:var(--sp-3); bottom:var(--sp-5); z-index:var(--z-toast); max-width:520px;
  margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-3) 14px;
  background:var(--bg-elev); border:1px solid var(--ok); border-left-width:4px; border-radius:var(--r-md);
  color:var(--text); font-size:var(--fs-md); box-shadow:var(--shadow-pop); }
.c-toast[hidden]{ display:none; }
.c-toast--error{ border-color:var(--danger); }   /* persistente: no se autocierra, lleva Reintentar */
.c-toast button, .c-toast a.c-toast__act{ flex:none; min-height:36px; padding:6px var(--sp-3); border:1px solid var(--border-strong);
  border-radius:var(--r-sm); background:var(--bg-hover); color:var(--text); font-size:var(--fs-md); cursor:pointer; }
@media (max-width:699px){ body.has-nav .c-toast{ bottom:calc(68px + env(safe-area-inset-bottom)); } }

/* ==== Integración v2 (WP2 + WP3 + WP5 sobre el DS) ==== */
/* Tarjeta: acciones en dos grupos — dinero (izq., crece) y auxiliares (WA · tel · ⋯) */
.c-card__money{ display:flex; gap:var(--sp-2); flex-wrap:wrap; flex:1 1 100%; min-width:0; }
.c-card__money:empty{ display:none; }
.c-card__aux{ display:flex; gap:var(--sp-1); align-items:center; flex:1 1 100%; }
.c-card__aux > details, .c-card__aux > .c-btn--ghost{ margin-left:auto; }
@media (min-width:700px){ .c-card__actions{ flex-wrap:nowrap; } .c-card__money{ flex:1 1 auto; } .c-card__aux{ flex:none; } }
@media (max-width:699px){
  .c-card__actions{ flex-wrap:wrap; }
  .c-card__money > .c-btn{ flex:1 1 auto; min-width:0; white-space:normal; line-height:1.2; padding:6px 10px; text-align:center; }
}
.c-card__name--muted{ color:var(--muted); }
.c-debt--ok{ color:var(--st-adelantado); }
.c-row--note, .c-row--nota{ grid-column:1 / -1; align-items:flex-start; justify-content:flex-start; }
.c-row--note .c-row__v, .c-row--nota .c-row__v{ text-align:left; color:var(--text); }
.c-row--wide{ grid-column:1 / -1; }
@media (min-width:700px){ .c-row--wide{ grid-column:span 2; } }
.c-ibtn{ position:relative; cursor:pointer; list-style:none; font-size:20px; }
.c-ibtn::-webkit-details-marker{ display:none; }
.c-ibtn--alert::after{ content:""; position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--st-debe); }
.c-btn.htmx-request, .c-btn[disabled]{ opacity:.45; pointer-events:none; }
.c-list{ display:block; }
/* menú ⋯: corrector de «pagado hasta» plegado */
.c-menu__corr[open]{ padding:0 var(--sp-2) var(--sp-2); }
.c-menu__corr > summary{ list-style:none; } .c-menu__corr > summary::-webkit-details-marker{ display:none; }
.c-menu__corr-row{ display:flex; gap:6px; margin:var(--sp-1) 0 var(--sp-2); }
.c-menu__corr-row select{ flex:1; min-width:0; height:var(--tap-sm); }
.c-menu__hint{ font-size:var(--fs-xs); color:var(--muted); padding-top:6px; }
.c-menu__head{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
/* la tarjeta con el ⋯ abierto queda por encima de las siguientes (popover PC) */
/* (en móvil el menú es hoja inferior: la tarjeta sube por encima de la tabbar para que la hoja no quede debajo) */
.c-card:has(details.c-menu[open]){ position:relative; z-index:var(--z-sheet); }
/* hoja ＋ de la tabbar */
.c-sheet__item{ display:flex; align-items:center; min-height:48px; padding:0 14px; border-radius:var(--r-md); color:var(--text); font-size:15px; }
.c-sheet__item:hover{ background:var(--bg-hover); color:var(--text); }
/* toast (base.html y mapa) */
.c-toast--ok{ border-color:var(--ok); }
.c-toast__msg{ flex:1; min-width:0; }
.c-toast .c-toast__x{ width:36px; padding:0; border:0; background:none; color:var(--muted); font-size:20px; }
/* topbar móvil: título de la sección en lugar de la marca */
.topbar__title{ display:none; font-size:var(--fs-xl); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
@media (max-width:699px){
  .topbar__title{ display:block; flex:1; } .topbar .brand{ display:none; }
  .c-page__head .c-seg{ width:100%; } .c-page__head .c-seg__opt{ flex:1; }
}
.c-page__head .c-seg{ margin-left:auto; }
/* extracto: saldo acumulado como dato secundario; leyenda del alta */
.table td[data-l^="Saldo"]{ color:var(--muted); font-size:var(--fs-sm); }
.lg.libre{ background:var(--st-libre-fill); } .lg.ocupado{ background:transparent; border:1px dashed var(--faint); }
/* "Adelantar" (secundario) no ocupa el ancho: la mirada va a los que deben (C8) */
@media (max-width:699px){ .c-card__money:not(:has(.c-btn--primary)) > .c-btn{ flex:0 1 auto; } }

/* estado: si la línea de deuda/saldo no cabe junto al badge, baja entera a la línea siguiente */
.c-debt{ white-space:nowrap; }
@media (max-width:699px){ .c-card__state{ flex-wrap:wrap; row-gap:2px; } }