/* ============================================================================
   AutoParts — SISTEMA DE APP (shell nativo + estados + componentes)
   Carga DESPUÉS de tokens.css y de los estilos base de index.html: sobreescribe
   solo apariencia, nunca estructura ni contratos (los data-action y los ids se
   conservan tal cual).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1) APP SHELL: header que colapsa, contenido con safe areas y tab bar inferior
   --------------------------------------------------------------------------- */
body {
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}

.nativeHeader {
  /* El título grande COLAPSA al hacer scroll (patrón iOS). No se fija: la barra
     que queda pegada arriba es la de búsqueda, que es lo que el mostrador usa. */
  position: relative;
  z-index: 20;
  padding: calc(var(--safe-top) + var(--s5)) var(--s4) var(--s3);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  transition: padding var(--dur) var(--ease);
}
.nativeHeader h2, .nativeHeader .hTitle {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -.02em;
  color: var(--text);
  transition: font-size var(--dur) var(--ease);
}
.nativeHeader.small { padding-top: calc(var(--safe-top) + var(--s2)); padding-bottom: var(--s2); }
.nativeHeader.small h2, .nativeHeader.small .hTitle { font-size: var(--fs-lg); }

/* la app del cliente lleva tab bar: el contenido no queda debajo */
#appView { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--s6)); }

/* ---------------------------------------------------------------------------
   2) TAB BAR inferior (Buscar · Reponer · Órdenes · Tienda)
   --------------------------------------------------------------------------- */
.tabBar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: var(--s1) calc(var(--s2) + var(--safe-right)) calc(var(--s1) + var(--safe-bottom)) calc(var(--s2) + var(--safe-left));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line);
}
.tabItem {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: var(--s1) 2px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font: var(--fw-medium) var(--fs-xs)/1.2 var(--font);
  border-radius: var(--r-md);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  touch-action: manipulation;
}
.tabItem svg { width: 24px; height: 24px; display: block; }
.tabItem.on { color: var(--brand-text); background: color-mix(in srgb, var(--brand-text) 12%, transparent); }
.tabItem.on::after { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--senal); }
.tabItem:active { transform: scale(.96); }
body.sin-tabbar .tabBar { display: none; }

/* ---------------------------------------------------------------------------
   3) BOTTOM SHEETS (nunca alert()/confirm(): todo es una hoja deslizante)
   --------------------------------------------------------------------------- */
.sheetBackdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.sheetBackdrop.open { opacity: 1; visibility: visible; }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 61;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--e3);
  transform: translateY(102%);
  transition: transform var(--dur-slow) var(--ease);
  padding-bottom: calc(var(--s4) + var(--safe-bottom));
  will-change: transform;
}
.sheet.open { transform: translateY(0); }
.sheetHandle {
  width: 44px; height: 5px; border-radius: var(--r-full);
  background: var(--line);
  margin: var(--s3) auto var(--s2);
  flex: 0 0 auto;
}
.sheetHead {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) var(--s4) var(--s3);
  border-bottom: 1px solid var(--line);
}
.sheetHead h3 { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.sheetBody { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--s4); }
.sheetFoot {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  display: flex; gap: var(--s2); justify-content: flex-end;
}
@media (min-width: 720px) {
  .sheet { left: auto; right: var(--s6); bottom: var(--s6); width: 520px; border-radius: var(--r-xl); }
}

/* ---------------------------------------------------------------------------
   4) TOASTS con DESHACER
   --------------------------------------------------------------------------- */
.toastHost {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--s3));
  z-index: 70;
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  pointer-events: none;
  padding: 0 var(--s4);
}
body.sin-tabbar .toastHost { bottom: calc(var(--safe-bottom) + var(--s4)); }
.toast {
  pointer-events: auto;
  width: 100%; max-width: 520px;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-lg);
  background: var(--surface-3);
  color: var(--text);
  box-shadow: var(--e3);
  font-size: var(--fs-sm);
  transform: translateY(8px);
  opacity: 0;
  animation: toastIn var(--dur) var(--ease) forwards;
}
.toast.saliendo { animation: toastOut var(--dur) var(--ease) forwards; }
.toast.ok { background: var(--ok); color: #fff; }
.toast.error { background: var(--danger); color: #fff; }
.toast .toastMsg { flex: 1 1 auto; }
.toast button {
  min-height: 36px;
  border: 1px solid currentColor;
  background: transparent; color: inherit;
  border-radius: var(--r-full);
  padding: 0 var(--s3);
  font-weight: var(--fw-semibold);
}
@keyframes toastIn { to { transform: translateY(0); opacity: 1; } }
@keyframes toastOut { to { transform: translateY(8px); opacity: 0; } }

/* ---------------------------------------------------------------------------
   5) ESTADOS: skeletons, vacíos con acción, errores humanos
   --------------------------------------------------------------------------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--r-md);
  color: transparent !important;
  min-height: 16px;
}
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.skCard { height: 96px; margin-bottom: var(--s3); }
.skLine { height: 14px; margin: 8px 0; }
.skLine.corto { width: 45%; }

.emptyState {
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  padding: var(--s10) var(--s6);
  text-align: center;
  color: var(--text-2);
}
.emptyState .esIcon {
  width: 56px; height: 56px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--info-soft); color: var(--brand-primary);
}
.emptyState h3 { margin: 0; font-size: var(--fs-lg); color: var(--text); }
.emptyState p { margin: 0; font-size: var(--fs-md); max-width: 34ch; }

/* ---------------------------------------------------------------------------
   6) TARJETAS del mostrador (vista móvil) — jerarquía clara y tacto grande
   --------------------------------------------------------------------------- */
.tarjeta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--e1);
  padding: var(--s4);
  margin-bottom: var(--s3);
  min-height: 96px;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  cursor: pointer;
}
.tarjeta:active { transform: scale(.985); box-shadow: var(--e2); }
.tarjetaFila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.tarjetaCod {
  font: var(--fw-semibold) var(--fs-sm)/1.2 var(--font);
  color: var(--text-2); letter-spacing: .02em;
}
.tarjetaPrecio { font-size: var(--fs-2xl); font-weight: 800; color: var(--brand-text); font-variation-settings: "wdth" var(--ancho-titular); letter-spacing: -.01em; }
.tarjetaPrecio.apagado { color: var(--text-3); }
.tarjetaDesc { margin: var(--s2) 0 0; font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text); }
.tarjetaProv { margin: var(--s2) 0 0; font-size: var(--fs-sm); color: var(--text-2); }
.tarjetaMotivo { margin: var(--s1) 0 0; font-size: var(--fs-xs); color: var(--text-2); }
.tarjetaSinStock { opacity: .82; }
.stockOk { color: var(--ok); }
.stockNo { color: var(--danger); }

/* ---------------------------------------------------------------------------
   7) CABECERAS de la app: píldoras de estado (frescura, órdenes)
   --------------------------------------------------------------------------- */
