/* NODO CRM — sistema de diseño (copia exacta del de NODO Finanzas: misma identidad). Las piezas propias del CRM están en crm.css.
   Colores: la paleta NODO de siempre; lo demás son tonos derivados de esos mismos colores.
   Espaciado en escala de 8 (4·8·12·16·24·32·48·64), cinco tamaños de letra, radios fijos por tipo de pieza,
   sombras solo en lo que flota y una sola curva de movimiento. */

/* ---------- Tokens ---------- */
:root{
  /* Paleta NODO (sin cambios) */
  --bg:#F2F5F2; --surface:#FFFFFF; --surface-2:#F5F8F5; --tint:#E4F0E8; --line:#E0E6E1; --line-2:#C8D2CB;
  --ink:#121A15; --ink-2:#38433C; --muted:#5C675F;
  --brand:#00763D; --brand-ink:#005A2E; --btn:#00763D; --on-btn:#FFFFFF;
  --hero:#00763D; --on-hero:#FFFFFF; --on-hero-2:#C8E6D4; --hero-track:rgba(255,255,255,.24);
  --spend:#A2AEA6; --warn:#8F5708; --warn-tint:#FAEFD9; --danger:#AE3428; --danger-tint:#F8E5E2;
  --scrim:rgba(12,22,16,.38);
  /* Derivados de la paleta */
  --hover:color-mix(in srgb, var(--ink) 4%, transparent);
  --press:color-mix(in srgb, var(--ink) 8%, transparent);
  --btn-hover:color-mix(in srgb, var(--btn) 88%, #000);
  --card-line:transparent;
  --fondo-hoja:color-mix(in srgb, var(--ink) 94%, #000);
  --marco:color-mix(in srgb, var(--bg) 88%, var(--ink) 12%);
  --ring:color-mix(in srgb, var(--brand) 40%, transparent);
  /* Espaciado (8pt) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  /* Radios */
  --r-card:24px; --r-sheet:28px; --r-ctl:14px; --r-in:16px; --r-pill:999px;
  /* Tipografía: una familia, cinco tamaños */
  --f:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs:12px; --t-sm:14px; --t-md:17px; --t-lg:24px; --t-xl:clamp(40px, 6vw, 56px);
  /* Sombras: mínimas, solo para lo que flota */
  --sh-flota:0 1px 2px rgba(18,26,21,.06), 0 8px 24px rgba(18,26,21,.08);
  --sh-hoja:0 -1px 0 rgba(18,26,21,.04), 0 -12px 32px rgba(18,26,21,.10);
  /* Movimiento */
  --ease:cubic-bezier(.22, 1, .36, 1);
  --d-micro:150ms; --d-comp:260ms; --d-pantalla:360ms;
  --top-h:56px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0D1310; --surface:#151D18; --surface-2:#19221C; --tint:#15301F; --line:#232E27; --line-2:#35433A;
  --ink:#E5ECE7; --ink-2:#C0CAC3; --muted:#95A29A;
  --brand:#4CC283; --brand-ink:#8ED8AE; --btn:#187A47; --on-btn:#FFFFFF;
  --hero:#0F4F2D; --on-hero:#FFFFFF; --on-hero-2:#AEDBC0; --hero-track:rgba(255,255,255,.18);
  --spend:#56635B; --warn:#E3AA4C; --warn-tint:#2D2412; --danger:#EF8A7C; --danger-tint:#351B19;
  --scrim:rgba(0,0,0,.58);
  --hover:color-mix(in srgb, var(--ink) 5%, transparent);
  --press:color-mix(in srgb, var(--ink) 10%, transparent);
  --btn-hover:color-mix(in srgb, var(--btn) 86%, #fff);
  --card-line:var(--line);
  --fondo-hoja:#050806;
  --marco:#070A08;
  --sh-flota:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.3);
  --sh-hoja:0 -12px 32px rgba(0,0,0,.4);
  color-scheme:dark;
}}

/* ---------- Base ---------- */
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f); font-size:var(--t-sm); line-height:1.45; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; overflow-x:hidden}
button,input,select{font-family:inherit; font-size:inherit; color:inherit}
button{-webkit-user-select:none; user-select:none}
h1,h2,h3,p{margin:0}
a{color:var(--brand-ink)}
img{max-width:100%}
.ic{width:1.25em; height:1.25em; font-size:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.muted{color:var(--muted)}
.sm{font-size:var(--t-xs)}
/* Lo que se puede tocar se hunde un poco al presionarlo */
button,.btn,.dl-i,.file-btn,.drop{transition:transform var(--d-micro) var(--ease), background-color var(--d-micro) var(--ease), border-color var(--d-micro) var(--ease), color var(--d-micro) var(--ease), opacity var(--d-micro) var(--ease)}
button:not([disabled]):active,.btn:active,.dl-i:active,.drop:active{transform:scale(.97)}
.card:is(button):active,.mov:active,.pend:active,.pr-row:active,.todo:active,.prow:active{transform:scale(.985)}

/* ---------- Marco ---------- */
/* En el celular la página usa el scroll del navegador: así funciona jalar hacia abajo para recargar */
.app{position:relative; display:flex; flex-direction:column; min-height:100%; min-height:100dvh; background:var(--bg)}
body:has(.sheet:not([hidden])){overflow:hidden}
html.hoja-abierta body{position:fixed; left:0; right:0; overflow:hidden; background:var(--fondo-hoja)}
.main{flex:1; min-width:0; display:flex; flex-direction:column}
.scroll{flex:1; padding:var(--s-1) var(--s-4) calc(120px + env(safe-area-inset-bottom, 0px))}
.wrap{max-width:1200px; margin:0 auto}
.top{position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); min-height:calc(var(--top-h) + env(safe-area-inset-top, 0px)); padding:env(safe-area-inset-top, 0px) var(--s-4) 0; background:var(--bg)}
.brand{display:flex; align-items:center; gap:var(--s-3); min-width:0}
.brand picture{display:flex}
.logo{display:block; height:24px; width:auto}
.brand-app{padding-left:var(--s-3); border-left:1px solid var(--line-2); font-size:var(--t-sm); font-weight:600; color:var(--muted); line-height:20px}
.pills,.top .top-add,.meta{display:none}
.top-r{display:flex; align-items:center; gap:var(--s-3)}
.sync{display:inline-flex; align-items:center; gap:6px; font-size:var(--t-xs); font-weight:600; color:var(--brand-ink); background:var(--tint); padding:6px 12px; border-radius:var(--r-pill)}
.sync .ic{font-size:14px}
.avatar{position:relative; width:36px; height:36px; border-radius:50%; background:var(--tint); color:var(--brand-ink); display:grid; place-items:center; font-weight:700; font-size:var(--t-sm); flex:none; border:0; padding:0}
button.avatar{cursor:pointer}
button.avatar:hover{background:color-mix(in srgb, var(--tint) 80%, var(--brand) 20%)}
.avatar.dot::after{content:""; position:absolute; top:0; right:0; width:10px; height:10px; border-radius:50%; background:var(--warn); border:2px solid var(--surface)}
.mini-av{width:22px; height:22px; border-radius:50%; background:var(--tint); color:var(--brand-ink); display:grid; place-items:center; font-size:11px; font-weight:700; flex:none}
.ind{position:absolute; left:0; top:0; height:100%; transform-origin:0 50%; pointer-events:none; z-index:0}

