/* ==========================================================================
   BodegaFlex POS — ESTILO B «Equilibrada» (rediseño visual, 31-oct-2026)
   Dueño de este archivo: Codex (lote 10 en PUENTE_TAREAS.md). Claude solo lo enlaza.
   Solo actúa con <html data-estilo="b">; el modo oscuro, con data-estilo="b" y data-tema="noche".
   Guía de colores y tamaños: DISENO_OPCION_B.md (raíz del repositorio).
   ========================================================================== */

html[data-estilo="b"] {
  --b-fondo: #F5F6F8;
  --b-tarjeta: #FFFFFF;
  --b-borde: #E6E8EC;
  --b-cabecera: #1A3A6B;
  --b-marca: #1A3A6B;
  --b-accion: #0066DB;
  --b-texto: #111827;
  --b-texto-2: #5B6472;
  --b-precio: #111827;
  --b-bs: #5B6472;
  --b-contador: #F5C400;
  --b-exito: #0F7B4F;
  --b-exito-fondo: #EAF7F0;
  --b-aviso: #B45309;
  --b-aviso-fondo: #FFF7E6;
  --b-peligro: #C62828;
  --b-peligro-fondo: #FFF1F1;
  --b-suave: #F0F5FC;
  --b-sombra: 0 2px 12px rgb(17 24 39 / 4%);
}

html[data-estilo="b"][data-tema="noche"] {
  --b-fondo: #0E1420;
  --b-tarjeta: #171F2E;
  --b-borde: #253047;
  --b-cabecera: #13294B;
  --b-marca: #3D6FD6;
  --b-accion: #4C8DFF;
  --b-texto: #F5F7FA;
  --b-texto-2: #A3AEC2;
  --b-precio: #FFFFFF;
  --b-bs: #C3CCDA;
  --b-exito: #4ADE9B;
  --b-exito-fondo: #10291F;
  --b-aviso: #F5B54A;
  --b-aviso-fondo: #33260F;
  --b-peligro: #FF6B6B;
  --b-peligro-fondo: #32202A;
  --b-suave: #1C2B43;
  --b-sombra: 0 2px 12px rgb(0 0 0 / 12%);
}

/* Barras compartidas. Las excepciones al CSS antiguo con !important fueron
   autorizadas por Yorman; no se altera qué controles muestra cada rol. */
html[data-estilo="b"] body {
  background: var(--b-fondo) !important;
  color: var(--b-texto);
}

html[data-estilo="b"] .app-header {
  background: var(--b-cabecera) !important;
}

html[data-estilo="b"] #header-bcv-indicator {
  background: var(--b-tarjeta) !important;
  border-color: var(--b-borde) !important;
  color: var(--b-texto) !important;
}

html[data-estilo="b"] #btn-tema {
  width: 48px;
  height: 48px;
  min-width: 48px;
}

html[data-estilo="b"] #bottom-nav {
  background: var(--b-tarjeta) !important;
  border-color: var(--b-borde) !important;
  box-shadow: 0 -2px 12px rgb(17 24 39 / 4%) !important;
}

html[data-estilo="b"] #bottom-nav .bottom-nav-tab {
  min-width: 0;
  min-height: 48px;
  color: var(--b-texto-2) !important;
}

html[data-estilo="b"] #bottom-nav .bottom-nav-label {
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

html[data-estilo="b"] #bottom-nav .bottom-nav-tab.active,
html[data-estilo="b"] #bottom-nav .bottom-nav-tab.active .bottom-nav-label {
  color: var(--b-accion) !important;
}

/* Parte A: encabezado, cliente y catálogo. */
html[data-estilo="b"] #panel-ventas .module-header {
  gap: 12px !important;
  margin-bottom: 16px !important;
}

html[data-estilo="b"] #panel-ventas #heading-ventas {
  font-size: 28px !important;
  line-height: 1.2;
  font-weight: 800;
  color: var(--b-texto);
}

html[data-estilo="b"] #panel-ventas .module-header .badge {
  background: var(--b-suave) !important;
  color: var(--b-accion) !important;
  border: 1px solid var(--b-borde) !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  min-height: 48px !important;
  padding: 8px 10px !important;
  gap: 4px;
}

html[data-estilo="b"] #btn-pos-reload-catalog {
  min-height: 48px !important;
  padding: 8px 12px !important;
  font-size: 15px !important;
  border: 1px solid var(--b-borde);
  border-radius: 12px !important;
  background: var(--b-tarjeta);
  color: var(--b-texto);
}

html[data-estilo="b"] #panel-ventas .pos-step-client {
  background: var(--b-tarjeta) !important;
  border: 1px solid var(--b-borde) !important;
  border-radius: 16px !important;
  padding: 12px !important;
  margin-bottom: 16px !important;
  box-shadow: var(--b-sombra) !important;
}

html[data-estilo="b"] .pos-step-client > div:first-child strong {
  color: var(--b-texto) !important;
  font-size: 16px !important;
}

html[data-estilo="b"] #btn-pos-quick-walkin {
  min-height: 48px;
  max-width: 100%;
  padding: 8px 10px !important;
  border: 1px solid var(--b-borde) !important;
  border-radius: 12px !important;
  background: var(--b-suave) !important;
  color: var(--b-accion) !important;
  font-size: 14px !important;
  text-align: left;
}

html[data-estilo="b"] :is(.pos-step-client, .pos-cart-panel) :is(input, select) {
  min-height: 48px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--b-borde) !important;
  border-radius: 12px !important;
  background: var(--b-tarjeta) !important;
  color: var(--b-texto) !important;
  font-size: 16px !important;
}

html[data-estilo="b"] #pos-customer-ci-search {
  padding: 12px !important;
  font-weight: 500 !important;
}

html[data-estilo="b"] :is(.pos-step-client, .pos-cart-panel) input::placeholder,
html[data-estilo="b"] #pos-search-input::placeholder {
  color: var(--b-texto-2);
  opacity: 1;
}

html[data-estilo="b"] #pos-ci-autocomplete-dropdown {
  background: var(--b-tarjeta) !important;
  border-color: var(--b-borde) !important;
  border-radius: 12px !important;
}

html[data-estilo="b"] .pos-ci-item {
  min-height: 48px;
  border-color: var(--b-borde);
  overflow-wrap: anywhere;
}

html[data-estilo="b"] .pos-ci-item:hover {
  background: var(--b-suave);
}

html[data-estilo="b"] .pos-ci-item > div:first-child,
html[data-estilo="b"] #pos-inline-client-box strong {
  color: var(--b-texto) !important;
}