.frescuraBar {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--e1);
  padding: var(--s3) var(--s4);
  margin: 0 var(--s3) var(--s3);
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  font-size: var(--fs-sm);
}
.frescuraBar .punto { color: var(--ok); }
.frescuraBar.desactualizado .punto { color: var(--warn); }

.searchBar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: var(--s3) var(--s3) var(--s2);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
#buscador {
  min-height: 48px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  padding: 0 var(--s8) 0 var(--s4);
  font-size: var(--fs-md);
  width: 100%;
  box-shadow: var(--e1);
}
.sbRow { position: relative; }
.sbBtn, .sbClear {
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2);
}

/* ---------------------------------------------------------------------------
   8) BOTONES y formularios (mínimo 44x44, radio consistente)
   --------------------------------------------------------------------------- */
button, .btnNew, .btnSec, .princ, .ok, .cancel, .danger {
  border-radius: var(--r-md);
  font-family: var(--font);
  font-weight: var(--fw-semibold);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.princ { background: var(--accion); color: var(--accion-texto); border: 0; }
.btnNew { background: var(--brand-primary); color: var(--brand-on-primary); }
button:active { transform: scale(.98); }
input, select, textarea {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  min-height: 44px;
  font-family: var(--font);
}

/* ---------------------------------------------------------------------------
   9) ICONOS de un set único (SVG inline, nunca emojis sueltos en acciones)
   --------------------------------------------------------------------------- */
.ico { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: -3px; }
.icoBtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
}

/* ---------------------------------------------------------------------------
   10) PANEL DE OPERADOR (reusa el sistema; se inyecta en la vista admin)
   --------------------------------------------------------------------------- */
.opWrap { padding: var(--s4); display: grid; gap: var(--s4); }
.opCard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--e1); padding: var(--s4);
}
.opCard h3 { margin: 0 0 var(--s2); font-size: var(--fs-lg); }
.opRow {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
}
.opRow:last-child { border-bottom: 0; }
.opProv { font-weight: var(--fw-semibold); }
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: var(--r-full); padding: 2px var(--s2);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.err { background: var(--danger-soft); color: var(--danger); }
.badge.info { background: var(--info-soft); color: var(--brand-text); }

/* ---------------------------------------------------------------------------
   11) ESCRITORIO: la tabla sigue siendo el patrón del panel del dueño
   --------------------------------------------------------------------------- */
@media (min-width: 720px) {
  #appView { padding-bottom: var(--s8); }
  .tarjeta { border-radius: var(--r-md); }
}

/* ---------------------------------------------------------------------------
   13) TEMA AUTORITATIVO
   ---------------------------------------------------------------------------
   El CSS base de index.html trae colores fijos (blanco #fff, gris #f4f6fb) y
   selectores más específicos que los de una hoja nueva. Para que el MODO OSCURO
   sea real (y no "parece"), el sistema de diseño manda acá con !important SOLO
   sobre superficies y texto: no cambia layout ni contratos.
   --------------------------------------------------------------------------- */
html body {
  background: var(--bg) !important;
  color: var(--text) !important;
}
body.offline, body.sinRed { background: var(--bg) !important; }

.appHeader, .nativeHeader {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--line);
}
.appHeader h1, .appHeader h2, .appHeader h3, .appHeader .hTitle,
.appHeader p, .appHeader .userInfo { color: var(--text) !important; }
.appHeader .userInfo, .appHeader .muted { color: var(--text-2) !important; }

.searchBar { background: var(--bg) !important; }
#buscador {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
/* Las tarjetas del mostrador: index.html las pinta con white fijo. */
.tarjeta, #tarjetas .tarjeta, #tarjetas article {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
}
.tarjetaDesc, #tarjetas .tarjetaDesc { color: var(--text) !important; }
.tarjetaProv, #tarjetas .tarjetaProv, .tarjetaMotivo { color: var(--text-2) !important; }
.tarjetaCod { color: var(--text-2) !important; }
.tarjetaPrecio { color: var(--brand-text) !important; }

.frescuraBar, .statsPV, .sbTip {
  background: var(--surface) !important;
  color: var(--text-2) !important;
  border-color: var(--line) !important;
}

/* Tabla (escritorio) y sus encabezados */
.tablaWrap { background: var(--surface) !important; }
table { background: var(--surface) !important; color: var(--text) !important; }
thead th, th {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
tbody td, td { color: var(--text) !important; border-color: var(--line) !important; }
tbody tr { background: var(--surface) !important; }
tbody tr:nth-child(even) { background: var(--surface-2) !important; }
.paginacion { background: var(--surface) !important; color: var(--text-2) !important; }
.paginacion input, .paginacion button { background: var(--surface-2) !important; color: var(--text) !important; }

/* Panel del cliente y modal del dueño */
#modal, #panelProv { background: var(--overlay) !important; }
.modalCard, .panelProvCard {
  background: var(--surface) !important;
  color: var(--text) !important;
}
.modalCard h3, .panelProvCard h3, .modalCard p, .panelProvCard p,
.modalCard td, .panelProvCard td, .modalCard li, .panelProvCard li,
.modalCard b, .panelProvCard b { color: var(--text) !important; }
.modalCard label, .panelProvCard label,
.modalCard .muted, .panelProvCard .muted { color: var(--text-2) !important; }
.modalCard input, .modalCard select,
.panelProvCard input, .panelProvCard select {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
.cardLogin, .cardLogin label { background: transparent !important; color: var(--text) !important; }
.cardLogin { background: var(--surface) !important; }
.cardLogin input { background: var(--surface-2) !important; color: var(--text) !important; }

/* Tarjetas del panel del dueño */
.cards .card, .cards > div, .adminWrap .card, #listaTiendas .card,
#kpis > div { background: var(--surface) !important; color: var(--text) !important; }

/* Formularios y filtros */
input, select, textarea, .filtros, .filtrosGrid {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
details.filtros, details.filtros summary { background: var(--surface) !important; color: var(--text) !important; }

#modal { background: var(--overlay); z-index: 80; }
#panelProv { background: var(--overlay); z-index: 81; }
.modalCard, .panelProvCard {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--e3);
}
.modalCard h3, .panelProvCard h3, #panelTitulo { color: var(--text); }
.modalCard label, .modalCard .muted { color: var(--text-2); }
.modalCard input, .modalCard select,
.panelProvCard input, .panelProvCard select {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--line);
}
.modalCard button, .panelProvCard button { min-height: 44px; }
.panelProvCard { padding-bottom: calc(var(--s5) + var(--safe-bottom)); }
@media (max-width: 719px) {
  #panelProv { align-items: flex-end; }
  .panelProvCard { border-radius: var(--r-xl) var(--r-xl) 0 0; }
  #modal { align-items: flex-end; padding: 0; }
  .modalCard {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-width: none;
    max-height: 92vh;
    padding-bottom: calc(var(--s6) + var(--safe-bottom));
  }
}

/* ===========================================================================
   FASE 1 — UX MÓVIL DE LA BÚSQUEDA
   Formato obligatorio del resultado, stepper de cantidad y PRONTO PAGO.
   =========================================================================== */
.tarjetaSec {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-2);
}
.tarjetaTotal {
  margin-top: 4px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--text);
}
.tarjetaPP { margin-top: 6px; font-size: 12.5px; }
.badgePP {
  display: inline-block;
  background: #E8F5E9;
  color: #1B5E20;
  border: 1px solid #A5D6A7;
  font-size: 11px;
  font-weight: var(--fw-bold);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .3px;
}
.totalLinea { font-weight: var(--fw-semibold); color: var(--text); }
.panelPP { margin-top: 8px; font-size: 13px; color: var(--text-2); }
.tablaDesglose td:first-child { color: var(--text-2); }
.tablaDesglose b { color: var(--text); }