/* Barra inferior (celular): indicador que se desliza y el botón de registrar al centro */
.tabs{position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:15; display:grid; grid-auto-flow:column; grid-auto-columns:auto; justify-content:space-around; padding:6px 8px; background:var(--surface); border-radius:var(--r-sheet); box-shadow:var(--sh-flota); border:1px solid var(--card-line)}
.tab{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:52px; min-width:52px; padding:0 4px; border:0; background:none; color:var(--muted); font-size:var(--t-xs); font-weight:600; letter-spacing:-.01em; cursor:pointer; white-space:nowrap}
.tab .ic{font-size:19px}
.tab[aria-current="page"]{color:var(--brand-ink)}
.tab[aria-current="page"] .ic{stroke-width:2.1}
.tabs .ind::before{content:""; position:absolute; left:50%; top:7px; width:52px; height:30px; margin-left:-26px; border-radius:var(--r-pill); background:var(--tint)}
.tab-add{color:var(--ink-2); gap:2px}
.tab-add .plus{width:44px; height:44px; border-radius:50%; background:var(--btn); color:var(--on-btn); display:grid; place-items:center}
.tab-add .plus .ic{font-size:22px; stroke-width:2.2}
.tab-add:hover .plus{background:var(--btn-hover)}

/* ---------- Piezas ---------- */
.grid{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-3)}
.card{background:var(--surface); border:1px solid var(--card-line); border-radius:var(--r-card); padding:20px; min-width:0}
button.card{text-align:left; color:inherit; font:inherit; cursor:pointer; width:100%}
button.card:hover{background:color-mix(in srgb, var(--surface) 96%, var(--ink) 4%)}
.card-h{display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); margin-bottom:var(--s-4)}
.card-h h3{display:flex; align-items:center; gap:var(--s-3); font-size:var(--t-md); font-weight:600; letter-spacing:-.01em; min-width:0}
.card-h h3 > .ic{width:40px; height:40px; padding:10px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); stroke-width:1.6}
.screen-h{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-2) var(--s-3); margin:var(--s-2) 0 var(--s-4)}
.h-screen{font-size:var(--t-lg); font-weight:500; letter-spacing:-.03em; text-wrap:balance}
.back{display:inline-flex; align-items:center; gap:var(--s-1); min-height:44px; border:0; background:none; color:var(--muted); font-size:var(--t-sm); font-weight:600; padding:0; cursor:pointer}
.back:hover{color:var(--ink)}
.link{display:inline-grid; place-items:center; width:40px; height:40px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink-2); cursor:pointer; flex:none; position:relative}
.link::after{content:""; position:absolute; inset:-2px}
.link:hover{background:var(--hover); border-color:var(--line-2)}
.ic-box{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--tint); color:var(--brand-ink)}
.ic-box .ic{font-size:16px}
.ic-box.n{background:var(--surface-2); color:var(--ink-2)}
.ic-box.warn{background:var(--warn-tint); color:var(--warn)}
.ic-box.sm{width:32px; height:32px; border-radius:50%}
.ic-box.sm .ic{font-size:14px}
.chip{display:inline-flex; align-items:center; gap:4px; font-size:var(--t-xs); font-weight:600; padding:3px 10px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line); color:var(--ink-2); white-space:nowrap; line-height:18px}
.chip .ic{font-size:12px}
.chip.ok{background:var(--tint); border-color:transparent; color:var(--brand-ink)}
.chip.warn{background:var(--warn-tint); border-color:transparent; color:var(--warn)}
.chip.bad{background:var(--danger-tint); border-color:transparent; color:var(--danger)}

/* Botones: primario, secundario (contorno) y de peligro; todos con hover, presionado, foco y deshabilitado */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); min-height:48px; padding:0 var(--s-5); border-radius:var(--r-pill); border:1px solid transparent; font-size:var(--t-sm); font-weight:700; cursor:pointer; text-decoration:none; white-space:nowrap}
.btn .ic{font-size:15px}
.btn.pri{background:var(--btn); color:var(--on-btn)}
.btn.pri:hover{background:var(--btn-hover)}
.btn.ghost{background:transparent; border-color:var(--line-2); color:var(--ink)}
.btn.ghost:hover{background:var(--hover)}
.btn.danger{background:transparent; border-color:var(--line-2); color:var(--danger)}
.btn.danger:hover{background:var(--danger-tint); border-color:transparent}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ring)}
.btn.w{width:100%}
.btn.sm{min-height:44px; padding:0 var(--s-4); font-size:var(--t-sm)}
.btn.lg{min-height:64px; font-size:var(--t-md)}
.btn.lg .ic{font-size:20px}
.btn[disabled]{opacity:.5; cursor:default; transform:none}
.row-btns{display:flex; flex-wrap:wrap; gap:var(--s-2)}
.empty-card{display:grid; justify-items:center; gap:var(--s-3); text-align:center; padding:var(--s-6) var(--s-4)}
.empty-card .ic-box{width:56px; height:56px}
.empty-card .ic-box .ic{font-size:22px}

