/* ==========================================================================
   Almacén del Barrio — estilos propios de la SPA
   (los tokens y componentes compartidos viven en assets/base.css)
   ========================================================================== */

:root {
  /* barra de los días anteriores en el gráfico de Inicio (pizarra intermedio) */
  --grafico-barra: #48606F;
}

/* ================================ LOGIN ================================= */

.login {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 520px at 50% -10%, #2C4150 0%, transparent 62%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 9px),
    var(--pizarra);
}

.login__card {
  width: min(392px, 100%);
  padding: 30px 30px 24px;
  border-radius: var(--r-xl);
  background: var(--crema-2);
  box-shadow: var(--sombra-4);
  border: 1px solid rgba(255, 255, 255, .12);
  animation: ab-login 320ms cubic-bezier(.22, .9, .3, 1);
}

@keyframes ab-login {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
}

.login__marca { display: flex; align-items: center; gap: 12px; }

.iso-ab {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--ladrillo);
  color: #FFF6F3;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--sombra-2);
}

.login__wordmark {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--pizarra);
  text-transform: uppercase;
}
.login__wordmark span {
  display: block;
  font-family: var(--f-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--tinta-3);
}

.login__titulo { margin-top: 22px; font-family: var(--f-titulo); font-weight: 600; font-size: 22px; }
.login__sub { margin-bottom: 20px; font-size: 13.5px; color: var(--tinta-2); }
.login__switch { margin: 2px 0 18px; }
.login__pie {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
  text-align: center;
  font-size: 12px;
  color: var(--tinta-3);
  letter-spacing: .02em;
}

/* ============================== APP SHELL =============================== */

.app { display: flex; align-items: flex-start; min-height: 100vh; }

.principal { flex: 1; min-width: 0; }
.principal:focus { outline: none; }

.pagina {
  width: min(1160px, 100%);
  margin-inline: auto;
  padding: 24px 28px 44px;
}

.cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-5);
  flex-wrap: wrap;
  margin-bottom: var(--e-6);
}
.cab__fecha {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.cab h1 { margin-top: 4px; }
.cab__sub { margin-top: 4px; font-size: 14px; color: var(--tinta-2); }
.cab__acciones { display: flex; align-items: center; gap: 10px; }

.side__pie__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 11px;
}
.side__pie__fila .side__version { margin-top: 0; }
.side__salir {
  font-size: 12px;
  font-weight: 700;
  color: rgba(220, 227, 231, .55);
  padding: 3px 6px;
  border-radius: var(--r-xs);
  transition: color var(--t), background var(--t);
}
.side__salir:hover { color: #fff; background: var(--pizarra-cla); }

/* Barra superior (solo mobile) */
.topbar { display: none; }

/* ================================ INICIO ================================ */

.tablero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--e-5);
  align-items: start;
}

.grafico__caja { padding: 6px 4px 0; }
.grafico svg { width: 100%; height: auto; overflow: visible; }
.grafico__leyenda {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 13px 0;
  font-size: 12px;
  color: var(--tinta-2);
}
.grafico__leyenda i {
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 6px;
  border-radius: 3px;
  vertical-align: -1px;
}

.accesos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); }

.lista { display: flex; flex-direction: column; }
.lista__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 17px;
  border-bottom: 1px solid var(--linea-2);
  transition: background var(--t);
}
.lista__item:last-child { border-bottom: 0; }
.lista__item:hover { background: var(--crema-3); }
.lista__ppal { min-width: 0; flex: 1; }
.lista__titulo { font-weight: 700; font-size: 14px; }
.lista__meta { font-size: 12.5px; color: var(--tinta-3); }
.lista__der { text-align: right; white-space: nowrap; }
.lista__monto { font-weight: 700; font-variant-numeric: tabular-nums; }

.stock-item__foto { width: 38px; height: 38px; flex: none; border-radius: var(--r-xs); }
.stock-item .tile-inicial { width: 38px; font-size: 15px; border-radius: var(--r-xs); }

/* ============================ PUNTO DE VENTA ============================ */

.pos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--carrito-w);
  grid-template-rows: 100vh;
  height: 100vh;
  overflow: hidden;
}

/* min-height: 0 — sin esto la columna no se encoge a la fila de 100vh y la
   grilla queda cortada, sin scroll posible (se veían 8 de 37 productos). */