/* 1.3 Cantidad por resultado: botones GRANDES (>=44 px) que no recargan nada */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.stepper .stBtn {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--brand-primary);
  font-size: 22px;
  font-weight: var(--fw-bold);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.stepper .stBtn:active { background: var(--surface-2); }
.stepper .stInp {
  width: 58px;
  height: 44px;
  min-height: 44px;
  text-align: center;
  font-size: 16px;
  font-weight: var(--fw-bold);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  -moz-appearance: textfield;
}
.stepper .stInp::-webkit-outer-spin-button,
.stepper .stInp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ===========================================================================
   FASE 3.3 — Etiqueta de ahorro del pronto pago
   =========================================================================== */
.tarjetaPP .muted { color: var(--text-2); }
.escSwitch { display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: var(--fw-semibold); }
.escSwitch input { width: 22px; height: 22px; }
.masResultados { display: flex; justify-content: center; padding: 12px; }
.masResultados[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   LISTAS DE PROVEEDORES (pestaña «Listas», static/listas.js)
   --------------------------------------------------------------------------- */
/* Aviso solo para el lector de pantalla: lo que dice ya está a la vista en la hoja. */
.lstVivo {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lstForm { display: grid; gap: var(--s3); }
.lstIntro { margin: 0; color: var(--text-2); font-size: var(--fs-md); line-height: 1.45; max-width: 46ch; }
.lstCampo { display: grid; gap: var(--s1); }
.lstCampo > span { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
.lstCampo input { width: 100%; padding: 0 var(--s3); font-size: var(--fs-lg); }
.lstCampo input[type="file"] { padding: var(--s3); font-size: var(--fs-md); }
.lstCampo input[aria-invalid="true"] { border-color: var(--danger); }
.lstAyuda { margin: calc(var(--s2) * -1) 0 0; font-size: var(--fs-sm); color: var(--text-3); }
.lstArchivoListo {
  display: flex; align-items: center; gap: var(--s2); padding: var(--s3);
  border: 1px dashed var(--line); border-radius: var(--r-md); font-size: var(--fs-md);
  overflow-wrap: anywhere;
}
.lstCheck { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--fs-md); color: var(--text-2); }
.lstCheck input { min-height: 0; width: 22px; height: 22px; margin-top: 1px; flex: 0 0 auto; }
.lstForm .princ, .lstAcciones .princ { min-height: 48px; font-size: var(--fs-lg); width: 100%; }
.lstAcciones { display: grid; gap: var(--s2); margin-top: var(--s4); }
.lstAcciones .btnSec { min-height: 44px; }
.lstHistorial { margin-top: var(--s6); }
.lstHistorial h4 { margin: 0 0 var(--s2); font-size: var(--fs-md); color: var(--text-2); font-weight: var(--fw-semibold); }
.lstLista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lstItem {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) 0; min-height: 56px; background: none; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; color: var(--text); text-align: left; cursor: pointer;
}
.lstItemTxt { display: grid; gap: 2px; min-width: 0; }
.lstItemTxt .muted { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.lstResumen { margin-bottom: var(--s3); }
.lstNumero { margin: 0; font-size: var(--fs-lg); }
.lstNumero .t-num { font-size: var(--fs-2xl); color: var(--text); margin-right: var(--s1); }
.lstNumero:focus { outline: none; }
.lstResumen .muted { margin: var(--s1) 0 0; font-size: var(--fs-sm); }
.lstAvisos {
  margin: 0 0 var(--s3); padding: var(--s3) var(--s4) var(--s3) var(--s8);
  background: var(--warn-soft); color: var(--text); border-radius: var(--r-md); font-size: var(--fs-sm);
}
.lstAvisos li + li { margin-top: var(--s1); }
.lstMapa { margin: 0 0 var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); }
.lstMapa summary { padding: var(--s3) var(--s4); cursor: pointer; font-weight: var(--fw-semibold); min-height: 44px; }
.lstMapaGrid { display: grid; gap: var(--s3); padding: 0 var(--s4) var(--s4); grid-template-columns: 1fr 1fr; }
.lstMapaGrid label { display: grid; gap: var(--s1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.lstMapaGrid select { width: 100%; padding: 0 var(--s2); font-size: var(--fs-md); }
.lstTabla { border: 1px solid var(--line); border-radius: var(--r-md); overflow-x: auto; }
.lstTabla table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.lstTabla th, .lstTabla td { padding: var(--s2) var(--s3); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.lstTabla thead th { background: var(--surface-2); font-weight: var(--fw-semibold); color: var(--text-2); }
.lstTabla tr:last-child td { border-bottom: 0; }
.lstTabla .num { text-align: right; white-space: nowrap; }
.lstCaption { caption-side: top; text-align: left; padding: var(--s2) var(--s3); color: var(--text-3); font-size: var(--fs-xs); }
.lstApl { display: block; font-size: var(--fs-xs); }
.lstEspera { display: grid; gap: var(--s2); margin: var(--s4) 0; }
.lstEsperaTxt { margin: 0; color: var(--text-2); font-size: var(--fs-md); text-align: center; }
.lstExito .esIcon { color: var(--ok); }
.lstItem:focus-visible, .lstMapa summary:focus-visible, .lstTabla:focus-visible {
  outline: 3px solid var(--brand-secondary); outline-offset: 2px;
}
@media (max-width: 360px) { .lstMapaGrid { grid-template-columns: 1fr; } }

/* Modo operador: la tienda elegida se lee en grande antes de cargar, para no equivocarse de cliente. */
.lstTienda { display: grid; gap: var(--s3); }
.lstCampo select { width: 100%; padding: 0 var(--s3); font-size: var(--fs-lg); }
.lstCampo select[aria-invalid="true"] { border-color: var(--danger); }
.lstTiendaElegida {
  position: relative; overflow: hidden; padding: calc(var(--s4) + 6px) var(--s4) var(--s4);
  border: 2px solid var(--text); border-radius: var(--r-lg); background: var(--surface);
}
.lstTiendaElegida::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--senal); }
.lstTiendaElegida p { margin: 0; }
.lstTiendaRotulo { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
.lstTiendaNombre {
  font-size: var(--fs-3xl); line-height: 1.05; font-weight: 800; letter-spacing: -.015em;
  font-variation-settings: "wdth" var(--ancho-titular); color: var(--text); overflow-wrap: anywhere;
  margin-top: var(--s1) !important; text-wrap: balance;
}
.lstTiendaDet { margin-top: var(--s1) !important; font-size: var(--fs-sm); color: var(--text-3); }
.lstTiendaVacia { font-size: var(--fs-md); color: var(--text-2); }
.lstDestino { margin-bottom: var(--s4); }

/* ---------------------------------------------------------------------------
   CUENTA: registro, suscripción y pagos (static/cuenta.js)
   --------------------------------------------------------------------------- */
.ctaVivo {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ctaForm { display: grid; gap: var(--s3); }
.ctaIntro { margin: 0; color: var(--text-2); font-size: var(--fs-md); line-height: 1.45; max-width: 46ch; }
.ctaCampo { display: grid; gap: var(--s1); min-width: 0; }
.ctaCampo > span { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
.ctaCampo input, .ctaCampo select { width: 100%; padding: 0 var(--s3); font-size: var(--fs-lg); }
.ctaCampo input[type="file"] { padding: var(--s3); font-size: var(--fs-md); }
.ctaCampo input[aria-invalid="true"] { border-color: var(--danger); }
.ctaAyuda { margin: calc(var(--s2) * -1) 0 0; font-size: var(--fs-sm); color: var(--text-3); }
.ctaNota { margin: 0; font-size: var(--fs-md); color: var(--text-2); line-height: 1.45; }
.ctaFila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.ctaForm .princ { min-height: 48px; font-size: var(--fs-lg); width: 100%; }
.ctaTrampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ctaSub { margin: var(--s5) 0 var(--s1); font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.ctaEstado {
  display: grid; gap: var(--s2); padding: var(--s4); border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid var(--line);
}
.ctaEstado-err { background: var(--danger-soft); border-color: transparent; }
.ctaEstado-warn { background: var(--warn-soft); border-color: transparent; }
.ctaEstado .badge { justify-self: start; }
.ctaDetalle { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); }
.ctaDetalle:focus { outline: none; }
.ctaEstado .muted { margin: 0; }
.ctaAviso { margin: var(--s3) 0 0; padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--info-soft); font-size: var(--fs-sm); }
.ctaCobro { margin: 0; display: grid; gap: var(--s2); }
.ctaCobro > div { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3); }
.ctaCobro dt { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
.ctaCobro dd { margin: var(--s1) 0 0; display: flex; gap: var(--s3); align-items: center; justify-content: space-between; }
.ctaCobro dd span { overflow-wrap: anywhere; }
.ctaCopiar { flex: 0 0 auto; min-height: 40px; }
.ctaHist { margin-top: var(--s6); }
.ctaHist h4 { margin: 0 0 var(--s2); font-size: var(--fs-md); color: var(--text-2); font-weight: var(--fw-semibold); }
.ctaPago { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.ctaCinta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  margin: 0 var(--s4) var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--info-soft); color: var(--text); font-size: var(--fs-sm);
}
.ctaCinta[data-tono="warn"] { background: var(--warn-soft); }
.ctaCinta[data-tono="err"] { background: var(--danger-soft); }
.ctaCinta p { margin: 0; }
.ctaCintaBtn {
  flex: 0 0 auto; min-height: 40px; padding: 0 var(--s4); border: 0;
  background: var(--brand-primary); color: var(--brand-on-primary);
}
.ctaPagoAdmin { display: grid !important; gap: var(--s1); }
.ctaPagoAdmin h4 { margin: 0; font-size: var(--fs-md); }
.ctaPagoAdmin .muted { margin: 0; font-size: var(--fs-sm); }
.ctaAcciones { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); align-items: flex-end; }
.ctaAcciones .princ, .ctaAcciones .btnSec { min-height: 44px; padding: 0 var(--s4); }
.ctaAcciones .ctaCampo { flex: 1 1 220px; }
.regAcceso { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); display: grid; gap: var(--s2); }
.regAcceso p { margin: 0; color: var(--text-2); font-size: var(--fs-md); }
.regAcceso .btnSec { min-height: 48px; font-size: var(--fs-md); width: 100%; }
@media (max-width: 360px) { .ctaFila { grid-template-columns: 1fr; } }

/* Marca en la entrada */
.marcaAcceso{letter-spacing:-.01em}
.marcaAcceso b{background:#F2B705;color:#14202B;padding:0 6px;border-radius:4px}

/* Estado vacío: búsqueda sin resultados vs. tienda sin listas todavía */
#sinResultados .srVacia{display:none}
#sinResultados[data-vacia="1"] .srBusqueda{display:none}
#sinResultados[data-vacia="1"] .srVacia{display:block}
#sinResultados .srSubir{margin-top:var(--s4);min-height:48px;padding:0 var(--s5);font-size:var(--fs-md)}

/* Tienda sin listas todavía: fuera las barras que aún no tienen nada que mostrar */
body.inventario-vacio .paginacion,
body.inventario-vacio #frescuraBar, body.inventario-vacio .frescuraBar,
body.inventario-vacio #statsLinea, body.inventario-vacio .statsPV { display: none !important; }
body.inventario-vacio #sinResultados { margin-top: var(--s4); }

/* ---------------------------------------------------------------------------
   AUDITORÍA DE DISEÑO (5-nov-2026): identidad única con la página de venta,
   mostrador despejado, accesibilidad de hojas y superficies del navegador.
   --------------------------------------------------------------------------- */
body { font-family: var(--font); }
#tiendaNombre, .sheetHead h3, .emptyState h3, .lstNumero, .ctaDetalle {
  font-variation-settings: "wdth" var(--ancho-titular); letter-spacing: -.01em;
}
#tiendaNombre { font-weight: 800; }
.tabItem { position: relative; }
::selection { background: var(--senal-suave); color: #14202B; }
input, textarea { caret-color: var(--senal); }
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
:focus-visible { outline: 3px solid var(--senal); outline-offset: 2px; }
.t-num, .tarjetaPrecio, .provPrecio, .panelPrecio { font-variant-numeric: tabular-nums; }

/* Mostrador: el buscador y los resultados primero */
.searchBar:has(#buscador:not(:placeholder-shown)) .sbTip { display: none; }
.statsPV #contadorResultados { display: none; }
.frescuraBar { padding: var(--s2) var(--s4) !important; font-size: var(--fs-sm); }
.frescuraBar .btnSec { min-height: 36px; padding: 0 var(--s3); font-size: var(--fs-sm); }
.btnInstalar { background: transparent !important; color: var(--text) !important; border: 1px solid var(--line) !important;
  display: inline-flex; align-items: center; gap: var(--s2); font-weight: var(--fw-semibold); }
.btnInstalar .ico { width: 18px; height: 18px; }

/* Hojas: botón de cerrar con una X y avisos arriba cuando hay una hoja abierta */
.sheetHead .sheetCerrar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-full);
  background: var(--surface-2); border: 0; color: var(--text); }
.sheetHead h3:focus { outline: none; }
body:has(.sheet.open) .toastHost { top: calc(var(--safe-top) + var(--s3)); bottom: auto; }

/* Entrada: el acceso del dueño solo con /?admin */
body:not(.modo-admin) .cardLogin .role { display: none; }
/* Paleta del estilo en línea antiguo (index.html) apuntando a los tokens de la marca */
:root { --azul: var(--brand-primary); --azul2: var(--brand-secondary); }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, tr:focus-visible { outline-color: var(--senal); }
body { color: var(--text); background: var(--bg); }

/* Segunda vuelta: cabecera, frescura en una línea, contador y motivo legibles en ambos modos */
.appHeader .btnCerrar { background: transparent !important; color: var(--text) !important; border: 1px solid var(--line) !important; }
.frescuraBar { background: transparent !important; border: 0 !important; box-shadow: none !important; margin: 0 var(--s3) !important; color: var(--text-2) !important; }
.frescuraBar .btnSec { background: transparent !important; border: 0 !important; color: var(--text) !important; text-decoration: underline; text-underline-offset: 3px; padding: 0 !important; min-height: 32px; }
.stepper .stBtn { color: var(--text); }
.tarjetaMotivo { background: var(--ok-soft) !important; color: var(--text) !important; border-radius: var(--r-sm); padding: var(--s1) var(--s2); }
.paginacion[hidden] { display: none !important; }
.lstTabla td:first-child { white-space: nowrap; }

/* Tercera vuelta: banda de búsqueda sin parches blancos,
   estado de frescura legible en modo oscuro */
.sbRow { position: relative; }
.searchBar .sbTip, .searchBar details.filtros, .searchBar details.filtros summary { background: transparent !important; }
.frescuraBar .alDia { color: var(--ok) !important; }
.frescuraBar .desactualizado { color: var(--warn) !important; }

/* Vista de computadora agrupada por pieza */
.tablaPiezas .filaPieza td { vertical-align: top; padding-top: var(--s3); padding-bottom: var(--s3); }
.tablaPiezas .fpCod { font-weight: var(--fw-semibold); white-space: nowrap; color: var(--text); }
.tablaPiezas .fpMotivo { display: inline-block; margin-top: var(--s1); font-size: var(--fs-sm); }
.tablaPiezas .precioCol { font-size: var(--fs-lg); color: var(--brand-text); }
.tablaPiezas .precioCol.apagado { color: var(--text-3); }
.tablaPiezas .fpOfertas { white-space: nowrap; color: var(--text-2); }
.tablaPiezas .fpVer { color: var(--text); text-decoration: underline; text-underline-offset: 3px; font-size: var(--fs-sm); }
.tablaPiezas .filaPieza:hover td, .tablaPiezas .filaPieza:focus-visible td { background: var(--surface-2) !important; }
.tablaPiezas .precioCol { display: block; line-height: 1.2; }
.tablaPiezas .stepper { display: flex; width: max-content; margin-top: var(--s2); }
.tablaOfertas th { white-space: nowrap; }
/* ---------------------------------------------------------------------------
   BLINDAJE (9-nov-2026): servicio pausado y listas que se envían por WhatsApp
   --------------------------------------------------------------------------- */
#pausaView { min-height: 100vh; min-height: 100dvh; place-items: center; background: var(--bg);
  padding: calc(var(--safe-top) + var(--s6)) var(--s4) calc(var(--safe-bottom) + var(--s6)); }