/* ---------- Inicio ---------- */
.hello{margin:var(--s-2) 0 var(--s-4)}
.hello .h-screen{margin-top:2px}
.hero{background:var(--hero); color:var(--on-hero); border-color:transparent; padding:var(--s-5)}
.hero-l{font-size:var(--t-sm); font-weight:600; color:var(--on-hero-2)}
.big{white-space:nowrap; font-size:var(--t-xl); font-weight:400; letter-spacing:-.045em; line-height:1.05; margin:var(--s-2) 0 var(--s-5); font-variant-numeric:tabular-nums}
.big .cents,.cents{font-size:.55em; font-weight:500; opacity:.6; letter-spacing:-.01em}
.hero-bar{display:flex; gap:4px; height:10px; margin-bottom:var(--s-4)}
.hero-bar i{display:block; height:100%; border-radius:5px; transform-origin:0 50%}
.hero-bar .lk{background:var(--hero-track)}
.hero-bar .fr{background:var(--on-hero)}
.hero-split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3)}
.hero-split .hl{display:flex; align-items:center; gap:6px; font-size:var(--t-xs); font-weight:600; color:var(--on-hero-2)}
.hero-split .hl .ic{font-size:13px}
.hero-split b{display:block; font-size:var(--t-md); font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; margin-top:2px}
.hero-split > div:last-child{text-align:right}
.hero-split > div:last-child .hl{justify-content:flex-end}
.hero-proj{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-top:var(--s-4); padding:var(--s-3) var(--s-4); border-radius:var(--r-in); background:var(--hero-track); font-size:var(--t-sm); font-weight:600}
.hero-proj span{display:flex; align-items:center; gap:6px}
.hero-proj .ic{font-size:15px}
.hero-proj b{font-size:var(--t-md); font-weight:600; font-variant-numeric:tabular-nums}
.hero-foot{display:flex; justify-content:space-between; align-items:center; gap:var(--s-2); margin-top:var(--s-4); font-size:var(--t-xs); color:var(--on-hero-2)}
.hero-btn{min-height:36px; border:0; background:var(--hero-track); color:var(--on-hero); border-radius:var(--r-pill); padding:0 var(--s-4); font-size:var(--t-xs); font-weight:700; cursor:pointer}
.hero-btn:hover{background:color-mix(in srgb, var(--on-hero) 30%, transparent)}
.pair{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3)}
.tile{display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.tile .ic-box{margin-bottom:auto; padding-bottom:0}
.tile .tile-l{margin-top:var(--s-4)}
.tile-l{font-size:var(--t-xs); font-weight:600; color:var(--muted)}
.tile-n{white-space:nowrap; font-size:var(--t-lg); font-weight:500; letter-spacing:-.035em; font-variant-numeric:tabular-nums}
.tile-s{font-size:var(--t-xs); color:var(--muted)}
.flow{display:grid; gap:var(--s-3)}
.flow-r{display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:var(--s-3)}
.flow-r b{font-size:var(--t-sm); font-weight:600; font-variant-numeric:tabular-nums}
.b{display:block; height:12px; border-radius:6px; min-width:4px; transform-origin:0 50%}
.b.in{background:var(--brand)}
.b.out{background:var(--spend)}
.quedo{display:flex; align-items:baseline; justify-content:space-between; margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--line)}
.quedo span{font-size:var(--t-sm); font-weight:600; color:var(--muted)}
.quedo b{font-size:var(--t-lg); font-weight:500; letter-spacing:-.03em; color:var(--brand); font-variant-numeric:tabular-nums}
.quedo b.neg{color:var(--danger)}
.prow{display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:var(--s-3); align-items:center; width:100%; min-height:48px; padding:var(--s-2) 0; border:0; background:none; text-align:left; cursor:pointer; border-radius:var(--r-ctl)}
.prow-n{display:block; font-size:var(--t-sm); font-weight:600}
.track{display:block; height:10px; border-radius:5px; background:var(--surface-2); overflow:hidden; margin-top:var(--s-2)}
.track i{display:block; height:100%; background:var(--brand); border-radius:5px; transform-origin:0 50%}
.track.warn i{background:var(--warn)}
.track.bad i{background:var(--danger)}
.prow-a{font-weight:600; font-variant-numeric:tabular-nums}
.todo{display:grid; grid-template-columns:40px minmax(0,1fr) 20px; gap:var(--s-3); align-items:center; width:100%; min-height:56px; padding:var(--s-2) 0; border:0; border-top:1px solid var(--line); background:none; text-align:left; cursor:pointer}
.todo:first-of-type{border-top:0; padding-top:0}
.todo b{display:block; font-size:var(--t-sm); font-weight:600}
.todo small{display:block; font-size:var(--t-xs); color:var(--muted)}
.todo > .ic{color:var(--muted)}
.todo:hover b,.pend:hover b,.pr-row:hover b{color:var(--brand-ink)}
.prow:hover .prow-n{color:var(--brand-ink)}