.pos__izq { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }

.pos__cab {
  padding: 14px 20px 11px;
  background: var(--crema-2);
  border-bottom: 1px solid var(--linea);
  box-shadow: 0 1px 0 rgba(34, 51, 63, .03);
}
.pos__fila { display: flex; align-items: center; gap: 10px; }
.pos__fila .buscador { flex: 1; min-width: 0; }
.pos__fila .buscador .input { padding-right: 118px; }

.btn-escanear {
  --btn-bg: var(--pizarra);
  --btn-fg: #EEF3F5;
  --btn-bd: var(--pizarra);
  min-height: 44px;
  padding-right: 12px;
}
.btn-escanear:hover { --btn-bg: var(--pizarra-osc); --btn-bd: var(--pizarra-osc); }
.btn-escanear kbd {
  margin-left: 2px;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .13);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}

.pos__hint { margin-top: 9px; }

.pos__chips { padding: 9px 20px 0; background: var(--crema-2); border-bottom: 1px solid var(--linea); }

/* Las 8 categorías no entraban en una fila y la mitad quedaba fuera de vista
   sin ninguna señal (la barra de scroll está oculta y con mouse no hay gesto). */
@media (min-width: 1024px) {
  .pos__chips .chips { flex-wrap: wrap; overflow-x: visible; }
}
@media (max-width: 1023px) {
  .pos__chips .chips {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 38px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 38px), transparent);
  }
}

.pos__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 15px 20px 26px; }

.grilla-prod {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
}

.prod {
  display: flex;
  flex-direction: column;
  padding: 9px 9px 11px;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: var(--blanco);
  text-align: left;
  box-shadow: var(--sombra-1);
  transition: transform var(--t-rapida), box-shadow var(--t), border-color var(--t);
}
.prod:hover { transform: translateY(-2px); box-shadow: var(--sombra-3); border-color: #D9CDB8; }
.prod:active { transform: translateY(0) scale(.995); }

.prod__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 9px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--crema-3);
}
.prod .tile-inicial { margin-bottom: 9px; font-size: 30px; }

.prod__nombre {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.28;
  min-height: 2.56em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod__cod { margin-top: 3px; font-size: 11px; }
.prod__pie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 9px;
}
.prod__precio {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}
.prod.is-sin-stock { opacity: .55; }
.prod.is-sin-stock:hover { transform: none; box-shadow: var(--sombra-1); }

/* Overlay del escaneo simulado */
.escaneo {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: rgba(24, 38, 47, .5);
  backdrop-filter: blur(1.5px);
  animation: ab-fade 140ms ease;
}
@keyframes ab-fade { from { opacity: 0; } }

.escaneo__caja {
  position: relative;
  width: min(320px, 76%);
  padding: 26px 22px 22px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--sombra-4);
  text-align: center;
  overflow: hidden;
}
.escaneo__ventana {
  position: relative;
  height: 74px;
  margin-bottom: 14px;
  border-radius: var(--r-sm);
  background:
    repeating-linear-gradient(90deg, var(--pizarra) 0 3px, transparent 3px 6px,
      var(--pizarra) 6px 7px, transparent 7px 12px, var(--pizarra) 12px 14px, transparent 14px 17px);
  opacity: .78;
  overflow: hidden;
}
.escaneo__laser {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--error);
  box-shadow: 0 0 10px 2px rgba(192, 57, 43, .6);
  animation: ab-laser .9s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
@keyframes ab-laser { from { top: 4px; } to { top: 68px; } }
.escaneo__txt {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pizarra);
}
.escaneo__txt::after {
  content: '';
  animation: ab-puntos 1s steps(4, end) infinite;
}
@keyframes ab-puntos {
  0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; }
}

/* ============================== CARRITO ================================= */

.carrito {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-width: 0;
  background: var(--blanco);
  border-left: 1px solid var(--linea);
  box-shadow: -8px 0 26px rgba(34, 51, 63, .05);
}

.carrito__cab {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 14px 12px;
  border-bottom: 1px solid var(--linea);
  background: var(--crema-2);
}
.carrito__titulo { font-family: var(--f-titulo); font-weight: 600; font-size: 17px; }

.carrito__lineas { flex: 1; min-height: 76px; overflow-y: auto; padding: 4px 0; }