html[data-estilo="b"] #pos-ci-autocomplete-dropdown p,
html[data-estilo="b"] #pos-inline-client-box .form-label {
  color: var(--b-texto-2) !important;
}

/* Los estados de deuda del autocompletado conservan su significado. */
html[data-estilo="b"] .pos-ci-item > div[style*="#047857"],
html[data-estilo="b"] #pos-selected-client-debt[style*="rgb(4, 120, 87)"] {
  color: var(--b-exito) !important;
}

html[data-estilo="b"] .pos-ci-item > div[style*="#b45309"],
html[data-estilo="b"] #pos-selected-client-debt[style*="rgb(180, 83, 9)"] {
  color: var(--b-aviso) !important;
}

html[data-estilo="b"] #pos-inline-client-box {
  background: var(--b-fondo) !important;
  border-color: var(--b-borde) !important;
  padding: 12px !important;
}

html[data-estilo="b"] #pos-inline-client-box > div:first-child {
  gap: 8px;
}

html[data-estilo="b"] #pos-inline-client-box > div:last-child {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)) !important;
}

html[data-estilo="b"] :is(#btn-trigger-inline-add, #btn-save-inline-client) {
  min-height: 48px;
  background: var(--b-marca) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--b-marca);
  border-radius: 12px;
  font-size: 16px !important;
  white-space: normal;
}

html[data-estilo="b"] #pos-selected-client-badge {
  background: var(--b-fondo) !important;
  border-color: var(--b-borde) !important;
  padding: 10px 12px !important;
  gap: 8px;
  flex-wrap: wrap;
}

html[data-estilo="b"] #pos-selected-client-badge > div {
  min-width: 0;
  flex: 1 1 180px;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px !important;
}

html[data-estilo="b"] #pos-client-badge-icon {
  grid-row: span 2;
}

html[data-estilo="b"] #pos-selected-client-debt {
  grid-column: 2;
}

html[data-estilo="b"] #pos-selected-client-text {
  color: var(--b-texto) !important;
  font-size: 14px;
  overflow-wrap: anywhere;
}

html[data-estilo="b"] #pos-selected-client-debt {
  margin-left: 0 !important;
  color: var(--b-texto-2) !important;
}

html[data-estilo="b"] :is(#btn-clear-pos-client, #btn-close-inline-client) {
  min-height: 48px;
  min-width: 48px;
  color: var(--b-accion) !important;
}

html[data-estilo="b"] .pos-products-panel {
  min-width: 0;
  gap: 16px;
}

html[data-estilo="b"] #panel-ventas .pos-search-wrapper {
  background: var(--b-fondo) !important;
  min-width: 0;
}

html[data-estilo="b"] #pos-search-input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid var(--b-borde);
  border-radius: 14px;
  background: var(--b-tarjeta);
  color: var(--b-texto);
  padding: 12px;
}

html[data-estilo="b"] #btn-pos-scan-camera {
  min-height: 48px;
  padding: 12px;
  background: var(--b-marca);
  color: #FFFFFF;
  border-radius: 14px;
  font-size: 16px;
}

html[data-estilo="b"] #panel-ventas .pos-cat-pill {
  min-height: 48px;
  padding: 10px 16px;
  background: var(--b-tarjeta);
  color: var(--b-texto);
  border-color: var(--b-borde);
  border-radius: 999px;
  font-size: 15px;
}

html[data-estilo="b"] #panel-ventas .pos-cat-pill.active {
  background: var(--b-marca);
  border-color: var(--b-marca);
  color: #FFFFFF;
}

html[data-estilo="b"] #pos-product-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px !important;
  padding: 2px;
  max-height: none;
  overflow: visible;
}

html[data-estilo="b"] #panel-ventas .pos-card-item {
  min-width: 0;
  min-height: 166px !important;
  padding: 14px !important;
  border: 1px solid var(--b-borde);
  border-radius: 16px;
  background: var(--b-tarjeta);
  box-shadow: var(--b-sombra);
}

html[data-estilo="b"] #panel-ventas .pos-card-item:hover {
  border-color: var(--b-marca);
}

html[data-estilo="b"] #panel-ventas .pos-card-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  min-height: 2.7em;
  color: var(--b-texto);
}

html[data-estilo="b"] #panel-ventas .pos-card-stock {
  font-size: 13px;
  color: var(--b-texto-2);
  font-weight: 500;
  margin-bottom: 12px;
}

html[data-estilo="b"] #panel-ventas .pos-card-stock.low,
html[data-estilo="b"] #panel-ventas .pos-card-stock.empty {
  border-radius: 6px;
  padding: 3px 5px;
  align-self: flex-start;
  color: var(--b-aviso);
  background: var(--b-aviso-fondo);
  font-weight: 600;
}

html[data-estilo="b"] #panel-ventas .pos-card-stock.empty {
  color: var(--b-peligro);
  background: var(--b-peligro-fondo);
}

html[data-estilo="b"] #panel-ventas .pos-card-price-usd {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--b-precio);
  overflow-wrap: anywhere;
}

html[data-estilo="b"] #panel-ventas .pos-card-price-bs {
  font-size: 15px;
  font-weight: 500;
  color: var(--b-bs);
  overflow-wrap: anywhere;
}

html[data-estilo="b"] #panel-ventas .pos-card-item:has(.pos-card-badge-gancho) {
  padding-top: 32px !important;
}

html[data-estilo="b"] .pos-card-badge-gancho {
  background: var(--b-aviso-fondo);
  color: var(--b-aviso);
  border-color: var(--b-borde);
}

html[data-estilo="b"] #pos-empty-catalog-msg {
  color: var(--b-texto-2);
}

/* Parte B: el mismo panel sirve en la hoja móvil y al lado en laptop. */
html[data-estilo="b"] .pos-cart-panel {
  min-width: 0;
  background: var(--b-tarjeta);
  border: 1px solid var(--b-borde);
  border-radius: 16px;
  box-shadow: var(--b-sombra);
  gap: 18px;
}

html[data-estilo="b"] :is(.pos-cart-title, .pos-cart-sheet-title) {
  color: var(--b-texto);
  font-size: 20px;
  font-weight: 800;
}

html[data-estilo="b"] .pos-cart-header {
  border-color: var(--b-borde);
  gap: 8px;
  flex-wrap: wrap;
}

html[data-estilo="b"] :is(#pos-cart-sheet-badge, #pos-cart-badge-count) {
  background: var(--b-contador) !important;
  color: #111827 !important;
  border-radius: 999px;
  padding: 4px 9px !important;
  font-size: 14px !important;
}