#pausaView.act { display: grid; }
.pausaCard {
  position: relative; overflow: hidden; width: 100%; max-width: 420px;
  display: grid; gap: var(--s3); text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--e2); padding: calc(var(--s8) + 6px) var(--s6) var(--s6);
}
.pausaCard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--senal); }
.pausaMarca { margin: 0 0 var(--s2); font-size: var(--fs-md); font-weight: 800; color: var(--text); }
.pausaIcono { justify-self: center; width: 64px; height: 64px; border-radius: var(--r-full);
  display: grid; place-items: center; background: var(--warn-soft); color: var(--text); }
.pausaIcono svg { width: 28px; height: 28px; }
#pausaTitulo { margin: var(--s2) 0 0; font-size: var(--fs-3xl); line-height: 1.05; font-weight: 800;
  letter-spacing: -.015em; font-variation-settings: "wdth" var(--ancho-titular); text-wrap: balance; color: var(--text); }
#pausaTitulo:focus { outline: none; }
.pausaTexto { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--text); }
.pausaMotivo { margin: 0 auto var(--s2); max-width: 34ch; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
.pausaCard .princ, .lstWhatsApp, #sinResultados .srSubir {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  text-decoration: none; border-radius: var(--r-md);
}
.pausaCard .princ { min-height: 52px; font-size: var(--fs-lg); }
.pausaCard .princ .ico { width: 20px; height: 20px; }
.pausaCard .btnSec { min-height: 48px; font-size: var(--fs-md); width: 100%;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.pausaSalir { min-height: 44px; background: none; border: 0; color: var(--text-2); font-size: var(--fs-sm);
  text-decoration: underline; text-underline-offset: 3px; }
.pausaCard [hidden] { display: none !important; }

.lstEnviar { display: grid; gap: var(--s3); }
.lstWhatsApp { min-height: 52px; font-size: var(--fs-lg); width: 100%; }
.lstEnviar .princ { min-height: 52px; font-size: var(--fs-lg); width: 100%; }
.lstEnviar .lstAyuda { margin: 0; }
.lstItemFijo { cursor: default; }
.ctaServicio { align-items: center; }
.ctaServicioAcc { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); flex-wrap: wrap; }
.ctaServicioAcc .princ, .ctaServicioAcc .btnSec { min-height: 40px; padding: 0 var(--s3); white-space: nowrap; }
.ctaServAyuda { margin: 0 0 var(--s2); font-size: var(--fs-sm); }
/* Panel del dueño: los botones principales de la barra (Cargar lista, Pagos, Nueva tienda) quedaban
   blancos sobre blanco porque «.tac button» del estilo base les ganaba a «.btnNew». */
