/* Layout: panel de trabajo con la jerarquía del inmueble a la izquierda (cajón y barra inferior en el teléfono).
   Marca ARQON 10: Abisal, Océano y Marea. El petróleo es la acción; el naranja
   (--run) solo dice «en curso / en obra». Marea no lleva texto sobre claro y
   Mineral no lleva texto nunca: para texto en tono marea, --accent-text. */
:root{
  --bg:#F3F5F5; --surface:#FFFFFF; --surface-2:#E8ECEB; --surface-3:#F7F9F9;
  --ink:#071D2B; --ink-2:#3D5260; --ink-3:#596B76; --line:#D5DCDD; --line-2:#E6EBEB;
  --accent:#14566A; --accent-ink:#FFFFFF; --accent-soft:#DCEBEC; --accent-line:#A9CFD1;
  --accent-text:#0F6E7C;
  --brand-marea:#5BAEB2;
  --blue:#1E5A8E; --blue-soft:#DEEAF5;
  --ok:#23744A; --ok-soft:#DCEFE3; --warn:#94600A; --warn-soft:#F8ECD2; --bad:#B42318; --bad-soft:#FBE1DE; --idle:#66717E; --idle-soft:#E5E9ED;
  --run:#C2410C; --run-soft:#FBE8DC;
  --side:#071D2B; --side-ink:#C9D6D8; --side-ink-2:#8FA6B0; --side-hl:#12344A;
  --paper:#FFFFFF; --paper-ink:#071D2B;
  --shadow:0 1px 2px rgba(7,29,43,.06),0 6px 18px rgba(7,29,43,.08);
  --f-display:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --r:10px; --r-sm:6px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#071D2B; --surface:#0C2838; --surface-2:#12344A; --surface-3:#0A2231;
  --ink:#E8ECEB; --ink-2:#A9BCC4; --ink-3:#7F96A1; --line:#1F4559; --line-2:#173A4D;
  --accent:#5BAEB2; --accent-ink:#04131D; --accent-soft:#12344A; --accent-line:#2E6F78;
  --accent-text:#5BAEB2; --brand-marea:#5BAEB2;
  --blue:#80B6E6; --blue-soft:#16304A;
  --ok:#5CC48A; --ok-soft:#12362A; --warn:#E3B04B; --warn-soft:#3A2D12; --bad:#F2877C; --bad-soft:#3D1C19; --idle:#97A3B1; --idle-soft:#1C3343;
  --run:#F07A3A; --run-soft:#3A2216;
  --side:#04131D; --side-ink:#C9D6D8; --side-ink-2:#7F96A1; --side-hl:#12344A;
  --paper:#F7F8F8; --paper-ink:#071D2B;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.3);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#071D2B; --surface:#0C2838; --surface-2:#12344A; --surface-3:#0A2231;
  --ink:#E8ECEB; --ink-2:#A9BCC4; --ink-3:#7F96A1; --line:#1F4559; --line-2:#173A4D;
  --accent:#5BAEB2; --accent-ink:#04131D; --accent-soft:#12344A; --accent-line:#2E6F78;
  --accent-text:#5BAEB2; --brand-marea:#5BAEB2;
  --blue:#80B6E6; --blue-soft:#16304A;
  --ok:#5CC48A; --ok-soft:#12362A; --warn:#E3B04B; --warn-soft:#3A2D12; --bad:#F2877C; --bad-soft:#3D1C19; --idle:#97A3B1; --idle-soft:#1C3343;
  --run:#F07A3A; --run-soft:#3A2216;
  --side:#04131D; --side-ink:#C9D6D8; --side-ink-2:#7F96A1; --side-hl:#12344A;
  --paper:#F7F8F8; --paper-ink:#071D2B;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.3);
  color-scheme:dark;
}
*{box-sizing:border-box}
/* El navegador aplica [hidden] con display:none y cualquier clase que fije display le gana:
   los modos de una medida se quedaban los tres a la vista. */
[hidden]{display:none!important}
html,body{height:100%}
/* Sin el margen de 8 px del navegador: con el alto al 100 % la página medía la
   pantalla más 16 px, sobraba siempre algo que desplazar y quedaba un borde. */
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
/* Las barras de desplazamiento: finas, del color del tema y sin flechas. Sin
   esto cada lista que se desplaza saca la barra gris del sistema, que en el
   tema oscuro y en el menú lateral es un bloque claro que no es de aquí.
   `scrollbar-color` se hereda, así que con ponerlo arriba vale para todas;
   las reglas `::-webkit-` son para los navegadores que todavía no lo leen. */
:root{--scroll-thumb:color-mix(in srgb,var(--ink-3) 45%,transparent);scrollbar-color:var(--scroll-thumb) transparent}
*{scrollbar-width:thin}
.side{--scroll-thumb:color-mix(in srgb,var(--side-ink) 28%,transparent)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-button{display:none}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:.01em;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:2rem} h2{font-size:1.35rem} h3{font-size:1.1rem}
p{margin:0}
.mono{font-family:var(--f-mono);font-size:.86em}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)} .faint{color:var(--ink-3)}
.eyebrow{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100%;transition:grid-template-columns .18s ease}
@media (min-width:1024px){.app.side-min{grid-template-columns:84px minmax(0,1fr)}}

/* La barra lateral es una tarjeta redondeada, separada del borde, como el acceso. */
.side{background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;position:sticky;top:10px;height:calc(100vh - 20px);height:calc(100dvh - 20px);margin:10px 0 10px 10px;border-radius:18px;padding:14px 12px}
.brand{display:flex;align-items:flex-start;gap:10px;padding:2px 2px 16px}
.brand-text{display:flex;flex-direction:column;gap:4px;min-width:0;padding-top:4px}
.brand small{font-size:.72rem;color:var(--side-ink-2)}
/* El logotipo en texto: «ARQON» en 700 y «10» en 600 con el color de acción.
   Sobre la barra lateral y sobre oscuro el «10» va en marea. */
.logo{display:inline-flex;flex-direction:column;gap:6px;line-height:1}
.logo-word{font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.logo-word b{font-weight:600;color:var(--accent)}
.logo-tag{font-family:var(--f-body);font-weight:500;font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-2)}
.logo.big .logo-word{font-size:2.4rem}
.logo.big .logo-tag{font-size:.68rem}
.side .logo-word,.login-art .logo-word{color:var(--side-ink)}
.side .logo-word b,.login-art .logo-word b{color:var(--brand-marea)}
.login-art .logo-tag{color:var(--side-ink)}
.nav{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -4px;padding:0 4px;scrollbar-color:var(--scroll-thumb) transparent}
/* La lateral mide lo que la ventana y desplaza su propia lista: con muchos conjuntos
   estiraba la página entera y el pie con «salir» se iba abajo. */
.side{overflow:hidden}
.nav a{flex:none}
.nav-label{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--side-ink-2);padding:14px 10px 6px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:7px;color:var(--side-ink);text-decoration:none;font-size:.92rem}
.nav a:hover{background:var(--side-hl)}
.nav a.on{background:var(--side-hl);color:#fff;box-shadow:inset 3px 0 0 var(--brand-marea)}
.nav a .cnt{margin-left:auto;font-family:var(--f-mono);font-size:.72rem;color:var(--side-ink-2)}
.side-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid var(--side-hl);font-size:.82rem}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:.78rem;background:var(--blue-soft);color:var(--blue);flex:none}
.side-foot .avatar{background:var(--side-hl);color:#fff}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:10px 24px;min-height:58px}
.crumbs{display:flex;align-items:center;gap:4px;min-width:0;flex:1;font-size:.86rem;color:var(--ink-2);overflow:hidden;white-space:nowrap}
.crumbs a{color:var(--ink-2);text-decoration:none;overflow:hidden;text-overflow:ellipsis}
.crumbs a:hover{color:var(--ink)}
.crumbs b{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.crumbs svg{width:14px;height:14px;color:var(--ink-3)}
.top-tools{display:flex;align-items:center;gap:8px}
.chip-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 11px;font-size:.8rem;cursor:pointer;white-space:nowrap}
.chip-btn:hover{border-color:var(--ink-3)}
.chip-btn.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.chip-btn.ok{color:var(--ok)}
.role-sel{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 10px;font-size:.8rem}
.view{padding:24px;display:flex;flex-direction:column;gap:20px;max-width:1240px;width:100%}
.bottom{display:none}
.menu-btn{display:none}

/* ---------- page header ---------- */
.ph{display:flex;gap:16px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.ph-main{min-width:0;display:flex;flex-direction:column;gap:6px}
.ph-meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--ink-2);font-size:.86rem}
.ph-meta span{display:inline-flex;align-items:center;gap:5px}
.ph-meta svg{width:15px;height:15px;color:var(--ink-3)}
.ph-actions{display:flex;gap:8px;flex-wrap:wrap}
.title-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:8px 14px;font-weight:500;font-size:.88rem;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--ink-3)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn.danger{color:var(--bad)}
.btn.sm{padding:5px 10px;font-size:.8rem}
.btn.icon{padding:7px}
.btn svg{width:16px;height:16px}
@media (pointer:coarse){.btn{min-height:44px}.btn.sm{min-height:36px}}

/* ---------- cards, chips ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.card-h h2,.card-h h3{display:flex;align-items:center;gap:8px}
.card-b{padding:18px}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 9px;font-size:.74rem;font-weight:500;white-space:nowrap;line-height:1.6}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.idle{background:var(--idle-soft);color:var(--idle)} .pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.blue{background:var(--blue-soft);color:var(--blue)} .pill.plain::before{display:none}
/* «Aprobado» con el color de acción y «en curso» con el naranja, que no dice nada más. */
.pill.acc{background:var(--accent-soft);color:var(--accent)} .pill.run{background:var(--run-soft);color:var(--run)}
.tag{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-mono);font-size:.7rem;padding:1px 6px;border-radius:4px;border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.tag.yes{border-color:var(--ok);color:var(--ok)}
.tag.no{border-style:dashed;color:var(--ink-3)}

/* ---------- tabs ---------- */
/* La raya de abajo es una sombra interior y no un borde: con el borde, el subrayado
   de la pestaña activa tenía que salirse 1 px (margin-bottom:-1px), y ese píxel de
   más hacía que la fila también se desplazara de arriba abajo con el dedo. */
.tabs{display:flex;gap:2px;box-shadow:inset 0 -1px 0 var(--line);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}
.tabs button{border:0;background:none;padding:10px 14px;cursor:pointer;color:var(--ink-2);font-weight:500;font-size:.9rem;white-space:nowrap;border-bottom:2px solid transparent;display:inline-flex;gap:7px;align-items:center}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.tabs .n{font-family:var(--f-mono);font-size:.72rem;background:var(--surface-2);border-radius:999px;padding:0 6px;color:var(--ink-2)}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit}
.kpi b{font-family:var(--f-display);font-size:2.2rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.kpi b small{font-size:1rem;color:var(--ink-3);font-weight:500}
.kpi .bar{height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-top:6px}
.kpi .bar i{display:block;height:100%;background:var(--accent)}
.grid-2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}

/* progress stack */
.stackbar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--surface-2)}
.stackbar i{display:block;height:100%}
.s-ok{background:var(--ok)} .s-warn{background:var(--warn)} .s-idle{background:var(--line)} .s-run{background:var(--run)}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.78rem;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}

/* lists */
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid var(--line-2);text-decoration:none;color:inherit;min-width:0}
.row:first-child{border-top:0}
a.row:hover,button.row:hover{background:var(--surface-3)}
button.row{border:0;border-top:1px solid var(--line-2);background:none;width:100%;text-align:left;cursor:pointer}
.row .grow{flex:1;min-width:0}
.row .grow b{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .grow span{font-size:.82rem;color:var(--ink-2);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-2);flex:none}
.feed-ico svg{width:16px;height:16px}

/* conjunto cards */
.cj{display:flex;flex-direction:column;gap:12px;padding:16px;text-decoration:none;color:inherit;transition:border-color .15s}
.cj:hover{border-color:var(--ink-3)}
.cj-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.cj h3{font-size:1.25rem}
.cj-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid var(--line-2);padding-top:12px}
.cj-stats div{display:flex;flex-direction:column}
.cj-stats b{font-family:var(--f-display);font-size:1.4rem;line-height:1}
.cj-stats span{font-size:.74rem;color:var(--ink-3)}

/* elevation (fachada) */
.elev-wrap{overflow-x:auto}
.elev{display:grid;gap:6px;min-width:300px}
.elev .fl{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3);display:flex;align-items:center;justify-content:flex-end;padding-right:4px}
.unit{border:1px solid var(--line);border-left:4px solid var(--line);background:var(--surface);border-radius:6px;padding:8px 9px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;min-width:0}
.unit:hover{border-color:var(--ink-3)}
.unit b{font-family:var(--f-display);font-size:1.15rem;line-height:1}
.unit .dots{display:flex;gap:3px}
.unit .dots i{font-style:normal;font-family:var(--f-mono);font-size:.62rem;padding:0 4px;border-radius:3px;background:var(--surface-2);color:var(--ink-3)}
.unit .dots i.y{background:var(--ok-soft);color:var(--ok)}
.unit.st-ok{border-left-color:var(--ok)} .unit.st-warn{border-left-color:var(--warn)} .unit.st-idle{border-left-color:var(--line)}
.unit.st-run{border-left-color:var(--run)} .unit.st-acc{border-left-color:var(--accent)}
.roof{height:10px;border-radius:6px 6px 0 0;background:repeating-linear-gradient(135deg,var(--surface-2) 0 6px,var(--line) 6px 8px);margin-left:calc(3rem + 6px)}
.ground{height:6px;background:var(--ink-3);border-radius:2px;margin-left:calc(3rem + 6px);opacity:.5}