html[data-estilo="b"] :is(#btn-sheet-clear-cart, #btn-pos-clear-cart) {
  background: var(--b-peligro-fondo);
  color: var(--b-peligro) !important;
  border-color: var(--b-borde);
  min-height: 48px !important;
}

html[data-estilo="b"] #btn-close-cart-sheet {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: var(--b-fondo);
  color: var(--b-texto);
}

html[data-estilo="b"] .pos-calc-label {
  font-size: 15px;
  color: var(--b-texto-2);
  line-height: 1.4;
}

html[data-estilo="b"] .pos-mode-selector {
  gap: 8px;
}

html[data-estilo="b"] .pos-cart-panel .btn-pos-mode {
  min-width: 0;
  min-height: 48px;
  padding: 10px 8px;
  border-radius: 12px;
  border-color: var(--b-borde);
  background: var(--b-tarjeta);
  color: var(--b-texto);
  font-size: 16px;
  line-height: 1.35;
}

html[data-estilo="b"] .pos-cart-panel .btn-pos-mode.active {
  background: var(--b-marca);
  color: #FFFFFF;
  border-color: var(--b-marca);
  box-shadow: none;
}

html[data-estilo="b"] #btn-pos-quick-add-client {
  color: var(--b-accion) !important;
  min-height: 48px;
  padding: 4px;
  font-size: 15px !important;
}

html[data-estilo="b"] #pos-client-container > div:first-child {
  gap: 8px;
  flex-wrap: wrap;
}

html[data-estilo="b"] #pos-client-info-bar > div {
  background: var(--b-suave) !important;
  color: var(--b-texto);
  overflow-wrap: anywhere;
}

html[data-estilo="b"] #pos-client-info-bar .badge {
  background: var(--b-tarjeta) !important;
  color: var(--b-texto-2) !important;
}

html[data-estilo="b"] .pos-cart-table-wrapper {
  max-height: none;
  overflow: visible;
  border-color: var(--b-borde);
  border-radius: 14px;
}

html[data-estilo="b"] .pos-cart-table th {
  background: var(--b-fondo);
  color: var(--b-texto-2);
  border-color: var(--b-borde);
  font-size: 13px;
}

html[data-estilo="b"] .pos-cart-table td {
  min-width: 0;
  padding: 10px 6px;
  border-color: var(--b-borde);
}

html[data-estilo="b"] #pos-cart-tbody td:first-child > div:first-child,
html[data-estilo="b"] #pos-cart-tbody td:nth-child(3) > div:first-child {
  color: var(--b-precio) !important;
  font-size: 16px;
  overflow-wrap: anywhere;
}

html[data-estilo="b"] #pos-cart-tbody td:first-child > div:last-child {
  color: var(--b-texto-2) !important;
  font-size: 13px !important;
  margin-top: 6px;
}

html[data-estilo="b"] #pos-cart-tbody td:nth-child(3) > div:last-child {
  color: var(--b-exito) !important;
  font-size: 14px !important;
  margin-top: 4px;
}

html[data-estilo="b"] .pos-qty-ctrl {
  gap: 4px;
}

html[data-estilo="b"] .pos-cart-panel :is(.btn-qty-pos, .btn-remove-cart-item) {
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 12px;
  background: var(--b-fondo);
  color: var(--b-texto);
  border-color: var(--b-borde);
}

html[data-estilo="b"] .pos-cart-panel .btn-remove-cart-item {
  color: var(--b-peligro);
}

html[data-estilo="b"] .pos-cart-panel .input-qty-pos {
  width: 64px !important;
  height: 48px !important;
  padding: 4px 2px;
}

html[data-estilo="b"] #pos-cart-empty-msg {
  color: var(--b-texto-2) !important;
}

html[data-estilo="b"] .pos-total-box {
  background: var(--b-suave);
  border: 1px solid var(--b-borde);
  border-radius: 16px;
  padding: 20px 16px;
}

html[data-estilo="b"] .pos-total-label {
  color: var(--b-texto-2);
  font-size: 15px;
}

html[data-estilo="b"] #pos-total-usd {
  color: var(--b-precio);
  font-size: clamp(28px, 8vw, 36px);
  font-weight: 800;
  overflow-wrap: anywhere;
  margin: 8px 0;
}

html[data-estilo="b"] #pos-total-bs {
  color: var(--b-exito);
  font-size: 22px;
  overflow-wrap: anywhere;
}

html[data-estilo="b"] .pos-calc-box {
  background: var(--b-fondo);
  border-color: var(--b-borde);
  border-radius: 16px;
  padding: 12px;
  gap: 20px;
}

html[data-estilo="b"] .pos-calc-row {
  gap: 10px;
}

html[data-estilo="b"] .pos-quick-btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

html[data-estilo="b"] .pos-cart-panel .btn-pos-quick {
  min-height: 48px;
  min-width: 0;
  padding: 8px;
  border-radius: 10px;
  border-color: var(--b-borde);
  background: var(--b-tarjeta);
  color: var(--b-texto);
  font-size: 16px;
}

html[data-estilo="b"] #pos-pay-usd,
html[data-estilo="b"] #pos-pay-bs {
  font-size: 22px !important;
  font-weight: 700 !important;
  padding: 12px;
  width: 100%;
}

html[data-estilo="b"] #btn-pos-exact-bs {
  flex-shrink: 0;
}

html[data-estilo="b"] .pos-calc-box > div[style*="grid"] {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) !important;
}

html[data-estilo="b"] .pos-calc-box > div[style*="grid"] > div {
  min-width: 0;
}

html[data-estilo="b"] .pos-cart-panel .pos-banner-result {
  background: var(--b-exito-fondo);
  border: 1px solid var(--b-exito);
  color: var(--b-exito);
  border-radius: 14px;
  padding: 16px 12px;
}

html[data-estilo="b"] .pos-cart-panel .pos-banner-result.fiado {
  background: var(--b-aviso-fondo);
  border-color: var(--b-aviso);
  color: var(--b-aviso);
}

html[data-estilo="b"] .pos-cart-panel .pos-banner-result :is(.banner-title, .banner-amount, .banner-bs) {
  color: inherit;
  overflow-wrap: anywhere;
}

html[data-estilo="b"] .pos-cart-panel .pos-banner-result .banner-amount {
  font-size: 28px;
}