.adminBar .tac .btnNew { background: var(--accion); color: var(--accion-texto); border: 0; }
/* ---------------------------------------------------------------------------
   AJUSTE DE PRECIO SUELTO (10-nov-2026): «Precio ajustado por usted» y ajustes vencidos
   --------------------------------------------------------------------------- */
.tagAjuste, .tagVencido {
  display: inline-block; margin-top: var(--s1); padding: 2px var(--s2);
  border-radius: var(--r-full); font-size: var(--fs-xs, 12px); font-weight: var(--fw-semibold);
  line-height: 1.5; white-space: nowrap;
}
.tagAjuste { background: var(--warn-soft); color: var(--warn); border: 1px solid currentColor; }
.tagVencido { background: var(--danger-soft); color: var(--danger); border: 1px solid currentColor; }
.tarjetaAjuste { margin: var(--s1) 0 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.ajustePanel { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.ajusteItem {
  display: grid; gap: var(--s2); margin: var(--s3) 0; padding: var(--s3) var(--s4);
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2);
}
.ajusteItem p { margin: 0; }
.ajusteVigente { border-left: 4px solid var(--warn); }
.ajusteVencido { border-left: 4px solid var(--danger); }
.ajusteAcciones { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ajusteAcciones button { min-height: 44px; padding: 0 var(--s4); }
.ajusteForm { margin-top: var(--s3); }
.ajusteForm summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  font-weight: var(--fw-semibold); color: var(--text); text-decoration: underline; text-underline-offset: 3px;
}
.ajusteForm summary:focus-visible, .ajusteEstado:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.ajusteForm form { display: grid; gap: var(--s2); margin-top: var(--s2); }
.ajusteForm input, .ajusteForm select { width: 100%; }
.ajusteForm input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.ajusteForm button[type="submit"] { min-height: 48px; margin-top: var(--s1); }
.ajusteEstado { margin: var(--s3) 0 0; min-height: 1.4em; font-weight: var(--fw-semibold); }
.ajusteEstado:empty { display: none; }
.panelProvCard .ajusteEstado.error { color: var(--danger) !important; }
/* Subtítulos del panel del repuesto: en modo oscuro quedaban oscuros sobre oscuro */
.panelProvCard .panelSub { color: var(--text) !important; }

/* ===========================================================================
   MOSTRADOR (10-nov-2026, auditoría de experiencia)
   Un resultado = una parada de tabulación. Tarjeta compacta (caben 4 por pantalla), panel con
   lista vertical de proveedores que no desborda en el teléfono, precio de venta a la vista y
   navegación superior en computadora.
   =========================================================================== */
.tiendaTitulo { margin: 0; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.01em; color: var(--text);
  font-variation-settings: "wdth" var(--ancho-titular); line-height: 1.15; overflow-wrap: break-word; }
.nativeHeader { padding-top: calc(var(--safe-top) + var(--s3)); padding-bottom: var(--s2); }
.nativeHeader.small .tiendaTitulo { font-size: var(--fs-lg); }
.appHeader .marcaCab { min-width: 0; }
.tiendaLogo { height: 36px; }

/* Buscador: borrar dentro del campo, ordenar con un selector y nada encima de los resultados */
.sbRow { display: flex; gap: var(--s2); align-items: center; }
.sbCampo { position: relative; flex: 1 1 auto; min-width: 0; }
#buscador { padding-right: 48px; }
#buscador::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.sbClear { position: absolute !important; right: 6px !important; left: auto !important; top: 50% !important;
  transform: translateY(-50%) !important; width: 36px !important; height: 36px !important; border: 0 !important;
  background: var(--surface-2) !important; color: var(--text) !important; }
