/* ==========================================================================
   TRONCOSO SISTEM — Estilos v3.0
   Modo Claro por defecto / Modo Oscuro secundario
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MODO CLARO — BASE (por defecto)
   -------------------------------------------------------------------------- */
:root {
  --bg-app: #f4f6fb;
  --bg-card: #ffffff;
  --bg-input: #f0f2f8;
  --bg-hover: #e8ebf5;
  --border: #dde1ee;
  --border-strong: #c5cbde;
  --text-primary: #1a1d2e;
  --text-secondary: #5a6275;
  --text-muted: #9ba3b8;
  --shadow: 0 1px 8px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.09);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;

  /* Colores funcionales */
  --verde: #16a34a;
  --verde-bg: rgba(22, 163, 74, 0.08);
  --verde-border: rgba(22, 163, 74, 0.2);
  --rojo: #dc2626;
  --rojo-bg: rgba(220, 38, 38, 0.08);
  --rojo-border: rgba(220, 38, 38, 0.2);
  --amarillo: #d97706;
  --amarillo-bg: rgba(217, 119, 6, 0.08);
  --acento: #4f46e5;
  --acento-bg: rgba(79, 70, 229, 0.08);
  /* Anillo del elemento donde está parado el teclado. Fuerte a propósito:
     con todo navegable por flechas, perder de vista el foco es perderse. */
  --foco-ring: rgba(79, 70, 229, 0.4);
  --acento-hover: #4338ca;

  /* Por módulo */
  --mod-ventas: #dc2626;
  --mod-ventas-bg: rgba(220, 38, 38, 0.06);
  --mod-ventas-border: rgba(220, 38, 38, 0.18);
  --mod-compras: #16a34a;
  --mod-compras-bg: rgba(22, 163, 74, 0.06);
  --mod-compras-border: rgba(22, 163, 74, 0.18);
  --mod-stock: #2563eb;
  --mod-stock-bg: rgba(37, 99, 235, 0.06);
  --mod-stock-border: rgba(37, 99, 235, 0.18);
  --mod-clientes: #ea580c;
  --mod-clientes-bg: rgba(234, 88, 12, 0.06);
  --mod-clientes-border: rgba(234, 88, 12, 0.18);
  --mod-cuentas: #0891b2;
  --mod-cuentas-bg: rgba(8, 145, 178, 0.06);
  --mod-cuentas-border: rgba(8, 145, 178, 0.18);
  --mod-mov: #7c3aed;
  --mod-mov-bg: rgba(124, 58, 237, 0.06);
  --mod-mov-border: rgba(124, 58, 237, 0.18);
  /* Proveedores y Reportes no tenían color propio: no había ningún ícono ni
     franja que lo necesitara todavía. Se agregan acá al ponerles ícono de
     módulo, con el mismo criterio de paleta que el resto (colores que no
     se repitan entre sí ni con Clientes/Personal, que ya usan naranja/teal). */
  --mod-proveedores: #9a3412;
  --mod-proveedores-bg: rgba(154, 52, 18, 0.06);
  --mod-proveedores-border: rgba(154, 52, 18, 0.18);
  --mod-reportes: #ca8a04;
  --mod-reportes-bg: rgba(202, 138, 4, 0.06);
  --mod-reportes-border: rgba(202, 138, 4, 0.18);
  --mod-config: #64748b;
}

/* --------------------------------------------------------------------------
   2. MODO OSCURO — OVERRIDE
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg-app: #111318;
  --bg-card: #1a1d24;
  --bg-input: #23262f;
  --bg-hover: #2a2d38;
  --border: #2e3140;
  --border-strong: #3a3f55;
  --text-primary: #f0f2f7;
  --text-secondary: #8b90a0;
  --text-muted: #555b6e;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   3. ANTI-FLASH — transición suave al cargar
   -------------------------------------------------------------------------- */
html {
  background-color: #f4f6fb;
  transition: none;
}
[data-theme="dark"] html,
[data-theme="dark"] body {
  background-color: #111318;
}
body {
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

/* --------------------------------------------------------------------------
   4. RESET Y BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  background-color: var(--bg-app);
  color: var(--text-primary);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   5. LAYOUT PRINCIPAL
   -------------------------------------------------------------------------- */
.contenedor-panel {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 20px 28px 32px;
  gap: 18px;
  max-width: 1600px;
  margin: 0 auto;
}

.full-width {
  width: 100%;
}

/* --------------------------------------------------------------------------
   6. CABECERA DEL PANEL
   -------------------------------------------------------------------------- */
.cabecera-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  gap: 14px;
  flex-wrap: wrap;
}

.cabecera-panel h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.cabecera-panel p {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 2px;
}

.cabecera-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   7. BARRA DE CUENTAS SUPERIOR
   -------------------------------------------------------------------------- */
.barra-cuentas-superior {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  flex-wrap: wrap;
}