html[data-estilo="b"] #pos-vuelto-moneda button {
  min-height: 48px !important;
  padding: 8px;
  background: var(--b-tarjeta) !important;
  color: var(--b-exito) !important;
  border-color: var(--b-exito) !important;
}

html[data-estilo="b"] #pos-vuelto-moneda button[aria-pressed="true"] {
  background: var(--b-exito) !important;
  color: var(--b-tarjeta) !important;
}

html[data-estilo="b"] .pos-cart-panel #btn-pos-submit-sale {
  min-height: 56px !important;
  background: var(--b-accion);
  color: #FFFFFF;
  border-radius: 14px;
  font-size: 16px !important;
  line-height: 1.4;
  padding: 14px;
  white-space: normal;
  box-shadow: none;
}

html[data-estilo="b"] .pos-cart-panel #btn-pos-submit-sale:hover:not(:disabled) {
  background: var(--b-accion);
}

html[data-estilo="b"] .pos-cart-panel #btn-pos-submit-sale:disabled {
  background: var(--b-borde);
  color: var(--b-texto-2);
  border: 1px solid var(--b-texto-2);
  opacity: 1;
}

html[data-estilo="b"] :is(.pos-step-client, .pos-cart-panel, .pos-search-wrapper) :is(button, input, select):focus-visible,
html[data-estilo="b"] :is(.pos-cat-pill, .pos-card-item, #pos-floating-cart-bar):focus-visible {
  outline: 3px solid var(--b-accion);
  outline-offset: 3px;
}

/* Teléfono: no se cambian transform, transition, display ni el movimiento de
   la hoja. El contenido completo se desliza en su contenedor original. */
@media (max-width: 767px) {
  html[data-estilo="b"] #btn-hamburger-menu {
    width: 48px !important;
    min-height: 48px !important;
  }

  html[data-estilo="b"] #pos-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-estilo="b"] #panel-ventas {
    padding-bottom: 96px;
  }

  html[data-estilo="b"] #pos-floating-cart-bar {
    min-height: 72px;
    height: auto !important;
    padding: 10px !important;
    gap: 8px;
    background: var(--b-cabecera) !important;
    box-shadow: 0 6px 20px rgb(17 24 39 / 18%) !important;
  }

  html[data-estilo="b"] .pos-floating-cart-badge {
    background: var(--b-contador);
    color: #111827;
    min-width: 28px;
    min-height: 28px;
    text-align: center;
    padding: 4px;
  }

  html[data-estilo="b"] .pos-floating-cart-center {
    min-width: 0;
    align-items: flex-start;
    flex: 1;
  }

  html[data-estilo="b"] .pos-floating-cart-total {
    font-size: 16px;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  html[data-estilo="b"] .pos-floating-cart-total-bs {
    font-size: 13px;
    font-weight: 500;
    color: #E6E8EC;
    overflow-wrap: anywhere;
  }

  html[data-estilo="b"] .pos-floating-cart-right {
    background: var(--b-accion);
    color: #FFFFFF;
    border-radius: 12px;
    min-height: 48px;
    padding: 8px 10px;
    max-width: 42%;
    font-size: 14px;
    text-align: center;
  }

  html[data-estilo="b"] .pos-floating-cart-btn-text {
    white-space: normal;
  }

  html[data-estilo="b"] #pos-cart-bottom-sheet {
    background: var(--b-tarjeta) !important;
    color: var(--b-texto);
    border: 1px solid var(--b-borde);
  }

  html[data-estilo="b"] #pos-cart-bottom-sheet .bottom-sheet-drag-pill {
    background: var(--b-texto-2);
  }

  html[data-estilo="b"] .pos-cart-sheet-header {
    border-color: var(--b-borde) !important;
    padding: 8px 12px 12px !important;
    gap: 8px;
    flex-wrap: wrap;
  }

  html[data-estilo="b"] .pos-cart-sheet-title {
    gap: 6px;
    font-size: 20px;
  }

  html[data-estilo="b"] #pos-cart-sheet-content {
    padding: 16px 12px max(24px, env(safe-area-inset-bottom)) !important;
  }

  html[data-estilo="b"] .pos-cart-table,
  html[data-estilo="b"] .pos-cart-table tbody {
    display: block;
  }

  /* Se conserva incluso la cabecera de la tabla; las celdas siguen el orden
     del documento: producto, cantidad, subtotal y quitar. */
  html[data-estilo="b"] .pos-cart-table thead tr,
  html[data-estilo="b"] .pos-cart-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 168px;
    gap: 8px;
    padding: 12px 8px;
    border-bottom: 1px solid var(--b-borde);
    align-items: center;
  }

  html[data-estilo="b"] .pos-cart-table :is(td, th) {
    width: auto !important;
    border: 0;
    padding: 0;
    white-space: normal !important;
  }

  html[data-estilo="b"] .pos-cart-table td:nth-child(3) {
    text-align: left !important;
  }

  html[data-estilo="b"] .pos-cart-table td:last-child {
    justify-self: end;
  }

  html[data-estilo="b"] .pos-cart-table thead {
    display: block;
  }

  html[data-estilo="b"] .pos-cart-table thead tr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 0;
    background: var(--b-fondo);
  }
}

/* Laptop: catálogo y cobro lado a lado, sin cambiar el orden del DOM. */
@media (min-width: 1024px) {
  html[data-estilo="b"] .pos-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(480px, 1fr);
    max-width: 1200px;
    align-items: start;
  }
}

/* ==========================================================================
   Inventario — lote 11 (31-oct-2026)
   Se mantienen columnas, controles, orden móvil anterior y ventanas reales.
   !important vence únicamente estilos incrustados y reglas móviles previas.
   ========================================================================== */

html[data-estilo="b"] #panel-productos .module-header {
  gap: 16px;
  margin-bottom: 20px !important;
}

html[data-estilo="b"] #heading-productos {
  color: var(--b-texto);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
}

html[data-estilo="b"] #panel-productos .module-subtitle {
  color: var(--b-texto-2);
  font-size: 15px;
  line-height: 1.5;
  margin-top: 8px;
}

html[data-estilo="b"] #btn-open-add-product {
  min-height: 48px;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  border: 1px solid var(--b-accion);
  background: var(--b-accion);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700 !important;
  box-shadow: none;
}

html[data-estilo="b"] #panel-productos .inventory-toolbar {
  gap: 12px !important;
  margin-bottom: 20px !important;
}

html[data-estilo="b"] #panel-productos .inventory-toolbar > div:first-child {
  min-width: 0 !important;
  max-width: 100% !important;
  flex-basis: 300px;
}