/* Saldo del banco: tarjeta blanca con la cifra protagonista */
.banco .big{color:var(--ink); margin:var(--s-2) 0 var(--s-5)}
.banco .big.vacio{font-size:var(--t-lg); font-weight:500; letter-spacing:-.02em}
.banco .hero-bar .fr{background:var(--brand)}
.banco .hero-bar .lk{background:var(--spend)}
.banco .hero-split .hl{color:var(--muted)}
.banco .hero-split b{color:var(--ink); font-weight:500; font-size:var(--t-md)}
.banco .hero-split .hl .ic{color:var(--brand)}
.banco-pie{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-top:var(--s-5); flex-wrap:wrap}
.banco-pie .hint{flex:1 1 180px}
/* Tarjeta de acento verde NODO con subtarjetas */
.acento{background:var(--hero); color:var(--on-hero); border-color:transparent; display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); padding:var(--s-3)}
.sub{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:var(--s-4); border:0; border-radius:20px; background:var(--hero-track); color:inherit; text-align:left; cursor:pointer; min-width:0}
.sub:hover{background:color-mix(in srgb, var(--on-hero) 30%, transparent)}
.sub .ic-c{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--on-hero); color:var(--hero); margin-bottom:auto}
.sub .ic-c .ic{font-size:15px; stroke-width:2}
.sub .tile-l{margin-top:var(--s-5); font-size:var(--t-xs); font-weight:600; color:var(--on-hero-2)}
.sub .tile-n{color:var(--on-hero); font-size:clamp(18px, 5.2vw, var(--t-lg)); white-space:nowrap}
.sub .tile-s{color:var(--on-hero-2)}
/* Dona de gastos por categoría */
.dona-w{position:relative; width:184px; height:184px; margin:0 auto var(--s-5)}
.dona{width:100%; height:100%; transform:rotate(-90deg)}
.dona circle{fill:none; stroke-width:14; stroke-linecap:round}
.dona .base{stroke:var(--surface-2); stroke-linecap:butt}
.dona .seg{stroke:var(--brand)}
.dona-c{position:absolute; inset:0; display:grid; place-content:center; text-align:center}
.dona-c b{font-size:var(--t-lg); font-weight:500; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.dona-c small{font-size:var(--t-xs); color:var(--muted)}
.entrando .dona .seg{animation:aparece 600ms var(--ease) 200ms both}

/* Impuestos de aduana del contenedor */
.aduana{display:grid; gap:var(--s-5)}
@media (min-width: 1024px){ .aduana{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:var(--s-6)} }
.sec-t .num{font-variant-numeric:tabular-nums}

/* ---------- Proyectos y cotizaciones ---------- */
/* Cotizaciones de una misma persona: juntas en un bloque, con su total debajo */
.grupo{display:grid; gap:var(--s-3); padding:var(--s-3); border-radius:28px; background:color-mix(in srgb, var(--brand) 7%, var(--bg)); border:1px solid color-mix(in srgb, var(--brand) 16%, transparent); min-width:0}
.grupo > .grid{gap:var(--s-3)}
.grupo-h{display:flex; align-items:center; gap:var(--s-3); padding:var(--s-1) var(--s-1) 0}
.grupo-h .avatar{background:var(--btn); color:var(--on-btn)}
.grupo-h b{display:block; font-size:var(--t-md); font-weight:600; letter-spacing:-.01em}
.grupo-h small{display:block; font-size:var(--t-xs); color:var(--muted)}
.grupo-t{display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); align-items:end; gap:var(--s-2) var(--s-3); padding:var(--s-3) var(--s-4); border-radius:var(--r-in); background:var(--surface); border:1px solid var(--card-line)}
.grupo-tl{grid-column:1 / -1; font-size:var(--t-xs); font-weight:700; color:var(--brand-ink)}
.grupo-ti{display:grid; gap:2px}
.grupo-ti small{font-size:var(--t-xs); color:var(--muted)}
.grupo-ti b{font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
/* Dentro de una tarjeta (contenedor, aduana): el bloque es una lista más compacta */
.grupo.en-lista{margin:var(--s-2) 0; padding:var(--s-3) var(--s-3) var(--s-3)}
.grupo.en-lista .pr-row,.grupo.en-lista .pend{padding-left:var(--s-1); padding-right:var(--s-1)}
.grupo.en-lista .pr-row:first-of-type,.grupo.en-lista .pend:first-of-type{padding-top:var(--s-2)}
@media (min-width: 1024px){ .grupo{padding:var(--s-4)} .grupo-t{display:flex; gap:var(--s-6)} .grupo-tl{margin-right:auto; align-self:center} .grupo-ti b{font-size:var(--t-md)} }
.pr-row{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:var(--s-3); align-items:center; width:100%; padding:var(--s-3) 0; border:0; border-top:1px solid var(--line); background:none; text-align:left; cursor:pointer}
.pr-row:first-of-type{border-top:0; padding-top:0}
.pr-row[disabled]{cursor:default}
.pr-row b{display:block; font-size:var(--t-sm); font-weight:600}
.pr-row small{display:block; font-size:var(--t-xs); color:var(--muted)}
.pr-row .r{font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right}
.r.pos{color:var(--brand)}
.r.neg{color:var(--danger)}
.duo{display:flex; gap:4px; height:10px; margin-top:var(--s-2)}
.duo i{display:block; height:100%; border-radius:5px; min-width:4px; transform-origin:0 50%}
.duo .in{background:var(--brand)}
.duo .out{background:var(--spend)}
.proy{display:flex; flex-direction:column; gap:2px}
.proy-h{display:flex; align-items:center; gap:var(--s-3)}
.proy-h .t{min-width:0; flex:1}
.proy-h b{display:block; font-size:var(--t-md); font-weight:700; letter-spacing:-.01em}
.proy-h small{display:block; font-size:var(--t-xs); color:var(--muted)}
.k3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s-2); margin-top:var(--s-4)}
.k3 .l{display:block; font-size:var(--t-xs); font-weight:600; color:var(--muted)}
.k3 .n{display:block; font-size:var(--t-sm); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.k3 .n.pos{color:var(--brand)}
.k3 .n.neg{color:var(--danger)}
/* Pestañas con indicador que se desliza */
.seg-tabs{position:relative; display:flex; width:100%; background:var(--surface); border:1px solid var(--card-line); border-radius:var(--r-pill); padding:4px; max-width:100%}
.seg-tabs button{position:relative; z-index:1; flex:1 1 auto; min-height:40px; border:0; background:none; font-size:var(--t-sm); font-weight:600; line-height:1.2; color:var(--muted); padding:var(--s-1) var(--s-3); border-radius:var(--r-pill); cursor:pointer}
.seg-tabs button:hover{color:var(--ink)}
.seg-tabs button[aria-pressed="true"]{color:var(--on-btn)}
.seg-tabs .ind{top:4px; height:calc(100% - 8px); border-radius:var(--r-pill); background:var(--btn)}
.sum3{display:grid; grid-template-columns:repeat(3, minmax(min-content, 1fr)); gap:var(--s-2); margin-bottom:var(--s-3)}
.sum3 .card{padding:var(--s-3) 10px}
.sum3 .l{font-size:var(--t-xs); font-weight:600; color:var(--muted)}
.sum3 .n{font-size:var(--t-sm); font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap}
.sum3 .n.pos{color:var(--brand)}
.sum3 .n.neg{color:var(--danger)}
.cot-h{display:flex; justify-content:space-between; align-items:center; gap:var(--s-2)}
.cot-n{font-size:var(--t-xs); font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums}
.cot-p{font-size:var(--t-md); font-weight:700; margin-top:var(--s-2); letter-spacing:-.01em}
.prog{height:8px; border-radius:4px; background:var(--surface-2); overflow:hidden; margin:var(--s-4) 0 var(--s-1)}
.prog i{display:block; height:100%; background:var(--brand); transform-origin:0 50%}
.tri{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px; margin:var(--s-4) 0 var(--s-1)}
.tri-b{display:block; height:10px; border-radius:5px; background:var(--surface-2); overflow:hidden}
.tri-b i{display:block; height:100%; background:var(--brand); transform-origin:0 50%}
.tri small{display:flex; align-items:center; gap:3px; margin-top:6px; font-size:var(--t-xs); font-weight:600; color:var(--muted)}
.tri small .ic{font-size:12px; stroke-width:2.4}
.tri .listo small{color:var(--brand-ink)}
.pr-row .tri{margin:var(--s-2) 0 0}
/* Parte pagada directo al proveedor por la clienta: completa, pero con rayas (no pasó por NODO) */
.directo .tri-b i,.parte.directo .track i{background:repeating-linear-gradient(-45deg, var(--brand) 0 5px, color-mix(in srgb, var(--brand) 45%, transparent) 5px 10px)}
.directo-i{display:grid; gap:var(--s-2)}
.info > span{min-width:0}
@media (max-width: 600px){
  .pr-row:has(.tri){grid-template-columns:40px minmax(0,1fr)}
  .pr-row:has(.tri) .r{grid-column:2; text-align:left; display:flex; gap:6px; align-items:baseline}
}
.note{display:inline-flex; align-self:flex-start; align-items:center; gap:6px; margin-top:var(--s-3); padding:6px 10px; border-radius:var(--r-pill); font-size:var(--t-xs); font-weight:700; background:var(--warn-tint); color:var(--warn)}
.note.ok{background:var(--tint); color:var(--brand-ink)}
.note .ic{font-size:13px}

/* ---------- Movimientos ---------- */
.search{display:flex; align-items:center; gap:var(--s-2); height:48px; padding:0 var(--s-4); border:1px solid var(--line-2); border-radius:var(--r-ctl); background:var(--surface); margin-bottom:var(--s-3); transition:border-color var(--d-micro) var(--ease), box-shadow var(--d-micro) var(--ease)}
.search:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px var(--ring)}
.search input{flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:var(--t-md)}
.search .ic{color:var(--muted)}
.filters{display:flex; gap:var(--s-2); overflow-x:auto; scrollbar-width:none; padding-bottom:2px; margin:0 calc(-1 * var(--s-4)); padding-left:var(--s-4); padding-right:var(--s-4)}
.filters::-webkit-scrollbar{display:none}
.chip-b{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 var(--s-4); border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2); font-size:var(--t-sm); font-weight:600; white-space:nowrap; cursor:pointer; flex:none}
.chip-b:hover{background:var(--hover)}
.chip-b[aria-pressed="true"]{background:var(--btn); border-color:var(--btn); color:var(--on-btn)}
.chip-b .ic{font-size:15px}
.chip-b .mini-av{margin-left:-8px}
.day{font-size:var(--t-xs); font-weight:700; color:var(--muted); margin:var(--s-5) 0 var(--s-2); padding-left:var(--s-1)}
.list{background:var(--surface); border:1px solid var(--card-line); border-radius:var(--r-card); overflow:hidden}
.mov{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:var(--s-3); align-items:center; width:100%; min-height:64px; padding:var(--s-3) var(--s-4); border:0; border-top:1px solid var(--line); background:none; text-align:left; cursor:pointer}
.mov:first-child{border-top:0}
.mov:hover{background:var(--hover)}
.mov .ic-box{background:var(--surface); border:1px solid var(--line); color:var(--ink-2)}
.mov.ingreso .ic-box{background:var(--tint); border-color:transparent; color:var(--brand-ink)}
.mov-b{display:flex; flex-direction:column; gap:2px; min-width:0}
.mov-t{font-size:var(--t-sm); font-weight:600; overflow-wrap:anywhere}
.mov-m{font-size:var(--t-xs); color:var(--muted); overflow-wrap:anywhere}
.mov-tags{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px}
.mov-a{font-size:var(--t-md); font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap; align-self:start; padding-top:2px}
.mov.ingreso .mov-a{color:var(--brand)}
.mov.flash{animation:nuevo .9s var(--ease) both, flash 2.6s var(--ease)}
@keyframes nuevo{from{opacity:0; transform:translateY(-8px)}}
@keyframes flash{from{background:var(--tint)} to{background:transparent}}
.empty{padding:var(--s-6) var(--s-4); text-align:center; color:var(--muted)}
.empty .ic{font-size:22px}
.narrow{max-width:880px; margin:0 auto}