.linea {
  display: flex;
  gap: 10px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--linea-2);
  animation: ab-linea 200ms cubic-bezier(.22, .9, .3, 1);
}
@keyframes ab-linea { from { opacity: 0; transform: translateX(12px); } }
.linea:last-child { border-bottom: 0; }
.linea__foto { width: 42px; height: 42px; flex: none; border-radius: var(--r-xs); object-fit: cover; background: var(--crema-3); }
.linea .tile-inicial { width: 42px; flex: none; font-size: 17px; border-radius: var(--r-xs); }
.linea__ppal { flex: 1; min-width: 0; }
.linea__nombre { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.linea__unit { margin-top: 2px; font-size: 12px; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.linea__fila { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.linea__sub { margin-left: auto; font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.linea__kg {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-xs);
  background: var(--ladrillo-suave);
  color: var(--ladrillo-osc);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.linea__quitar { width: 28px; height: 28px; }
.linea__quitar svg { width: 15px; height: 15px; }

/* El pie ya no scrollea entero: sólo la parte de totales/medios. El botón
   Cobrar queda SIEMPRE a la vista (antes se iba fuera de pantalla). */
.carrito__pie {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 72vh;
  border-top: 1px solid var(--linea);
  background: var(--crema-2);
}

.carrito__totales {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px 4px;
}

.carrito__cobrar {
  flex: none;
  padding: 4px 14px 14px;
  background: var(--crema-2);
  border-top: 1px solid var(--linea-2);
}
.carrito__motivo {
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-2);
  text-align: center;
}

.tot-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  color: var(--tinta-2);
  padding: 2px 0;
}
.tot-fila b { font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.tot-fila--desc b { color: var(--ladrillo); }

.tot-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin: 8px 0 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--linea);
}
.tot-total span {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 16px;
  color: var(--tinta-2);
}

.desc-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tinta-2);
  padding: 3px 0;
  transition: color var(--t);
}
.desc-link:hover { color: var(--ladrillo); }
.desc-caja { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; }
.desc-caja .input-money { flex: 1; }
.desc-caja .input { min-height: 38px; }

.medios-titulo { margin: 10px 0 7px; }
.medios-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.medio-btn span { line-height: 1.15; font-size: 11.5px; letter-spacing: 0; }

.mixto-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pizarra);
  transition: color var(--t);
}
.mixto-link:hover { color: var(--ladrillo); }
.mixto-link.is-activo { color: var(--ladrillo); }

.mixto {
  margin-top: 8px;
  padding: 11px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--blanco);
}
.mixto__fila { display: flex; align-items: center; gap: 8px; }
.mixto__fila + .mixto__fila { margin-top: 8px; }
.mixto__label { font-size: 12px; font-weight: 700; color: var(--tinta-2); width: 78px; flex: none; }
.mixto__fila .input, .mixto__fila .select { min-height: 38px; }
.mixto__estado { margin-top: 9px; font-size: 12.5px; font-weight: 600; }
.mixto__estado.is-ok { color: var(--exito); }
.mixto__estado.is-error { color: var(--error); }