html[data-estilo="b"] #inventory-search-input {
  min-height: 48px;
  min-width: 0;
  background: var(--b-tarjeta);
  border: 1px solid var(--b-borde);
  border-radius: 14px !important;
  color: var(--b-texto);
  font-size: 16px;
}

html[data-estilo="b"] #inventory-search-input::placeholder {
  color: var(--b-texto-2);
  opacity: 1;
}

html[data-estilo="b"] #inventory-count-summary {
  color: var(--b-texto-2) !important;
  font-size: 13px !important;
  line-height: 1.5;
}

html[data-estilo="b"] #panel-productos .products-table-card {
  background: var(--b-tarjeta);
  border-color: var(--b-borde);
  border-radius: 16px;
  box-shadow: var(--b-sombra);
}

html[data-estilo="b"] #products-table {
  border-collapse: separate;
  border-spacing: 0;
  color: var(--b-texto);
}

html[data-estilo="b"] #products-table thead {
  background: var(--b-fondo);
  border-color: var(--b-borde);
}

html[data-estilo="b"] #products-table th {
  color: var(--b-texto-2);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  padding: 14px 10px;
  white-space: normal;
}

html[data-estilo="b"] #products-table th.th-actions {
  width: 240px;
}

html[data-estilo="b"] #products-table th:nth-child(4) {
  min-width: 144px;
}

html[data-estilo="b"] #products-table #products-tbody td {
  padding: 16px 10px;
  border-color: var(--b-borde);
  font-size: 15px;
}

html[data-estilo="b"] #products-table #products-tbody tr:hover {
  background: var(--b-fondo);
}

html[data-estilo="b"] #products-table #products-tbody td:first-child {
  color: var(--b-texto-2) !important;
  font-size: 13px !important;
  overflow-wrap: anywhere;
}

html[data-estilo="b"] #products-table #products-tbody td:nth-child(2) > div {
  color: var(--b-texto) !important;
  font-size: 16px;
  font-weight: 600 !important;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

html[data-estilo="b"] #products-table #products-tbody td:nth-child(2) > span {
  background: var(--b-fondo) !important;
  color: var(--b-texto-2) !important;
  border-radius: 6px !important;
  padding: 3px 6px !important;
  font-size: 13px !important;
  overflow-wrap: anywhere;
}

html[data-estilo="b"] #products-table #products-tbody td:nth-child(3) {
  color: var(--b-texto) !important;
  font-family: inherit !important;
  font-weight: 600 !important;
}

html[data-estilo="b"] #products-table #products-tbody td:nth-child(4) {
  font-family: inherit !important;
}

html[data-estilo="b"] #products-table #products-tbody td:nth-child(4) > div:first-child {
  color: var(--b-precio) !important;
  font-size: 22px;
  font-weight: 800 !important;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

html[data-estilo="b"] #products-table #products-tbody td:nth-child(4) > div:last-child:not(:first-child) {
  color: var(--b-bs) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  overflow-wrap: anywhere;
}

html[data-estilo="b"] #products-table #products-tbody td:nth-child(5) > span {
  color: var(--b-exito) !important;
  background: var(--b-exito-fondo) !important;
  border-color: var(--b-exito-fondo) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  padding: 5px 8px !important;
}

html[data-estilo="b"] #products-table #products-tbody td:nth-child(5) > span[style*="#fef3c7"] {
  color: var(--b-aviso) !important;
  background: var(--b-aviso-fondo) !important;
  border-color: var(--b-aviso-fondo) !important;
}

html[data-estilo="b"] #products-table #products-tbody td:nth-child(6) {
  color: var(--b-texto);
  font-size: 18px;
  font-weight: 700;
}

/* La app usa la misma marca de STOCK BAJO para poco stock y para cero.
   Se conserva esa alerta roja hasta que Claude aporte un estado distinguible. */
html[data-estilo="b"] #products-table #products-tbody td:nth-child(6) > span[style*="#b91c1c"] {
  color: var(--b-peligro) !important;
}

html[data-estilo="b"] #products-table #products-tbody td:nth-child(6) > span[style*="#fee2e2"] {
  background: var(--b-peligro-fondo) !important;
  border-color: var(--b-peligro-fondo) !important;
  font-size: 12px !important;
  margin: 4px 0 0 !important;
}

html[data-estilo="b"] #products-table #products-tbody .actions-cell {
  white-space: normal;
}

html[data-estilo="b"] #products-table #products-tbody .actions-cell button {
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  font-size: 16px !important;
  font-weight: 600;
  margin: 3px;
}

html[data-estilo="b"] #products-table #products-tbody .btn-action-edit {
  color: var(--b-accion);
  background: var(--b-tarjeta);
  border: 1px solid var(--b-accion);
}

html[data-estilo="b"] #products-table #products-tbody .btn-action-merma {
  color: var(--b-aviso);
  background: var(--b-aviso-fondo);
  border: 1px solid var(--b-borde);
}

html[data-estilo="b"] #products-table #products-tbody .btn-action-delete {
  color: var(--b-peligro);
  background: transparent;
  border: 1px solid var(--b-borde);
}

html[data-estilo="b"] #no-products-msg,
html[data-estilo="b"] #products-table #products-tbody td[colspan] {
  color: var(--b-texto-2) !important;
}

/* Ventanas de producto y merma: se conserva su animación y su contenedor
   de desplazamiento, sin forzar la visibilidad de bloques o campos ocultos. */
html[data-estilo="b"] :is(#product-modal, #modal-registrar-merma) .modal-card {
  background: var(--b-tarjeta);
  color: var(--b-texto);
  border-color: var(--b-borde) !important;
}

html[data-estilo="b"] :is(#product-modal, #modal-registrar-merma) .modal-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--b-tarjeta) !important;
  border-color: var(--b-borde) !important;
  gap: 12px;
  padding: 16px;
}

html[data-estilo="b"] :is(#modal-product-title, #modal-merma-title) {
  min-width: 0;
  color: var(--b-texto) !important;
  font-size: 20px !important;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

html[data-estilo="b"] :is(#product-modal, #modal-registrar-merma) .modal-close {
  min-width: 48px;
  min-height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--b-fondo);
  color: var(--b-texto);
}

html[data-estilo="b"] #product-form {
  padding: 16px;
  gap: 18px;
}

html[data-estilo="b"] #form-registrar-merma {
  padding: 16px !important;
}

html[data-estilo="b"] :is(#product-form, #form-registrar-merma) .form-label,
html[data-estilo="b"] #product-form label[for="product-price-bs-fijo"] {
  color: var(--b-texto) !important;
  font-size: 15px !important;
  line-height: 1.45;
}