.cuentas-lista-mini {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cuenta-item-mini {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.cuenta-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.cuenta-saldo {
  font-size: 13px;
  font-weight: 700;
  color: var(--verde);
}
.cuenta-saldo.negativo {
  color: var(--rojo);
}

/* --------------------------------------------------------------------------
   8. BOTONES GLOBALES
   -------------------------------------------------------------------------- */
.btn-ver-cuentas,
.btn-tema {
  background-color: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-ver-cuentas:hover,
.btn-tema:hover {
  background-color: var(--bg-hover);
}
.btn-tema {
  font-size: 15px;
  padding: 5px 9px;
}

.btn-retorno {
  background-color: var(--bg-input);
  text-decoration: none;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
}
.btn-retorno:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.btn-cerrar {
  background-color: transparent;
  color: var(--rojo);
  border: 1px solid var(--rojo-border);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  transition: background 0.15s;
  text-decoration: none;
}
.btn-cerrar:hover {
  background-color: var(--rojo-bg);
}

/* Botones de acción primaria */
.btn-primario {
  border: none;
  color: white;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition:
    opacity 0.15s,
    transform 0.1s;
  white-space: nowrap;
}
.btn-primario:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
.btn-primario:active {
  transform: translateY(0);
  opacity: 1;
}

.btn-ventas {
  background-color: var(--mod-ventas);
}
.btn-compras {
  background-color: var(--mod-compras);
}
.btn-stock {
  background-color: var(--mod-stock);
}
.btn-clientes {
  background-color: var(--mod-clientes);
}
.btn-cuentas {
  background-color: var(--mod-cuentas);
}
.btn-acento {
  background-color: var(--acento);
}

.btn-secundario {
  background-color: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-secundario:hover {
  background-color: var(--bg-hover);
}

/* --------------------------------------------------------------------------
   9. MENÚ PRINCIPAL (INDEX)
   -------------------------------------------------------------------------- */
/* Las columnas las calcula acomodarMenu() en Index.html según cuántas áreas
   quedaron visibles: hasta 5 por fila y como mucho dos filas. Sin flex-grow,
   porque estiraba los azulejos hasta ocupar toda la altura de la pantalla. */
.malla-botones {
  display: grid;
  /* --columnas-menu la pone acomodarMenu() en index.html según cuántas áreas
     quedaron visibles. Si todavía no la puso, auto-fill decide sola. */
  grid-template-columns: repeat(var(--columnas-menu, auto-fill), minmax(0, 1fr));
  gap: 14px;
  align-content: start;
  /* Todas las filas del mismo alto, aunque la última tenga un solo azulejo
     (2026-08-24). Sin esto cada fila se medía por su propio contenido y
     "Tienda web", que queda solo en la fila 3, salía en 70px contra los
     109px de "Cuentas y Retiros" — se veía notoriamente más fino.
     Es `1fr` y no `flex-grow`: la grilla no tiene alto definido (es un
     item de flex column SIN grow, ver .contenedor-panel), así que `1fr`
     iguala las filas a la más alta y NO estira los azulejos a toda la
     pantalla — que es el problema que en su momento hizo sacar el
     flex-grow. Verificado: 3 filas = 355px de alto total. */
  grid-auto-rows: 1fr;
}

/* El menú arranca oculto y se muestra recién cuando se sabe qué áreas
   corresponden. Si no, se veían todas por un instante y después
   desaparecían las que el comercio no contrató. */
.malla-botones.calculando {
  visibility: hidden;
}

.boton-sector {
  background-color: var(--bg-card);
  text-decoration: none;
  color: var(--text-primary);
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.boton-sector:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* El azulejo donde está parado el teclado. Tiene que leerse de un vistazo
   desde el otro lado del mostrador. */
.boton-sector:focus-visible,
.boton-sector.foco-teclado {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--foco-ring);
  transform: translateY(-2px);
}

.icono {
  font-size: 20px;
  background-color: var(--bg-input);
  padding: 8px;
  border-radius: var(--radius);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.icono svg { width: 100%; height: 100%; }

/* Ícono de cada módulo en el panel principal — SVG vendorizado (Solar Bold
   Duotone, ver HTML/iconos/modulos/), no la caja gris con emoji de antes.
   El color lo pone quien arma el azulejo (`style="color:var(--mod-x)"`):
   como el SVG usa fill="currentColor" en las dos capas del duotone, un
   solo color tiñe la forma entera y su sombreado — no hace falta un
   archivo por color. Sin caja ni fondo: el ícono flota solo, como en el
   ejemplo que pidió Juani. */
.icono-modulo {
  width: 44px;
  height: 44px;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icono-modulo svg { width: 100%; height: 100%; }

/* Mismo SVG que .icono-modulo, pero para ir junto al <h1> de cada pantalla
   (Parte 1 del pedido de íconos, 2026-08-03): que al abrir cualquier módulo,
   el ícono al lado del título sea el mismo que el azulejo del panel. Tamaño
   relativo al texto (em), no fijo en px, para que acompañe si el título
   cambia de tamaño. */
.icono-modulo-header {
  width: 1.3em;
  height: 1.3em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: -0.22em;
  margin-right: 0.15em;
}
.icono-modulo-header svg { width: 100%; height: 100%; }

/* Íconos de acción puntuales (editar, cobrar, pagar, etc. — ver
   iconos-acciones.js), para ir mezclados con texto normal en botones y
   celdas de tabla. Hereda el color del texto que lo rodea (currentColor),
   así un botón rojo, verde o gris tiñe el ícono solo con su propio CSS. */
.icono-accion {
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.15em;
  margin-right: 0.3em;
}
.icono-accion svg { width: 100%; height: 100%; }

.info-sector h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}
.info-sector p {
  color: var(--text-secondary);
  font-size: 12px;
}
/* Contador de pedidos nuevos en el azulejo de Tienda web (2026-08-18) —
   mismo look que .cat-carrito-num del carrito de catalogo.html, pero
   inline (al lado del título) en vez de flotando sobre un ícono. */
.tile-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
  background: var(--rojo); color: #fff; border-radius: 10px;
  font-size: 11px; font-weight: 800; vertical-align: middle;
}

/* --------------------------------------------------------------------------
   10. TARJETAS
   -------------------------------------------------------------------------- */
.tarjeta {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tarjeta.ventas {
  border-top: 3px solid var(--mod-ventas);
}
.tarjeta.compras {
  border-top: 3px solid var(--mod-compras);
}
.tarjeta.stock {
  border-top: 3px solid var(--mod-stock);
}
.tarjeta.clientes {
  border-top: 3px solid var(--mod-clientes);
}
.tarjeta.cuentas {
  border-top: 3px solid var(--mod-cuentas);
}
.tarjeta.movs {
  border-top: 3px solid var(--mod-mov);
}

/* --------------------------------------------------------------------------
   11. FORMULARIOS
   -------------------------------------------------------------------------- */
.formulario {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.formulario label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: -4px;
}

.formulario input,
.formulario select,
.formulario textarea,
.form-input {
  background-color: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  outline: none;
  font-size: 14px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  width: 100%;
  font-family: inherit;
}

.formulario input:focus,
.formulario select:focus,
.form-input:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.formulario input[disabled],
.input-auto {
  background-color: var(--bg-app) !important;
  color: var(--text-secondary);
  cursor: default;
  border-style: dashed;
}

/* --------------------------------------------------------------------------
   12. AUTOCOMPLETADO
   -------------------------------------------------------------------------- */
.autocomplete-wrapper {
  position: relative;
}

.autocomplete-lista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  max-height: 220px;
  overflow-y: auto;
}

.autocomplete-item {
  padding: 9px 12px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.autocomplete-item:last-child {
  border-bottom: none;
}
.autocomplete-item:hover {
  background-color: var(--bg-hover);
}

.codigo-badge {
  font-size: 10px;
  font-weight: 700;
  background-color: var(--bg-input);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: 20px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   13. TABLAS FULL-WIDTH
   -------------------------------------------------------------------------- */
.tabla-wrapper {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.tabla-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
  background-color: var(--bg-card);
}

.tabla-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tabla-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.contenedor-tabla {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 450px;
  background-color: var(--bg-app);
}

.tabla-datos {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabla-datos th {
  background-color: var(--bg-input);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 10px 14px;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 5;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.tabla-datos td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  vertical-align: middle;
}

.tabla-datos tbody tr:last-child td {
  border-bottom: none;
}
.tabla-datos tbody tr:hover {
  background-color: var(--bg-hover);
}

/* Separador de fecha en tabla */
.tr-separador-fecha td {
  background-color: var(--bg-input) !important;
  padding: 6px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-bottom: 2px solid var(--border-strong) !important;
  cursor: default !important;
}
.tr-separador-fecha:hover {
  background-color: var(--bg-input) !important;
}

.label-separador {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.label-separador::before,
.label-separador::after {
  content: "";
  display: inline-block;
  height: 1px;
  width: 24px;
  background-color: var(--border-strong);
}

/* Filtro montado DENTRO del header de la columna que filtra (ej. "Cuenta /
   Medio de pago"), en vez de una barra de <select> aparte arriba de la
   tabla — pedido explícito de Juani, 2026-08-11, quedaba "desproporcionado".
   El <select> real es invisible pero cubre todo el embudo: un click en el
   ícono abre el dropdown nativo del navegador, sin JS de popup propio. */
.th-filtro {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  vertical-align: middle;
}
.th-filtro svg {
  width: 100%;
  height: 100%;
  opacity: 0.55;
  pointer-events: none;
}
.th-filtro.filtro-activo svg {
  opacity: 1;
  color: var(--acento);
}
.th-filtro select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  appearance: none;
}

/* Fila de Total al cierre de cada grupo de día, en las tablas de
   movimientos (ver dbHelpers.insertarSeparadoresConTotal). */
.tr-total-dia td {
  background-color: var(--bg-input) !important;
  padding: 8px 14px !important;
  font-weight: 700 !important;
  border-bottom: 2px solid var(--border-strong) !important;
  cursor: default !important;
}
.tr-total-dia:hover {
  background-color: var(--bg-input) !important;
}

/* Fila de Total general al pie de un listado sin agrupado por día (Stock,
   Clientes, Proveedores, Personal → Empleados). */
.tabla-datos tfoot td {
  background-color: var(--bg-input);
  font-weight: 700;
  padding: 10px 14px;
  border-top: 2px solid var(--border-strong);
  position: sticky;
  bottom: 0;
}

/* --------------------------------------------------------------------------
   14. BUSCADOR DE TABLA
   -------------------------------------------------------------------------- */
.buscador-tabla {
  background-color: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  outline: none;
  font-size: 13px;
  width: 100%;
  min-width: 220px;
  transition: border-color 0.15s;
  font-family: inherit;
}
.buscador-tabla:focus {
  border-color: var(--acento);
}

/* --------------------------------------------------------------------------
   15. FILTROS DE VISTA (tabs)
   -------------------------------------------------------------------------- */
.filtros-tabla {
  display: flex;
  gap: 4px;
}

.btn-filtro {
  background-color: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-filtro:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}
.btn-filtro.activo {
  background-color: var(--mod-clientes);
  border-color: var(--mod-clientes);
  color: white;
}
/* --------------------------------------------------------------------------
   16. BOTONES DENTRO DE TABLAS
   -------------------------------------------------------------------------- */
.btn-tabla {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-tabla:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}
.btn-tabla.cobrar {
  border-color: var(--verde-border);
  color: var(--verde);
}
.btn-tabla.cobrar:hover {
  background-color: var(--verde-bg);
}
.btn-tabla.pagar {
  border-color: var(--rojo-border);
  color: var(--rojo);
}
.btn-tabla.pagar:hover {
  background-color: var(--rojo-bg);
}
.btn-tabla.info {
  border-color: rgba(79, 70, 229, 0.25);
  color: var(--acento);
}
.btn-tabla.info:hover {
  background-color: var(--acento-bg);
}
.btn-tabla.wapp {
  border-color: rgba(37, 211, 102, 0.3);
  color: #16a34a;
}
.btn-tabla.wapp:hover {
  background-color: rgba(37, 211, 102, 0.08);
}
/* Mismo rojo que .btn-peligro (más abajo) — acción destructiva dentro de
   una tabla, ej. eliminar un usuario. */
.btn-tabla.peligro {
  border-color: var(--rojo-border);
  color: var(--rojo);
}
.btn-tabla.peligro:hover {
  background-color: var(--rojo-bg);
}

/* Botón cuadrado de un solo ícono dentro de una tabla — hoy el tachito de
   eliminar en Stock, Clientes, Proveedores y Configuración. Vive acá y no en
   el <style> de una pantalla porque lo usan cuatro; estaba definido solo
   dentro de stock.html y en el resto salía sin estilo, como texto pelado.
   Se pinta de rojo recién al pasar por encima: es destructivo, pero tenerlo
   siempre rojo llenaba la tabla de alarmas. */
.btn-tabla-icon {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.btn-tabla-icon:hover {
  background-color: var(--rojo-bg);
  border-color: var(--rojo-border);
  color: var(--rojo);
}

/* Deshabilitar/activar (el ojito que reemplazó al tachito de eliminar en
   Clientes y Proveedores, 2026-08-10) no es destructivo — no se pierde
   nada, se puede reactivar — así que no se pinta de rojo al pasar por
   encima como el resto de .btn-tabla-icon. */
.btn-tabla-icon.icono-ojo:hover {
  background-color: var(--acento-bg);
  border-color: rgba(79, 70, 229, 0.25);
  color: var(--acento);
}
.btn-tabla-icon.icono-ojo.activo {
  background-color: var(--acento-bg);
  border-color: var(--acento);
  color: var(--acento);
}

/* Celdas editables */
.celda-editable {
  cursor: pointer;
  position: relative;
}
.celda-editable:hover {
  background-color: var(--bg-hover);
}
.celda-editable:hover::after {
  content: "✎";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--text-muted);
}
.celda-input-inline {
  background-color: var(--bg-card);
  border: 1px solid var(--acento);
  color: var(--text-primary);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  width: 100%;
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
  font-family: inherit;
}

/* --------------------------------------------------------------------------
   17. CARRITO (VENTAS / COMPRAS)
   -------------------------------------------------------------------------- */
.carrito-panel {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.carrito-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  background-color: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.carrito-body {
  flex: 1;
  overflow-y: auto;
  max-height: 280px;
}

.carrito-item {
  display: grid;
  grid-template-columns: 1fr 60px 80px 28px;
  gap: 8px;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  transition: background 0.1s;
}
.carrito-item:hover {
  background-color: var(--bg-hover);
}
.carrito-item:last-child {
  border-bottom: none;
}
.carrito-item-nombre {
  font-weight: 600;
}
.carrito-item-total {
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}
.carrito-item-remove {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  text-align: center;
  transition: color 0.1s;
}
.carrito-item-remove:hover {
  color: var(--rojo);
}

.carrito-footer {
  border-top: 2px solid var(--border-strong);
  padding: 12px 16px;
  background-color: var(--bg-input);
}

.carrito-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 800;
}
.carrito-total-label {
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
}
.carrito-total-amount-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   18. BADGES DE STOCK
   -------------------------------------------------------------------------- */
.badge-stock {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.badge-ok {
  background-color: var(--verde-bg);
  color: var(--verde);
  border: 1px solid var(--verde-border);
}
.badge-bajo {
  background-color: var(--amarillo-bg);
  color: var(--amarillo);
  border: 1px solid rgba(217, 119, 6, 0.2);
}
.badge-critico {
  background-color: var(--rojo-bg);
  color: var(--rojo);
  border: 1px solid var(--rojo-border);
}

/* --------------------------------------------------------------------------
   19. MODALES
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-box {
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  padding: 22px;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 460px;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Un formulario largo (registrar usuario, editar empleado) se pasaba del
     alto de la pantalla y el botón de guardar quedaba fuera de vista, sin
     forma de llegar. Ahora el modal se queda dentro de la ventana y hace
     scroll por adentro. */
  max-height: 88vh;
  overflow-y: auto;
}
.modal-box.wide {
  max-width: 620px;
}

@keyframes modalIn {
  from {
    transform: scale(0.94) translateY(8px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

.modal-box h3 {
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.modal-cerrar {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s;
  background: none;
  border: none;
}
.modal-cerrar:hover {
  color: var(--text-primary);
}

/* Botones ícono del header de un modal (ej. modalidad de talle/categoría en
   Editar Producto de Stock, 2026-08-18): a la izquierda de la ✕, mismo
   tamaño/opacidad que ella a propósito, para no competir con el botón
   primario de abajo. */
.modal-header-acciones {
  position: absolute;
  top: 14px;
  right: 48px;
  display: flex;
  gap: 8px;
}
.modal-header-accion {
  background: none;
  border: none;
  color: var(--text-muted);
  opacity: 0.6;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  transition: opacity 0.15s, color 0.15s;
}
.modal-header-accion:hover {
  opacity: 1;
  color: var(--acento);
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.modal-form label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal-form input,
.modal-form select {
  background-color: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  outline: none;
  font-size: 14px;
  width: 100%;
  transition: border-color 0.15s;
  font-family: inherit;
}
.modal-form input:focus,
.modal-form select:focus {
  border-color: var(--acento);
}

.modal-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background-color: var(--bg-input);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 13px;
}
.modal-info-row span:first-child {
  color: var(--text-secondary);
  font-weight: 600;
}
.modal-info-row span:last-child {
  font-weight: 700;
}

.modal-resultado {
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid;
}
.modal-resultado.positivo {
  color: var(--verde);
  background: var(--verde-bg);
  border-color: var(--verde-border);
}
.modal-resultado.negativo {
  color: var(--rojo);
  background: var(--rojo-bg);
  border-color: var(--rojo-border);
}

/* Compat modal-flotante de db.js */
.modal-flotante {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.modal-contenido {
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  padding: 26px;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 460px;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-cerrar-icon {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s;
}
.modal-cerrar-icon:hover {
  color: var(--text-primary);
}
.modal-lista-cuentas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.modal-cuenta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  background-color: var(--bg-input);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.modal-cuenta-saldo {
  font-weight: 700;
  color: var(--verde);
}
.modal-checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 13px;
  gap: 8px;
}
/* Checkbox dentro de un .modal-form (ej. Registrar Producto → "Descontar el
   costo de una cuenta"): `.modal-form label`/`.modal-form input` generalizan
   para campos de texto (mayúsculas 11px, ancho 100%, fondo y borde de input)
   y sin este reset pisan cualquier <label>/<input> que se agregue ahí,
   estirando el checkbox a lo ancho y encogiendo el texto. Texto a la
   izquierda en una sola línea, checkbox a la derecha. */
.modal-form .modal-form-checkbox-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-primary);
  white-space: nowrap;
}
.modal-form-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  accent-color: var(--acento);
  cursor: pointer;
}
/* --------------------------------------------------------------------------
   20. TARJETAS DE CUENTA (Cuentas y Retiros)
   -------------------------------------------------------------------------- */
.cuenta-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.cuenta-card-nombre {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Chip del local de una cuenta acotada (2026-08-16): acá va DESPUÉS del
   nombre, al revés que en Ventas o en el extracto, así que el margen de
   .chip-sucursal (pensado para ir adelante) queda del lado equivocado. */
.cuenta-card-nombre .chip-sucursal {
  margin-right: 0;
  margin-left: 6px;
}
.cuenta-card-saldo {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
}
.cuenta-card-saldo.negativo {
  color: var(--rojo);
}
.cuenta-card-acciones {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   21. MÓDULO REPORTES — MÉTRICAS
   -------------------------------------------------------------------------- */
.metricas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.metrica-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.metrica-label {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}
.metrica-valor {
  font-size: 24px;
  font-weight: 800;
}
.metrica-card.borde-verde { border-top: 3px solid var(--verde); }
.metrica-card.borde-acento { border-top: 3px solid var(--acento); }
.metrica-card.borde-amarillo { border-top: 3px solid var(--amarillo); }
.metrica-card.borde-ventas { border-top: 3px solid var(--mod-ventas); }
.metrica-valor-chico {
  margin-top: 6px;
  font-size: 16px;
}
.max-h-480 {
  max-height: 480px;
}

/* --------------------------------------------------------------------------
   22. LOGIN
   -------------------------------------------------------------------------- */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0f4ff 0%, #f8faff 50%, #eff6ff 100%);
  padding: 20px;
}
[data-theme="dark"] .login-page {
  background: linear-gradient(135deg, #0f1117 0%, #111318 60%, #0d1321 100%);
}
.login-card {
  background: white;
  border: 1px solid #e5e9f5;
  border-radius: 20px;
  padding: 44px 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 8px 48px rgba(79, 70, 229, 0.1);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
[data-theme="dark"] .login-card {
  background: #1a1d24;
  border-color: #2e3140;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.4);
}
.login-logo {
  text-align: center;
  margin-bottom: 4px;
}
.login-logo h1 {
  font-size: 22px;
  font-weight: 800;
  color: var(--acento);
  letter-spacing: -0.5px;
}
.login-logo p {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-form label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 5px;
}
.login-form input {
  width: 100%;
  background: #f4f6fb;
  border: 1.5px solid #e0e5f0;
  color: #1a1d2e;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  font-family: inherit;
}
[data-theme="dark"] .login-form input {
  background: #23262f;
  border-color: #2e3140;
  color: #f0f2f7;
}
.login-form input:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.btn-login {
  background: var(--acento);
  color: white;
  border: none;
  padding: 13px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition:
    opacity 0.15s,
    transform 0.1s;
  letter-spacing: 0.3px;
  font-family: inherit;
  margin-top: 4px;
}
.btn-login:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
.login-bg-deco {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.deco-circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.08) 0%, transparent 70%);
}
.deco-1 {
  width: 600px;
  height: 600px;
  top: -200px;
  right: -150px;
}
.deco-2 {
  width: 400px;
  height: 400px;
  bottom: -100px;
  left: -100px;
}
.deco-3 {
  width: 300px;
  height: 300px;
  top: 50%;
  left: 40%;
}
.login-card {
  position: relative;
  z-index: 1;
}
.login-tagline {
  font-size: 11px;
  text-align: center;
  color: var(--text-muted);
  margin-top: 12px;
}
.login-logo-icon {
  width: 36px;
  height: 36px;
  margin: 0 auto 8px;
}
.login-logo-icon svg {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   23. DASHBOARD DE BIENVENIDA
   -------------------------------------------------------------------------- */
.bienvenida-header {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.25);
}
.bienvenida-header h2 {
  font-size: 20px;
  font-weight: 700;
}
.bienvenida-header p {
  font-size: 13px;
  opacity: 0.85;
  margin-top: 3px;
}
.caja-resumen {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 14px 20px;
  text-align: center;
  min-width: 140px;
}
.caja-resumen-label {
  font-size: 11px;
  text-transform: uppercase;
  opacity: 0.8;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.caja-resumen-valor {
  font-size: 24px;
  font-weight: 800;
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   24. UTILIDADES
   -------------------------------------------------------------------------- */
.monto-positivo {
  color: var(--verde);
  font-weight: 700;
}
.monto-negativo {
  color: var(--rojo);
  font-weight: 700;
}
.monto-ganancia {
  color: #16a34a;
  font-weight: 700;
}
.font-bold {
  font-weight: 700;
}
.text-sm {
  font-size: 12px;
}
.text-muted {
  color: var(--text-muted);
}
.text-center {
  text-align: center;
}
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}
.msg-error-oculto {
  color: var(--rojo);
  display: none;
  margin: 0;
}
.m-0 {
  margin: 0;
}
.font-semibold {
  font-weight: 600;
}
.p-24 {
  padding: 24px;
}
.mt-4 {
  margin-top: 4px;
}
.mt-8 {
  margin-top: 8px;
}
.mt-6 {
  margin-top: 6px;
}
.mt-10 {
  margin-top: 10px;
}
.mt-12 {
  margin-top: 12px;
}
.mt-16 {
  margin-top: 16px;
}
.text-secondary {
  color: var(--text-secondary);
}
.text-rojo {
  color: var(--rojo);
}
.text-verde {
  color: var(--verde);
}
/* Columna de dos líneas apiladas y alineadas a la derecha, adentro de un
   .modal-info-row (ej. el badge de arqueo arriba del monto a repartir,
   ver abrirReparto() en cuentas.html). */
.modal-info-der-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.m-0-0-10 {
  margin: 0 0 10px;
}
.m-6-0-12 {
  margin: 6px 0 12px;
}
.m-neg4-0-8 {
  margin: -4px 0 8px;
}
.m-neg4-0-0 {
  margin: -4px 0 0;
}
.m-8-0-0 {
  margin: 8px 0 0;
}
.m-8-0-14 {
  margin: 8px 0 14px;
}
.mt-14 {
  margin-top: 14px;
}
.p-28 {
  padding: 28px;
}
.max-h-600 {
  max-height: 600px;
}
.max-w-640 {
  max-width: 640px;
}
.mr-0 {
  margin-right: 0;
}
.text-decoration-none {
  text-decoration: none;
}
.text-transform-none {
  text-transform: none;
}
.svg-full {
  width: 100%;
  height: 100%;
}
.max-w-680 {
  max-width: 680px;
}
/* Select de filtro chico, metido en línea junto al título de una tabla
   (ej: filtro de categoría en Stock, de área en Personal). */
.select-compacto {
  width: auto;
  margin: 0;
  padding: 5px 9px;
  font-size: 12px;
}

/* Modal de importación masiva (Compra/Alta masiva). */
.stock-imp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.stock-imp-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}
.stock-dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-secondary);
}
.stock-dropzone-icono {
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
  color: var(--text-secondary);
}
.stock-preview-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 34vh;
  overflow: auto;
}
.stock-lista-scroll-48 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 48vh;
  overflow: auto;
}
.stock-lista-scroll-48.gap-14 {
  gap: 14px;
}
.btn-peligro {
  color: var(--rojo);
  border-color: var(--rojo-border);
}
.flex-1 {
  flex: 1;
}
/* Título chico y en mayúsculas dentro de una .tabla-header (ej: "Historial
   de Compras"), repetido igual en varias pantallas. */
.tabla-header-titulo {
  font-size: 13px;
  font-weight: 700;
}
/* Etiqueta chica gris en mayúsculas, usada arriba de un bloque o sección
   (no confundir con .campo-label, que es dentro de un campo de formulario). */
.etiqueta-chica {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}
.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Color de texto por módulo, mismo criterio que .btn-<modulo> (fondo). */
.color-ventas { color: var(--mod-ventas); }
.color-compras { color: var(--mod-compras); }
.color-stock { color: var(--mod-stock); }
.color-clientes { color: var(--mod-clientes); }
.color-cuentas { color: var(--mod-cuentas); }
.color-mov { color: var(--mod-mov); }
.color-proveedores { color: var(--mod-proveedores); }
.color-reportes { color: var(--mod-reportes); }
.color-config { color: var(--mod-config); }
.color-personal { color: var(--mod-personal); }
.color-admin { color: var(--mod-admin); }
.color-tienda { color: var(--mod-tienda); }

/* --------------------------------------------------------------------------
   25. RESPONSIVE
   -------------------------------------------------------------------------- */
/* Dos cortes: 900px = tablet y celular apaisado; 640px = celular parado.
   Todo lo de acá es presentación — ninguna regla esconde botones ni cambia
   qué se puede hacer, solo cómo se acomoda. Lo que en una pantalla grande
   son dos columnas, en uno chico se apila. */

@media (max-width: 900px) {
  .contenedor-panel {
    padding: 14px 16px 24px;
  }
  .cabecera-panel {
    flex-direction: column;
    align-items: stretch;
  }
  .cabecera-acciones {
    width: 100%;
  }
  /* El menú del panel: acá gana el CSS por sobre --columnas-menu, que la
     calcula acomodarMenu() pensando en una pantalla ancha. */
  .malla-botones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bienvenida-header {
    flex-direction: column;
    align-items: stretch;
  }
  .metricas-grid,
  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .barra-cuentas-superior {
    width: 100%;
  }
  /* La tabla ocupa casi todo el alto útil: en un celular no hay lugar para
     que le sobre pantalla abajo. */
  .contenedor-tabla {
    max-height: 62vh;
  }
  .tabla-header {
    align-items: stretch;
  }
  .tabla-header-right,
  .tabla-header-right .buscador-tabla {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .contenedor-panel {
    padding: 12px 12px 20px;
  }
  .malla-botones {
    grid-template-columns: minmax(0, 1fr);
  }

  /* DEDO, NO MOUSE
     44px es el mínimo que se toca sin errarle. Los botones de tabla estaban
     pensados para el mouse (11px de texto, 4px de alto de padding) y en un
     celular son casi imposibles de acertar. */
  .btn-tabla,
  .btn-filtro {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 12px;
  }
  .btn-tabla-icon {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
  .btn-primario,
  .btn-volver-panel,
  .btn-cerrar {
    min-height: 44px;
  }

  /* SIN ZOOM AL TOCAR UN CAMPO
     iOS agranda la página sola cuando el campo tiene menos de 16px, y
     después la deja agrandada: el formulario queda cortado a la mitad. */
  .formulario input,
  .formulario select,
  .formulario textarea,
  .form-input,
  .modal-form input,
  .modal-form select,
  .modal-form textarea,
  .buscador-tabla {
    font-size: 16px;
    min-height: 44px;
  }

  /* Los modales pasan a ocupar la pantalla: en 360px de ancho, 22px de
     margen a cada lado se comen el formulario. */
  .modal-overlay {
    padding: 8px;
    align-items: flex-start;
  }
  .modal-box,
  .modal-contenido {
    padding: 16px;
    max-width: 100%;
    max-height: 94vh;
  }
  .modal-box.wide {
    max-width: 100%;
  }

  .filtros-tabla {
    flex-wrap: wrap;
  }
  .carrito-item {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
  }
  .contenedor-tabla {
    max-height: 58vh;
  }
  /* La tabla no se achica hasta romper el texto: se desliza de costado
     dentro de su propio recuadro (.contenedor-tabla ya tiene overflow-x). */
  .tabla-datos {
    min-width: 560px;
  }
  .cabecera-panel h1 {
    font-size: 17px;
  }

  /* ESTILOS ESCRITOS EN EL HTML
     Un puñado de elementos traen el ancho puesto a mano (por atributo
     `style` o, desde la Fase 2 del refactor, por una clase real como
     .grid-2col), y eso le gana a cualquier regla de acá si no se anula.

     a) Las parejas de campos que van de a dos en los modales (precio/costo,
        nombre/saldo, cantidad/talle) pasan a uno debajo del otro. */
  .modal-box [style*="grid-template-columns"],
  .modal-form [style*="grid-template-columns"],
  .grid-2col {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* b) Los buscadores de tabla con ancho fijo (300px, 340px) se pasaban del
        ancho de la pantalla y empujaban toda la fila. */
  .buscador-tabla[style*="width"],
  .buscador-mov-cuentas,
  .buscador-mov-global {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   26. PANEL DE SUPERADMIN (plataforma)
   Color propio para que nunca se confunda una pantalla de la plataforma
   con una del comercio: acá se administran clientes, planes y cobros.
   -------------------------------------------------------------------------- */
:root {
  --mod-admin: #db2777;
  --mod-admin-bg: rgba(219, 39, 119, 0.06);
  --mod-admin-border: rgba(219, 39, 119, 0.18);
}
[data-theme="dark"] {
  --mod-admin: #f472b6;
  --mod-admin-bg: rgba(244, 114, 182, 0.08);
  --mod-admin-border: rgba(244, 114, 182, 0.22);
}

.btn-admin {
  background-color: var(--mod-admin);
}

/* Franja que identifica cada pantalla de plataforma */
.cabecera-admin {
  border-top: 3px solid var(--mod-admin);
  padding-top: 14px;
}

.badge-neutro {
  background-color: var(--bg-input);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* Navegación entre las secciones del panel */
.admin-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.admin-nav a {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.admin-nav a:hover {
  border-color: var(--mod-admin-border);
  color: var(--text-primary);
}
.admin-nav a.activo {
  background: var(--mod-admin-bg);
  border-color: var(--mod-admin);
  color: var(--mod-admin);
}

/* Tarjetas de resumen arriba de cada pantalla */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.admin-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.admin-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.admin-stat-valor {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
}
.admin-stat-valor.alerta { color: var(--rojo); }
.admin-stat-valor.ok     { color: var(--verde); }

/* Alta en pasos: el indicador de en cuál estoy */
.wizard-pasos {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.wizard-paso {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}
.wizard-paso .num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  background: var(--bg-input);
  font-size: 11px;
}
.wizard-paso.activo { color: var(--mod-admin); }
.wizard-paso.activo .num {
  background: var(--mod-admin);
  border-color: var(--mod-admin);
  color: #fff;
}
.wizard-paso.hecho .num {
  background: var(--verde-bg);
  border-color: var(--verde);
  color: var(--verde);
}
.wizard-linea {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Grilla de módulos para tildar en el alta y en los planes */
.modulos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
}
.modulo-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.modulo-check:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}
.modulo-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0;
  padding: 0;
  flex: none;
  accent-color: var(--mod-admin);
  cursor: pointer;
}
.modulo-check:has(input:checked) {
  border-color: var(--mod-admin);
  background: var(--mod-admin-bg);
}

/* Bloque de instrucciones: el paso manual en Supabase que todavía hace falta */
.admin-aviso {
  border: 1px solid var(--amarillo);
  background: var(--amarillo-bg);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
}
.admin-aviso strong { color: var(--amarillo); }
.admin-aviso ol { margin: 8px 0 0 18px; padding: 0; }
.admin-aviso li { margin-bottom: 4px; }
.admin-aviso code {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  user-select: all;
}

/* Estado de carga y error, para que una pantalla vacía nunca sea ambigua */
.admin-cargando,
.admin-error {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}
.admin-error {
  color: var(--rojo);
  background: var(--rojo-bg);
  border: 1px solid var(--rojo-border);
  border-radius: var(--radius-sm);
  text-align: left;
}

/* --------------------------------------------------------------------------
   27. PERSONAL / RRHH
   Color propio, igual que el resto de los módulos. Los empleados son
   usuarios reales del sistema: acá se les da acceso y se les paga.
   -------------------------------------------------------------------------- */
:root {
  --mod-personal: #0d9488;
  --mod-personal-bg: rgba(13, 148, 136, 0.06);
  --mod-personal-border: rgba(13, 148, 136, 0.18);
}
[data-theme="dark"] {
  --mod-personal: #2dd4bf;
  --mod-personal-bg: rgba(45, 212, 191, 0.08);
  --mod-personal-border: rgba(45, 212, 191, 0.22);
}

.btn-personal {
  background-color: var(--mod-personal);
}

.btn-filtro.activo-personal {
  background-color: var(--mod-personal);
  border-color: var(--mod-personal);
  color: #fff;
}

/* Las áreas habilitadas de un empleado, en la fila de la tabla. Se cortan
   a unas pocas para que la fila no crezca de más; el resto se ve en Detalle. */
.areas-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.area-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--mod-personal-bg);
  color: var(--mod-personal);
  border: 1px solid var(--mod-personal-border);
  white-space: nowrap;
}
.area-chip.resto {
  background: var(--bg-input);
  color: var(--text-muted);
  border-color: var(--border);
}

/* Sucursal(es) en las que puede operar un empleado. Color propio (azul
   Stock) para no confundirse de un vistazo con los chips de "Áreas". */
.sucursal-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--mod-stock-bg);
  color: var(--mod-stock);
  border: 1px solid var(--mod-stock-border);
  white-space: nowrap;
}
.sucursal-chip.todas {
  background: var(--bg-input);
  color: var(--text-secondary);
  border-color: var(--border);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   28. ORDEN POR COLUMNA
   Cualquier encabezado ordena la tabla. La flecha dice en qué estado está:
   ↕ sin ordenar, ▲ ascendente, ▼ descendente. El tercer clic vuelve al
   orden original, así el mismo botón que ordena es el que restablece.
   -------------------------------------------------------------------------- */
table.tabla-datos thead th,
table.tabla-registros thead th {
  user-select: none;
  transition: color 0.15s, background-color 0.15s;
}
table.tabla-datos thead th:hover,
table.tabla-registros thead th:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}
th.th-ordenado {
  color: var(--acento) !important;
}

/* --------------------------------------------------------------------------
   29. LAYOUT COMÚN DE TODOS LOS MÓDULOS
   Cada pantalla se abre igual, para que el ojo no tenga que reaprender dónde
   está cada cosa al cambiar de módulo:

     ┌──────────────────────────────────────────────┐
     │ Título del módulo              [🌙] [← Panel] │  cabecera
     │ subtítulo                                     │
     ├──────────────────────────────────────────────┤
     │ [Acción 1] [Acción 2] [Acción 3]              │  barra-acciones
     ├──────────────────────────────────────────────┤
     │ tabla                                         │
     └──────────────────────────────────────────────┘

   Los saldos de las cuentas ya no se repiten acá: viven solo en el panel
   principal (lo decide renderHeader() en db.js).
   -------------------------------------------------------------------------- */
.barra-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Volver al panel: mismo lugar y mismo peso visual que Cerrar Sesión en el
   panel principal, así la salida está siempre donde uno la busca. */
.btn-volver-panel {
  background-color: transparent;
  color: var(--rojo);
  border: 1px solid var(--rojo-border);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  transition: background 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn-volver-panel:hover {
  background-color: var(--rojo-bg);
}
.btn-volver-panel:focus-visible,
.btn-volver-panel.foco-teclado {
  outline: none;
  box-shadow: 0 0 0 3px var(--rojo-bg);
}

/* El elemento donde está parado el teclado, en botones y enlaces */
.foco-teclado {
  outline: none;
  box-shadow: 0 0 0 3px var(--foco-ring);
}

/* El título de sección donde está parado el teclado en Configuración */
summary:focus-visible,
summary.foco-teclado {
  outline: none;
  box-shadow: inset 3px 0 0 var(--acento);
  background-color: var(--bg-hover);
}

/* Etiqueta de categoría en la tabla de Stock */
.cat-etiqueta-tabla {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 12px;
  background: var(--acento-bg);
  color: var(--acento);
  white-space: nowrap;
}

/* Fila de permisos por sucursal en Personal: "Operar" + "Encargado/a".
   Encargado va deshabilitada hasta tildar Operar (no se administra un
   local donde ni siquiera se puede trabajar). */
.sucursal-permiso-fila {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.sucursal-permiso-fila .modulo-check {
  flex: 1;
}
.chk-encargado-label:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Selector de sucursal en la cabecera. Solo aparece si la persona tiene
   acceso a más de un local. Se destaca porque cambiarlo cambia de qué
   local salen y entran TODOS los datos de la pantalla. */
.selector-sucursal {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--acento);
  background-color: var(--acento-bg);
  color: var(--acento);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  max-width: 200px;
}
.selector-sucursal:focus-visible,
.selector-sucursal.foco-teclado {
  outline: none;
  box-shadow: 0 0 0 3px var(--foco-ring);
}

/* ============================================================
   ÍCONO DE SECCIÓN (Configuración, Ajustes de la plataforma)
   El SVG va suelto adentro de este span (sin pasar por .icono-accion),
   así que necesita su propio tamaño — si no, el navegador lo dibuja a su
   tamaño por defecto (300×150) y rompe el acordeón.
============================================================ */
.config-icono { display: inline-flex; width: 1.35em; height: 1.35em; vertical-align: -0.32em; }
.config-icono > svg { width: 100%; height: 100%; }

/* Distintivo de sucursal — texto libre ("1", "Centro"...) en el color del
   local. En Ventas y Cuentas la vista es unificada entre sucursales: sin
   esto, dos filas parecidas de locales distintos se ven exactamente iguales.
   Es una pastilla que crece con el texto (no un círculo de un solo
   carácter), porque el distintivo puede ser una palabra entera.
   El color entra por la variable --suc-color, que la pone cada fila. */
.chip-sucursal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 90px;
  padding: 2px 7px;
  margin-right: 6px;
  border-radius: 8px;
  background-color: var(--suc-color, #7c3aed);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Mismo patrón que .chip-sucursal (pastilla de color), pero de color fijo
   (--mod-tienda) porque no depende de ninguna sucursal — marca que una
   venta o movimiento vino de un pedido de la tienda web (2026-08-24, ver
   dbHelpers.chipWebHTML() en db.js). Ventas, Movimientos y Cuentas y
   Retiros. */
.chip-web {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  margin-right: 6px;
  border-radius: 8px;
  background-color: var(--mod-tienda);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Aviso de límite de deuda en el cierre de venta. Es amarillo y no rojo a
   propósito: no bloquea nada, avisa. La decisión de fiarle igual es del
   comercio. */
.aviso-limite {
  background-color: var(--amarillo-bg);
  color: var(--amarillo);
  border: 1px solid var(--amarillo);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

/* Color propio del módulo Tienda web (Pedidos + Catálogo público) — mismo
   patrón que --mod-admin/--mod-personal: un :root aparte, cerca de su
   sección, en vez de sumarlo al bloque grande del principio del archivo. */
:root {
  --mod-tienda: #65a30d;
  --mod-tienda-bg: rgba(101, 163, 13, 0.06);
  --mod-tienda-border: rgba(101, 163, 13, 0.18);
}
[data-theme="dark"] {
  --mod-tienda: #a3e635;
  --mod-tienda-bg: rgba(163, 230, 53, 0.08);
  --mod-tienda-border: rgba(163, 230, 53, 0.22);
}

/* --------------------------------------------------------------------------
   30. CATÁLOGO — LA VITRINA
   Pensada para el celular del cliente antes que para la pantalla del
   local: es donde se va a mirar. En escritorio crece a más columnas.
   -------------------------------------------------------------------------- */
.cat-cuerpo { max-width: 1400px; margin: 0 auto; padding: 0 14px 90px; }

/* Solo el buscador queda fijo al bajar. Categorías, orden y vista se van
   con el scroll: si todo quedara pegado arriba, comía media pantalla y
   dejaba ver muy pocos productos al bajar — justo lo que se quiere evitar. */
.cat-buscador-fijo {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg-app);
  padding: 10px 0;
}
.cat-resto-barra {
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.cat-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0;
}
.cat-marca { display: flex; align-items: center; gap: 10px; }
.cat-logo {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--acento); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 17px; flex-shrink: 0;
}
.cat-marca h1 { font-size: 21px; font-weight: 800; letter-spacing: -0.4px; }

.cat-carrito-btn {
  position: relative; background: none; border: none; cursor: pointer;
  font-size: 26px; line-height: 1; padding: 4px;
}
.cat-carrito-num {
  position: absolute; top: -2px; right: -4px;
  background: var(--rojo); color: #fff;
  min-width: 19px; height: 19px; border-radius: 10px;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
}

.cat-buscador {
  width: 100%; padding: 13px 16px;
  border: 1px solid var(--border-strong); border-radius: 12px;
  background: var(--bg-card); color: var(--text-primary);
  font-family: inherit; font-size: 15px;
}
.cat-buscador:focus { outline: none; border-color: var(--acento); }

/* Las categorías se deslizan al costado, como en cualquier tienda del celular */
.cat-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chip {
  padding: 9px 17px; border-radius: 22px;
  border: 1px solid var(--border-strong); background: var(--bg-card);
  font-size: 13px; font-weight: 700; color: var(--text-secondary);
  cursor: pointer; white-space: nowrap; font-family: inherit;
  transition: all 0.15s;
}
.cat-chip:hover { border-color: var(--acento); }
.cat-chip.activo { background: var(--acento); border-color: var(--acento); color: #fff; }

.cat-herramientas { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cat-orden {
  padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--bg-card);
  color: var(--text-primary); font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
}
/* --- Grilla de productos ---
   Hasta 6 por fila en pantallas anchas: se ve de un vistazo mucho más
   catálogo sin tener que desplazarse tanto. */
.cat-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
@media (min-width: 600px)  { .cat-grilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px)  { .cat-grilla { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .cat-grilla { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1320px) { .cat-grilla { grid-template-columns: repeat(6, 1fr); } }

.cat-item {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow 0.15s, border-color 0.15s;
  position: relative;
}
.cat-item:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.cat-item.elegido { border-color: var(--acento); box-shadow: 0 0 0 2px var(--foco-ring); }

.cat-foto {
  width: 100%; aspect-ratio: 1;
  background: var(--bg-input);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.cat-foto img { width: 100%; height: 100%; object-fit: contain; }
.cat-foto .sin-foto { font-size: 38px; opacity: 0.28; }

/* El lápiz para ponerle foto va ARRIBA a la derecha (antes estaba abajo
   y chocaba con los talles, que ahora ocupan todo el pie de la foto). */
.cat-lapiz {
  position: absolute; top: 7px; right: 7px;
  width: 33px; height: 33px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border-strong);
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); padding: 0; z-index: 2;
}
.cat-lapiz:hover { background: var(--acento); border-color: var(--acento); }

.cat-tilde {
  position: absolute; top: 8px; left: 8px;
  width: 25px; height: 25px; border-radius: 50%;
  border: 2px solid var(--border-strong); background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: transparent; z-index: 2;
}
.cat-item.elegido .cat-tilde { background: var(--acento); border-color: var(--acento); color: #fff; }

/* Modal "Fotos de <producto>" — varias fotos por producto en Storage,
   ver supabase/052_producto_fotos.sql. */
.mf-grilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}
.mf-foto {
  position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  background: var(--bg-input); border: 1px solid var(--border);
}
.mf-foto img { width: 100%; height: 100%; object-fit: cover; }
.mf-foto-quitar {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border-strong);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.mf-foto-quitar:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; }

/* "Ver más productos" — paginado de la tienda pública, ver
   docs/specs/2026-08-27-auditoria-tienda-web.md → A-1. */
.cat-cargar-mas-cont { display: flex; justify-content: center; margin-top: 18px; }

/* flex:1 + el botón con margin-top:auto: si una tarjeta vecina tiene un
   nombre más largo (2 líneas) y la grilla las estira parejo, el botón
   de Agregar igual queda pegado abajo en las dos, en vez de quedar a
   mitad de tarjeta con un hueco debajo. */
.cat-datos { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.cat-nombre { font-size: 13px; font-weight: 600; color: var(--text-secondary); line-height: 1.3; }
.cat-precio { font-size: 17px; font-weight: 800; color: var(--text-primary); }
.cat-agotado { font-size: 13px; font-weight: 700; color: var(--rojo); }
/* El color de cada categoría lo pone JS (colorCategoria()), reutilizando
   la misma paleta de colores por módulo que ya usa el resto del sistema.
   Acá solo va la forma. */
.cat-etiqueta {
  display: inline-block; align-self: flex-start;
  font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 12px;
  border: 1px solid transparent;
}

/* Talles disponibles, flotando sobre el pie de la foto (adentro de
   .cat-foto, que ya es position:relative). Van ahí y no en el flujo
   normal de la tarjeta para que la cantidad de talles de un producto
   nunca cambie el alto de la tarjeta: todas miden lo mismo, tengan
   2 talles o 10. Sin fondo propio — cada chip ya trae su relleno gris. */
.cat-talles {
  position: absolute; left: 6px; right: 6px; bottom: 6px;
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
}
.cat-talle-mini {
  font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 5px;
  background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border);
}
.cat-agregar {
  margin-top: auto; width: 100%; padding: 9px;
  border: none; border-radius: 8px; background: var(--acento); color: #fff;
  font-family: inherit; font-weight: 800; font-size: 13px; cursor: pointer;
}
.cat-agregar:disabled { background: var(--bg-input); color: var(--text-muted); cursor: not-allowed; }

/* --- Carrito --- */
.cat-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 420px;
  background: var(--bg-card); border-left: 1px solid var(--border-strong);
  z-index: 60; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.22s ease;
  box-shadow: var(--shadow-lg);
}
.cat-panel.abierto { transform: translateX(0); }
.cat-panel-cab {
  padding: 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.cat-panel-cab h3 { font-size: 16px; font-weight: 800; }
.cat-panel-cuerpo { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.cat-panel-pie { padding: 14px 16px; border-top: 1px solid var(--border); background: var(--bg-input); }

.cat-linea { display: flex; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.cat-linea-foto { width: 48px; height: 48px; border-radius: 7px; background: var(--bg-input); flex-shrink: 0; overflow: hidden; display:flex; align-items:center; justify-content:center; }
.cat-linea-foto img { width: 100%; height: 100%; object-fit: contain; }
.cat-linea-datos { flex: 1; min-width: 0; }
.cat-linea-nom { font-size: 13px; font-weight: 700; }
.cat-cant { display: flex; align-items: center; gap: 7px; }
.cat-cant button {
  width: 25px; height: 25px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: var(--bg-card);
  cursor: pointer; font-weight: 800; font-family: inherit; color: var(--text-primary);
}

.cat-entrega { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.cat-entrega label {
  display: flex; align-items: center; gap: 9px; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 600;
}
.cat-entrega label:has(input:checked) { border-color: var(--acento); background: var(--acento-bg); }
.cat-entrega input { width: 16px; height: 16px; accent-color: var(--acento); }

.cat-tapa {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 55;
  opacity: 0; pointer-events: none; transition: opacity 0.22s;
}
.cat-tapa.abierto { opacity: 1; pointer-events: auto; }

.cat-vacio { text-align: center; padding: 60px 20px; color: var(--text-muted); }

/* Barra del comercio: solo se ve cuando lo abre el negocio */
.cat-admin-barra {
  background: var(--acento-bg); border: 1px solid var(--acento);
  border-radius: 10px; padding: 11px 14px; margin-top: 12px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cat-admin-barra .aviso { flex: 1; font-size: 12px; font-weight: 600; color: var(--text-secondary); min-width: 190px; }
@media print { .cat-admin-barra, .cat-carrito-btn { display: none; } }

/* Selector de talle: aparece antes de agregar, si el producto tiene más
   de uno. Los agotados se ven pero no se pueden tocar. */
.cat-talle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.cat-talle-opcion {
  padding: 11px 6px; border-radius: 8px; text-align: center;
  border: 1.5px solid var(--border-strong); background: var(--bg-card);
  font-weight: 800; font-size: 13px; cursor: pointer; font-family: inherit; color: var(--text-primary);
}
.cat-talle-opcion:hover { border-color: var(--acento); }
.cat-talle-opcion.elegido { border-color: var(--acento); background: var(--acento-bg); color: var(--acento); }
.cat-talle-opcion:disabled, .cat-talle-opcion.agotado {
  opacity: 0.4; text-decoration: line-through; cursor: not-allowed; background: var(--bg-input);
}

/* Publicidad de Troncoso System: una franja angosta arriba de todo,
   centrada, no una tarjeta más entre los productos. */
.cat-promo {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 0; text-align: center;
  color: var(--text-muted); text-decoration: none;
  font-size: 11px; font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.cat-promo:hover { color: var(--acento); }
.cat-promo .cat-promo-logo {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--acento); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 900; flex-shrink: 0;
}
/* Ícono chico del panel "No hay productos" y del carrito vacío, ambos
   inline en el JS (tarjeta()/refrescarCarrito()) como placeholder de un
   SVG que no tiene clase propia. */
.cat-icono-svg-chico {
  width: 100%;
  height: 100%;
}
#cat-vacio .cat-vacio-icono {
  width: 42px;
  height: 42px;
  margin: 0 auto;
  opacity: 0.3;
}
#cat-vacio p {
  margin-top: 10px;
}
/* El carrito vacío se arma por JS (refrescarCarrito()), reutilizando la
   misma clase .cat-vacio pero con su propio ícono/texto más chicos. */
.cat-carrito-vacio-icono {
  width: 38px;
  height: 38px;
  margin: 0 auto;
  opacity: 0.3;
}
.cat-carrito-vacio-texto {
  margin-top: 8px;
}
.cat-panel-cab .modal-cerrar {
  position: static;
}
.cat-total-fila {
  display: flex;
  justify-content: space-between;
  font-size: 19px;
  font-weight: 900;
  margin-bottom: 11px;
}
.cat-panel-pie .btn-acento {
  width: 100%;
  padding: 13px;
}

/* Seguir comprando desde el carrito (2026-08-24). Ancho completo como el
   botón de comprar que tiene abajo, pero secundario: la acción principal
   del pie sigue siendo "Hacer el pedido". */
.cat-seguir-comprando {
  width: 100%;
  margin: 8px 0 4px;
}

/* Carrito comercial de la tienda pública (Hito A, 2026-08-18): subtotal +
   envío por separado del total final, mismo criterio visual que un
   resumen de compra — .cat-subtotal-fila es .cat-total-fila pero más
   chica/apagada, para que el ojo vaya derecho al Total de abajo. */
.cat-subtotal-fila {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.cat-envio-bloque { margin-bottom: 12px; }
.cat-envio-gratis-barra {
  height: 7px; border-radius: 4px; background: var(--bg-input);
  overflow: hidden; margin: 7px 0 5px;
}
.cat-envio-gratis-fill {
  height: 100%; background: var(--verde); border-radius: 4px;
  transition: width 0.25s ease; width: 0%;
}
.cat-envio-gratis-texto { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin: 0; }
.cat-envio-gratis-texto.lista { color: var(--verde); }

/* ============================================================
   CHECKOUT DE LA TIENDA WEB (tienda-checkout.html, Hito B, 2026-08-18)
   Página pública, mobile-first, sin sesión — mismo criterio visual que
   catalogo.html en modo tienda. Los 4 pasos reusan .formulario,
   .cat-entrega (radios) y .cat-total-fila/.cat-subtotal-fila (ya
   construidos para el carrito) en vez de inventar estilos nuevos.
   ============================================================ */
.tc-pagina { max-width: 520px; margin: 0 auto; padding: 0 16px 60px; }
.tc-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; gap: 10px;
}
.tc-volver {
  color: var(--text-secondary); text-decoration: none; font-size: 13px;
  font-weight: 700; display: flex; align-items: center; gap: 4px;
}
.tc-volver:hover { color: var(--acento); }
.tc-pasos { display: flex; gap: 6px; }
.tc-paso-punto {
  width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong);
}
.tc-paso-punto.activo { background: var(--acento); width: 20px; border-radius: 4px; }
.tc-paso-punto.hecho { background: var(--verde); }
.tc-paso h2 { font-size: 19px; font-weight: 800; margin-bottom: 4px; }
.tc-paso > p.text-muted { margin-bottom: 16px; }
.tc-paso .btn-primario.btn-acento { width: 100%; padding: 13px; margin-top: 6px; }
.tc-paso .btn-secundario { width: 100%; padding: 11px; margin-top: 8px; }
.tc-resumen-linea {
  display: flex; justify-content: space-between; gap: 10px; font-size: 13px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.tc-resumen-linea .text-muted { font-size: 12px; }
.tc-exito-icono {
  width: 56px; height: 56px; border-radius: 50%; background: var(--verde-bg);
  color: var(--verde); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.tc-exito-icono svg { width: 30px; height: 30px; }
.tc-cbu-caja {
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px; display: flex; flex-direction: column; gap: 6px; margin: 14px 0;
}
.tc-cbu-caja .tc-cbu-fila { display: flex; justify-content: space-between; font-size: 13px; }
.tc-cbu-caja .tc-cbu-fila strong { font-weight: 800; }
#pd-total {
  font-weight: 800;
}
#lista-categorias {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cat-nueva-fila {
  display: flex;
  gap: 8px;
}
.cat-nueva-fila input {
  flex: 1;
}

/* --------------------------------------------------------------------------
   31. COMPRAS / VENTAS — LAYOUT DE DOS COLUMNAS CON CARRITO
   Compras y Ventas son pantallas gemelas (ver Fase 4 en TASKS.md): layout
   de escritorio con alto fijo de ventana, angosto y con más aire vertical
   que el resto de los módulos. La lógica no se fusiona todavía —eso es
   Fase 4—, pero este override de .contenedor-panel es 100% idéntico entre
   las dos pantallas, así que va acá con su propia clase para no filtrarse
   al resto de los módulos (que usan la versión de la sección 5). */
.contenedor-panel.contenedor-carrito {
  gap: 24px;
  padding: 16px 28px 40px;
}
/* El acento de color es lo único que de verdad cambia entre Compras y
   Ventas en todo este layout compartido (rojo/verde). Cada página fija
   esta variable con su propia clase (.pagina-compras/.pagina-ventas en el
   mismo div que .contenedor-carrito) en vez de repetir cada regla de
   abajo dos veces con el color pisado a mano. */
.pagina-compras {
  --acento-carrito: var(--mod-compras);
  --acento-carrito-bg: var(--mod-compras-bg);
}
.pagina-ventas {
  --acento-carrito: var(--mod-ventas);
  --acento-carrito-bg: var(--mod-ventas-bg);
}
@media (max-width: 900px) {
  .contenedor-panel.contenedor-carrito {
    padding: 12px 14px 32px;
    gap: 14px;
  }
}

.compras-layout,
.ventas-layout {
  display: grid;
  gap: 16px;
  align-items: stretch;
  height: calc(100vh - 56px); /* Sin header */
}
.ventas-layout {
  grid-template-columns: 1fr 340px;
}
/* Compras necesita unos px más que Ventas: la grilla de talles en fila
   (2026-08-14) entra más ajustada que el resto de los campos. */
.compras-layout {
  grid-template-columns: 1fr 360px;
}

.panel-izquierdo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  overflow: hidden;
}
.panel-derecho {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.panel-registro {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--acento-carrito);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.registro-header { display: flex; justify-content: space-between; align-items: center; }
.registro-titulo { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-muted); }

/* Los campos forman un solo bloque continuo, separados por líneas internas,
   en vez de una pila de cajas sueltas. */
.registro-campos { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-input); }
.registro-campo { padding: 7px 11px; border-bottom: 1px solid var(--border); position: relative; transition: background-color 0.15s; }
.registro-campo:last-child { border-bottom: none; }
.registro-campo:focus-within { background: var(--bg-card); box-shadow: inset 3px 0 0 var(--acento-carrito); }
.registro-campo > label,
.registro-campo .campo-label { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-muted); margin: 0 0 2px; }
.campo-input {
  width: 100%; border: none; background: transparent; padding: 0; margin: 0;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-primary);
  outline: none; box-shadow: none !important;
}
.campo-input:disabled { color: var(--text-secondary); font-weight: 500; -webkit-text-fill-color: var(--text-secondary); opacity: 1; }
.campo-input::placeholder { font-weight: 400; color: var(--text-muted); }
.campo-total { font-size: 17px; font-weight: 800; color: var(--acento-carrito); -webkit-text-fill-color: var(--acento-carrito) !important; }
/* Sin flechitas del navegador: la cantidad se cambia con ← y → */
.campo-input[type=number]::-webkit-outer-spin-button,
.campo-input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.campo-input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.registro-campo .autocomplete-wrapper { position: static; }
.registro-campo .autocomplete-lista { left: 0; right: 0; }
.campo-ayuda { font-size: 9px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-muted); opacity: 0.85; }

.form-input-nav { transition: all 0.15s; }

.carrito-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--acento-carrito);
  max-height: calc(100vh - 56px);
}
.carrito-body {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-app);
  max-height: none;
}

/* Footer carrito delgado */
.carrito-footer {
  padding: 6px 12px;
  border-top: 2px solid var(--border-strong);
  background-color: var(--bg-input);
}
.carrito-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 800;
}

.btn-agregar-c {
  background: var(--mod-compras-bg);
  border: 1.5px dashed var(--mod-compras);
  color: var(--mod-compras);
  padding: 10px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  margin-top: 8px;
}
.btn-agregar-c:hover {
  background: rgba(22, 163, 74, 0.1);
}

.cart-input {
  width: 50px;
  text-align: center;
  border: 1px solid transparent;
  background: transparent;
  font-weight: 700;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary);
  border-radius: 4px;
}
.cart-input:focus {
  border: 1px solid var(--acento-carrito);
  background: var(--bg-input);
  outline: none;
}