/* zones */
.zone-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.zone{display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden}
.zone:hover{border-color:var(--ink-3)}
.zone-img{aspect-ratio:4/3;background:var(--surface-2);position:relative;max-width:100%}
.zone-img img{width:100%;height:100%;object-fit:cover;display:block}
.zone-img .ctx{position:absolute;left:8px;top:8px}
.zone-b{padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.zone-b p{font-size:.84rem;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.zone-counts{display:flex;gap:12px;font-size:.78rem;color:var(--ink-3)}
.zone-counts span{display:inline-flex;align-items:center;gap:4px}
.zone-counts svg{width:14px;height:14px}
.zone.add{border-style:dashed;align-items:center;justify-content:center;min-height:200px;gap:8px;color:var(--ink-2);background:transparent;cursor:pointer}
.badge-ctx{background:var(--accent);color:var(--accent-ink);font-size:.68rem;font-weight:600;border-radius:4px;padding:2px 7px;letter-spacing:.04em;text-transform:uppercase;display:inline-flex;gap:4px;align-items:center}
.badge-ctx svg{width:12px;height:12px;fill:currentColor;stroke:none}

/* tables */
.tbl-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:.88rem}
.t th{font-family:var(--f-mono);font-weight:500;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.t td{padding:11px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
.t tr:last-child td{border-bottom:0}
.t tbody tr.click{cursor:pointer}
.t tbody tr.click:hover td{background:var(--surface-3)}
.t .r{text-align:right}
.t .el{font-weight:600}
.t .sub{font-size:.82rem;color:var(--ink-2)}
.t .sol{font-size:.82rem;color:var(--blue)}
.detail{font-family:var(--f-mono);font-size:.78rem;color:var(--ink-2);background:var(--surface-3);border:1px solid var(--line-2);border-radius:4px;padding:2px 6px;display:inline-block}
.qty{font-family:var(--f-display);font-size:1.15rem;font-weight:600;white-space:nowrap}
.qty small{font-family:var(--f-body);font-size:.78rem;color:var(--ink-2);font-weight:500;margin-left:3px}

/* photos */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ph-tile{position:relative;border-radius:8px;overflow:hidden;background:var(--surface-2);aspect-ratio:4/3;border:1px solid var(--line);cursor:zoom-in;max-width:100%}
.ph-tile.is-ctx{grid-column:span 2;grid-row:span 2;border:2px solid var(--accent)}
.ph-tile img{width:100%;height:100%;object-fit:cover;display:block}
.ph-tile .ord{position:absolute;left:6px;bottom:6px;font-family:var(--f-mono);font-size:.68rem;background:rgba(10,14,20,.7);color:#fff;border-radius:4px;padding:1px 6px}
.ph-tile .ctl{position:absolute;right:6px;top:6px;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.ph-tile:hover .ctl,.ph-tile:focus-within .ctl{opacity:1}
@media (pointer:coarse){.ph-tile .ctl{opacity:1}}
.ph-tile .ctl button{width:28px;height:28px;border-radius:6px;border:0;background:rgba(10,14,20,.72);color:#fff;display:grid;place-items:center;cursor:pointer}
.ph-tile .ctl button svg{width:15px;height:15px}
.ph-tile .badge-ctx{position:absolute;left:8px;top:8px}
.ph-tile.drag-over{outline:3px dashed var(--accent);outline-offset:-3px}

/* drop zones / doc slots */
.drop{border:1.5px dashed var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:var(--ink-2);background:var(--surface-3);cursor:pointer;transition:all .15s}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.drop .big{width:42px;height:42px;border-radius:50%;background:var(--surface);display:grid;place-items:center;border:1px solid var(--line)}
.doc-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.slot{display:flex;flex-direction:column}
.slot-h{display:flex;align-items:center;gap:12px;padding:16px 18px}
.fico{width:44px;height:52px;border-radius:5px;display:grid;place-items:end center;padding-bottom:7px;font-family:var(--f-mono);font-size:.66rem;font-weight:500;color:#fff;flex:none;position:relative}
.fico::after{content:"";position:absolute;top:0;right:0;width:12px;height:12px;background:linear-gradient(225deg,var(--surface) 50%,rgba(0,0,0,.18) 50%)}
.fico.pdf{background:#B42318} .fico.doc,.fico.docx{background:#2B5797} .fico.xls,.fico.xlsx{background:#1E7145} .fico.zip{background:#6B5B3E}
.slot-b{padding:0 18px 16px;display:flex;flex-direction:column;gap:12px}
.slot-meta{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:.82rem}
.slot-meta dt{color:var(--ink-3)} .slot-meta dd{margin:0}
.versions{font-size:.8rem;color:var(--ink-2);border-top:1px solid var(--line-2);padding-top:10px;display:flex;flex-direction:column;gap:4px}

/* notes */
.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.note{padding:16px;display:flex;flex-direction:column;gap:8px;cursor:pointer;border-top:3px solid var(--blue)}
.note:hover{border-color:var(--ink-3);border-top-color:var(--blue)}
.note h3{font-family:var(--f-body);font-size:1rem;font-weight:600}
.note p{font-size:.88rem;color:var(--ink-2);white-space:pre-wrap}
.note footer{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--ink-3);margin-top:auto}
.note footer .avatar{width:22px;height:22px;font-size:.62rem}

/* forms / modal */
.modal-back{position:fixed;inset:0;background:rgba(9,13,18,.55);display:grid;place-items:center;z-index:60;padding:16px;animation:fade .15s}
.modal{background:var(--surface);border-radius:12px;width:min(560px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.35);border-top:4px solid var(--accent);overflow:hidden}
.modal.wide{width:min(920px,100%)}
.modal > header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.modal-body{padding:18px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.modal > footer{padding:12px 20px;border-top:1px solid var(--line-2);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;background:var(--surface-3)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-size:.8rem;font-weight:600;color:var(--ink-2)}
.field .hint{font-size:.76rem;color:var(--ink-3)}
.inp{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:9px 11px;width:100%;min-width:0}
textarea.inp{resize:vertical;min-height:84px}
.inp:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.f-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;padding:3px;gap:3px;background:var(--surface-3);flex-wrap:wrap}
.seg button{flex:1;border:0;background:none;border-radius:6px;padding:7px 10px;font-size:.84rem;cursor:pointer;color:var(--ink-2);white-space:nowrap}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);font-weight:500}
.calc{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--blue-soft);border-radius:8px;padding:12px 14px;flex-wrap:wrap}
.calc .res{font-family:var(--f-display);font-size:1.7rem;font-weight:600;color:var(--blue)}
.calc .err{color:var(--bad);font-size:.84rem}
.sugs{display:flex;flex-wrap:wrap;gap:6px}
.sugs button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 10px;font-size:.8rem;cursor:pointer}
.sugs button:hover{border-color:var(--accent);color:var(--accent)}
.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:8px;background:var(--blue-soft);color:var(--ink);font-size:.86rem}
.notice svg{color:var(--blue);margin-top:2px}
.notice.warn{background:var(--warn-soft)} .notice.warn svg{color:var(--warn)}

/* tree */
.tree{font-family:var(--f-mono);font-size:.8rem;background:var(--surface-3);border:1px solid var(--line-2);border-radius:8px;padding:14px 16px;line-height:1.75;overflow-x:auto;white-space:pre;color:var(--ink-2)}
.tree b{color:var(--ink);font-weight:500}
.tree .c{color:var(--accent)}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(5,8,12,.92);z-index:70;display:flex;flex-direction:column;color:#fff}
.lb-top{display:flex;align-items:center;gap:10px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top,0px))}
.lb-top .grow{flex:1;min-width:0}
.lb-img{flex:1;display:flex;align-items:center;justify-content:center;padding:0 56px;min-height:0;position:relative}
.lb-img img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer}
.lb-nav.l{left:8px} .lb-nav.r{right:8px}
.lb-strip{display:flex;gap:6px;padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));overflow-x:auto;justify-content:center}
.lb-strip img{width:64px;height:48px;object-fit:cover;border-radius:4px;opacity:.5;cursor:pointer;border:2px solid transparent}
.lb-strip img.on{opacity:1;border-color:var(--accent)}
.lb .btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}

