/* ============================================================================
   alabs.css — Capa del estándar A-Labs (GUIA_VISUAL.md de base-sistemas).
   Carga al final, después de Bootstrap 4.6, theme.css y mobile.css, y gana
   por orden (sin !important salvo para pisar estilos en línea heredados).

   Idea: superficies blancas y calmadas; el color del negocio activo (FLOW,
   INDIGO…) es el único acento; verde, ámbar y rojo quedan para estados.
   ============================================================================ */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --texto: #1c1f23;
  --suave: #5b6470;
  --fondo: #f6f7f9;
  --panel: #ffffff;
  --panel-2: #f9fafb;
  --borde: #d6dae0;
  --borde-suave: #e7eaee;
  --accion: var(--brand, #1f6feb);      /* el negocio activo lo redefine */
  --accion-suave: #eef2f8;
  --ok: #15803d;
  --ok-hover: #116a32;
  --ok-suave: #e8f5ec;
  --advertencia: #8a6100;
  --advertencia-suave: #fdf3d7;
  --peligro: #b42318;
  --peligro-suave: #fdecea;
  --foco: #0b57d0;

  --radio: 10px;
  --radio-sm: 8px;
  --sombra: 0 1px 2px rgb(16 24 40 / 7%), 0 4px 12px rgb(16 24 40 / 5%);

  --letra: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --t-14: .875rem; --t-16: 1rem; --t-20: 1.25rem; --t-24: 1.5rem; --t-32: 2rem;

  /* Los tokens viejos de theme.css apuntan a los nuevos */
  --bg: var(--fondo); --surface: var(--panel); --surface-2: var(--panel-2);
  --border: var(--borde-suave); --border-strong: var(--borde);
  --text: var(--texto); --text-muted: var(--suave);
  --success: var(--ok); --success-hover: var(--ok-hover);
  --danger: var(--peligro); --warning: var(--advertencia);
}
body.dark-mode {
  --texto: #e6e9ee; --suave: #a3acb9; --fondo: #0f141b; --panel: #171e27;
  --panel-2: #1b2430; --borde: #344050; --borde-suave: #263140;
  --accion-suave: rgb(255 255 255 / 6%);
  --ok-suave: rgb(21 128 61 / 18%); --advertencia-suave: rgb(138 97 0 / 22%);
  --peligro-suave: rgb(180 35 24 / 20%);
}