#cierre-adeuda-texto {
  font-size: 28px;
  font-weight: 900;
  color: var(--acento-carrito);
  text-align: center;
  margin: 10px 0;
}

.talles-matriz {
  display: grid;
  /* Cantidad exacta de columnas (3 a 5, según el total de talles, para que
     ninguna fila quede sola con 1 o 2) la pone construirTalles() en JS,
     vía columnasParaTalles() — esto es solo el fallback antes de que corra. */
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 4px;
  margin-top: 2px;
  max-height: 190px;
  overflow-y: auto;
}
.talles-matriz::-webkit-scrollbar {
  width: 4px;
}
.talles-matriz::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}
.talles-matriz::-webkit-scrollbar-track {
  background: transparent;
}

.talle-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 0;
}
.talle-row label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  width: auto;
  margin-bottom: 0 !important;
  text-transform: none;
  letter-spacing: 0;
  text-align: right;
}
.talle-input {
  width: 36px;
  flex: 0 0 auto;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 4px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--text-primary);
  outline: none;
}
.talle-input:focus {
  border-color: var(--mod-compras);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
}
.talle-input::-webkit-outer-spin-button,
.talle-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.talle-input { -moz-appearance: textfield; appearance: textfield; }

.historial-seccion {
  margin-top: 20px;
}