/* toasts */
#toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(440px,calc(100% - 32px))}
.toast{background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;font-size:.88rem;box-shadow:0 8px 24px rgba(0,0,0,.25);display:flex;gap:8px;align-items:center;animation:up .2s}
.toast svg{color:var(--accent)}
@keyframes up{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* login */
.login{display:grid;min-height:100%;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
/* El acceso: el degradado de la marca (Abisal → Océano) con un brillo suave de
   marea, en un recuadro redondeado. Antes llevaba las líneas de un sismógrafo,
   que hablaban de un solo tipo de trabajo; la marca habla de todos. */
.login-art{background:radial-gradient(circle at 88% 12%,rgba(91,174,178,.28) 0,rgba(91,174,178,0) 42%),radial-gradient(circle at 8% 100%,rgba(91,174,178,.16) 0,rgba(91,174,178,0) 38%),linear-gradient(135deg,#071D2B 0%,#14566A 100%);color:#fff;padding:40px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;margin:16px;border-radius:20px}
.login-art h1{font-size:3rem;max-width:12ch;color:#fff}
.login-art p{color:var(--side-ink);max-width:44ch}
.seis{font-family:var(--f-mono);font-size:.74rem;color:var(--side-ink-2);display:flex;gap:18px;flex-wrap:wrap}
.login-side{display:flex;align-items:center;justify-content:center;padding:32px 16px}
.login-card{width:min(400px,100%);display:flex;flex-direction:column;gap:16px;padding:28px}
.login-card :is(input,select,button){scroll-margin-block:96px}
.login-card .demo-box{border:1px dashed var(--accent-line);background:var(--accent-soft);border-radius:8px;padding:12px;font-size:.84rem;display:flex;flex-direction:column;gap:8px}

/* misc */
.empty{padding:36px 20px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;color:var(--ink-2)}
.empty .big{width:52px;height:52px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-3)}
.empty .big svg{width:24px;height:24px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar .grow{flex:1}
.linkbox{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:6px 6px 6px 12px;background:var(--surface-3);min-width:0}
.linkbox code{font-family:var(--f-mono);font-size:.8rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.obs{display:flex;flex-direction:column;gap:8px}
.obs textarea{min-height:70px}
.sep{height:1px;background:var(--line-2)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:.88rem}
.kv dt{color:var(--ink-3)} .kv dd{margin:0}
.queue-item{display:flex;align-items:center;gap:10px;font-size:.86rem}
.queue-item img{width:44px;height:33px;object-fit:cover;border-radius:4px}
.prog{height:4px;background:var(--surface-2);border-radius:2px;overflow:hidden;flex:1}
.prog i{display:block;height:100%;background:var(--accent);transition:width .3s}
.gen-group{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);background:var(--surface-3)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2{grid-template-columns:minmax(0,1fr)}
}
/* Por debajo de 1024 px —teléfono y tableta— la lateral se va y navegar es la
   barra de abajo más la hoja con buscador. */
@media (max-width:1023px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .menu-btn{display:inline-flex}
  .top{padding:8px 16px;padding-top:calc(8px + env(safe-area-inset-top,0px))}
  .view{padding:16px;padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
  .bottom{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
  .bottom a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;font-size:.68rem;color:var(--ink-3);text-decoration:none;min-height:56px;justify-content:center}
  .bottom a.on{color:var(--accent)}
  .bottom svg{width:22px;height:22px}
  .role-sel,.hide-m{display:none}
  #toasts{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .login{grid-template-columns:minmax(0,1fr)}
  .login-art{padding:28px 20px;min-height:240px}
  .login-art h1{font-size:2.2rem}
  .doc-slots{grid-template-columns:minmax(0,1fr)}
  h1{font-size:1.65rem}
}
@media (max-width:640px){
  .t.stacked thead{display:none}
  .t.stacked tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 4px;border-bottom:1px solid var(--line-2)}
  .t.stacked td{border:0;padding:0}
  .t.stacked td[data-l]::before{content:attr(data-l);display:block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .t.stacked td.full{grid-column:1/-1}
  .ph-tile.is-ctx{grid-column:1/-1;grid-row:auto}
  .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cj-stats b{font-size:1.2rem}
  .lb-img{padding:0 8px}
  .lb-nav{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- aplicación real (sobre la base del prototipo) ---------- */
.stack{display:flex;flex-direction:column;gap:16px}
.stack-s{display:flex;flex-direction:column;gap:10px}
.small{font-size:.82rem}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wrap-text{white-space:normal!important}
.pre{white-space:pre-wrap}
.break{word-break:break-word;overflow-wrap:anywhere}
.warn-text{color:var(--warn)}
.icon-line{display:flex;gap:5px;align-items:center;margin-top:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.grow{flex:1;min-width:0}

.loading{display:flex;gap:10px;align-items:center;justify-content:center;padding:48px 16px;color:var(--ink-2)}
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite;display:inline-block;flex:none}
.spinner.sm{width:13px;height:13px}
@keyframes spin{to{transform:rotate(360deg)}}

.form-error{background:var(--bad-soft);color:var(--bad);border-radius:8px;padding:10px 12px;font-size:.86rem}
.linklike{background:none;border:0;color:var(--blue);cursor:pointer;padding:4px 0;font-size:.88rem;text-align:left}
.login-title{font-size:1.7rem}
.login-copy{display:flex;flex-direction:column;gap:14px}
.foot-links a{color:var(--ink-3)}

/* segmented control con radios de verdad */
.seg-opt{flex:1;display:flex;cursor:pointer;min-width:0}
.seg-opt input{position:absolute;opacity:0;pointer-events:none}
.seg-opt span{flex:1;text-align:center;border-radius:6px;padding:7px 10px;font-size:.84rem;color:var(--ink-2);white-space:nowrap}
.seg-opt input:checked + span{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);font-weight:500}
.seg-opt input:focus-visible + span{outline:2px solid var(--accent);outline-offset:1px}
.f-row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:460px){.f-row-3{grid-template-columns:repeat(2,minmax(0,1fr))}}

.checks{display:flex;flex-direction:column;gap:6px}
.check{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.check:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.check span{display:flex;flex-direction:column}
.check small{color:var(--ink-3)}
.check input{width:18px;height:18px;accent-color:var(--accent)}

.nav a.sub{font-size:.85rem}
a.side-foot{text-decoration:none;color:var(--side-ink)}
a.side-foot:hover{background:var(--side-hl);border-radius:8px}

/* fachada y casas: las celdas son enlaces */
a.unit{text-decoration:none;color:inherit}
.unit.st-bad{border-left-color:var(--bad)} .unit.st-blue{border-left-color:var(--blue)}
.elev.houses{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.legend .s-bad{background:var(--bad)} .legend .s-blue{background:var(--blue)} .legend .s-acc{background:var(--accent)}
.legend .leg-ip{background:var(--ok-soft);border:1px solid var(--ok)}

.zone-noimg{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink-3);font-size:.8rem}
.zone-noimg svg{width:26px;height:26px}
button.card.zone.add{font:inherit;color:var(--ink-2)}

.capture{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.btn.big{padding:14px 16px;font-size:1rem;min-height:52px}
.btn.big svg{width:20px;height:20px}
.ph-tile.pending{cursor:default;display:grid;place-items:center;background:var(--surface-3);border-style:dashed}
.pending-in{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.78rem;color:var(--ink-2);text-align:center;padding:8px}

.status-pick{display:inline-flex;align-items:center;border-radius:999px;padding:0 4px 0 10px;font-size:.8rem;font-weight:500}
.status-pick select{border:0;background:transparent;color:inherit;font:inherit;font-weight:500;padding:4px 4px;cursor:pointer}
.status-pick.st-ok{background:var(--ok-soft);color:var(--ok)}
.status-pick.st-warn{background:var(--warn-soft);color:var(--warn)}
.status-pick.st-idle{background:var(--idle-soft);color:var(--idle)}
.status-pick.st-bad{background:var(--bad-soft);color:var(--bad)}
.status-pick.st-blue{background:var(--blue-soft);color:var(--blue)}
.status-pick.st-run{background:var(--run-soft);color:var(--run)}
.status-pick.st-acc{background:var(--accent-soft);color:var(--accent)}
.status-pick select option{color:var(--ink);background:var(--surface)}

.row.wrap{flex-wrap:wrap}
.progress-col{flex:1;min-width:160px;display:flex;flex-direction:column;gap:4px}
.toolbar.wide{width:100%}
.toolbar.end{justify-content:flex-end;flex-wrap:nowrap}
.inp.auto{width:auto;max-width:100%}
.feed-ico.lg{width:44px;height:44px}
.row-file{display:flex;gap:10px;align-items:center;min-width:0}
.fico.sm{width:32px;height:38px;font-size:.56rem;padding-bottom:4px}
button.drop{width:100%;font:inherit}
.slot.over{outline:2px dashed var(--accent);outline-offset:-2px}
.note.click{cursor:pointer}
.queue{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow-y:auto}
.err{color:var(--bad);font-size:.84rem}

.doc-page{max-width:720px;margin:0 auto;padding:32px 16px 64px;display:flex;flex-direction:column;gap:12px;line-height:1.6}
.doc-page h1{font-size:2.1rem}
.doc-page h2{margin-top:12px}
.doc-page ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}

@media (max-width:900px){
  .bottom{grid-auto-columns:1fr}
}
@media (max-width:640px){
  .capture{grid-template-columns:minmax(0,1fr)}
  .toolbar.end{justify-content:flex-start}
}
@media (max-width:900px){
  /* En el teléfono las migas se quedan en «padre › actual»: la ruta entera no cabe. */
  .crumbs > *{display:none}
  .crumbs > :nth-last-child(-n+3){display:inline-flex}
}

/* ---------- panel de plataforma y uso del plan ---------- */
.firm-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.firm{cursor:pointer}
.firm:hover{border-color:var(--ink-3)}
.firm.off{opacity:.7}
.meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px 16px}
.meters.compact{background:var(--surface-3);border:1px solid var(--line-2);border-radius:8px;padding:12px}
.meter{display:flex;flex-direction:column;gap:5px;min-width:0}
.meter-h{display:flex;justify-content:space-between;gap:8px;font-size:.8rem;color:var(--ink-2)}
.meter-h b{color:var(--ink);font-weight:600;white-space:nowrap}
.meter-h small{color:var(--ink-3);font-weight:400}
.meter .bar{height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.meter .bar i{display:block;height:100%;background:var(--blue)}
.meter.warn .bar i{background:var(--warn)} .meter.bad .bar i{background:var(--bad)}
.meter.bad .meter-h b{color:var(--bad)}
.admin-line{display:flex;gap:6px;align-items:center}
.admin-line svg{width:14px;height:14px}
.block-h{font-size:1rem;display:flex;align-items:center;gap:10px;margin-top:6px}
.block-h::after{content:"";flex:1;height:1px;background:var(--line-2)}

/* ---------- facturación ---------- */
.inv-lines-h,.inv-line{display:grid;grid-template-columns:minmax(0,3fr) 70px minmax(0,1.2fr) minmax(0,1.3fr) minmax(0,1.4fr) 110px;gap:6px;align-items:center}
.inv-lines-h{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.inv-lines{display:flex;flex-direction:column;gap:6px}
.inv-line .inp{padding:7px 8px}
.inv-line-total{text-align:right;font-weight:600;white-space:nowrap}
.inv-totals{display:flex;justify-content:flex-end;gap:18px;flex-wrap:wrap;font-size:.9rem;color:var(--ink-2)}
.inv-totals b{color:var(--ink)}
.inv-totals .grand b{font-family:var(--f-display);font-size:1.3rem}
.inv-head{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;align-items:flex-start}
.inv-balance{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.inv-balance b{font-family:var(--f-display);font-size:2rem;line-height:1}
.readonly{padding:9px 0;font-weight:500}
.row.voided{opacity:.55}
.row.voided b{text-decoration:line-through}
.money-big{font-size:1.6rem!important}
.aging{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.aging-cell{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface-3)}
.aging-cell b{font-size:1.05rem}
.aging-cell.late{border-color:var(--bad);background:var(--bad-soft)}
.aging-cell.late b{color:var(--bad)}
.aging-cell.total{border-color:var(--ink-3)}
.overdue-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--bad-soft);color:var(--bad);padding:10px 24px;font-size:.88rem;font-weight:500}
.overdue-bar a{color:var(--bad);margin-left:auto;font-weight:600}
@media (max-width:760px){
  .inv-lines-h{display:none}
  /* La descripción arriba; cantidad, unidad y valor en un renglón; impuesto y total en otro. */
  .inv-line{grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1.25fr);padding:8px;border:1px solid var(--line-2);border-radius:8px}
  .inv-line [name=description]{grid-column:1/-1}
  .inv-line [name=tax]{grid-column:span 2}
  .overdue-bar{padding:10px 16px}
}

/* ---------- vanos de un recinto ---------- */
.openings{display:flex;flex-direction:column;gap:6px}
.opening{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:8px;align-items:center}

/* ---------- pie de la lateral: quien entra y salir, a la vista ---------- */
.side-foot{display:flex;align-items:center;gap:6px}
.side-me{display:flex;gap:10px;align-items:center;flex:1;min-width:0;color:inherit;text-decoration:none;padding:6px;border-radius:8px}
.side-me:hover{background:var(--side-hl)}
.side-out{flex:none;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--side-hl);border-radius:8px;background:none;color:var(--side-ink);cursor:pointer}
.side-out:hover{background:var(--side-hl);color:#fff}

/* ---------- menú del teléfono y la tableta: hoja con buscador ---------- */
.nav-sheet{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center}
.nav-sheet-back{position:absolute;inset:0;background:rgba(10,15,20,.5)}
.nav-sheet-panel{position:relative;display:flex;flex-direction:column;width:100%;max-width:560px;max-height:min(86dvh,720px);background:var(--surface);border-radius:16px 16px 0 0;box-shadow:var(--shadow);padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));animation:sheet-up .16s ease-out}
.nav-sheet-panel:focus{outline:none}
@keyframes sheet-up{from{transform:translateY(1.5rem);opacity:0}}
.nav-sheet-head{display:flex;gap:8px;align-items:center;flex:none}
.nav-sheet-search{flex:1;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--surface-3);color:var(--ink-3)}
.nav-sheet-search input{flex:1;min-width:0;border:0;background:none;padding:11px 0;font-size:16px;color:var(--ink);outline:none}
.nav-sheet-search input::-webkit-search-cancel-button{display:none}
.nav-sheet-list{flex:1 1 auto;min-height:120px;overflow-y:auto;padding:6px 2px;margin:6px 0}
.nav-sheet-group{margin:12px 8px 4px;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.nav-sheet-link{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:8px;color:var(--ink);text-decoration:none;min-height:44px}
.nav-sheet-link:hover,.nav-sheet-link:focus-visible{background:var(--surface-3)}
.nav-sheet-link.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav-sheet-empty{padding:24px 8px;text-align:center;color:var(--ink-3)}
.nav-sheet-foot{flex:none;border-top:1px solid var(--line-2);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.nav-sheet-me{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;color:var(--ink);text-decoration:none}
.nav-sheet-me:hover{background:var(--surface-3)}
.nav-sheet-me small{display:block;color:var(--ink-3);font-size:.76rem}
.nav-sheet-me .avatar{flex:none}
.btn.block{width:100%;justify-content:center}
body.nav-sheet-open{overflow:hidden}
.bottom button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;font-size:.68rem;color:var(--ink-3);min-height:56px;justify-content:center;border:0;background:none;cursor:pointer}
.bottom button svg{width:22px;height:22px}

/* ---------- tipo de proyecto y mapa ---------- */
.pick-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.pick-card{display:flex;cursor:pointer}
.pick-card input{position:absolute;opacity:0;pointer-events:none}
.pick-card span{flex:1;display:flex;flex-direction:column;gap:4px;padding:14px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface)}
.pick-card span svg{width:24px;height:24px;color:var(--ink-3)}
.pick-card small{color:var(--ink-3);font-size:.8rem;line-height:1.4}
.pick-card input:checked + span{border-color:var(--accent);background:var(--accent-soft)}
.pick-card input:checked + span svg{color:var(--accent)}
.pick-card input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
/* Alto por el ancho de la pantalla, sin aspect-ratio: con un min-height, la proporción
   lo convierte en un ancho mínimo y el mapa se sale de la tarjeta en el teléfono. */
.map-box{position:relative;width:100%;min-width:0;height:clamp(220px,42vw,380px);border-top:1px solid var(--line-2);overflow:hidden;border-radius:0 0 var(--r, 10px) var(--r, 10px)}
.map-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.card-more{display:flex;justify-content:flex-end;padding:10px 16px;border-top:1px solid var(--line-2)}

/* ---------- deuda de una firma ---------- */
.debt{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:8px;font-size:.86rem;background:var(--surface-3);color:var(--ink-2)}
.debt svg{margin-top:2px}
.debt.ok{background:var(--ok-soft);color:var(--ok)}
.debt.warn{background:var(--warn-soft);color:var(--warn)}
.debt.bad{background:var(--bad-soft);color:var(--bad)}
.warn-text{color:var(--warn)} .bad-text{color:var(--bad)} .ok-text{color:var(--ok)}

/* ---------- equipo del conjunto ---------- */
.members{display:flex;flex-direction:column;gap:6px}
.member{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 10px;border:1px solid var(--line-2);border-radius:8px}
.member.on{border-color:var(--accent-line);background:var(--accent-soft)}
.member-who{display:flex;gap:10px;align-items:center;cursor:pointer;min-width:0}
.member-who span{display:flex;flex-direction:column;min-width:0}
.member-who small{color:var(--ink-3)}
.member-who input,.member-buy input{width:18px;height:18px;accent-color:var(--accent)}
.member-buy{display:flex;gap:6px;align-items:center;font-size:.84rem;cursor:pointer}
.member select:disabled{opacity:.5}
@media (max-width:640px){.member{grid-template-columns:minmax(0,1fr) auto}.member select{grid-column:1/-1}}
.checks.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.check.off{opacity:.6;cursor:default}
.card-tabs{padding:4px 12px 0;border-bottom:1px solid var(--line-2)}
.card-tabs .tabs{box-shadow:none;margin:0}

/* ---------- tareas ---------- */
.task-row{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-2);cursor:pointer;font:inherit;color:inherit}
.task-row:hover{background:var(--surface-3)}
.task-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.task-head{display:flex;gap:12px;align-items:flex-start}
.task-title{font-size:1.35rem}
.task-photos{display:flex;flex-wrap:wrap;gap:8px}
.task-photo{width:84px;height:84px;border-radius:8px;overflow:hidden;border:1px solid var(--line);padding:0;background:var(--surface-3);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.74rem;color:var(--ink-3)}
.task-photo img{width:100%;height:100%;object-fit:cover}
.task-photo.add{border-style:dashed}
.task-thread{display:flex;flex-direction:column;gap:8px}
.task-msg{padding:8px 10px;border-radius:8px;background:var(--surface-3);font-size:.88rem}
.task-msg.event{background:none;border-left:3px solid var(--line);border-radius:0;padding:4px 10px}
.task-reply{display:flex;gap:8px;align-items:flex-end}
.task-reply textarea{flex:1}
.linklike{background:none;border:0;padding:0;color:var(--blue);cursor:pointer;font:inherit;text-decoration:underline}

/* ---------- obra nueva: estructura del trabajo ---------- */
.works{display:flex;flex-direction:column}
.works-chapter{border-top:1px solid var(--line-2)}
.works-ch-h{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--surface-3)}
.works-ch-h b{font-family:var(--f-display);font-size:1.02rem}
.works-row{display:flex;align-items:center;gap:12px;padding:9px 16px 9px 28px;border-top:1px solid var(--line-2);font-size:.9rem}
.works-row.click{cursor:pointer}
.works-row.click:hover{background:var(--surface-3)}
.qty-grid{display:flex;flex-direction:column;gap:6px}
.qty-row{display:grid;grid-template-columns:minmax(0,1fr) 9.5rem;gap:10px;align-items:center;font-size:.9rem}
.input-unit{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.input-unit .inp{border:0;border-radius:0;min-width:0;flex:1;text-align:right}
.input-unit small{padding:0 10px;color:var(--ink-3);font-family:var(--f-mono);font-size:.76rem;flex:none}
.loc-grid td{padding:4px}
.loc-grid .inp{min-width:5.5rem;text-align:right;padding:6px 8px}
.checks.floors{display:flex;flex-wrap:wrap;gap:6px}
.check.sm{padding:6px 10px}
@media (max-width:640px){.qty-row{grid-template-columns:minmax(0,1fr) 7.5rem}}

/* ---------- presupuestos ---------- */
.budget-layout{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:16px;align-items:start}
.budget-totals{position:sticky;top:76px}
.totals-kv{padding:0 16px 16px;grid-template-columns:1fr auto}
.totals-kv dd{text-align:right}
.budget-lines td.r{white-space:nowrap}
@media (max-width:1000px){.budget-layout{grid-template-columns:minmax(0,1fr)}.budget-totals{position:static}}
.apu-comps{display:flex;flex-direction:column;gap:6px}
.apu-comp{display:grid;grid-template-columns:8.5rem minmax(0,2fr) 5rem 5.5rem 7rem 4.8rem auto;gap:6px;align-items:center}
.apu-waste .inp{min-width:0}
@media (max-width:760px){.apu-comp{grid-template-columns:repeat(3,minmax(0,1fr))}.apu-comp [data-k=description]{grid-column:1/-1}}
.totals-kv dd{white-space:nowrap}
.totals-kv .money-big{font-size:1.25rem!important}

/* --- Unidad con buscador ------------------------------------------------------ */
.chip-btn.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--ink);font-weight:600}
.unit-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.unit-search{position:relative}
.unit-results{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.14);max-height:min(15rem,40vh);overflow-y:auto;padding:4px}
.unit-results button{display:flex;width:100%;justify-content:space-between;gap:10px;border:0;background:none;padding:8px 10px;border-radius:7px;text-align:left;cursor:pointer;color:var(--ink);font-size:.9rem}
.unit-results button:hover,.unit-results button:focus-visible{background:var(--surface-3)}
.unit-results small{color:var(--ink-3);font-family:var(--f-mono)}
.unit-none{padding:10px;color:var(--ink-3);font-size:.86rem}
@media (pointer:coarse){.unit-chips .chip-btn{min-height:40px;padding:8px 14px}.unit-results button{min-height:44px}}