.sbOrden { flex: 0 0 auto; min-height: 48px; max-width: 9.5rem; border-radius: var(--r-full); padding: 0 var(--s3);
  background: var(--surface); color: var(--text); border: 1px solid var(--line); font-size: var(--fs-sm); }
.sbBtn { width: 48px; height: 48px; flex: 0 0 auto; font-weight: 700; color: var(--text) !important; }
.sbTip { color: var(--text-2) !important; }

.fichaCarro { display: flex; align-items: center; gap: var(--s2); width: max-content; max-width: calc(100% - 2 * var(--s3));
  margin: var(--s1) var(--s3) 0; padding: var(--s1) var(--s1) var(--s1) var(--s3); border-radius: var(--r-full);
  background: var(--senal-suave); color: #14202B; font-size: var(--fs-sm); }
.fichaCarro[hidden] { display: none; }
.fichaQuitar { width: 36px; height: 36px; min-height: 36px; border-radius: var(--r-full); border: 0; background: rgba(20, 32, 43, .1);
  color: #14202B; display: grid; place-items: center; padding: 0; }
.avisoBusqueda { margin: var(--s2) var(--s3) 0; padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--warn-soft); color: var(--text); font-size: var(--fs-sm); line-height: 1.45; border-left: 4px solid var(--warn); }
.avisoBusqueda[hidden] { display: none; }

/* Semáforo de precios */
.frescuraBar .punto.verde { color: var(--ok) !important; }
.frescuraBar .punto.ambar { color: var(--warn) !important; }
.frescuraBar .punto.rojo { color: var(--danger) !important; }
.frescuraBar .punto.gris { color: var(--text-3) !important; }
.frescuraBar[data-tono="rojo"] #frescuraTexto { color: var(--danger) !important; font-weight: var(--fw-semibold); }
.frescuraBar[data-tono="ambar"] #frescuraTexto { color: var(--warn) !important; font-weight: var(--fw-semibold); }
.frescuraWhatsApp { color: var(--text); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px;
  min-height: 32px; display: inline-flex; align-items: center; }
.frescuraWhatsApp[hidden] { display: none; }

/* Tarjeta compacta: nombre, para qué carro, precio y proveedor, venta y segundo proveedor */
#tarjetas .tarjeta, .tarjeta { position: relative; min-height: 0; padding: var(--s3) var(--s4); margin-bottom: var(--s2);
  border-radius: var(--r-lg); overflow-wrap: break-word; }
.tarjetaTitulo { margin: 0; font-size: var(--fs-lg); line-height: 1.25; font-weight: 700; color: var(--text); }
.tarjetaBtn { all: unset; display: block; color: var(--text); cursor: pointer; }
.tarjetaBtn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tarjetaBtn:focus-visible { outline: none; }
.tarjeta:has(.tarjetaBtn:focus-visible) { outline: 3px solid var(--senal); outline-offset: 2px; }
.tarjetaCuerpo { pointer-events: none; }
.tarjetaPara { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.35; }
.tarjetaPara .tarjetaCod { font-weight: var(--fw-semibold); color: var(--text-2) !important; }
#tarjetas .tarjetaFila, .tarjetaFila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-top: var(--s2); flex-wrap: wrap; }
.tarjetaPrecio { font-size: var(--fs-2xl); line-height: 1; }
.tarjetaProv { margin: 0 !important; text-align: right; font-size: var(--fs-sm); color: var(--text-2) !important; min-width: 0; }
.tarjetaVenta { margin: var(--s1) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
.tarjetaSegundo { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-2); }
.tarjetaSinStock { opacity: 1; border-style: dashed; }
.tarjetaSinStock .tarjetaPrecio { color: var(--text-3) !important; }