/* ===================== CELULAR Y TABLET =====================
   Mismo caso que Ventas: layout de escritorio con alto fijo de
   ventana. En un celular se sueltan los altos, las dos columnas pasan
   a una sola tira vertical y el scroll vuelve a ser el de la página.
   El bloque de carga va primero; el carrito, abajo. */
@media (max-width: 900px) {
  .compras-layout,
  .ventas-layout {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
  .panel-izquierdo,
  .panel-derecho {
    height: auto;
    overflow: visible;
  }
  .panel-derecho { order: 1; }
  .panel-izquierdo { order: 2; }
  .carrito-panel { max-height: none; }
  .carrito-body { max-height: 45vh; }
}

@media (max-width: 640px) {
  .campo-input { font-size: 16px; }
  .registro-campo { padding: 10px 12px; }
  .cart-input { width: 56px; min-height: 38px; font-size: 15px; }
  .btn-agregar-c { min-height: 46px; font-size: 14px; }
  /* La matriz de talles: cuadraditos más grandes para el dedo. */
  .talle-input { min-height: 40px; font-size: 15px; }
  /* El título del carrito y su botón de acción, en una fila sola. */
  .carrito-header { flex-wrap: wrap; gap: 8px; }
  .carrito-header > * { min-width: 0; }
}

/* "COMPRAS"/"VENTAS" + ícono + contador, adentro de .carrito-header. El
   color de cada instancia lo pone .color-compras/.color-ventas aparte,
   porque son las únicas dos propiedades que sí cambian entre pantallas. */
.carrito-titulo-modulo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.carrito-titulo-modulo .icono-modulo-header {
  width: 28px;
  height: 28px;
  margin-right: 0;
}
.carrito-titulo-texto {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.carrito-total-monto {
  font-size: 22px;
}
.carrito-vacio-msg {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
}
/* Variantes chicas de botones que en el resto de las pantallas van a
   tamaño normal, pero acá conviven apretados en la cabecera del carrito. */
.btn-chico {
  font-size: 11px;
  padding: 6px 12px;
}
.btn-retorno.chico {
  padding: 4px 10px;
  font-size: 11px;
}
/* Sub-secciones del modal de cierre que solo aparecen si se paga "A
   Cuenta" — JS alterna style.display entre 'flex' y 'none' directamente,
   estas clases solo fijan la forma de la caja cuando está visible. */
.cierre-acuenta-caja {
  flex-direction: column;
  gap: 8px;
}
.cierre-cuenta-entrega-caja {
  flex-direction: column;
  gap: 4px;
}
.cierre-sobrante-caja {
  flex-direction: column;
  gap: 8px;
}
.cierre-vuelto-caja {
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 640px) {
  .btn-agregar-v { min-height: 46px; font-size: 14px; }
  /* Compras no tiene estos dos elementos con estos ids/clases en su propio
     modal de cierre — pero comparten selector, así que quedan bajo
     .pagina-ventas para no cambiarle el tamaño a Compras en el celular. */
  .pagina-ventas .campo-total { font-size: 19px; }
  .pagina-ventas #cierre-adeuda-texto { font-size: 24px; }
  .pagina-ventas .cierre-fila.total span:last-child { font-size: 20px; }
}

/* --------------------------------------------------------------------------
   32. VENTAS — ESPECÍFICO (Devolución/Cambio, desglose del cobro)
   Sin equivalente en Compras (no hay devoluciones de mercadería comprada
   a un proveedor desde acá), así que va aparte de la sección 31.
   -------------------------------------------------------------------------- */
.btn-agregar-v {
  background: var(--mod-ventas-bg);
  border: 1.5px dashed var(--mod-ventas);
  color: var(--mod-ventas);
  padding: 10px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  margin-top: 8px;
}
.btn-agregar-v:hover {
  background: rgba(220, 38, 38, 0.1);
}

/* Desglose del cobro: el cajero tiene que ver de dónde sale el número
   final, no solo el número. */
.cierre-totales {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.cierre-fila { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-secondary); }
.cierre-fila span:last-child { font-weight: 700; color: var(--text-primary); }
.cierre-fila.descuento span { color: var(--verde); }
.cierre-fila.recargo span   { color: var(--rojo); }
.cierre-fila.credito span   { color: var(--verde); }
.cierre-fila.total {
  border-top: 1px solid var(--border-strong); padding-top: 8px; margin-top: 2px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.cierre-fila.total span:last-child { font-size: 24px; font-weight: 900; color: var(--mod-ventas); }
.ajuste-chip {
  font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 10px; margin-left: 6px;
}
.ajuste-chip.descuento { background: var(--verde-bg); color: var(--verde); }
.ajuste-chip.recargo   { background: var(--rojo-bg);  color: var(--rojo); }

/* Crédito de cambio activo (Devolución/Cambio → modo Cambio), arriba del
   carrito — spec 2026-08-05-cambio-integrado-a-la-venta.md. Vive solo en
   memoria hasta confirmar la venta, por eso la nota chica. */
.credito-cambio-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  background: var(--verde-bg);
  color: var(--verde);
  border-bottom: 1px solid var(--verde-border);
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
}
.credito-cambio-texto { flex: 1; min-width: 160px; }
.credito-cambio-nota { font-weight: 400; font-size: 11px; opacity: 0.85; }
.credito-cambio-cerrar {
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 16px; line-height: 1; font-weight: 700; padding: 0 2px;
}

.carrito-total-row-sub { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.carrito-total-row-sub .carrito-total-monto { font-size: 12px; }
.credito-monto { color: var(--verde); }

.disponible-badge { font-size: 10px; font-weight: 800; letter-spacing: 0; text-transform: none; padding: 2px 7px; border-radius: 10px; }
.disponible-badge.ok     { background: var(--verde-bg);   color: var(--verde); }
.disponible-badge.bajo   { background: var(--amarillo-bg); color: var(--amarillo); }
.disponible-badge.sin    { background: var(--rojo-bg);    color: var(--rojo); }

/* Botón "+ DEVOLUCIÓN / CAMBIO", en la cabecera del carrito junto al
   título — el color de texto lo pone .color-ventas aparte. */
.btn-devolucion {
  border-color: var(--mod-ventas-border);
  font-size: 11px;
  padding: 6px 12px;
  font-weight: 700;
}
/* Caja de cliente en el modal de Devolución/Cambio, solo se pide cuando la
   resolución deja algo pendiente (saldo a favor o a cuenta). */
.devol-cliente-caja {
  flex-direction: column;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   33. CUENTAS — GRÁFICO DE TORTA Y LAYOUT
   -------------------------------------------------------------------------- */
.cuentas-header-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .cuentas-header-layout { grid-template-columns: 1fr; }
}
/* En un celular las tarjetas de cuenta van una debajo de la otra: a dos
   columnas el saldo se corta. El gráfico de torta se achica para que no
   empuje la leyenda fuera de la pantalla. */
@media (max-width: 640px) {
  .cuentas-cards-grid { grid-template-columns: minmax(0, 1fr); }
  .pie-container { min-height: 0; padding: 14px; }
  .pie-chart { width: 108px; height: 108px; }
  .pie-legend { font-size: 12px; }
  .cuenta-card-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
}
.cuentas-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.pie-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.pie-chart {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: conic-gradient(var(--acento) 0% 100%);
  transition: background 0.3s;
}
.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-top: 12px;
  font-size: 11px;
}
.legend-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.legend-bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.cuentas-dist-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.buscador-mov-cuentas {
  width: 300px;
}
.cuentas-tabla-mov {
  max-height: 500px;
}
.cierre-caja-diff {
  font-size: 15px;
  padding: 8px;
}

/* --------------------------------------------------------------------------
   34. CONFIGURACIÓN — SECCIONES PLEGABLES
   -------------------------------------------------------------------------- */
.config-lista-wrap { width: 80%; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; }
@media (max-width: 900px) { .config-lista-wrap { width: 100%; } }
.config-seccion { padding: 0; overflow: hidden; background: transparent; border: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--border); }
.config-seccion:first-child { border-top: 1px solid var(--border); }
.config-seccion > summary { cursor: pointer; user-select: none; list-style: none; display: flex; align-items: center; gap: 10px; padding: 16px 4px; font-size: 14px; font-weight: 600; color: var(--text-primary); text-transform: none; letter-spacing: normal; border: none; }
.config-seccion > summary::-webkit-details-marker { display: none; }
.config-seccion > summary .config-icono { font-size: 16px; }
.config-seccion > summary .config-titulo-texto { flex: 1; }
.config-seccion > summary .config-chevron { font-size: 12px; color: var(--text-muted); transition: transform 0.15s; }
.config-seccion[open] > summary .config-chevron { transform: rotate(90deg); }
.config-seccion > .config-cuerpo { padding: 2px 4px 20px; display: flex; flex-direction: column; gap: 12px; }
/* Los checkbox heredaban el estilo de los campos de texto (ancho completo,
   padding y borde), por eso se veian desalineados. Acá se resetean y la
   fila queda como un item de ajustes, igual que las listas de talles y cuentas. */
.config-check-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; text-transform: none; letter-spacing: normal;
  font-weight: 600; color: var(--text-primary);
  cursor: pointer; margin-bottom: 0 !important;
  transition: border-color 0.15s, background-color 0.15s;
}
.config-check-row:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.formulario .config-check-row input[type="checkbox"],
.config-check-row input[type="checkbox"] {
  width: 16px; height: 16px; min-width: 16px;
  margin: 0; padding: 0; flex: none;
  accent-color: var(--acento); cursor: pointer;
}
.config-grupo-checks { display: flex; flex-direction: column; gap: 8px; }
.config-lista-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; }
.config-lista-item .talles-preview { color: var(--text-muted); font-size: 11px; }
.talle-numero { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--bg-input); border: 1px solid var(--border); font-size: 11px; font-weight: 800; color: var(--text-secondary); }
.config-form-mini { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; border-top: 1px dashed var(--border); padding-top: 12px; margin-top: 4px; }
.config-form-mini input { flex: 1; min-width: 120px; }