/* --- Pestañas que no caben ---------------------------------------------------- */
.tabs-scroll{position:relative;min-width:0}
.tabs-scroll .tabs{cursor:default}
.tabs-arrow{position:absolute;top:0;bottom:1px;width:34px;border:0;display:none;align-items:center;justify-content:center;font-size:1.4rem;line-height:1;color:var(--ink-2);cursor:pointer;z-index:2}
.tabs-arrow.l{left:0;background:linear-gradient(to right,var(--bg) 55%,transparent)}
.tabs-arrow.r{right:0;background:linear-gradient(to left,var(--bg) 55%,transparent)}
.tabs-scroll.more-l .tabs-arrow.l,.tabs-scroll.more-r .tabs-arrow.r{display:flex}
.tabs-arrow:hover{color:var(--accent)}
.card .tabs-arrow.l{background:linear-gradient(to right,var(--surface) 55%,transparent)}
.card .tabs-arrow.r{background:linear-gradient(to left,var(--surface) 55%,transparent)}
@media (pointer:coarse){.tabs-arrow{width:28px}}

.member-find{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.member-find .inp{flex:1 1 16rem}

/* --- Avance de obra -------------------------------------------------------------- */
.pbar{display:block;height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-top:5px;max-width:28rem}
.pbar i{display:block;height:100%;background:var(--idle)}
.pbar.warn i{background:var(--warn)} .pbar.ok i{background:var(--ok)} .pbar.run i{background:var(--run)}
.progress-head{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end}
.progress-big{display:flex;flex-direction:column;gap:2px;flex:1 1 16rem}
.progress-big b{font-family:var(--f-display);font-size:2.4rem;line-height:1}
.progress-big span{color:var(--ink-2);font-size:.85rem}
.progress-cert{display:flex;flex-direction:column;gap:2px;min-width:12rem}
.progress-cert b{font-family:var(--f-display);font-size:1.5rem;line-height:1}
.prog-row .num{min-width:4.5rem;text-align:right}
.block-h.pad{padding:0 16px;margin-top:12px}
.pcell .num{font-size:.78rem;color:var(--ink-2)}
.pcell .pbar{margin-top:2px}
.unit.st-none{border-left-color:var(--line);opacity:.6}
.sub-tabs button{font-size:.85rem;padding:8px 12px}
.log-body{margin:6px 0 0;white-space:pre-wrap}
.num.neg{color:var(--bad)}
.checks.stack-sm{display:flex;flex-direction:column;gap:8px}

/* --- Desplegable con lupa ------------------------------------------------------- */
.ss{position:relative;min-width:0}
.ss-native{position:absolute!important;inset:0;opacity:0!important;pointer-events:none}
.ss-btn{width:100%;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2377828F' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M14 14l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.ss-btn.ss-empty{color:var(--ink-3)}
.ss-btn:disabled{opacity:.55;cursor:not-allowed}
.ss-pop{position:fixed;z-index:1000;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);overflow:hidden}
.ss-search{padding:8px;border-bottom:1px solid var(--line-2)}
.ss-search .inp{width:100%}
.ss-list{overflow-y:auto;padding:4px;min-height:0}
.ss-list button{display:block;width:100%;border:0;background:none;text-align:left;padding:8px 10px;border-radius:7px;cursor:pointer;color:var(--ink);font-size:.9rem}
.ss-list button.active{background:var(--surface-3)}
.ss-list button.on{font-weight:600;color:var(--accent)}
.ss-group{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);padding:8px 10px 2px}
.ss-none{padding:10px;color:var(--ink-3);font-size:.86rem}
@media (pointer:coarse){.ss-list button{min-height:44px}}

/* --- Caja ------------------------------------------------------------------------ */
.cash-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.cash-action{display:flex;gap:12px;align-items:center;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;color:var(--ink)}
.cash-action:hover:not(:disabled){border-color:var(--accent-line);background:var(--accent-soft)}
.cash-action:disabled{opacity:.5;cursor:not-allowed}
.cash-action svg{width:22px;height:22px;color:var(--accent);flex:none}
.cash-action span{display:flex;flex-direction:column;gap:2px}
.cash-action small{color:var(--ink-3);font-size:.76rem}
.cash-accounts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.cash-acct{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px 16px;cursor:pointer;border:1px solid var(--line);color:var(--ink)}
.cash-acct b{font-size:1rem}
.cash-acct strong{font-family:var(--f-display);font-size:1.4rem;margin-top:4px}
.cash-acct.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.cash-acct.off{opacity:.6}
.num.in{color:var(--ok)} .num.out{color:var(--bad)}
.cash-totals{display:flex;flex-wrap:wrap;gap:8px 20px;padding:10px 16px;border-bottom:1px solid var(--line-2);font-size:.88rem;color:var(--ink-2)}
.cash-filters .inp:not(.grow){flex:0 1 13rem}
.cash-table tr.voided td{text-decoration:line-through;color:var(--ink-3)}
.cash-table tr.voided .num{color:var(--ink-3)}
.cash-detail-amount{font-size:1.8rem;font-family:var(--f-display)}
.nowrap{white-space:nowrap}
.row-checks{display:flex;gap:16px;flex-wrap:wrap}
@media (max-width:640px){.cash-actions{grid-template-columns:1fr 1fr}.cash-action small{display:none}.cash-filters .inp:not(.grow){flex:1 1 45%}}

/* --- Reparación ------------------------------------------------------------------ */
.repair-start .card-b{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.repair-start b{display:flex;gap:8px;align-items:center}
.repair-start .grow{flex:1 1 20rem}
.legend .leg-none{display:inline-block;width:10px;height:10px;border:1px dashed var(--ink-3);border-radius:2px}
.unit.st-none .faint{font-size:.72rem}
.repair-ch{border-top:1px solid var(--line-2);padding-top:6px}
.fold-quiet{color:var(--ink-3);font-size:.85rem}
.fold-quiet summary{cursor:pointer}
.fold-quiet p,.fold-quiet .btn{margin-top:8px}
.ev-stage{margin-bottom:14px}
.ev-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:6px}
.ev-thumb{padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;aspect-ratio:1;background:var(--surface-2);cursor:pointer}
.ev-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cash-search{border-bottom:0;padding-bottom:0}
.cash-search .inp{width:100%}
.num.pend{color:var(--warn)}
.nav-head{gap:8px}
.nav-head h2{margin:0}
.chips-row{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.plan-fmt{font-family:var(--f-mono);font-size:.7rem;border:1px solid var(--line);border-radius:4px;padding:2px 6px;color:var(--ink-2);min-width:2.6rem;text-align:center}
.block-h-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cat-add{display:flex;gap:8px;margin-bottom:10px}
.cat-row .inp{min-width:0}
.check-matrix td,.check-matrix th{text-align:center}
.check-matrix td:first-child,.check-matrix th:first-child{text-align:left}
.perm-search{margin-bottom:6px}
.log-media{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.log-media img{width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--line);cursor:pointer}
.check-matrix .group-row th{text-align:left;background:var(--surface-3);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
.ok-text{color:var(--ok);font-weight:700}
.rows.compact .row{padding-top:6px;padding-bottom:6px}
.log-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:.86rem}
.log-links a{display:inline-flex;gap:4px;align-items:center}
.log-link-rows{display:flex;flex-direction:column;gap:6px}
.repair-list{max-height:min(16rem,40vh);overflow-y:auto;margin:6px 0 10px;padding-left:1.2rem;columns:2;column-gap:20px}
@media (max-width:640px){.repair-list{columns:1}}

/* --- Compras ---------------------------------------------------------------------- */
.plines{display:flex;flex-direction:column;gap:8px}
.pline{display:grid;grid-template-columns:minmax(10rem,2.2fr) 5rem 6rem minmax(7rem,1fr) 6.5rem auto;gap:6px;align-items:center}
.pline .inp{min-width:0;width:100%}
/* En pantalla estrecha: la descripción arriba y cantidad, unidad, valor e impuesto en un
   solo renglón, con la cantidad angosta. Debajo, las fichas y la papelera. */
@media (max-width:760px){.pline{grid-template-columns:4.2rem minmax(0,.9fr) minmax(0,1.2fr) minmax(0,1.1fr);padding:8px;border:1px solid var(--line-2);border-radius:8px}.pline .pl-desc{grid-column:1/-1}}
@media (max-width:420px){.pline{grid-template-columns:4.2rem minmax(0,1fr)}}
.total-row td{border-top:2px solid var(--line)}
.task-dates{border-top:0;padding-top:0}
.date-range{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--ink-2)}
.date-range .inp{width:auto}
.cash-net{padding-left:14px;border-left:1px solid var(--line)}
.check-matrix.dense td,.check-matrix.dense th{padding:4px 8px;font-size:.84rem}
.check-matrix .short-name{display:none}
@media (max-width:760px){.check-matrix .full-name{display:none}.check-matrix .short-name{display:inline}}
.roles-matrix{padding:8px 12px 12px}
.tag-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.tag-chips.big{margin:0}
.tag-chips.big .tag{font-size:.78rem;padding:2px 8px;text-decoration:none}
.chips-row.tight{padding:0}
.chip-check{display:inline-flex}
.chip-check input{position:absolute;opacity:0;pointer-events:none}
.chip-check span{border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:.8rem;cursor:pointer;background:var(--surface)}
.chip-check input:checked+span{background:var(--accent-soft);border-color:var(--accent-line);font-weight:600}
.chip-check input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.check-list{max-height:11rem;overflow-y:auto;border:1px solid var(--line-2);border-radius:8px;padding:6px 8px;display:flex;flex-direction:column;gap:2px;margin-top:6px}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 16px;border-top:1px solid var(--line-2)}
.pager-pages{display:inline-flex;align-items:center;gap:8px}

/* Edición rápida: el lápiz encima de una celda o una tarjeta (core/quick-edit.js).
   Siempre a la vista pero apagado —escondido hasta el hover nadie lo encuentra,
   y en un táctil no hay hover—; se enciende al pasar por encima. */
.qe-slot{position:relative;display:flex;min-width:0}
.qe-slot>a{flex:1;min-width:0}
.quick-edit{position:absolute;top:4px;right:4px;width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink-3);display:grid;place-items:center;cursor:pointer;opacity:.6;transition:opacity .12s,color .12s}
.quick-edit svg{width:14px;height:14px}
.quick-edit:hover{color:var(--ink);border-color:var(--ink-3)}
.qe-slot:hover .quick-edit,.quick-edit:focus-visible{opacity:1;color:var(--ink-2)}
.qe-slot>.cj .cj-top{padding-right:30px}
@media (pointer:coarse){.quick-edit::after{content:"";position:absolute;inset:-9px}}

