/* Kelbo Market — diseño táctil primero: objetivos de toque >= 48px, texto grande en caja, alto contraste. */
:root{
  --brand:#1d4ed8; --brand-dark:#14246b; --brand-soft:#e0eaff; --accent:#f59e0b; --accent-soft:#fef3c7;
  --bg:#f3f6fb; --card:#ffffff; --ink:#111827; --ink-soft:#4b5563; --ink-mute:#6b7280;
  --border:#dde4f0; --danger:#dc2626; --danger-soft:#fee2e2; --warn:#b45309; --warn-soft:#fef3c7; --info:#2563eb; --info-soft:#dbeafe;
  --sobre-suave:var(--brand-dark); --brand-link:var(--brand); --radius:14px; --radius-sm:10px; --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --shadow-lg:0 24px 60px rgba(0,0,0,.25); --toque:52px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --bg:#0b1220; --card:#121b30; --ink:#eaf0fb; --ink-soft:#a4b1c9; --ink-mute:#8896b2; --border:#25324f;
    --sobre-suave:#bcd2ff; --danger:#f87171; --warn:#fbbf24; --brand-link:#7ab0ff; --brand-soft:#16264d; --accent-soft:#3a2d0c; --danger-soft:#3b1414; --warn-soft:#3a2d0c; --info-soft:#14223d;
  }
}
:root[data-tema="oscuro"]{
  --bg:#0b1220; --card:#121b30; --ink:#eaf0fb; --ink-soft:#a4b1c9; --ink-mute:#8896b2; --border:#25324f;
  --sobre-suave:#bcd2ff; --danger:#f87171; --warn:#fbbf24; --brand-link:#7ab0ff; --brand-soft:#16264d; --accent-soft:#3a2d0c; --danger-soft:#3b1414; --warn-soft:#3a2d0c; --info-soft:#14223d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
.oculto{display:none!important}
h1,h2,h3{margin:0;line-height:1.2}
.num{font-variant-numeric:tabular-nums}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--card);font-weight:600;transition:transform .06s,background .15s;user-select:none}
.btn:active{transform:scale(.97)}
.btn svg{width:22px;height:22px;flex-shrink:0}
a.btn{text-decoration:none;color:inherit}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primario{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primario:hover{background:var(--brand-dark)}
.btn-acento{background:var(--accent);border-color:var(--accent);color:#1f1300}
.btn-peligro{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-suave{background:var(--brand-soft);border-color:transparent;color:var(--sobre-suave)}
:root[data-tema="oscuro"] .btn-suave{color:#86efac}
.btn-grande{min-height:64px;font-size:20px;padding:0 24px;border-radius:var(--radius)}
.btn-icono{width:44px;padding:0}
.btn-bloque{width:100%}

/* ---------- Formularios ---------- */
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.campo label{font-size:13px;font-weight:600;color:var(--ink-soft)}
.input,select.input,textarea.input{min-height:46px;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  background:var(--card);width:100%;outline:none}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.fila{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.fila > .campo{flex:1;min-width:140px}
.check{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--brand)}

/* ---------- Estructura ---------- */
#app{display:flex;height:100%}
.nav{width:92px;background:var(--brand-dark);color:#dbe7ff;display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:4px;flex-shrink:0;overflow-y:auto}
.nav .logo{width:48px;height:48px;border-radius:14px;background:var(--accent);color:#1f1300;font-weight:800;font-size:22px;display:grid;place-items:center;margin-bottom:10px}
.nav button{width:80px;min-height:64px;border:0;border-radius:12px;background:transparent;color:inherit;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;font-size:11.5px;font-weight:600}
.nav button svg{width:24px;height:24px}
.nav button.activo{background:rgba(255,255,255,.14);color:#fff}
.nav-pie{margin-top:auto;position:sticky;bottom:-10px;padding-bottom:10px;z-index:2;display:flex;flex-direction:column;gap:4px;padding-top:6px;background:var(--brand-dark);box-shadow:0 -10px 10px -4px var(--brand-dark)}
.red-estado{width:80px;border-radius:12px;padding:6px 4px;text-align:center;font-size:12px;font-weight:800;background:var(--accent);color:#1f1300;margin-bottom:6px;line-height:1.2}
.red-estado.sin-red{background:var(--danger);color:#fff;animation:late 1.6s infinite}
.red-estado small{display:block;font-weight:600;font-size:10.5px}
@keyframes late{50%{opacity:.65}}
.aviso-offline{background:var(--danger-soft);color:var(--danger);padding:10px 14px;border-radius:12px;font-weight:700;margin-bottom:12px}
main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.barra{display:flex;align-items:center;gap:12px;padding:10px 18px;background:var(--card);border-bottom:1px solid var(--border);min-height:60px}
.barra h1{font-size:19px}
.barra .espacio{flex:1}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;font-size:12.5px;font-weight:600;background:var(--bg);border:1px solid var(--border)}
.chip.ok{background:var(--brand-soft);color:var(--sobre-suave);border-color:transparent}
.chip.alerta{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.chip.peligro{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.contenido{flex:1;overflow:auto;padding:18px}
.tarjeta{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.grid-kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.kpi .titulo{font-size:13px;color:var(--ink-soft);font-weight:600}
.kpi .valor{font-size:26px;font-weight:800;margin-top:4px}
.kpi .delta{font-size:12.5px;font-weight:600;margin-top:2px}
.delta.sube{color:var(--brand)} .delta.baja{color:var(--danger)}
.pestanas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.pestanas button{min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--border);background:var(--card);font-weight:600}
.pestanas button.activa{background:var(--ink);color:var(--card);border-color:var(--ink)}

/* ---------- Tablas ---------- */
.tabla-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
table.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);padding:10px 12px;background:var(--bg);position:sticky;top:0}
.tabla td{padding:12px;border-top:1px solid var(--border)}
.tabla tr.clic{cursor:pointer}
.tabla tr.clic:hover td{background:var(--bg)}
.der{text-align:right}
.vacio{padding:40px;text-align:center;color:var(--ink-mute)}

/* ---------- Modal ---------- */
.fondo-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px;animation:aparece .12s}
.modal{background:var(--card);border-radius:20px;box-shadow:var(--shadow-lg);width:min(560px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column}
.modal.ancho{width:min(920px,100%)}
.modal header{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border)}
.modal header h2{font-size:18px;flex:1}
.modal .cuerpo{padding:18px;overflow:auto}
.modal footer{display:flex;gap:10px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--border);flex-wrap:wrap}
@keyframes aparece{from{opacity:0}to{opacity:1}}

/* ---------- Toast ---------- */
#toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--ink);color:var(--card);padding:12px 18px;border-radius:12px;font-weight:600;box-shadow:var(--shadow-lg);animation:aparece .15s}
.toast.error{background:var(--danger);color:#fff}
.toast.ok{background:var(--brand);color:#fff}

/* ---------- Teclado numérico ---------- */
.teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.teclado button{min-height:62px;font-size:24px;font-weight:700;border-radius:14px;border:1px solid var(--border);background:var(--bg)}
.teclado button:active{background:var(--brand-soft)}
.pantalla-num{font-size:34px;font-weight:800;text-align:right;padding:12px 16px;border-radius:14px;background:var(--bg);margin-bottom:10px;min-height:64px;word-break:break-all}

/* ---------- Login ---------- */
.login{min-height:100%;width:100%;display:grid;place-items:center;padding:20px;background:linear-gradient(160deg,rgba(8,16,48,.25),rgba(8,16,48,.45)),url('/static/assets/login-fondo.jpg') center/cover no-repeat,linear-gradient(150deg,#0b1230,#14246b)}
.login .tarjeta{width:min(420px,100%);padding:26px;border-radius:24px}
.login .marca{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.login .marca .logo{width:52px;height:52px;border-radius:16px;background:var(--accent);display:grid;place-items:center;font-weight:800;font-size:24px;color:#1f1300}
.pin-puntos{display:flex;justify-content:center;gap:14px;margin:14px 0 18px}
.pin-puntos span{width:18px;height:18px;border-radius:50%;border:2px solid var(--ink-mute)}
.pin-puntos span.lleno{background:var(--brand);border-color:var(--brand)}

/* ================= POS ================= */
.pos{display:grid;grid-template-columns:1fr 410px;height:100%;min-height:0}
.pos-izq{display:flex;flex-direction:column;min-height:0;min-width:0}
.pos-herr{display:flex;gap:10px;padding:12px 14px;background:var(--card);border-bottom:1px solid var(--border);align-items:center}
.buscador{flex:1;position:relative}
.buscador input{width:100%;min-height:54px;font-size:18px;padding:0 16px 0 48px;border-radius:14px;border:2px solid var(--border);background:var(--bg);outline:none}
.buscador input:focus{border-color:var(--brand);background:var(--card)}
.buscador svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:22px;height:22px;color:var(--ink-mute)}
.vistas{display:inline-flex;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card)}
.vistas button{border:0;background:none;min-width:54px;min-height:54px;display:grid;place-items:center;color:var(--ink-soft)}
.vistas button+button{border-left:1px solid var(--border)}
.vistas button[aria-pressed="true"]{background:var(--brand-soft);color:var(--sobre-suave)}
.vistas svg{width:24px;height:24px}
.categorias{display:flex;gap:8px;padding:10px 14px;overflow-x:auto;scrollbar-width:none;background:var(--card);border-bottom:1px solid var(--border)}
.categorias::-webkit-scrollbar{display:none}
.categorias button{flex-shrink:0;min-height:48px;padding:0 16px;border-radius:12px;border:1.5px solid var(--border);background:var(--card);font-weight:700;
  display:flex;align-items:center;gap:8px;white-space:nowrap}
.categorias button.activa{background:var(--c,var(--brand));border-color:var(--c,var(--brand));color:#fff}
.productos{flex:1;overflow:auto;padding:14px;display:grid;gap:10px;align-content:start;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.prod{position:relative;border:1px solid var(--border);border-radius:14px;background:var(--card);padding:12px;text-align:left;min-height:118px;
  display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow);border-top:5px solid var(--c,var(--border))}
.prod:active{transform:scale(.97);background:var(--brand-soft)}
.prod .nombre{font-weight:700;font-size:14.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.prod .precio{margin-top:auto;font-size:18px;font-weight:800}
.prod .meta{font-size:12px;color:var(--ink-soft);display:flex;gap:6px;flex-wrap:wrap}
.prod .img{height:84px;border-radius:10px;background:var(--bg) center/contain no-repeat;margin:-2px -2px 2px}
.prod.agotado{opacity:.6}
.etq{font-size:11px;font-weight:700;padding:2px 7px;border-radius:99px;background:var(--bg)}
.etq.peso{background:var(--info-soft);color:var(--info)}
.etq.mayor{background:var(--danger-soft);color:var(--danger)}
.etq.bajo{background:var(--warn-soft);color:var(--warn)}
/* Vista lista (supermercado: escáner + teclado) */
.productos.lista{grid-template-columns:1fr;gap:6px}
.productos.lista .prod{flex-direction:row;align-items:center;min-height:62px;border-top-width:1px;border-left:5px solid var(--c,var(--border))}
.productos.lista .prod .nombre{flex:1;-webkit-line-clamp:1}
.productos.lista .prod .precio{margin:0;min-width:110px;text-align:right}
/* Vista rápida (tienda/fruver: favoritos + teclado PLU) */
.rapida{flex:1;display:grid;grid-template-columns:1fr 340px;min-height:0}
.rapida .productos{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.rapida .plu{border-left:1px solid var(--border);background:var(--card);padding:14px;display:flex;flex-direction:column;gap:10px}

/* Carrito */
.carrito{display:flex;flex-direction:column;background:var(--card);border-left:1px solid var(--border);min-height:0}
.carrito-cab{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border)}
.carrito-cab h2{font-size:17px;flex:1}
.lineas{flex:1;overflow:auto}
.linea{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer}
.linea:active,.linea.sel{background:var(--brand-soft)}
.linea .n{font-weight:700;font-size:14.5px}
.linea .t{font-weight:800;font-size:16px;text-align:right}
.linea .d{font-size:13px;color:var(--ink-soft)}
.linea .promo{font-size:12px;color:var(--brand);font-weight:700}
.linea.nueva{animation:resalta .6s}
@keyframes resalta{from{background:var(--accent-soft)}to{background:transparent}}
.cant-ctrl{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.cant-ctrl button{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--bg);font-size:20px;font-weight:700}
.totales{padding:12px 14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:4px;font-size:14px}
.totales .r{display:flex;justify-content:space-between;color:var(--ink-soft)}
.totales .total{display:flex;justify-content:space-between;font-size:26px;font-weight:800;color:var(--ink);margin-top:4px}
.acciones-carrito{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 14px 10px}
.acciones-carrito .btn{min-height:52px;flex-direction:column;gap:2px;font-size:12px;padding:0 4px}
.acciones-carrito svg{width:20px;height:20px}
.cobrar{margin:0 14px 14px;min-height:72px;font-size:22px;border-radius:16px}
.carrito .cliente-sel{margin:10px 14px 0;padding:8px 12px;border-radius:10px;background:var(--info-soft);color:var(--info);font-weight:600;font-size:13.5px;display:flex;justify-content:space-between;align-items:center}
.barra-movil{display:none}

/* Cobro */
.cobro{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cobro .total-grande{font-size:40px;font-weight:800;text-align:center;padding:8px 0}
.metodos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.metodos button{min-height:58px;border-radius:12px;border:1.5px solid var(--border);background:var(--card);font-weight:700;font-size:13.5px}
.metodos button.activo{border-color:var(--brand);background:var(--brand-soft);color:var(--sobre-suave)}
.billetes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.billetes button{min-height:52px;border-radius:12px;border:1px solid var(--border);background:var(--accent-soft);font-weight:800}
.cambio{font-size:28px;font-weight:800;color:var(--brand);text-align:center;padding:8px;border-radius:12px;background:var(--brand-soft)}
.pagos-lista .p{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:10px;background:var(--bg);margin-bottom:6px;font-weight:600}

/* Gráficas simples */
.barras{display:flex;align-items:flex-end;gap:4px;height:180px;padding-top:10px}
.barras .b{flex:1;background:var(--brand);border-radius:6px 6px 0 0;min-height:2px;position:relative}
.barras .b:hover{background:var(--accent)}
.ejes{display:flex;gap:4px;font-size:10.5px;color:var(--ink-mute)}
.ejes span{flex:1;text-align:center;overflow:hidden}
.hbar{display:grid;grid-template-columns:140px 1fr 110px;gap:10px;align-items:center;margin-bottom:8px;font-size:13.5px}
.hbar .pista{height:14px;background:var(--bg);border-radius:99px;overflow:hidden}
.hbar .pista div{height:100%;background:var(--brand);border-radius:99px}
.alerta-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--bg);margin-bottom:8px;cursor:pointer}
.alerta-item .n{font-size:22px;font-weight:800;min-width:44px;text-align:center}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tres-col{display:grid;grid-template-columns:2fr 1fr;gap:14px}

/* Tirilla (solo impresión) */
#tirilla{display:none}
@media print{
  body *{visibility:hidden}
  #tirilla,#tirilla *{visibility:visible}
  #tirilla{display:block;position:absolute;left:0;top:0;width:72mm;font:12px/1.35 'Courier New',monospace;color:#000}
  @page{size:80mm auto;margin:3mm}
}
.tir-c{text-align:center} .tir-r{display:flex;justify-content:space-between} .tir-hr{border-top:1px dashed #000;margin:4px 0}

/* ---------- Responsivo ---------- */
@media (max-width:1100px){ .pos{grid-template-columns:1fr 360px} .rapida{grid-template-columns:1fr 290px} }
@media (max-width:820px){
  #app{flex-direction:column-reverse}
  .nav{width:100%;flex-direction:row;padding:4px 6px;overflow-x:auto;height:68px;flex-shrink:0}
  .nav .logo{display:none}
  .nav button{min-width:72px;min-height:58px}
  .nav-pie{margin-top:0;margin-left:auto;flex-direction:row;position:static;box-shadow:none;padding-top:0}
  .red-estado{width:auto;min-width:64px;margin:0;align-self:center}
  .pos{grid-template-columns:1fr}
  .carrito{position:fixed;inset:0 0 68px 0;z-index:30;transform:translateY(calc(100% + 80px));visibility:hidden;transition:transform .2s,visibility .2s;border-left:0}
  .pos.carrito-abierto .carrito{transform:none;visibility:visible}
  .pos-herr .vistas button{min-width:46px}
  .barra-movil{display:flex;position:fixed;left:10px;right:10px;bottom:78px;z-index:25}
  .rapida{grid-template-columns:1fr}
  .rapida .plu{display:none}
  .cobro,.dos-col,.tres-col{grid-template-columns:1fr}
  .contenido{padding:12px}
  .hbar{grid-template-columns:100px 1fr 90px}
}

/* ================= Lote 3 ================= */
/* Escáner con cámara */
.escaner-capa{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:90;display:flex;align-items:center;justify-content:center;padding:12px}
.escaner-caja{background:var(--card);border-radius:20px;padding:16px;width:min(520px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:10px}
.escaner-caja h3{margin:0}
.escaner-marco{position:relative;background:#000;border-radius:14px;overflow:hidden;aspect-ratio:4/3}
.escaner-marco video{width:100%;height:100%;object-fit:cover}
.escaner-guia{position:absolute;left:12%;right:12%;top:35%;bottom:35%;border:3px solid #22c55e;border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.25)}
.escaner-estado{font-weight:600;min-height:22px}
.escaner-ultimos{list-style:none;margin:0;padding:0;max-height:110px;overflow:auto;font-size:13.5px}
.escaner-ultimos li{padding:5px 0;border-bottom:1px solid var(--border)}

/* Miniaturas y fotos */
.mini{width:44px;height:44px;border-radius:10px;background:var(--bg) center/cover no-repeat;flex-shrink:0;border:1px solid var(--border)}
.mini.vacia{display:grid;place-items:center;color:var(--ink-mute);font-size:18px}
.linea.con-foto{grid-template-columns:auto 1fr auto;column-gap:10px}
.linea.con-foto .mini{grid-row:1 / span 3;width:48px;height:48px}
.linea.con-foto>.n,.linea.con-foto>.d,.linea.con-foto>.promo{grid-column:2}
.linea.con-foto>.t{grid-column:3;grid-row:1}
.linea.con-foto>.cant-ctrl{grid-column:3;grid-row:2 / span 2}
.productos.lista .prod .mini{margin-right:4px}
.foto-edicion{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;margin-bottom:12px}
.foto-edicion .vista{width:150px;height:150px;border-radius:14px;background:var(--bg) center/contain no-repeat;border:2px dashed var(--border);display:grid;place-items:center;color:var(--ink-mute);text-align:center;font-size:13px}
.foto-edicion .vista.con{border-style:solid}

/* Códigos de barras como fichas */
.fichas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.ficha{display:inline-flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;border-radius:99px;background:var(--brand-soft);color:var(--sobre-suave);font-weight:700;font-size:13.5px}
:root[data-tema="oscuro"] .ficha{color:#86efac}
.ficha button{border:0;background:rgba(0,0,0,.12);width:24px;height:24px;border-radius:50%;line-height:1;color:inherit}

/* Precios */
.precios-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.calc-precios{margin-top:10px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.calc-precios .fila-calc{display:grid;grid-template-columns:1fr 110px 130px 70px;gap:8px;align-items:center;padding:8px 12px;border-top:1px solid var(--border)}
.calc-precios .cab{background:var(--bg);font-size:12px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;border-top:0}
.calc-precios .est{font-weight:800;color:var(--brand);text-align:right}
.sedes-precio{background:var(--bg);border-radius:12px;padding:10px 12px;margin-top:10px}
.categoria-sel{display:flex;gap:8px}
.categoria-sel select{flex:1}

/* Acciones del carrito: se reparten el ancho aunque haya 4, 5 o 6 */
.acciones-carrito{grid-template-columns:repeat(auto-fit,minmax(64px,1fr))}
.vendedor-sel{margin:8px 14px 0;padding:8px 12px;border-radius:10px;background:var(--accent-soft);color:var(--warn);font-weight:700;font-size:13.5px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}

/* Estados de domicilio y cotización */
.tablero-dom{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;align-items:start}
.col-dom{background:var(--bg);border-radius:var(--radius);padding:10px;min-height:120px}
.col-dom h3{font-size:14px;margin:0 0 8px;display:flex;justify-content:space-between}
.tarjeta-dom{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:8px;box-shadow:var(--shadow)}
.tarjeta-dom .dir{font-weight:700}
.tarjeta-dom .pie{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.tarjeta-dom .pie .btn{min-height:40px;padding:0 12px;font-size:13px}
.modulos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:4px 16px}
.tipo-tarjeta{border:2px solid var(--border);border-radius:14px;padding:10px 12px;cursor:pointer;background:var(--card);text-align:left}
.tipo-tarjeta.activo{border-color:var(--brand);background:var(--brand-soft)}
.tipo-tarjeta b{display:block}
.tipo-tarjeta small{color:var(--ink-soft)}
.tipos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-bottom:14px}
.clase-A{background:#dcfce7;color:#14532d}.clase-B{background:#fef3c7;color:#92400e}.clase-C{background:#fee2e2;color:#991b1b}
@media (max-width:820px){.foto-edicion{grid-template-columns:1fr}.precios-grid{grid-template-columns:1fr}.calc-precios .fila-calc{grid-template-columns:1fr 80px 100px 60px}}

/* Suscripción */
.enlaces-login{display:flex;gap:10px;justify-content:center;margin:14px 0 0;font-size:13.5px;color:var(--ink-soft)}
.plan-chip{display:block;width:80px;border-radius:12px;padding:6px 4px;text-align:center;font-size:11.5px;font-weight:700;line-height:1.25;text-decoration:none;
  background:var(--accent-soft);color:var(--warn);margin-bottom:6px}
.plan-chip b{font-size:14px;color:#fff;display:block;margin-top:1px}
.plan-chip{background:rgba(245,158,11,.22);color:#fde68a}.plan-chip.mal{background:var(--danger);color:#fff}
@media (max-width:820px){.plan-chip{width:auto;min-width:64px;margin:0;align-self:center}}

.sede-chip{display:block;width:80px;border:0;border-radius:12px;padding:6px 4px;margin-bottom:6px;font-size:11.5px;font-weight:700;line-height:1.2;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;overflow:hidden;text-overflow:ellipsis}
.sede-chip:hover{background:rgba(255,255,255,.24)}
@media (max-width:820px){.sede-chip{width:auto;max-width:96px;min-width:64px;margin:0;align-self:center}}

/* Accesibilidad: anillo de foco visible para quien usa teclado o lector de códigos (WCAG 2.4.7) y respeto a «reducir movimiento» (2.3.3). */
:focus-visible{outline:3px solid var(--info);outline-offset:2px}
.nav :focus-visible,.sede-chip:focus-visible{outline-color:#fff}
.icono-ok{width:44px;height:44px;color:var(--brand);display:block;margin:0 auto 6px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Con muchos módulos activos el menú cabe mejor en pantallas bajas */
@media (min-width:821px) and (max-height:900px){.nav button{min-height:54px;font-size:11.5px}.nav button svg{width:22px;height:22px}}

/* Logo K de Kelbo: va en un cuadro blanco redondeado (como Kelbo Pharmacy) para verse igual en tema claro y oscuro. */
.logo{background:#fff !important;overflow:hidden}
.logo img{width:100%;height:100%;object-fit:contain;padding:4px;display:block}
.login .marca{flex-direction:column;text-align:center;gap:8px}.login .marca .logo{width:112px;height:112px;border-radius:26px;flex:none}
.login .marca .logo img{padding:2px}
.nav .logo{width:54px;height:54px}.nav .logo img{padding:2px}
.enlaces-login a{color:var(--brand-link,var(--brand));text-decoration:none;font-weight:600}.enlaces-login a:hover{text-decoration:underline}
.pin-puntos{min-height:18px}
.login-pie{text-align:center;margin:14px 0 0;font-size:12px;color:var(--ink-mute)}
.nav>*{flex-shrink:0}

/* ---------- Login: se ajusta a pantallas bajas (portátiles pequeños) ---------- */
.login{position:fixed;inset:0;display:flex;overflow:auto;padding:clamp(10px,2.5vh,24px)}
.login .tarjeta{margin:auto;width:min(380px,100%);padding:clamp(14px,2.6vh,26px) clamp(16px,2.4vh,26px);border-radius:22px;
  border:2px solid rgba(34,211,238,.75);box-shadow:0 0 0 6px rgba(34,211,238,.16),0 24px 70px rgba(2,8,30,.65)}
.login .marca{margin-bottom:clamp(6px,1.4vh,16px);gap:4px}
.login .marca .logo{width:clamp(60px,13vh,104px);height:clamp(60px,13vh,104px);border-radius:22px}
.login .marca h1{font-size:clamp(18px,3vh,22px)!important}
.login .campo{margin-bottom:clamp(6px,1.4vh,14px)}
.login .pin-puntos{margin:clamp(6px,1.4vh,14px) 0 clamp(8px,1.6vh,18px)}
.login .teclado{gap:clamp(5px,1vh,8px)}
.login .teclado button{min-height:clamp(42px,7.4vh,62px);font-size:clamp(20px,3.2vh,24px)}
.login .enlaces-login{margin-top:clamp(8px,1.6vh,14px)}
.login-pie{margin-top:clamp(4px,1vh,12px)}

/* ---------- Auditoría UX (2026-10-18) ---------- */
.nav::-webkit-scrollbar{width:6px}.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border-radius:6px}
.nav{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
a.btn-primario,a.btn-peligro{color:#fff}a.btn-acento{color:#1f1300}
.chip svg{width:16px;height:16px}
.cant-ctrl button{width:46px;height:46px}
.barra{flex-wrap:wrap}
@media (max-width:820px){.barra .btn{padding:0 12px}.productos{padding-bottom:90px}}
@media (max-height:700px){.cobro .teclado button{min-height:46px}.billetes button{min-height:44px}}
.nav button span{text-align:center;line-height:1.15}
.acciones button{min-height:44px}
.chip.alerta,.chip.peligro{font-weight:700}
.entrada a{color:var(--brand-link,var(--brand))}
@media (max-width:820px){.pestanas{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.pestanas button{flex:none}}
@media (max-width:820px){.nav{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}}
.ayuda{position:relative;width:22px;height:22px;min-height:0;padding:0;margin-left:6px;border-radius:50%;border:1px solid var(--brand);background:var(--brand-soft);color:var(--sobre-suave);font-weight:800;font-size:13px;line-height:1;vertical-align:middle;cursor:pointer}
.ayuda::after{content:"";position:absolute;inset:-11px}  /* el área de toque llega a 44 px */
.franja-prueba{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:6px 12px;background:repeating-linear-gradient(135deg,#f59e0b 0 14px,#fbbf24 14px 28px);color:#1f1300;font-size:14px}
.franja-prueba .btn{min-height:34px;padding:0 12px;background:#fff}
.franja-prueba + .pos{height:calc(100% - 46px)}
@media (max-width:820px){.franja-prueba + .pos{height:calc(100% - 78px)}}