/* ===================== CELULAR =====================
   Los mini-formularios (nueva sucursal, nueva cuenta, nuevo talle)
   ponen los campos y el botón en una fila. En 360px de ancho eso deja
   cada campo en 80px, ilegible: se apilan y el botón toma el ancho
   completo. Las filas de lista (talles, cuentas) también se apilan,
   porque nombre + saldo + tachito no entran de costado. */
@media (max-width: 640px) {
  .config-form-mini { flex-direction: column; align-items: stretch; }
  .config-form-mini input,
  .config-form-mini select,
  .config-form-mini button { width: 100%; min-width: 0; }
  .config-lista-item {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
  }
  .config-check-row { padding: 13px 12px; font-size: 14px; }
  .config-seccion > summary { padding: 18px 4px; font-size: 15px; }
}
.cfg-lista-columna {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cfg-lista-columna-8 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Separador con línea punteada arriba de una sub-sección dentro de un
   <details>. Tres variantes por el aire que se le dio a cada una, no por
   una razón funcional distinta. */
.cfg-divisor-a {
  border-top: 1px dashed var(--border);
  padding-top: 14px;
  margin-top: 6px;
}
.cfg-divisor-b {
  border-top: 1px dashed var(--border);
  padding-top: 14px;
  margin-top: 8px;
}
.cfg-divisor-c {
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  margin-top: 4px;
}
.cfg-texto-ayuda {
  margin: 6px 0 10px;
  color: var(--text-secondary);
}
.cfg-zona-riesgo-label {
  font-size: 11px;
  font-weight: 800;
}
/* El original decía var(--borde) — variable que no existe en ningún lado
   del proyecto, typo de --border. Sin la variable, border-color caía al
   valor inicial (currentcolor) en vez del gris esperado. */
.cfg-separador {
  border-color: var(--border);
  margin: 16px 0;
}

/* Columna de los 3 puntitos que abren el detalle completo de una operación
   (2026-08-25): lo más angosta posible, para que abrir el detalle no le
   robe ancho a las columnas que sí se leen de un vistazo (pedido de Juani,
   2026-08-24). */
.tabla-datos td.col-detalle,
.tabla-datos th.col-detalle {
  width: 36px;
  padding-left: 0;
  padding-right: 6px;
  text-align: center;
}
.col-detalle .btn-tabla-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.col-detalle .btn-tabla-icon svg {
  width: 16px;
  height: 16px;
}
/* Ver el detalle no borra nada: no se pinta de rojo al pasar por encima,
   mismo criterio que .btn-tabla-icon.icono-ojo. */
.col-detalle .btn-tabla-icon:hover {
  background-color: var(--acento-bg);
  border-color: rgba(79, 70, 229, 0.25);
  color: var(--acento);
}

/* --------------------------------------------------------------------------
   35. STOCK — MATRIZ DE TALLES Y CHIPS
   -------------------------------------------------------------------------- */
/* Antes de la Fase 2 esto vivía repetido en el <style> local de Stock,
   Admin-Clientes, Admin-Pagos, Clientes y Personal (idéntico en las 5).
   Movimientos usa la misma clase pero SIN esto —su buscador se queda al
   tamaño de .buscador-tabla en vez de crecer— así que ese caso puntual
   se cancela aparte para no cambiarle el ancho sin haberlo pedido. */
.tabla-header-right { flex: 1; }
.tabla-header-right:has(#buscar-mov-global) {
  flex: initial;
}
/* Grilla en fila, no columna con scroll (2026-08-14, mismo criterio que
   Compras): la cantidad exacta de columnas (3 a 5) la pone JS vía
   dbHelpers.columnasParaTalles(), escrita como variable CSS y no como
   grid-template-columns directo — estos 3 modales están dentro de
   .modal-box/.modal-form, y la regla de la sección "ESTILOS ESCRITOS EN EL
   HTML" (más abajo en este archivo) neutraliza con !important cualquier
   style="grid-template-columns" ahí adentro en celular (pensada para los
   pares de campos de a dos, no para esto). Una variable no matchea ese
   selector de atributo. */
.talles-matriz-edit { display: grid; grid-template-columns: repeat(var(--cols-talles, 5), 1fr); gap: 5px; max-height: 220px; overflow-y: auto; border: 1px dashed var(--border-strong); padding: 8px; border-radius: 6px; }
.talle-row-edit { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 3px; padding: 4px 0; }
.talle-row-edit label { font-size: 11px; font-weight: 700; color: var(--text-secondary); width: auto; margin-bottom: 0 !important; text-align: right; }
/* .form-input trae padding: 10px 12px — en un input de 36px eso no dejaba
   lugar para 3 dígitos (bug real, encontrado probando el preview). Se pisa
   explícito, mismo box model que .talle-input de Compras. */
.talle-row-edit input { width: 36px; text-align: center; padding: 3px 4px; font-size: 13px; font-weight: 700; }
/* Sin flechitas del navegador: la cantidad se cambia con ← y →, mismo
   criterio que .talle-input de Compras (2026-08-14). */
.talle-row-edit input::-webkit-outer-spin-button,
.talle-row-edit input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.talle-row-edit input { -moz-appearance: textfield; appearance: textfield; }
/* Talle | cantidad, claramente separados */
.talle-chip { display: inline-flex; align-items: stretch; margin: 2px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; font-size: 11px; line-height: 1; vertical-align: middle; }
.talle-chip-nombre { padding: 4px 7px; background: var(--bg-input); color: var(--text-secondary); font-weight: 700; letter-spacing: 0.3px; }
.talle-chip-cant { padding: 4px 7px; background: var(--bg-card); color: var(--text-primary); font-weight: 800; border-left: 1px solid var(--border); min-width: 22px; text-align: center; }
.talle-chip-cant.negativo { color: var(--rojo); background: var(--rojo-bg); }
.talle-chip-unico { padding: 4px 8px; background: var(--bg-input); color: var(--text-muted); font-weight: 700; font-size: 10px; letter-spacing: 0.4px; }
.th-angosta { width: 36px; padding-left: 4px !important; padding-right: 8px !important; }

/* ===================== CELULAR =====================
   Stock es sobre todo tabla y modales; el grueso ya lo resuelve
   estilos.css. Lo propio de acá es la matriz de talles: filas de
   "talle + cantidad" pensadas para escribir con teclado, que en un
   celular quedan angostas para el dedo. */
@media (max-width: 640px) {
  .talles-matriz-edit { max-height: 46vh; }
  /* 15px, no 16: a 16px "999" no entraba en los 36px del input (mismo
     ajuste que .talle-input de Compras). */
  .talle-row-edit input { min-height: 44px; font-size: 15px; }
  /* Las pastillas de talle en la tabla: legibles sin agrandar la página. */
  .talle-chip { font-size: 12px; }
  .talle-chip-nombre,
  .talle-chip-cant { padding: 5px 8px; }
  /* La columna del tachito necesita el ancho del botón nuevo (40px). */
  .th-angosta { width: 48px; }
}

/* --------------------------------------------------------------------------
   36. ADMIN — AJUSTES DE PLATAFORMA (planes)
   Reutiliza los .config-* de la sección 34 (Configuración): son el mismo
   patrón de <details> plegables, verificado igual en las dos pantallas.
   -------------------------------------------------------------------------- */
.plan-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.plan-item-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plan-nombre { font-weight: 800; font-size: 14px; }
.plan-precio { font-weight: 800; color: var(--mod-admin); }
.btn-alinear-inicio {
  align-self: flex-start;
}
.text-amarillo {
  color: var(--amarillo);
}
.ml-6 {
  margin-left: 6px;
}

/* --------------------------------------------------------------------------
   37. REPORTES — LAYOUT
   -------------------------------------------------------------------------- */
.reporte-layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* --------------------------------------------------------------------------
   38. ADMIN-CLIENTES — ASISTENTE POR PASOS
   -------------------------------------------------------------------------- */
.paso-cuerpo { display: none; flex-direction: column; gap: 10px; }
.paso-cuerpo.activo { display: flex; }
.modal-box.xwide { max-width: 720px; }
.max-h-620 {
  max-height: 620px;
}
.flex-gap-8 {
  display: flex;
  gap: 8px;
}
.flex-gap-4 {
  display: flex;
  gap: 4px;
}
/* Columna con un solo botón (ej. "Ver" de Cta. Corriente en Clientes/
   Proveedores, 2026-08-11): se angosta al ancho del botón en vez de
   estirarse con el resto de la fila — el resto del espacio se lo quedan
   las columnas con datos. El botón queda pegado al borde derecho, no
   colgado a la izquierda de una celda vacía. */
.th-angosta {
  width: 1%;
  white-space: nowrap;
}
.flex-gap-4.justify-end {
  justify-content: flex-end;
}
.flex-2 {
  flex: 2;
}
.m-10-0-0 {
  margin: 10px 0 0;
}
.texto-derecha-60 {
  text-align: right;
  max-width: 60%;
}
.cursor-pointer {
  cursor: pointer;
}
.oculto-col-6 {
  display: none;
  flex-direction: column;
  gap: 6px;
}
.oculto-col-10 {
  display: none;
  flex-direction: column;
  gap: 10px;
}
.gap-6 {
  gap: 6px;
}
.max-h-52vh {
  max-height: 52vh;
}
.m-0-0-12 {
  margin: 0 0 12px;
}
.max-h-520 {
  max-height: 520px;
}

/* --------------------------------------------------------------------------
   39. ADMIN-CUENTAS — GRILLA DE CUENTAS DE LA PLATAFORMA
   -------------------------------------------------------------------------- */
.cuentas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.max-w-400 {
  max-width: 400px;
}
.buscador-mov-global {
  width: 340px;
}
.max-h-650 {
  max-height: 650px;
}
.max-h-360 {
  max-height: 360px;
}
.max-h-320 {
  max-height: 320px;
}

/* --------------------------------------------------------------------------
   40. LANDING — SECCIÓN PLANES (fondo oscuro fijo, no depende del tema)
   -------------------------------------------------------------------------- */
.seccion-comercial.seccion-planes {
  background-color: #1e293b;
}
.seccion-comercial.seccion-planes h2 {
  color: white;
}
.mt-20 {
  margin-top: 20px;
}
.mb-20 {
  margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   41. AVISOS (toast) Y CONFIRMAR (modal) — reemplazan alert()/confirm(),
   ver HTML/avisos.js. Colores fijos por tipo de mensaje (no por módulo),
   para que "esto salió bien" se reconozca igual en cualquier pantalla.
   -------------------------------------------------------------------------- */
.ts-avisos-cont {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  width: calc(100% - 32px);
}

.ts-aviso {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--text-muted);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-lg);
  animation: tsAvisoIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ts-aviso-saliendo {
  animation: tsAvisoOut 0.2s ease-in forwards;
}
@keyframes tsAvisoIn {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes tsAvisoOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(24px);
    opacity: 0;
  }
}