html[data-estilo="b"] :is(#product-form, #form-registrar-merma) :is(input:not([type="checkbox"]):not([type="hidden"]), select) {
  min-width: 0;
  min-height: 48px;
  max-width: 100%;
  background: var(--b-tarjeta);
  color: var(--b-texto);
  border: 1px solid var(--b-borde);
  border-radius: 12px;
  font-size: 16px !important;
}

html[data-estilo="b"] :is(#product-form, #form-registrar-merma) input::placeholder {
  color: var(--b-texto-2);
  opacity: 1;
}

html[data-estilo="b"] #product-form :is(#product-price-bs-help, #suggested-margin-helper, #memoria-paca-badge, .currency-symbol),
html[data-estilo="b"] #product-form label[for="product-tasa-reposicion-input"] > span:last-child,
html[data-estilo="b"] #merma-product-info {
  color: var(--b-texto-2) !important;
  font-size: 13px !important;
  line-height: 1.5;
}

html[data-estilo="b"] #product-form label[for="product-tasa-reposicion-input"] {
  flex-wrap: wrap;
  gap: 4px;
}

html[data-estilo="b"] #product-form .form-group:has(#bloque-compra-pacas) {
  background: var(--b-fondo) !important;
  border: 1px solid var(--b-borde) !important;
  border-radius: 16px !important;
}

html[data-estilo="b"] #product-form :is(#btn-modo-compra-paca, #btn-modo-compra-suelta) {
  min-height: 48px;
  min-width: 0;
  background: var(--b-tarjeta) !important;
  color: var(--b-texto) !important;
  border: 1px solid var(--b-borde) !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  line-height: 1.4;
}

html[data-estilo="b"] #product-form :is(#btn-modo-compra-paca, #btn-modo-compra-suelta).active {
  background: var(--b-marca) !important;
  color: #FFFFFF !important;
  border-color: var(--b-marca) !important;
}

html[data-estilo="b"] #product-form :is(#select-paca-moneda, #select-suelta-moneda) {
  flex-shrink: 0;
}

html[data-estilo="b"] #product-form :is(#input-paca-precio, #input-suelta-costo, #product-barcode-input) {
  flex: 1;
  width: 100%;
}

html[data-estilo="b"] #product-form #banner-costo-unitario-dual {
  background: var(--b-suave) !important;
  border-color: var(--b-borde) !important;
  border-radius: 12px !important;
}

html[data-estilo="b"] #banner-costo-unitario-dual :is(span, strong) {
  color: var(--b-texto) !important;
  overflow-wrap: anywhere;
}

html[data-estilo="b"] #product-form label:has(> #chk-paca-iva),
html[data-estilo="b"] #product-form label[for="product-price-bs-fijo"] {
  min-height: 48px !important;
  color: var(--b-texto) !important;
}

html[data-estilo="b"] #product-form input[type="checkbox"] {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0;
  accent-color: var(--b-marca);
}

html[data-estilo="b"] #product-form .price-input {
  padding-left: 44px;
}

html[data-estilo="b"] #product-form label:has(> #chk-registrar-gasto-compra) {
  min-height: 48px;
  color: var(--b-texto) !important;
  line-height: 1.45;
}

html[data-estilo="b"] #stock-resultante-banner,
html[data-estilo="b"] #product-margin-badge-wrap > div {
  background: var(--b-exito-fondo) !important;
  color: var(--b-exito) !important;
  border-color: var(--b-borde) !important;
  border-radius: 12px !important;
}

html[data-estilo="b"] #product-margin-badge-wrap > #gancho-warning-banner {
  background: var(--b-aviso-fondo) !important;
  color: var(--b-aviso) !important;
}

html[data-estilo="b"] #reposicion-warning-badge > div {
  background: var(--b-suave) !important;
  color: var(--b-accion) !important;
  border-color: var(--b-borde) !important;
  border-radius: 12px !important;
}

html[data-estilo="b"] :is(#product-form, #form-registrar-merma) button {
  min-height: 48px;
  min-width: 48px;
  border-radius: 12px !important;
  font-size: 16px !important;
  line-height: 1.4;
}

html[data-estilo="b"] :is(#btn-scan-product-barcode, #btn-save-product) {
  background: var(--b-accion) !important;
  color: #FFFFFF !important;
  border-color: var(--b-accion);
}

html[data-estilo="b"] #btn-aplicar-costo-unitario-dual {
  background: var(--b-marca) !important;
  color: #FFFFFF;
  border: 1px solid var(--b-marca);
}

html[data-estilo="b"] #btn-gen-internal-code,
html[data-estilo="b"] :is(#btn-cancel-product, #btn-cancel-merma) {
  background: var(--b-tarjeta) !important;
  color: var(--b-texto) !important;
  border: 1px solid var(--b-borde) !important;
}

html[data-estilo="b"] #btn-apply-suggested-price {
  background: var(--b-suave) !important;
  color: var(--b-accion) !important;
  border-color: var(--b-borde) !important;
  white-space: normal;
}

html[data-estilo="b"] #merma-product-name {
  color: var(--b-texto) !important;
}

html[data-estilo="b"] #form-registrar-merma > div:first-of-type,
html[data-estilo="b"] #merma-unit-badge {
  background: var(--b-fondo) !important;
  color: var(--b-texto) !important;
  border-color: var(--b-borde) !important;
  border-radius: 12px !important;
}

html[data-estilo="b"] #form-registrar-merma > div:has(#merma-loss-usd) {
  background: var(--b-peligro-fondo) !important;
  border-color: var(--b-borde) !important;
  border-radius: 12px !important;
}

html[data-estilo="b"] #form-registrar-merma > div:has(#merma-loss-usd) :is(div, span, small) {
  color: var(--b-peligro) !important;
  overflow-wrap: anywhere;
}

html[data-estilo="b"] #form-registrar-merma > div:has(#merma-loss-usd) small {
  font-size: 13px !important;
  line-height: 1.5;
}

html[data-estilo="b"] #btn-confirm-merma {
  background: var(--b-peligro-fondo) !important;
  color: var(--b-peligro) !important;
  border: 1px solid var(--b-peligro);
  white-space: normal;
}

html[data-estilo="b"] :is(#product-form, #form-registrar-merma) .modal-footer-actions {
  gap: 10px;
  flex-wrap: wrap;
}

html[data-estilo="b"] :is(#product-form, #form-registrar-merma) .modal-footer-actions button {
  flex: 1 1 140px;
}