/* ---------- Reportes ---------- */
.months{display:flex; gap:var(--s-2); overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--s-4)) var(--s-3); padding:0 var(--s-4)}
.months::-webkit-scrollbar{display:none}
.legend{display:flex; gap:var(--s-3); font-size:var(--t-xs); color:var(--muted)}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:10px; height:10px; border-radius:3px; display:inline-block}
.chart-w{overflow-x:auto}
.chart{display:block; width:100%; min-width:300px; height:auto}
.chart .gl{stroke:var(--line); stroke-width:1}
.chart .ax{fill:var(--muted); font-size:11px; font-family:var(--f)}
.chart .ax.cur{fill:var(--ink); font-weight:700}
.chart .b-in{fill:var(--brand)}
.chart .b-out{fill:var(--spend)}
.chart .dim{opacity:.5}
.chart rect{transform-box:fill-box; transform-origin:50% 100%}
.hb{display:grid; gap:var(--s-4)}
.cat-r{display:grid; grid-template-columns:32px minmax(0,1fr); gap:var(--s-3); align-items:center}
.hb-t{display:flex; justify-content:space-between; align-items:center; gap:var(--s-2); font-size:var(--t-sm)}
.hb-t > span:first-child{font-weight:600; display:inline-flex; align-items:center; gap:6px; min-width:0}
.hb-t > span:last-child{font-variant-numeric:tabular-nums; color:var(--ink-2); white-space:nowrap}
.stack{display:flex; gap:3px; height:32px; margin-bottom:6px}
.stack i{display:block; height:100%; border-radius:8px; background:var(--brand); transform-origin:0 50%}
.split{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s-2); margin-top:var(--s-4)}
.split div{display:grid; grid-template-columns:12px minmax(0,1fr); gap:2px var(--s-2); align-items:center; background:var(--surface-2); border-radius:var(--r-in); padding:var(--s-3)}
.split .sw{width:12px; height:12px; border-radius:3px; background:var(--brand)}
.split b{font-size:var(--t-md); font-weight:600; font-variant-numeric:tabular-nums}
.split small{grid-column:2; font-size:var(--t-xs); color:var(--muted)}
.dl{display:grid; gap:var(--s-2)}
.dl-i{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:var(--s-3); align-items:center; padding:var(--s-3) var(--s-4); border:1px solid var(--line-2); border-radius:var(--r-in); background:var(--surface); color:inherit; text-align:left; cursor:pointer; width:100%; text-decoration:none}
.dl-i:hover{background:var(--hover)}
.dl-i b{display:block; font-size:var(--t-sm)}
.dl-i small{display:block; font-size:var(--t-xs); color:var(--muted)}
.dl-i .ic-box{width:44px; height:44px}