.vuelto { margin-top: 10px; }
.vuelto__fila { display: flex; align-items: center; gap: 9px; }
.vuelto__fila .input-money { flex: 1; }
.vuelto__fila .campo__label { margin: 0; white-space: nowrap; }
.vuelto__res {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  background: var(--exito-bg);
  color: var(--exito);
  font-weight: 700;
  font-size: 13.5px;
}
.vuelto__res b { font-family: var(--f-titulo); font-size: 20px; font-variant-numeric: tabular-nums; }
.vuelto__res.is-falta { background: var(--error-bg); color: var(--error); }
.vuelto__rapidos { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.vuelto__rapidos button {
  padding: 4px 10px;
  border: 1px solid var(--linea);
  border-radius: var(--r-pill);
  background: var(--blanco);
  font-size: 12px;
  font-weight: 700;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.vuelto__rapidos button:hover { background: var(--pago-efectivo-bg); color: var(--pago-efectivo); border-color: #C9E0D3; }

.btn-cobrar { margin-top: 12px; }
.btn-cobrar small {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .78;
}
.btn-cobrar b { font-size: 22px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

.carrito__vacio { padding: 40px 22px; }

/* ============================= MODAL PESO =============================== */

.peso__precio {
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: var(--crema-3);
  border: 1px solid var(--linea-2);
  font-size: 13.5px;
  color: var(--tinta-2);
  margin-bottom: 14px;
}
.peso__precio b { color: var(--tinta); font-weight: 700; font-variant-numeric: tabular-nums; }
.peso__campo { margin-bottom: 10px; }
.peso__rapidos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.peso__rapidos button {
  min-height: 40px;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--blanco);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pizarra);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--sombra-1);
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t-rapida);
}
.peso__rapidos button:hover {
  background: var(--ladrillo-suave);
  border-color: #E4CCC4;
  color: var(--ladrillo-osc);
  transform: translateY(-1px);
}
.peso__preview {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--pizarra);
  color: #EEF2F4;
  font-size: 13.5px;
  font-weight: 600;
}
.peso__preview b {
  font-family: var(--f-titulo);
  font-size: 25px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ============================ MODAL TICKET ============================== */

.modal--ticket { width: min(392px, calc(100vw - 32px)); }
.modal--ticket .ticket { margin: 2px auto 16px; }
.modal__exito__check--copia { background: var(--linea-2); color: var(--pizarra); }

/* ============================== PRODUCTOS =============================== */

.filtros {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--e-4);
}
.filtros .buscador { flex: 1; min-width: 220px; }
.filtros .select { width: auto; min-width: 190px; }

.tabla-prod .col-foto { width: 52px; }
.tabla-prod .col-cod { width: 156px; }
.tabla-prod .col-cat { width: 168px; }
.tabla-prod .col-precio { width: 132px; }
.tabla-prod .col-stock { width: 156px; }
.foto-mini { width: 40px; height: 40px; border-radius: var(--r-xs); object-fit: cover; background: var(--crema-3); }
.tabla-prod .tile-inicial { width: 40px; font-size: 16px; border-radius: var(--r-xs); }
.prod-nombre { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.prod-marca { font-size: 12px; color: var(--tinta-3); }
.cel-edit { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.cel-edit__pre { font-size: 13px; color: var(--tinta-3); font-weight: 700; }
.cel-stock { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.cel-stock .inline-edit { max-width: 82px; }

.carga__contador {
  flex: 1;
  align-self: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-3);
}
#modalCarga .modal__pie .btn { flex: none; }
.cat-campo { width: 176px; flex: none; }

/* ============================ CIERRE DE CAJA ============================ */

.cierre-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }

.cierre-form { display: grid; grid-template-columns: 180px 180px minmax(0, 1fr); gap: var(--e-4); align-items: start; }
.cierre-form .campo { margin-bottom: 0; }
.cierre-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea-2);
}