html[data-estilo="b"] :is(#panel-productos, #modal-registrar-merma) :is(button, input, select):focus-visible {
  outline: 3px solid var(--b-accion);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  html[data-estilo="b"] #panel-productos .module-header {
    align-items: stretch;
  }

  html[data-estilo="b"] #panel-productos .products-table-card > .table-responsive-wrapper {
    background: transparent !important;
  }

  html[data-estilo="b"] #products-table thead {
    display: none;
  }

  html[data-estilo="b"] #products-table #products-tbody tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px !important;
    padding: 16px 14px !important;
    margin-bottom: 14px !important;
    background: var(--b-tarjeta) !important;
    border: 1px solid var(--b-borde) !important;
    border-radius: 16px !important;
    box-shadow: var(--b-sombra) !important;
  }

  html[data-estilo="b"] #products-table #products-tbody td {
    min-width: 0;
    width: auto !important;
    padding: 0 !important;
    min-height: 0 !important;
    color: var(--b-texto) !important;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 4px;
    overflow-wrap: anywhere;
  }

  /* Solo se estilizan los rótulos que responsive-ui ya genera a partir del
     thead. No se crean textos con content ni se toca el order anterior. */
  html[data-estilo="b"] #products-table #products-tbody td::before {
    color: var(--b-texto-2) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  html[data-estilo="b"] #products-table #products-tbody :is(td:nth-child(2), td:nth-child(4), td:nth-child(7), td[colspan]) {
    grid-column: 1 / -1;
  }

  html[data-estilo="b"] #products-table #products-tbody td:nth-child(2) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 8px;
    border-bottom: 1px solid var(--b-borde) !important;
    padding-bottom: 12px !important;
    margin-bottom: 0 !important;
  }

  html[data-estilo="b"] #products-table #products-tbody td:nth-child(6) {
    font-size: 18px !important;
  }

  html[data-estilo="b"] #products-table #products-tbody td:nth-child(7) {
    display: flex !important;
    flex-direction: row;
    gap: 8px !important;
    border-top: 1px solid var(--b-borde) !important;
    padding-top: 12px !important;
    margin-top: 0 !important;
  }

  html[data-estilo="b"] #products-table #products-tbody .actions-cell button {
    flex: 1 1 80px;
    margin: 0;
  }

  html[data-estilo="b"] #product-form .form-group > div:has(> #product-barcode-input) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-estilo="b"] #product-barcode-input {
    grid-column: 1 / -1;
  }
}

@media (max-width: 430px) {
  html[data-estilo="b"] #bloque-compra-pacas > div:nth-child(2),
  html[data-estilo="b"] #bloque-compra-sueltas > div:first-child {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ==========================================================================
   Compré productos — lote 12 (31-oct-2026)
   Los dos pasos, las monedas y las selecciones siguen a cargo de Claude.
   Agregar conserva la acción principal; Compré es la alternativa con borde.
   ========================================================================== */

html[data-estilo="b"] #panel-productos .inv-acciones {
  align-items: stretch;
  gap: 10px;
}

html[data-estilo="b"] #panel-productos .inv-acciones > button {
  min-width: 0;
  min-height: 56px;
  align-self: stretch;
  padding: 12px 10px !important;
  border-radius: 14px !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  white-space: normal;
  text-align: center;
  justify-content: center;
}

html[data-estilo="b"] #btn-open-compre {
  background: var(--b-tarjeta);
  color: var(--b-accion);
  border: 1px solid var(--b-accion);
}

html[data-estilo="b"] #modal-compre .compre-card {
  background: var(--b-tarjeta);
  color: var(--b-texto);
  border-color: var(--b-borde) !important;
}

html[data-estilo="b"] #modal-compre .modal-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--b-tarjeta);
  border-color: var(--b-borde);
  padding: 16px;
  gap: 12px;
}

html[data-estilo="b"] #modal-compre .modal-header > div {
  min-width: 0;
}

html[data-estilo="b"] #compre-titulo {
  color: var(--b-texto);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 800;
}

html[data-estilo="b"] #compre-subtitulo {
  color: var(--b-texto-2);
  font-size: 14px;
  line-height: 1.45;
  margin-top: 6px;
}

html[data-estilo="b"] #btn-compre-cerrar {
  min-width: 48px;
  min-height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--b-fondo);
  color: var(--b-texto);
}

html[data-estilo="b"] #modal-compre .compre-paso {
  padding: 16px;
  gap: 16px;
}

html[data-estilo="b"] #modal-compre :is(.form-label, .compre-etiqueta) {
  color: var(--b-texto);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

html[data-estilo="b"] #modal-compre .form-input {
  min-height: 48px;
  min-width: 0;
  max-width: 100%;
  background: var(--b-tarjeta);
  color: var(--b-texto);
  border: 1px solid var(--b-borde);
  border-radius: 12px;
  font-size: 16px;
}

html[data-estilo="b"] #modal-compre input::placeholder {
  color: var(--b-texto-2);
  opacity: 1;
}

html[data-estilo="b"] #modal-compre .compre-fila-buscar {
  min-width: 0;
  gap: 8px;
}

html[data-estilo="b"] #modal-compre .compre-resultado {
  min-height: 56px;
  min-width: 0;
  border-radius: 12px;
  background: var(--b-tarjeta);
  color: var(--b-texto);
  border-color: var(--b-borde);
  font-size: 16px;
  line-height: 1.45;
  padding: 12px;
  overflow-wrap: anywhere;
}

html[data-estilo="b"] #modal-compre .compre-resultado > span {
  min-width: 0;
  flex: 1;
}

html[data-estilo="b"] #modal-compre .compre-resultado small {
  color: var(--b-texto-2);
  font-size: 13px;
  flex-shrink: 0;
}

html[data-estilo="b"] #modal-compre .compre-resultado-nuevo {
  color: var(--b-accion);
  border-color: var(--b-accion);
  background: var(--b-suave);
}

html[data-estilo="b"] #modal-compre :is(.compre-elegido, .compre-nuevo, .compre-costo-box, .compre-resumen, .compre-guardara) {
  min-width: 0;
  border: 1px solid var(--b-borde);
  border-radius: 16px;
  padding: 16px;
  background: var(--b-fondo);
  color: var(--b-texto);
  overflow-wrap: anywhere;
}

html[data-estilo="b"] #modal-compre .compre-elegido > div {
  min-width: 0;
  flex: 1;
}

html[data-estilo="b"] #modal-compre .compre-elegido strong {
  font-size: 16px;
  line-height: 1.4;
}