/* ---------- Hoja: bottom sheet en el celular, modal centrado en la computadora ---------- */
.scrim{position:fixed; inset:0; background:var(--scrim); z-index:20}
.sheet{position:fixed; z-index:30; display:flex; flex-direction:column; background:var(--surface); outline:0; left:0; right:0; bottom:0; max-height:calc(100% - 40px - env(safe-area-inset-top, 0px)); border-radius:var(--r-sheet) var(--r-sheet) 0 0; box-shadow:var(--sh-hoja)}
.fantasma{pointer-events:none}
.sheet-h{position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3); padding:var(--s-6) var(--s-4) var(--s-2); flex:none; touch-action:none}
/* Asa para arrastrar la hoja hacia abajo */
.sheet-h::before{content:""; position:absolute; top:10px; left:50%; width:36px; height:5px; margin-left:-18px; border-radius:3px; background:var(--line-2)}
.sheet-h h3{font-size:var(--t-lg); font-weight:700; letter-spacing:-.025em; text-wrap:balance}
.kicker{font-size:var(--t-xs); font-weight:700; color:var(--brand-ink); margin-bottom:2px}
.x{width:36px; height:36px; border-radius:50%; border:0; background:var(--surface-2); color:var(--ink-2); display:grid; place-items:center; cursor:pointer; flex:none; position:relative}
.x::after{content:""; position:absolute; inset:-4px}
.x:hover{background:var(--press)}
.sheet-b{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:var(--s-2) var(--s-4) var(--s-5); display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-4); align-content:start}
.sheet-f{display:flex; gap:var(--s-2); padding:var(--s-3) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--line); flex:none}
.sheet-f{flex-wrap:wrap}
.sheet-f .btn{flex:1 1 auto}
.tipos{display:grid; grid-template-columns:repeat(var(--n,3), minmax(0,1fr)); gap:var(--s-2)}
.tipo{display:grid; justify-items:center; gap:var(--s-3); padding:var(--s-5) var(--s-2) var(--s-4); border:1px solid var(--line-2); border-radius:var(--r-card); background:var(--surface); color:var(--ink); font-size:var(--t-sm); font-weight:700; text-align:center; cursor:pointer}
.tipo .ic-box{width:52px; height:52px}
.tipo .ic-box .ic{font-size:20px}
.tipo:hover{border-color:var(--brand); background:var(--hover)}
.modes{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s-2)}
.mode{display:grid; justify-items:center; gap:6px; padding:var(--s-3) 6px; border:1px solid var(--line-2); border-radius:var(--r-in); background:var(--surface); color:var(--ink-2); font-size:var(--t-xs); font-weight:700; text-align:center; cursor:pointer}
.mode:hover{background:var(--hover)}
.mode[aria-pressed="true"]{border-color:var(--brand); background:var(--tint); color:var(--brand-ink)}
.drop{position:relative; display:grid; justify-items:center; gap:6px; padding:var(--s-6) var(--s-4); border:1.5px dashed var(--line-2); border-radius:var(--r-card); background:var(--surface-2); text-align:center; cursor:pointer}
.drop:hover{border-color:var(--brand)}
.drop input,.file-btn input{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
.drop .ic-box{width:64px; height:64px; margin-bottom:6px}
.drop .ic-box .ic{font-size:24px}
.drop b{font-size:var(--t-md)}
.drop small{font-size:var(--t-xs); color:var(--muted)}
.drop:focus-within,.file-btn:focus-within{outline:2px solid var(--brand); outline-offset:2px}
.file-btn{position:relative}
.scanbox{position:relative; padding:var(--s-4); border-radius:var(--r-card); background:var(--surface-2); overflow:hidden; display:grid; place-items:center; min-height:120px}
.beam{position:absolute; left:6%; right:6%; top:0; height:3px; border-radius:2px; background:var(--brand); animation:scan 1.4s var(--ease) infinite alternate}
@keyframes scan{from{transform:translateY(12px)} to{transform:translateY(calc(var(--alto, 220px) - 16px))}}
.reading{display:flex; align-items:center; justify-content:center; gap:var(--s-2); font-weight:600; color:var(--brand-ink)}
.shot{display:block; max-width:100%; max-height:300px; margin:0 auto; border-radius:var(--r-ctl)}
.pdf{display:grid; justify-items:center; gap:6px; color:var(--ink-2); font-weight:700}
.pdf .ic{font-size:30px; color:var(--danger)}
.row2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-3)}
.fld{display:grid; gap:6px; min-width:0}
.fld > span:first-child{font-size:var(--t-xs); font-weight:700; color:var(--ink-2)}
.fld input,.fld select,.inp{width:100%; height:48px; padding:0 var(--s-4); border:1px solid var(--line-2); border-radius:var(--r-ctl); background:var(--surface); color:var(--ink); font-size:var(--t-md); font-weight:500; transition:border-color var(--d-micro) var(--ease), box-shadow var(--d-micro) var(--ease)}
.fld input:hover,.fld select:hover,.inp:hover{border-color:color-mix(in srgb, var(--line-2) 60%, var(--ink) 40%)}
.fld input:focus,.fld select:focus,.inp:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--ring)}
.fld input[disabled],.fld select[disabled]{opacity:.6}
.fld input[type="date"]{min-width:0; padding:0 10px; -webkit-appearance:none; appearance:none}
.chips{display:flex; flex-wrap:wrap; gap:var(--s-2)}
.switch{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); min-height:56px; padding:var(--s-3) var(--s-4); border:1px solid var(--line-2); border-radius:var(--r-in); cursor:pointer; background:var(--surface)}
.switch:hover{background:var(--hover)}
.switch > span{display:flex; align-items:center; gap:var(--s-3)}
.switch b{display:block; font-size:var(--t-sm)}
.switch small{display:block; font-size:var(--t-xs); color:var(--muted)}
.switch input{width:22px; height:22px; accent-color:var(--brand); flex:none}
.err{font-size:var(--t-xs); font-weight:700; color:var(--danger)}
.info{display:flex; align-items:center; gap:var(--s-2); padding:var(--s-3) var(--s-3); border-radius:var(--r-ctl); background:var(--tint); color:var(--brand-ink); font-size:var(--t-sm); font-weight:600}
.info.warn{background:var(--warn-tint); color:var(--warn)}
.info .ic{font-size:15px}
.hint{font-size:var(--t-xs); color:var(--muted)}
.hint .ic{font-size:13px}
/* Posibles duplicados */
.dup{display:grid; gap:var(--s-3); padding:var(--s-3); border-radius:var(--r-in); background:var(--warn-tint)}
.dup-t{display:flex; align-items:center; gap:var(--s-2); color:var(--warn); font-size:var(--t-sm); font-weight:700}
.dup-t .ic{font-size:15px}
.dup .list{border-radius:var(--r-ctl)}
.dup-i{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-3); align-items:center; padding:var(--s-3); border-top:1px solid var(--line)}
.dup-i:first-child{border-top:0}
.dup-i b{display:block; font-size:var(--t-sm); font-weight:600; overflow-wrap:anywhere}
.dup-i small{display:block; font-size:var(--t-xs); color:var(--muted)}
.dup .btn{justify-self:start}
.dt{display:grid; border:1px solid var(--line); border-radius:var(--r-in); overflow:hidden}
.dt div{display:grid; grid-template-columns:24px minmax(0,1fr); gap:var(--s-3); align-items:center; min-height:44px; padding:var(--s-2) var(--s-4); border-top:1px solid var(--line); font-size:var(--t-sm)}
.dt div:first-child{border-top:0}
.dt .ic{color:var(--muted); font-size:15px}
.amt-big{font-size:var(--t-xl); font-weight:400; letter-spacing:-.045em; font-variant-numeric:tabular-nums; line-height:1.1}
.amt-big.in{color:var(--brand)}
.amt-big.neg{color:var(--danger)}
.tl-i{display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:var(--s-3); align-items:center; padding:var(--s-3) 0; border-top:1px solid var(--line)}
.tl-i:first-child{border-top:0}
.tl-i b{display:block; font-size:var(--t-sm)}
.tl-i small{display:block; font-size:var(--t-xs); color:var(--muted)}
.tl-a{font-weight:600; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.tl-a .ic.ok{font-size:14px; color:var(--brand); margin-right:6px}
/* Próximos pagos */
.pend{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:var(--s-3); align-items:center; width:100%; min-height:56px; padding:var(--s-2) 0; border:0; border-top:1px solid var(--line); background:none; text-align:left; cursor:pointer}
.pend:first-of-type{border-top:0; padding-top:0}
.pend b{display:block; font-size:var(--t-sm); font-weight:600; overflow-wrap:anywhere}
.pend small{display:block; font-size:var(--t-xs); color:var(--muted)}
.dia{display:grid; place-items:center; align-content:center; width:44px; height:44px; border-radius:var(--r-ctl); background:var(--surface-2); line-height:1}
.dia b{font-size:var(--t-md); font-weight:700}
.dia small{font-size:10px; font-weight:700; text-transform:uppercase; color:var(--muted); margin-top:2px; letter-spacing:.02em}
.dia.tarde{background:var(--warn-tint); color:var(--warn)}
.dia.tarde small{color:var(--warn)}
.mas{display:block; width:100%; min-height:44px; border:0; background:none; color:var(--brand-ink); font-size:var(--t-sm); font-weight:700; padding:0; text-align:left; cursor:pointer}
.mas:hover{text-decoration:underline}
.fijos-b{display:grid; grid-template-columns:20px auto minmax(0,1fr) 20px; gap:var(--s-3); align-items:center; width:100%; min-height:48px; margin-top:var(--s-3); padding:0 var(--s-4); border:0; border-radius:var(--r-ctl); background:var(--surface-2); color:var(--ink-2); font-size:var(--t-sm); font-weight:600; text-align:left; cursor:pointer}
.fijos-b:hover{background:var(--press)}
.fijos-b b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; text-align:right}
.fijos-b .ic{color:var(--muted)}
.seg2{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:var(--r-in); background:var(--surface-2)}
.seg2 button{display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; border:0; border-radius:10px; background:none; color:var(--muted); font-size:var(--t-sm); font-weight:700; cursor:pointer}
.seg2 button:hover{color:var(--ink)}
.seg2 button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--sh-flota)}
.vs{width:100%; border-collapse:collapse; font-size:var(--t-sm)}
.vs th{font-size:var(--t-xs); font-weight:700; color:var(--muted); text-align:right; padding:0 0 var(--s-2)}
.vs th:first-child{text-align:left}
.vs td{padding:var(--s-2) 0; border-top:1px solid var(--line); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.vs td:first-child{text-align:left; white-space:normal; padding-right:var(--s-2)}
.vs tfoot td{font-weight:700; border-top:1px solid var(--line-2)}
.sec-t{display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); font-size:var(--t-sm); font-weight:700; color:var(--ink-2); margin-bottom:calc(-1 * var(--s-2))}
.team-cta{display:grid; gap:var(--s-2); align-content:center}

/* Avisos (toasts) */
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(104px + env(safe-area-inset-bottom, 0px)); z-index:40; display:flex; align-items:center; gap:var(--s-2); max-width:calc(100% - 32px); min-height:44px; padding:var(--s-2) var(--s-4); border-radius:var(--r-pill); background:var(--ink); color:var(--bg); font-size:var(--t-sm); font-weight:600; box-shadow:var(--sh-flota)}
.toast .ic{color:var(--brand); font-size:16px}
.toast.bad .ic{color:var(--danger)}