.tabla-cierres td.medio-col, .tabla-cierres th.medio-col {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tabla-cierres td:first-child, .tabla-cierres td:nth-child(2), .tabla-cierres td:nth-child(3) { white-space: nowrap; }
.tabla-cierres .m-efectivo { color: var(--pago-efectivo); }
.tabla-cierres .m-tarjeta { color: var(--pago-tarjeta); }
.tabla-cierres .m-debito { color: var(--pago-debito); }
.tabla-cierres .m-transferencia { color: var(--pago-transferencia); }
.tabla-cierres .m-qr { color: var(--aviso-txt, #8A5D12); }
.tabla-cierres .cero { color: var(--tinta-3); font-weight: 400; }
.tabla-cierres .notas { color: var(--tinta-2); font-size: 13px; max-width: 260px; }

.confirma__resumen {
  padding: 13px 15px;
  border-radius: var(--r-sm);
  background: var(--crema-3);
  border: 1px solid var(--linea);
  margin: 12px 0;
}
.confirma__resumen .tot-fila { font-size: 14px; }

/* ================================ VENTAS ================================ */

.tabla-ventas .col-hora { width: 96px; }
.tabla-ventas .col-medio { width: 190px; }
.tabla-ventas .col-total { width: 140px; }
.tabla-ventas .col-chev { width: 44px; }
.chev { transition: transform var(--t); color: var(--tinta-3); }
.chev svg { width: 17px; height: 17px; }
tr.is-abierta .chev { transform: rotate(180deg); color: var(--ladrillo); }

.detalle__lineas { width: 100%; font-size: 13px; }
.detalle__lineas td { padding: 4px 0; }
.detalle__lineas .der { text-align: right; font-variant-numeric: tabular-nums; }
.detalle__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px dashed var(--linea);
}
.detalle__pagos { display: flex; gap: 7px; flex-wrap: wrap; }

/* Barra fija del POS en el celular: el carrito queda abajo de toda la grilla,
   así que el total y el acceso al ticket viajan siempre a la vista. */
.pos-barra { display: none; }

/* ============================= AJUSTES FINOS ============================ */

a.btn:hover, a.btn-acceso:hover, a.side__link:hover { text-decoration: none; }
.badge svg { width: 13px; height: 13px; }
.desc-link svg, .mixto-link svg { width: 14px; height: 14px; }
.btn-cobrar > span { display: block; text-align: center; line-height: 1.15; }
.tabla-ventas tr.fila-detalle { cursor: default; }
.tabla-ventas tr.fila-detalle:hover { background: var(--crema-2); }
.seccion__titulo .segmentado { flex: none; }
.cab__acciones .segmentado { flex: none; }

/* =============================== RESPONSIVE ============================= */

@media (max-width: 1180px) {
  .tablero { grid-template-columns: minmax(0, 1fr); }
  .cierre-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cierre-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  :root { --carrito-w: 340px; }
  .accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .app { display: block; }

  .side {
    position: sticky;
    top: 0;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--pizarra-osc);
  }
  .side__marca { padding: 0; border-bottom: 0; flex: none; }
  .side__wordmark { display: none; }
  .side__nav {
    flex-direction: row;
    padding: 0;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .side__nav::-webkit-scrollbar { display: none; }
  .side__grupo { display: none; }
  .side__link { padding: 9px 11px; white-space: nowrap; }
  .side__link span { display: none; }
  .side__link.is-activo span { display: inline; }
  .side__link__contador { display: none; }
  .side__pie {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border-top: 0;
    background: transparent;
    margin-left: auto;
    flex: none;
  }
  /* El turno se esconde, pero "Cerrar sesión" NO: en el celular era la única
     manera de salir de la sesión y quedaba oculta. */
  .side__turno__txt { display: none; }
  .side__pie__fila { gap: 6px; margin-top: 0; }
  .side__version { display: none; }
  .side__salir { color: rgba(220, 227, 231, .75); white-space: nowrap; }

  .pagina { padding: 18px 16px 40px; }

  .pos { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; height: auto; overflow: visible; }
  .pos__izq { min-height: 62vh; padding-bottom: 62px; }
  .pos__scroll { overflow: visible; }
  /* el padding de abajo deja pasar la barra fija sin tapar el botón Cobrar */
  .carrito { height: auto; padding-bottom: 62px; border-left: 0; border-top: 1px solid var(--linea); box-shadow: none; }
  .carrito__lineas { max-height: 46vh; }
  .carrito__pie { max-height: none; }
  .escaneo { position: fixed; z-index: 850; }

  .pos-barra {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 9px 16px;
    border-top: 1px solid var(--pizarra-osc);
    background: var(--pizarra);
    color: #EEF3F5;
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: 0 -6px 20px rgba(34, 51, 63, .18);
  }
  .pos-barra__txt { font-variant-numeric: tabular-nums; }
  .pos-barra__txt b { font-size: 15.5px; }
  .pos-barra__cta {
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .14);
    font-size: 12.5px;
  }
}

@media (max-width: 620px) {
  .cierre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cierre-form { grid-template-columns: minmax(0, 1fr); }
  .medios-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grilla-prod { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .pos__fila { flex-wrap: wrap; }
  .pos__fila .buscador { flex: 1 1 100%; }
  .btn-escanear { flex: 1; }
}

/* ========================== PANTALLAS TÁCTILES ==========================
   Estos overrides van al final a propósito: base.css ya sube stepper, chips y
   botones de icono, pero los tamaños de acá lo pisaban por orden de archivo. */

@media (pointer: coarse) {
  .linea__quitar { width: 44px; height: 44px; }
  .linea__quitar svg { width: 18px; height: 18px; }
  .vuelto__rapidos button { min-height: 40px; padding: 8px 14px; }
  .peso__rapidos button { min-height: 52px; }
  .desc-link, .mixto-link { min-height: 40px; align-items: center; }
  .segmentado__op { padding: 11px 16px; }
  .side__salir { min-height: 40px; padding: 8px 10px; }
}