/* Tabla de computadora: un botón por fila con el nombre completo para el lector */
.filaBtn { all: unset; cursor: pointer; font-weight: var(--fw-semibold); color: var(--text); text-decoration: underline;
  text-decoration-color: var(--line); text-underline-offset: 4px; }
.filaBtn:hover { text-decoration-color: currentColor; }
.filaBtn:focus-visible { outline: 3px solid var(--senal); outline-offset: 3px; border-radius: 4px; }
.fpDet { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--text-2); }
.tablaPiezas .filaPieza:hover td { background: var(--surface-2) !important; }
.best-tag { background: var(--ok) !important; color: #fff; }

/* Panel del repuesto: sin desbordes en el teléfono y contraste en ambos modos */
.panelProvCard { overflow-wrap: break-word !important; padding-bottom: 0 !important; }
.panelCabecera h3:focus { outline: none; }
.panelCabecera .codm { color: var(--text-2) !important; text-transform: none; letter-spacing: 0; }
.panelMejor { background: var(--surface-2) !important; border: 1px solid var(--line) !important; color: var(--text); }
.panelMejorRot { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.panelMejorProv { margin: 2px 0 0; font-size: var(--fs-md); font-weight: 700; color: var(--text); }
.panelPrecio { color: var(--brand-text) !important; }
.panelPrecio small { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-2); }
.panelAhorro { margin: var(--s1) 0 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ok); }
.panelMotivo { color: var(--text-2) !important; }
.panelVenta { margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid var(--line); }
.panelVenta .panelSub { margin-top: 0 !important; }
.ventaPrecio { margin: 0; font-size: var(--fs-xl); font-weight: 800; color: var(--text); }
.ventaBs { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-2); margin-left: var(--s2); }
.provLista { list-style: none; margin: var(--s2) 0 0; padding: 0; border-top: 1px solid var(--line); }
.provItem { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.provFila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.provNombre { font-weight: var(--fw-semibold); color: var(--text); min-width: 0; }
.provNombre .badge { margin-left: var(--s1); vertical-align: 1px; }
.provPrecio { font-size: var(--fs-lg); font-weight: 800; color: var(--text); white-space: nowrap; }
.provMejor .provPrecio { color: var(--ok); }
.provDet { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-2); }
.provAgotado .provPrecio { color: var(--text-2); font-weight: var(--fw-semibold); }
.panelAcciones { position: sticky; bottom: 0; z-index: 2; margin: var(--s4) calc(var(--s4) * -1) 0 !important;
  padding: var(--s3) var(--s4) calc(var(--s3) + var(--safe-bottom)) !important; background: var(--surface);
  border-top: 1px solid var(--line); display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.panelAcciones label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.panelAcciones .stepper { margin: 0; }
.panelAcciones .btnOrden { flex: 1 1 10rem; min-height: 52px; font-size: var(--fs-md); background: var(--accion); color: var(--accion-texto); }

/* Estado vacío con salida y límite de búsquedas explicado en la lista */
.srAcciones { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin-top: var(--s4); }
.srAcciones .princ, .srAcciones .btnSec { min-height: 48px; display: inline-flex; align-items: center; padding: 0 var(--s4);
  text-decoration: none; border-radius: var(--r-md); }
.srAcciones [hidden] { display: none; }
#sinResultados .srLimite { display: none; }
#sinResultados[data-limite="1"] .srLimite { display: block; }
#sinResultados[data-limite="1"] .srBusqueda, #sinResultados[data-limite="1"] .srVacia { display: none; }
#sinResultados .srBusqueda p { margin: 0; }
.margenFila { display: flex; gap: var(--s2); align-items: center; }
.margenFila input { width: 6rem; min-height: 48px; font-size: var(--fs-lg); text-align: center; }
.margenFila .princ { min-height: 48px; padding: 0 var(--s4); }
.margenEstado { margin: var(--s2) 0 0; font-size: var(--fs-sm); color: var(--text); }
.margenEstado:empty { display: none; }
.salirConfirma p { margin: var(--s2) 0; }

/* Computadora: navegación arriba (Buscar · Reponer · Pedidos · Listas · Tienda), ancho máximo y texto de 16 px */
@media (min-width: 720px) {
  .tabBar { top: 0; bottom: auto; justify-content: center; gap: var(--s2); padding: var(--s1) var(--s4);
    border-top: 0; border-bottom: 1px solid var(--line); }
  .tabItem { flex: 0 0 auto; flex-direction: row; gap: var(--s2); padding: 0 var(--s4); font-size: var(--fs-md); min-height: 48px; }
  .tabItem.on::after { top: auto; bottom: 0; border-radius: 3px 3px 0 0; }
  body:not(.sin-tabbar) { padding-top: 58px; }
  body:not(.sin-tabbar) .searchBar { top: 58px; }
  #appView { font-size: 16px; }
  .contenidoTienda, #appView .appHeader { max-width: 1200px; margin-left: auto; margin-right: auto; }
  tbody td { font-size: 15px; }
  .tablaPiezas td:last-child, .tablaPiezas th:last-child { padding-right: var(--s5); }
}
#sinResultados, .empty { color: var(--text-2) !important; }
#sinResultados b { color: var(--text); }
.ahorro { color: var(--ok) !important; }
/* Afinado tras la revisión visual (10-nov-2026): tarjetas más compactas, frescura en una línea y
   panel legible en modo oscuro */
.statsPV { background: transparent !important; padding-top: var(--s2) !important; }
.frescuraBar { display: flex !important; flex-wrap: wrap; align-items: center; gap: 2px var(--s2); padding: var(--s1) var(--s3) !important; margin: 0 !important; line-height: 1.35; }
.frescuraBar .punto { flex: 0 0 auto; }
#frescuraTexto { flex: 1 1 12rem; min-width: 0; }
.tarjeta, #tarjetas .tarjeta { padding: var(--s3) var(--s4) var(--s3); }
.tarjetaTitulo { font-size: var(--fs-md); }
.tarjetaPrecio { font-size: var(--fs-xl); }
#tarjetas .tarjetaFila { margin-top: var(--s1); }
.tarjetaPara, .tarjetaVenta, .tarjetaSegundo, .tarjetaProv { font-size: var(--fs-sm); line-height: 1.3; }
@media (max-width: 719px) {
  .sbOrden { max-width: 7.6rem; font-size: var(--fs-xs); padding: 0 var(--s2); }
  .sbBtn { width: 44px; height: 44px; }
  .searchBar { padding-bottom: var(--s1) !important; }
  .sbTip { margin-top: var(--s1) !important; font-size: var(--fs-xs) !important; }
}
.panelCerrar { background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--line) !important; }
:root[data-theme="dark"] .panelPrecio { color: var(--text) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .panelPrecio { color: var(--text) !important; } }
.ajustePanel { border-top: 0 !important; margin-top: var(--s3) !important; }