/* Partes de la proforma que paga el cliente */
.etapas{display:grid; gap:var(--s-2)}
.etapa{display:flex; justify-content:space-between; align-items:center; gap:var(--s-3); width:100%; min-height:56px; padding:var(--s-3) var(--s-4); border:1px solid var(--line-2); border-radius:var(--r-in); background:var(--surface); text-align:left; cursor:pointer}
.etapa:hover{background:var(--hover)}
.etapa b{display:block; font-size:var(--t-sm)}
.etapa small{display:block; font-size:var(--t-xs); color:var(--muted); font-variant-numeric:tabular-nums}
.etapa .ic{color:var(--line-2); font-size:18px}
.etapa[aria-pressed="true"]{border-color:var(--brand); background:var(--tint)}
.etapa[aria-pressed="true"] .ic{color:var(--brand); animation:marca var(--d-comp) var(--ease)}
.chips[data-group="pct"]{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:6px}
.chips[data-group="pct"] .chip-b{padding:0; justify-content:center}
.partes{display:grid; gap:var(--s-3)}
.parte .hb-t .ic{font-size:14px; color:var(--brand)}
@keyframes marca{from{transform:scale(.6); opacity:0}}

/* Lo que aparece al elegir algo entra con escala y fundido */
#proyAuto,#campoProy,#campoFactura,#campoCobro,#avisoFuturo,#dupForm,#errForm,.chip-b[aria-pressed="true"] .mini-av{animation:aparece var(--d-comp) var(--ease)}
@keyframes aparece{from{opacity:0; transform:scale(.97) translateY(-4px)}}

/* ---------- Configuración ---------- */
.cfg{display:grid; gap:var(--s-3)}
.user-r{display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:var(--s-3); align-items:center; min-height:56px; padding:var(--s-2) 0; border-top:1px solid var(--line)}
.user-r:first-of-type{border-top:0}
.user-r b{display:block; font-size:var(--t-sm)}
.user-r small{display:block; font-size:var(--t-xs); color:var(--muted)}
.inline{display:flex; gap:var(--s-2); align-items:center}
.inline .inp{flex:1; min-width:0}
.topes{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-3)}

/* ---------- Entrar ---------- */
.login{min-height:100%; min-height:100dvh; display:grid; place-items:center; padding:var(--s-5) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom, 0px))}
.login-card{width:100%; max-width:380px; display:grid; gap:var(--s-5)}
.login-brand{display:grid; justify-items:center; gap:var(--s-3); text-align:center}
.login-brand .logo{height:32px; margin-bottom:var(--s-2)}
.login-brand h1{font-size:var(--t-lg); font-weight:700; letter-spacing:-.02em}
.who{display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:var(--s-2)}
.who button{display:grid; justify-items:center; gap:var(--s-2); padding:var(--s-4) var(--s-2); border:1px solid var(--line-2); border-radius:var(--r-card); background:var(--surface); color:var(--ink); font-size:var(--t-sm); font-weight:700; cursor:pointer}
.who button:hover{background:var(--hover)}
.who button[aria-pressed="true"]{border-color:var(--brand); background:var(--tint); color:var(--brand-ink)}
.who .avatar{width:44px; height:44px; font-size:var(--t-md)}

/* ---------- Carga: esqueletos con brillo suave (sin spinners) ---------- */
.sk{position:relative; display:block; overflow:hidden; background:var(--surface-2); border-radius:var(--r-card)}
.sk::after{content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent); animation:brillo 1.4s var(--ease) infinite}
@keyframes brillo{to{transform:translateX(100%)}}
.esqueleto{max-width:1200px; margin:0 auto; padding:calc(var(--top-h) + env(safe-area-inset-top, 0px)) var(--s-4) var(--s-4); display:grid; gap:var(--s-3)}
.esqueleto .sk-t{height:28px; width:55%; border-radius:var(--r-ctl); margin:var(--s-2) 0}
.esqueleto .sk-hero{height:208px}
.esqueleto .sk-par{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3)}
.esqueleto .sk-par .sk{height:136px}
.esqueleto .sk-card{height:220px}
.sk-lineas{display:grid; gap:var(--s-2)}
.sk-lineas .sk{height:48px; border-radius:var(--r-ctl)}
.sk-lineas .sk:nth-child(2){width:70%}
.loading{min-height:100dvh}

/* ---------- Números que ruedan y barras que se llenan ---------- */
.rueda{display:inline-block; animation:rueda 520ms var(--ease) both}
@keyframes rueda{from{transform:translateY(.6em); opacity:0; filter:blur(4px)}}
.entrando :is(.track i, .tri-b i, .prog i, .b, .duo i, .hero-bar i, .stack i){animation:llenar 800ms var(--ease) 120ms both}
.entrando .chart rect{animation:subir 700ms var(--ease) 120ms both}
@keyframes llenar{from{transform:scaleX(0)}}
@keyframes subir{from{transform:scaleY(0)}}

/* ---------- Éxito ---------- */
.exito{position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:var(--btn); color:var(--on-btn); text-align:center; padding:var(--s-5) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); cursor:pointer}
.exito-c{display:grid; justify-items:center; gap:var(--s-2); max-width:340px}
.exito-check{width:72px; height:72px; margin-bottom:var(--s-3); fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.exito-check circle{stroke-dasharray:151; stroke-dashoffset:151; opacity:.5; animation:trazo 600ms var(--ease) 80ms forwards}
.exito-check path{stroke-dasharray:36; stroke-dashoffset:36; stroke-width:3; animation:trazo 420ms var(--ease) 420ms forwards}
@keyframes trazo{to{stroke-dashoffset:0}}
.exito-n{font-size:var(--t-xl); font-weight:400; letter-spacing:-.04em; font-variant-numeric:tabular-nums; animation:aparece-n var(--d-pantalla) var(--ease) 300ms both}
.exito-t{font-size:var(--t-md); font-weight:700; animation:aparece-n var(--d-pantalla) var(--ease) 380ms both}
.exito-d{font-size:var(--t-sm); opacity:.8; animation:aparece-n var(--d-pantalla) var(--ease) 440ms both}
.exito-x{position:fixed; left:0; right:0; bottom:calc(var(--s-6) + env(safe-area-inset-bottom, 0px)); font-size:var(--t-xs); opacity:.7}
@keyframes aparece-n{from{opacity:0; transform:translateY(10px); filter:blur(4px)}}

/* ---------- Deslizar para confirmar ---------- */
.desliza{position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-width:240px; height:52px; padding:0 56px; border-radius:var(--r-pill); background:var(--danger-tint); color:var(--danger); font-size:var(--t-sm); font-weight:700; overflow:hidden; touch-action:none; -webkit-user-select:none; user-select:none}
.desliza-p{position:absolute; left:4px; top:4px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--danger); color:#fff; cursor:grab}
.desliza.hecho .desliza-p{transition:transform var(--d-micro) var(--ease)}
.row-btns .desliza{flex:1 1 100%}

/* ---------- Panel de movimientos (celular) ---------- */
.movs-h{position:sticky; top:calc(var(--top-h) + env(safe-area-inset-top, 0px)); z-index:1; padding-bottom:var(--s-3); background:var(--bg); transform-origin:50% 0}
.panel{position:relative; z-index:2}
@media (max-width: 1023px){
  .panel{margin:0 calc(-1 * var(--s-4)); padding:var(--s-1) var(--s-4) var(--s-5); min-height:70vh; background:var(--surface); border-radius:var(--r-sheet) var(--r-sheet) 0 0; box-shadow:var(--sh-hoja)}
  .panel .list{border:0; border-radius:0; background:transparent}
  .panel .mov{padding-left:0; padding-right:0}
  .panel .mov:hover{background:transparent}
  .panel .day{margin-top:var(--s-4)}
  .panel .empty-card{background:transparent}
}

/* En pantallas táctiles, todo lo que se toca mide al menos 44 px */
@media (pointer: coarse){
  .chip-b,.hero-btn,.seg-tabs button{min-height:44px}
  button.avatar::before{content:""; position:absolute; inset:-4px}
}

/* Celulares angostos */
@media (max-width: 359px){
  .sum3{grid-template-columns:1fr}
  .sum3 .card{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-2)}
  .pair,.acento,.split{grid-template-columns:1fr}
  .grupo{padding:var(--s-2); border-radius:var(--r-card)}
  .grupo .card{padding:var(--s-4)}
  .k3 .n{font-size:13px}
  .tri small{font-size:11px}
  .grupo.en-lista .pr-row{grid-template-columns:minmax(0,1fr)}
  .grupo.en-lista .pr-row > .ic-box{display:none}
  .grupo.en-lista .pr-row .r{grid-column:1}
  .tabs{justify-content:space-between; padding-left:var(--s-1); padding-right:var(--s-1)}
  .tab{font-size:11px; letter-spacing:-.02em; padding:0 2px}
}

