/* ============================================================================
   nexsell-ux2.css — Mejoras de uso 2026-10-23
   Ventas, Clientes y Productos: formulario de venta plegado, chips de canal,
   filtro "Con deuda", "Más opciones" del producto y tablas como tarjetas en el
   celular (≤ 640 px). Solo presentación: no cambia cálculos ni datos.
   Usa las variables de tema (var(--...)); sirve en claro y oscuro.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Ventas — formulario "Registrar nueva venta" plegado
   Es un <div> con [hidden] (no un <details>) para poder exponer aria-expanded
   en un <button>. El botón reusa la clase .venta-registro-sum.
   -------------------------------------------------------------------------- */
#sales .venta-registro { border: 0; }
#sales .venta-registro-sum {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--text-primary);
}
#sales .venta-registro-body[hidden] { display: none; }
#sales .venta-registro.is-open .venta-registro-sum {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
#sales .venta-registro.is-open .venta-registro-sum::after {
  transform: rotate(225deg);
  margin-top: 6px;
}

/* ---------------------------------------------------------------------------
   Ventas — chips de canal (assets/nexsell-channels.js → #nxFilterSales)
   Se ven como chips con scroll horizontal; el activo ya viene resaltado por
   .nx-seg-opt.is-on. Solo presentación, no se toca el filtrado.
   -------------------------------------------------------------------------- */
#nxFilterSales.nx-filter-slot { margin: 0 0 12px; }
#nxFilterSales .nx-seg {
  display: flex;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#nxFilterSales .nx-seg::-webkit-scrollbar { display: none; }
#nxFilterSales .nx-seg-opt { flex: none; }
#nxFilterSales .nx-seg-opt.is-on { font-weight: 800; }

/* ---------------------------------------------------------------------------
   Clientes — chips de filtro rápido (Todos / Con deuda)
   -------------------------------------------------------------------------- */
#clientes .cli-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
#clientes .cli-chip {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
#clientes .cli-chip:hover { color: var(--text-primary); border-color: var(--accent-primary); }
#clientes .cli-chip.is-on {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}
#clientes .cli-chip span { opacity: .85; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   Productos — bloque "Más opciones" (campos contables/avanzados)
   Reusa .ns-more; solo se ajusta el espaciado dentro del formulario.
   -------------------------------------------------------------------------- */
#products .nx-prod-mas { margin: 4px 0 16px; }
#products .nx-prod-mas > summary { color: var(--text-primary); }

/* ---------------------------------------------------------------------------
   Celular (≤ 640 px): tablas como tarjetas apiladas y barras en columna
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Ventas: cada fila es una tarjeta; el producto va arriba y los pares
     "Etiqueta: valor" (data-label) debajo. En PC la tabla queda igual. */
  #sales #salesTable.nx-ven-list .table-container {
    overflow: visible;
    max-height: none;
    border: 0;
    background: none;
    box-shadow: none;
  }
  #sales #salesTable.nx-ven-list thead { display: none; }
  #sales #salesTable.nx-ven-list tbody tr {
    display: block;
    margin: 0 0 10px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-tertiary);
  }
  #sales #salesTable.nx-ven-list tbody tr:nth-child(even) { background: var(--bg-elevated); }
  #sales #salesTable.nx-ven-list tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: auto;
    max-width: none;
    padding: 5px 0;
    border: 0;
    white-space: normal;
    text-align: right;
  }
  #sales #salesTable.nx-ven-list tbody td[data-label]::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
    text-align: left;
    font-family: Inter, sans-serif;
  }
  #sales #salesTable.nx-ven-list tbody td[data-label=""]::before { content: none; }
  #sales #salesTable.nx-ven-list tbody td.venta-producto,
  #sales #salesTable.nx-ven-list tbody td.venta-acciones-cell {
    display: block;
    text-align: left;
  }
  #sales #salesTable.nx-ven-list tbody td.venta-fecha {
    padding-bottom: 6px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--border-soft);
    font-variant-numeric: tabular-nums;
  }
  #sales #salesTable.nx-ven-list .venta-producto-nombre {
    max-width: none;
    white-space: normal;
    overflow: visible;
    font-size: 15px;
  }
  #sales #salesTable.nx-ven-list .venta-acciones {
    flex-wrap: wrap;
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
  }
  #sales #salesTable.nx-ven-list .venta-acciones .btn {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
    justify-content: center;
  }

  /* Chips de canal: fila cómoda con scroll horizontal. */
  #nxFilterSales .nx-seg { border-radius: 14px; padding: 6px; }
  #nxFilterSales .nx-seg-opt { padding: 9px 14px; min-height: 40px; }

  /* Clientes: la tabla de 10 columnas se vuelve tarjetas apiladas. */
  #clientes #clientesLista .table-container {
    overflow: visible;
    max-height: none;
    border: 0;
    background: none;
    box-shadow: none;
  }
  #clientes #clientesLista table { width: 100%; min-width: 0; }
  #clientes #clientesLista thead { display: none; }
  #clientes #clientesLista tbody tr {
    display: block;
    margin: 0 0 10px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-tertiary);
  }
  #clientes #clientesLista tbody tr:nth-child(even) { background: var(--bg-elevated); }
  #clientes #clientesLista tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: auto;
    max-width: none;
    padding: 5px 0;
    border: 0;
    white-space: normal;
    text-align: right;
  }
  #clientes #clientesLista tbody td[data-label]::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
    text-align: left;
    font-family: Inter, sans-serif;
  }
  #clientes #clientesLista tbody td[data-label=""]::before { content: none; }
  #clientes #clientesLista tbody td.cli-nombre-cell {
    display: block;
    text-align: left;
    font-size: 15px;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-soft);
  }
  #clientes #clientesLista tbody td.cli-acciones-cell {
    display: block;
    text-align: left;
    padding-top: 8px;
    margin-top: 6px;
    border-top: 1px solid var(--border-soft);
    white-space: normal !important;
  }
  #clientes #clientesLista tbody td.cli-acciones-cell .btn { min-height: 40px; }
  #clientes #clientesLista tbody td.nx-cli-nota { max-width: none !important; }

  /* Productos: la barra de acciones masivas va en columna y los botones a lo ancho. */
  #products .prod-bulk { flex-direction: column; align-items: stretch; }
  #products .prod-bulk .btn {
    width: 100%;
    justify-content: center;
    min-height: 42px;
  }
  #products .prod-bulk .prod-bulk-min { flex-basis: auto; width: 100%; }
  #products .prod-bulk .prod-bulk-min .form-control { max-width: none; flex: 1 1 auto; }
  #products .prod-bulk .prod-bulk-cancel { margin-left: 0; width: 100%; }
}