/* ===== FacturaTuCompra · tema moderno SaaS (v84) ===== */
:root {
  --azul:#1f4e79; --azul-700:#173d5e; --azul-050:#eef4fb;
  --fondo:#f6f8fb; --panel:#ffffff; --borde:#e6eaf1;
  --texto:#1b2433; --muted:#6b7688;
  --verde:#16a34a; --verde-050:#e9f8ef; --ambar:#b45309; --rojo:#dc2626;
  --radio:14px; --radio-sm:9px; --radio-pill:99px;
  --sombra:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.08);
  --sombra-md:0 6px 20px rgba(16,24,40,.10);
  --sombra-lg:0 14px 42px rgba(16,24,40,.18);
  --focus:0 0 0 3px rgba(31,78,121,.18);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; color:var(--texto); background:var(--fondo);
  font-family:-apple-system,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
main { max-width:1600px; width:94%; margin:1.6rem auto; padding:0 .4rem; }
main.narrow { max-width:640px; width:auto; }
h1,h2,h3 { color:var(--azul); line-height:1.2; letter-spacing:-.01em; }
h2 { font-size:1.5rem; } h3 { font-size:1.15rem; }
a { color:var(--azul); text-decoration:none; }
a:hover { text-decoration:underline; }
hr { border:none; border-top:1px solid var(--borde); margin:1rem 0; }
footer { text-align:center; color:#9aa4b2; font-size:.8rem; padding:2.2rem 0; }

/* ---- hero (landing) ---- */
.hero { background:linear-gradient(120deg,#1f4e79,#3b7bb8); color:#fff; padding:3rem 1rem; text-align:center; }
.hero h1 { color:#fff; margin:0 0 .4rem; }

/* ---- grids y tarjetas ---- */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.1rem; }
.card { background:var(--panel); border:1px solid var(--borde); border-radius:var(--radio);
  overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--sombra); }
.card.pad { padding:1.3rem 1.5rem; }
.card.negocio:hover { transform:translateY(-2px); box-shadow:var(--sombra-md); transition:.16s ease; }
.card-body { padding:.85rem 1.1rem; display:flex; flex-direction:column; gap:.2rem; }
.card-body code { color:#667; font-size:.8rem; }
.mini-banner svg, .banner svg, .preview-banner svg { display:block; width:100%; height:auto; }
.banner { max-width:1600px; margin:0 auto; position:relative; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); }
.preview-banner { margin:.6rem 0; border-radius:var(--radio-sm); overflow:hidden; }

/* ---- formularios ---- */
label { display:block; margin:.75rem 0 0; font-weight:600; font-size:.86rem; color:#3a4557; }
input,select,textarea { width:100%; padding:.6rem .75rem; margin-top:.3rem;
  border:1px solid var(--borde); border-radius:var(--radio-sm); font-size:1rem; background:#fff;
  color:var(--texto); font-family:inherit; transition:border-color .15s, box-shadow .15s; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--azul); box-shadow:var(--focus); }
input::placeholder,textarea::placeholder { color:#aab2c0; }

/* ---- botones ---- */
.btn { display:inline-block; border:1px solid var(--borde); background:#fff; padding:.58rem 1.05rem;
  border-radius:var(--radio-sm); font-size:.94rem; font-weight:600; cursor:pointer; text-decoration:none;
  color:#33415a; margin:.2rem .2rem .2rem 0; transition:transform .12s ease, box-shadow .15s, background .15s, border-color .15s; }
.btn:hover { text-decoration:none; box-shadow:var(--sombra); transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn.primary { background:var(--azul); border-color:var(--azul); color:#fff; }
.btn.primary:hover { background:var(--azul-700); border-color:var(--azul-700); }
.btn.big { width:100%; padding:.85rem; font-size:1.05rem; margin-top:.6rem; }
.btn.google { width:100%; display:flex; align-items:center; justify-content:center; gap:.6rem; font-weight:600; padding:.72rem; }
.btn.small-btn { padding:.35rem .7rem; font-size:.84rem; }
.btn-sec { display:inline-block; border:1px solid var(--borde); background:#fff; padding:.5rem .95rem;
  border-radius:var(--radio-sm); font-size:.9rem; font-weight:600; color:#33415a; text-decoration:none;
  margin:.2rem .2rem .2rem 0; transition:box-shadow .15s, transform .12s; }
.btn-sec:hover { text-decoration:none; box-shadow:var(--sombra); transform:translateY(-1px); }

.demo-fields { background:#f8fafc; border:1px dashed var(--borde); border-radius:var(--radio-sm); padding:.4rem .9rem .8rem; margin-top:.8rem; }

/* ---- alertas ---- */
.alert { background:#fff8e6; border:1px solid #f2e0a6; padding:.8rem 1.05rem;
  border-radius:var(--radio-sm); margin:.85rem 0; }
.alert.error { background:#fdecec; border-color:#f4b8b8; }
.alert.pac-ok { background:var(--verde-050); border-color:#b3e0c4; }
.muted { color:var(--muted); } .small { font-size:.8rem; }

/* ---- pills / etiquetas ---- */
.pill { display:inline-block; background:#eef2f7; border-radius:var(--radio-pill); padding:.24rem .8rem; font-size:.82rem; font-weight:600; color:#4a5568; }
.pill.warn { background:#fdecd8; color:#9a4b00; }
.pill.ok-pill { background:#d9f2e3; color:#15803d; }

/* ---- tablas ---- */
.tabla { width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--borde);
  border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); margin:.7rem 0 1.3rem; }
.tabla th { background:#f1f5fa; color:#3a4a5f; text-align:left; padding:.65rem .85rem; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.03em; font-weight:700; border-bottom:1px solid var(--borde); }
.tabla td { padding:.62rem .85rem; border-top:1px solid #eef1f6; font-size:.92rem; vertical-align:top; }
.tabla tr:nth-child(even) td { background:#fbfcfe; }
.tabla tbody tr:hover td, .tabla tr:hover td { background:var(--azul-050); }
.tabla td.ok { color:#15803d; font-weight:600; }
code { background:#f1f4f8; border:1px solid #e3e8f0; border-radius:6px; padding:.05rem .38rem; font-size:.85em; color:#3d4a5c; }

.row-between { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.cols { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.inline { display:flex; gap:.3rem; align-items:center; }
.text-right { text-align:right; }
@media (max-width:760px){ .cols { grid-template-columns:1fr; } body { font-size:15px; } }
@media print { .no-print, footer { display:none; } body { background:#fff; } .card { border:none; box-shadow:none; } }

/* ---- ticket / QR ---- */
.ticket-box { background:var(--verde-050); border:1px solid #bfe3bf; border-radius:var(--radio); padding:.9rem 1.1rem; margin:.6rem 0; }
.ticket-monto { font-size:2rem; font-weight:800; color:#15803d; }
.qr-result { text-align:center; }
.qr-big { max-width:260px; margin:.6rem auto; }
.qr-big svg { width:100%; height:auto; }

.logo-negocio { position:absolute; right:2.5%; top:50%; transform:translateY(-50%);
  height:72%; aspect-ratio:1/1; width:auto; background:#fff; border-radius:50%;
  border:3px solid #fff; box-shadow:0 2px 12px rgba(0,0,0,.3); object-fit:cover; }

/* ---- punto de venta ---- */
.pos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:.6rem; margin-bottom:.9rem; }
.pos-btn { background:#fff; border:2px solid var(--azul); color:var(--azul); border-radius:var(--radio-sm);
  padding:.65rem .45rem; cursor:pointer; font-size:.9rem; line-height:1.3; transition:.14s ease; box-shadow:var(--sombra); }
.pos-btn:hover { background:var(--azul); color:#fff; transform:translateY(-2px); box-shadow:var(--sombra-md); }
.pos-btn strong { font-size:1.05rem; }
.pos-otro { border-style:dashed; }
.pos-btn.bajo { border-color:#e67e22; background:#fff6ec; color:#b35a00; }
.pos-btn.bajo .stock-mini { color:#b35a00; font-weight:700; }
.pos-btn.agotado { opacity:.45; }
.stock-mini { font-size:.72rem; color:#5b8; }
details summary { cursor:pointer; }

/* ---- pestañas de caja ---- */
.tabs { display:flex; gap:.2rem; margin:1rem 0 .3rem; border-bottom:1px solid var(--borde); flex-wrap:wrap; }
.tab-btn { background:none; border:none; padding:.6rem 1rem; font-size:.98rem; font-weight:600; cursor:pointer;
  color:#6b7688; border-bottom:3px solid transparent; margin-bottom:-1px; border-radius:8px 8px 0 0; transition:.14s; }
.tab-btn:hover { color:var(--azul); background:var(--azul-050); }
.tab-btn.activa { color:var(--azul); font-weight:700; border-bottom-color:var(--azul); }
.tab-panel { display:none; padding-bottom:5.5rem; }
.scan-input { font-size:1.15rem; padding:.85rem 1.05rem; border:2px solid var(--azul); border-radius:var(--radio-sm); }
@media print { .tabs, .barra-total { display:none !important; } .tab-panel { display:block !important; } }

/* ---- barra total fija ---- */
.barra-total { position:fixed; bottom:0; left:0; right:0; background:var(--azul); color:#fff;
  display:none; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.75rem 1.3rem; box-shadow:0 -4px 18px rgba(0,0,0,.25); z-index:50; }
.barra-total span { font-size:1.4rem; }
.barra-total strong { font-size:1.7rem; }
.cobrar-btn { background:#22c55e; border:none; color:#fff; font-size:1.15rem; font-weight:800;
  padding:.7rem 1.5rem; border-radius:var(--radio-sm); cursor:pointer; transition:.14s; box-shadow:0 4px 14px rgba(34,197,94,.4); }
.cobrar-btn:hover { background:#16a34a; }
.cobrar-btn:disabled { background:#7f8c9a; opacity:.7; box-shadow:none; }
.atajos { font-size:.8rem; opacity:.8; align-self:center; }
.total-y-cobro { display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; margin-left:auto; }
.total-grande { font-size:1.15rem; }
.total-grande strong { font-size:1.9rem; }
.qr-result.destaca { border:2px solid #22c55e; }

/* ---- modal de cobro ---- */
.modal { position:fixed; inset:0; background:rgba(12,20,34,.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:100; }
.modal-caja { background:#fff; border-radius:var(--radio); padding:1.4rem 1.7rem; width:min(430px,92vw); box-shadow:var(--sombra-lg); }
.total-modal { font-size:1.2rem; } .total-modal strong { font-size:1.8rem; color:var(--azul); }
.billetes { display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0; }
.billete { flex:1; min-width:70px; font-weight:700; }
.cambio-linea { font-size:1.2rem; } .cambio-linea strong { font-size:1.8rem; }
#pago-con { font-size:1.4rem; text-align:right; }

/* ---- estadísticas de caja ---- */
.stats-caja { display:flex; gap:.7rem; align-items:stretch; flex-wrap:wrap; margin:.7rem 0; }
.stat { background:#fff; border:1px solid var(--borde); border-radius:var(--radio-sm); padding:.55rem 1.1rem;
  display:flex; flex-direction:column; box-shadow:var(--sombra); min-width:120px; }
.stat span { font-size:.74rem; color:var(--muted); }
.stat strong { font-size:1.25rem; }
.stat.destacado { background:var(--azul); border-color:var(--azul); }
.stat.destacado span { color:#cfe0f0; } .stat.destacado strong { color:#fff; }
.stats-caja form { align-self:center; margin-left:auto; }
.correo-venta { display:flex; gap:.4rem; justify-content:center; margin-top:.6rem; flex-wrap:wrap; }
.correo-venta input { max-width:260px; }

.ticket-scan { background:var(--azul-050); border:1px dashed #9dbfe0; border-radius:var(--radio-sm); padding:.75rem 1.05rem; margin:.5rem 0 .85rem; text-align:center; }
.ticket-scan input { text-align:center; }

/* ---- landing ---- */
.fn { text-align:center; }
.fn-icono { font-size:2rem; }
.card.pad.fn:hover { transform:translateY(-3px); box-shadow:var(--sombra-md); transition:.16s ease; }
.pasos-landing { margin:1rem auto 0; max-width:1000px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
details.card { margin-bottom:.6rem; }
details.card summary { padding:.4rem .2rem; font-weight:600; }
.hero-dos { display:grid; grid-template-columns:1.1fr .9fr; gap:1.5rem; align-items:center;
  text-align:left; max-width:1100px; margin:auto; padding:2.5rem 1.5rem; }
.hero-dos h1 { font-size:2.3rem; line-height:1.14; }
.hero-imagen svg { width:100%; height:auto; max-width:480px; }
@media (max-width:760px){ .hero-dos { grid-template-columns:1fr; text-align:center; }
  .hero-imagen { order:-1; } .hero-imagen svg { max-width:320px; } }
.hero { background:linear-gradient(120deg,#1f4e79,#3b7bb8); }
.pill-hero { display:inline-block; background:#ffffff22; border:1px solid #ffffff44; color:#fff;
  border-radius:var(--radio-pill); padding:.35rem 1rem; font-size:.85rem; font-weight:700; margin-bottom:.6rem; }
.cta-principal { background:#22c55e !important; border-color:#22c55e !important; color:#fff !important;
  font-weight:800; font-size:1.25rem; padding:1rem 2.2rem; border-radius:var(--radio); text-align:center;
  box-shadow:0 6px 24px rgba(34,197,94,.45); line-height:1.3; }
.cta-principal:hover { transform:translateY(-2px); transition:.15s; }
.cta-sub { font-size:.8rem; font-weight:500; opacity:.92; }
.cta-secundaria { background:transparent !important; color:#fff !important; border-color:#ffffff66 !important; font-size:.95rem; }
.check { margin:.4rem 0; }

kbd.tab-key { display:inline-block; font-family:inherit; font-size:.68rem; font-weight:700; color:#8a94a3;
  background:#f1f4f8; border:1px solid #dbe2ec; border-radius:5px; padding:.02rem .32rem; margin-left:.15rem; vertical-align:1px; }
.tab-btn.activa kbd.tab-key { color:var(--azul); background:var(--azul-050); border-color:#b8d0e8; }
@media (max-width:760px){ kbd.tab-key { display:none; } }