/* ---------- Reporte imprimible ---------- */
.rep{background:var(--surface); border:1px solid var(--card-line); border-radius:var(--r-card); padding:var(--s-5); overflow-x:auto}
@media (max-width: 599px){ .rep{padding:var(--s-4)} }
.rep h1{font-size:var(--t-lg); font-weight:700}
.rep .logo{height:28px}
.rep table{width:100%; border-collapse:collapse; font-size:var(--t-xs); margin-top:var(--s-2)}
.rep th{text-align:left; font-size:var(--t-xs); color:var(--muted); padding:6px 4px; border-bottom:1px solid var(--line-2)}
.rep td{padding:6px 4px; border-bottom:1px solid var(--line); vertical-align:top}
.rep td.n,.rep th.n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.rep h2{font-size:var(--t-md); font-weight:700; margin-top:var(--s-5)}

/* ---------- Computadora: menú en pastillas arriba y grid de tarjetas ---------- */
@media (min-width: 1024px){
  :root{--top-h:72px}
  .tabs{display:none}
  body{background:var(--marco)}
  .app{height:calc(100dvh - 32px); margin:16px; border-radius:36px; overflow:hidden}
  html.hoja-abierta body{background:var(--fondo-hoja)}
  .top{position:relative; gap:var(--s-5); padding:var(--s-2) var(--s-6) 0}
  .logo{height:28px}
  .pills{position:relative; display:flex; gap:2px; padding:4px; border-radius:var(--r-pill)}
  .pill{position:relative; z-index:1; display:inline-flex; align-items:center; gap:var(--s-2); min-height:42px; padding:0 18px; border:0; border-radius:var(--r-pill); background:none; color:var(--muted); font-size:var(--t-sm); font-weight:500; cursor:pointer; white-space:nowrap}
  .pill .ic{font-size:15px}
  .pill:hover{color:var(--ink); background:var(--hover)}
  .pill[aria-current="page"]{color:var(--on-btn)}
  .pill[aria-current="page"]:hover{background:none}
  .pills .ind{top:4px; height:calc(100% - 8px); border-radius:var(--r-pill); background:var(--btn)}
  .top .top-add{display:inline-flex; min-height:44px}
  .top-r .avatar{width:44px; height:44px; background:var(--surface); border:1px solid var(--line)}
  .meta{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); margin-bottom:var(--s-3); font-size:var(--t-sm); color:var(--muted)}
  .sync{display:inline-flex}
  .wrap:has(.hello) .meta .top-date{visibility:hidden}
  .scroll{overflow-y:auto; padding:var(--s-4) var(--s-6) var(--s-7)}
  .card{padding:var(--s-5) 28px}
  .wrap .sum3 .card{padding:var(--s-4) var(--s-5)}
  .wrap .sum3 .n{font-size:var(--t-lg)}
  .sheet .sum3 .n{font-size:var(--t-md)}
  .hero{padding:var(--s-5) var(--s-6)}
  .h-screen{font-size:28px}
  .grid{grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--s-4)}
  .c-4{grid-column:span 4}
  .c-5{grid-column:span 5}
  .c-6{grid-column:span 6}
  .c-7{grid-column:span 7}
  .c-8{grid-column:span 8}
  .c-12{grid-column:1 / -1}
  .seg-tabs{display:inline-flex; width:auto}
  .seg-tabs button{white-space:nowrap; padding:0 var(--s-4)}
  .filters,.months{margin-left:0; margin-right:0; padding-left:0; padding-right:0}
  .movs-h{position:static}
  .sheet{left:50%; top:50%; bottom:auto; right:auto; width:min(560px, 92vw); max-height:88vh; border-radius:24px; transform:translate(-50%,-50%); box-shadow:var(--sh-flota)}
  .sheet-h{padding:var(--s-5) var(--s-5) var(--s-2)}
  .sheet-b{padding-left:var(--s-5); padding-right:var(--s-5)}
  .sheet-f{padding-left:var(--s-5); padding-right:var(--s-5)}
  .sheet-h::before{display:none}
  .sheet-f{padding-bottom:var(--s-4)}
  .toast{bottom:var(--s-6)}
  .dl{grid-template-columns:1fr 1fr}
  .exito{background:var(--scrim)}
  .grid{gap:20px}
  .exito-c{padding:var(--s-6) var(--s-6) var(--s-7); border-radius:var(--r-sheet); background:var(--btn); width:min(380px, 92vw); max-width:none; position:relative}
  .exito-x{position:absolute; bottom:var(--s-4)}
  .esqueleto{padding:calc(var(--top-h) + var(--s-5)) var(--s-6)}
  .esqueleto .sk-par{grid-template-columns:repeat(4, 1fr)}
}
@media (min-width: 1024px) and (max-width: 1239px){
  .pill .ic{display:none}
  .pill{padding:0 14px}
  .top{padding:0 var(--s-5); gap:var(--s-4)}
  .scroll{padding-left:var(--s-5); padding-right:var(--s-5)}
}

@media print{
  body{background:#fff; color:#000}
  .top,.tabs,.meta,.no-print,.toast,.sheet,.scrim,.exito{display:none !important}
  .app{display:block; height:auto; overflow:visible}
  .scroll{overflow:visible; padding:0}
  .rep{border:0; padding:0}
}
/* Movimiento reducido: solo fundidos */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms !important; animation-delay:0ms !important; transition-duration:1ms !important; scroll-behavior:auto !important}
  .sk::after{animation:none}
  button:active,.btn:active{transform:none !important}
}