/* ===========================================================================
   PEDIDO POR PROVEEDOR CON WHATSAPP (10-nov-2026)
   =========================================================================== */
.tabCuenta { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-full); background: var(--senal); color: #14202B; font-size: 12px; font-weight: 800;
  display: inline-grid; place-items: center; line-height: 1; }
.tabCuenta[hidden] { display: none; }
@media (min-width: 720px) { .tabCuenta { position: static; margin-left: 2px; } }
.pedIntro { margin: 0 0 var(--s3); color: var(--text); font-size: var(--fs-md); line-height: 1.45; }
.pedIntro:focus { outline: none; }
.pedNota { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-md); background: var(--ok-soft); color: var(--text); font-size: var(--fs-sm); }
.pedPiezas, .pedRenglones, .pedHistLista { list-style: none; margin: 0; padding: 0; }
.pedPieza { display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s3); align-items: center;
  padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.pedPiezaTxt { display: grid; gap: 2px; min-width: 0; }
.pedPiezaTxt .muted { font-size: var(--fs-sm); }
.pedPieza .stepper { margin: 0; }
.pedCant { display: inline-grid; place-items: center; min-width: 44px; font-weight: 700; }
.pedQuitar { grid-column: 1 / -1; justify-self: start; min-height: 40px; background: none; border: 0; padding: 0;
  color: var(--danger); text-decoration: underline; text-underline-offset: 3px; font-size: var(--fs-sm); }
.pedArmar { width: 100%; min-height: 52px; font-size: var(--fs-lg); margin-top: var(--s3); }
.pedEstado { margin: var(--s2) 0 0; font-size: var(--fs-sm); color: var(--text); }
.pedEstado:empty { display: none; }
.pedProv { margin: 0 0 var(--s3); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.pedProv h4 { margin: 0 0 var(--s2); font-size: var(--fs-lg); color: var(--text); }
.pedRenglones li { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s1) 0; font-size: var(--fs-sm); color: var(--text); }
.pedRenglones .muted { color: var(--text-2); }
.pedTotal { margin: var(--s2) 0 0; text-align: right; color: var(--text); }
.pedAviso { margin: var(--s2) 0 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--warn-soft); color: var(--text); font-size: var(--fs-sm); }
.pedAcciones { display: grid; gap: var(--s2); margin-top: var(--s3); }
.pedWhatsApp { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; border-radius: var(--r-md);
  text-decoration: none; font-weight: 700; text-align: center; padding: 0 var(--s4); }
.pedAcciones .btnSec { min-height: 44px; }
.pedSinTel { margin: 0; font-size: var(--fs-sm); }
.pedConfirma { display: grid; gap: var(--s2); padding: var(--s3); border-radius: var(--r-md); background: var(--surface-2); }
.pedConfirma[hidden] { display: none; }
.pedConfirma p { margin: 0; }
.pedConfirma button { min-height: 44px; }
.pedEnviado { margin: 0; font-weight: 700; color: var(--ok); }
.pedEnviado::before { content: "✓ "; }
.pedEnviado:focus { outline: none; }
.pedFuera { border-style: dashed; }
.pedNuevo { width: 100%; min-height: 44px; }
.pedHist { margin-top: var(--s6); }
.pedHist h4 { margin: 0 0 var(--s2); font-size: var(--fs-md); color: var(--text-2); }
.pedHistLista li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text); }
.pedHistLista .btnSec { min-height: 40px; padding: 0 var(--s3); }
@media (max-width: 719px) { .sbOrden { max-width: 6.8rem; } }

/* ===========================================================================
   AHORRO DE LA SEMANA (10-nov-2026): tarjeta, detalle y mensaje del lunes
   =========================================================================== */
.ahorroSemana { margin: var(--s2) var(--s3) 0; padding: var(--s3) var(--s4); border-radius: var(--r-lg);
  background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); color: var(--text); }
.ahorroSemana[hidden] { display: none; }
.ahorroSemana h2 { margin: 0; font-size: var(--fs-lg); font-weight: 800; color: var(--text); }
.ahorroSemana p { margin: var(--s1) 0 var(--s2); font-size: var(--fs-sm); color: var(--text); line-height: 1.4; }
.ahorroSemana .btnSec { min-height: 40px; padding: 0 var(--s3); background: var(--surface) !important; color: var(--text) !important; }
.ahorroGrande { margin: 0; font-size: var(--fs-3xl); font-weight: 800; color: var(--ok); font-variation-settings: "wdth" var(--ancho-titular); }
.pedHistBtns { display: inline-flex; gap: var(--s2); flex-wrap: wrap; justify-content: flex-end; }
.recForm { display: grid; gap: var(--s2); width: 100%; }
.recFila { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s2) var(--s3); display: grid; gap: var(--s1); }
.recFila legend { font-weight: var(--fw-semibold); padding: 0 var(--s1); }
.recFila input { min-height: 44px; }
.lunesTexto { width: 100%; font: inherit; font-size: var(--fs-sm); padding: var(--s3); border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text); white-space: pre-wrap; }
.contactoFila { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s2); align-items: end; padding: var(--s2) 0;
  border-bottom: 1px solid var(--line); }
.contactoFila label { grid-column: 1 / -1; margin: 0 !important; }
.contactoEstado { grid-column: 1 / -1; margin: 0; font-size: var(--fs-sm); }
.contactoEstado:empty { display: none; }
.modalActions a.ok { display: inline-flex; align-items: center; text-decoration: none; padding: 11px 18px; border-radius: 10px; font-weight: 600; }
.sheet .escSwitch { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s3); align-items: center; margin-top: var(--s3); }
.sheet .escSwitch small { grid-column: 2; font-weight: var(--fw-regular); }

/* Tres estados de existencia (10-nov-2026): con existencia (verde), sin informar (ámbar) y agotado (rojo).
   El estado siempre va escrito: el color solo acompaña. */
.stockSinInf { color: var(--warn); font-weight: var(--fw-semibold); }
.badge.sinInf { background: var(--warn-soft); color: var(--warn); }
.panelMejorRot.rotSinInf { color: var(--warn); font-weight: var(--fw-semibold); }
.tarjetaAvisoExist { margin: var(--s1) 0 0; font-size: var(--fs-sm); color: var(--warn); }
.provSinInf.provMejor .provPrecio { color: var(--text); }
.panelOtraMarca { margin-top: var(--s4); padding-top: var(--s2); border-top: 2px dashed var(--line); }
.panelOtraMarca .panelSub { margin-top: var(--s2) !important; }
.provOtraMarca .provPrecio { font-size: var(--fs-md); }
.provCodigo { font-weight: var(--fw-semibold); color: var(--text); overflow-wrap: anywhere; }