/* ── Base y tipografía (escala 14/16/20/24/32) ──────────────────────────── */
body { font-family: var(--letra); font-size: var(--t-16); line-height: 1.5; color: var(--texto); }
button, input, select, textarea { font-family: inherit; }
.content { background: var(--fondo); }
h1, .titulo-pantalla { font-size: var(--t-24); font-weight: 650; line-height: 1.2; margin: 0; color: var(--texto); }
h2 { font-size: var(--t-20); } h3, h4, h5 { font-size: var(--t-16); font-weight: 650; }
small, .small { font-size: var(--t-14); }
.text-muted { color: var(--suave) !important; }
.text-monospace, code { font-family: var(--mono); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.cifra { font-variant-numeric: tabular-nums; }

/* ── Encabezado de pantalla: título + subtítulo + acciones ──────────────── */
.encabezado {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 12px 16px; margin: 0 0 24px;
}
.encabezado .sub { margin: 4px 0 0; color: var(--suave); font-size: var(--t-14); }
.encabezado .acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Botones: primario (negocio), cobrar (ok), secundario, fantasma ─────── */
.btn {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: .55rem 1rem; border-radius: var(--radio-sm); font-weight: 600; font-size: var(--t-16);
  box-shadow: none; transform: none;
}
.btn i { margin: 0 !important; }
.btn-sm { min-height: 36px; padding: .35rem .75rem; font-size: var(--t-14); }
.btn-lg { min-height: 52px; padding: .7rem 1.4rem; font-size: 1.125rem; }
.btn:hover { transform: none; box-shadow: none; }
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active {
  background: var(--accion); border-color: var(--accion); color: #fff;
}
.btn-primary:hover, .btn-primary:focus { background: var(--accion); border-color: var(--accion); color: #fff; filter: brightness(.9); }
.btn-success, .btn-cobrar { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-success:hover, .btn-cobrar:hover { background: var(--ok-hover); border-color: var(--ok-hover); color: #fff; }
.btn-secundario,
.btn-outline-secondary, .btn-outline-primary, .btn-outline-info, .btn-outline-success,
.btn-outline-warning, .btn-light, .btn-secondary {
  background: var(--panel); border: 1px solid var(--borde); color: var(--texto);
}
.btn-secundario:hover,
.btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-outline-info:hover,
.btn-outline-success:hover, .btn-outline-warning:hover, .btn-light:hover, .btn-secondary:hover {
  background: var(--accion-suave); border-color: var(--borde); color: var(--texto);
}
.btn-fantasma { background: transparent; border: 1px solid transparent; color: var(--accion); }
.btn-fantasma:hover { background: var(--accion-suave); color: var(--accion); }
.btn-outline-danger { background: var(--panel); border: 1px solid var(--borde); color: var(--peligro); }
.btn-outline-danger:hover { background: var(--peligro-suave); border-color: var(--peligro); color: var(--peligro); }
.btn-danger { background: var(--peligro); border-color: var(--peligro); }
.btn-icono { width: 44px; padding: 0; }
.btn-sm.btn-icono { width: 36px; }

/* ── Tarjetas: neutras, sin cabeceras de color ──────────────────────────── */
.card { background: var(--panel); border: 1px solid var(--borde-suave); border-radius: var(--radio); box-shadow: var(--sombra); }
.card-header,
.card-header.bg-primary, .card-header.bg-success, .card-header.bg-info, .card-header.bg-warning {
  background: var(--panel) !important; color: var(--texto) !important;
  border-bottom: 1px solid var(--borde-suave); font-weight: 650; padding: 14px 20px;
}
.card-body { padding: 20px; }
.card-footer { background: var(--panel-2); border-top: 1px solid var(--borde-suave); }
.seccion-titulo { display: flex; align-items: center; gap: 10px; font-size: var(--t-16); font-weight: 650; margin: 0; }
.seccion-titulo .paso {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accion); color: #fff; font-size: var(--t-14); font-weight: 700;
}

/* ── Formularios: etiqueta visible, 44 px, 16 px ────────────────────────── */
label, .form-group label { font-size: var(--t-14); font-weight: 600; color: var(--texto); margin-bottom: 6px; }
.form-control, .custom-select {
  min-height: 44px; font-size: var(--t-16); color: var(--texto); background-color: var(--panel);
  border: 1px solid var(--borde); border-radius: var(--radio-sm);
}
.form-control-sm { min-height: 44px; font-size: var(--t-16); }
.form-control-lg { min-height: 52px; font-size: 1.125rem; }
.form-control:focus { border-color: var(--foco); box-shadow: 0 0 0 3px rgb(11 87 208 / 20%); }
.form-control::placeholder { color: #7b8490; }
.form-text { color: var(--suave); font-size: var(--t-14); }
.input-group-text { background: var(--panel-2); border-color: var(--borde); color: var(--suave); min-height: 44px; }
.input-group > .form-control { min-height: 44px; }
.custom-control-label { font-weight: 500; }

/* ── Tablas: encabezado claro, cifras a la derecha ──────────────────────── */
.table { color: var(--texto); margin: 0; }
.table thead th, .table thead.thead-dark th, .table thead.thead-light th {
  background: var(--panel-2); color: var(--suave); border-top: 0; border-bottom: 1px solid var(--borde);
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 12px 16px;
}
.table td { padding: 12px 16px; border-color: var(--borde-suave); vertical-align: middle; }
.table-hover tbody tr:hover { background: var(--accion-suave); }

/* ── Etiquetas de estado: color + texto, nunca solo color ───────────────── */
.estado { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
  font-size: var(--t-14); font-weight: 600; white-space: nowrap; }
.estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.estado-ok { background: var(--ok-suave); color: var(--ok-hover); }
.estado-aviso { background: var(--advertencia-suave); color: var(--advertencia); }
.estado-peligro { background: var(--peligro-suave); color: var(--peligro); }
.chip { display: inline-block; min-width: 28px; padding: 1px 8px; border: 1px solid var(--borde);
  border-radius: 6px; font-size: var(--t-14); font-weight: 600; text-align: center; background: var(--panel); }
.badge { font-weight: 600; }

/* ── Paginación ─────────────────────────────────────────────────────────── */
.page-link { min-width: 44px; min-height: 44px; display: grid; place-items: center; color: var(--texto);
  border-color: var(--borde); background: var(--panel); }
.page-item.active .page-link { background: var(--accion); border-color: var(--accion); color: #fff; }
.page-link:hover { background: var(--accion-suave); color: var(--texto); }

/* ── Barra lateral: color sólido del negocio (sin degradado que lo tape) ─ */
.sidebar { background-image: none; background-color: var(--brand, #1c2733); padding: 20px 14px; }
.sidebar h2 { font-size: var(--t-20); font-weight: 700; margin-bottom: 16px; }
.sidebar ul li a { color: rgb(255 255 255 / 86%); font-size: .9375rem; padding: 10px 12px; border-radius: var(--radio-sm); }
.sidebar ul li a:hover { background: rgb(255 255 255 / 9%); color: #fff; }
.sidebar ul li a.active, .sidebar .nav-subgroup li a.active {
  background: rgb(255 255 255 / 16%); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 #fff;
}
.sidebar .nav-section-toggle { color: rgb(255 255 255 / 72%); font-size: .75rem; letter-spacing: .06em; }
.sidebar .nav-subgroup { border-left-color: rgb(255 255 255 / 14%); }
.negocio-switch { background: rgb(0 0 0 / 22%); padding: 4px; border-radius: 10px; gap: 4px !important; }
.negocio-switch span, .negocio-switch button {
  border: 0 !important; border-radius: 7px !important; min-height: 36px; font-weight: 700 !important;
}
.negocio-switch span { background: #fff !important; color: var(--brand, #1c2733) !important; }
.negocio-switch button { color: rgb(255 255 255 / 80%) !important; }

/* ── Móvil ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .mobile-topbar { background-color: var(--brand, #1c2733); padding: 6px 12px; min-height: 56px; }
  .mobile-topbar .menu-btn { width: 44px; height: 44px; display: grid; place-items: center; }
  .content { padding: 16px; }
  .encabezado { margin-bottom: 16px; }
}

/* ── Pantalla: Nueva venta ──────────────────────────────────────────────── */
.venta { max-width: 1200px; margin: 0 auto; }
.venta-grid { display: grid; gap: 16px; align-items: start; }
.venta .card { margin: 0; }
.venta-lateral { display: grid; gap: 16px; }
.escaner { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px;
  border: 2px solid var(--accion); border-radius: var(--radio); background: var(--panel); }
.escaner > i { font-size: 1.25rem; color: var(--accion); }
.escaner .form-control { border: 0; box-shadow: none; padding-left: 4px; font-size: 1.125rem; }
.escaner .form-control:focus { box-shadow: none; }
.escaner:focus-within { box-shadow: 0 0 0 3px rgb(11 87 208 / 20%); }
.lineas-encabezado { margin: 20px 0 4px; padding: 0 8px 8px; border-bottom: 1px solid var(--borde);
  color: var(--suave); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.producto-item { margin: 0; padding: 12px 8px; border-color: var(--borde-suave) !important; }
.vacio { display: grid; justify-items: center; gap: 8px; padding: 40px 16px; color: var(--suave); text-align: center; }
.vacio > i { font-size: 2rem; opacity: .5; }
.venta-total .card-body { padding: 16px 20px; }
.total-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.total-fila label { color: var(--suave); font-size: var(--t-16); text-transform: uppercase; letter-spacing: .06em; }
.total-monto { width: auto; min-width: 0; flex: 1; padding: 0; text-align: right; font-size: var(--t-32);
  font-weight: 700; color: var(--texto); }
.total-acciones { display: grid; gap: 8px; margin-top: 12px; }
.total-acciones .btn { width: 100%; }
.venta .form-group:last-of-type { margin-bottom: 12px; }
@media (min-width: 992px) {
  .venta-grid { grid-template-columns: minmax(0, 1fr) 360px; }
  .venta-lateral { position: sticky; top: 16px; }
}
@media (max-width: 991.98px) {
  /* Total y Cobrar siempre a la mano, pegados abajo con fondo opaco */
  .venta-total { position: sticky; bottom: 0; z-index: 20; border-radius: var(--radio) var(--radio) 0 0;
    box-shadow: 0 -6px 18px rgb(16 24 40 / 10%); padding-bottom: env(safe-area-inset-bottom); }
  .venta-total .card-body { padding: 12px 16px; }
  .total-monto { font-size: var(--t-24); }
  .total-acciones { grid-template-columns: auto 1fr; margin-top: 8px; }
  .total-acciones .btn-cobrar { order: 2; }
}

/* ── Pantalla: Productos ────────────────────────────────────────────────── */
.productos { max-width: 1280px; margin: 0 auto; }
.filtros .form-row { row-gap: 4px; }
.tabla-productos .prod-nombre { font-weight: 650; }
.tabla-productos .prod-meta { color: var(--suave); font-size: var(--t-14); }
.tabla-productos .precio { font-weight: 650; }
.tabla-productos td.num, .tabla-productos th.num { text-align: right; }
.acciones-fila { display: inline-flex; gap: 6px; justify-content: flex-end; }
@media (max-width: 767.98px) {
  /* Una tarjeta por producto: nada se corta ni obliga a deslizar de lado */
  .tabla-productos thead { display: none; }
  .tabla-productos, .tabla-productos tbody { display: block; }
  .tabla-productos tr { display: grid; grid-template-columns: 28px 1fr auto; gap: 4px 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--borde-suave); }
  .tabla-productos td { display: block; padding: 0; border: 0; }
  .tabla-productos td.sel { grid-row: 1 / span 3; padding-top: 2px; }
  .tabla-productos td.prod { grid-column: 2; }
  .tabla-productos td.precio-celda { grid-column: 3; grid-row: 1; text-align: right; }
  .tabla-productos td.stock-celda { grid-column: 2; grid-row: 2; }
  .tabla-productos td.acc { grid-column: 3; grid-row: 2; text-align: right; }
  .tabla-productos td.solo-tabla { display: none; }
}
.lineas-encabezado > div { white-space: nowrap; }
@media (max-width: 767.98px) {
  .tabla-productos td.prod { min-width: 0 !important; }
  .tabla-productos tr { grid-template-columns: 24px minmax(0, 1fr) auto; }
}
@media (max-width: 575.98px) {
  .add-product-btn .txt-largo { display: none; }
}
@media (max-width: 900px) {
  .btn-sm { min-height: 44px; }
  .btn-sm.btn-icono { width: 44px; }
  .sidebar ul li a, .negocio-switch span, .negocio-switch button { min-height: 44px; display: flex; align-items: center; }
  .negocio-switch span { justify-content: center; }
  input[type="checkbox"] { width: 22px; height: 22px; }
}

@media (min-width: 768px) {
  .lineas-encabezado.d-md-flex { display: grid !important; grid-template-columns: minmax(0, 1fr) 130px 76px 110px 44px; gap: 12px; }
}
/* Líneas de la venta: grilla propia (la de Bootstrap se aplasta en la columna) */
.producto-item {
  display: grid !important; grid-template-columns: minmax(0, 1fr) 130px 76px 110px 44px; gap: 8px 12px;
  align-items: center; margin: 0;
}
.producto-item > div, .lineas-encabezado > div { max-width: none; width: auto; padding: 0; margin: 0 !important; flex: none; }
.producto-item .input-group, .producto-item .form-control { min-height: 44px; }
.producto-item .product-subtotal { font-variant-numeric: tabular-nums; }
.producto-item .remove-product-btn { width: 44px; min-height: 44px; padding: 0; font-size: 0; }
.producto-item .remove-product-btn i { font-size: 1rem; }
@media (max-width: 767.98px) {
  .producto-item { grid-template-columns: minmax(0, 1fr) 84px 44px; }
  .producto-item > div:nth-child(1) { grid-column: 1 / -1; }
  .producto-item > div:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
}

/* ── Utilidades de color de Bootstrap llevadas a los tokens ─────────────────
   Las plantillas usan las clases text, border, badge y alert por todos lados; aquí
   se mapean al significado de la guía en vez de cambiar 80 plantillas. */
.text-primary { color: var(--accion) !important; }
.text-success { color: var(--ok) !important; }
.text-danger  { color: var(--peligro) !important; }
.text-warning { color: var(--advertencia) !important; }
.text-info, .text-dark { color: var(--texto) !important; }
.text-secondary { color: var(--suave) !important; }
a.text-primary:hover { filter: brightness(.85); }

.card.border-primary, .card.border-success, .card.border-info, .card.border-warning,
.card.border-danger, .card.border-secondary, .card.border-dark { border-color: var(--borde-suave) !important; }
.border-left-primary, .border-left-success, .border-left-info, .border-left-warning { border-left-color: var(--borde) !important; }

.badge-primary { background: var(--accion); color: #fff; }
.badge-success { background: var(--ok-suave); color: var(--ok-hover); }
.badge-warning { background: var(--advertencia-suave); color: var(--advertencia); }
.badge-danger  { background: var(--peligro-suave); color: var(--peligro); }
.badge-info, .badge-secondary, .badge-light, .badge-dark { background: var(--panel-2); color: var(--texto); border: 1px solid var(--borde-suave); }
.badge-pill { padding: .3em .75em; }

.bg-primary:not(.card-header):not(.badge) { background-color: var(--accion) !important; }
.bg-success:not(.card-header):not(.badge) { background-color: var(--ok) !important; }
.bg-info:not(.card-header):not(.badge), .bg-secondary:not(.card-header):not(.badge) { background-color: var(--panel-2) !important; color: var(--texto) !important; }
.bg-warning:not(.card-header):not(.badge) { background-color: var(--advertencia-suave) !important; color: var(--advertencia) !important; }
.bg-danger:not(.card-header):not(.badge) { background-color: var(--peligro) !important; }
.bg-light { background-color: var(--panel-2) !important; }

.alert { border-radius: var(--radio-sm); border: 1px solid var(--borde-suave); color: var(--texto); }
.alert-info, .alert-secondary, .alert-light, .alert-primary { background: var(--panel-2); border-color: var(--borde); }
.alert-success { background: var(--ok-suave); border-color: #b7dfc4; color: #0f5129; }
.alert-warning { background: var(--advertencia-suave); border-color: #ecd59a; color: #5c4100; }
.alert-danger, .alert-error { background: var(--peligro-suave); border-color: #f2b8b2; color: #7a1a12; }

/* Botones de colores sueltos: el amarillo y el cian no son acciones */
.btn-warning, .btn-info, .btn-outline-dark, .btn-outline-info {
  background: var(--panel); border: 1px solid var(--borde); color: var(--texto);
}
.btn-warning:hover, .btn-info:hover, .btn-outline-dark:hover, .btn-outline-info:hover {
  background: var(--accion-suave); border-color: var(--borde); color: var(--texto);
}
.btn-dark { background: var(--accion); border-color: var(--accion); color: #fff; }
.btn-dark:hover { background: var(--accion); color: #fff; filter: brightness(.9); }
.btn-danger:hover { background: #971c13; border-color: #971c13; }

/* Cifras grandes de tableros (h2/h3/h4 dentro de tarjetas de resumen) */
.card-body > h2, .card-body > h3, .card-body > h4 { font-variant-numeric: tabular-nums; }
.card-body > h3, .card-body > .h3 { font-size: var(--t-24); font-weight: 700; }
.card-body > h2, .card-body > .h2 { font-size: var(--t-32); font-weight: 700; }
.list-group-item { border-color: var(--borde-suave); }
.modal-content { border: 0; border-radius: var(--radio); box-shadow: 0 20px 48px rgb(16 24 40 / 22%); }
.modal-header { border-bottom-color: var(--borde-suave); }
.modal-header.bg-danger, .modal-header.bg-success, .modal-header.bg-primary { background: var(--panel) !important; color: var(--texto) !important; }
.modal-header .close.text-white { color: var(--texto) !important; }
.modal-footer { border-top-color: var(--borde-suave); }
.nav-tabs .nav-link.active { color: var(--texto); border-color: var(--borde) var(--borde) var(--panel); font-weight: 600; }
.nav-tabs .nav-link { color: var(--suave); }
.titulo-pantalla small { font-size: var(--t-14); font-weight: 400; }
body.dark-mode .alert-success, body.dark-mode .alert-warning, body.dark-mode .alert-danger { color: var(--texto); border-color: var(--borde); }
.btn-primary.disabled, .btn-primary:disabled { background: var(--accion); border-color: var(--accion); color: #fff; opacity: .7; }
.alert-light { color: var(--texto); }
@media (max-width: 900px) {
  .date-chip { min-height: 44px; }
  #dateRangeTrigger { min-height: 44px; font-size: var(--t-16); }
  .form-control, .form-control-sm { font-size: var(--t-16) !important; }
  td .btn-sm, .btn-group-sm > .btn { min-width: 44px; }
}

/* ── Modo oscuro: el color del negocio suele ser oscuro (FLOW #2c3e50), así
   que sobre fondo oscuro los acentos de texto pasan a un tono claro. ───── */
body.dark-mode {
  --acento-texto: #c7d2fe;
  --ok-hover: #7ee2a8;
  --advertencia: #f2c25b;
  --peligro-texto: #fca5a0;
}
body.dark-mode a, body.dark-mode .btn-fantasma, body.dark-mode .text-primary { color: var(--acento-texto) !important; }
body.dark-mode a.btn-primary, body.dark-mode a.btn-success, body.dark-mode .sidebar a { color: #fff !important; }
body.dark-mode a.btn-secundario, body.dark-mode a.btn-outline-secondary, body.dark-mode .dropdown-item { color: var(--texto) !important; }
body.dark-mode .dropdown-menu { background: var(--panel); border-color: var(--borde); }
body.dark-mode .dropdown-item:hover { background: var(--accion-suave); }
body.dark-mode .dropdown-item.text-danger { color: var(--peligro-texto) !important; }
body.dark-mode .form-control, body.dark-mode .custom-select { background-color: var(--panel-2); border-color: var(--borde); color: var(--texto); }
body.dark-mode .escaner { border-color: var(--acento-texto); background: var(--panel-2); }
body.dark-mode .escaner > i { color: var(--acento-texto); }
body.dark-mode .escaner .form-control { background: transparent; }
body.dark-mode .seccion-titulo .paso { background: var(--acento-texto); color: #10151c; }
body.dark-mode .btn-primary, body.dark-mode .btn-dark, body.dark-mode .page-item.active .page-link {
  background: #3b4a63; border-color: #56688a; }
body.dark-mode .estado-peligro, body.dark-mode .badge-danger, body.dark-mode .text-danger { color: var(--peligro-texto) !important; }
body.dark-mode .chip { background: var(--panel-2); color: var(--texto); }
body.dark-mode .btn-outline-danger { background: var(--panel); color: var(--peligro-texto); }
body.dark-mode .table thead th { background: var(--panel-2); color: var(--suave); }
body.dark-mode .text-success { color: var(--ok-hover) !important; }
.btn-icono { flex: none; }
.list-group-item-light { color: var(--texto); background: var(--panel); }
@media (max-width: 900px) { .btn-sm { min-width: 44px; } }

/* ── Pantalla: Cobrar venta ─────────────────────────────────────────────── */
.metodos-pago { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.metodos-pago .btn { flex-direction: column; gap: 4px; min-height: 64px; padding: 8px 4px; font-size: var(--t-14);
  background: var(--panel); border: 1px solid var(--borde); color: var(--texto); white-space: normal; }
.metodos-pago .btn i { font-size: 1.25rem; color: var(--accion); }
.metodos-pago .btn br { display: none; }
.metodos-pago .btn:hover { background: var(--accion-suave); }
body.dark-mode .metodos-pago .btn i { color: var(--acento-texto); }