/* 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{
  --bg:#FBF7F3; --surface:#FFFFFF; --sunk:#F4EDE6; --ink:#2A1D17; --ink-2:#6B5A50; --ink-3:#9A887D; --line:#EADFD6;
  --brand:#4A2C21; --brand-ink:#FFF8F2; --accent:#C98A2E; --accent-soft:#F6E7CF;
  --ventas:#A4532B; --compras:#008C7E;
  --good:#2E7D4F; --good-soft:#E3F1E8; --warn:#A8701A; --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:#8E7B6F; --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:#8E7B6F; --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))} }
.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}

/* 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); }
/* El atributo hidden tiene que ganarle a los display de las clases (la pantalla de ingreso es display:grid). */
[hidden]{display:none!important}