/* Parqueaderos: la fila que se está editando. */
.pk-table .pk-edit td{vertical-align:top}
.pk-table .pk-edit .inp{width:100%;min-width:0}
.pk-table .pk-edit .check{margin-top:6px}
.pk-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;justify-content:flex-end}

/* Datos de la firma: el formulario y, al lado, el logo. */
.firm-grid{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:16px;align-items:start}
.firm-form .card-f{display:flex;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--line-2)}
.logo-frame{border:1px dashed var(--line);border-radius:10px;min-height:120px;display:grid;place-items:center;padding:16px;background:repeating-conic-gradient(var(--surface-2) 0 25%,var(--surface) 0 50%) 0 0/16px 16px}
.logo-frame img{max-width:100%;max-height:120px;object-fit:contain}
.logo-frame span{display:inline-flex;gap:6px;align-items:center}
@media (max-width:900px){.firm-grid{grid-template-columns:1fr}}

/* El equipo del proyecto, editable en la tarjeta. */
.team-row{flex-wrap:wrap;gap:8px 10px;align-items:center}
.team-row .grow{flex:1 1 12rem;min-width:0}
.team-row .inp.sm{width:auto;max-width:13rem}
.member-picks{display:flex;flex-direction:column;gap:6px}
.member-pick{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.member-pick:has(input:checked){border-color:var(--accent,var(--ink-3));background:var(--surface-2)}
.member-pick b{display:block}
.member-pick small{color:var(--ink-3)}
.member-pick .inp.sm{width:auto;max-width:12rem}
@media (max-width:640px){.member-pick{flex-wrap:wrap}.member-pick .inp.sm{max-width:none;width:100%}}

/* Del presupuesto a la factura: elegir capítulos y actividades, y su estado. */
.bill-pick{display:flex;flex-direction:column;gap:14px}
.bill-chapter{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.bill-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line-2);cursor:pointer}
.bill-row.head{border-top:0;background:var(--surface-2)}
.bill-row:not(.head){padding-left:34px}
.bill-row small{color:var(--ink-3)}
.bill-row:has(input:disabled){opacity:.5}
.bill-status{display:flex;flex-direction:column}
.bill-ch{border-top:1px solid var(--line-2)}
.bill-ch summary{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;flex-wrap:wrap}
.bill-ch summary small{color:var(--ink-3)}
.bill-ch .inp.sm{width:auto;max-width:11rem}
.bill-ch .rows .row{padding-left:32px;flex-wrap:wrap}
.inv-line.from-budget [name=description]{border-left:3px solid var(--blue)}

/* El visor de PDF del teléfono (core/pdf-viewer.js): la pantalla entera. */

/* Uso de la cuenta: fichas con el nombre arriba, la cifra grande y lo que queda. */
.usage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.usage-tile{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);min-width:0}
.usage-label{font-size:.8rem;font-weight:600;color:var(--ink-2)}
.usage-num{font-family:var(--f-display);font-size:1.6rem;line-height:1;color:var(--ink)}
.usage-num small{font-family:var(--f-body,inherit);font-size:.85rem;font-weight:400;color:var(--ink-3)}
.usage-tile .bar{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.usage-tile .bar i{display:block;height:100%;background:var(--blue)}
.usage-tile.warn .bar i{background:var(--warn)} .usage-tile.bad .bar i{background:var(--bad)}
.usage-tile.bad .usage-num{color:var(--bad)}
.usage-foot{font-size:.75rem;color:var(--ink-3)}
@media (max-width:420px){.usage-grid{grid-template-columns:1fr 1fr}}

/* La fachada: el lápiz va abajo a la derecha, donde no tapa el número. */
.qe-slot>.unit+.quick-edit{top:auto;bottom:3px;right:3px;width:22px;height:22px}
.qe-slot>.unit+.quick-edit svg{width:12px;height:12px}

/* Inicio, pestaña Financiera. */
.fin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;align-items:start}
.fin-body{display:flex;flex-direction:column;gap:14px}
.fin-figs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fin-figs>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.fin-label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.fin-amt{font-family:var(--f-display);font-size:1.45rem;line-height:1.15;color:var(--ink);overflow-wrap:anywhere}
.fin-amt.big{font-size:1.9rem}
.fin-amt.zero{color:var(--ink-3)}
.fin-due{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--line-2);text-decoration:none;color:inherit}
.fin-due-row{display:flex;flex-direction:column;gap:4px}
.fin-bar{height:6px;border-radius:3px;background:var(--ok-soft);overflow:hidden}
.fin-bar i.late{display:block;height:100%;background:var(--bad)}
@media (max-width:420px){.fin-figs{grid-template-columns:1fr}}

.plain-link{text-decoration:none;color:inherit;min-width:0}
.plain-link:hover b{text-decoration:underline}

.chip-btn.static{cursor:default}
.owner-url{font-family:var(--f-mono);font-size:.8rem;word-break:break-all;background:var(--surface-2);border:1px solid var(--line-2);border-radius:8px;padding:10px 12px}

/* La ficha pública del propietario (/propietario/<enlace>). */
.owner-page{min-height:100dvh;display:flex;justify-content:center;padding:calc(24px + env(safe-area-inset-top)) 16px 32px;background:var(--bg)}
.owner-card{width:100%;max-width:40rem;display:flex;flex-direction:column;gap:12px}
.owner-head{padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.owner-logo{max-height:48px;max-width:200px;object-fit:contain}
.owner-card h1{font-size:1.8rem}
.owner-card h2{font-size:1.05rem;margin-top:8px}
.owner-status{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.owner-status b{font-size:1.2rem}
.owner-card .rows{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.owner-foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-2)}

/* El manual de uso (/ayuda). */
/* La hoja base fija el body al alto de la pantalla (para la app, que se desplaza por
   dentro). En el manual se desplaza la página: con el body fijo, la cabecera pegada se
   soltaba al bajar una pantalla y dejaba un hueco encima de las pestañas. */
.manual-body{background:var(--bg);height:auto;min-height:100dvh;overflow:visible}
.manual-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:var(--surface);border-bottom:1px solid var(--line)}
.manual-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.manual-brand small{display:block;color:var(--ink-3);font-size:.75rem}
.manual-layout{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:24px;max-width:72rem;margin:0 auto;padding:20px 16px 48px}
.manual-index{position:sticky;top:calc(var(--manual-top,60px) + 16px);align-self:start;font-size:.88rem}
.manual-index-h{font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;margin-bottom:8px}
.manual-index ol{padding-left:1.2rem;display:flex;flex-direction:column;gap:6px}
.manual-index a{color:var(--ink-2);text-decoration:none}
.manual-index a:hover{color:var(--ink);text-decoration:underline}
.manual{display:flex;flex-direction:column;gap:20px;min-width:0}
.manual h1{font-size:2rem}
.manual-lead{font-size:1.02rem;color:var(--ink-2)}
/* Pegada justo debajo de la cabecera, midiéndola (`--manual-top`, de ayuda.js): con un
   número fijo quedaba un hueco por donde asomaba el texto, o la tapaba. De lado a lado
   y en una fila que se desplaza, para que no ocupe dos renglones en el teléfono. */
