:root{
  --bg:#f5f6f8; --panel:#ffffff; --ink:#111827; --muted:#6b7280;
  --teal:#0f766e; --teal-d:#115e59; --line:#e9ebef;
  --on-teal:#ffffff;   /* texto SOBRE el acento; en oscuro (acento claro) se invierte */
  --ok:#16a34a; --warn:#d97706; --bad:#dc2626;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 10px 30px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
/* Inter servida desde el propio servidor (entra en el cache del SW): la caja
 * se ve igual con o sin internet. Si no carga, cae a la del sistema. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("fonts/inter-latin.woff2") format("woff2")}
body{
  margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  /* Cifras del mismo ancho: los montos no "bailan" al cambiar y las columnas alinean. */
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;letter-spacing:-.005em;
  background:var(--bg);color:var(--ink);
}
button{font:inherit;cursor:pointer;border:0;border-radius:8px}
input{font:inherit}
.error{color:var(--bad);font-size:.9rem;margin:.4rem 0 0}
[hidden]{display:none !important}

/* ===== Login =====
 * Va a juego con posnucleo.com: fondo claro con un resplandor violeta-azul,
 * la nube con el núcleo, y el botón con el mismo degradado de la landing.
 * Usa colores de marca fijos (NO el acento del tenant): esta pantalla es la
 * del producto, todavía no se sabe de qué tienda es quien entra. */
