/* ---------- Finanzas (gastos): usa las filas de Cobros (.cob-list / .cob-fila) con algunos agregados ---------- */
.fin-mes{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.fin-intro{margin:0 0 14px}
.fin-dolar{margin:0 0 12px;font-size:14px;color:var(--ink-2)}
.fin-dolar.warn,.fin-dolar .warn{color:var(--warn)}
.fin-barra select{width:auto;flex:1 1 200px;max-width:320px;padding:8px 12px;font-size:14px}
.fin-barra .seg-btns{flex:0 0 auto}

/* filas: categoría y cliente debajo del concepto; el monto en dólares, chico debajo de los pesos */
.cf-txt .fin-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px;white-space:normal}
.fin-meta .chip{margin:0}
.fin-meta > span:not(.chip){font-size:12px;color:var(--muted)}
@media (min-width:641px){.fin-fila{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 170px 100px}}
.cf-monto small{display:block;font-family:Inter,sans-serif;font-size:12px;color:var(--muted);margin-top:2px}
.fin-pausado{opacity:.6}
.fin-pausado .cf-estado{color:var(--muted)}

/* formularios: monto + moneda en una línea, la cotización debajo */
.fin-monto{display:flex;align-items:flex-end;gap:10px;margin-bottom:12px}
.fin-monto .f{flex:1;margin:0}
.fin-monto .seg-btns{margin:0 0 4px}
.fin-monto .seg-btns button,.fin-estado button{padding:9px 14px;font-size:14px}
.fin-estado{margin-left:0}
.fin-cotiz{padding:12px;margin:0 0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.fin-cotiz .f{margin-bottom:10px}
.fin-equiv{margin:10px 0 0;font-weight:600;font-variant-numeric:tabular-nums}
.fin-equiv:empty{display:none}
#cotBox[hidden],#pagEn[hidden],#mesAn[hidden]{display:none}

/* Ajustes → Finanzas: categorías */
.fin-cats{display:flex;flex-direction:column;gap:8px}
.fin-cat{display:flex;align-items:center;gap:6px}
.fin-cat .color-sw{flex:0 0 auto;width:42px;height:38px;border-radius:8px;border:2px solid var(--borde-muestra);cursor:pointer;padding:0}
.fin-cat .fin-cat-n{flex:1;min-width:0;padding:8px 10px;font-size:15px}
.fin-cat .btn.icon{flex:0 0 auto;width:34px;min-height:34px}
.fin-cat-del{color:var(--danger)}

/* en el celular, los campos de a dos no se pasan del ancho (las fechas y las listas largas tienen un ancho mínimo propio) */
.fin-form .row > *,.fin-form input,.fin-form select{min-width:0}
.fin-form .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

/* Clientes → Por cobrar, al entrar desde la tarjeta Vencido del dashboard */
.cob-filtro{margin:0 0 10px}

/* ---------- Dashboard ---------- */
/* período: en el celular se desliza de costado */
.fin-per{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 10px;padding:2px 16px}
.fin-per::-webkit-scrollbar{display:none}
.fin-per .tag{flex:0 0 auto;padding:7px 14px;font-size:14px}
@media (min-width:900px){.fin-per{flex-wrap:wrap;margin:0 0 10px;padding:2px 0}}
.fin-per-txt{margin:0 0 14px;font-size:14px;font-weight:600}

/* tarjetas: 2 columnas en el celular, 3 en tablet, 6 en pantalla ancha */
.fin-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
@media (min-width:700px){.fin-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1380px){.fin-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}}
.fin-kpi{color:var(--ink);text-decoration:none}
a.fin-kpi{transition:border-color .15s,background .15s}
a.fin-kpi:hover{border-color:var(--line-3);background:var(--surface-2)}
.fin-kpi small span{color:var(--faint)}
.fin-kpi > b{font-size:clamp(18px,5.2vw,24px);white-space:nowrap;font-variant-numeric:tabular-nums}
.fin-mon{font-size:.58em;font-weight:600;margin-right:4px;color:var(--muted);vertical-align:.12em}
.t-warn .fin-mon{color:inherit;opacity:.75}
.fin-antes{display:block;white-space:nowrap;color:var(--muted)}
.fin-kpi .fin-var{font-size:12px;line-height:1.35;color:var(--muted)}
.fin-kpi .fin-var b{font:700 12px Inter,sans-serif;font-variant-numeric:tabular-nums}
.fin-var.bien b{color:var(--ok)}
.fin-var.mal,.fin-var.mal b{color:var(--danger)}
.tile.t-warn .fin-var b{color:var(--danger)}