.ts-aviso-exito {
  border-left-color: var(--verde);
}
.ts-aviso-error {
  border-left-color: var(--rojo);
}
.ts-aviso-aviso {
  border-left-color: var(--amarillo);
}
.ts-aviso-info {
  border-left-color: var(--acento);
}
.ts-aviso-exito .ts-aviso-icono {
  color: var(--verde);
}
.ts-aviso-error .ts-aviso-icono {
  color: var(--rojo);
}
.ts-aviso-aviso .ts-aviso-icono {
  color: var(--amarillo);
}
.ts-aviso-info .ts-aviso-icono {
  color: var(--acento);
}

.ts-aviso-icono {
  flex-shrink: 0;
  font-size: 20px;
  margin-top: 1px;
}

.ts-aviso-texto {
  flex: 1;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary);
  white-space: pre-line;
}

.ts-aviso-cerrar {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.ts-aviso-cerrar:hover {
  color: var(--text-primary);
}

.ts-confirmar-texto {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-line;
}

.ts-confirmar-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   42. TIENDA WEB — SOLAPAS Y CONFIGURACIÓN EN PASOS
   (2026-08-24) La configuración vino de Configuración, donde era una sola
   pared de 28 controles (2369px de alto en un celular). Acá son tarjetas
   cortas, una por paso, que en un celular apilan sin desbordar.
   -------------------------------------------------------------------------- */
.tw-solapas { margin-bottom: 4px; }

.tw-progreso {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--bg-input);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}
.tw-progreso.listo {
  border-color: var(--verde);
  color: var(--verde);
}

