/* Estilos del portal de Impulso Contable (sacados de la maqueta aprobada). */
/* Layout: app de una columna (celular primero) que en escritorio abre a dos columnas; barra de demo arriba. */
:root{
  /* Contraste medido el 25/10/2026 (consulta 16, #58): todo texto ≥ 4,5:1 sobre su fondo (ink-3 sobre --sunk, pills sobre su fondo suave). */
  --bg:#FBF7F3; --surface:#FFFFFF; --sunk:#F4EDE6; --ink:#2A1D17; --ink-2:#6B5A50; --ink-3:#776960; --line:#EADFD6;
  --brand:#4A2C21; --brand-ink:#FFF8F2; --accent:#C98A2E; --accent-soft:#F6E7CF;
  --ventas:#A4532B; --compras:#008C7E;
  --good:#2D7A4D; --good-soft:#E3F1E8; --warn:#946317; --warn-soft:#FBEED6; --crit:#B23B3B; --crit-soft:#F8E1E1;
  --demo:#2A1D17; --demo-ink:#F6E7CF;
  --f-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:"Figtree", "Segoe UI", system-ui, sans-serif;
  --r:14px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#17110E; --surface:#221A16; --sunk:#2B211C; --ink:#F3E9E1; --ink-2:#C2AFA2; --ink-3:#948073; --line:#3A2E28;
  --brand:#E8CDB8; --brand-ink:#24170F; --accent:#E3B25C; --accent-soft:#3A2B17;
  --ventas:#C8693A; --compras:#11A091;
  --good:#5DBB84; --good-soft:#1C3326; --warn:#E3B25C; --warn-soft:#3A2B17; --crit:#EE7B7B; --crit-soft:#3D1F1F;
  --demo:#0D0907; --demo-ink:#E3B25C; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#17110E; --surface:#221A16; --sunk:#2B211C; --ink:#F3E9E1; --ink-2:#C2AFA2; --ink-3:#948073; --line:#3A2E28;
  --brand:#E8CDB8; --brand-ink:#24170F; --accent:#E3B25C; --accent-soft:#3A2B17;
  --ventas:#C8693A; --compras:#11A091;
  --good:#5DBB84; --good-soft:#1C3326; --warn:#E3B25C; --warn-soft:#3A2B17; --crit:#EE7B7B; --crit-soft:#3D1F1F;
  --demo:#0D0907; --demo-ink:#E3B25C; color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.5}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--f-display); font-weight:700; letter-spacing:-.01em; text-wrap:balance; margin:0}
button,input,select{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.gutter{padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
.wrap{max-width:1080px; margin:0 auto}

/* barra de demo */
.demo{background:var(--demo); color:var(--demo-ink); font-size:13px}
.demo .wrap{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding-block:8px}
.demo strong{letter-spacing:.06em; text-transform:uppercase; font-size:11px}
.demo select,.demo button{background:transparent; border:1px solid currentColor; border-radius:8px; padding:4px 10px; cursor:pointer}

/* encabezado */
header.top{position:sticky; top:env(safe-area-inset-top, 0px); z-index:5; background:var(--bg); border-bottom:1px solid var(--line)}
header.top .wrap{display:flex; align-items:center; gap:12px; padding-block:12px}
.marca{display:flex; align-items:center; gap:10px; min-width:0}
.marca svg{flex:none}
.marca b{font-family:var(--f-display); font-size:17px; color:var(--brand)}
.quien{margin-left:auto; display:flex; align-items:center; gap:10px; min-width:0}
.quien span{font-size:13px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.avatar{flex:none; width:34px; height:34px; border-radius:50%; background:var(--brand); color:var(--brand-ink); display:grid; place-items:center; font-weight:700; font-size:13px}
nav.tabs .wrap{display:flex; gap:4px; overflow-x:auto; padding-block:0 0; scrollbar-width:none}
nav.tabs a{flex:none; padding:10px 12px; color:var(--ink-2); text-decoration:none; font-weight:600; font-size:14px; border-bottom:3px solid transparent}
nav.tabs a[aria-current="true"]{color:var(--ink); border-color:var(--accent)}

main .wrap{display:grid; gap:20px; padding-block:22px 48px}
.grid2{display:grid; gap:20px; grid-template-columns:1fr}
@media (min-width:860px){ .grid2{grid-template-columns:1.35fr 1fr} }
section{min-width:0}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.muted{color:var(--ink-2)}
.small{font-size:13px}

/* este mes */
.hero{background:var(--brand); color:var(--brand-ink); border:none; position:relative; overflow:hidden}
.hero .eyebrow{color:color-mix(in srgb, var(--brand-ink) 70%, transparent)}
.hero .monto{font-family:var(--f-display); font-size:clamp(34px, 8vw, 48px); line-height:1.05; margin:6px 0 4px}
.hero p{margin:0; color:color-mix(in srgb, var(--brand-ink) 82%, transparent)}
.barra{height:8px; border-radius:99px; background:color-mix(in srgb, var(--brand-ink) 18%, transparent); margin-top:16px; overflow:hidden}
.barra i{display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .4s}
.hero svg.deco{position:absolute; right:-10px; bottom:-14px; opacity:.13}
.desglose{display:flex; flex-wrap:wrap; gap:4px 16px; font-size:13px; margin:2px 0 10px; color:color-mix(in srgb, var(--brand-ink) 82%, transparent)}
.desglose b{color:var(--brand-ink)}
.grupo-pagos{display:flex; justify-content:space-between; align-items:baseline; margin-top:8px; padding:0 2px}

.pagos{display:grid; gap:10px; margin-top:14px}
.pago{display:grid; grid-template-columns:auto 1fr auto; gap:4px 12px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.pago .estado{width:12px; height:12px; border-radius:50%}
.pago h3{font-family:var(--f-body); font-size:15px; font-weight:700}
.pago .det{grid-column:2; font-size:13px; color:var(--ink-2)}
.pago .imp{font-weight:700; text-align:right}
.pago .acc{grid-column:2 / 4; display:flex; justify-content:space-between; align-items:center; gap:8px}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:3px 9px; border-radius:99px}
.pill.ok{background:var(--good-soft); color:var(--good)} .pill.warn{background:var(--warn-soft); color:var(--warn)} .pill.crit{background:var(--crit-soft); color:var(--crit)}
.btn{border:1px solid var(--line); background:var(--sunk); border-radius:10px; padding:7px 12px; font-weight:600; cursor:pointer}
.btn.pri{background:var(--brand); color:var(--brand-ink); border-color:transparent}
.btn[aria-pressed="true"]{background:var(--good-soft); color:var(--good); border-color:transparent}

/* listas */
.lista{display:grid; gap:0; margin-top:8px}
.fila{display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--line)}
.fila:first-child{border-top:none}
.fecha{text-align:center; line-height:1.1}
.fecha b{display:block; font-family:var(--f-display); font-size:22px}
.fecha small{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.fila .t{font-weight:600} .fila .s{font-size:13px; color:var(--ink-2)}

/* negocio */
.kpis{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:12px}
@media (min-width:640px){ .kpis{grid-template-columns:repeat(4, minmax(0,1fr))} }
.kpis.pagos-tot{grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:14px}   /* totales al pie de Pagos hechos (26/10/2026) */
.kpi{padding:12px 14px; border-radius:12px; background:var(--sunk)}
.kpi small{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2); font-weight:600}
.kpi b{display:block; font-family:var(--f-display); font-size:21px; margin-top:2px}
.dot{width:10px; height:10px; border-radius:3px; display:inline-block}
.aclaracion{font-size:12px; color:var(--ink-3); margin-top:8px}
.chart{position:relative; margin-top:14px}
.chart svg{display:block; width:100%; height:auto}
.leyenda{display:flex; gap:16px; font-size:13px; color:var(--ink-2); margin-top:10px; flex-wrap:wrap}
.leyenda span{display:inline-flex; align-items:center; gap:6px}
.tip{position:absolute; pointer-events:none; background:var(--ink); color:var(--bg); border-radius:10px; padding:8px 10px; font-size:12px; line-height:1.45; white-space:nowrap; transform:translate(-50%, -110%); opacity:0; transition:opacity .12s}
.tip.on{opacity:1}
.tabla{overflow-x:auto; margin-top:10px}
.tabla table{border-collapse:collapse; width:100%; font-size:13px}
.tabla th,.tabla td{padding:6px 8px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap}
.tabla th:first-child,.tabla td:first-child{text-align:left}
.linkbtn{background:none; border:none; color:var(--ink-2); text-decoration:underline; cursor:pointer; padding:0; font-size:13px}

/* ipc */
.ipc .grande{font-family:var(--f-display); font-size:40px; line-height:1; color:var(--ink)}
.ipc label{font-size:13px; color:var(--ink-2); display:block; margin-top:14px}
.ipc select{margin-top:4px; padding:6px 8px; border-radius:8px; border:1px solid var(--line); background:var(--surface)}
.ipc .resultado{margin-top:10px; padding:12px; border-radius:12px; background:var(--accent-soft)}

/* tope monotributo */
.tope .riel{position:relative; height:14px; border-radius:99px; background:var(--sunk); margin:14px 0 6px; overflow:hidden}
.tope .riel i{position:absolute; inset:0 auto 0 0; border-radius:99px}
.tope .marcas{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-3)}

.contacto{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between}
.contacto code{font-family:var(--f-body); font-weight:700; user-select:all}
footer{font-size:12px; color:var(--ink-3); padding-block:0 32px}

/* ingreso */
.login{position:fixed; inset:0; z-index:20; background:var(--bg); display:grid; place-items:center; padding-block:24px}
.login .card{width:min(420px, 100%); padding:28px}
.login input{width:100%; margin-top:6px; padding:12px; border-radius:10px; border:1px solid var(--line); background:var(--surface)}
.login .btn{width:100%; margin-top:14px; padding:12px}

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

/* --- agregados del portal real --- */
.oculto{display:none!important}
.aviso{padding:12px 14px; border-radius:12px; background:var(--accent-soft); font-size:13px}
.selector{padding:6px 10px; border-radius:8px; border:1px solid var(--line); background:var(--surface); max-width:100%}
.vacio{color:var(--ink-3); font-size:14px; padding:10px 0}

/* Zona para soltar archivos (mandarle archivos al estudio) */
.soltar{position:relative; display:grid; gap:4px; justify-items:center; text-align:center; margin-top:14px; padding:22px 14px;
  border:2px dashed var(--line); border-radius:var(--r); background:var(--sunk); cursor:pointer}
.soltar input{position:absolute; inset:0; width:1px; height:1px; opacity:0}
.soltar:focus-within{outline:2px solid var(--accent); outline-offset:2px}
.soltar.encima{border-color:var(--accent); background:var(--accent-soft)}
#listaEnviados{max-height:420px; overflow-y:auto; margin-top:8px}
#listaEnviados .grupo-pagos{padding-top:10px}
#listaEnviados .fila{grid-template-columns:1fr auto}
#listaEnviados .t{overflow-wrap:anywhere}

/* Historial de ventas/compras con IPC */
.tabla-scroll { overflow-x: auto; margin: 14px 0 6px; -webkit-overflow-scrolling: touch; }
table.historial { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
table.historial th { text-align: right; font-weight: 600; color: var(--ink-2); padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 12px; }
table.historial th:first-child, table.historial td:first-child { text-align: left; }
table.historial td { padding: 7px 8px; border-bottom: 1px solid var(--line); color: var(--ink); }
table.historial td small { color: var(--ink-3); }
/* Los números a la derecha, alineados con su encabezado (Facu, 23/10/2026: "no se alinean con los títulos"). */
table.historial td.num { text-align: right; white-space: nowrap; }
table.historial th { vertical-align: bottom; line-height: 1.25; }

/* Consejos del estudio */
.consejo { border-top: 1px solid var(--line); padding: 14px 0 12px; }
.consejo:first-of-type { border-top: 0; padding-top: 8px; }
.consejo-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.consejo h3 { margin: 8px 0 4px; font-size: 16px; }
.consejo p { margin: 0 0 6px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.consejo .consejo-impacto { color: var(--ink); font-weight: 600; }
.consejo .consejo-duda { background: var(--sunk); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.consejo-bot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.consejo-form textarea { width: 100%; box-sizing: border-box; margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; background: var(--surface); color: var(--ink); }
.consejo.hecho h3, .consejo.hecho p { color: var(--ink-3); }
table.historial tr.total td { font-weight: 600; background: var(--sunk); }
.anio-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; font-size: 18px; }
.anio-nav b { font-family: var(--f-display); min-width: 4ch; text-align: center; }
.anio-flecha { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--sunk); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.anio-flecha:disabled { opacity: .35; cursor: default; }
/* El atributo hidden tiene que ganarle a los display de las clases (la pantalla de ingreso es display:grid). */
[hidden]{display:none!important}

/* --- rediseño 22/10/2026: estado arriba, facturación del monotributista, más adelante plegado --- */
.estado{border-width:2px}
.estado[data-tono="ok"]{border-color:var(--good); background:var(--good-soft)}
.estado[data-tono="warn"]{border-color:var(--warn); background:var(--warn-soft)}
.estado[data-tono="crit"]{border-color:var(--crit); background:var(--crit-soft)}
.estado-cab{display:flex; gap:14px; align-items:flex-start}
.estado-ico{flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:20px; color:#fff; background:var(--ink-3)}
.estado[data-tono="ok"] .estado-ico{background:var(--good)} .estado[data-tono="warn"] .estado-ico{background:var(--warn)} .estado[data-tono="crit"] .estado-ico{background:var(--crit)}
.estado h2{font-size:clamp(22px, 5vw, 28px)}
.estado-det{margin:4px 0 0; color:var(--ink-2)}
.estado-lista{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:6px}
.estado-lista li{display:flex; justify-content:space-between; gap:12px; padding:8px 12px; border-radius:10px; background:var(--surface)}
.cuota{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:14px; padding:12px 14px; border-radius:12px; background:var(--surface)}
.cuota b{font-family:var(--f-display); font-size:22px}
.monto-grande{font-family:var(--f-display); font-size:clamp(30px, 7vw, 42px); line-height:1.1; margin:6px 0 2px}
.mas{margin-top:10px}
.mas summary{cursor:pointer; font-weight:600; color:var(--ink-2); padding:6px 2px; min-height:44px; display:flex; align-items:center}
.mesbarras{display:grid; gap:6px; margin-top:6px}
.mesbarras .mb{display:grid; grid-template-columns:120px 1fr auto; gap:10px; align-items:center; font-size:13px}
.mesbarras .mb i{display:block; height:10px; border-radius:99px; background:var(--accent)}
.mesbarras .mb span{color:var(--ink-2)}
@media (max-width:480px){ .mesbarras .mb{grid-template-columns:90px 1fr auto} }
.seguro{margin:0 0 10px; padding:8px 10px; border-radius:8px; background:var(--good-soft); color:var(--good)}
.fila-form{display:flex; gap:8px; flex-wrap:wrap}
.fila-form input{flex:1; min-width:180px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface)}
.soltar b{font-size:16px}

/* Sin la tarjeta de la clave (candado todavía no creado), la de papeles ocupa todo el ancho. */
.grid2:has(> #claveNueva[hidden]){grid-template-columns:1fr}

/* Semáforo (Facu, 22/10/2026): el color va en la píldora entera, sin el puntito ni su columna vacía. */
.pago{grid-template-columns:1fr auto}
.pago .acc{grid-column:1 / 3}
.pago .pill{padding:5px 12px; font-size:13px; color:#fff; background:var(--ink-3)}
.pago .pill.ok{background:var(--good); color:#fff}
.pago .pill.warn{background:var(--warn); color:#fff}
.pago .pill.crit{background:var(--crit); color:#fff}
.pago .pill.neu{background:var(--sunk); color:var(--ink-2)}

/* Pagos del mes, compactos (Facu, 22/10/2026): una sola tarjeta con un renglón por pago. Izquierda: concepto, detalle y
   acción; derecha: monto y píldora del estado (color entero). Nada de cajas grandes con texto chico. */
#mes .pagos{display:block; margin-top:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:4px 16px}
#mes .pago{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:14px 0; border:0; border-top:1px solid var(--line); border-radius:0; background:none}
#mes .pago:first-child,#mes .grupo-pagos + .pago{border-top:0}
.pago-izq{min-width:0; flex:1}
.pago-tit{font-weight:700; font-size:16px; color:var(--ink)}
.pago-tit span{font-weight:500; color:var(--ink-2)}
.pago-det{font-size:13px; color:var(--ink-2); margin-top:3px; line-height:1.4}
.pago-der{display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none; text-align:right}
.pago-der .imp{font-weight:700; font-size:17px; font-family:var(--f-display)}
.pago-der .imp small{font-family:var(--f-body); font-weight:500; font-size:13px; color:var(--ink-3)}
.pago .pill{white-space:nowrap}
button.link{background:none; border:0; padding:6px 0; min-height:36px; margin-top:2px; color:var(--accent); font-weight:600; font-size:14px; cursor:pointer; text-decoration:underline; text-underline-offset:3px}   /* área de toque de 36 px (consulta 16) */
#mes .grupo-pagos{padding-top:12px}
@media (max-width:520px){ #mes .pago{gap:10px} .pago-tit{font-size:15px} .pago-der .imp{font-size:15px} }

/* Tildes y pedido de VEP (22/10/2026) */
.pago .pill.ok-claro{background:var(--good-soft); color:var(--good)}
.pedido{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin-top:14px; padding:12px 14px; border-radius:12px; background:var(--surface)}
.pedido span{font-weight:600}

/* Aviso de máximo del monotributo (Facu, 22/10/2026): late en rojo si lo pasó, en ámbar si está cerca. */
@keyframes latido{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--crit) 55%, transparent)}50%{box-shadow:0 0 0 12px color-mix(in srgb, var(--crit) 0%, transparent)}}
@keyframes latido-ambar{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--warn) 55%, transparent)}50%{box-shadow:0 0 0 12px color-mix(in srgb, var(--warn) 0%, transparent)}}
.alerta-tope{display:grid; gap:2px; margin:0 0 14px; padding:12px 14px; border-radius:12px; border:2px solid var(--crit); background:var(--crit-soft); color:var(--crit); text-decoration:none; animation:latido 1.4s ease-in-out infinite}
.alerta-tope b{font-size:16px} .alerta-tope span{color:var(--ink); font-size:14px}
.alerta-tope.cerca{border-color:var(--warn); background:var(--warn-soft); color:var(--warn); animation-name:latido-ambar}
#facturacion.late{border:2px solid var(--crit); animation:latido 1.4s ease-in-out infinite}
#facturacion.late-cerca{border:2px solid var(--warn); animation:latido-ambar 1.4s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){ .alerta-tope,#facturacion.late,#facturacion.late-cerca{animation:none} }

/* VEP generados sin pagar (22/10/2026) */
.vep-pend{margin-top:14px; padding:12px 14px; border-radius:12px; background:var(--surface); border:2px solid var(--accent)}
.vep-cab{display:flex; justify-content:space-between; gap:12px; font-size:16px}
.vep-pend .btn{display:inline-block; margin-top:8px; text-decoration:none}

/* Declaraciones juradas (23/10/2026) */
#ddjjCuerpo .fila{grid-template-columns:1fr auto}
.ddjj-bot{display:flex; gap:8px}
/* Declaraciones juradas en columnas por impuesto (25/10/2026): IVA | Ingresos Brutos; en el celular, una debajo de la otra. */
.ddjj-cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; margin-top:10px}
.ddjj-col-cab{display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:46px; padding-bottom:6px; border-bottom:2px solid var(--line)}
.ddjj-col-cab b{font-size:15px}
@media (max-width:480px){ #ddjjCuerpo .fila{grid-template-columns:1fr} .ddjj-bot .btn{flex:1} }
.doc-sub{font-size:15px; margin:18px 0 4px}
.doc-sub:first-child{margin-top:4px}
.faltan{background:var(--sunk); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin:4px 0 8px}
.falta-fila{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line)}
.faltan b + .falta-fila{border-top:none}
.falta-fila label.btn{white-space:nowrap}
#ddjjCuerpo .fila.falta .t{color:var(--ink-2)}
/* Tu cuenta con el estudio (23/10/2026) */
.cuenta-saldo{display:flex; justify-content:space-between; align-items:baseline; background:var(--sunk); border-radius:12px; padding:12px 14px; margin:4px 0}
.cuenta-saldo b{font-size:22px}
.cuenta-ok{color:var(--good); font-weight:600}
.cuenta-pague{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:12px}
.formas{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin:6px 0 10px}
.forma{border:1px solid var(--line); border-radius:12px; padding:10px 12px; display:grid; gap:6px; align-content:start}
.forma .dato{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; font-size:14px}
.forma .dato span{color:var(--ink-2); min-width:62px}
.forma .btn, .btn.wa{display:inline-flex; align-items:center; text-decoration:none; color:inherit; justify-content:center}
.btn.wa{margin-top:4px}
.cuenta-hist{margin-top:12px}
.cuenta-hist summary{cursor:pointer; font-weight:600}#cuentaCuerpo .fila{grid-template-columns:1fr auto auto}
.cuenta-saldo.informado{background:var(--warn-soft); margin-top:14px}
.ya-pague{display:grid; gap:8px; justify-items:start; border:1px solid var(--line); border-radius:12px; padding:12px 14px; width:100%}
/* Gráficos de Tu negocio (23/10/2026) */
.graf-fila{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:12px; margin:12px 0}
.graf-fila > div:empty{display:none}
.graf-caja{border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--surface)}
.graf-cab{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:14px}
.graf-ley{display:flex; gap:12px; font-size:12px; color:var(--ink-2)}
.graf-ley i, .graf-tip i{display:inline-block; width:14px; vertical-align:middle; margin-right:5px}
.graf-svg{position:relative}
.graf{max-width:100%; height:auto; display:block; overflow:visible; touch-action:pan-y}
.graf-grid{stroke:var(--line); stroke-width:1}
.graf-grid.cero{stroke:var(--ink-3)}
.graf-eje{fill:var(--ink-3); font-size:11px}
.graf-cruz{stroke:var(--ink-3); stroke-width:1}
.graf-tip{position:absolute; top:0; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:6px 10px; font-size:12px; box-shadow:0 4px 14px rgba(0,0,0,.12); pointer-events:none; white-space:nowrap}
.graf-tip div{display:flex; align-items:center; gap:6px}
.graf-tip b{color:var(--ink)} .graf-tip span{color:var(--ink-2)}
.graf-tip-mes{font-weight:600; color:var(--ink-2); margin-bottom:2px}/* Celular: el encabezado del estudio (con selector de clientes) baja a dos líneas en vez de salirse (23/10/2026) */
@media (max-width:520px){ header.top > .wrap{flex-wrap:wrap} .quien{width:100%; margin-left:0} .quien .selector{flex:1; min-width:0} .quien:has(.selector:not(.oculto)) #nombreCliente{display:none} }
.demo-aviso{background:var(--accent-soft); border:1px solid var(--accent); border-radius:12px; padding:10px 14px; margin:12px 0; font-size:14px}
/* Facturar (monotributistas): formulario, renglones y lista de comprobantes. */
/* Todo con minmax(0,…) y width:100%: en el celular los campos de fecha y número tienen ancho propio y, si no, empujan la
   página hacia el costado (Facu, 02/11/2026: "hace scroll lateral"). */
#facturar{min-width:0; overflow-x:hidden}
.fac-form{display:grid; gap:12px; min-width:0}
.fac-form .fila{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; min-width:0}
.fac-form .fac-fechas{grid-template-columns:repeat(3, minmax(0,1fr))}
.fac-form label{display:grid; gap:4px; font-size:13px; font-weight:600; min-width:0}
.fac-form input, .fac-form select{font:inherit; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); min-width:0; width:100%; box-sizing:border-box}
.fac-items{display:grid; gap:8px; min-width:0}
.fac-item{display:grid; grid-template-columns:minmax(0,1fr) 72px 110px 28px; gap:8px; align-items:center; min-width:0}
.fac-item input{font:inherit; padding:9px 8px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); min-width:0; width:100%; box-sizing:border-box}
.fac-item .quitar{background:none; border:0; color:var(--ink-3); font-size:20px; cursor:pointer}
.fac-total{display:flex; justify-content:space-between; align-items:baseline; padding:10px 2px; border-top:1px solid var(--line); font-weight:700}
.fac-total b{font-size:22px}
.fac-acciones{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.fac-resumen{background:var(--sunk); border-radius:12px; padding:12px 14px; font-size:14px}
.fac-resumen dl{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:8px 0 0}
.fac-resumen dt{color:var(--ink-2)} .fac-resumen dd{margin:0}
.fac-lista .fila{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; padding:10px 0; border-top:1px solid var(--line); align-items:center; min-width:0}
.fac-lista .fila > div{min-width:0; overflow-wrap:anywhere}
.fac-lista .fila:first-child{border-top:0}
.fac-resumen{min-width:0; overflow-wrap:anywhere}
.fac-lista .num.neg{color:var(--crit)}
.fac-lista .ddjj-bot{display:flex; gap:6px; flex-wrap:wrap}
.fac-ok{background:var(--good-soft); color:var(--good); border-radius:12px; padding:12px 14px}
.fac-err{background:var(--crit-soft); color:var(--crit); border-radius:12px; padding:12px 14px}
@media (max-width:560px){ .fac-form .fila, .fac-form .fac-fechas{grid-template-columns:minmax(0,1fr)} .fac-item{grid-template-columns:minmax(0,1fr) 64px 96px 24px; gap:6px} }
/* App instalable: aviso para instalar (desaparece al cerrarlo o al instalar) y aviso de versión nueva. */
.pwa-aviso{display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:var(--accent-soft); border-radius:12px; padding:10px 14px; margin:12px 0; font-size:14px}
.pwa-aviso .cerrar{margin-left:auto; background:none; border:0; cursor:pointer; color:var(--ink-2); font-size:20px; line-height:1; padding:0 4px}
.toast{position:fixed; left:50%; bottom:18px; transform:translateX(-50%); display:flex; gap:12px; align-items:center; max-width:calc(100% - 24px); background:var(--brand); color:var(--brand-ink); padding:12px 16px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.28); font-size:14px; z-index:50}
.toast .btn{background:var(--brand-ink); color:var(--brand); border:0; white-space:nowrap}
.demo-aviso a{color:var(--brand); font-weight:600}

/* Pestañas (23/10/2026): el salto deja el título de la sección debajo del encabezado fijo. */
main section[id]{scroll-margin-top:var(--alto-cab, 116px)}
nav.tabs a[hidden]{display:none}

/* Análisis 23/10: consejos en tonos neutros y plegados (#33); "Ya lo pagué" como botón de 44 px (#32). */
.pill.neu{background:var(--sunk); color:var(--ink-2)}
.pill.neu.fuerte{background:var(--ink-2); color:var(--bg)}
.consejo-mas summary{cursor:pointer; color:var(--accent); font-weight:600; font-size:14px; margin:2px 0 6px}
.btn.ya-pague{min-height:44px}