html[data-estilo="b"] #modal-compre .compre-elegido small,
html[data-estilo="b"] #modal-compre .compre-nota {
  color: var(--b-texto-2);
  font-size: 14px;
  line-height: 1.5;
}

html[data-estilo="b"] #modal-compre .compre-grupo {
  gap: 10px;
}

html[data-estilo="b"] #modal-compre :is(.compre-opciones, .compre-dos) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

html[data-estilo="b"] #modal-compre .compre-dos > div {
  min-width: 0;
}

html[data-estilo="b"] #modal-compre .compre-opcion {
  min-width: 0;
  min-height: 56px;
  border-radius: 12px;
  border: 1px solid var(--b-borde);
  background: var(--b-tarjeta);
  color: var(--b-texto);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  padding: 10px;
}

html[data-estilo="b"] #modal-compre :is(.compre-opcion, .compre-sugerido)[aria-pressed="true"] {
  background: var(--b-marca);
  border-color: var(--b-marca);
  color: #FFFFFF;
}

html[data-estilo="b"] #modal-compre .compre-check {
  min-height: 48px;
  color: var(--b-texto);
  font-size: 15px;
  line-height: 1.5;
  padding: 8px 0;
}

html[data-estilo="b"] #modal-compre .compre-check input {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  accent-color: var(--b-marca);
}

html[data-estilo="b"] #modal-compre :is(.compre-resumen, .compre-costo-box) {
  background: var(--b-suave);
  line-height: 1.6;
  font-size: 15px;
}

html[data-estilo="b"] #modal-compre .compre-grande {
  color: var(--b-precio);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.3;
  margin: 6px 0;
  overflow-wrap: anywhere;
}

html[data-estilo="b"] #modal-compre :is(.compre-resumen, .compre-costo-box) small {
  color: var(--b-texto-2);
  font-size: 14px;
  line-height: 1.5;
}

html[data-estilo="b"] #modal-compre .compre-sugeridos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

html[data-estilo="b"] #modal-compre .compre-sugerido {
  min-height: 72px;
  min-width: 0;
  padding: 12px 8px;
  border-radius: 12px;
  border: 1px solid var(--b-borde);
  background: var(--b-tarjeta);
  color: var(--b-texto);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

html[data-estilo="b"] #modal-compre .compre-sugerido small {
  color: var(--b-texto-2);
  font-size: 14px;
  margin-top: 4px;
}

html[data-estilo="b"] #modal-compre .compre-sugerido[aria-pressed="true"] small {
  color: #FFFFFF;
}

html[data-estilo="b"] #compre-precio-venta {
  font-size: 22px;
  font-weight: 700;
  min-height: 56px;
}

html[data-estilo="b"] #modal-compre .compre-frase {
  color: var(--b-exito);
  background: var(--b-exito-fondo);
  border-radius: 12px;
  padding: 12px;
  font-size: 15px;
  line-height: 1.5;
}

html[data-estilo="b"] #modal-compre .compre-frase.perdida,
html[data-estilo="b"] #modal-compre .compre-aviso {
  color: var(--b-aviso);
  background: var(--b-aviso-fondo);
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.5;
}

html[data-estilo="b"] #modal-compre .compre-guardara {
  background: var(--b-exito-fondo);
  gap: 10px;
}

html[data-estilo="b"] #modal-compre .compre-guardara h4 {
  color: var(--b-exito);
  font-size: 16px;
  line-height: 1.4;
}

html[data-estilo="b"] #modal-compre .compre-guardara-fila {
  gap: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  flex-wrap: wrap;
}

html[data-estilo="b"] #modal-compre .compre-guardara-fila > span {
  min-width: 0;
  flex: 1 1 110px;
  overflow-wrap: anywhere;
}

html[data-estilo="b"] #modal-compre .compre-error {
  color: var(--b-peligro);
  background: var(--b-peligro-fondo);
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.5;
}

html[data-estilo="b"] #modal-compre .compre-botones {
  gap: 10px;
  padding-top: 8px;
}

html[data-estilo="b"] #modal-compre :is(.compre-boton-principal, .compre-boton-secundario) {
  min-height: 48px;
  min-width: 48px;
  padding: 12px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  white-space: normal;
}

html[data-estilo="b"] #modal-compre .compre-boton-principal {
  min-height: 56px;
  background: var(--b-accion);
  color: #FFFFFF;
}

html[data-estilo="b"] #modal-compre .compre-boton-secundario {
  background: var(--b-tarjeta);
  color: var(--b-accion);
  border: 1px solid var(--b-borde);
}

html[data-estilo="b"] #modal-compre :is(button, input, select):focus-visible {
  outline: 3px solid var(--b-accion);
  outline-offset: 3px;
}

/* Estados de Inventario añadidos por Claude después del lote 11. Estos
   selectores concretos vencen los estilos en línea y las reglas previas. */
html[data-estilo="b"] #panel-productos #products-table [data-stock-estado="bajo"] :is(.inv-stock-num, .inv-stock-bajo) {
  color: var(--b-aviso) !important;
}

html[data-estilo="b"] #panel-productos #products-table .inv-stock-bajo {
  background: var(--b-aviso-fondo) !important;
  border-color: var(--b-aviso-fondo) !important;
}

html[data-estilo="b"] #panel-productos #products-table [data-stock-estado="agotado"] :is(.inv-stock-num, .inv-stock-agotado) {
  color: var(--b-peligro) !important;
}

html[data-estilo="b"] #panel-productos #products-table .inv-stock-agotado {
  background: var(--b-peligro-fondo) !important;
  border-color: var(--b-peligro-fondo) !important;
}

html[data-estilo="b"] #panel-productos #products-table #products-tbody :is(.inv-costo-bs, .inv-queda-bs, .inv-reponer-bs) {
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

html[data-estilo="b"] #panel-productos #products-table #products-tbody .inv-costo-bs {
  color: var(--b-texto-2) !important;
}

html[data-estilo="b"] #panel-productos #products-table #products-tbody .inv-queda-bs {
  color: var(--b-exito) !important;
}

html[data-estilo="b"] #panel-productos #products-table #products-tbody .inv-queda-bs[style*="#b91c1c"],
html[data-estilo="b"] #panel-productos #products-table #products-tbody .inv-reponer-bs {
  color: var(--b-aviso) !important;
}

@media (max-width: 420px) {
  html[data-estilo="b"] #modal-compre .compre-dos {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) {
  html[data-estilo="b"] #modal-compre .compre-sugeridos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}