.manual-tabs{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;position:sticky;top:var(--manual-top,60px);z-index:4;background:var(--bg);margin:0 -16px;padding:10px 16px;border-bottom:1px solid var(--line-2)}
.manual-tabs button{flex:none}
#manual section{scroll-margin-top:calc(var(--manual-top,60px) + 64px)}
.manual-tabs button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font:inherit;font-size:.85rem;cursor:pointer;color:var(--ink-2)}
.manual-tabs button.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.manual section{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:12px;scroll-margin-top:110px}
.manual h2{display:flex;align-items:center;gap:10px;font-size:1.3rem}
.manual-n{width:28px;height:28px;border-radius:50%;background:var(--accent,#14566A);color:#fff;display:grid;place-items:center;font-size:.85rem;flex:none}
.manual ul,.manual ol{padding-left:1.25rem;display:flex;flex-direction:column;gap:6px}
.manual-note{border-left:3px solid var(--warn);background:var(--warn-soft);padding:10px 14px;border-radius:6px}
.manual-table{border-collapse:collapse;width:100%;font-size:.9rem}
.manual-table th,.manual-table td{border-bottom:1px solid var(--line-2);padding:8px 10px;text-align:left;vertical-align:top}
.manual-table th{background:var(--surface-2)}
.manual-fig{margin:4px 0;display:flex;flex-direction:column;gap:8px}
.manual-fig svg{width:100%;height:auto;max-height:340px}
.manual-fig figcaption{font-size:.85rem;color:var(--ink-2)}
.manual kbd{font-family:var(--f-mono);font-size:.8em;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--surface-2)}
.manual-foot{color:var(--ink-3);font-size:.85rem;text-align:center;padding-top:12px}
/* Los esquemas pintan con las variables del tema: siguen el claro y el oscuro. */
.mf-bg{fill:var(--surface-3)} .mf-side{fill:#071D2B} .mf-card{fill:var(--surface);stroke:var(--line)}
.mf-line{fill:var(--ink-3);opacity:.55} .mf-line-s{fill:var(--ink-3);opacity:.35} .mf-line-l{fill:#fff;opacity:.35}
.mf-tab{fill:var(--surface);stroke:var(--line)} .mf-tab.on{fill:var(--ink)}
.mf-cell{fill:var(--surface);stroke:var(--line);stroke-width:1} .mf-cell.ok{stroke:var(--ok);stroke-width:3} .mf-cell.warn{stroke:var(--warn);stroke-width:3} .mf-cell.bad{stroke:var(--bad);stroke-width:3}
.mf-pen{fill:var(--surface-2);stroke:var(--ink-3)}
.mf-num{fill:#14566A} .mf-numt{fill:#fff;font:600 12px var(--f-body,sans-serif);text-anchor:middle}
.mf-t{fill:var(--ink-3);font:12px var(--f-mono,monospace)}
.mf-bar-bg{fill:var(--surface-2)} .mf-bar{fill:var(--ok)} .mf-photo{fill:var(--surface-2);stroke:var(--line)}
.mf-check{fill:var(--surface);stroke:var(--ink-3)} .mf-check.on{fill:var(--ink)}
.mf-pill{fill:var(--surface-2)} .mf-pill.ok{fill:var(--ok-soft)} .mf-pill.warn{fill:var(--warn-soft)}
.mf-flow rect{fill:var(--surface);stroke:var(--ink-3)} .mf-flow text{fill:var(--ink);font:12px var(--f-body,sans-serif);text-anchor:middle}
@media (max-width:860px){.manual-layout{grid-template-columns:1fr}.manual-index{position:static;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}}
@media print{
  .manual-top,.manual-tabs,.manual-index{display:none!important}
  .manual-layout{display:block;padding:0;max-width:none}
  .manual section{break-inside:avoid-page;border:0;padding:0 0 12px;display:flex!important}
  .manual section[hidden]{display:flex!important}
  .manual-body{background:#fff}
}

/* Portal: el estado dentro de la celda no se sale. */
.unit .small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* Equipo en el teléfono: el nombre arriba y el papel, compras y sacar en una fila. */
@media (max-width:640px){.team-row .grow{flex-basis:100%}.team-row .inp.sm{flex:1 1 8rem;max-width:none;min-width:0}}

/* Inicio → Financiera: una fila por moneda. */
.fin-table th small{display:block;font-weight:400;color:var(--ink-3);font-size:.72rem;text-transform:none}
.fin-table td{white-space:nowrap}
.fin-cash{display:flex;flex-wrap:wrap;gap:24px;padding:12px 16px 16px}
.fin-cash>div{display:flex;flex-direction:column;gap:2px}

/* Menú lateral: los rótulos de grupo pliegan y despliegan. */
.nav-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;cursor:pointer;text-align:left;border-radius:6px}
.nav-toggle:hover{color:var(--side-ink,#fff)}
.nav-toggle svg{width:12px;height:12px;transform:rotate(90deg);transition:transform .15s;opacity:.7}
.nav-toggle.folded svg{transform:rotate(0deg)}

/* Compras: la actividad junto al capítulo, y la cabecera de la pestaña del proyecto. */
.purchase-head{flex-wrap:wrap;gap:8px}
.purchase-stats{display:flex;gap:16px;flex-wrap:wrap;font-size:.9rem}
.purchase-stats b{font-family:var(--f-display);font-size:1.1rem}
.no-project th:nth-child(3),.no-project td:nth-child(3){display:none}

/* La firma del producto: discreta, al pie de lo que ven los de fuera y en el menú. */
.brand-sig{margin:14px 0 0;text-align:center;font-size:.74rem;letter-spacing:.02em;color:var(--ink-3)}
.brand-sig b{font-family:var(--f-display);font-weight:600;color:var(--ink-2)}
.brand-sig span{color:var(--accent-text);font-weight:600}
.side .brand small.brand-by{letter-spacing:.04em;opacity:.8}

/* Ítems: la descripción que salió del catálogo lleva una marca, y la lista que se ofrece. */
.inp.from-item{border-left:3px solid var(--accent)}
.item-pop .ss-list button{display:flex;justify-content:space-between;gap:10px;align-items:center;text-align:left}
.item-opt{display:flex;flex-direction:column;min-width:0}
.item-opt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-opt small{color:var(--ink-3);font-size:.75rem}
.item-pop .num{white-space:nowrap;font-size:.82rem;color:var(--ink-2)}

/* A qué se carga una línea de compra: una ficha, no dos desplegables. */
.pl-where{min-width:0;display:flex}
.where-chip{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:100%;height:36px;padding:0 10px;border:1px dashed var(--line);border-radius:999px;background:none;color:var(--ink-3);font-size:.82rem;cursor:pointer}
.where-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.where-chip svg{flex:none;width:15px;height:15px}
.where-chip.on{border-style:solid;border-color:var(--accent-line);background:var(--accent-soft);color:var(--ink)}
.chip-pop .ss-list button{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.chip-pop .where-ch small{color:var(--ink-3);font-size:.74rem}
.chip-pop .where-act{padding-left:26px;font-size:.86rem;color:var(--ink-2)}
@media (pointer:coarse){.where-chip{height:44px}}

/* Portal y propietario: avance, fotos. */
.pp-total{display:flex;flex-direction:column;gap:6px}
.pp-total>div{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pp-total b{font-family:var(--f-display);font-size:1.6rem}
.pp-total .bar{height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.pp-total .bar i,.portal-progress .meter .bar i{display:block;height:100%;background:var(--run);border-radius:inherit}
.pp-unit b{font-size:1.25rem}
.portal-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.portal-photos a{display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--surface-2)}
.portal-photos img{width:100%;height:100%;object-fit:cover;display:block}
.owner-card .card{margin-top:14px}

/* La unidad: las habituales en fichas y una lupa al final que abre el buscador. */
.unit-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.unit-row .unit-chips{display:contents}
.unit-find{display:inline-grid;place-items:center;padding:0 10px}
.unit-find svg{width:15px;height:15px}
.unit-search{margin-top:8px}

/* Una lista flotante nunca pasa de la pantalla: el alto lo pone placePopover y lo
   que no cabe se desplaza dentro, con el buscador fijo arriba. */
.ss-pop{display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}
.ss-pop .ss-list{overflow-y:auto;min-height:0;flex:1}

/* Las fichas de una línea (capítulo o fase, retención): un renglón propio debajo,
   pequeño, para que la línea quepa entera arriba. */
.pl-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:-2px}
.pl-chips:empty{display:none}
.pl-wh{min-width:0;display:flex}
.where-chip{height:30px;font-size:.8rem}
.chip-pop .chip-checks{display:flex;flex-direction:column;gap:2px;padding:6px}
.chip-pop .chip-checks .check{padding:6px 8px;border-radius:6px}
.chip-pop .chip-checks .check:hover{background:var(--surface-2)}
.bill-row .billed{color:var(--ok, #15803D)}
@media (pointer:coarse){.where-chip{height:44px}}

/* Las otras monedas de la empresa: fichas que se quitan con la ×. */
.extra-cur{display:inline-flex;align-items:center;gap:6px;padding-right:4px}
.chip-x{border:0;background:none;color:inherit;font-size:1rem;line-height:1;cursor:pointer;padding:0 4px;border-radius:50%}
.chip-x:hover{background:rgba(0,0,0,.08)}
[data-extras]:not(:empty){margin-bottom:8px}

/* Campos de una línea más bajos y más juntos en pantalla estrecha: son cinco por línea. */
@media (max-width:760px){
  .pline .inp,.inv-line .inp,.pline .ss-btn,.inv-line .ss-btn{height:36px;min-height:36px;padding:6px 8px;font-size:.88rem}
  .pline,.inv-line{gap:5px}
}
/* Con el dedo, un poco más altos, sin volver a los 44 px de antes. */
@media (max-width:760px) and (pointer:coarse){
  .pline .inp,.inv-line .inp,.pline .ss-btn,.inv-line .ss-btn{height:40px;min-height:40px}
}
.pl-chips{align-items:center}
.pl-chips .chip-set{display:contents}
.pl-del{margin-left:auto}

/* Lo que el cliente no aprobó: se queda a la vista, apagado y marcado. */
.budget-lines tr.not-approved td{color:var(--ink-3)}
.budget-lines tr.not-approved td b{text-decoration:line-through;text-decoration-color:var(--bad)}
.tag.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.not-approved-kv{color:var(--bad)}
.approve-sum{font-size:.95rem}

.kpi .kpi-text{font-size:1.15rem}

/* El certificado de pago: el texto que se firma y la caja de firma. */
.cert-text{font-size:1.02rem;line-height:1.55}
.cert-sign{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.cert-sign h2{margin:0}
.cert-sign .inp{font-size:16px}
.notice.ok{background:var(--ok-soft)} .notice.ok svg{color:var(--ok)}
.cert-box{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:10px}
.cert-box .toolbar{flex-wrap:wrap}
.cert-kv{padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}

/* Cotizaciones de compra: el cuadro comparativo y la carga de precios. */
.modal.xwide{max-width:min(72rem,calc(100vw - 32px))}
.compare table{min-width:36rem}
.compare th.compare-head{vertical-align:bottom}
.compare th.compare-head > *{display:block}
.compare th.compare-head.chosen,.compare td.best{background:var(--ok-soft)}
.compare td.best{font-weight:600}
.compare-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.quote-prices{display:flex;flex-direction:column;gap:8px}
.quote-price{display:grid;grid-template-columns:1fr 10rem 12rem;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-2)}
.quote-price .grow{display:flex;flex-direction:column}
@media (max-width:640px){.quote-price{grid-template-columns:1fr 1fr}.quote-price .grow{grid-column:1/-1}}
.pline.unpriced{grid-template-columns:1fr 6rem 9rem}
.compare th.compare-head,.compare tfoot th{text-transform:none;letter-spacing:normal;font-family:inherit;font-size:.86rem;color:var(--ink)}
.compare tfoot th .bad-text{color:var(--bad)}

/* Ventas: el tablero del embudo. Columnas que se desplazan de lado en el teléfono. */
.kanban{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x proximity}
.kb-col{flex:0 0 16.5rem;display:flex;flex-direction:column;gap:8px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;padding:10px;scroll-snap-align:start;min-height:12rem}
.kb-col.over{outline:2px dashed var(--accent);outline-offset:-4px}
.kb-col header{display:flex;align-items:center;gap:6px;font-size:.88rem}
.kb-col header .n{color:var(--ink-3);font-size:.8rem}
.kb-sum{margin-left:auto;font-size:.78rem;color:var(--ink-3)}
.kb-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--idle)}
.kb-dot.blue{background:var(--blue)} .kb-dot.warn{background:var(--warn)} .kb-dot.ok{background:var(--ok)} .kb-dot.bad{background:var(--bad)}
.kb-cards{display:flex;flex-direction:column;gap:8px}
.kb-card{display:flex;flex-direction:column;gap:4px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:.9rem}
.kb-card:hover,.kb-card:focus-visible{border-color:var(--accent)}
.kb-card.dragging{opacity:.5}
.kb-value{font-size:.82rem;color:var(--ink-2)}
.kb-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:.78rem;color:var(--ink-3)}
.kb-meta span{display:inline-flex;align-items:center;gap:4px}
.kb-meta svg{width:13px;height:13px}
.kb-empty{font-size:.8rem;color:var(--ink-3);text-align:center;padding:12px 0}
@media (max-width:640px){.kb-col{flex-basis:82vw}}
.stage-steps{display:flex;flex-wrap:wrap;gap:8px}
.stage-step{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:inherit;font-size:.86rem;cursor:pointer}
.stage-step.on{border-color:var(--accent);background:var(--accent-soft);font-weight:600}
.stage-list{display:flex;flex-direction:column;gap:6px}
.stage-row{display:grid;grid-template-columns:auto 1fr 7rem auto auto auto;gap:6px;align-items:center}
@media (max-width:640px){.stage-row{grid-template-columns:auto 1fr auto auto auto}.stage-row [data-color]{grid-column:2/-1;grid-row:2}}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}
/* Un diálogo en pasos: dónde se está y cuántos faltan. */
.wizard-steps{display:flex;gap:6px;list-style:none;margin:0 0 4px;padding:0;counter-reset:step}
.wizard-steps li{flex:1;display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--ink-3);padding-bottom:6px;border-bottom:3px solid var(--line-2);counter-increment:step}
.wizard-steps li::before{content:counter(step);display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--surface-2);font-weight:600;font-size:.72rem}
.wizard-steps li.on{color:var(--ink);font-weight:600;border-color:var(--accent)}
.wizard-steps li.on::before{background:var(--accent);color:var(--accent-ink)}
.wizard-steps li.done{border-color:var(--accent-line)}
.wizard-steps li.done::before{background:var(--accent-soft);color:var(--accent)}
.invites .rows{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.invite-list{max-height:min(22rem,45vh);overflow-y:auto}
.quote-price.recv{grid-template-columns:1fr 11rem}
@media (max-width:640px){.quote-price.recv{grid-template-columns:1fr}}

/* Un diálogo de consulta largo, más apretado: que quepan las líneas. */
.modal.compact .modal-body{gap:10px}
.modal.compact .kv{font-size:.82rem;gap:2px 14px}
.modal.compact .block-h{font-size:.82rem;margin:2px 0 0}
.modal.compact .rows .row{padding:6px 10px;font-size:.86rem}
.modal.compact .notice{padding:8px 12px;font-size:.82rem}
.modal.compact .t td,.modal.compact .t th{padding:6px 8px;font-size:.84rem}
.modal.compact .compare th.compare-head{font-size:.8rem}
.compare th.compare-head > .pill{display:inline-block;margin-top:2px}
.invites .row .pill{font-size:.72rem}
/* El acceso en pantalla angosta: el cartel se encoge a una franja y el
   formulario queda centrado en lo que sobra. Arriba del todo dejaba media
   pantalla vacía debajo, sobre todo instalado como app; al abrir el teclado
   el alto disponible se encoge y el formulario sube solo (scroll-margin). */
@media (max-width:1023px){
  .login{grid-template-rows:auto 1fr}
  .login-art{min-height:0;padding:18px 20px 16px;gap:10px;justify-content:flex-start}
  .login-art h1{font-size:1.6rem;max-width:none}
  .login-art p,.login-art .seis{display:none}
  .login-copy{gap:0}
  .login-side{align-items:center;padding:20px 16px 32px}
}

/* Decidir una cotización: el verde es «sí», al lado del rojo de «se perdió». */
.btn.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.btn.ok:hover{background:var(--ok-soft)}
.kb-col.kb-won{background:var(--ok-soft);border:1px dashed color-mix(in srgb,var(--ok) 55%,transparent)}
.kb-col.kb-won.over{border-style:solid;border-color:var(--ok)}
.kb-col.kb-won .kb-empty{color:var(--ok)}
.actions-cell{text-align:right;width:1%}
.actions-cell .btn{display:flex;width:100%;justify-content:center}
.actions-cell .btn+.btn{margin-top:.3rem}
.notice-actions{margin-left:auto;display:flex;gap:.4rem;flex-wrap:wrap}
.fixed-value{margin:0;padding:.55rem 0;font-weight:600}

/* Filtros de lista: la búsqueda se lleva el ancho y lo demás va al lado, del mismo alto. */
.list-filters{display:flex;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line-2)}
.list-filters > .inp,.list-filters > .ss{flex:0 1 15rem;min-width:0}
.list-filters > input[type=search]{flex:1 1 18rem}
/* Caja: búsqueda y periodo arriba, los demás filtros en una rejilla pareja. */
.cash-filter-bar{display:flex;flex-direction:column;gap:10px;padding:12px 16px 0}
.cash-filter-bar > .inp{width:100%}
.period-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.period-bar .chips-row{margin:0}
.period-bar .chip-btn svg{width:14px;height:14px;vertical-align:-2px}
.period-range{display:flex;gap:10px;flex-wrap:wrap}
.period-range label{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--ink-2)}
.period-range .inp{width:auto;min-width:9.5rem}
.cash-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:10px;padding:10px 16px 12px;border-bottom:1px solid var(--line-2)}
.cash-filters .inp:not(.grow),.cash-filters .ss{flex:none;width:100%;min-width:0}
@media (max-width:640px){.cash-filters{grid-template-columns:1fr 1fr}.period-range label{flex:1 1 45%}.period-range .inp{flex:1;min-width:0}}

/* Macro módulos: el selector va arriba del menú y dice en qué parte se está. */
.space-switch{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin:4px 0 10px;padding:4px;border-radius:10px;background:rgba(255,255,255,.06)}
.space-switch button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;border:0;border-radius:8px;background:none;color:var(--side-ink-2);font:inherit;font-size:.72rem;cursor:pointer}
.space-switch button svg{width:18px;height:18px}
.space-switch button:hover{color:#fff;background:rgba(255,255,255,.06)}
.space-switch button.on{background:var(--accent);color:var(--accent-ink)}
.space-switch.sheet{margin:0 12px 8px;background:var(--surface-2)}
.space-switch.sheet button{color:var(--ink-2);font-size:.8rem}
.space-switch.sheet button:hover{color:var(--ink);background:var(--surface)}
.space-switch.sheet button.on{background:var(--accent);color:var(--accent-ink)}
@media (pointer:coarse){.space-switch button{min-height:44px}}

/* Planes: tres paquetes lado a lado. */
.pick-cards.plans{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.plan-card > span{display:flex;flex-direction:column;gap:4px}
.plan-price{font-family:var(--f-display);font-size:1.5rem;color:var(--ink);margin-top:4px}
.plan-price small{font-family:inherit;font-size:.8rem;color:var(--ink-3)}
.plan-limits{color:var(--ink-2)}
.plan-list{margin:4px 0 0;padding-left:1.1rem;font-size:.82rem;color:var(--ink-2)}
.plans-page{max-width:80rem}
.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:14px;margin:18px 0}
.plan-box{padding:18px}
.plan-box h2{margin:0 0 4px}
.plan-box ul{padding-left:1.1rem;margin:10px 0 0}
.plan-box.featured{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

/* Lo que el plan no incluye: se ve, apagado y con candado, y lleva a cambiar de plan. */
.nav a.locked{opacity:.55}
.nav a.locked:hover{opacity:.85}
.cash-action.locked{opacity:.7;text-decoration:none;color:inherit}
.cash-action.locked small{color:var(--warn)}
.upgrade{max-width:40rem}
.upgrade .card-b{align-items:flex-start}
.upgrade-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--accent-soft);color:var(--accent)}
.upgrade-ico svg{width:26px;height:26px}

