/* contasuma - estilos propios de funcionalidades
   Generado en FASE 1 desde el CSS embebido. No editar a mano sin
   revisar las 17 paginas: este archivo es compartido. */

h1,h2,h3,h4{font-family:'Sora',sans-serif;line-height:1.15;letter-spacing:-.01em}
.mono{font-family:'IBM Plex Mono',monospace}
.sec-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono';font-size:.78rem;font-weight:500;color:var(--emerald-dark);background:var(--emerald-soft);border:1px solid #BBEBD5;padding:6px 14px;border-radius:999px;margin-bottom:16px}
.btn-sm{padding:8px 16px;font-size:.88rem;border-radius:8px}
/* ── Nav ── */
nav.top{position:sticky;top:0;z-index:50;background:rgba(250,251,248,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-cta .btn{padding:9px 18px;font-size:.93rem}
/* ── Hero ── */
.hero{padding:72px 0 40px;position:relative;overflow:hidden;text-align:center}
.hero-inner{position:relative;max-width:740px;margin:0 auto}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.1rem);font-weight:700;letter-spacing:-.02em;margin-bottom:16px}
.hero p{font-size:1.12rem;color:var(--ink-soft);max-width:600px;margin:0 auto}
/* ── Índice de módulos (sticky) ── */
.mod-index{position:sticky;top:64px;z-index:40;background:rgba(250,251,248,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:14px 0}
.mod-index-inner{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;align-items:center}
.mod-index-inner::-webkit-scrollbar{display:none}
.idx-label{font-family:'IBM Plex Mono';font-size:.72rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;margin-right:6px}
.idx-chip{padding:7px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-weight:500;font-size:.85rem;white-space:nowrap;transition:all .15s;color:var(--ink)}
.idx-chip:hover{border-color:var(--ink)}
.idx-chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
/* ── Secciones de módulo ── */
/* Se probo content-visibility:auto en .mod para bajar el coste de estilo y
   layout (perf 88 -> 95). Descartado: con los altos estimados, los enlaces
   de "SALTA A" y los #anclaje aterrizaban en el modulo equivocado. Primero
   que la navegacion funcione. */
.mod{padding:80px 0;scroll-margin-top:130px}
.mod:nth-child(even){background:#EDF5F0}
.mod-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.mod-grid.flip{grid-template-columns:1.1fr 1fr}
.mod-grid.flip .mod-copy{order:2}
.mod-num{font-family:'IBM Plex Mono';font-size:.8rem;color:var(--emerald-dark);margin-bottom:8px;display:block}
.mod h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:12px}
.mod-copy>p{color:var(--ink-soft);margin-bottom:22px;font-size:1.02rem}
.mod-list{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:.95rem;margin-bottom:26px}
.mod-list li{display:flex;gap:10px;align-items:flex-start}
.mod-list svg{flex-shrink:0;margin-top:4px;color:var(--emerald)}
.demo-hint{font-family:'IBM Plex Mono';font-size:.75rem;color:var(--emerald-dark);display:inline-flex;align-items:center;gap:6px;background:var(--emerald-soft);border:1px solid #BBEBD5;padding:5px 12px;border-radius:999px}
/* ── Demo cards ── */
.demo{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 46px rgba(14,27,44,.10);overflow:hidden}
.demo-bar{display:flex;align-items:center;gap:6px;padding:11px 16px;border-bottom:1px solid var(--line);background:#EDF5F0}
.demo-dot{width:9px;height:9px;border-radius:50%}
.demo-url{margin-left:10px;font-family:'IBM Plex Mono';font-size:.7rem;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);padding:2px 10px;border-radius:6px}
.demo-body{padding:20px}
.demo-title{font-size:.92rem;font-family:'Sora';margin-bottom:14px;display:flex;justify-content:space-between;align-items:baseline}
.demo-title small{font-family:'IBM Plex Mono';font-size:.68rem;color:var(--ink-soft);font-weight:400}
/* POS demo */
.pos-products{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.pos-p{border:1.5px solid var(--line);border-radius:10px;padding:10px;cursor:pointer;text-align:center;background:var(--card);transition:all .12s;font-family:'Inter'}
.pos-p:hover{border-color:var(--emerald);transform:translateY(-1px)}
.pos-p:focus-visible{outline:3px solid var(--emerald);outline-offset:2px}
.pos-p .e{font-size:1.3rem;display:block}
.pos-p .n{font-size:.72rem;font-weight:600;display:block;margin:3px 0 1px}
.pos-p .pr{font-family:'IBM Plex Mono';font-size:.68rem;color:var(--ink-soft)}
.pos-ticket{border-top:1.5px dashed var(--line);padding-top:10px;font-family:'IBM Plex Mono';font-size:.75rem;min-height:88px}
.pos-row{display:flex;justify-content:space-between;padding:3px 0;color:var(--ink-soft)}
.pos-row button{background:none;border:none;color:var(--peligro);cursor:pointer;font-family:inherit;font-size:.72rem;margin-right:8px}
.pos-empty{color:var(--ink-soft);text-align:center;padding:18px 0;font-size:.75rem}
.pos-total{display:flex;justify-content:space-between;border-top:2px solid var(--amber);margin-top:8px;padding-top:8px;font-weight:600}
.pos-total .bs{color:var(--ink-soft);font-weight:400;font-size:.7rem}
.pos-actions{margin-top:12px;display:flex;gap:8px}
.pos-msg{font-family:'IBM Plex Mono';font-size:.72rem;color:var(--emerald-dark);margin-top:10px;min-height:1.1em}
/* Inventario demo */
.inv-table{width:100%;border-collapse:collapse;font-size:.8rem}
.inv-table th{text-align:left;font-family:'IBM Plex Mono';font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);padding:6px 8px;border-bottom:1.5px solid var(--line)}
.inv-table td{padding:8px;border-bottom:1px solid var(--line)}
.inv-table td.num{font-family:'IBM Plex Mono'}
.stock-pill{font-family:'IBM Plex Mono';font-size:.66rem;padding:2px 9px;border-radius:999px;font-weight:600}
.pill-ok{background:var(--emerald-soft);color:var(--emerald-dark)}
.pill-low{background:#FFF3D6;color:var(--alerta)}   /* #B8860B daba 2.95:1 */
.pill-out{background:#FDE8E6;color:var(--peligro)}  /* var(--red) daba 3.13:1 */
.inv-controls{display:flex;gap:8px;margin-top:12px;align-items:center}
.inv-controls select{padding:7px 12px;border:1.5px solid var(--line);border-radius:8px;font-family:'Inter';font-size:.82rem;background:var(--card)}
.inv-alert{margin-top:10px;font-family:'IBM Plex Mono';font-size:.7rem;color:var(--alerta);background:#FFF8E6;border:1px solid #F5E0A3;border-radius:8px;padding:8px 12px;display:none}
.inv-alert.show{display:block}
/* Multimoneda demo */
.fx-box{display:flex;flex-direction:column;gap:12px}
.fx-rate{font-family:'IBM Plex Mono';font-size:.72rem;color:var(--ink-soft);text-align:center;background:var(--paper);border:1px dashed var(--line);border-radius:8px;padding:8px}
.fx-rate strong{color:var(--emerald-dark)}
.fx-field{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.fx-field:focus-within{border-color:var(--emerald);box-shadow:0 0 0 3px rgba(14,154,100,.12)}
.fx-cur{font-family:'IBM Plex Mono';font-weight:600;font-size:.85rem;padding:12px 16px;background:var(--paper);border-right:1.5px solid var(--line);min-width:64px;text-align:center}
.fx-field input{flex:1;border:none;padding:12px 16px;font-family:'IBM Plex Mono';font-size:1rem;background:var(--card);outline:none;color:var(--ink);min-width:0}
.fx-arrow{text-align:center;color:var(--ink-soft);font-size:1.1rem}
.fx-note{font-size:.78rem;color:var(--ink-soft);text-align:center}
/* CxC demo */
.cxc-list{display:flex;flex-direction:column;gap:8px}
.cxc-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:.82rem;transition:opacity .3s}
.cxc-row.paid{opacity:.45}
.cxc-row.paid .cxc-name{text-decoration:line-through}
.cxc-name strong{display:block;font-size:.85rem}
.cxc-name small{font-family:'IBM Plex Mono';font-size:.66rem;color:var(--ink-soft)}
.cxc-amt{font-family:'IBM Plex Mono';font-weight:600;font-size:.85rem}
.cxc-days{font-family:'IBM Plex Mono';font-size:.64rem;padding:2px 8px;border-radius:999px}
.d-ok{background:var(--emerald-soft);color:var(--emerald-dark)}
.d-warn{background:#FFF3D6;color:var(--alerta)}
.d-late{background:#FDE8E6;color:var(--peligro)}
.cxc-btn{font-size:.7rem;padding:5px 12px;border-radius:7px;border:1.5px solid var(--line);background:var(--card);cursor:pointer;font-family:'Inter';font-weight:600;color:var(--ink)}
.cxc-btn:hover{border-color:var(--emerald);color:var(--emerald-dark)}
.cxc-summary{margin-top:12px;display:flex;justify-content:space-between;font-family:'IBM Plex Mono';font-size:.78rem;border-top:2px solid var(--amber);padding-top:10px}
.cxc-summary strong{color:var(--emerald-dark)}
/* Reportes demo */
.rep-tabs{display:flex;gap:6px;margin-bottom:14px}
.rep-tab{font-size:.74rem;padding:6px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);cursor:pointer;font-family:'Inter';font-weight:500;color:var(--ink)}
.rep-tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.rep-chart{display:flex;align-items:flex-end;gap:7px;height:110px;margin-bottom:6px}
/* Sin height:100% la barra colapsa a 0 dentro del flex align-items:flex-end
   y el <span> con height:var(--h) resuelve a 0: el grafico no se veia. */
.rep-bar{flex:1;height:100%;background:var(--emerald-soft);border-radius:5px 5px 0 0;position:relative}
.rep-bar span{position:absolute;inset:auto 0 0 0;height:var(--h);background:var(--emerald);border-radius:5px 5px 0 0;transition:height .5s ease}
.rep-bar.hi span{background:var(--amber)}
.rep-labels{display:flex;gap:7px;font-family:'IBM Plex Mono';font-size:.62rem;color:var(--ink-soft)}
.rep-labels i{flex:1;text-align:center;font-style:normal}
.rep-total{margin-top:12px;font-family:'IBM Plex Mono';font-size:.78rem;display:flex;justify-content:space-between;border-top:1.5px dashed var(--line);padding-top:10px}
.rep-total strong{color:var(--emerald-dark)}
/* Gastos demo */
.gasto-cats{display:flex;flex-direction:column;gap:10px}
.gasto-row{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center;font-size:.8rem}
.gasto-row .g-name{font-weight:600;font-size:.78rem}
.g-track{height:12px;background:var(--paper);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.g-fill{height:100%;border-radius:999px;transition:width .6s ease}
.gasto-row .g-amt{font-family:'IBM Plex Mono';font-size:.74rem;color:var(--ink-soft)}
/* Clientes demo */
.cli-card{border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;gap:14px;align-items:flex-start;margin-bottom:10px}
.cli-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:'IBM Plex Mono';font-weight:600;font-size:.8rem;color:#fff;flex-shrink:0}
.cli-card strong{display:block;font-size:.9rem}
.cli-card small{font-size:.74rem;color:var(--ink-soft);display:block}
.cli-stats{display:flex;gap:14px;margin-top:6px;font-family:'IBM Plex Mono';font-size:.68rem;color:var(--ink-soft)}
.cli-stats b{color:var(--emerald-dark)}
.cli-tag{margin-left:auto;font-family:'IBM Plex Mono';font-size:.62rem;padding:3px 10px;border-radius:999px;background:var(--emerald-soft);color:var(--emerald-dark);white-space:nowrap}
.cli-tag.risk{background:#FDE8E6;color:var(--peligro)}
/* ── CTA final ── */
.cta-final{text-align:center;padding:96px 0;background:var(--ink);color:#fff}
.cta-final h2{font-size:clamp(1.9rem,4vw,2.6rem);margin-bottom:14px}
.cta-final p{color:#9FB0C6;font-size:1.1rem;max-width:520px;margin:0 auto 32px}
@media(max-width:960px){
  .mod-grid,.mod-grid.flip{grid-template-columns:1fr}
  .mod-grid.flip .mod-copy{order:0}
}
@media(max-width:560px){
  .pos-products{grid-template-columns:repeat(2,1fr)}
  .nav-cta .btn-ghost{display:none}
}

/* El original de esta pagina evita que el resaltado del hero se parta.
   Las paginas de rubro NO lo llevan: alli romperia la rejilla del hero. */
.hero h1 em{white-space:nowrap}

/* Selector de metodos de pago. Tenia el grid en linea, que gana a cualquier
   media query: a 360px quedaban tres columnas de ~100px con rotulos como
   "Transferencia" dentro. */
.pay-methods{grid-template-columns:repeat(3,1fr)}
@media(max-width:600px){
  .pay-methods{grid-template-columns:repeat(2,1fr)}
}