.login{
  --marca-a:#7c3aed; --marca-b:#2563eb;
  min-height:100vh;display:grid;place-items:center;padding:1rem;
  background:
    radial-gradient(60rem 32rem at 15% -10%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(52rem 30rem at 100% 110%, rgba(37,99,235,.18), transparent 60%),
    #f5f6fb;
}
[data-theme="dark"] .login{
  background:
    radial-gradient(60rem 32rem at 15% -10%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(52rem 30rem at 100% 110%, rgba(37,99,235,.20), transparent 60%),
    #0b0d16;
}
.login-card{background:var(--panel);padding:2.1rem 2rem;border-radius:18px;border:1px solid var(--line);
  box-shadow:0 16px 40px -20px rgba(22,25,45,.35);width:min(380px,100%);
  display:flex;flex-direction:column;gap:.85rem}
.login-logo{width:96px;height:auto;align-self:center;margin-bottom:.1rem}
.login-logo .login-nube{fill:#dde2fa}
[data-theme="dark"] .login-logo .login-nube{fill:#242942}
.login-card h1{margin:0;text-align:center;font-size:1.75rem;letter-spacing:-.02em;
  background:linear-gradient(120deg,var(--marca-a),var(--marca-b));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.login-card .sub{margin:0 0 .6rem;text-align:center;color:var(--muted)}
.login-card label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--muted)}
.login-card input{padding:.75rem;border:1px solid var(--line);border-radius:10px;font-size:1rem}
.login-card input:focus{outline:none;border-color:var(--marca-a);box-shadow:0 0 0 3px rgba(124,58,237,.14)}
.login-card button{background:linear-gradient(120deg,var(--marca-a),var(--marca-b));color:#fff;
  padding:.85rem;font-size:1rem;font-weight:700;border-radius:999px;
  box-shadow:0 10px 22px -12px rgba(37,99,235,.8);transition:filter .12s,transform .12s}
.login-card button:hover{filter:brightness(1.07);transform:translateY(-1px)}
.login-pie{margin:.2rem 0 0;text-align:center;font-size:.78rem;color:var(--muted)}
.login-pie a{color:inherit}

/* ===== Topbar ===== */
.caja{min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;
  background:var(--teal);color:var(--on-teal);padding:.6rem 1rem}
/* Bloque de marca en la topbar: logo arriba, nombre de la empresa debajo. Todo clickeable → Inicio. */
.marca{display:flex;flex-direction:column;align-items:center;gap:.2rem;cursor:pointer;line-height:1.05;max-width:min(38vw,300px)}
.logo-top{height:36px;width:36px;object-fit:cover;border-radius:9px;background:rgba(255,255,255,.15);transition:transform .12s}
.marca:hover .logo-top{transform:scale(1.08)}
/* El nombre de la tienda puede ser largo: en vez de cortarlo con "…" a una sola
 * línea, se deja envolver hasta 2 líneas y la marca crece hasta 300px. */
.marca-nombre{font-weight:700;font-size:.9rem;text-align:center;line-height:1.12;max-width:100%;
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Selector de cliente (opcional) en el modal de cobro */
.cobro-cliente{display:block;margin:.5rem 0;font-size:.9rem;color:var(--muted)}
.cobro-cliente select{display:block;width:100%;margin-top:.25rem;padding:.45rem;border-radius:8px;font-size:1rem}
/* Estado vacío (estilo Treinta): centrado, ícono suave, título + subtítulo */
.estado-vacio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  text-align:center;color:var(--muted);padding:1.8rem 1rem}
.estado-vacio .ev-ico{font-size:2.1rem;line-height:1;opacity:.9;margin-bottom:.15rem}
.estado-vacio .ev-tit{font-weight:600;color:var(--ink);font-size:.98rem}
.estado-vacio .ev-sub{font-size:.85rem;max-width:36ch;line-height:1.35}
.estado-vacio .ev-cta{margin-top:.6rem}
/* dentro del ticket (carrito) va más compacto */
.carrito .estado-vacio{padding:1.2rem .5rem}
.estado{display:flex;align-items:center;gap:.7rem}
.pill{font-size:.78rem;padding:.2rem .55rem;border-radius:999px;background:rgba(255,255,255,.15)}
.pill.online{color:#bbf7d0}.pill.offline{color:#fecaca;background:rgba(220,38,38,.35)}
.pill.pendientes{background:var(--warn);color:#3b2300;font-weight:600}
.usuario{font-size:.85rem;opacity:.9}
.link{background:transparent;color:var(--on-teal);text-decoration:underline;opacity:.9}

/* ===== Layout ===== */
.layout{flex:1;display:grid;grid-template-columns:1fr 420px;gap:1rem;padding:1rem;max-width:1200px;margin:0 auto;width:100%}
@media(max-width:820px){.layout{grid-template-columns:1fr}}

.col-izq{display:flex;flex-direction:column;gap:1rem;min-width:0}
.escaner{display:flex;gap:.5rem}
.escaner input{flex:1;padding:.85rem 1rem;border:2px solid var(--teal);border-radius:10px;font-size:1.1rem}
.escaner button{background:var(--teal);color:var(--on-teal);padding:0 1.3rem;font-weight:600}
.escaner button:hover{background:var(--teal-d)}
.escaner-msg{margin:0;padding:.6rem .8rem;border-radius:8px;font-size:.9rem}
.escaner-msg.ok{background:#dcfce7;color:#166534}
.escaner-msg.bad{background:#fee2e2;color:#991b1b}
/* Alta de producto desde la caja: va pegado al aviso de "no encontrado". */
#escaner-crear{margin-top:.4rem;align-self:flex-start}

.catalogo{background:var(--panel);border-radius:12px;box-shadow:var(--shadow);padding:1rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.filtro{padding:.6rem .8rem;border:1px solid var(--line);border-radius:8px}
.lista-catalogo{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;overflow:auto;align-content:start}
.prod-btn{background:#f8fafc;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:.7rem;text-align:left;display:flex;flex-direction:column;gap:.2rem}
.prod-btn:hover{border-color:var(--teal);background:#f0fdfa}
.prod-btn .n{font-weight:600;font-size:.9rem;line-height:1.15}
.prod-btn .p{color:var(--ink);font-weight:700}
.prod-btn .s{font-size:.72rem;color:var(--muted)}
.prod-btn .s.low{color:var(--bad)}

/* ===== Ticket ===== */
.col-der{min-width:0}
.ticket{background:var(--panel);border-radius:12px;box-shadow:var(--shadow);padding:1rem;display:flex;flex-direction:column;gap:.8rem;position:sticky;top:1rem}
.carrito{width:100%;border-collapse:collapse;font-size:.9rem}
.carrito th{text-align:left;color:var(--muted);font-weight:600;border-bottom:2px solid var(--line);padding:.4rem .3rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}
.carrito td{padding:.45rem .3rem;border-bottom:1px solid var(--line);vertical-align:middle}
.carrito .num{text-align:right}
.carrito .vacio td{text-align:center;color:var(--muted);padding:2rem 0}
.cant-ctrl{display:inline-flex;align-items:center;gap:.3rem}
.cant-ctrl button{width:26px;height:26px;background:#f1f5f9;font-weight:700;line-height:1}
.cant-ctrl button:hover{background:var(--line)}
.cant-ctrl span{min-width:2ch;text-align:center}
.cant-input{width:3.6rem;min-width:0;text-align:center;padding:.15rem .2rem;border:1px solid var(--line);
  border-radius:6px;background:var(--panel);color:var(--ink);font:inherit}
.cant-input::-webkit-inner-spin-button,.cant-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cant-input{-moz-appearance:textfield}
.carr-mayoreo{display:block;font-size:.72rem;color:var(--muted);margin-top:.1rem}
.carr-mayoreo.activo{color:var(--teal);font-weight:600}
.quitar{background:transparent;color:var(--bad);font-size:1.1rem;padding:0 .2rem}

.total-box{display:flex;justify-content:space-between;align-items:baseline;border-top:2px dashed var(--line);padding-top:.7rem}
.total-box>span:first-child{font-size:1rem;color:var(--muted)}
.total-monto{font-size:1.9rem;font-weight:800;color:var(--ink);letter-spacing:-.03em}
.acciones{display:flex;gap:.6rem}
.acciones button{flex:1;padding:.85rem;font-weight:700}
/* En el ticket de la caja son 5 botones: los secundarios van 2×2 (targets
 * táctiles cómodos, sin texto apretado) y Cobrar SIEMPRE a lo ancho. */
.ticket .acciones{flex-wrap:wrap}
.ticket .acciones button{flex:1 1 40%;min-width:0;white-space:nowrap}
.ticket .acciones .primario{flex:1 1 100%;padding:1rem}
.primario{background:var(--teal);color:var(--on-teal)}.primario:hover{background:var(--teal-d)}
.primario:disabled,.secundario:disabled{opacity:.45;cursor:not-allowed}
.secundario{background:#f1f5f9;color:var(--ink)}.secundario:hover{background:var(--line)}

/* ===== Modal ===== */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.5);display:grid;place-items:center;padding:1rem;z-index:50}
.modal-card{background:var(--panel);border-radius:16px;padding:1.5rem;width:min(380px,100%);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.85rem;
  max-height:calc(100vh - 2rem);overflow-y:auto} /* nunca se sale de la pantalla */
/* Modal de cobro más ancho: caben métodos, cliente y crédito sin desbordarse */
#modal-cobro .modal-card{width:min(540px,100%)}
@media(min-width:600px){#modal-cobro .metodos{grid-template-columns:repeat(4,1fr)}}
.cliente-row{display:flex;gap:.4rem;margin-top:.25rem}
.cliente-row select{flex:1;margin-top:0 !important}
.cliente-row button{flex:none;white-space:nowrap;padding:.3rem .7rem;font-size:.85rem}
.modal-card h2{margin:0;color:var(--ink);letter-spacing:-.02em}
.cobro-total{font-size:1rem;color:var(--muted)}.cobro-total strong{font-size:1.6rem;color:var(--ink);display:block}
.modal-card label{display:flex;flex-direction:column;gap:.3rem;color:var(--muted);font-size:.85rem}
.modal-card input{padding:.8rem;border:2px solid var(--teal);border-radius:10px;font-size:1.4rem;text-align:right}
.cobro-cambio{display:flex;justify-content:space-between;align-items:baseline;background:#f0fdfa;padding:.7rem .9rem;border-radius:10px}
.cobro-cambio strong{font-size:1.5rem;color:var(--teal)}

/* ===== Toast ===== */
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);
  background:var(--ink);color:var(--bg);padding:.8rem 1.2rem;border-radius:10px;
  box-shadow:var(--shadow);z-index:60;max-width:90vw;font-size:.92rem;white-space:pre-line}
.toast.ok{background:var(--ok)}.toast.warn{background:var(--warn)}

/* ===== Modo oscuro ===== */
[data-theme="dark"]{
  --bg:#0b1120; --panel:#141d33; --ink:#e6e9ef; --muted:#9aa5b8; --line:#232f47;
  --teal:#2dd4bf; --teal-d:#14b8a6;
  --on-teal:#08201d;                          /* acento claro -> texto oscuro */
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171; /* semánticos más brillantes p/fondo oscuro */
  --shadow:0 1px 3px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  color-scheme:dark;                           /* widgets nativos (select, date) en oscuro */
}
/* Inputs/selects de CUALQUIER panel en oscuro (antes solo modales/filtros -> quedaban blancos) */
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{
  background:#0b1220;color:#e5e7eb;border-color:#232f47}
/* Un select SIN borde propio lo pinta el navegador como widget nativo (ignora el
 * background) -> borde explícito para que respete el tema, igual que #rep-dias. */
.panel select,.cobro-cliente select{border:1px solid var(--line);background:var(--panel);color:var(--ink)}
.panel select{padding:.5rem .7rem;border-radius:8px;font:inherit}
[data-theme="dark"] .prod-btn{background:#0f1a30}
[data-theme="dark"] .prod-btn:hover{background:#13233f}
[data-theme="dark"] .cant-ctrl button{background:#1e293b;color:#e5e7eb}
[data-theme="dark"] .cant-input{background:#0b1220;color:#e5e7eb}
[data-theme="dark"] .secundario{background:#1e293b;color:#e5e7eb}
[data-theme="dark"] .secundario:hover{background:#334155}
[data-theme="dark"] .filtro,[data-theme="dark"] .escaner input,
[data-theme="dark"] .modal-card input,[data-theme="dark"] .modal-card select{background:#0b1220;color:#e5e7eb}
[data-theme="dark"] .cobro-cambio{background:#0f1a30}

/* ===== Elementos nuevos (corte, fiados, fiar, pie) ===== */
.modal-card.ancho{width:min(560px,100%)}
.corte-body{display:flex;flex-direction:column;gap:.4rem;font-size:.95rem}
.corte-row{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid var(--line)}
.corte-row.big{font-size:1.2rem;font-weight:800;color:var(--ink);border:0}
.corte-row .lbl{color:var(--muted)}
.fiar-toggle{display:flex;align-items:center;gap:.5rem;flex-direction:row !important;color:var(--ink);font-size:.95rem;cursor:pointer;margin-top:.3rem}
.fiar-toggle input{width:auto}
#fiar-box{display:flex;flex-direction:column;gap:.5rem;border-top:1px dashed var(--line);padding-top:.6rem}
.fiados-acciones{display:flex;justify-content:flex-end;margin-bottom:.4rem}
.fiados-lista{display:flex;flex-direction:column;gap:.4rem;max-height:50vh;overflow:auto}
/* Grid (no flex): así la columna de saldo queda en una posición fija -X del
 * borde derecho, sin importar cuántos botones traiga .acts en cada fila (con
 * flex + space-between, el ancho variable de .acts corría el saldo de lado a
 * lado entre filas). info | saldo | acciones; grid-column explícito en cada
 * clase para que las vistas que reusan .fiado-item con menos piezas (solo
 * info+acts, o info + 2 checkboxes) no se descuadren: lo no-asignado se
 * autoubica en el siguiente hueco libre, en el orden del markup.*/
.fiado-item{display:grid;grid-template-columns:1fr auto auto;column-gap:.6rem;row-gap:.3rem;align-items:center;padding:.6rem .7rem;background:var(--bg);border:1px solid var(--line);border-radius:10px}
.fiado-item .info{grid-column:1;min-width:0}
.fiado-item .info b{display:block}
.fiado-item .info span{font-size:.8rem;color:var(--muted)}
.fiado-item .saldo{grid-column:2;font-weight:800;color:var(--bad);min-width:7ch;text-align:right}
.fiado-item .saldo.cero{color:var(--ok)}
.fiado-item .acts{grid-column:3}
@media(max-width:480px){
  .fiado-item{grid-template-columns:1fr}
  .fiado-item .info,.fiado-item .saldo,.fiado-item .acts{grid-column:1}
  .fiado-item .saldo{text-align:left}
  .fiado-item .acts{justify-content:flex-end}
}
/* ===== Gestor de productos ===== */
#prod-form{display:flex;flex-direction:column;gap:.5rem}
#prod-form label{display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;color:var(--muted)}
#prod-form input{padding:.6rem;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
.prod-form-fila{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.prod-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;background:var(--bg);border:1px solid var(--line);border-radius:10px}
.prod-item .info{flex:1 1 auto;min-width:0}
.prod-item .info b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod-item .info span{font-size:.78rem;color:var(--muted)}
.prod-item .precio{flex:0 0 auto;font-weight:700;color:var(--ink);min-width:8ch;text-align:right}
.prod-item .st{flex:0 0 auto;font-size:.75rem;color:var(--muted);min-width:7ch;text-align:right}
.prod-item .st.low{color:var(--bad)}
.prod-item button{flex:0 0 auto;padding:.3rem .6rem;font-size:.8rem}
.prod-item .acts{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center;flex:0 0 auto}
/* Generador de código de barras en la ficha */
.codigo-row{display:flex;gap:.4rem;align-items:stretch}
.codigo-row input{flex:1 1 auto;min-width:0}
.codigo-row button{flex:0 0 auto;white-space:nowrap;padding:.3rem .7rem;font-size:.85rem}
.barcode-box{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin:.2rem 0 .6rem;padding:.7rem;background:#fff;border:1px solid var(--line);border-radius:10px}
.barcode-box svg{max-width:100%;height:auto}
/* Paleta de color de marca (Ajustes) */
.paleta{display:flex;flex-wrap:wrap;gap:.55rem}
.swatch{width:36px;height:36px;border-radius:50%;background:var(--c);border:2px solid var(--line);cursor:pointer;padding:0}
.swatch:hover{transform:scale(1.08)}
.swatch.sel{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--c)}
.prod-grupo{position:sticky;top:0;z-index:1;margin:.6rem 0 .15rem;padding:.3rem .2rem;font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--panel);border-bottom:2px solid var(--line)}
.prod-grupo:first-child{margin-top:0}
[data-theme="dark"] #prod-form input{background:#0b1220}
.prod-preview-resumen{font-size:.95rem;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;margin:0 0 .6rem}
.prod-preview-resumen b{color:var(--teal)}
.prod-preview-tabla{max-height:42vh;overflow:auto;border:1px solid var(--line);border-radius:10px}
.prod-preview-tabla table{width:100%;border-collapse:collapse;font-size:.85rem}
.prod-preview-tabla th{position:sticky;top:0;background:var(--panel);text-align:left;color:var(--muted);font-size:.72rem;text-transform:uppercase;padding:.4rem .5rem;border-bottom:1px solid var(--line)}
.prod-preview-tabla td{padding:.35rem .5rem;border-bottom:1px solid var(--line)}
.prod-preview-tabla td.num{text-align:right}

.secundario.peligro{background:transparent;color:var(--bad);border:1px solid var(--bad)}
.secundario.peligro:hover{background:var(--bad);color:#fff}

/* ===== Reportes ===== */
.rep-sub{font-size:.85rem;color:var(--muted);margin:.8rem 0 .4rem;text-transform:uppercase;letter-spacing:.03em}
.rep-diario{display:flex;flex-direction:column;gap:.3rem}
.rep-bar-row{display:grid;grid-template-columns:64px 1fr 90px;align-items:center;gap:.5rem;font-size:.82rem;cursor:pointer;border-radius:6px}
.rep-bar-row:hover{background:var(--bg)}
.rep-bar-row .d{color:var(--muted)}
.rep-bar-track{display:block;background:var(--bg);border-radius:6px;height:18px;overflow:hidden}
.rep-bar-fill{display:block;background:var(--teal);height:100%;border-radius:6px;min-width:2px}
.rep-bar-row .v{text-align:right;font-weight:600}
.rep-top{display:flex;flex-direction:column;gap:.3rem}
.rep-top-row{display:grid;grid-template-columns:1fr auto auto;gap:.7rem;align-items:center;padding:.4rem .6rem;background:var(--bg);border:1px solid var(--line);border-radius:8px;font-size:.88rem}
.rep-top-row .cant{color:var(--muted);font-size:.8rem;min-width:8ch;text-align:right}
.rep-top-row .imp{font-weight:700;color:var(--ink);min-width:6ch;text-align:right}
.rep-ventas{display:flex;flex-direction:column;gap:.3rem;max-height:420px;overflow-y:auto}
.rep-venta-row{display:grid;grid-template-columns:86px 1fr 1fr auto auto 80px;gap:.6rem;align-items:center;padding:.45rem .6rem;background:var(--bg);border:1px solid var(--line);border-radius:8px;font-size:.85rem;cursor:pointer}
.rep-venta-row:hover{border-color:var(--teal)}
.rep-venta-row .fh{color:var(--muted);font-variant-numeric:tabular-nums}
.rep-venta-row .cli{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-venta-row .caj{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-venta-row .fp,.rep-venta-row .cant{color:var(--muted);font-size:.78rem}
.rep-venta-row .imp{font-weight:700;color:var(--ink);text-align:right}
.rep-venta-det{padding:.3rem .6rem .3rem 1.4rem;display:flex;flex-direction:column;gap:.25rem}
@media (max-width:640px){.rep-venta-row{grid-template-columns:74px 1fr auto 72px}.rep-venta-row .caj,.rep-venta-row .fp{display:none}}

/* ===== Ajustes (Telegram) ===== */
.ajustes-ayuda{font-size:.82rem;color:var(--muted);margin:0 0 .3rem;line-height:1.45}
.ajustes-estado{font-size:.85rem;margin:.2rem 0;font-weight:600}
.ajustes-estado.on{color:var(--ok)}.ajustes-estado.off{color:var(--muted)}
#modal-ajustes label{display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;color:var(--muted)}
#modal-ajustes input{padding:.6rem;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
[data-theme="dark"] #modal-ajustes input{background:#0b1220}

.pie-marca{text-align:center;font-size:.78rem;color:var(--muted);margin:.2rem 0 0}
.pie-marca a{color:var(--muted);text-decoration:none}
.pie-marca a:hover{color:var(--teal)}
.link{background:transparent;border:0;cursor:pointer;font:inherit}

/* =====================================================
   Shell con menú lateral + secciones (rediseño dashboard)
   ============================================================ */
.app{min-height:100vh;display:flex;flex-direction:column}
.cuerpo{flex:1;display:flex;min-height:0}
.solo-movil{display:none}

.sidebar{width:184px;background:var(--panel);border-right:1px solid var(--line);
  padding:.6rem;display:flex;flex-direction:column;gap:.25rem;flex-shrink:0}
.nav-item{display:flex;align-items:center;gap:.6rem;padding:.7rem .8rem;border-radius:10px;
  background:transparent;color:var(--ink);text-align:left;font-size:.95rem;font-weight:500;width:100%}
.nav-item:hover{background:var(--bg)}
.nav-item.activo{background:var(--teal);color:var(--on-teal)}

.contenido{flex:1;overflow:auto;padding:1.2rem;min-width:0;background:var(--bg)}
.vista-titulo{font-size:1.5rem;margin:0 0 1rem}
.vista-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.vista-head .vista-titulo{margin:0}
.vista-acciones{display:flex;gap:.5rem;flex-wrap:wrap}

/* KPIs del inicio */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.2rem}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;
  display:flex;flex-direction:column;gap:.15rem;box-shadow:var(--shadow)}
.kpi-lbl{color:var(--muted);font-size:.82rem}
.kpi-val{font-size:1.8rem;font-weight:750;color:var(--ink);line-height:1.1;letter-spacing:-.025em}
.kpi-sub{color:var(--muted);font-size:.76rem}
.kpi.alerta .kpi-val{color:var(--warn)}
/* Tarjetas que llevan a otra pantalla (Por cobrar / Por pagar) */
.kpi[role="button"]{cursor:pointer;transition:border-color .12s,transform .12s}
.kpi[role="button"]:hover{border-color:var(--teal);transform:translateY(-1px)}

/* Paneles embebidos de Inicio: transacciones del día y caja/cierres */
.panel-tit{display:flex;align-items:center;gap:.45rem}
.panel-ico{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:var(--teal);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Van dentro de media pantalla: sin columna de cajero y con la fila más compacta. */
#inicio-transacciones{max-height:260px}
#inicio-transacciones .rep-venta-row{grid-template-columns:58px 1fr auto auto 76px;cursor:default;gap:.45rem}
#inicio-transacciones .rep-venta-row:hover{border-color:var(--line)}
#inicio-cierres .fiado-item{padding:.45rem .6rem}

/* Accesos grandes de Inicio: Transacciones / Cierres de caja */
.accesos{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.acceso{display:flex;align-items:center;gap:.9rem;text-align:left;width:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:1rem 1.1rem;box-shadow:var(--shadow);color:var(--ink);
  transition:border-color .12s,transform .12s}
.acceso:hover{border-color:var(--teal);transform:translateY(-1px)}
.acceso-ico{width:38px;height:38px;padding:6px;border-radius:12px;flex:0 0 auto;fill:none;
  stroke:var(--teal);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  background:color-mix(in srgb, var(--teal) 12%, transparent)}
.acceso-txt{display:flex;flex-direction:column;gap:.1rem;flex:1;min-width:0}
.acceso-txt b{font-size:1rem}
.acceso-txt span{color:var(--muted);font-size:.8rem}
.acceso-flecha{color:var(--muted);font-size:1.4rem;line-height:1}

/* Miniaturas de dinero de los 4 KPIs principales */
.kpis-dinero .kpi{padding-top:.85rem}
.kpi-ico{width:34px;height:34px;padding:5px;margin-bottom:.3rem;border-radius:11px;
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  color:var(--muted);background:rgba(107,114,128,.10)}
.kpi-ico.entra{color:var(--ok);background:rgba(22,163,74,.12)}
.kpi-ico.sale{color:var(--warn);background:rgba(217,119,6,.13)}
.kpi-ico .flecha{stroke-width:1.8}
/* Fila secundaria (balance / en caja / stock): más discreta que la principal */
.kpis-chicos{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpis-chicos .kpi{padding:.8rem .9rem}
.kpis-chicos .kpi-val{font-size:1.3rem}
.inicio-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:1rem 1.2rem;box-shadow:var(--shadow);margin-bottom:1rem}
.panel-tit{margin:0 0 .7rem;font-size:1rem;color:var(--ink)}
/* Encabezado de grupo en Ajustes */
.ajustes-grupo{margin:1.8rem 0 .7rem;padding-bottom:.4rem;border-bottom:1px solid var(--line);
  font-size:.78rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--teal);
  display:flex;align-items:center;gap:.5rem}
.ajustes-grupo:first-of-type{margin-top:.2rem}

/* Caja dentro de su vista (ocupa todo) */
#vista-caja{height:100%}
#vista-caja .layout{max-width:none;padding:0;margin:0;height:100%}

/* Inventario: barra + tabla */
.inv-barra{display:flex;gap:.8rem;align-items:center;margin-bottom:.8rem;flex-wrap:wrap}
.inv-barra .filtro{flex:1;min-width:200px}
.chk{display:flex;align-items:center;gap:.4rem;font-size:.88rem;color:var(--muted);white-space:nowrap}
.prod-tabla{display:flex;flex-direction:column;gap:.4rem}

/* Editor de producto a pantalla completa */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;max-width:720px;margin-bottom:.6rem}
/* En modales angostos (380px) el grid de 2 columnas se desbordaba y cortaba un campo → 1 columna */
.modal-card:not(.ancho) .form-grid{grid-template-columns:1fr}
.form-grid label{display:flex;flex-direction:column;gap:.3rem;font-size:.84rem;color:var(--muted)}
.form-grid input,.form-grid select{padding:.65rem;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font-size:1rem;text-align:left}
[data-theme="dark"] .form-grid input,[data-theme="dark"] .form-grid select{background:#0b1220}
#vista-ajustes .form-grid{max-width:560px}

/* Móvil: menú lateral como cajón */
@media(max-width:820px){
  .solo-movil{display:inline-block}
  .sidebar{position:fixed;top:0;left:0;bottom:0;z-index:40;transform:translateX(-100%);
    transition:transform .2s;width:230px;padding-top:3.6rem}
  .sidebar.abierto{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
  .inicio-cols{grid-template-columns:1fr}
  .accesos{grid-template-columns:1fr}
  #vista-caja .layout{grid-template-columns:1fr}
  .contenido{padding:.8rem}
}

/* ===== Fase B: formas de pago + descuentos ===== */
.metodos{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.metodo{padding:.6rem;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font-weight:600;font-size:.9rem}
.metodo:hover{border-color:var(--teal)}
.metodo.activo{background:var(--teal);color:var(--on-teal);border-color:var(--teal)}
.pago-panel{display:flex;flex-direction:column;gap:.6rem}
.pago-nota{margin:0;color:var(--muted);background:var(--bg);border-radius:10px;padding:.8rem;text-align:center;font-size:.95rem}
#pago-mixto label{flex-direction:row !important;align-items:center;justify-content:space-between;gap:.6rem}
#pago-mixto input{max-width:55%;font-size:1.1rem}

/* Totales del ticket */
.totales{display:flex;flex-direction:column;gap:.2rem;font-size:.9rem;color:var(--muted)}
.tot-row{display:flex;justify-content:space-between}
.tot-row .desc{color:var(--bad);font-weight:600}
.imp-btn{background:transparent;color:inherit;font:inherit;padding:0;text-decoration:underline dotted;text-underline-offset:2px}
.imp-btn:hover{color:var(--teal)}
.lin-desc{display:block;font-size:.72rem;color:var(--bad)}
[data-theme="dark"] .metodo{background:#0b1220}

/* ===== Fase C: cajeros (acciones) ===== */
.fiado-item .acts{display:flex;gap:.3rem;flex-wrap:wrap;align-items:center}
.fiado-item .acts button{padding:.35rem .6rem;font-size:.78rem;flex:none}

/* ===== Fase D: selector de periodo en reportes ===== */
#rep-dias,#rep-fecha{padding:.5rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:inherit}
[data-theme="dark"] #rep-dias,[data-theme="dark"] #rep-fecha{background:#0b1220}
#rep-dias:disabled{opacity:.45}

/* ===== Fase E: selects de filtro ===== */
#prod-depto-filtro{padding:.5rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:inherit}
[data-theme="dark"] #prod-depto-filtro{background:#0b1220}

/* ===== Fase H: Treinta parity ===== */

/* Thumbnail en el catálogo de la caja */
.prod-btn{position:relative;overflow:hidden}
.prod-btn.con-foto{padding-right:62px}   /* reserva la franja derecha: el texto nunca pasa bajo la foto */
.prod-thumb{position:absolute;top:8px;right:8px;width:46px;height:46px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#fff}

/* Foto upload en el editor de productos */
.foto-upload-box{margin:.8rem 0 .4rem;display:flex;flex-direction:column;gap:.4rem}
.foto-preview{min-height:36px;display:flex;align-items:center}
.foto-upload-acciones{display:flex;gap:.5rem;align-items:center}
.btn-fake{display:inline-flex;align-items:center;justify-content:center;padding:.45rem .9rem;
  border-radius:8px;font-size:.88rem;font-weight:600;cursor:pointer;text-decoration:none;
  border:1px solid var(--line);background:var(--panel);color:var(--ink)}
.btn-fake:hover{border-color:var(--teal);color:var(--teal)}
/* Galería de fotos adicionales por producto */
.galeria-thumbs{display:flex;gap:.4rem;flex-wrap:wrap}
.galeria-thumbs .gth{position:relative}
.galeria-thumbs .gth img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.galeria-thumbs .gth button{position:absolute;top:-6px;right:-6px;width:18px;height:18px;line-height:1;
  border-radius:50%;border:0;background:var(--bad);color:#fff;font-size:.7rem;padding:0;cursor:pointer}

/* Share bar (post-venta) */
.share-bar{position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:#1e3a5f;color:#fff;display:flex;align-items:center;gap:.8rem;
  padding:.7rem 1rem;flex-wrap:wrap;box-shadow:0 -2px 12px rgba(0,0,0,.25)}
.share-bar #share-msg{flex:1;font-size:.9rem;font-weight:500}
.wa-pill{display:inline-flex;align-items:center;gap:.35rem;background:#25d366;color:#fff;
  padding:.45rem 1rem;border-radius:999px;font-weight:700;font-size:.88rem;
  text-decoration:none;white-space:nowrap}
.wa-pill:hover{background:#1ebe5d}
.share-cerrar{background:transparent;border:none;color:#fff;font-size:1.1rem;cursor:pointer;padding:.2rem .4rem;flex-none}

/* Slug prefix en ajustes */
.slug-prefix{font-size:.78rem;color:var(--muted);white-space:nowrap;padding-right:.1rem}

/* Tabs de departamento en el catálogo de la caja */
.depto-tabs-wrap{display:flex;align-items:center;gap:.2rem;position:relative}
/* Degradado en el borde = "aquí sigue habiendo categorías". La barra nativa no
 * se ve igual en todos lados (en móvil y en macOS se autoesconde), así que la
 * señal de que hay más NO puede depender solo de ella. */
.depto-tabs-wrap::before,.depto-tabs-wrap::after{content:'';position:absolute;top:0;bottom:6px;width:26px;
  pointer-events:none;opacity:0;transition:opacity .15s;z-index:1}
.depto-tabs-wrap::before{left:1.6rem;background:linear-gradient(to right,var(--panel),transparent)}
.depto-tabs-wrap::after{right:1.6rem;background:linear-gradient(to left,var(--panel),transparent)}
.depto-tabs-wrap.hay-izq::before,.depto-tabs-wrap.hay-der::after{opacity:1}
/* Barra de desplazamiento VISIBLE: con muchos departamentos los últimos quedan
 * fuera de pantalla y antes nada lo delataba (la barra era de 3px, casi
 * invisible, y las flechas ‹› solas no se leían como "hay más"). */
.depto-tabs{display:flex;gap:.3rem;overflow-x:auto;padding:.3rem 0 .1rem;flex-wrap:nowrap;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:var(--teal) var(--line)}
.depto-tabs::-webkit-scrollbar{height:9px}
.depto-tabs::-webkit-scrollbar-track{background:var(--line);border-radius:99px}
.depto-tabs::-webkit-scrollbar-thumb{background:var(--teal);border-radius:99px;border:2px solid var(--panel)}
.depto-tabs::-webkit-scrollbar-thumb:hover{background:var(--teal)}
.depto-tab{padding:.28rem .7rem;border-radius:999px;font-size:.76rem;font-weight:600;
  border:1.5px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;white-space:nowrap}
.depto-tab.activo{background:var(--teal);color:var(--on-teal);border-color:var(--teal)}
.depto-tab:hover:not(.activo){border-color:var(--teal);color:var(--teal)}
.depto-scroll-btn{flex:0 0 auto;width:1.6rem;height:1.6rem;border-radius:50%;border:1.5px solid var(--line);
  background:var(--bg);color:var(--teal);font-size:1rem;line-height:1;cursor:pointer;display:flex;
  align-items:center;justify-content:center;padding:0}
.depto-scroll-btn:hover{border-color:var(--teal)}
.depto-scroll-btn[hidden]{display:none}

/* ===== Venta corregida después del cobro (sql/25) =====
 * Señal chiquita pero inconfundible: pastilla ámbar + borde del mismo tono en
 * la fila, para distinguirla de un vistazo de las ventas que nadie tocó. */
.pill-editada{display:inline-block;background:#fef3c7;color:#92400e;border-radius:999px;
  padding:.05rem .45rem;font-size:.7rem;font-weight:700;vertical-align:middle}
.rep-venta.editada,.fiado-item.editada{border-left:3px solid #f59e0b}
.venta-editada-nota{color:#92400e;font-size:.8rem;margin:.35rem 0 0}
@media (prefers-color-scheme: dark){
  .pill-editada{background:#78350f;color:#fde68a}
  .venta-editada-nota{color:#fbbf24}
}
:root[data-theme="dark"] .pill-editada{background:#78350f;color:#fde68a}
:root[data-theme="dark"] .venta-editada-nota{color:#fbbf24}
:root[data-theme="light"] .pill-editada{background:#fef3c7;color:#92400e}
:root[data-theme="light"] .venta-editada-nota{color:#92400e}

/* Link button inline */
.link-btn{background:transparent;border:none;color:var(--teal);cursor:pointer;font:inherit;text-decoration:underline;padding:0}

/* ===== Multisucursal (Fase 1) ===== */
.sucursal-sel-box{margin-left:.3rem}
.sucursal-sel-box select{font-size:.8rem;padding:.25rem .5rem;border-radius:8px;
  border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.14);color:var(--on-teal);max-width:38vw}
.sucursal-sel-box select option{color:#0f172a}
/* En oscuro la topbar es acento CLARO: los pills necesitan tinta oscura, no clara */
[data-theme="dark"] .pill{background:rgba(0,0,0,.16)}
[data-theme="dark"] .pill.online{color:#064e3b}
[data-theme="dark"] .pill.offline{color:#7f1d1d;background:rgba(127,29,29,.25)}
[data-theme="dark"] .sucursal-sel-box select{border-color:rgba(0,0,0,.35);background:rgba(0,0,0,.12)}

#rep-sucursal{padding:.5rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:inherit}
[data-theme="dark"] #rep-sucursal{background:#0b1220}

.tablero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.tablero-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;box-shadow:var(--shadow)}
.tablero-card h4{margin:0 0 .6rem;font-size:1.02rem;display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.tablero-card .principal-tag{font-size:.7rem;color:var(--muted);font-weight:400}
.tablero-card .fila{display:flex;justify-content:space-between;padding:.28rem 0;font-size:.9rem;border-bottom:1px solid var(--line)}
.tablero-card .fila:last-child{border-bottom:0}
.tablero-card .fila .lbl{color:var(--muted)}
.tablero-card .alerta{color:var(--bad);font-weight:700}

/* ===== Módulo Combustible (gasolinera) ===== */
.comb-badge{position:absolute;top:4px;left:4px;font-size:1rem;background:var(--bg);border-radius:6px;padding:0 3px;line-height:1.3}
.panel-sub{color:var(--muted);font-size:.85rem;margin:.1rem 0 .7rem}
.comb-tabla{width:100%;font-size:.9rem;overflow-x:auto}
.comb-h,.comb-row{display:grid;grid-template-columns:1.6fr 1.4fr .9fr .9fr .8fr .8fr .8fr;gap:.4rem;align-items:center;padding:.4rem .2rem;border-bottom:1px solid var(--line)}
.comb-tabla.rep .comb-h,.comb-tabla.rep .comb-row{grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr 1.1fr}
.comb-h{font-weight:700;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.02em}
.comb-row input{width:100%;padding:.3rem;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);text-align:right}
.comb-row .comb-merma.alerta{color:var(--bad);font-weight:800}
.comb-row.total{border-top:2px solid var(--line);border-bottom:0;background:var(--bg)}
.comb-acciones{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.9rem}
.comb-rango{display:flex;gap:.6rem;align-items:end;flex-wrap:wrap;margin-bottom:.8rem}
.comb-rango input{padding:.35rem;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg)}
.comb-surtidor{border:1px solid var(--line);border-radius:10px;padding:.7rem;margin:.6rem 0}
.comb-surt-head{display:flex;align-items:center;gap:.5rem;font-size:1rem;margin-bottom:.4rem}
.comb-mang{display:flex;align-items:center;gap:.4rem;padding:.25rem 0;font-size:.9rem}
.comb-add-mang,.comb-add-surt,.comb-ajuste{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin-top:.5rem}
.comb-add-mang input,.comb-add-mang select,.comb-add-surt input,.comb-ajuste input{padding:.35rem;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg)}
.comb-ajuste small,.comb-add-mang small{color:var(--muted);font-size:.78rem;width:100%}
button.mini{padding:.25rem .5rem;font-size:.82rem;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);cursor:pointer}
button.mini.borrar{border-color:transparent;background:transparent}

/* ===== Tanques (Fase A2) ===== */
.tanques-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-bottom:.3rem}
.tanque-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.5rem}
.tanque-card.inactivo{opacity:.6}
.tanque-card-head{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.tanque-card-head small{color:var(--muted)}
.tanque-barra{height:.55rem;border-radius:999px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.tanque-barra-fill{height:100%;border-radius:999px;background:var(--ok);transition:width .3s}
.tanque-barra-fill.ambar{background:var(--warn)}
.tanque-barra-fill.rojo{background:var(--bad)}
.tanque-nivel-txt{font-size:.82rem;color:var(--muted)}
.tanque-alerta{color:var(--bad);font-weight:700;font-size:.85rem}
.tanque-aforo-info{font-size:.8rem;color:var(--muted)}
.tanque-aforo-info.faltante{color:var(--bad);font-weight:600}
.tanque-acciones{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.2rem}
.comb-sin-tanque{color:var(--warn);font-weight:600}
.mang-tanque-sel{padding:.25rem .4rem;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);font-size:.82rem}
.mov-tabla{width:100%;font-size:.88rem;overflow-x:auto}
.mov-h,.mov-row{display:grid;grid-template-columns:1.3fr 2fr 1fr 1fr;gap:.4rem;padding:.35rem .2rem;border-bottom:1px solid var(--line)}
.mov-h{font-weight:700;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.02em}
.mov-row .neg{color:var(--bad)}
.mov-row .pos{color:var(--ok)}
.aforo-resultado{border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem;font-size:.88rem}
.aforo-resultado.faltante{border-color:var(--bad);color:var(--bad)}
.aforo-resultado.sobrante{border-color:var(--warn);color:var(--warn)}

/* =====================================================
 *  Premium — hoja de venta y zonas bloqueadas del plan gratis
 * ============================================================ */
.premium-fondo{
  position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  background:rgba(9,12,20,.55);backdrop-filter:blur(3px);padding:1rem;
}
.premium-hoja{
  position:relative;background:var(--panel);border-radius:18px;box-shadow:var(--shadow);
  max-width:420px;width:100%;padding:1.6rem 1.5rem 1.3rem;max-height:92vh;overflow:auto;
}
.premium-x{
  position:absolute;top:.5rem;right:.6rem;background:none;color:var(--muted);
  font-size:1.5rem;line-height:1;padding:.2rem .45rem;
}
.premium-ojo{
  margin:0 0 .5rem;font-size:.7rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal);
}
.premium-hoja h2{margin:0 0 .6rem;font-size:1.14rem;line-height:1.35}
.premium-historia{
  margin:0 0 .9rem;font-size:.88rem;color:var(--muted);
  background:var(--bg);border-radius:10px;padding:.6rem .7rem;
}
.premium-lista{margin:0 0 1rem;padding:0;list-style:none;display:grid;gap:.45rem}
.premium-lista li{position:relative;padding-left:1.4rem;font-size:.92rem;color:var(--muted)}
.premium-lista li::before{
  content:"";position:absolute;left:.15rem;top:.42em;width:.6rem;height:.35rem;
  border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg);
}
.premium-lista b{color:var(--ink)}
.premium-precio{margin:0 0 1rem;font-size:1.5rem;font-weight:800;color:var(--teal)}
.premium-precio span{font-size:.82rem;font-weight:600;color:var(--muted)}
.btn-premium{
  display:block;text-align:center;text-decoration:none;background:var(--teal);color:var(--on-teal);
  font-weight:700;padding:.8rem;border-radius:10px;
}
.btn-probar{
  display:block;width:100%;margin-top:.55rem;background:transparent;color:var(--teal);
  border:1px solid var(--teal);font-weight:700;padding:.7rem;
}
.premium-pie{margin:.9rem 0 0;text-align:center;font-size:.8rem;color:var(--muted)}

/* Zona de reportes fuera de la ventana del plan gratis: se ve que HAY datos
 * (por eso el blur y no ocultarlo), pero no se leen. */
.bloqueado-gratis{position:relative}
.bloqueado-gratis > .contenido-borroso{filter:blur(5px);pointer-events:none;user-select:none;opacity:.75}
.candado-historia{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.5rem;text-align:center;padding:1rem;
  background:linear-gradient(180deg,rgba(255,255,255,0),var(--panel) 62%);
}
:root[data-theme="dark"] .candado-historia{
  background:linear-gradient(180deg,rgba(0,0,0,0),var(--panel) 62%);
}
.candado-historia p{margin:0;font-size:.9rem;color:var(--muted);max-width:30ch}
.candado-historia b{color:var(--ink)}
.candado-historia button{background:var(--teal);color:var(--on-teal);font-weight:700;padding:.55rem 1rem}
.aviso-plan{
  display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:.6rem .75rem;margin-bottom:.8rem;font-size:.88rem;color:var(--muted);
}
.aviso-plan b{color:var(--ink)}
.aviso-plan button{background:var(--teal);color:var(--on-teal);font-weight:700;padding:.45rem .85rem;font-size:.85rem}
.kpi-candado{cursor:pointer}
.kpi-candado .kpi-val{opacity:.55}

/* --- Chip de plan en la topbar -------------------------------------------
 * Usa --on-teal (la tinta calculada sobre el acento) para que se lea en los dos
 * temas y también cuando el tenant pone un acento propio. */
.pill.plan{border:0;font-family:inherit;font-weight:600;cursor:pointer;
  color:var(--on-teal);background:rgba(255,255,255,.22)}
[data-theme="dark"] .pill.plan{background:rgba(0,0,0,.18)}
.pill.plan.porvencer{background:var(--warn);color:#3b2300}
.pill.plan:hover{filter:brightness(1.08)}

/* --- Hoja del cambio a Plan Gratis --------------------------------------- */
.plan-tranquilo{margin:0 0 .9rem;font-size:.92rem;color:var(--muted);line-height:1.5}
.plan-tranquilo b{color:var(--ink)}
#hoja-premium .btn-probar{margin-top:.55rem}

/* --- Panel "Tu plan" de Ajustes ------------------------------------------ */
.plan-cabecera{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem}
.plan-badge{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  border-radius:999px;padding:.3rem .7rem}
.plan-badge.premium{background:var(--teal);color:var(--on-teal)}
.plan-badge.gratis{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.plan-sub{font-size:.88rem;color:var(--muted)}
.plan-sub b{color:var(--ink)}
.plan-cols{display:grid;gap:1rem;margin:.4rem 0 .2rem}
@media(min-width:620px){.plan-cols{grid-template-columns:1fr 1fr;gap:1.4rem}}
.plan-h{margin:0 0 .45rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.plan-lista{margin:0;padding:0;list-style:none;display:grid;gap:.4rem}
.plan-lista li{position:relative;padding-left:1.35rem;font-size:.89rem;color:var(--muted);line-height:1.45}
.plan-lista b{color:var(--ink)}
.plan-lista.si li::before{content:"";position:absolute;left:.15rem;top:.45em;width:.55rem;height:.32rem;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.plan-lista.no li::before{content:"";position:absolute;left:.25rem;top:.52em;width:.55rem;height:2px;
  background:var(--muted);opacity:.6}
.plan-precio{margin:1rem 0 .7rem;font-size:1.05rem;font-weight:800;color:var(--teal)}
.btn-plan{display:block;text-align:center;text-decoration:none;background:var(--teal);
  color:var(--on-teal);font-weight:700;padding:.72rem;border-radius:10px;max-width:320px}
.btn-plan-fantasma{display:block;width:100%;max-width:320px;margin-top:.55rem;background:transparent;
  color:var(--teal);border:1px solid var(--teal);font-weight:700;padding:.65rem}

/* --- Grupos plegables de Ajustes ----------------------------------------- */
.ajustes-grupo.plegable{display:flex;align-items:baseline;gap:.5rem;cursor:pointer;
  user-select:none;flex-wrap:wrap}
.ajustes-grupo.plegable:hover .ag-tit{color:var(--teal)}
.ag-chev{font-size:.8rem;color:var(--muted);width:1ch;flex:none}
/* El encabezado va en mayúsculas, pero el subtítulo es una frase: en versalitas
 * grita y se lee peor, que es justo lo contrario de para qué está. */
.ag-sub{font-size:.78rem;font-weight:400;color:var(--muted);flex:1 1 100%;
  text-transform:none;letter-spacing:normal;
  padding-left:1.5ch;margin-top:-.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ajustes-grupo.abierto .ag-sub{display:none}
.ajustes-cuerpo{display:grid;gap:.9rem;margin-top:.9rem}

/* --- Topbar en pantalla chica ---------------------------------------------
 * El chip del plan es un elemento más en una barra que ya venía apretada, y en
 * 390px el flex se comía el nombre de la tienda hasta dejarlo en "T i.". Saber
 * en qué tienda estás importa más que ver tu propio nombre de usuario (eso ya lo
 * sabés), así que en móvil el que se va es `.usuario`. */
@media(max-width:640px){
  .topbar{gap:.45rem}
  .marca{min-width:5rem}
  .estado{gap:.5rem;min-width:0}
  .usuario{display:none}
  .pill.plan{font-size:.7rem;padding:.18rem .5rem}
}

/* ===== Banner del modo demo =====
 * Solo aparece cuando se entró por posnucleo.com/caja/?demo=1. Va abajo y fijo para
 * no empujar la topbar ni el catálogo; el body reserva el alto con .con-demo. */
#banner-demo{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:.9rem;flex-wrap:wrap;
  padding:.6rem 1rem;
  background:linear-gradient(90deg,#7c3aed,#2563eb);
  color:#fff;font-size:.88rem;line-height:1.35;
  box-shadow:0 -6px 20px -8px rgba(16,24,40,.45);
}
#banner-demo .bd-txt{max-width:70ch;text-align:center}
#banner-demo .bd-cta{
  flex:none;background:#fff;color:#1e293b;text-decoration:none;font-weight:700;
  padding:.38rem .85rem;border-radius:8px;white-space:nowrap;
}
#banner-demo .bd-cta:hover{background:#f1f5f9}
/* Salida a la cuenta propia: deliberadamente MENOS llamativa que "Quiero la mía"
 * (el demo está para vender), pero visible sin tener que buscarla. */
#banner-demo .bd-salir{
  flex:none;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);
  font-weight:600;padding:.34rem .8rem;border-radius:8px;white-space:nowrap;font-size:inherit;
}
#banner-demo .bd-salir:hover{background:rgba(255,255,255,.14)}
body.con-demo{padding-bottom:3.4rem}
@media (max-width:640px){
  #banner-demo{font-size:.8rem;padding:.5rem .7rem;gap:.5rem}
  body.con-demo{padding-bottom:4.6rem}
}

/* ===== Inicio: encabezado + centro de avisos =====
 * Cada nivel define su color con 3 variables (--av, --av-bg, --av-bd) y el resto
 * del componente las usa: agregar un nivel nuevo es agregar 3 líneas. */
.inicio-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin:0 0 1rem;flex-wrap:wrap}
.inicio-saludo{margin:.2rem 0 0;color:var(--muted);font-size:.9rem}
.btn-reportar{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .95rem;border-radius:999px;
  background:var(--panel);color:var(--ink);border:1px solid var(--line);font-size:.85rem;font-weight:600;
  box-shadow:0 1px 2px rgba(16,24,40,.05);transition:border-color .15s,transform .15s,box-shadow .15s}
.btn-reportar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;color:var(--bad)}
.btn-reportar:hover{border-color:var(--bad);transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(220,38,38,.45)}

.avisos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:.7rem;margin:0 0 1.1rem}
.avisos:empty{display:none}
.aviso{--av:#2563eb;--av-bg:#eff5ff;--av-bd:#d6e4ff;
  position:relative;display:flex;gap:.8rem;align-items:flex-start;padding:.9rem 2.2rem .9rem .95rem;
  border-radius:14px;background:var(--av-bg);border:1px solid var(--av-bd);overflow:hidden;
  animation:aviso-in .35s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}
.aviso::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--av)}
.aviso.critico{--av:#dc2626;--av-bg:#fef3f2;--av-bd:#fdd8d4}
.aviso.alerta {--av:#d97706;--av-bg:#fffaeb;--av-bd:#fdebc2}
.aviso.info   {--av:#2563eb;--av-bg:#eff5ff;--av-bd:#d6e4ff}
.aviso.exito  {--av:#16a34a;--av-bg:#effcf3;--av-bd:#cdf1da}
.aviso.premium{--av:#7c3aed;--av-bg:linear-gradient(120deg,#f6f1ff,#eef3ff);--av-bd:#e2d8fd}
.aviso-ico{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:1.1rem;
  background:color-mix(in srgb,var(--av) 14%,transparent)}
.aviso-cuerpo{min-width:0;display:flex;flex-direction:column;gap:.2rem}
.aviso-tit{margin:0;font-weight:700;font-size:.93rem;color:var(--ink);letter-spacing:-.01em}
.aviso-txt{margin:0;font-size:.83rem;color:var(--muted);line-height:1.4}
.aviso-cta{align-self:flex-start;margin-top:.35rem;padding:.35rem .8rem;border-radius:999px;font-size:.8rem;font-weight:700;
  background:var(--av);color:#fff;transition:filter .15s,transform .15s}
.aviso-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
.aviso.premium .aviso-cta{background:linear-gradient(120deg,#7c3aed,#2563eb)}
.aviso-x{position:absolute;top:.45rem;right:.45rem;width:26px;height:26px;border-radius:8px;
  background:transparent;color:var(--muted);font-size:1.05rem;line-height:1;opacity:.6}
.aviso-x:hover{opacity:1;background:color-mix(in srgb,var(--av) 12%,transparent)}
/* Crítico que no se puede cerrar: un pulso sutil en el ícono, no un parpadeo. */
.aviso.critico:not(.cerrable) .aviso-ico{animation:aviso-pulso 2.4s ease-in-out infinite}
.aviso.saliendo{animation:aviso-out .22s ease forwards}
@keyframes aviso-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes aviso-out{to{opacity:0;transform:scale(.97)}}
@keyframes aviso-pulso{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--av) 35%,transparent)}
  50%{box-shadow:0 0 0 6px transparent}}
@media (prefers-reduced-motion:reduce){.aviso,.aviso-ico{animation:none !important}}

[data-theme="dark"] .aviso.critico{--av:#f87171;--av-bg:#2a1517;--av-bd:#4a2226}
[data-theme="dark"] .aviso.alerta {--av:#fbbf24;--av-bg:#2a2112;--av-bd:#4a3a16}
[data-theme="dark"] .aviso.info   {--av:#60a5fa;--av-bg:#131f36;--av-bd:#1f3358}
[data-theme="dark"] .aviso.exito  {--av:#4ade80;--av-bg:#11251a;--av-bd:#1b4029}
[data-theme="dark"] .aviso.premium{--av:#a78bfa;--av-bg:linear-gradient(120deg,#1d1638,#141d3a);--av-bd:#342a5e}
[data-theme="dark"] .aviso:not(.premium) .aviso-cta{color:#0b1120}

/* ===== Ventana "¿Algo falla?" ===== */
.reporte-card{gap:1rem}
.reporte-cabeza{display:flex;gap:.8rem;align-items:flex-start}
.reporte-ico{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.35rem;
  background:color-mix(in srgb,var(--teal) 12%,transparent)}
.reporte-cabeza h2{margin:0 0 .2rem}
.reporte-sub{margin:0;color:var(--muted);font-size:.87rem;line-height:1.4}
.reporte-tipos{display:flex;flex-wrap:wrap;gap:.45rem}
.reporte-tipo{padding:.45rem .8rem;border-radius:999px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);font-size:.85rem;transition:all .15s}
.reporte-tipo:hover{border-color:var(--teal)}
.reporte-tipo.activo{background:var(--teal);border-color:var(--teal);color:var(--on-teal);font-weight:600}
.reporte-card textarea{padding:.75rem;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:.95rem;
  resize:vertical;min-height:110px;color:var(--ink);background:var(--panel)}
.reporte-card textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 18%,transparent)}
.reporte-nota{margin:0;font-size:.78rem;color:var(--muted)}
.reporte-card .acciones{justify-content:flex-end}
.reporte-card .acciones button{padding:.65rem 1.1rem}

/* ===== Pulido visual (24-sep) ===== */
.vista-titulo{letter-spacing:-.03em}
kbd{font-family:inherit;font-size:.7rem;font-weight:600;padding:.08rem .38rem;border-radius:5px;
  border:1px solid var(--line);border-bottom-width:2px;background:var(--panel);color:var(--muted)}

/* --- Pastilla "Buscar… Ctrl K" en la barra --- */
.cmdk-pill{display:inline-flex;align-items:center;gap:.5rem;margin:0 auto 0 1rem;padding:.4rem .5rem .4rem .7rem;
  min-width:220px;border-radius:10px;background:rgba(255,255,255,.14);color:inherit;font-size:.85rem;
  border:1px solid rgba(255,255,255,.18);transition:background .15s}
.cmdk-pill:hover{background:rgba(255,255,255,.24)}
.cmdk-pill svg,.cmdk-input svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;opacity:.8}
.cmdk-pill .cmdk-txt{flex:1;text-align:left;opacity:.85}
.cmdk-pill kbd{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.25);color:inherit}
@media (max-width:760px){.cmdk-pill{min-width:0;margin-left:.4rem}.cmdk-pill .cmdk-txt,.cmdk-pill kbd{display:none}}

/* --- Campanita de avisos --- */
.campana-wrap{position:relative}
.campana{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:transparent;color:inherit;transition:background .15s}
.campana:hover,.campana[aria-expanded="true"]{background:rgba(255,255,255,.18)}
.campana svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
.campana-num{position:absolute;top:1px;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  background:#ef4444;color:#fff;font-size:.66rem;font-weight:700;display:grid;place-items:center;
  box-shadow:0 0 0 2px var(--teal)}
.campana-num.suave{background:#f59e0b}
.campana-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:min(380px,calc(100vw - 24px));
  max-height:70vh;overflow:auto;padding:.5rem;border-radius:14px;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);box-shadow:0 18px 50px -12px rgba(16,24,40,.35);animation:aviso-in .18s ease both}
.campana-pop .pop-tit{display:flex;justify-content:space-between;align-items:center;padding:.35rem .5rem .55rem;
  font-weight:700;font-size:.9rem}
.campana-pop .pop-tit button{background:none;color:var(--muted);font-size:.78rem}
.campana-pop .aviso{padding:.7rem 2rem .7rem .8rem;margin-bottom:.4rem;animation:none}
.campana-pop .aviso-ico{width:30px;height:30px;font-size:.95rem}
.campana-pop .vacio{padding:1.4rem .5rem;text-align:center;color:var(--muted);font-size:.87rem}

/* --- Mini-gráfica de 7 días en "Ingresos de hoy" --- */
.spark{display:block;width:100%;height:34px;margin-top:.55rem;overflow:visible}
.spark .area{fill:url(#spark-grad)}
.spark .linea{fill:none;stroke:var(--ok);stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.spark .punto{fill:var(--ok);stroke:var(--panel);stroke-width:2;vector-effect:non-scaling-stroke}
.spark-leyenda{margin-top:.2rem}
.spark-leyenda .sube{color:var(--ok);font-weight:600}
.spark-leyenda .baja{color:var(--bad);font-weight:600}

/* --- Esqueletos de carga (en vez de "Cargando…") --- */
.esq{height:14px;margin:.55rem 0;border-radius:6px;
  background:linear-gradient(90deg,var(--line) 25%,color-mix(in srgb,var(--line) 45%,var(--panel)) 50%,var(--line) 75%);
  background-size:200% 100%;animation:esq 1.3s ease-in-out infinite}
.esq.corto{width:60%}
@keyframes esq{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.esq{animation:none}}

/* --- Paleta de comandos --- */
.cmdk-fondo{position:fixed;inset:0;z-index:90;background:rgba(15,23,42,.45);backdrop-filter:blur(3px);
  display:flex;justify-content:center;align-items:flex-start;padding:12vh 12px 12px}
.cmdk{width:min(620px,100%);background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 30px 80px -20px rgba(16,24,40,.5);overflow:hidden;animation:aviso-in .16s ease both}
.cmdk-input{display:flex;align-items:center;gap:.6rem;padding:.9rem 1rem;border-bottom:1px solid var(--line)}
.cmdk-input input{flex:1;border:0 !important;outline:0;background:transparent !important;font-size:1.02rem;color:var(--ink);padding:0}
.cmdk-lista{max-height:min(420px,55vh);overflow:auto;padding:.4rem}
.cmdk-grupo{padding:.55rem .6rem .25rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.cmdk-item{display:flex;align-items:center;gap:.7rem;width:100%;padding:.55rem .6rem;border-radius:9px;
  background:transparent;color:var(--ink);text-align:left;font-size:.92rem}
.cmdk-item .ic{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--bg);font-size:.95rem}
.cmdk-item .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-item .dt{color:var(--muted);font-size:.8rem;white-space:nowrap}
.cmdk-item.activo{background:color-mix(in srgb,var(--teal) 12%,transparent)}
.cmdk-item.activo .ic{background:var(--panel)}
.cmdk-vacio{padding:2rem 1rem;text-align:center;color:var(--muted);font-size:.9rem}
.cmdk-pie{display:flex;gap:1rem;padding:.55rem 1rem;border-top:1px solid var(--line);font-size:.75rem;color:var(--muted)}
.cmdk-pie kbd{margin-right:.2rem}
@media (max-width:760px){.cmdk-pie{display:none}}
/* En celular la campana no está en la orilla (a su derecha van tema, usuario y
 * Salir): anclada a ella, la ventanita se salía 100 px por la izquierda. Aquí se
 * fija a la pantalla, con 12 px de margen a cada lado. */
@media (max-width:760px){
  .campana-pop{position:fixed;left:12px;right:12px;top:62px;width:auto;max-height:calc(100vh - 80px)}
}
/* Barra en celular: "● en línea" queda solo en el punto (el color ya dice el
 * estado) para que quepa "Salir". */
@media (max-width:760px){
  #estado-red{display:inline-block;font-size:0;padding:.25rem .4rem}
  #estado-red::first-letter{font-size:.85rem}
  .topbar .estado{gap:.35rem}
}
@media (max-width:760px){
  .topbar{padding:.55rem .7rem}
  #btn-tema{display:none}   /* sigue a mano en el buscador: "Cambiar modo claro / oscuro" */
}