/* Caja: un botón «Registrar» que despliega las opciones al pasar por encima. */
.cash-new{position:relative}
.cash-new [data-cash-toggle] svg:last-child{width:14px;height:14px;transform:rotate(90deg);margin-left:2px}
.cash-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:min(22rem,calc(100vw - 32px));padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px rgba(0,0,0,.16);flex-direction:column;gap:2px}
.cash-menu::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.cash-new.open .cash-menu{display:flex}
@media (hover:hover) and (pointer:fine){.cash-new:hover .cash-menu,.cash-new:focus-within .cash-menu{display:flex}}
.cash-menu .cash-action{border:0;border-radius:8px;width:100%;padding:9px 10px}
.cash-menu .cash-action:hover:not(:disabled){background:var(--accent-soft)}
.crumbs .crumb-group{color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
/* En el buscador del menú los módulos van en una línea: icono y nombre lado a
   lado. Apilados ocupaban casi tanto como la lista que se venía a ver. */
.space-switch.sheet{padding:3px;gap:3px;margin:8px 12px 6px}
.space-switch.sheet button{flex-direction:row;justify-content:center;gap:6px;padding:5px 8px;font-size:.8rem;min-height:0}
.space-switch.sheet button svg{width:15px;height:15px}
@media (pointer:coarse){.space-switch.sheet button{min-height:36px}}

/* La firma dibujada del certificado. Fondo claro también en modo oscuro: la
   tinta es oscura porque así sale en el PDF. */
.sig-pad{position:relative;display:flex;flex-direction:column;gap:6px}
.sig-pad-h{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:.9rem}
.sig-pad canvas{display:block;width:100%;height:170px;background:#fff;border:1px dashed var(--line);border-radius:10px;touch-action:none;cursor:crosshair}
.sig-pad-hint{position:absolute;left:0;right:0;bottom:22px;text-align:center;pointer-events:none;margin:0}
.sig-pad.has-ink .sig-pad-hint{display:none}

/* La hoja del menú: alto fijo (no se encoge al filtrar) y por encima del
   teclado del teléfono. --vv-h y --kb los pone nav-sheet.js con visualViewport. */
.nav-sheet-panel{height:min(86dvh,720px,calc(var(--vv-h,100dvh) - 12px));max-height:none;margin-bottom:var(--kb,0px)}
.nav-sheet.kb-open .nav-sheet-panel{border-radius:16px;padding-bottom:12px}
.nav-sheet.kb-open .nav-sheet-foot{display:none}
.nav-sheet-list{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.nav-sheet-back{touch-action:none}

/* Toques: sin la espera ni el zoom del doble toque, que se comían pulsaciones. */
button,.btn,a,input,select,textarea,label,[role="button"]{touch-action:manipulation}
/* En el teléfono el diálogo va arriba y medido contra lo visible (--vv-h, de
   core/touch.js): centrado, se movía al abrirse o cerrarse el teclado y el
   toque caía fuera del botón. */
@media (pointer:coarse){
  .modal-back{top:var(--vv-top,0px);bottom:auto;height:var(--vv-h,100dvh);place-items:start center;padding-top:max(16px,env(safe-area-inset-top,0px))}
  .modal{max-height:calc(var(--vv-h,100dvh) - 32px)}
  /* Lo de arriba es por el teclado, y solo un formulario lo abre. Una ventana
     que solo se lee —una factura, sus abonos— va centrada. */
  .modal-back:not(:has(form)){place-items:center;padding-top:16px}
}

/* En el teléfono ningún campo baja de 16 px. Por debajo, Safari amplía la página
   al tocar el campo y no la devuelve: se queda ampliada y se puede arrastrar de
   lado a lado. Y como red, la página nunca se desplaza de lado: lo que tenga que
   hacerlo (tablas, pestañas) lleva su propio desplazamiento. `clip` y no
   `hidden`, que no crea un contenedor de desplazamiento y no rompe `sticky`. */
html,body{overflow-x:clip}
@media (pointer:coarse){input:not([type=checkbox]):not([type=radio]),select,textarea,.inp{font-size:16px}}

/* Fase 8: la cuadrilla en la obra. Foto de la persona donde antes iban las iniciales. */
.crew-photo{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;background:var(--surface-3)}
.crew-photo.lg,.avatar.lg{width:64px;height:64px;font-size:1.1rem}
.crew-photo.xl,.avatar.xl{width:112px;height:112px;font-size:1.8rem;border-radius:16px}
.card-title{margin:0;font-size:1.02rem}
.card-narrow{max-width:34rem;margin:0 auto;width:100%}
.big-num{font-family:var(--f-display,inherit);font-size:1.6rem;line-height:1}
.scan-hint{display:inline-flex;align-items:center;gap:6px}
.scan-hint svg{width:16px;height:16px}
.warn-list{margin:6px 0 0;padding-left:18px}
.found-rows{margin-top:10px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.found-rows .row:first-child{border-top:0}
.crew-tools{display:flex;flex-direction:column;gap:10px;align-items:flex-start;border-bottom:1px solid var(--line-2)}
.crew-edit-head{display:flex;gap:14px;align-items:flex-start}
.crew-edit-head .grow{display:flex;flex-direction:column;gap:8px;min-width:0}
.crew-edit-head .toolbar{flex-wrap:wrap}
.crew-card-head{display:flex;gap:16px;align-items:center}
.crew-card-head h1{margin:0 0 2px;font-size:1.4rem}
.crew-card-head p{margin:0 0 6px}
.crew-card-actions{display:flex;flex-direction:column;gap:10px}
.crew-card-view .kv{padding-top:0}

/* La programación: rejilla en escritorio, lista por día en el teléfono. */
.week-nav{justify-content:flex-start}
.week-title{min-width:9rem;text-align:center}
.sched th{white-space:nowrap;text-transform:capitalize}
.sched th.today,.sched td.today{background:var(--accent-soft)}
.sched-count{display:block;font-size:.7rem;color:var(--ink-3);font-weight:500;min-height:1em}
.sched-who{display:flex;gap:10px;align-items:center;min-width:12rem}
.sched-who .sub{display:block;color:var(--ink-3);font-size:.78rem}
.sched-sel{min-width:8.5rem;padding:6px 8px;font-size:.84rem}
.sched-sel.set{border-color:var(--accent);background:var(--accent-soft);font-weight:600}
.sched-sel.other{opacity:.7}
.sched-mobile{display:none}
.day-chips{padding:12px 18px 4px;overflow-x:auto;flex-wrap:nowrap}
.day-chips .chip-btn{text-transform:capitalize}
.sched-row{flex-wrap:wrap}
.sched-row > .ss,.sched-row > .sched-sel{flex:1 1 100%;max-width:none;margin-left:44px}
.sched-row .ss .sched-sel{width:100%}
@media (max-width:760px){
  .sched-grid{display:none}
  .sched-mobile{display:block}
}

/* Los carnets: tamaño de tarjeta, para imprimir y recortar. */
.crew-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(85.6mm,1fr));gap:14px}
.crew-id{width:85.6mm;height:54mm;border:1px solid var(--line);border-radius:3mm;background:#fff;color:#111;display:flex;flex-direction:column;overflow:hidden;break-inside:avoid;font-size:7.5pt;line-height:1.3}
.crew-id header{display:flex;align-items:center;gap:2mm;padding:2mm 3mm;background:#071D2B;color:#fff;font-size:8pt}
.crew-id-logo{height:5mm;max-width:14mm;object-fit:contain;background:#fff;border-radius:1mm}
.crew-id-body{flex:1;display:flex;gap:2.5mm;padding:2.5mm 3mm;align-items:center;min-height:0}
.crew-id-photo{width:20mm;height:25mm;object-fit:cover;border-radius:1.5mm;flex:none;background:#eef1f4}
.crew-id-photo.blank{display:grid;place-items:center;font-size:14pt;font-weight:700;color:#6b7785}
.crew-id-data{flex:1;display:flex;flex-direction:column;gap:.6mm;min-width:0}
.crew-id-name{font-size:9.5pt;line-height:1.15}
.crew-id-qr{width:24mm;height:24mm;flex:none}
.crew-id footer{padding:1.2mm 3mm;border-top:.3mm solid #dfe4e9;font-size:6.5pt;color:#4b5563;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media print{
  .side,.top,.bottom,#toasts,.no-print{display:none!important}
  .app,.main,.view{display:block!important;padding:0!important;margin:0!important;background:#fff!important}
  body{background:#fff!important}
  .crew-cards{gap:4mm}
  .crew-id{border-color:#999}
}

/* Cuatro papeles del conjunto: en dos columnas cuando no caben en una fila. */
.seg.seg-four{flex-wrap:wrap}
.seg.seg-four .seg-opt{flex:1 1 40%}

/* El levantamiento en el portal de la aseguradora. */
.survey-zone + .survey-zone{border-top:1px solid var(--line-2)}
.survey-zone .block-h{margin-top:0}
.survey-notes{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.survey-notes .notice p{margin:4px 0 0}
/* En el teléfono, la persona arriba y el estado y el botón debajo. */
.found-rows .row{flex-wrap:wrap}
.found-rows .row .grow{flex:1 1 calc(100% - 52px)}
.found-rows .row > .pill{margin-left:44px}
.found-rows .row > .btn,.found-rows .row > .tag{margin-left:auto}
.row .grow .warn-text{white-space:normal}
.row .grow span .role-word{display:inline;font-weight:600;color:var(--ink)}

/* La planilla vencida impide entrar: se dice en rojo, no en amarillo. */
.notice.bad{background:var(--bad-soft)} .notice.bad svg{color:var(--bad)}
.tag.bad-tag{background:var(--bad-soft);color:var(--bad);border-color:transparent}

/* La ubicación de cada ingreso y la llegada del personal. */
.row .grow .places{white-space:normal}
.place{display:inline-flex;align-items:center;gap:3px;font-size:.78rem}
.place svg{width:13px;height:13px}
a.place{color:var(--blue);text-decoration:none}
a.place.warn-text{color:var(--warn)}
.self-body{display:flex;flex-direction:column;gap:10px}
.self-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.self-row .grow{display:flex;flex-direction:column;min-width:0;flex:1}
.self-row select{flex:1;min-width:12rem}
.row .grow .places .place{display:inline-flex;overflow:visible}

/* Los nombres de una persona natural, en el formulario de terceros. */
.person-names{display:flex;flex-direction:column;gap:14px}
/* Un encabezado de tarjeta con texto y botones: el texto no se deja exprimir;
   cuando no caben juntos, los botones bajan a su propia línea. */
/* El texto de una cabecera de tarjeta no se deja estrujar por sus botones:
   con poco ancho, los botones bajan a su propia línea. */
.card-h > .grow{flex:1 1 18rem;min-width:0}
.card-h > .grow + .toolbar{flex-wrap:wrap}

/* Programación: el personal y la cuadrilla, cada uno con su rótulo. */
.sched .group-row th{text-align:left;background:var(--surface-3);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sched-who .grow{min-width:0}
.sched-who .grow .sub{display:block;color:var(--ink-3);font-size:.78rem}

/* Caja: la cuenta elegida se dice, con cómo quitar el filtro. */
.cash-acct{position:relative;cursor:pointer}
.cash-acct-edit{position:absolute;top:6px;right:6px}
.filter-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 18px 12px;padding:10px 12px;border-radius:8px;background:var(--blue-soft);font-size:.86rem}
.filter-note > span{flex:1 1 16rem}
.filter-note svg{flex:none}
/* Caja: lo que se debe, en una franja siempre a la vista (las cuentas se pliegan). */
.owed-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border:1px dashed var(--line);border-radius:12px;background:var(--surface);color:var(--ink);text-decoration:none;font-size:.9rem}
.owed-bar:hover{border-color:var(--accent);text-decoration:none}
.owed-bar > span:first-of-type{flex:1 1 12rem}
.owed-bar b{font-family:var(--f-display);font-size:1.15rem}
.owed-go{display:inline-flex;align-items:center;gap:4px;color:var(--ink-3);font-size:.82rem}
/* El nombre largo de una actividad: un renglón, y se abre al tocarlo. */
.row .grow b.clamp.cut{cursor:pointer;position:relative;padding-right:1.2em}
.row .grow b.clamp.cut::after{content:"▾";position:absolute;right:0;top:0;color:var(--ink-3);font-weight:400}
.row .grow b.clamp.open{white-space:normal;overflow:visible}
.row .grow b.clamp.open::after{content:"▴"}
/* Filtros que se pliegan en el teléfono (tareas): en pantalla ancha, a la vista. */
.filters-toggle-row{display:none}
.filters-toggle-row .badge{display:inline-grid;place-items:center;min-width:1.3em;height:1.3em;padding:0 .35em;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:.72rem;font-weight:700}
.filters-toggle-row .badge[hidden]{display:none !important}
@media (max-width:640px){
  .filters-toggle-row{display:flex;padding:10px 18px;border-bottom:1px solid var(--line-2)}
  .filters-fold:not(.open){display:none}
  .filters-fold .toolbar.wide > *{flex:1 1 100%;max-width:none;width:100%}
  .filters-fold .toolbar.wide > .date-range{flex:1 1 40%;width:auto}
  .filters-fold .date-range .inp{flex:1;min-width:0}
  .filters-fold .ss .ss-btn{width:100%;display:block;text-align:left}
}
/* «Dónde trabaja esta semana»: tocar abre la ruta en el mapa. */
.route-row{color:inherit;text-decoration:none;align-items:center}
.route-row:hover{text-decoration:none;background:var(--surface-2)}
.route-go{display:inline-flex;align-items:center;gap:4px;flex:none;color:var(--accent);font-size:.84rem;font-weight:600;white-space:nowrap}

/* Una ventana abierta no deja desplazar la página de detrás. */
html:has(.modal-back){overflow:hidden}
.modal-back,.modal-body{overscroll-behavior:contain}

/* Lo que solo se ve en el teléfono, o solo en pantalla ancha. */
.show-sm{display:none}
@media (max-width:640px){
  .hide-sm{display:none !important}
  .show-sm{display:block}
}

/* Las líneas de una factura en el teléfono: qué es, cuánto por cuánto, importe. */
.line-cards{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.line-card{display:flex;gap:12px;align-items:flex-start;padding:10px 12px}
.line-card + .line-card{border-top:1px solid var(--line-2)}
.line-card .grow{min-width:0}
.line-card .grow b{display:block;font-weight:600;line-height:1.3}
.line-card .grow span{display:block;color:var(--ink-3);font-size:.8rem;margin-top:2px}
.line-card .num{font-weight:700;white-space:nowrap}

/* Abonos en su propia vista. */
.pay-link{width:100%;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--surface);font:inherit;color:inherit;cursor:pointer;align-items:center}
.pay-link:hover{border-color:var(--accent)}
.back-btn{align-self:flex-start}

@media (max-width:640px){
  /* El saldo: una franja con la cifra a la derecha, no un número gigante suelto. */
  .inv-head{flex-direction:column;align-items:stretch;gap:12px}
  .inv-balance{flex-direction:row;align-items:baseline;gap:8px;padding:10px 12px;border-radius:10px;background:var(--surface-3)}
  .inv-balance b{font-size:1.3rem;margin-left:auto}
  .inv-totals{flex-direction:column;align-items:flex-end;gap:4px}
}

/* La lista de facturas en el teléfono: número y estado, a quién y el saldo, y
   cuándo vence. Siete datos con su etiqueta por factura no se leían. */
@media (max-width:640px){
  .t.stacked.inv-list tr{grid-template-columns:1fr auto;grid-template-areas:"ref state" "who bal" "due bal";align-items:center;gap:3px 12px}
  .t.stacked.inv-list td[data-l]::before{display:none}
  .t.stacked.inv-list td.full{grid-column:auto}
  .inv-list .c-ref{grid-area:ref;font-weight:700}
  .inv-list .c-state{grid-area:state;justify-self:end}
  .inv-list .c-who{grid-area:who;min-width:0}
  .inv-list .c-bal{grid-area:bal;text-align:right}
  .inv-list .c-due{grid-area:due;font-size:.8rem;color:var(--ink-3)}
  .t.stacked.inv-list td.c-due[data-l]::before{content:"Vence ";display:inline;font:inherit;letter-spacing:0;text-transform:none;color:inherit}
  .inv-list .c-date,.inv-list .c-total{display:none}
}
/* Safari en iPhone da a los campos de fecha un ancho mínimo propio y no
   respeta el de la columna: dos fechas lado a lado se montaban una encima de la
   otra y la ventana se podía arrastrar de lado. Se les quita la apariencia del
   sistema y se les deja encoger como a cualquier campo. */
input[type="date"].inp,input[type="time"].inp,input[type="datetime-local"].inp{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;max-width:100%}
input[type="date"].inp::-webkit-date-and-time-value{text-align:left}
.f-row > *{min-width:0}
/* Y como red: una ventana nunca se desplaza de lado. */
.modal-body{overflow-x:hidden}

/* Caja: buscador y «Filtros» en una fila; en el teléfono el periodo y los
   desplegables se pliegan detrás del botón, que dice cuántos hay puestos. */
.cash-search-row{display:flex;gap:8px;align-items:center}
.cash-search-row > .inp{flex:1;min-width:0;width:auto}
.filters-btn{display:none;flex:none}
.filters-btn .badge,.filters-toggle-row .badge{display:inline-grid;place-items:center;min-width:1.3em;height:1.3em;padding:0 .35em;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:.72rem;font-weight:700}
.filters-btn .badge[hidden]{display:none !important}
.cash-fold{display:flex;flex-direction:column;gap:10px}
.cash-fold .cash-filters{padding:0 0 12px;border-bottom:0}
.cash-filter-bar{padding-bottom:0;border-bottom:1px solid var(--line-2)}
@media (max-width:640px){
  .filters-btn{display:inline-flex}
  .cash-filter-bar{padding-bottom:12px}
  .cash-fold:not(.open){display:none}
  .cash-fold .cash-filters{grid-template-columns:1fr;padding-bottom:0}
}

/* Las facturas de compra con saldo, encima de los movimientos de la caja. */
.cash-debts{border-bottom:1px solid var(--line-2);padding-bottom:4px}
.debt-row{width:100%;text-align:left;background:none;border:0;font:inherit;color:inherit;cursor:pointer;align-items:center}
.debt-row:hover{background:var(--surface-3)}
.debt-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
/* Con el dedo, lo que se toca no se resalta al pasar. El fondo de «:hover» se
   quedaba pegado a la fila por la que pasaba el dedo al desplazarse, el
   navegador pintaba su recuadro azul al tocar y una pulsación larga
   seleccionaba el texto de la tarjeta. Nada de eso dice nada en un teléfono. */
@media (hover:none){
  a.row:hover,button.row:hover,.task-row:hover,.works-row.click:hover,.route-row:hover,.debt-row:hover,.pay-link:hover{background:none}
  .t tbody tr.click:hover td{background:none}
  .kb-card:hover{border-color:var(--line)}
}
@media (pointer:coarse){
  a.row,button.row,tr.click,.card[role="button"],a.card,.kb-card,.task-row,.debt-row,.route-row,.pay-link,.works-row.click,.chip-btn{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
}
/* Cartera: el total pendiente en grande y, debajo, cuánto vence en cada plazo. */
.due-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:10px;background:var(--surface-3);border:1px solid var(--line-2)}
.due-total b{font-family:var(--f-display);font-size:1.6rem}
.due-row{width:100%;text-align:left;background:none;border:0;font:inherit;color:inherit;cursor:pointer;align-items:center}
.due-row .grow span{white-space:normal}
@media (max-width:640px){.aging{grid-template-columns:1fr 1fr}}

/* Una tarjeta que se pliega entera: la cabecera es el botón. */
.fold-card > summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fold-card > summary::-webkit-details-marker{display:none}
.fold-card > summary > svg{flex:none;width:18px;height:18px;color:var(--ink-3);transition:transform .15s}
.fold-card[open] > summary > svg{transform:rotate(90deg)}
.fold-card:not([open]) > summary{border-bottom:0}
.fold-card > summary.card-h{flex-wrap:nowrap}
.fold-card > summary.card-h > .grow{flex:1 1 auto}
/* El lector de QR: la cámara a pantalla completa con un recuadro de guía. */
.qr-scan{position:fixed;inset:0;z-index:300;background:#0b0f14;color:#fff;display:flex;flex-direction:column}
.qr-scan-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px}
.qr-scan-bar .btn{color:#fff}
.qr-scan-view{position:relative;flex:1;overflow:hidden}
.qr-scan-view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qr-scan-frame{position:absolute;left:50%;top:50%;width:min(68vw,280px);aspect-ratio:1;transform:translate(-50%,-50%);border:3px solid rgba(255,255,255,.9);border-radius:16px;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
.qr-scan-hint{margin:0;padding:14px 16px calc(16px + env(safe-area-inset-bottom));text-align:center;font-size:.95rem}
.qr-scan-hint.bad-text{color:#ffb4a8}
html:has(.qr-scan){overflow:hidden}
/* Los signos de una fórmula, en botones: el teclado numérico no los trae. */
.formula-keys{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:6px}
.formula-keys .btn{justify-content:center;font-size:1.1rem;font-weight:600;padding:6px 0}
@media (pointer:coarse){.formula-keys .btn{min-height:44px}}

/* Proyectos: buscador y etapas debajo de las pestañas por tipo. */
.projects-filter{display:flex;flex-direction:column;gap:10px}
.projects-filter .chips-row{margin:0}

/* Estado de cuenta: las tres listas en pestañas, dentro de su tarjeta. */
.st-tabs{padding:0 12px;border-bottom:1px solid var(--line-2)}
/* Instalar la app: los pasos a mano, con su número. */
.install-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.install-steps li{display:flex;gap:12px;align-items:flex-start;line-height:1.45}
.install-n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:700}
.install-glyph{display:inline-grid;place-items:center;vertical-align:-4px;width:24px;height:24px;border:1px solid var(--line);border-radius:6px;font-weight:700}
.install-glyph svg{width:15px;height:15px}
.login-install{display:flex;justify-content:center}

/* Tipografía ARQON 10: Plus Jakarta Sans solo en títulos de 20 px o más (y el
   logotipo). Lo pequeño —subtítulos, encabezados de bloque, cifras de una
   celda— va en Inter: a ese tamaño se parecen tanto que mezclarlas se lee como
   un error, y Jakarta, más ancha que la Barlow de antes, no cabe. */
h3,.block-h,.card-title,.owner-card h2,.note h3{font-family:var(--f-body);font-weight:600;letter-spacing:0}
.unit b,.qty,.works-ch-h b,.purchase-stats b,.owed-bar b,.brand-sig b{font-family:var(--f-body);font-weight:700;letter-spacing:0}
h1,h2{letter-spacing:-.01em}
@media (max-width:640px){
  /* Con Plus Jakarta la cifra es más ancha: «de $ total» baja entero a su línea. */
  .inv-balance{flex-wrap:wrap}
  .inv-balance .muted{flex-basis:100%;text-align:right;white-space:nowrap}
}
@media (max-width:1023px){
  /* En el teléfono el cartel es una franja: el mismo redondeo, con menos margen. */
  .login-art{margin:12px 12px 0;border-radius:16px}
  /* En el teléfono el lema ya dice lo que hace falta: el titular sobra. */
  .login-copy{display:none}
}
/* Una tablet en horizontal pasa de 1024 px pero sigue siendo una tablet: el
   mismo acceso compacto que el teléfono, sin el titular. */
@media (pointer:coarse) and (min-width:1024px) and (max-width:1366px){
  .login{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .login-art{min-height:0;padding:18px 20px 16px;gap:10px;justify-content:flex-start;margin:12px 12px 0;border-radius:16px}
  .login-copy,.login-art .seis{display:none}
  .login-side{align-items:center;padding:20px 16px 32px}
}

/* Menú lateral: el botón que lo pliega, el selector de módulo y la versión plegada. */
.side-toggle{flex:none;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--side-ink);cursor:pointer}
.side-toggle:hover{background:var(--side-hl);color:#fff}
.side-toggle svg{width:20px;height:20px}
.space-pick{position:relative;margin:0 0 10px}
.space-btn{width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--side-hl);border-radius:12px;background:rgba(255,255,255,.03);color:#fff;font:inherit;font-size:.9rem;text-align:left;cursor:pointer}
.space-btn:hover{background:var(--side-hl)}
.space-btn > svg:first-child{width:18px;height:18px;color:var(--brand-marea);flex:none}
.space-btn > svg:last-child{width:16px;height:16px;margin-left:auto;color:var(--side-ink-2);transform:rotate(90deg)}
.space-btn[aria-expanded="true"] > svg:last-child{transform:rotate(-90deg)}
.space-btn-text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.space-btn-text small{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--side-ink-2)}
.space-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:12px;background:var(--side-hl);box-shadow:0 12px 30px rgba(0,0,0,.35);min-width:200px}
.space-menu button{display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;border-radius:8px;background:none;color:var(--side-ink);font:inherit;font-size:.9rem;text-align:left;cursor:pointer}
.space-menu button:hover{background:rgba(255,255,255,.08);color:#fff}
.space-menu button.on{color:#fff;font-weight:600}
.space-menu button svg{width:17px;height:17px;flex:none}
.space-menu button svg:last-child:not(:first-child){margin-left:auto;color:var(--brand-marea)}
.nav-sep{display:block;height:1px;margin:8px 10px;background:var(--side-hl)}

/* Plegado: solo los iconos, centrados; el nombre va en el `title`. */
.side-min .side{padding:14px 10px}
.side-min .brand{justify-content:center;padding-bottom:12px}
.side-min .brand-text,.side-min .space-btn-text,.side-min .nav a > span,.side-min .nav a .cnt,.side-min .side-me-text{display:none}
.side-min .space-btn{justify-content:center;padding:9px 0}
.side-min .space-menu{left:calc(100% + 10px);right:auto;top:0}
.side-min .nav a{justify-content:center;padding:10px 0}
.side-min .nav a.on{box-shadow:inset 3px 0 0 var(--brand-marea)}
.side-min .side-foot{flex-direction:column;gap:6px;padding:10px 0}
.side-min .side-me{justify-content:center;padding:4px}
/* Plegada, el menú de módulos es más ancho que la barra: tiene que poder asomar. */
.side-min .side{overflow:visible}
/* El nombre de un icono del menú plegado, al pasar el ratón (sideTips en app.js). */
.side-tip{position:fixed;z-index:300;transform:translateY(-50%);background:var(--side);color:#fff;border:1px solid var(--side-hl);font-size:.82rem;font-weight:500;line-height:1.2;padding:7px 11px;border-radius:var(--r-sm);box-shadow:var(--shadow);white-space:nowrap;pointer-events:none}
.side-tip::before{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:var(--side-hl)}