/* bloques de gráficos: uno debajo del otro; en la compu, de a dos (la evolución y los dólares, de ancho completo) */
.fin-dash{display:grid;gap:12px}
@media (min-width:1100px){.fin-dash{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fb-evolucion,.fb-usd{grid-column:1/-1}}
.fin-bloque{min-width:0;padding:16px 16px 14px}
.fb-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.fb-cab h2{font-size:17px;margin:0 0 4px}
.fb-cab .hint{margin:0}
.fb-cab .seg-btns{flex:0 0 auto;margin:0}
.fb-vacio{padding:28px 12px;text-align:center;font-size:14px;color:var(--muted);border:1px dashed var(--line-2);border-radius:var(--r)}

/* gastos de la categoría elegida en la dona */
.fb-det:not(:empty){margin-top:14px;padding-top:12px;border-top:1px solid var(--line);animation:aparece .3s var(--anim,ease) both}
.fb-det-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px}
.fb-gastos{list-style:none;margin:0 0 10px;padding:0}
.fb-gastos li{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.fb-gastos .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-gastos b{text-align:right;font-variant-numeric:tabular-nums}
.fb-gastos small{display:block;font-size:12px;font-weight:400;color:var(--muted)}

/* en la compu, el monotributo y la proyección de a dos; la rentabilidad, de ancho completo (es una tabla) */
@media (min-width:1100px){.fb-rentabilidad{grid-column:1/-1}}

/* avisos dentro de los bloques: rojo (95 % o negativo), amarillo (80 %), azul (recategorización) */
.fm-aviso{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;padding:10px 12px;border-radius:var(--r);font-size:14px;line-height:1.4;
  border:1px solid color-mix(in srgb,var(--danger) 40%,var(--line));background:color-mix(in srgb,var(--danger) 8%,var(--surface))}
.fm-aviso.medio{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 9%,var(--surface))}
.fm-aviso.recat{border-color:color-mix(in srgb,var(--info) 40%,var(--line));background:color-mix(in srgb,var(--info) 8%,var(--surface))}

/* ---------- Monotributo ---------- */
.fm-cat{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--surface-3);border:1px solid var(--line-2);font:700 20px "Bricolage Grotesque",sans-serif}
.fm-fact{margin:0 0 12px;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.fm-cifras{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.fm-cifras > span{display:flex;flex-direction:column;gap:2px;min-width:0}
.fm-cifras > span:last-child{text-align:right}
.fm-cifras small{font-size:12.5px;color:var(--muted)}
.fm-cifras b{font-size:clamp(18px,5vw,22px);white-space:nowrap;font-variant-numeric:tabular-nums}
.fm-barra{position:relative;height:14px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.fm-barra > span{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:var(--ok);animation:fm-crece .9s cubic-bezier(.22,.8,.24,1) both}
.fm-barra.medio > span{background:var(--warn)}
.fm-barra.alto > span{background:var(--danger)}
.fm-barra i{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--surface);opacity:.85}
@keyframes fm-crece{from{width:0}}
.fm-pie{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:14px;color:var(--ink-2)}
.fm-pie > b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.fm-pie span b{color:var(--ink)}
.fm-pasa{margin:10px 0 0;font-size:14px;color:var(--ink-2)}
.fm-pasa b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.fm-barra > span{animation:none}}

/* Ajustes → Finanzas: topes por categoría */
.fm-topes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-bottom:12px}
.fm-tope{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 12px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface-2)}
.fm-tope b{flex:0 0 16px;font:700 16px "Bricolage Grotesque",sans-serif}
.fm-tope .fm-ars{font-size:12px;color:var(--muted)}
.fm-tope input{flex:1;min-width:0;border:0;background:none;padding:8px 6px;font-size:15px;font-variant-numeric:tabular-nums}
.fm-tope:focus-within{border-color:var(--line-3)}
.fm-acc{display:flex;justify-content:flex-end}