#tw-vista-config { display: flex; flex-direction: column; gap: 14px; }

.tw-paso { gap: 10px; }
.tw-paso-titulo {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 800; margin: 0;
}
.tw-check {
  width: 20px; height: 20px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  color: #fff; font-size: 12px; font-weight: 900;
}
.tw-check.listo { background: var(--verde); border-color: var(--verde); }

/* Una fila de medio de pago: nombre + explicación a la izquierda,
   interruptor + cuenta a la derecha. En un celular, la derecha baja
   abajo y ocupa el ancho completo — es lo que evita el select de 80px
   ilegible que tenía la versión de Configuración. */
.tw-medio { align-items: flex-start; gap: 12px; }
.tw-medio-texto { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tw-medio-texto small { font-size: 11px; }
.tw-medio-controles { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tw-medio-controles input[type="checkbox"] {
  width: 18px; height: 18px; margin: 0; accent-color: var(--acento); cursor: pointer;
}
.tw-medio-cuenta { width: auto; min-width: 190px; margin: 0; padding: 6px 8px; font-size: 12px; }

.tw-mp-estado {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm);
}

.tw-avanzado > summary {
  cursor: pointer; user-select: none; list-style: none;
  font-size: 14px; font-weight: 700; color: var(--text-secondary);
}
.tw-avanzado > summary::-webkit-details-marker { display: none; }

.tw-guardar-barra { display: flex; justify-content: flex-end; }
.tw-guardar-barra .btn-primario { min-width: 160px; }

@media (max-width: 640px) {
  .tw-medio { flex-direction: column; }
  .tw-medio-controles { width: 100%; justify-content: space-between; }
  .tw-medio-cuenta { flex: 1; min-width: 0; }
  .tw-mp-estado { flex-direction: column; align-items: stretch; }
  .tw-mp-estado .btn-secundario { width: 100%; }
  .tw-guardar-barra { position: sticky; bottom: 0; padding: 10px 0; background: var(--bg-app); }
  .tw-guardar-barra .btn-primario { width: 100%; }
}

/* El select de cuenta + el botón, cuando un pedido pagado quedó sin
   registrar por falta de cuenta configurada (2026-08-24). */
.ped-registrar-caja { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ped-registrar-caja select { flex: 1; min-width: 160px; }

/* --------------------------------------------------------------------------
   43. UTILIDAD FINAL — .oculto va última a propósito: así le gana a cualquier
   clase de componente que declare display (misma especificidad, gana la
   última regla del archivo). No lleva !important: eso le ganaría también a
   los style.display='flex' con los que se abren los modales (que se abren
   con la clase oculto todavía puesta), rompiendo todos los modales del
   sistema. Para sacarla siempre usar classList.remove('oculto'), nunca
   style.display='' (eso no borra la clase, solo el estilo en línea).
   -------------------------------------------------------------------------- */
.oculto {
  display: none;
}