/* ---------- Proyección ---------- */
.fp-res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.fp-res > span{display:flex;flex-direction:column;gap:2px;min-width:0}
.fp-res small{font-size:12px;color:var(--muted);line-height:1.25}
.fp-res b{font-size:clamp(14px,3.8vw,17px);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-res b.neg,.gr-tip em.neg,.fr-gan.neg,.fc-rent b.neg{color:var(--danger)}
.gr-tip .gr-tip-tot{margin-top:2px;padding-top:6px;border-top:1px solid var(--line);color:var(--ink);font-weight:600}

/* ---------- Rentabilidad: tarjetas en el celular, tabla en la compu ---------- */
.fr-sem{flex:0 0 auto;display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--muted)}
.fr-sem.verde{background:var(--ok)}
.fr-sem.amarillo{background:var(--warn)}
.fr-sem.rojo{background:var(--danger)}
.fr-orden{margin-bottom:10px}
.fr-tabla{display:flex;flex-direction:column;gap:8px}
.fr-cab{display:none}
.fr-fila{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);color:var(--ink);text-decoration:none;transition:border-color .15s}
a.fr-fila:hover{border-color:var(--line-3)}
/* en tarjeta: nombre y ganancia arriba, cobrado y costos debajo, el margen al pie */
.fr-nom{grid-column:1;grid-row:1;align-self:end;display:flex;align-items:center;gap:8px;min-width:0;font-weight:600;font-size:15px}
.fr-nom span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-n{display:flex;flex-direction:column;gap:1px;font-variant-numeric:tabular-nums;font-size:14px;white-space:nowrap;min-width:0}
.fr-n::before{content:attr(data-l);font-size:11.5px;color:var(--muted)}
.fr-fila .fr-gan{grid-column:2;grid-row:1;text-align:right;font-size:16px;font-weight:700}
.fr-fila .fr-n:nth-child(3){text-align:right}
.fr-m{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
.fr-m b{min-width:58px;font-size:14px}
.fr-m.verde b{color:var(--ok)}
.fr-m.amarillo b{color:var(--warn)}
.fr-m.rojo b{color:var(--danger)}
.fr-barra{flex:1;height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.fr-barra span{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--muted)}
.fr-m.verde .fr-barra span{background:var(--ok)}
.fr-m.amarillo .fr-barra span{background:var(--warn)}
.fr-m.rojo .fr-barra span{background:var(--danger)}
.fr-ley{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.fr-ley span{display:inline-flex;align-items:center;gap:6px}
.fr-ley a{color:var(--ink-2)}
/* la tabla depende del ancho del bloque (con la barra lateral de la compu queda más angosto que la pantalla) */
.fr{container-type:inline-size}
@container (min-width:660px){
  .fr-orden{display:none}
  .fr-tabla{gap:0}
  .fr-cab,.fr-fila{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)) minmax(150px,1.2fr);gap:12px;align-items:center}
  .fr-cab{padding:0 10px 8px;border-bottom:1px solid var(--line-2)}
  .fr-cab button{padding:4px 0;border:0;background:none;color:var(--muted);font:600 12.5px Inter,sans-serif;text-align:right;cursor:pointer;white-space:nowrap}
  .fr-cab button:first-child{text-align:left}
  .fr-cab button:hover,.fr-cab button.on{color:var(--ink)}
  .fr-fila{padding:10px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
  a.fr-fila:hover{background:var(--surface-2)}
  .fr-nom,.fr-m,.fr-fila .fr-gan{grid-column:auto;grid-row:auto}
  .fr-fila .fr-gan{font-size:14px;font-weight:600}
  .fr-n{display:block;text-align:right}
  .fr-n::before{content:none}
}

/* ficha del cliente */
.fc-rent{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:6px}
@media (min-width:520px){.fc-rent{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fc-rent > span{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);min-width:0}
.fc-rent small{font-size:12px;color:var(--muted)}
.fc-rent b{font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.fc-rent .fr-m{display:flex;gap:6px}

/* Tareas → Hoy */
.aviso-mono.medio{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 8%,var(--surface))}
.aviso-mono.medio b{color:var(--warn)}
.aviso-mono.info{border-color:color-mix(in srgb,var(--info) 40%,var(--line));background:color-mix(in srgb,var(--info) 7%,var(--surface))}
.aviso-mono.info b{color:var(--info)}