/* NexSell app polish — IMPROVE-18 cut 2 (Gestión / cierre de caja / ML hint).
   Cargado temprano desde index.html. No redefine :root; solo componentes. */

/* Hint opcional ML (Dashboard) */
#dashMlHint {
  margin-bottom: 20px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--border-soft, rgba(255,255,255,.08));
  background: linear-gradient(135deg, rgba(16,199,132,.08), rgba(11,18,32,.4));
  position: relative;
}
#dashMlHint .mlh-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 36px;
}
#dashMlHint .mlh-copy {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 62ch;
}
#dashMlHint .mlh-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
#dashMlHint .mlh-dismiss-x {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Cierre de caja — KPIs y empty */
#cierrecaja .cc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
#cierrecaja .cc-kpi {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 14px 16px;
  border-left: 3px solid var(--cc-accent, var(--accent-primary));
}
#cierrecaja .cc-kpi-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#cierrecaja .cc-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'Poppins', system-ui, sans-serif;
  letter-spacing: -0.3px;
}
#cierrecaja .cc-kpi-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}
#cierrecaja .cc-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px dashed var(--border-soft);
  border-radius: 12px;
  background: var(--bg-secondary);
}
#cierrecaja .cc-empty strong { color: var(--text-primary); }
#cierrecaja .page-sub { max-width: 68ch; }
#cierrecaja .cc-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 18px;
}
#cierrecaja .cc-explica {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--bg-secondary);
}
#cierrecaja .cc-explica summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 12.5px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
#cierrecaja .cc-explica p {
  color: var(--text-secondary);
  font-size: 12.5px;
  margin: 8px 0 0;
  line-height: 1.55;
  max-width: 68ch;
}

/* Cabezales Gestión: page-sub consistente */
#agenda .page-sub,
#envios .page-sub,
#cierrecaja .page-sub,
#clientes .page-sub,
#equipo .page-sub {
  color: var(--text-secondary);
  font-size: 13.5px;
  margin-top: 4px;
  line-height: 1.45;
}

/* ==========================================================================
   Planes — resumen + acordeón «Ver todas las diferencias»
   Varios planes pueden quedar abiertos a la vez (no es exclusivo).
   ========================================================================== */
.plan-highlights,
#panel-landing .plan-highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.plan-highlights li,
#panel-landing .plan-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-secondary, #C5CDD8);
  padding: 0;
}
.plan-highlights li::before,
#panel-landing .plan-highlights li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent-primary, #16C784);
  flex-shrink: 0;
}
.plan-highlights b { color: var(--text-primary, #F3F5F8); font-weight: 700; }

.plan-diff-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-color, #222834);
  background: transparent;
  color: var(--accent-primary, #16C784);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.plan-diff-toggle::after {
  content: "▾";
  font-size: 12px;
  line-height: 1;
}
.plan-diff-toggle[aria-expanded="true"]::after { content: "▴"; }
.plan-diff-toggle:hover {
  background: rgba(22, 199, 132, .08);
  border-color: rgba(22, 199, 132, .45);
}
.plan-diff-toggle:focus-visible {
  outline: 2px solid var(--accent-primary, #16C784);
  outline-offset: 2px;
}
.plan-diff[hidden] { display: none !important; }
.plan-diff {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
  padding: 12px 10px 4px;
  border-top: 1px solid var(--border-soft, #1A1F28);
}
.plan-diff-lead {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted, #7B8494);
}
.plan-soporte {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}
/* FIX (2026-09-30, QA): el «Escríbenos a soporte» de dentro de «Ver todas las
   diferencias» y de la tabla comparativa quedaba con el azul por defecto del
   navegador (#0000EE) sobre fondo oscuro: casi no se leía (contraste ~1,9:1). */
.plan-soporte a,
#panel-landing .plan-soporte a,
.plan-groups a,
.plans-compare-wrap a {
  color: #60A5FA;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.plan-card.is-pro {
  border-color: rgba(59, 130, 246, .45);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.plan-card.is-pro::before {
  background: linear-gradient(90deg, #3B82F6, #8B5CF6);
}
.plan-tag.pro {
  background: #141C2C;
  color: #C5D4F0;
  border: 1px solid rgba(59, 130, 246, .45);
  right: 14px;
  left: auto;
}
#panel-landing .land-plan.is-pro {
  border-color: rgba(59, 130, 246, .5);
  box-shadow: inset 0 3px 0 #3B82F6;
}
#panel-landing .land-badge.pro {
  background: #141C2C;
  color: #C5D4F0;
  border: 1px solid rgba(59, 130, 246, .45);
}
#panel-landing .land-plans { padding-top: 14px; }
#panel-landing .land-plan { overflow: visible; }
#panel-landing .land-plan .auth-btn { margin-top: auto; }
#panel-landing .land-plan.reco {
  box-shadow: 0 12px 32px rgba(22, 199, 132, .16), 0 0 0 1px rgba(22, 199, 132, .28);
}

/* ==========================================================================
   Pulido visual del shell y de las secciones (dark, sin cambiar la lógica)
   ========================================================================== */
.rail {
  background:
    linear-gradient(180deg, rgba(22, 199, 132, .05), transparent 140px),
    var(--bg-secondary);
}
.rail-brand-name { letter-spacing: -0.03em; }
.rail-cap {
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (min-width: 1025px) {
  body:not(.rail-collapsed) .rail-nav > .rail-item,
  body:not(.rail-collapsed) .rail-sub > .rail-item {
    margin-left: 8px;
    margin-right: 8px;
  }
}
.rail-item:focus-visible,
.rail-subitem:focus-visible,
.pi-tab:focus-visible,
.topbar-btn:focus-visible,
.form-control:focus-visible,
.auth-btn:focus-visible {
  outline: 2px solid var(--accent-primary, #16C784);
  outline-offset: 2px;
}
/* .btn tiene overflow:hidden: el anillo por fuera se recorta. */
.btn:focus-visible {
  outline: 2px solid var(--accent-primary, #16C784);
  outline-offset: -3px;
}
.topbar {
  background: rgba(10, 12, 16, .9);
  border-bottom-color: var(--border-soft);
}
.page-title {
  letter-spacing: -0.03em;
}
.page-sub {
  max-width: 68ch;
  line-height: 1.5;
}
.card,
.kpi-card {
  border-radius: 16px;
}
.card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.kpi-value { font-variant-numeric: tabular-nums; }
.table-container { border-radius: 14px; }
th { letter-spacing: .04em; }
.btn { letter-spacing: .01em; }
.form-control {
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
  border-color: var(--accent-primary);
  box-shadow: var(--focus-ring);
}
.badge {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .02em;
}
.empty-state {
  border: 1px dashed var(--border-strong, #2C3442);
  border-radius: 16px;
  background: rgba(255, 255, 255, .02);
  padding: 32px 18px;
}
.toast {
  border-radius: 14px;
  backdrop-filter: blur(8px);
}
.modal-fade-card,
.pi-tabs {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
#dashboard .card,
#sales .card,
#devoluciones .card,
#products .card,
#inventory .card,
#encargos .card,
#finanzas .card,
#analytics .card,
#metas .card,
#reportes .card,
#logros .card,
#agenda .card,
#envios .card,
#cierrecaja .card,
#clientes .card,
#equipo .card,
#settings .card,
#admin .card,
#automatizaciones .card {
  border-color: var(--border-soft);
}

@media (max-width: 820px) {
  .plan-card.is-reco { transform: none; }
  .plans-grid { padding-top: 14px; }
  #panel-landing .land-plans { gap: 18px; }
  .page-title { font-size: 20px; }
}

/* ==========================================================================
   Pasada 2026-09-24 — medido en 1440 y 390 (modo prueba).
   Selectores más específicos que las reglas viejas de index.html para que
   ganen aunque esta hoja cargue primero.
   ========================================================================== */

/* Selects y fechas: el control nativo claro desentona en el tema oscuro. */
select.form-control,
input[type="date"].form-control,
input[type="month"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control {
  color-scheme: dark;
}
select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239BA6B6' d='M1.2 1.4 6 6.2 10.8 1.4' stroke='%239BA6B6' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding-right: 36px;
}

/* Dashboard en teléfono: la grilla estaba forzada a 1 columna y los números
   bajaban a font-size pensado para 2 columnas. El héroe comparte la fila. */
@media (max-width: 768px) {
  #dashboard .grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .kpi-card .kpi-label,
  .kpi-card .kpi-sub,
  #cierrecaja .cc-kpi-label {
    font-size: 12px;
  }
}

/* Envíos: en escritorio las acciones siguen en la misma fila (display:contents).
   En el teléfono quedan en una sola tira con scroll, no una torre de botones. */
.env-head-actions { display: contents; }
@media (max-width: 720px) {
  #envios .page-head .env-head-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  #envios .env-head-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    align-items: center;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  #envios .env-head-actions > span[style*="flex:1"] { display: none; }
  #envios .env-head-actions .btn,
  #envios .env-head-actions select.form-control {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none !important;
    margin: 0;
  }
}

/* ==========================================================================
   Interno / Admin / Configuración — 2026-09-24
   Solo estas secciones. La grilla de pestañas (2 columnas en móvil) vive en
   index.html (#polishPass3) porque ahí está el display:grid !important.
   ========================================================================== */

#settings .page-sub,
#admin .page-sub,
#automatizaciones .page-sub {
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 68ch;
}

/* Controles oscuros: los <select> del Admin no tenían .form-control y el
   desplegable nativo salía claro. color-scheme + chevron (el chevron de
   select.form-control ya está más arriba y gana por especificidad). */
#settings input.form-control,
#settings select.form-control,
#settings textarea.form-control,
#admin input.form-control,
#admin select.form-control,
#admin textarea.form-control {
  color-scheme: dark;
}
#admin input[type="date"].form-control,
#settings input[type="date"].form-control {
  color-scheme: dark;
  appearance: auto;
  -webkit-appearance: auto;
}
#admin .admin-code {
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Pestañas: refuerzo por si una regla vieja vuelve a poner ellipsis. */
@media (max-width: 768px) {
  #settings #settingsTabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
    overflow: visible;
  }
  #settings #settingsTabs .pi-tab {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    min-width: 0;
  }
}

/* Notificaciones: el switch y la fila de correo no se salen de la tarjeta. */
#settings #bodyNotif .switch {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
  line-height: 1.45;
  white-space: normal;
}
#settings #bodyNotif .switch .switch-input { margin-top: 1px; }
#settings .nt-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
}
#settings .nt-add-row .form-control {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 320px;
}
#settings .report-email-row { max-width: 100%; }
#settings .report-email-row .mia-head-btn {
  width: 44px;
  height: 44px;
  flex: none;
}
#settings #planAlertasMatrixBox { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#settings #profLogoPreview img {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 60px;
  object-fit: contain;
}
#settings .chan-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
#settings .set-panel > h2 { flex-wrap: wrap; min-width: 0; }
#settings .acc-id-info,
#settings .acc-row-head > div { min-width: 0; }

@media (max-width: 640px) {
  #settings .nt-add-row { flex-direction: column; align-items: stretch; }
  #settings .nt-add-row .form-control,
  #settings .nt-add-row .btn { width: 100%; max-width: none; flex: 1 1 auto; }
  #settings .acc-identity { flex-wrap: wrap; }
  #settings .acc-row-head { flex-direction: column; align-items: stretch; }
  #settings .acc-row-head > button { width: 100%; justify-content: center; }
  #settings #accPhoneRow > div { flex-direction: column; align-items: stretch; }
  #settings #accPhoneRow .form-control { width: 100% !important; }
  #settings #accPhoneRow .btn { width: 100%; justify-content: center; }
  #settings .nt-where { grid-template-columns: 1fr; }
}

/* Admin: búsqueda, formularios y tablas */
#admin .admin-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#admin .admin-search-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
}
#admin .admin-search-row .form-control {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 420px;
  width: auto;
}
#admin .admin-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 14px 0 12px;
  align-items: end;
}
#admin .admin-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#admin .admin-field-grow { grid-column: span 2; }
#admin .admin-field label,
#admin .admin-checks-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
#admin .admin-field .form-control { width: 100%; }
#admin .admin-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  margin: 0 0 10px;
}
#admin .admin-checks label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
}
#admin .admin-field-note {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
#admin select.admin-plan-select.form-control {
  width: auto;
  min-width: 8.5rem;
  max-width: 100%;
  min-height: 36px;
  padding: 6px 32px 6px 10px;
  font-size: 13px;
  flex: 1 1 8.5rem;
}
#admin .admin-scroll-note {
  display: none;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
#admin .table-container {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
#admin .table-container td:first-child {
  max-width: 240px;
  overflow-wrap: anywhere;
}
#admin details.admin-details {
  margin-top: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--bg-secondary);
}
#admin details.admin-details > summary {
  cursor: pointer;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  list-style: none;
}
#admin details.admin-details > summary::-webkit-details-marker { display: none; }
#admin details.admin-details > .card { margin: 0 12px 12px; }

@media (max-width: 768px) {
  #admin .admin-search-row { flex-direction: column; align-items: stretch; }
  #admin .admin-search-row .form-control,
  #admin .admin-search-row .btn { width: 100%; max-width: none; flex: 1 1 auto; }
  #admin .admin-field-grow { grid-column: auto; }
  #admin .admin-checks .btn { width: 100%; justify-content: center; }
  #admin .admin-scroll-note { display: block; }
  #admin .table-container {
    background:
      linear-gradient(to right, var(--bg-elevated), rgba(0,0,0,0)) 0 0 / 28px 100%,
      linear-gradient(to left, var(--bg-elevated), rgba(0,0,0,0)) 100% 0 / 28px 100%,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) 0 0 / 12px 100%,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) 100% 0 / 12px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  #admin select.admin-plan-select.form-control { font-size: 16px; min-height: 44px; }
}

/* Desplegable de planes abierto desde Configuración (no toca precios ni topes). */
@media (max-width: 720px) {
  #planesModalOverlay {
    padding: 12px !important;
    align-items: flex-start !important;
  }
  #planesModalOverlay .period-opt { min-height: 44px; }
  #planesModalOverlay .plan-diff-toggle { min-height: 44px; }
  #planesModalOverlay .plan-card .btn { width: 100%; }
}

/* Modo prueba: el banner fijo tapaba el logo del rail. */
@media (min-width: 1025px) {
  body.nexsell-demo-active .rail { top: 44px; }
}
@media (max-width: 1024px) {
  body.nexsell-demo-active .rail-brand { padding-top: 108px; }
}

/* ==========================================================================
   Dashboard — layout, tipografía y dark (solo #dashboard).
   Medido: 7 KPIs en grilla de 4 dejaban un hueco; en ≤768 la última tarjeta
   se estiraba al 100%. Los números usaban vw y word-break, así que un monto
   se partía a la mitad. Esta hoja carga antes que index.html: los selectores
   con doble #dashboard ganan a esas reglas viejas.
   ========================================================================== */

#dashboard {
  min-width: 0;
}
#dashboard .page-head {
  margin-bottom: 22px;
}
#dashboard .page-sub {
  max-width: 42ch;
}

/* Exportar: en pantallas angostas un solo botón, no tres filas. */
@media (max-width: 860px) {
  #dashboard #dashExportToggle { display: inline-flex; }
  #dashboard #dashExportWrap {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  #dashboard #dashExportWrap #dashExportGroup { display: none; }
  #dashboard #dashExportWrap.exp-abierto #dashExportGroup {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  #dashboard #dashExportWrap.exp-abierto #dashExportGroup .btn {
    width: 100%;
    justify-content: center;
  }
}
@media (min-width: 861px) {
  #dashboard #dashExportToggle { display: none; }
  #dashboard #dashExportGroup {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* KPIs: 2 columnas hasta que el bloque mida 720px; después 2 + 3 + 2, sin hueco. */
#dashboard .dash-kpis-wrap {
  container-type: inline-size;
  container-name: dashkpis;
  margin: 0 0 12px;
  min-width: 0;
}
#dashboard#dashboard .dash-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 0;
  align-items: stretch;
}
#dashboard#dashboard .dash-kpis > .kpi-card {
  grid-column: auto;
  min-width: 0;
  height: auto;
  container-type: inline-size;
}
@container dashkpis (min-width: 720px) {
  #dashboard#dashboard .dash-kpis {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
  }
  #dashboard#dashboard .dash-kpis > .kpi-card.is-hero { grid-column: span 6; }
  #dashboard#dashboard .dash-kpis > .kpi-card:nth-child(n+3):nth-child(-n+5) { grid-column: span 4; }
  #dashboard#dashboard .dash-kpis > .kpi-card:nth-child(n+6) { grid-column: span 6; }
}

#dashboard .dash-kpis > .kpi-card {
  padding: 14px 14px 12px;
  box-shadow: none;
}
#dashboard .dash-kpis > .kpi-card:hover {
  transform: none;
}
#dashboard .dash-kpis > .kpi-card .kpi-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 10px;
}
#dashboard .dash-kpis > .kpi-card .kpi-label {
  font-size: 12px;
  line-height: 1.3;
  margin-bottom: 6px;
  text-transform: none;
  letter-spacing: 0;
}
#dashboard .dash-kpis > .kpi-card .kpi-value {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  font-size: clamp(18px, 11cqi, 26px);
  color: var(--text-primary);
  margin-bottom: 0;
}
#dashboard .dash-kpis > .kpi-card.is-hero .kpi-value {
  font-size: clamp(20px, 8cqi, 34px);
}
#dashboard .dash-kpis > .kpi-card.is-soft .kpi-value {
  font-size: clamp(18px, 11cqi, 26px);
  color: var(--text-primary);
}
#dashboard .dash-kpis > .kpi-card .kpi-sub,
#dashboard .kpi-trend {
  font-size: 12px;
  line-height: 1.4;
  margin-top: 6px;
  overflow-wrap: anywhere;
}
#dashboard .kpi-card.is-hero .kpi-label,
#dashboard .kpi-card.is-hero .kpi-sub {
  color: var(--text-primary);
}

/* IVA y publicidad: dos chips, también en 2 columnas en el teléfono. */
#dashboard #dashKpiTira.dash-kpi-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  background: transparent;
  border: 0;
}
#dashboard .dash-kpi-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
}
#dashboard .dash-kpi-chip .kpi-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
}
#dashboard .dash-kpi-num {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
#dashboard .dash-kpi-detail {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
}
@media (max-width: 420px) {
  #dashboard .dash-kpi-num { font-size: 16px; }
}

#dashboard #dashArchivedNote.dash-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 18px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}
#dashboard #dashArchivedNote.dash-note [data-lucide] {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  flex: none;
  color: var(--text-secondary);
}

/* Período: una tira que se desplaza, no una pila de botones. */
#dashboard .dash-period {
  margin-bottom: 18px;
  padding: 14px 16px;
}
#dashboard .dash-period-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
#dashboard .dash-period-label {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
#dashboard .dash-period-row .btn {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
}
#dashboard #dashRangoBox.dash-range {
  margin-top: 12px;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
#dashboard #dashRangoBox.dash-range > div {
  flex: 1 1 150px;
  min-width: 0;
}
#dashboard .dash-period-info {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}
#dashboard input[type="date"].form-control,
#dashboard select.form-control {
  color-scheme: dark;
}
#dashboard #dashGdPeriodo {
  width: auto;
  min-width: 128px;
  min-height: 40px;
}

#dashboard .dash-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
#dashboard .dash-toolbar h3 {
  margin: 0;
  border: 0;
  padding: 0;
}
#dashboard .dash-toolbar p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 62ch;
}
#dashboard .dash-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
#dashboard #dashStockCritPct {
  width: 72px;
  min-height: 40px;
  text-align: center;
}
#dashboard .dash-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
  min-width: 0;
}
#dashboard .grid.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  min-width: 0;
}

#dashboard .dash-banner {
  margin-bottom: 18px;
  padding: 14px 16px;
  cursor: pointer;
  border-color: var(--warning);
}
#dashboard .dash-banner-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
#dashboard #dashEnviosPendTxt {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

#dashboard #dashWelcome > h3 {
  border-bottom: 0;
  padding-bottom: 0;
}
#dashboard #dashWelcomeSub,
#dashboard #dashMlHint .mlh-copy {
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#dashboard #dashPromoFee > div > div:last-child {
  min-width: 0;
}
@media (max-width: 520px) {
  #dashboard #dashPromoFee > div > div:last-child {
    text-align: left !important;
    width: 100%;
  }
}

#dashboard .chart-guide {
  margin: 0 0 12px;
  max-width: 100%;
}
#dashboard .chart-canvas-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
@media (max-width: 640px) {
  #dashboard .chart-canvas-wrap { height: 220px !important; }
  #dashboard #dashSparklineSvgWrap { height: 160px !important; }
  #dashboard #dashCostStackWrap { height: 260px !important; }
}

#dashboard .dash-name,
#dashboard .top-product-name,
#dashboard .dash-product-title,
#dashboard .stock-alert-name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  min-width: 0;
}
#dashboard .dash-product-title {
  font-size: 16px;
  margin-bottom: 10px;
}
#dashboard .dash-fine {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
#dashboard .dash-rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 10px;
  min-width: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}
#dashboard .dash-rank-main {
  flex: 1;
  min-width: 0;
}
#dashboard .dash-rank-main > div {
  flex-wrap: wrap;
  min-width: 0;
}
#dashboard .top-product-item,
#dashboard .top-product-info {
  min-width: 0;
}
#dashboard .stock-alert-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  min-width: 0;
}
#dashboard .stock-alert-row .stock-alert-name {
  flex: 1;
  white-space: normal;
}

#dashboard #dashGastoForm {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
#dashboard .dash-gasto-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
#dashboard .dash-gasto-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
}
#dashboard #dashGastoNombre,
#dashboard #dashGastoMonto {
  width: auto;
  min-width: 0;
}
#dashboard #dashGastoNombre { flex: 2 1 180px; }
#dashboard #dashGastoMonto { flex: 1 1 120px; }
#dashboard #dashGastoForm button[type="submit"] { flex: 0 0 auto; }
@media (max-width: 560px) {
  #dashboard .dash-gasto-row { flex-direction: column; align-items: stretch; }
  #dashboard #dashGastoNombre,
  #dashboard #dashGastoMonto,
  #dashboard #dashGastoForm button[type="submit"] {
    width: 100%;
    flex: 1 1 auto;
  }
}

#dashboard #reputacionBody,
#dashboard #dashInsights,
#dashboard #dashProjection,
#dashboard #dashCostStackLegend,
#dashboard #bestSeller,
#dashboard #highestMargin,
#dashboard #top5ProductsList {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  #dashboard .kpi-card,
  #dashboard .card,
  #dashboard .top-product-item,
  #dashboard .stock-alert-row {
    transition: none;
  }
  #dashboard .kpi-card:hover,
  #dashboard .top-product-item:hover,
  #dashboard .stock-alert-row:hover {
    transform: none;
  }
}

/* Gestión en celular (2026-09-24).
   Medido a 390px: la fila de Envíos medía 214px (botones envueltos, ~257px la
   cabecera) y el PDF del cierre ocupaba una fila propia de 354px. Las acciones
   van en una tira horizontal con scroll; no en una grilla que crece. */

#envios .env-head-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: 0;
}
#envios .env-head-row .page-title { flex: 0 0 auto; }
#envios .env-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
#envios .env-head-actions > .btn,
#envios .env-head-actions > .form-control,
#envios .env-head-actions > .env-printer {
  flex: 0 0 auto;
  width: auto;
}

#envios .env-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
  min-width: 0;
  max-width: 100%;
}
#envios .env-filters > #enviosSearchInput {
  flex: 1 1 220px;
  min-width: 180px;
  width: auto;
  margin-bottom: 0;
}
#envios .env-filter-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
#envios .env-filter-row > .form-control {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 220px;
  margin-bottom: 0;
}
@media (max-width: 768px) {
  #envios .env-filters > #enviosSearchInput {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }
  #envios .env-filter-row {
    flex: 1 1 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-bottom: 2px;
  }
  #envios .env-filter-row > .form-control {
    flex: 1 1 auto;
    max-width: none;
    min-width: max-content;
  }
}

#agenda .ag-quick {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  #agenda .ag-quick {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    max-width: 100%;
    padding-bottom: 2px;
  }
  #agenda .ag-quick .btn { flex: 0 0 auto; width: auto; }
}

#cierrecaja .cc-toolbar #cierrePdfBtn { margin-left: auto; }
@media (max-width: 768px) {
  #cierrecaja .cc-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    max-width: 100%;
  }
  #cierrecaja .cc-toolbar #cierreFecha {
    flex: 1 1 9.5rem;
    width: 9.5rem;
    min-width: 0;
    max-width: 190px;
  }
  #cierrecaja .cc-toolbar #cierrePdfBtn {
    width: auto;
    flex: 0 0 auto;
    margin-left: 0;
  }
  #cierrecaja .cc-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #cierrecaja .cc-kpi-value { font-size: 18px; }
}

#encargos .enc-sec-add {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  min-width: 0;
}
#encargos .enc-sec-add .form-control {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin-bottom: 0;
}
#encargos .enc-sec-add .btn { flex: 0 0 auto; width: auto; }

#encargos .enc-chip-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0 0 8px;
  flex-wrap: wrap;
}
#encargos #encargoFiltros { margin-bottom: 12px; }
@media (max-width: 768px) {
  #encargos .enc-chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    max-width: 100%;
    padding-bottom: 4px;
  }
  #encargos .enc-chip-row .inv-estado-chip { flex: 0 0 auto; }
}

/* Pestañas Catálogo / Inventario / Encargos: en 320px "Encargos" quedaba
   cortada (el borde derecho pasaba el contenedor y el scroll no alcanzaba). */
@media (max-width: 420px) {
  #products > .pi-tabs,
  #inventory > .pi-tabs,
  #encargos > .pi-tabs {
    display: flex;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  #products > .pi-tabs .pi-tab,
  #inventory > .pi-tabs .pi-tab,
  #encargos > .pi-tabs .pi-tab {
    padding: 8px 10px;
    flex: 0 0 auto;
  }
}

/* ============================================================
   Ventas — solo #sales, modales de pedido y timeline.
   El <link> final de index.html vuelve a cargar esta hoja
   para que estas reglas ganen a los polish posteriores.
   ============================================================ */

#sales { color-scheme: dark; }

#sales .form-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Formulario: se puede cerrar. En el teléfono parte cerrado para ver el historial. */
#sales .venta-registro-sum {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#sales .venta-registro-sum::-webkit-details-marker { display: none; }
#sales .venta-registro-sum h2 { margin: 0; flex: 1; }
#sales .venta-registro-sum::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: rotate(45deg);
  flex: none;
}
#sales .venta-registro[open] > .venta-registro-sum {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-soft);
}
#sales .venta-registro[open] > .venta-registro-sum::after { transform: rotate(225deg); margin-top: 6px; }

/* Radios del formulario: ahora son .ns-seg (assets/nexsell-forms.css). */

/* Los campos que se abren (precio, abono, comisión, entrega) medían 120px
   y en el teléfono se cortaban. */
#sales .venta-opt-wrap.abierto { max-height: 360px; }
@media (max-width: 640px) {
  #sales .venta-opt-wrap.abierto { max-height: 560px; }
  #sales #saleLineasBloque .form-group,
  #sales #saleVariantWrap { max-width: none !important; }
}

#sales .venta-linea-extra {
  display: grid !important;
  grid-template-columns: minmax(0, 1.5fr) minmax(130px, .8fr) 88px minmax(110px, .7fr) auto;
  gap: 8px;
  align-items: end;
}
#sales .venta-linea-extra .vl-resumen { grid-column: 1 / -1; }
#sales .vl-quitar { align-self: end; }
@media (max-width: 720px) {
  #sales .venta-linea-extra { grid-template-columns: 1fr 1fr; }
  #sales .venta-linea-extra > div:first-child,
  #sales .venta-linea-extra .vl-resumen,
  #sales .vl-quitar { grid-column: 1 / -1; }
  #sales .venta-linea-extra > div[style*="width"] { width: auto !important; }
  #sales .vl-quitar { justify-content: center; min-height: 44px; }
}

/* Fecha y selects legibles en tema oscuro (el ícono nativo salía negro). */
#sales select.form-control,
.venta-modal select.form-control {
  color-scheme: dark;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239BA6B6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
#sales input[type="date"].form-control,
.venta-modal input[type="date"].form-control {
  color-scheme: dark;
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239BA6B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}
#sales input[type="date"].form-control::-webkit-calendar-picker-indicator,
.venta-modal input[type="date"].form-control::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0;
  width: 42px;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

/* Historial: toolbar, filtros y período activo. */
#sales .ventas-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 4px 0 14px;
}
#sales .ventas-buscar { flex: 1 1 220px; min-width: 0; }
#sales #ventasBar.ventas-panel {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--bg-tertiary);
}
#sales .ventas-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
  gap: 12px;
  align-items: end;
}
#sales .ventas-filtros > div { min-width: 0; }
#sales .ventas-filtros .form-control { width: 100%; min-width: 0; }
#sales .ventas-periodos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
#sales .ventas-periodos .btn.is-on {
  background: var(--accent-soft);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}
#sales #ventasRango.ventas-rango {
  display: flex;
  margin-top: 12px;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
#sales #ventasInfo { line-height: 1.45; }

#sales #salesTable .ventas-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  align-items: center;
}
#sales #salesTable > .ventas-resumen .badge,
#sales #salesTable .ventas-resumen .badge {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px !important;
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600;
  color: var(--text-primary) !important;
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-border);
  border-radius: 12px;
}
#sales .ventas-estados {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
#sales .venta-estado-chip {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 650;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}
#sales .venta-estado-chip strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
#sales .venta-estado-chip.is-on {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: rgba(22, 199, 132, 0.1);
}

/* La celda de producto recortaba los estados (nowrap + overflow hidden). */
#sales #salesTable tbody td.venta-producto {
  white-space: normal;
  max-width: 280px;
  overflow: visible;
  text-overflow: clip;
  vertical-align: top;
}
#sales #salesTable .venta-producto-nombre {
  font-weight: 600;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#sales #salesTable .venta-variante {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
}
#sales #salesTable .venta-producto-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  max-width: 260px;
  white-space: normal;
}
#sales #salesTable .venta-producto-meta:empty { display: none; margin: 0; }
#sales #salesTable .venta-producto-meta > div { display: contents; }
#sales #salesTable tbody .badge {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 650;
}
#sales #salesTable .venta-badge-grupo {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.35);
}

#sales #salesTable .venta-acciones {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
}
#sales #salesTable .venta-acciones .btn { margin: 0 !important; }

#sales #salesTable .table-container {
  background:
    linear-gradient(to right, var(--bg-elevated), rgba(0,0,0,0)) 0 0 / 28px 100%,
    linear-gradient(to left, var(--bg-elevated), rgba(0,0,0,0)) 100% 0 / 28px 100%,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) 0 0 / 14px 100%,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) 100% 0 / 14px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

@media (max-width: 768px) {
  #sales .ventas-buscar { flex-basis: 100%; }
  #sales .ventas-toolbar .btn { flex: 1 1 auto; justify-content: center; }
  #sales #ventasRango.ventas-rango { flex-direction: column; align-items: stretch; }
  #sales #ventasRango .btn { width: 100%; justify-content: center; }
  #sales #salesTable .ventas-resumen .badge { flex: 1 1 calc(50% - 10px); }
}

/* En el teléfono la tabla de 10 columnas no cabe: cada venta es una ficha. */
@media (max-width: 720px) {
  #sales #salesTable .table-container {
    overflow: visible;
    max-height: none;
    border: none;
    background: none;
    box-shadow: none;
  }
  #sales #salesTable table { width: 100%; min-width: 0; }
  #sales #salesTable thead { display: none; }
  #sales #salesTable 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 tbody tr:nth-child(even) { background: var(--bg-elevated); }
  #sales #salesTable tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: auto;
    max-width: none;
    padding: 6px 0;
    border: none;
    white-space: normal;
    text-align: right;
    overflow: visible;
  }
  #sales #salesTable 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 tbody td[data-col] { display: flex !important; }
  #sales #salesTable tbody td.venta-producto,
  #sales #salesTable tbody td.venta-acciones-cell {
    display: block;
    text-align: left;
    padding-top: 0;
  }
  #sales #salesTable .venta-producto-nombre {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 15px;
  }
  #sales #salesTable .venta-producto-meta { max-width: none; }
  #sales #salesTable .venta-acciones {
    max-width: none;
    width: 100%;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
  }
  #sales #salesTable .venta-acciones .btn {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
    justify-content: center;
  }
}

/* Modales de la venta (se cuelgan del body, no de #sales). */
.venta-modal-overlay { color-scheme: dark; backdrop-filter: blur(6px); }
.venta-modal { color-scheme: dark; }
.venta-modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.venta-modal .table-container { max-width: 100%; overflow-x: auto; }
@media (max-width: 640px) {
  .venta-modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .venta-modal {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 92dvh;
    overflow: auto;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom)) !important;
  }
  .venta-modal-actions .btn { flex: 1 1 140px; justify-content: center; min-height: 44px; }
}

/* Timeline del pedido: la línea era casi invisible y el texto largo se salía. */
.nx-tl {
  box-shadow: none;
  background: var(--bg-tertiary);
}
.nx-tl-list::before { background: var(--border-strong); }
.nx-tl-meta { overflow-wrap: anywhere; }
.nx-tl-label { overflow-wrap: anywhere; }
.nx-tl-item.is-current .nx-tl-dot { color: #dbeafe; }


/* ===== Rendimiento (Análisis, Metas, Logros, Reportes) =====
   Solo esta sección. El marco del gráfico vive en el contenedor:
   el canvas queda sin padding para que Chart.js no se desborde. */

#analytics,
#metas,
#logros,
#reportes {
  min-width: 0;
  max-width: 100%;
}
#analytics > .pi-tabs,
#metas > .pi-tabs,
#logros > .pi-tabs,
#reportes > .pi-tabs {
  max-width: 100%;
  min-width: 0;
}
#analytics .card,
#metas .card,
#logros .card,
#reportes .card {
  min-width: 0;
  max-width: 100%;
}
#analytics .page-sub,
#metas .page-sub,
#logros .page-sub,
#reportes .page-sub {
  max-width: 62ch;
}

#analytics .rend-toolbar,
#reportes .rend-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}
#reportes .rend-toolbar {
  margin: 4px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--bg-secondary);
}
#analytics .rend-field,
#reportes .rend-field {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 280px;
}
#analytics .rend-toolbar label,
#reportes .rend-toolbar .form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
#analytics .rend-toolbar label svg,
#analytics .rend-toolbar label i {
  width: 14px;
  height: 14px;
  color: var(--accent-primary);
}
#analytics .rend-toolbar .form-control,
#reportes .rend-toolbar .form-control {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#analytics .rend-toolbar-actions,
#reportes .rend-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
  align-items: center;
}
#reportes .rend-toolbar-custom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  flex: 1 1 220px;
  min-width: 0;
}
#reportes .rend-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

#analytics .rend-hint,
#reportes .rend-hint,
#metas .rend-hint {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.45;
}
#analytics .rend-hint b,
#reportes .rend-hint b { color: var(--accent-primary); }

#analytics .card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#analytics .card h3 > svg,
#analytics .card h3 > i {
  width: 34px !important;
  height: 34px !important;
  padding: 7px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-primary) !important;
  box-sizing: border-box;
  flex: none;
}
#analytics .rend-kpis { margin-bottom: 16px; min-width: 0; }
#analytics .kpi-card,
#analytics .kpi-value { min-width: 0; }
#analytics .kpi-value {
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
#analytics .rend-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  min-width: 0;
}
#analytics .rend-chip {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  padding: 8px 12px;
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
#analytics .rend-chip strong {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
#analytics .rend-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
}
#analytics .rend-note svg,
#analytics .rend-note i { width: 18px; height: 18px; flex: none; margin-top: 1px; }
#analytics .rend-note.is-ok {
  color: var(--success);
  border-color: var(--accent-border);
  background: var(--accent-soft);
}
#analytics .rend-note.is-bad {
  color: var(--accent-danger);
  border-color: var(--danger-border);
  background: var(--danger-soft);
}

#analytics .rend-rank-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
  min-width: 0;
}
#analytics .rend-rank-grid > .card { margin-bottom: 0 !important; }
#analytics .rend-rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#analytics .rend-rank-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border-radius: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
}
#analytics .rend-rank-pos {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-primary);
  font-weight: 700;
  font-size: 12px;
}
#analytics .rend-rank-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}
#analytics .rend-rank-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
#analytics .rend-rank-meta b {
  font-size: 13px;
  color: var(--text-primary);
}
#analytics .rend-rank-meta b.is-good,
#analytics .is-good { color: var(--success); }
#analytics .rend-rank-meta .is-bad,
#analytics .is-bad { color: var(--accent-danger); }

#analytics .rend-chart,
#reportes .rend-chart {
  max-width: 100%;
  min-width: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--chart-signal) 12%, transparent), transparent 48%),
    var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  overflow: hidden;
}
#analytics #anaDayChart,
#analytics #anaTrendChart,
#reportes #repCompareChart {
  display: block;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
}

#analytics .rend-scroll,
#metas #metasHistorial .table-container,
#reportes .table-container {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#analytics .rend-detail { min-width: 860px; }
#analytics .rend-name {
  min-width: 140px;
  max-width: 240px;
  overflow-wrap: anywhere;
}
#analytics td.num,
#analytics th.num,
#metas td.num,
#metas th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#analytics .rend-empty,
#reportes .rend-empty,
#metas .rend-empty,
#logros .rend-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  margin: 0;
  padding: 22px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-elevated) 82%, var(--bg-primary));
  color: var(--text-secondary);
}
#analytics .rend-empty > i,
#analytics .rend-empty > svg,
#reportes .rend-empty > i,
#reportes .rend-empty > svg,
#metas .rend-empty > i,
#metas .rend-empty > svg,
#logros .rend-empty > i,
#logros .rend-empty > svg {
  width: 28px;
  height: 28px;
  color: var(--chart-signal-2, var(--accent-secondary));
}
#analytics .rend-empty > div,
#reportes .rend-empty > div,
#metas .rend-empty > div,
#logros .rend-empty > div {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 36ch;
  line-height: 1.35;
}
#analytics .rend-empty p,
#reportes .rend-empty p,
#metas .rend-empty p,
#logros .rend-empty p {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  max-width: 42ch;
  line-height: 1.45;
}
#analytics .rend-empty a,
#metas .rend-empty a {
  color: var(--accent-primary);
  font-weight: 600;
}
#analytics .rend-empty-inline { padding: 14px 12px; }
#metas #metasGrafico:has(.rend-empty) {
  background: transparent;
  border: 0;
  padding: 0;
}

#reportes .grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  min-width: 0;
}
#reportes .rend-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#reportes .rend-bar-row {
  display: grid;
  grid-template-columns: minmax(72px, 96px) minmax(0, 1fr) max-content;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 5px 4px;
  border-radius: 8px;
}
#reportes .rend-bar-label {
  font-size: 13px;
  color: var(--text-secondary);
  min-width: 0;
}
#reportes .rend-bar-row.is-lead .rend-bar-label {
  color: var(--text-primary);
  font-weight: 700;
}
#reportes .rend-bar-track {
  height: 10px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  overflow: hidden;
  min-width: 0;
}
#reportes .rend-bar-fill {
  height: 100%;
  max-width: 100%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--chart-signal-2) 70%, var(--bg-primary));
}
#reportes .rend-bar-row.is-lead .rend-bar-fill {
  background: linear-gradient(90deg, var(--chart-signal-2), var(--chart-signal));
}
#reportes .rend-bar-meta {
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
#reportes .rend-top-name {
  font-size: 19px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}

#metas #metasGrafico,
#metas #metasHistorial,
#metas #metasForm,
#metas #metasProgreso {
  max-width: 100%;
  min-width: 0;
}

#logros .rend-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
  min-width: 0;
}
#logros .rend-cat-ico {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-primary);
}
#logros .rend-cat-ico svg,
#logros .rend-cat-ico i { width: 16px; height: 16px; }
#logros .rend-cat-name {
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
#logros .rend-cat-count {
  margin-left: auto;
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  padding: 3px 11px;
  border-radius: 20px;
}
#logros .rend-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 14px;
  margin-bottom: 28px;
  min-width: 0;
}
#logros .logros-badge {
  background: var(--bg-elevated) !important;
  min-width: 0;
  overflow-wrap: anywhere;
}
#logros .logros-badge.is-locked { opacity: 1 !important; }

@media (max-width: 1100px) {
  #analytics .rend-rank-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  #analytics .rend-kpis.grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #analytics .rend-field,
  #reportes .rend-field {
    flex-basis: calc(50% - 12px);
    max-width: none;
  }
  #analytics .rend-toolbar select.form-control,
  #reportes .rend-toolbar select.form-control {
    -webkit-appearance: menulist;
    appearance: auto;
  }
  #analytics .card,
  #metas .card,
  #logros .card,
  #reportes .card {
    overflow: visible;
  }
}
@media (max-width: 640px) {
  #reportes .chart-hscroll,
  #reportes .chart-hscroll canvas,
  #analytics .chart-canvas-wrap,
  #analytics .chart-canvas-wrap canvas {
    min-width: 0 !important;
  }
  #analytics .rend-toolbar-actions,
  #reportes .rend-toolbar-actions {
    width: 100%;
    margin-left: 0;
  }
}
@media (max-width: 480px) {
  #analytics .rend-field,
  #reportes .rend-field { flex-basis: 100%; }
  #analytics .rend-rank-item {
    grid-template-columns: 28px minmax(0, 1fr);
  }
  #analytics .rend-rank-meta {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    text-align: left;
    gap: 6px;
  }
  #reportes .rend-bar-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  #reportes .rend-bar-track { grid-column: 1 / -1; }
  #analytics .kpi-value { font-size: 18px !important; }
}

/* ============================================================================
   Productos — catálogo, filtros, tope de plan y simulador.
   Solo #products y el overlay .psim (se abre desde esta sección).
   ============================================================================ */

#products {
  max-width: 100%;
}
#products .card,
#products .form-row,
#products .form-group,
#products .prod-card {
  min-width: 0;
  max-width: 100%;
}
#products .page-sub {
  max-width: 62ch;
  line-height: 1.45;
}

#products .prod-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
}
#products .prod-page-head-text { min-width: 0; flex: 1 1 240px; }
#products .prod-page-head > .btn { flex: none; }

/* La tarjeta entera cambiaba de fondo al pasar el mouse por un producto de adentro. */
#products > .card:hover {
  background: var(--bg-secondary);
  border-color: var(--border-soft);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transform: none;
}

#products .prod-catalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
#products .prod-catalog-head h3 { margin: 0; min-width: 0; }
#products .prod-catalog-head h3 [data-lucide],
#products .prod-catalog-head h3 svg {
  width: 30px;
  height: 30px;
  padding: 7px;
  box-sizing: border-box;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-primary);
  border: 1px solid var(--accent-border);
  stroke-width: 2;
}

#products .prod-cap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  font-variant-numeric: tabular-nums;
  max-width: 100%;
}
#products .prod-cap[hidden] { display: none !important; }
#products .prod-cap-k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#products .prod-cap.is-warn {
  color: var(--warning);
  border-color: var(--warning-border);
  background: var(--warning-soft);
}
#products .prod-cap.is-full {
  color: var(--accent-danger);
  border-color: var(--danger-border);
  background: var(--danger-soft);
}

#products .prod-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}
#products .prod-toolbar .buscador-ico {
  flex: 1 1 220px;
  min-width: 0;
}
#products .prod-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#products #prodSearch:focus {
  border-color: var(--accent-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}

#products .prod-filtros {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
#products .prod-chip {
  appearance: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  min-height: 36px;
  line-height: 1.2;
}
#products .prod-chip:hover { background: var(--bg-hover); color: var(--text-primary); }
#products .prod-chip.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #04130C;
}
#products .prod-chip:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

#products .prod-bulk {
  display: none;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
#products .prod-bulk-count { color: var(--text-primary); font-size: 13px; }
#products .prod-bulk-min {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 220px;
  min-width: 0;
}
#products .prod-bulk-min .form-control {
  width: auto;
  flex: 1 1 120px;
  min-width: 0;
  max-width: 180px;
}
#products .prod-bulk-cancel { margin-left: auto; }

#products .prod-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  min-width: 0;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
#products .prod-card:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-md);
}
#products .prod-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
  gap: 16px;
  align-items: start;
}
#products .prod-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-bottom: 12px;
}
#products .prod-title-txt { min-width: 0; flex: 1; }
#products .prod-title-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
#products .prod-photo {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 10px;
  flex: none;
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
}
#products .prod-photo-ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
#products .prod-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  background: var(--bg-elevated);
  max-width: 100%;
}
#products .prod-badge-ok {
  color: var(--success);
  background: var(--accent-soft);
  border-color: var(--accent-border);
}
#products .prod-badge-bajo {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: var(--warning-border);
}
#products .prod-badge-sin {
  color: var(--accent-danger);
  background: var(--danger-soft);
  border-color: var(--danger-border);
}

#products .prod-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 0;
}
#products .prod-meta > div { min-width: 0; }
#products .prod-meta dt {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 2px;
}
#products .prod-meta dd {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
#products .prod-meta dd.soft,
#products .prod-meta .soft {
  color: var(--text-secondary);
  font-weight: 600;
}

#products .prod-card-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
#products .prod-gain {
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-left: 3px solid var(--accent-primary);
  min-width: 0;
}
#products .prod-gain.is-neg { border-left-color: var(--accent-danger); }
#products .prod-gain-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
#products .prod-gain-val {
  font-family: 'Fira Code', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: -0.3px;
  overflow-wrap: anywhere;
  line-height: 1.15;
}
#products .prod-gain-pct {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#products .prod-stockbox { font-size: 13px; color: var(--text-secondary); }
#products .prod-stock-line,
#products .prod-stock-min {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
}
#products .prod-stock-line strong,
#products .prod-stock-min strong { color: var(--text-primary); }
#products .prod-var-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
#products .prod-var-toggle strong { color: var(--accent-primary); }
#products .prod-chev { width: 16px; height: 16px; transition: transform .3s ease; flex: none; }
#products .prod-chev.is-open { transform: rotate(180deg); }
#products .prod-var-panel {
  overflow: hidden;
  transition: max-height .3s ease;
  background: var(--bg-primary);
  border-radius: 10px;
  margin-top: 8px;
  border: 1px solid transparent;
  min-width: 0;
}
#products .prod-var-panel.open { border-color: var(--border-soft); }
#products .prod-var-line {
  display: grid !important;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, auto));
  gap: 6px 12px;
  align-items: center;
  padding: 8px 2px !important;
  border-bottom: 1px solid var(--border-soft);
  min-width: 0;
}
#products .prod-var-line > span:first-child { min-width: 0; overflow-wrap: anywhere; }
#products .prod-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}
#products .prod-actions .btn {
  flex: 1 1 132px;
  justify-content: center;
  min-width: 0;
}
#products .prod-btn-archivar { color: var(--accent-danger); }

#products .prod-arch-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
#products .prod-arch-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--bg-tertiary);
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  min-width: 0;
}
#products .prod-arch-main { min-width: 0; flex: 1 1 180px; }
#products .prod-arch-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
#products .prod-arch-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

#products .prod-form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
#products .prod-form-actions .btn { margin-left: 0; }

#products .form-plegable > summary > h2 { min-width: 0; }

/* Editor de variantes del formulario */
#products .prod-var-editor {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  min-width: 0;
}
#products .prod-var-editor-row,
#products .prod-var-more {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
#products .prod-var-more {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-soft);
}
#products .prod-var-field { min-width: 0; flex: 1 1 140px; }
#products .prod-var-field > label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
#products .prod-var-field .form-control { width: 100%; max-width: none; }
#products .prod-var-field-foto { flex: 0 0 auto; }
#products .prod-opt { font-weight: 400; opacity: .8; }
#products .prod-var-editor-side {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
#products .prod-var-gan { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }
#products .prod-var-foto-row,
#products .prod-var-color-row { display: flex; gap: 6px; align-items: center; min-width: 0; }
#products .prod-var-foto {
  width: 44px;
  height: 44px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  flex: none;
}
#products .prod-var-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
#products .prod-var-color {
  width: 40px;
  height: 40px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg-tertiary);
  cursor: pointer;
  flex: none;
}
#products .prod-var-color::-webkit-color-swatch-wrapper { padding: 0; }
#products .prod-var-color::-webkit-color-swatch { border: none; border-radius: 4px; }
#products .prod-var-iconbtn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--accent-danger);
  border-radius: 10px;
  cursor: pointer;
  flex: none;
  padding: 0;
}
#products .prod-var-iconbtn svg,
#products .prod-var-iconbtn [data-lucide] { width: 16px; height: 16px; }
#products .prod-var-unit { max-width: 72px; flex: 0 0 72px; }

/* Simulador: el <style> inyectado gana por orden; estas reglas usan el overlay
   para no perder contra .psim-row suelto y para que el logo no se estire. */
.psim-ov .psim { min-width: 0; }
.psim-ov .psim-head img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex: none;
}
.psim-ov .psim-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.psim-ov .psim-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.psim-ov .psim-price,
.psim-ov .psim-kpi b { overflow-wrap: anywhere; }

@media (max-width: 720px) {
  #products .prod-page-head > .btn { width: 100%; justify-content: center; }
  #products .prod-toolbar .buscador-ico { flex-basis: 100%; }
  #products .prod-toolbar-actions { width: 100%; }
  #products .prod-toolbar-actions .btn { flex: 1 1 calc(50% - 8px); justify-content: center; }
  #products .prod-card-top { grid-template-columns: minmax(0, 1fr); }
  #products .prod-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #products .prod-bulk-cancel { margin-left: 0; }
  #products .prod-bulk-min { flex-basis: 100%; }
  #products .prod-bulk-min .form-control { max-width: none; }
  #products .prod-var-line {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  #products .prod-var-line > span:first-child { grid-column: 1 / -1; }
  #products .prod-arch-card .btn,
  #products .prod-form-actions .btn { width: 100%; justify-content: center; }
  #products .prod-var-editor-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  #products .prod-var-field-foto,
  #products .prod-var-editor-side { grid-column: 1 / -1; margin-left: 0; width: auto; }
  #products .prod-var-editor-side .btn { flex: 1; justify-content: center; }
  #products .prod-var-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #products .prod-var-more .switch { grid-column: 1 / -1; }
  #products .prod-var-gan { white-space: normal; }
  #products .prod-chip { min-height: 44px; }
  #products .prod-catalog-head h3 [data-lucide],
  #products .prod-catalog-head h3 svg { width: 26px; height: 26px; padding: 6px; }
  .psim-ov { padding: 8px; }
  .psim-ov .psim-row { grid-template-columns: minmax(0, 1fr); }
  .psim-ov .psim-actions { flex-direction: column; }
  .psim-ov .psim-actions .btn { width: 100%; }
  .psim-ov .psim-x { width: 44px; height: 44px; }
}

@media (max-width: 420px) {
  #products .prod-meta { grid-template-columns: minmax(0, 1fr); }
  #products .prod-card { padding: 12px; }
}

@media (hover: none) {
  #products .prod-card:hover { box-shadow: none; }
}

/* ===== Finanzas — interfaz (solo #finanzas) =====
   KPIs, tablas, gráfico, filtros y montos. No redefine la fórmula de ganancia. */

#finanzas {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}
#finanzas .page-sub {
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 68ch;
  margin-top: 4px;
}
#finanzas .card,
#finanzas .page-head,
#finanzas .form-row,
#finanzas .grid,
#finanzas .grid-2 {
  min-width: 0;
  max-width: 100%;
}
#finanzas .form-control,
#finanzas input[type="date"],
#finanzas input[type="month"],
#finanzas input[type="number"],
#finanzas select.form-control {
  min-width: 0;
  max-width: 100%;
}

/* Montos: misma tipografía en KPIs, cascada y tablas */
#finanzas .fin-amt {
  font-family: 'Fira Code', ui-monospace, 'SFMono-Regular', monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

/* Período */
#finanzas .fin-periodo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
  margin: 0 0 12px;
}
#finanzas .fin-periodo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#finanzas .fin-periodo-mes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 160px;
  max-width: 220px;
}
#finanzas .fin-periodo-mes span,
#finanzas .fin-periodo-hint,
#finanzas .fin-prod-note,
#finanzas .fin-chart-caption {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}
#finanzas .fin-periodo-hint { margin: 0 0 12px; max-width: 68ch; }
#finanzas .fin-prod-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
#finanzas .fin-prod-tools .form-control {
  flex: 1 1 200px;
  max-width: 360px;
  margin: 0;
}
#finanzas .fin-prod-note { margin: 0 0 12px; max-width: 68ch; }
#finanzas .fin-filtro-aviso {
  min-height: 0;
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--warning);
  line-height: 1.4;
}
#finanzas .fin-filtro-aviso:empty { display: none; }

#finanzas .fin-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 12px;
  align-items: end;
  margin-top: 14px;
  margin-bottom: 0;
}
#finanzas .fin-filtros .form-group { margin: 0; min-width: 0; }
#finanzas .fin-filtros .btn { width: 100%; justify-content: center; }

#finanzas .fin-disclosure {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
  height: auto;
  line-height: 1.35;
  margin: 8px 0 18px;
}
#finanzas .fin-disclosure-hint {
  color: var(--text-muted);
  font-weight: 400;
}

/* KPIs del resumen */
#finanzas .fin-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
#finanzas .fin-kpi {
  min-width: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 16px;
  border-top: 3px solid var(--border-strong);
}
#finanzas .fin-kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
#finanzas .fin-kpi-value {
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
}
#finanzas .fin-kpi.is-hero {
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-elevated));
  border-color: var(--accent-border);
}
#finanzas .fin-kpi.is-hero .fin-kpi-value { font-size: clamp(22px, 3vw, 28px); }
#finanzas .fin-kpi--ingreso { border-top-color: var(--accent-secondary); }
#finanzas .fin-kpi--bruta { border-top-color: var(--success); }
#finanzas .fin-kpi--gasto { border-top-color: var(--accent-danger); }
#finanzas .fin-kpi--real { border-top-color: var(--accent-primary); }
#finanzas .fin-kpi .is-in { color: var(--accent-secondary); }
#finanzas .fin-kpi .is-up { color: var(--success); }
#finanzas .fin-kpi .is-down { color: var(--accent-danger); }
#finanzas .fin-note {
  font-size: 12px;
  color: var(--text-secondary);
  margin: -2px 0 14px;
  line-height: 1.45;
  max-width: 68ch;
}

/* Cascada y comparativa */
#finanzas .fin-cascada {
  margin: 4px 0 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 12px 14px;
}
#finanzas .fin-cascada-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
#finanzas .fin-cascada-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-color);
  font-size: 13px;
}
#finanzas .fin-cascada-row span:first-child {
  color: var(--text-secondary);
  min-width: 0;
}
#finanzas .fin-cascada-row.is-total span:first-child { font-weight: 700; color: var(--text-primary); }
#finanzas .fin-cascada-row .fin-amt { font-weight: 600; white-space: nowrap; }
#finanzas .fin-cascada-row.is-down .fin-amt { color: var(--accent-danger); }
#finanzas .fin-cascada-row.is-total.is-up .fin-amt { color: var(--success); }
#finanzas .fin-cascada-row.is-total.is-down .fin-amt { color: var(--accent-danger); }
#finanzas .fin-cascada-foot {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.45;
}
#finanzas .fin-compare {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
#finanzas .fin-intro {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  line-height: 1.45;
}

/* Dinero del negocio */
#finanzas .fin-caja-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
#finanzas .fin-caja-kpi {
  min-width: 0;
  border-top-width: 3px;
  border-top-style: solid;
}
#finanzas .fin-caja-kpi .kpi-value {
  font-size: clamp(18px, 4.5vw, 26px);
  overflow-wrap: anywhere;
}
#finanzas .fin-caja-kpi .kpi-label,
#finanzas .fin-caja-kpi .kpi-sub { overflow-wrap: anywhere; }
#finanzas .fin-tone-ok { border-top-color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--bg-secondary)); }
#finanzas .fin-tone-warn { border-top-color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, var(--bg-secondary)); }
#finanzas .fin-tone-info { border-top-color: var(--accent-secondary); background: color-mix(in srgb, var(--accent-secondary) 10%, var(--bg-secondary)); }
#finanzas .fin-tone-danger { border-top-color: var(--accent-danger); background: color-mix(in srgb, var(--accent-danger) 12%, var(--bg-secondary)); }
#finanzas .fin-caja-kpi .is-up { color: var(--success); }
#finanzas .fin-caja-kpi .is-down { color: var(--accent-danger); }

#finanzas .fin-resultado {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 18px;
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
}
#finanzas .fin-resultado.is-up {
  background: color-mix(in srgb, var(--success) 10%, var(--bg-secondary));
  border-color: color-mix(in srgb, var(--success) 35%, var(--border-color));
}
#finanzas .fin-resultado.is-down {
  background: color-mix(in srgb, var(--accent-danger) 10%, var(--bg-secondary));
  border-color: color-mix(in srgb, var(--accent-danger) 35%, var(--border-color));
}
#finanzas .fin-resultado-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
#finanzas .fin-resultado-ico { font-size: 22px; line-height: 1; }
#finanzas .fin-resultado-kicker { font-size: 12.5px; color: var(--text-secondary); }
#finanzas .fin-resultado-val { font-size: clamp(20px, 4vw, 24px); font-weight: 700; }
#finanzas .fin-resultado.is-up .fin-resultado-val { color: var(--success); }
#finanzas .fin-resultado.is-down .fin-resultado-val { color: var(--accent-danger); }
#finanzas .fin-resultado-split {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  text-align: right;
}
#finanzas .fin-resultado-note {
  flex-basis: 100%;
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
#finanzas .fin-warn { color: var(--warning); }

/* Gráfico: el canvas no lleva padding (Chart.js lo desborda) */
#finanzas .fin-chart-box {
  position: relative;
  height: 240px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 4px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 8%, transparent), transparent 42%),
    var(--bg-tertiary);
  border: 1px solid var(--border-color);
  overflow: hidden;
}
#finanzas #finGastosChart {
  padding: 0;
  margin: 0;
  max-height: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
#finanzas #finGastosLegend .chart-stack-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}
#finanzas #finGastosLegend .chart-stack-legend-item {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 6px 10px;
}
#finanzas #finMetaBar { min-width: 0; overflow-wrap: anywhere; }
#finanzas .fin-meta-track {
  background: var(--bg-tertiary);
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}
#finanzas .fin-meta-fill { height: 100%; border-radius: inherit; }
#finanzas .fin-be-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 12px;
}
#finanzas .fin-be-card {
  min-width: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 14px 16px;
}
#finanzas .fin-be-card .fin-kpi-label { margin-bottom: 6px; }
#finanzas .fin-be-card .fin-amt { font-size: 20px; font-weight: 700; color: var(--text-primary); }
#finanzas .fin-be-card .fin-amt.is-in { color: var(--accent-secondary); }

/* Tablas: rayas visibles en oscuro y montos alineados */
#finanzas .table-container { max-width: 100%; }
#finanzas tbody tr:nth-child(even) {
  background-color: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
#finanzas td.fin-amt,
#finanzas th.fin-num { text-align: right; }
#finanzas .table-container td { overflow-wrap: anywhere; }
#finanzas #finGananciaProductos td:first-child,
#finanzas #finDeudasList td:first-child,
#finanzas #finGastosList td:nth-child(2) {
  max-width: 280px;
}
#finanzas #finCajaBox .table-container { max-width: 100%; }

/* IVA: la fila del mes no se sale del celular */
#finanzas .fin-iva-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--bg-tertiary);
}
#finanzas .fin-iva-main {
  flex: 1 1 160px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-width: 0;
}
#finanzas .fin-iva-label {
  font-weight: 700;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#finanzas .fin-iva-monto {
  color: var(--accent-danger);
  font-weight: 700;
  margin-left: auto;
}
#finanzas .fin-iva-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
#finanzas .fin-iva-tab {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
#finanzas .fin-iva-tab.is-on {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-tertiary));
  color: var(--accent-primary);
}
#finanzas .fin-iva-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-top: 6px;
  border-top: 2px solid var(--border-color);
  font-weight: 700;
}
#finanzas .fin-iva-lines { padding: 12px 14px; }
#finanzas .fin-iva-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
#finanzas .fin-iva-line span:first-child { color: var(--text-secondary); min-width: 0; }
#finanzas .fin-badge-auto,
#finanzas .fin-badge-manual {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
#finanzas .fin-badge-auto {
  background: color-mix(in srgb, var(--accent-secondary) 18%, var(--bg-secondary));
  color: var(--text-primary);
}
#finanzas .fin-badge-manual {
  background: color-mix(in srgb, var(--warning) 22%, var(--bg-secondary));
  color: var(--text-primary);
}
#finanzas .fin-iva-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
}
#finanzas .fin-iva-toggle.is-on {
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-tertiary));
  border-color: var(--accent-primary);
}
#finanzas .fin-iva-toggle .btn { margin-left: auto; }
#finanzas #finIvaPct { max-width: 84px; width: auto; }

/* Formularios de caja: los anchos fijos no empujan la página */
#finanzas #finCajaBox [style*="display:flex"] > div {
  min-width: 0;
  max-width: 100%;
}
#finanzas .fin-margen-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--danger-border, var(--accent-danger));
  background: var(--danger-soft);
  min-width: 0;
}
#finanzas .fin-margen-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
#finanzas .fin-empty {
  margin: 0;
  padding: 18px 14px;
  text-align: center;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.45;
}

@media (hover: hover) {
  #finanzas .fin-kpi:hover {
    border-color: var(--accent-border);
  }
}

@media (max-width: 640px) {
  #finanzas .fin-resultado-split { margin-left: 0; text-align: left; }
  #finanzas .fin-periodo-mes { max-width: none; flex-basis: 100%; }
  #finanzas .fin-prod-tools .btn { flex: 1 1 auto; justify-content: center; }
  #finanzas .fin-iva-toggle .btn { margin-left: 0; width: 100%; justify-content: center; }
  #finanzas #finCajaBox input.form-control,
  #finanzas #finCajaBox select.form-control {
    width: 100% !important;
    max-width: 100% !important;
  }
  #finanzas #finCajaBox [style*="display:flex"] {
    align-items: stretch;
  }
  #finanzas #finCajaBox [style*="display:flex"] > div {
    flex: 1 1 100%;
  }

  /* Tablas que seguían en scroll horizontal (deudas, publicidad, movimientos) */
  #finanzas #finDeudasList .table-container,
  #finanzas #finPubHistorial .table-container,
  #finanzas #finCajaBox .table-container:has(table) {
    overflow-x: visible;
    border: 0;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
  }
  #finanzas #finDeudasList table,
  #finanzas #finPubHistorial table,
  #finanzas #finCajaBox table {
    display: block;
    width: 100%;
    min-width: 0;
    background: transparent;
  }
  #finanzas #finDeudasList thead,
  #finanzas #finPubHistorial thead,
  #finanzas #finCajaBox thead {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
  #finanzas #finDeudasList tbody,
  #finanzas #finPubHistorial tbody,
  #finanzas #finCajaBox tbody,
  #finanzas #finDeudasList tfoot,
  #finanzas #finPubHistorial tfoot { display: block; }
  #finanzas #finDeudasList tbody tr,
  #finanzas #finPubHistorial tbody tr,
  #finanzas #finCajaBox tbody tr {
    display: block;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 4px 12px;
    margin-bottom: 10px;
  }
  #finanzas #finDeudasList tbody td,
  #finanzas #finPubHistorial tbody td,
  #finanzas #finCajaBox tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border: 0 !important;
    white-space: normal;
    text-align: right;
    font-size: 13px;
    min-width: 0;
  }
  #finanzas #finDeudasList tbody td + td,
  #finanzas #finPubHistorial tbody td + td,
  #finanzas #finCajaBox tbody td + td {
    border-top: 1px solid var(--border-soft) !important;
  }
  #finanzas #finDeudasList tbody td[data-label]::before,
  #finanzas #finPubHistorial tbody td[data-label]::before,
  #finanzas #finCajaBox tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
  }
  #finanzas #finDeudasList tbody td[data-label=""]::before,
  #finanzas #finPubHistorial tbody td[data-label=""]::before,
  #finanzas #finCajaBox tbody td[data-label=""]::before { content: none; }
  #finanzas #finDeudasList tfoot tr,
  #finanzas #finPubHistorial tfoot tr {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-secondary));
    border: 1px solid var(--accent-border);
    border-radius: 12px;
    padding: 12px 14px;
  }
  #finanzas #finDeudasList tfoot td,
  #finanzas #finPubHistorial tfoot td {
    display: inline-block;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  #finanzas #finDeudasList tfoot td:empty,
  #finanzas #finPubHistorial tfoot td:empty,
  #finanzas #finCajaBox tfoot td:empty { display: none; }
  #finanzas #finGastosList tbody td:last-child,
  #finanzas #finGastosFijosList tbody td:last-child,
  #finanzas #finDeudasList tbody td:last-child,
  #finanzas #finPubHistorial tbody td:last-child,
  #finanzas #finCajaBox tbody td:last-child {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }
  #finanzas #finGastosList tbody td:last-child .btn,
  #finanzas #finGastosFijosList tbody td:last-child .btn,
  #finanzas #finDeudasList tbody td:last-child .btn,
  #finanzas #finPubHistorial tbody td:last-child .btn,
  #finanzas #finCajaBox tbody td:last-child .btn {
    min-height: 40px;
    min-width: 44px;
  }
  #finanzas #finGananciaProductos tbody td strong {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
  }
}

@media (prefers-reduced-motion: reduce) {
  #finanzas .fin-kpi { transition: none; }
}

/* === SPRINT mobile-shell ===
   Pestañas de sección, grillas de KPI y la tira de Envíos en teléfono.
   Solo bajo 768px: en escritorio las reglas de arriba siguen igual. */

@media (max-width: 768px) {
  /* El scroll real del teléfono es la ventana, y .content (overflow-y:auto)
     corta position:sticky. Acá .content pasa a ser el scroller, debajo
     de la barra superior, para que las pestañas puedan quedarse. */
  html, body {
    height: 100%;
    overflow: hidden;
  }
  .main-content.app-main {
    height: calc(100dvh - 56px - env(safe-area-inset-top, 0px));
    min-height: 0;
    overflow: hidden;
  }
  #contentArea.content {
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Pestañas (Ventas, Productos, Rendimiento): se quedan arriba y se
     desplazan en horizontal si no caben. El toque mide al menos 44px. */
  .section > .pi-tabs.nx-m-tabs {
    position: sticky;
    top: 0;
    z-index: 12;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    margin-bottom: 14px;
    background: var(--bg-secondary);
    box-shadow: -18px 0 0 var(--bg-primary), 18px 0 0 var(--bg-primary);
  }
  .section > .pi-tabs.nx-m-tabs .pi-tab {
    flex: 0 0 auto;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  /* Configuración ya muestra las 6 pestañas en grilla. Solo se pega
     al hacer scroll y conserva el alto de toque. */
  #settings #settingsTabs.nx-m-tabs {
    position: sticky;
    top: 0;
    z-index: 12;
  }
  #settings #settingsTabs.nx-m-tabs .pi-tab {
    min-height: 44px;
    min-width: 0;
  }

  /* Dashboard: dos columnas parejas. Si sobra una tarjeta, ocupa la fila. */
  #dashboard#dashboard .nx-m-kpis > .dash-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #dashboard#dashboard .nx-m-kpis > .dash-kpis > .kpi-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  #dashboard#dashboard .nx-m-kpis > .dash-kpis > .kpi-card .kpi-value {
    max-width: 100%;
  }
  #dashboard #dashKpiTira.dash-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #dashboard .dash-kpi-chip .dash-kpi-num,
  #dashboard .dash-kpi-chip .dash-kpi-detail {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Otras grillas de KPI: 2 columnas que pueden encoger, el texto parte. */
  #envios #enviosKpis.nx-m-kpis,
  #cierrecaja .cc-kpi-grid,
  #finanzas .fin-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  #agenda #agSummary,
  #clientes #clientesKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  #envios #enviosKpis.nx-m-kpis .env-kpi,
  #cierrecaja .cc-kpi,
  #finanzas .fin-kpi,
  #agenda #agSummary > *,
  #clientes #clientesKpis > * {
    min-width: 0;
  }
  #envios #enviosKpis.nx-m-kpis .env-kpi {
    padding: 12px 10px;
    gap: 8px;
  }
  #envios #enviosKpis.nx-m-kpis .env-kpi-rot,
  #cierrecaja .cc-kpi-label,
  #cierrecaja .cc-kpi-value,
  #finanzas .fin-kpi-label,
  #finanzas .fin-kpi-value {
    overflow-wrap: anywhere;
    min-width: 0;
  }
  #envios #enviosKpis.nx-m-kpis .env-kpi-num {
    font-size: 22px;
  }

  /* Envíos: la cabecera no crece con el texto del select. Una tira con scroll. */
  #envios .page-head,
  #envios .env-head-row,
  #agenda .page-head,
  #cierrecaja .page-head,
  #clientes .page-head,
  #equipo .page-head {
    min-width: 0;
    max-width: 100%;
  }
  #envios .env-head-row {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 8px;
  }
  #envios .env-head-row .page-title {
    min-width: 0;
    max-width: 100%;
  }
  #envios .nx-m-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-bottom: 2px;
  }
  #envios .nx-m-strip > .btn,
  #envios .nx-m-strip > .form-control,
  #envios .nx-m-strip > .env-printer {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none;
    min-height: 44px;
    min-width: 44px;
    margin: 0;
  }
  #envios .nx-m-strip > #enviosRangoDesp {
    width: 10.5rem !important;
    max-width: 46vw !important;
    min-width: 0;
    text-overflow: ellipsis;
  }

  /* Modo prueba: el banner fijo suma padding-top (40px, 42px bajo 640).
     La altura de arriba solo descuenta la barra de 56px, y con overflow:hidden
     el final de la pantalla queda fuera del viewport. */
  body.nexsell-demo-active .main-content.app-main {
    height: calc(100dvh - 56px - 40px - env(safe-area-inset-top, 0px));
  }
  #agenda .ag-quick .btn,
  #cierrecaja .cc-toolbar .btn,
  #cierrecaja .cc-toolbar .form-control,
  #equipo .page-head .btn {
    min-height: 44px;
    min-width: 44px;
  }
}

@media (max-width: 640px) {
  body.nexsell-demo-active .main-content.app-main {
    height: calc(100dvh - 56px - 42px - env(safe-area-inset-top, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .section > .pi-tabs.nx-m-tabs { scroll-behavior: auto; }
}

/* === /SPRINT mobile-shell === */

/* === SPRINT empty-states === */
/* Estados vacíos y esqueletos de lista. Clases nuevas; no pisa .empty-state. */

.nx-empty {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin: 4px 0;
  padding: 28px 18px 24px;
  border: 1px dashed var(--border-strong, #2C3442);
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(22, 199, 132, 0.10), transparent 58%),
    rgba(255, 255, 255, 0.02);
  color: var(--text-secondary, #9BA6B6);
  overflow: hidden;
}
.nx-empty-ok {
  border-color: rgba(22, 199, 132, 0.35);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(22, 199, 132, 0.16), transparent 60%),
    rgba(22, 199, 132, 0.04);
}
.nx-empty-ico {
  width: 48px;
  height: 48px;
  margin: 0 0 6px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--accent-soft, rgba(22, 199, 132, 0.12));
  color: var(--accent-primary, #16C784);
}
.nx-empty-ok .nx-empty-ico {
  background: rgba(22, 199, 132, 0.18);
}
.nx-empty-ico svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
}
.nx-empty-title {
  margin: 0;
  max-width: 36ch;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text-primary, #F3F5F8);
  overflow-wrap: anywhere;
}
.nx-empty-copy {
  margin: 0;
  max-width: 46ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary, #9BA6B6);
  overflow-wrap: anywhere;
}
.nx-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  max-width: 100%;
}
.nx-empty-actions .btn {
  max-width: 100%;
  white-space: normal;
}

.nx-skel {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0;
}
.nx-skel-row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border-soft, #1A1F28);
  background: var(--bg-secondary, #0E1117);
  overflow: hidden;
}
.nx-skel-av,
.nx-skel-bar {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.11) 45%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 220% 100%;
  animation: nxSkelShimmer 1.35s ease-in-out infinite;
}
.nx-skel-av {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex: none;
}
.nx-skel-lines {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nx-skel-bar {
  display: block;
  height: 10px;
  border-radius: 999px;
  max-width: 100%;
}
.nx-skel-bar.w70 { width: 70%; }
.nx-skel-bar.w55 { width: 55%; }
.nx-skel-bar.w80 { width: 80%; }
.nx-skel-bar.w45 { width: 45%; }
.nx-skel-bar.w40 { width: 40%; }
.nx-skel-bar.w35 { width: 35%; }

@keyframes nxSkelShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@media (max-width: 430px) {
  .nx-empty { padding: 22px 14px 18px; }
  .nx-empty-title { font-size: 15px; }
  .nx-skel-row { padding: 12px; gap: 10px; }
  .nx-skel-av { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .nx-skel-av,
  .nx-skel-bar { animation: none; }
}

/* === /SPRINT empty-states === */

/* === SPRINT toasts-notifs === */
/* Toasts y panel de notificaciones. Solo clases nx-toast-* / nx-notif-*. */

.toast.nx-toast-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(380px, calc(100vw - 24px));
  padding: 10px 6px 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  border-left-width: 3px;
  background: var(--bg-elevated);
  background: color-mix(in srgb, var(--bg-elevated) 94%, #000);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
}
.toast.nx-toast-ok { border-left-color: var(--success); }
.toast.nx-toast-err { border-left-color: var(--danger); }
.toast.nx-toast-warn { border-left-color: var(--warning); }
.toast.nx-toast-info { border-left-color: var(--accent-secondary, #60a5fa); }
.toast.nx-toast-ach { border-left-color: #F5B400; }
.toast.nx-toast-action { cursor: pointer; }

.toast.nx-toast-card .nx-toast-ico {
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: rgba(255, 255, 255, .05);
  color: var(--text-secondary);
}
.toast.nx-toast-ok .nx-toast-ico { color: var(--success); background: rgba(22, 199, 132, .14); }
.toast.nx-toast-err .nx-toast-ico { color: var(--danger); background: rgba(242, 85, 90, .14); }
.toast.nx-toast-warn .nx-toast-ico { color: var(--warning); background: rgba(245, 165, 36, .16); }
.toast.nx-toast-info .nx-toast-ico { color: var(--accent-secondary, #60a5fa); background: rgba(96, 165, 250, .14); }
.toast.nx-toast-ach .nx-toast-ico { color: #F5B400; background: rgba(245, 180, 0, .16); }
.toast.nx-toast-card .nx-toast-ico svg,
.toast.nx-toast-card .nx-toast-ico i { width: 16px; height: 16px; }

.toast.nx-toast-card .nx-toast-text {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 4px;
  overflow-wrap: anywhere;
}
.toast.nx-toast-card .nx-toast-undo {
  flex: none;
  align-self: center;
  margin: 0;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--accent-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.toast.nx-toast-card .nx-toast-undo:hover { border-color: var(--accent-primary); }
.toast.nx-toast-card .nx-toast-dismiss {
  flex: none;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toast.nx-toast-card .nx-toast-dismiss:hover,
.toast.nx-toast-card .nx-toast-dismiss:focus-visible {
  background: var(--bg-hover);
  color: var(--text-primary);
  outline: none;
}
.toast.nx-toast-card .nx-toast-dismiss svg { width: 16px; height: 16px; }

@media (max-width: 768px) {
  /* Arriba, debajo de la barra: abajo tapaba Guardar y quedaba pegado a Nova. */
  .toast.nx-toast-card {
    top: calc(64px + env(safe-area-inset-top, 0px));
    bottom: auto;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
  body.nexsell-demo-active .toast.nx-toast-card {
    top: calc(104px + env(safe-area-inset-top, 0px));
  }
  .toast.nx-toast-card .nx-toast-dismiss { width: 40px; height: 40px; }
  .toast.nx-toast-card .nx-toast-undo { min-height: 40px; }
}

/* Centro de alertas del Dashboard */
#dashAlertCenter.nx-notif-center { border-radius: 14px; }
#dashAlertCenter .nx-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 10px 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  min-width: 0;
}
#dashAlertCenter .nx-notif-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
#dashAlertCenter .nx-notif-head-title svg { width: 16px; height: 16px; color: var(--accent-primary); }
#dashAlertCenter .nx-notif-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}
#dashAlertCenter .nx-notif-wa {
  width: auto;
  max-width: 100%;
  flex: 0 1 auto;
}
#dashAlertCenter .nx-notif-list { display: flex; flex-direction: column; min-width: 0; }
#dashAlertCenter .nx-notif-item {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border-top: 1px solid var(--border-soft);
  background: transparent;
  box-shadow: inset 3px 0 0 var(--border-color);
}
#dashAlertCenter .nx-notif-item:first-child { border-top: 0; }
#dashAlertCenter .nx-notif-item[data-tono="danger"] {
  background: rgba(242, 85, 90, .07);
  box-shadow: inset 3px 0 0 var(--danger);
}
#dashAlertCenter .nx-notif-item[data-tono="warning"] {
  background: rgba(245, 165, 36, .08);
  box-shadow: inset 3px 0 0 var(--warning);
}
#dashAlertCenter .nx-notif-item[data-tono="success"] {
  background: rgba(22, 199, 132, .08);
  box-shadow: inset 3px 0 0 var(--success);
}
#dashAlertCenter .nx-notif-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 9px 4px 9px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#dashAlertCenter .nx-notif-main:hover { background: rgba(255, 255, 255, .03); }
#dashAlertCenter .nx-notif-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  flex: none;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--text-muted);
}
#dashAlertCenter .nx-notif-item.is-unread[data-tono="danger"] .nx-notif-dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(242, 85, 90, .18); }
#dashAlertCenter .nx-notif-item.is-unread[data-tono="warning"] .nx-notif-dot { background: var(--warning); box-shadow: 0 0 0 3px rgba(245, 165, 36, .2); }
#dashAlertCenter .nx-notif-item.is-unread[data-tono="success"] .nx-notif-dot { background: var(--success); box-shadow: 0 0 0 3px rgba(22, 199, 132, .2); }
#dashAlertCenter .nx-notif-item.is-unread[data-tono="info"] .nx-notif-dot { background: var(--accent-primary); box-shadow: 0 0 0 3px rgba(22, 199, 132, .18); }
#dashAlertCenter .nx-notif-ico {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  flex: none;
  color: var(--text-secondary);
}
#dashAlertCenter .nx-notif-item[data-tono="danger"] .nx-notif-ico { color: var(--danger); }
#dashAlertCenter .nx-notif-item[data-tono="warning"] .nx-notif-ico { color: var(--warning); }
#dashAlertCenter .nx-notif-item[data-tono="success"] .nx-notif-ico { color: var(--success); }
#dashAlertCenter .nx-notif-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#dashAlertCenter .nx-notif-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
#dashAlertCenter .nx-notif-body {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
#dashAlertCenter .nx-notif-go {
  flex: none;
  max-width: 34%;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: right;
  color: var(--accent-primary);
  overflow-wrap: anywhere;
}
#dashAlertCenter .nx-notif-dismiss {
  flex: none;
  width: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
#dashAlertCenter .nx-notif-dismiss:hover,
#dashAlertCenter .nx-notif-dismiss:focus-visible {
  color: var(--text-primary);
  background: rgba(255, 255, 255, .04);
  outline: none;
}
#dashAlertCenter .nx-notif-dismiss svg { width: 16px; height: 16px; }
#dashAlertCenter .nx-notif-main:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (max-width: 520px) {
  #dashAlertCenter .nx-notif-main { flex-wrap: wrap; row-gap: 4px; }
  #dashAlertCenter .nx-notif-go {
    flex: 1 1 100%;
    max-width: none;
    text-align: left;
    margin-left: 40px;
  }
}

/* Configuración → Notificaciones */
#settings .nx-notif-kicker { margin-bottom: 6px; }
#settings .nx-notif-lead {
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 10px;
  max-width: 65ch;
}
#settings .nx-notif-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
#settings .nx-notif-sec {
  padding-bottom: 16px;
  margin-bottom: 16px;
}
#settings .nx-notif-mails {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  min-width: 0;
}
#settings .nx-notif-mail {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
  min-width: 0;
  padding: 6px 8px 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--bg-tertiary);
}
#settings .nx-notif-mail.is-out { opacity: .6; }
#settings .nx-notif-mail-addr {
  flex: 1 1 140px;
  min-width: 0;
  font-size: 13px;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
#settings .nx-notif-mail.is-out .nx-notif-mail-addr { text-decoration: line-through; }
#settings .nx-notif-mail-opt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
}
#settings .nx-notif-mail.is-out .nx-notif-mail-opt { cursor: not-allowed; }
#settings .nx-notif-mail-remove {
  margin-left: auto;
  color: var(--danger);
  flex: none;
}
#settings .nx-notif-mail-remove svg { width: 14px; height: 14px; }
#settings .nx-notif-mail-note {
  flex-basis: 100%;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--warning, #f59e0b);
}
#settings .nx-notif-empty {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
#settings .nx-notif-where { gap: 8px; }
#settings .nx-notif-card {
  padding: 10px 12px;
  gap: 4px;
  border-radius: 10px;
  min-width: 0;
}
#settings .nx-notif-card b { flex-wrap: wrap; }
#settings .nx-notif-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.4;
}
#settings .nx-notif-tag.is-reco {
  border-color: transparent;
  background: var(--accent-primary);
  color: #04130C;
}
#settings .nx-notif-card span { overflow-wrap: anywhere; }
#settings .nx-notif-share { width: auto; max-width: 100%; }
#settings .nx-notif-matrix {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--bg-tertiary);
  max-width: 100%;
  min-width: 0;
}
#settings .nx-notif-matrix-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
#settings .nx-notif-matrix-title svg { width: 14px; height: 14px; }
#settings .nx-notif-matrix-lead {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}
#settings .nx-notif-matrix,
#settings .nx-notif-matrix-scroll,
#settings .nx-notif-mails,
#settings .nx-notif-panel,
#dashAlertCenter.nx-notif-center {
  min-width: 0;
  max-width: 100%;
}
#settings .nx-notif-matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
#settings .nx-notif-matrix-table {
  width: 100%;
  min-width: 280px;
  border-collapse: collapse;
  font-size: 12px;
  color: var(--text-secondary);
}
#settings .nx-notif-matrix-table th,
#settings .nx-notif-matrix-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-soft);
  text-align: center;
}
#settings .nx-notif-matrix-table th:first-child,
#settings .nx-notif-matrix-type {
  text-align: left;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
#settings .nx-notif-matrix-note {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  #settings .nx-notif-where { grid-template-columns: 1fr; }
  #settings .nx-notif-mail-opt { min-height: 40px; }
  #settings .nx-notif-h { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .toast.nx-toast-card,
  #dashAlertCenter .nx-notif-item { transition: none; }
}
/* === /SPRINT toasts-notifs === */

/* === SPRINT planes === */
/* Pulido visual de las tarjetas Básico / Intermedio / Pro.
   No cambia precios, topes ni el texto de cada beneficio. */

.nx-plan-grid.plans-grid,
#panel-landing .land-plans.nx-plan-grid {
  align-items: stretch;
  width: 100%;
}

.plans-grid.nx-plan-grid {
  gap: 18px;
  padding-top: 18px;
}

#panel-landing .land-plans.nx-plan-grid {
  gap: 16px;
  padding-top: 18px;
  margin-bottom: 18px;
}

.nx-plan-card {
  min-width: 0;
  height: 100%;
}

.nx-plan-card.plan-card::before,
#panel-landing .nx-plan-land {
  border-radius: 14px;
}

.nx-plan-basico.plan-card::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .06));
}

.nx-plan-reco.plan-card::before,
.nx-plan-intermedio.plan-card.is-reco::before {
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, #16C784, #3B82F6);
}

.nx-plan-pro.plan-card::before {
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, #3B82F6, #8B5CF6);
}

#panel-landing .nx-plan-land.nx-plan-basico {
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .22);
}

#panel-landing .nx-plan-land.nx-plan-reco {
  box-shadow:
    inset 0 3px 0 #16C784,
    0 12px 32px rgba(22, 199, 132, .16),
    0 0 0 1px rgba(22, 199, 132, .28);
}

#panel-landing .nx-plan-land.nx-plan-pro {
  box-shadow: inset 0 3px 0 #3B82F6;
}

.plan-tag.nx-plan-badge {
  z-index: 1;
  letter-spacing: .04em;
}

#panel-landing .land-badge.nx-plan-badge {
  z-index: 1;
  top: -11px;
}

.nx-plan-id,
#panel-landing .nx-plan-land .nx-plan-name {
  min-width: 0;
}

.nx-plan-name,
#panel-landing .nx-plan-land h3.nx-plan-name {
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.nx-plan-aud {
  overflow-wrap: anywhere;
}

.nx-plan-pricebox {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.plan-price.nx-plan-price,
#panel-landing .land-price.nx-plan-price {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
  white-space: nowrap;
}

.plan-price.nx-plan-price {
  font-size: 28px;
}

#panel-landing .land-price.nx-plan-price {
  font-size: 26px;
  color: #F3F5F8;
}

#panel-landing .land-price.nx-plan-price small {
  font-weight: 600;
  letter-spacing: 0;
}

/* Lista corta: cada beneficio en su fila, con marca, para escanear el cupo. */
.nx-plan-feats.plan-highlights,
#panel-landing .nx-plan-feats.plan-highlights,
#panel-landing .land-feats.nx-plan-feats {
  margin: 0;
  padding: 10px 10px 8px;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .03);
}

#panel-landing .land-feats.nx-plan-feats li,
.nx-plan-feats.plan-highlights li,
#panel-landing .nx-plan-feats.plan-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary, #C5CDD8);
}

.nx-plan-feats li span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.nx-plan-feats.plan-highlights li::before,
#panel-landing .nx-plan-feats.plan-highlights li::before,
#panel-landing .land-feats.nx-plan-feats li::before {
  content: "";
  position: static;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 999px;
  background-color: rgba(22, 199, 132, .16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.2 4.8 8.8 9.8 3.2' fill='none' stroke='%2316C784' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}

.nx-plan-soporte {
  margin: 0;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1.45;
}

.nx-plan-soporte a {
  overflow-wrap: anywhere;
}

/* Acordeón que ya existía: control más claro y panel anidado. */
.nx-plan-toggle.plan-diff-toggle {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
}

.nx-plan-toggle.plan-diff-toggle[aria-expanded="true"] {
  background: rgba(22, 199, 132, .1);
  border-color: rgba(22, 199, 132, .5);
}

.nx-plan-toggle.plan-diff-toggle::after {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}

.nx-plan-toggle.plan-diff-toggle[aria-expanded="true"]::after {
  content: "";
  margin-top: 2px;
  transform: rotate(225deg);
}

.nx-plan-panel.plan-diff {
  gap: 14px;
  margin-top: 0;
  padding: 12px 12px 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(0, 0, 0, .22);
}

.nx-plan-lead {
  margin: 0;
}

.nx-plan-groups {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nx-plan-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.nx-plan-group:first-child {
  padding-top: 2px;
  border-top: 0;
}

.nx-plan-glabel {
  color: var(--text-secondary, #C5CDD8);
}

.nx-plan-list.plan-list {
  gap: 6px;
}

.nx-plan-list .nx-plan-item {
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(22, 199, 132, .07);
}

.nx-plan-list .nx-plan-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.nx-plan-list .nx-plan-item.off {
  background: transparent;
  opacity: .7;
}

.nx-plan-nova {
  margin-top: 4px;
}

.nx-plan-cta {
  margin-top: auto;
}

.nx-plan-card .nx-plan-cta .btn,
#panel-landing .nx-plan-land .auth-btn.nx-plan-cta {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}

.nx-plan-period {
  width: 100%;
}

@media (min-width: 901px) {
  .plans-grid.nx-plan-grid,
  #panel-landing .land-plans.nx-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .nx-plan-card .nx-plan-aud,
  #panel-landing .nx-plan-land .nx-plan-aud {
    min-height: 2.8em;
  }
}

@media (max-width: 900px) {
  .plans-grid.nx-plan-grid,
  #planPanelCards .plans-grid.nx-plan-grid,
  .auth-panel#panel-plan .plans-grid.nx-plan-grid,
  #panel-landing .land-plans.nx-plan-grid {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }

  .nx-plan-card.plan-card,
  .nx-plan-card.plan-card:hover,
  .nx-plan-card.plan-card.is-reco,
  .nx-plan-card.plan-card.is-reco:hover {
    transform: none;
  }

  .nx-plan-period .period-opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 440px;
  }

  .nx-plan-period .period-opt {
    min-height: 44px;
    justify-content: center;
  }

  .nx-plan-modal {
    padding: 12px !important;
    align-items: flex-start !important;
  }

  #panel-landing .land-plans.nx-plan-grid {
    padding-top: 16px;
  }
}

@media (hover: none) {
  .nx-plan-card.plan-card:hover,
  .nx-plan-card.plan-card.is-reco:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nx-plan-toggle.plan-diff-toggle::after,
  .nx-plan-card.plan-card {
    transition: none;
  }
}
/* === /SPRINT planes === */

/* === SPRINT a11y-forms === */
/* Anillos de foco por teclado, espacio etiqueta/campo y área táctil de cerrar.
   No toca precios, logos ni tarjetas del dashboard. */

button:focus-visible,
a:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
.pi-tab:focus-visible,
.rail-item:focus-visible,
.rail-subitem:focus-visible,
.topbar-btn:focus-visible,
.auth-btn:focus-visible,
.set-upload:focus-within {
  outline: 2px solid var(--accent-primary, #16C784);
  outline-offset: 2px;
}

.btn:focus-visible,
.btn-small:focus-visible {
  outline: 2px solid var(--accent-primary, #16C784);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 2px var(--accent-primary, #16C784);
}

.btn-primary:focus-visible,
.auth-btn:focus-visible,
#chatFab:focus-visible,
#settingsTabs .pi-tab.active:focus-visible {
  outline: 2px solid #04130C;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--accent-primary, #16C784);
}

.btn-danger:focus-visible,
#finanzas .btn-danger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 2px #fff;
}

.form-control:focus-visible,
textarea:focus-visible,
select:focus-visible,
.auth-field input:focus-visible,
.psim-ov .psim-in input:focus-visible,
.psim-ov .psim-f select:focus-visible {
  outline: 2px solid var(--accent-primary, #16C784);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(22, 199, 132, .4);
}

input[type="checkbox"]:not(.switch-input):focus-visible,
input[type="radio"]:not(.switch-input):focus-visible,
.switch-input:focus-visible {
  outline: 2px solid var(--accent-primary, #16C784);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(22, 199, 132, .45);
}

#settings .biz-opt:focus-visible,
.biz-opt:focus-visible {
  outline: 2px solid var(--accent-primary, #16C784);
  outline-offset: 3px;
}

/* Etiqueta y campo: el mismo aire en formularios, sin rehacer las tarjetas. */
.form-group > .form-label,
.form-row .form-label,
.venta-modal .form-label,
.modal-fade-card .form-label {
  display: block;
  margin-bottom: 8px;
  line-height: 1.4;
}

#settings .form-group,
#equipo .form-group {
  margin-bottom: 18px;
}

#settings .form-row,
.venta-modal .form-row {
  gap: 16px 18px;
}

#settings .form-label {
  margin-bottom: 8px;
  line-height: 1.4;
}

#settings .nt-add-row .form-label {
  flex: 1 1 100%;
  margin: 0;
}

#settings .acc-row {
  padding: 18px;
}

#settings #accPwFlow .form-row .form-group {
  margin-bottom: 0;
}

#admin .admin-fields {
  gap: 16px 18px;
  margin: 16px 0 14px;
}

#admin .admin-field {
  gap: 8px;
}

#admin .admin-field .form-control {
  min-height: 44px;
}

#admin .admin-checks {
  gap: 10px 18px;
  margin: 4px 0 14px;
}

.psim-ov .psim-f {
  gap: 8px;
}

.psim-ov .psim-row {
  gap: 14px 16px;
}

.psim-ov .psim-sec {
  padding: 18px 0;
}

/* Cerrar de modales y paneles: mínimo 44×44, el icono no se estira. */
#planesCerrar,
#planRecoCerrar,
#oauthClose,
#onbGate .onb-close,
.psim-ov .psim-x,
.mia-head-btn,
.mlh-dismiss-x,
.venta-modal [data-cerrar] {
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
}

#onbGate .onb-close,
.psim-ov .psim-x,
.mia-head-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#onbGate .onb-close {
  top: 8px;
  right: 8px;
  border-radius: 10px;
}

#onbGate .onb-close svg,
#onbGate .onb-close [data-lucide],
.psim-ov .psim-x svg,
.psim-ov .psim-x [data-lucide],
#planesCerrar svg,
#planesCerrar [data-lucide],
#planRecoCerrar svg,
#planRecoCerrar [data-lucide] {
  width: 18px;
  height: 18px;
  flex: none;
}

#settings #profLogoPreview img,
.psim-ov .psim-head img,
.chan-logo img,
.auth-logo img {
  object-fit: contain;
}

@media (max-width: 768px) {
  .form-group {
    margin-bottom: 16px;
  }
  .form-label {
    margin-bottom: 8px;
  }
  #settings .form-row,
  #admin .admin-fields,
  .venta-modal .form-row {
    gap: 14px;
  }
  .venta-modal .form-group {
    margin-bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-control,
  .btn,
  .auth-btn {
    transition: none;
  }
}
/* === /SPRINT a11y-forms === */

/* === SPRINT dash === */
/* Ritmo de KPI, aire de gráficos secundarios, acciones rápidas y menos ruido.
   Solo #dashboard, solo clases nx-dash-. */

#dashboard.nx-dash-root {
  max-width: 100%;
  min-width: 0;
}
#dashboard.nx-dash-root .card {
  box-shadow: none;
}
#dashboard.nx-dash-root .card:hover {
  transform: none;
  box-shadow: none;
  background: var(--bg-secondary);
  border-color: var(--border-soft);
}

/* KPI: misma pila interna para que etiqueta, cifra y detalle compartan línea. */
#dashboard .nx-dash-kpis-wrap {
  margin: 0 0 12px;
  min-width: 0;
  max-width: 100%;
}
#dashboard#dashboard .nx-dash-kpis {
  gap: 12px;
  align-items: stretch;
}
#dashboard .nx-dash-kpis > .kpi-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-width: 0;
  height: 100%;
  padding: 16px 16px 14px;
  border-radius: 14px;
  box-shadow: none;
}
#dashboard .nx-dash-kpis > .kpi-card::before,
#dashboard .nx-dash-kpis > .kpi-card::after {
  display: none;
}
#dashboard .nx-dash-kpis > .kpi-card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-color);
}
#dashboard .nx-dash-kpis > .kpi-card:hover .kpi-icon {
  background: var(--accent-soft);
}
#dashboard .nx-dash-kpis > .kpi-card .kpi-icon {
  width: 30px;
  height: 30px;
  margin: 0 0 10px;
  border-radius: 8px;
  flex: none;
}
#dashboard .nx-dash-kpis > .kpi-card .kpi-icon > svg,
#dashboard .nx-dash-kpis > .kpi-card .kpi-icon > i {
  width: 16px;
  height: 16px;
}
#dashboard .nx-dash-kpis > .kpi-card .kpi-label {
  display: block;
  min-height: 2.5em;
  margin: 0;
  line-height: 1.25;
}
#dashboard .nx-dash-kpis > .kpi-card .kpi-value {
  margin: 6px 0 0;
  max-width: 100%;
  font-size: clamp(16px, 12cqi, 26px);
}
#dashboard .nx-dash-kpis > .kpi-card.is-hero .kpi-value {
  font-size: clamp(18px, 9cqi, 32px);
}
#dashboard .nx-dash-kpis > .kpi-card .kpi-sub {
  margin-top: auto;
  padding-top: 8px;
}
#dashboard .nx-dash-kpis > .kpi-card .kpi-trend {
  margin-top: 6px;
}
@container dashkpis (min-width: 720px) {
  #dashboard .nx-dash-kpis > .kpi-card .kpi-label {
    min-height: 1.35em;
  }
}

/* IVA y publicidad: misma grilla y misma altura que el bloque de arriba. */
#dashboard #dashKpiTira.nx-dash-strip {
  gap: 12px;
  margin: 0 0 16px;
  min-width: 0;
  max-width: 100%;
}
#dashboard .nx-dash-strip .dash-kpi-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: baseline;
  min-width: 0;
  min-height: 58px;
  padding: 12px 16px;
  border-radius: 14px;
}
#dashboard .nx-dash-strip .kpi-label {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
#dashboard .nx-dash-strip .dash-kpi-num {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  min-width: 0;
  font-size: clamp(15px, 4.2vw, 18px);
}
#dashboard .nx-dash-strip .dash-kpi-detail {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
}
#dashboard .nx-dash-strip .kpi-trend {
  grid-column: 1 / -1;
}

/* Gráficos secundarios: un solo ritmo vertical, sin cajas de ayuda. */
#dashboard .nx-dash-charts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 16px;
  min-width: 0;
  max-width: 100%;
}
#dashboard .nx-dash-charts > .card,
#dashboard .nx-dash-charts > .grid {
  margin-bottom: 0;
  min-width: 0;
  max-width: 100%;
}
#dashboard .nx-dash-charts .card {
  padding: 18px 18px 16px;
}
#dashboard .nx-dash-chart-row {
  gap: 16px;
  margin: 0;
  min-width: 0;
  max-width: 100%;
}
#dashboard .nx-dash-charts .card > h3,
#dashboard .nx-dash-quick > h3 {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 10px;
}
#dashboard .nx-dash-chart > .dash-toolbar {
  margin-bottom: 10px;
  padding-bottom: 10px;
}
#dashboard .nx-dash-chart .chart-guide {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 6px;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.45;
  max-width: 68ch;
}
#dashboard .nx-dash-chart .chart-guide > i,
#dashboard .nx-dash-chart .chart-guide > svg {
  width: 14px !important;
  height: 14px !important;
  margin-top: 2px;
  color: var(--text-muted) !important;
  background: none !important;
  padding: 0 !important;
}
#dashboard .nx-dash-chart .chart-guide strong {
  font-weight: 600;
  color: var(--text-secondary);
}
#dashboard .nx-dash-chart .chart-canvas-wrap {
  max-width: 100%;
  min-width: 0;
}
#dashboard .nx-dash-quick {
  padding: 18px 18px 16px;
  min-width: 0;
  max-width: 100%;
}

/* Acciones rápidas: chips quietos, sin salto ni sombra. */
#dashboard .nx-dash-qa {
  min-width: 0;
  max-width: 100%;
}
#dashboard .dash-period-row.nx-dash-qa {
  gap: 6px;
}
#dashboard .nx-dash-qa .btn,
#dashboard .nx-dash-qa-btn {
  box-shadow: none;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0;
  max-width: 100%;
}
#dashboard .nx-dash-qa .btn-secondary,
#dashboard .nx-dash-qa-btn.btn-secondary {
  background: var(--bg-tertiary);
  border-color: var(--border-soft);
  color: var(--text-secondary);
}
#dashboard .nx-dash-qa .btn-primary,
#dashboard .nx-dash-qa-btn.btn-primary {
  box-shadow: none;
}
#dashboard .nx-dash-qa .btn:hover,
#dashboard .nx-dash-qa-btn:hover,
#dashboard .nx-dash-qa .btn:active,
#dashboard .nx-dash-qa-btn:active {
  transform: none;
  box-shadow: none;
}
#dashboard .nx-dash-qa .btn-secondary:hover,
#dashboard .nx-dash-qa-btn.btn-secondary:hover {
  background: var(--bg-elevated);
  border-color: var(--border-color);
  color: var(--text-primary);
}
#dashboard.nx-dash-root .top-product-item:hover,
#dashboard.nx-dash-root .stock-alert-row:hover,
#dashboard.nx-dash-root #dashStockAlerts > div > div:hover {
  transform: none;
}

@media (max-width: 640px) {
  #dashboard .nx-dash-charts { gap: 12px; }
  #dashboard .nx-dash-chart-row { gap: 12px; }
  #dashboard .nx-dash-charts .card,
  #dashboard .nx-dash-quick { padding: 14px; }
  #dashboard#dashboard .nx-dash-kpis { gap: 10px; }
  #dashboard #dashKpiTira.nx-dash-strip { gap: 10px; }
  #dashboard .nx-dash-kpis > .kpi-card { padding: 14px 12px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #dashboard .nx-dash-kpis > .kpi-card,
  #dashboard.nx-dash-root .card,
  #dashboard .nx-dash-qa .btn,
  #dashboard .nx-dash-qa-btn {
    transition: none;
  }
}
/* === /SPRINT dash === */

/* === SPRINT ventas === */
/* Densidad del historial, barra de filtros y aire del detalle.
   Solo Ventas. No toca montos, el tope de filas ni logos. */

#sales.nx-ven .nx-ven-head { margin-bottom: 16px; }
#sales.nx-ven .nx-ven-head .page-sub {
  max-width: 46ch;
  line-height: 1.45;
}

#sales .nx-ven-hist-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
#sales .nx-ven-hist-top > h3 { margin: 0; min-width: 0; }
#sales .nx-ven-hist-top .nx-ven-alcance { margin: 0; }

#sales .nx-ven-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
#sales .nx-ven-buscar { flex: 1 1 240px; min-width: 0; }
#sales .nx-ven-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
#sales .nx-ven-toolbar-actions .btn { white-space: nowrap; }
#sales #ventasChevron { transition: transform .18s ease; }

#sales .nx-ven-panel { margin-bottom: 12px; padding: 12px 14px; }
#sales .nx-ven-filtros {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: end;
}
#sales .nx-ven-filtros > div { min-width: 0; }
#sales .nx-ven-filtros .form-label { margin-bottom: 6px; }
#sales .nx-ven-filtros .form-control { width: 100%; min-width: 0; }

#sales .nx-ven-periodos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin-top: 12px;
  padding: 4px;
  border-radius: 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
}
#sales .nx-ven-periodos .btn {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
#sales .nx-ven-periodos .btn.is-on {
  background: var(--accent-soft);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}

#sales .nx-ven-rango { margin-top: 12px; }
#sales .nx-ven-info {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Tabla de pedidos: más filas a la vista, montos alineados. */
#sales #salesTable.nx-ven-list .ventas-resumen {
  gap: 6px;
  margin-bottom: 8px;
}
#sales #salesTable.nx-ven-list .ventas-resumen .badge {
  padding: 6px 10px !important;
}
#sales #salesTable.nx-ven-list .ventas-estados {
  gap: 6px;
  margin-bottom: 8px;
}
#sales #salesTable.nx-ven-list table th,
#sales #salesTable.nx-ven-list table td {
  padding: 7px 10px;
  vertical-align: middle;
}
#sales #salesTable.nx-ven-list td.num,
#sales #salesTable.nx-ven-list th.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
#sales #salesTable.nx-ven-list .venta-producto-nombre { line-height: 1.3; }
#sales #salesTable.nx-ven-list .venta-producto-meta {
  gap: 3px;
  margin-top: 4px;
}
#sales #salesTable.nx-ven-list .venta-acciones { gap: 4px; }
#sales #salesTable.nx-ven-list .venta-acciones .btn {
  padding: 5px 8px;
  min-height: 32px;
}

/* Detalle / edición de la venta (el modal cuelga del body). */
.venta-modal h2 { line-height: 1.3; }
.venta-modal p { line-height: 1.45; }
.venta-modal .form-group { margin-bottom: 14px; }
.venta-modal .form-row { gap: 12px; }
.venta-modal .form-label { margin-bottom: 6px; }
.venta-modal .nx-tl { margin: 2px 0 12px; }
.venta-modal .table-container { margin-top: 2px; }
.venta-modal th,
.venta-modal td {
  padding: 8px 10px;
  vertical-align: top;
}
.venta-modal tfoot td {
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}
.venta-modal .venta-modal-actions {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  gap: 8px;
}

@media (max-width: 1100px) {
  #sales .nx-ven-filtros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  #sales .nx-ven-hist-top { align-items: stretch; }
  #sales .nx-ven-alcance { width: 100%; }
  #sales .nx-ven-alcance > .btn { margin-left: auto; }

  #sales .nx-ven-toolbar { align-items: stretch; }
  #sales .nx-ven-buscar { flex-basis: 100%; }
  #sales .nx-ven-toolbar-actions { width: 100%; }
  #sales .nx-ven-toolbar-actions .btn {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
    min-height: 44px;
  }
  #sales #ventasDesplegarBtn { flex-basis: 100%; }

  #sales .nx-ven-filtros { grid-template-columns: 1fr; }
  #sales .nx-ven-filtros .form-control,
  #sales .nx-ven-rango .form-control { min-height: 44px; }
  #sales .nx-ven-periodos { width: 100%; }
  #sales .nx-ven-periodos .btn {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
    min-height: 44px;
  }
  #sales .nx-ven-rango { flex-direction: column; align-items: stretch; }
  #sales .nx-ven-rango .btn { width: 100%; justify-content: center; min-height: 44px; }

  /* En la ficha no hay scroll horizontal. */
  #sales .nx-ven-hint { display: none !important; }

  #sales #salesTable.nx-ven-list .table-container {
    overflow: visible;
    max-height: none;
    border: none;
    background: none;
    box-shadow: none;
  }
  #sales #salesTable.nx-ven-list tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 0;
    margin: 0 0 8px;
    padding: 10px 12px 8px;
  }
  #sales #salesTable.nx-ven-list tbody td {
    min-width: 0;
    padding: 4px 0;
    gap: 8px;
  }
  #sales #salesTable.nx-ven-list tbody td.venta-producto {
    order: -2;
    grid-column: 1 / -1;
    padding-top: 0;
    padding-bottom: 2px;
  }
  #sales #salesTable.nx-ven-list tbody td.venta-fecha {
    order: -1;
    grid-column: 1 / -1;
    padding-top: 0;
    padding-bottom: 6px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--border-soft);
    font-variant-numeric: tabular-nums;
  }
  #sales #salesTable.nx-ven-list tbody td.venta-acciones-cell {
    grid-column: 1 / -1;
    padding-top: 4px;
  }
  #sales #salesTable.nx-ven-list .venta-producto-nombre {
    font-size: 14.5px;
    line-height: 1.3;
  }
  #sales #salesTable.nx-ven-list tbody td[data-col="channel"] .badge {
    max-width: 100%;
    white-space: normal;
    text-align: right;
    line-height: 1.25;
  }
  #sales #salesTable.nx-ven-list tbody td.num {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
  }
  #sales #salesTable.nx-ven-list .venta-acciones {
    margin-top: 4px;
    padding-top: 8px;
    gap: 6px;
  }
  #sales #salesTable.nx-ven-list .venta-acciones .btn {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
  }
}

@media (max-width: 640px) {
  .venta-modal .form-group { margin-bottom: 12px; }
  .venta-modal .form-row { gap: 10px; }
  .venta-modal th,
  .venta-modal td { padding: 8px; }
  .venta-modal .venta-modal-actions { gap: 8px; }
}
/* === /SPRINT ventas === */

/* === SPRINT productos === */
#products.nx-prod {
  min-width: 0;
  max-width: 100%;
}
#products.nx-prod .nx-prod-catalog,
#products.nx-prod .nx-prod-list,
#products.nx-prod .prod-card {
  min-width: 0;
  max-width: 100%;
}

#products.nx-prod .nx-prod-count {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
#products.nx-prod .nx-prod-count:empty { display: none; }

#products.nx-prod .nx-prod-cap {
  flex: none;
}

#products.nx-prod .nx-prod-view {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  margin-left: auto;
  flex: none;
}
#products.nx-prod .nx-prod-view-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#products.nx-prod .nx-prod-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
  user-select: none;
}
#products.nx-prod .nx-prod-view-btn svg,
#products.nx-prod .nx-prod-view-btn [data-lucide] {
  width: 16px;
  height: 16px;
}
#products.nx-prod .nx-prod-view-input:focus-visible + .nx-prod-view-btn {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}
#products.nx-prod .nx-prod-view-input:checked + .nx-prod-view-btn {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #04130C;
}
#products.nx-prod .nx-prod-view-btn:hover {
  color: var(--text-primary);
}
#products.nx-prod .nx-prod-view-input:checked + .nx-prod-view-btn:hover {
  color: #04130C;
}

#products.nx-prod .nx-prod-chips {
  gap: 8px;
  margin: 2px 0 14px;
}
#products.nx-prod .nx-prod-chip {
  letter-spacing: 0.01em;
}
#products.nx-prod .nx-prod-chip.active {
  box-shadow: 0 0 0 1px color-mix(in srgb, #04130C 18%, var(--accent-primary));
}

#products.nx-prod .nx-prod-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#products.nx-prod .nx-prod-list > .prod-card {
  margin-bottom: 0;
}
#products.nx-prod:has(#nxProdVistaGrid:checked) .nx-prod-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap: 14px;
  align-items: stretch;
}
#products.nx-prod:has(#nxProdVistaGrid:checked) .nx-prod-list > .empty-state {
  grid-column: 1 / -1;
}
#products.nx-prod:has(#nxProdVistaList:checked) .nx-prod-list {
  display: flex;
  flex-direction: column;
}

/* Fotos y logos del catálogo: caja fija, contain. Nunca estiran el dibujo. */
#products.nx-prod img {
  object-fit: contain !important;
  object-position: center !important;
}
#products.nx-prod img.prod-photo,
#products.nx-prod span.prod-photo {
  width: 64px;
  height: 64px;
  aspect-ratio: 1 / 1;
  flex: none;
  object-fit: contain;
  background: var(--bg-primary);
  border-radius: 12px;
  box-sizing: border-box;
}
#products.nx-prod:has(#nxProdVistaGrid:checked) .prod-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "media media"
    "check name";
  align-items: center;
  column-gap: 10px;
  row-gap: 10px;
}
#products.nx-prod:has(#nxProdVistaGrid:checked) .prod-title > .prodSelectChkWrap { grid-area: check; }
#products.nx-prod:has(#nxProdVistaGrid:checked) .prod-title > .prod-photo { grid-area: media; }
#products.nx-prod:has(#nxProdVistaGrid:checked) .prod-title > .prod-title-txt { grid-area: name; }
#products.nx-prod:has(#nxProdVistaGrid:checked) .prod-title:not(:has(img.prod-photo)) {
  display: flex;
  align-items: center;
  gap: 10px;
}
#products.nx-prod:has(#nxProdVistaGrid:checked) .prod-title > img.prod-photo {
  width: 100%;
  height: 120px;
  max-height: 120px;
  aspect-ratio: auto;
  align-self: stretch;
}
#products.nx-prod .prod-var-foto,
#products.nx-prod .prod-var-foto img,
#products.nx-prod .prod-var-line img,
#products.nx-prod #prodPhotoPreview img {
  aspect-ratio: 1 / 1;
  object-fit: contain !important;
  background: var(--bg-primary);
}
#products.nx-prod #prodPhotoPreview img {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px;
  max-height: 72px;
}

#products.nx-prod .nx-prod-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
#products.nx-prod .nx-prod-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
#products.nx-prod .nx-prod-badge-win {
  color: #04130C;
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}
#products.nx-prod .nx-prod-badge-dormant {
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border-color: var(--border-strong, var(--border-color));
}

@media (max-width: 720px) {
  #products.nx-prod .nx-prod-view {
    margin-left: 0;
    width: 100%;
  }
  #products.nx-prod .nx-prod-view-btn {
    flex: 1 1 0;
    min-height: 44px;
  }
  #products.nx-prod .nx-prod-chips {
    flex-wrap: wrap;
    overflow: visible;
  }
  #products.nx-prod .nx-prod-chip {
    flex: 0 0 auto;
    min-height: 44px;
  }
  #products.nx-prod:has(#nxProdVistaGrid:checked) .nx-prod-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  #products.nx-prod .prod-card,
  #products.nx-prod .nx-prod-view-btn { transition: none; }
}
/* === /SPRINT productos === */

/* === SPRINT finanzas ===
   Pulido de la sección Finanzas: tira de KPIs, tablas, período y marco del gráfico.
   Solo presentación. El canvas del anillo no lleva padding (Chart.js se sale del marco). */

#finanzas.nx-fin {
  min-width: 0;
}
#finanzas .nx-fin-head {
  margin-bottom: 18px;
}
#finanzas .nx-fin-head .page-sub {
  max-width: 62ch;
}
#finanzas .nx-fin-tools {
  margin-top: 12px;
}
#finanzas .nx-fin-tools .btn {
  width: auto;
  min-height: 40px;
}
#finanzas .nx-fin-tools [data-lucide],
#finanzas .nx-fin-more [data-lucide],
#finanzas .nx-fin-periodo [data-lucide] {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Período: una barra, no una pila de controles sueltos. */
#finanzas .nx-fin-periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin: 0 0 12px;
  padding: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
}
#finanzas .nx-fin-periodo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
#finanzas .nx-fin-periodo .btn {
  width: auto;
  flex: 0 0 auto;
  min-height: 40px;
  white-space: nowrap;
}
#finanzas .nx-fin-periodo-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 180px;
  max-width: 220px;
  min-width: 0;
  margin: 0;
}
#finanzas .nx-fin-periodo-field span {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.3;
}
#finanzas .nx-fin-periodo-field .form-control {
  width: 100%;
  min-height: 40px;
  margin: 0;
  color-scheme: dark;
}
#finanzas .nx-fin-periodo-hint {
  margin: 0 0 14px;
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}
#finanzas .nx-fin input[type="date"],
#finanzas .nx-fin input[type="month"] {
  color-scheme: dark;
}

/* Tira de KPIs del mes. El número no se parte: se achica dentro de la tarjeta. */
#finanzas .nx-fin-kpis {
  container-type: inline-size;
  container-name: finkpis;
  min-width: 0;
  max-width: 100%;
}
#finanzas .nx-fin-kpis .fin-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
  align-items: stretch;
}
#finanzas .nx-fin-kpis .fin-kpi {
  min-width: 0;
  padding: 12px 12px 11px;
  border-radius: 14px;
  container-type: inline-size;
}
#finanzas .nx-fin-kpis .fin-kpi.is-hero {
  grid-column: 1 / -1;
}
#finanzas .nx-fin-kpis .fin-kpi-label {
  font-size: 12px;
  line-height: 1.3;
  margin-bottom: 6px;
}
#finanzas .nx-fin-kpis .fin-kpi-value {
  font-size: clamp(15px, 22cqi, 22px);
  line-height: 1.15;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  font-variant-numeric: tabular-nums;
}
#finanzas .nx-fin-kpis .fin-kpi.is-hero .fin-kpi-value {
  font-size: clamp(20px, 14cqi, 28px);
}
#finanzas .nx-fin-kpis .fin-note,
#finanzas .nx-fin-kpis .fin-intro,
#finanzas .nx-fin-kpis .fin-cascada-foot,
#finanzas .nx-fin-kpis .fin-compare {
  overflow-wrap: anywhere;
  line-height: 1.45;
}
#finanzas .nx-fin-kpis .fin-cascada-row {
  align-items: baseline;
}
#finanzas .nx-fin-kpis .fin-cascada-row .fin-amt {
  flex: none;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
@container finkpis (min-width: 680px) {
  #finanzas .nx-fin-kpis .fin-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
  #finanzas .nx-fin-kpis .fin-kpi.is-hero {
    grid-column: auto;
  }
  #finanzas .nx-fin-kpis .fin-kpi {
    padding: 14px 16px 13px;
  }
}

/* Dinero del negocio: la misma tira, con el subtítulo largo que sí puede partirse. */
#finanzas .nx-fin-caja {
  container-type: inline-size;
  container-name: fincaja;
  min-width: 0;
  max-width: 100%;
}
#finanzas .nx-fin-caja .fin-caja-kpis {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
#finanzas .nx-fin-caja .fin-caja-kpi {
  min-width: 0;
  padding: 14px;
}
#finanzas .nx-fin-caja .kpi-label,
#finanzas .nx-fin-caja .kpi-sub {
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
#finanzas .nx-fin-caja .kpi-value,
#finanzas .nx-fin-caja .fin-resultado-val,
#finanzas .nx-fin-caja .fin-resultado-split .fin-amt {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
#finanzas .nx-fin-caja .kpi-value {
  font-size: clamp(20px, 6vw, 26px);
  line-height: 1.15;
}
#finanzas .nx-fin-caja .fin-resultado {
  min-width: 0;
}
#finanzas .nx-fin-caja .fin-resultado-split {
  min-width: 0;
}
@container fincaja (min-width: 560px) {
  #finanzas .nx-fin-caja .fin-caja-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container fincaja (min-width: 900px) {
  #finanzas .nx-fin-caja .fin-caja-kpis {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }
}

/* Gráfico: el aire va en el marco. El canvas queda a ras para Chart.js. */
#finanzas .nx-fin-visual {
  gap: 16px;
  min-width: 0;
  align-items: stretch;
}
#finanzas .nx-fin-visual > .card {
  margin: 0;
  min-width: 0;
}
#finanzas .nx-fin-chart {
  box-sizing: border-box;
  height: 268px;
  max-width: 460px;
  margin: 4px auto 8px;
  padding: 18px 20px 14px;
}
#finanzas .nx-fin-chart > canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-height: none;
  padding: 0 !important;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
#finanzas .nx-fin-legend {
  min-width: 0;
}
#finanzas .nx-fin-legend > div > span,
#finanzas .nx-fin-legend .chart-stack-legend-item {
  max-width: 100%;
  height: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
#finanzas .nx-fin-meta #finMetaBar {
  min-width: 0;
  overflow-wrap: anywhere;
}
#finanzas .nx-fin-card .fin-be-card .fin-amt,
#finanzas .nx-fin-kpis .fin-be-card .fin-amt {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* Tablas en escritorio: montos alineados, nombre que puede partirse. */
#finanzas .nx-fin-table {
  min-width: 0;
  max-width: 100%;
}
#finanzas .nx-fin-table .table-container {
  max-width: 100%;
  border-radius: 12px;
}
#finanzas .nx-fin-table thead th {
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  background: var(--bg-tertiary);
}
#finanzas .nx-fin-table th:not(:first-child),
#finanzas .nx-fin-table td.fin-amt {
  text-align: right;
}
#finanzas .nx-fin-table td.fin-amt {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  font-variant-numeric: tabular-nums;
}
#finanzas .nx-fin-table td:first-child {
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}
#finanzas .nx-fin-card .fin-prod-tools .form-control {
  min-width: 0;
}
#finanzas .nx-fin-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px 8px;
  width: 100%;
  height: auto;
  min-height: 44px;
  white-space: normal;
  text-align: left;
  line-height: 1.35;
  padding: 12px 14px;
}
#finanzas .nx-fin-iva {
  min-width: 0;
}
#finanzas .nx-fin-iva .fin-iva-monto {
  white-space: nowrap;
}

@media (min-width: 1100px) {
  #finanzas .nx-fin-visual {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 18px;
  }
}

@media (max-width: 720px) {
  #finanzas .nx-fin-tools .btn {
    width: 100%;
    justify-content: center;
  }
  #finanzas .nx-fin-periodo {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px;
  }
  #finanzas .nx-fin-periodo-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  #finanzas .nx-fin-periodo-chips .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  #finanzas .nx-fin-periodo-field {
    flex-basis: auto;
    max-width: none;
    width: 100%;
  }
  #finanzas .nx-fin-periodo-field .form-control {
    min-height: 44px;
    font-size: 16px;
  }
  #finanzas .nx-fin-more .fin-disclosure-hint {
    flex-basis: 100%;
    padding-left: 24px;
  }
  #finanzas .nx-fin-chart {
    height: 228px;
    max-width: none;
    padding: 12px 10px 8px;
  }
  #finanzas .nx-fin-visual {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #finanzas .nx-fin-card .fin-prod-tools {
    flex-direction: column;
    align-items: stretch;
  }
  #finanzas .nx-fin-card .fin-prod-tools .form-control,
  #finanzas .nx-fin-card .fin-prod-tools .btn {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    justify-content: center;
  }
  #finanzas .nx-fin-caja .fin-resultado-split {
    margin-left: 0;
    text-align: left;
  }
  #finanzas .nx-fin-iva .fin-iva-head {
    align-items: flex-start;
  }
  #finanzas .nx-fin-iva .fin-iva-label {
    white-space: normal;
  }
  #finanzas .nx-fin-iva .fin-iva-monto {
    margin-left: 0;
  }

  /* En el teléfono cada fila es una ficha: el scroll horizontal no se lee. */
  #finanzas .nx-fin-table .table-container:has(table),
  #finanzas .nx-fin-caja .table-container:has(table) {
    position: relative;
    overflow: visible;
    border: 0;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
  }
  #finanzas .nx-fin-table table,
  #finanzas .nx-fin-caja table {
    display: block;
    width: 100%;
    min-width: 0;
    background: transparent;
  }
  #finanzas .nx-fin-table thead,
  #finanzas .nx-fin-caja thead {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  #finanzas .nx-fin-table tbody,
  #finanzas .nx-fin-table tfoot,
  #finanzas .nx-fin-caja tbody,
  #finanzas .nx-fin-caja tfoot {
    display: block;
  }
  #finanzas .nx-fin-table tbody tr,
  #finanzas .nx-fin-caja tbody tr {
    display: block;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 4px 12px;
    margin: 0 0 10px;
  }
  #finanzas .nx-fin-table tbody td,
  #finanzas .nx-fin-caja tbody td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border: 0 !important;
    white-space: normal;
    text-align: right;
    font-size: 13px;
    min-width: 0;
    max-width: none;
  }
  #finanzas .nx-fin-table tbody td + td,
  #finanzas .nx-fin-caja tbody td + td {
    border-top: 1px solid var(--border-soft) !important;
  }
  #finanzas .nx-fin-table tbody td[data-label]::before,
  #finanzas .nx-fin-caja tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 1 auto;
    color: var(--text-secondary);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
  }
  #finanzas .nx-fin-table tbody td[data-label=""]::before,
  #finanzas .nx-fin-caja tbody td[data-label=""]::before {
    content: none;
  }
  #finanzas #finGananciaProductos tbody td:nth-child(1)::before { content: "Producto"; }
  #finanzas #finGananciaProductos tbody td:nth-child(2)::before { content: "Unidades"; }
  #finanzas #finGananciaProductos tbody td:nth-child(3)::before { content: "Costo"; }
  #finanzas #finGananciaProductos tbody td:nth-child(4)::before { content: "Ingresos"; }
  #finanzas #finGananciaProductos tbody td:nth-child(5)::before { content: "Ganancia"; }
  #finanzas #finGananciaProductos tfoot td:nth-child(2)::before { content: "Unidades"; }
  #finanzas #finGananciaProductos tfoot td:nth-child(3)::before { content: "Costo"; }
  #finanzas #finGananciaProductos tfoot td:nth-child(4)::before { content: "Ingresos"; }
  #finanzas #finGananciaProductos tfoot td:nth-child(5)::before { content: "Ganancia"; }
  #finanzas .nx-fin-table tbody td::before,
  #finanzas .nx-fin-caja tbody td::before,
  #finanzas #finGananciaProductos tfoot td::before {
    flex: 0 0 auto;
    max-width: 46%;
    color: var(--text-secondary);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
  }
  #finanzas .nx-fin-table tbody td strong,
  #finanzas .nx-fin-caja tbody td strong {
    min-width: 0;
    font-weight: 650;
    overflow-wrap: anywhere;
    text-align: right;
  }
  #finanzas .nx-fin-table tbody td:has(.btn),
  #finanzas .nx-fin-caja tbody td:has(.btn) {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }
  #finanzas .nx-fin-table tbody td .btn,
  #finanzas .nx-fin-caja tbody td .btn {
    width: auto;
    min-width: 44px;
    min-height: 44px;
  }
  #finanzas .nx-fin-table tfoot tr,
  #finanzas .nx-fin-caja tfoot tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 12px;
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-secondary));
    border: 1px solid var(--accent-border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 4px;
  }
  #finanzas .nx-fin-table tfoot td,
  #finanzas .nx-fin-caja tfoot td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex: 1 1 100%;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: normal;
    text-align: right;
  }
  #finanzas .nx-fin-table tfoot td:empty,
  #finanzas .nx-fin-caja tfoot td:empty {
    display: none;
  }
  #finanzas #finGananciaProductos tfoot td:first-child {
    font-weight: 700;
    color: var(--text-primary);
  }
}

@media (prefers-reduced-motion: reduce) {
  #finanzas .nx-fin-kpis .fin-kpi,
  #finanzas .nx-fin-chart > canvas {
    transition: none;
  }
}
/* === /SPRINT finanzas === */

/* === SPRINT gestion === */
/* Envíos, Encargos y Cierre de caja. Solo layout: montos, topes y flujos quedan igual. */

#envios.nx-ges,
#encargos.nx-ges,
#cierrecaja.nx-ges {
  min-width: 0;
  max-width: 100%;
}

.nx-ges .nx-ges-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 18px;
  min-width: 0;
  max-width: 100%;
}
.nx-ges .nx-ges-head-copy {
  min-width: 0;
  max-width: 100%;
}
.nx-ges .nx-ges-head-copy .page-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.nx-ges .nx-ges-sub {
  margin: 4px 0 0;
  max-width: 68ch;
}
#envios .nx-ges-head .env-chip-pend { margin-left: 0; }

/* Cabecera de Envíos: título arriba, acciones en una barra.
   En escritorio la barra envuelve. En el teléfono es una tira con scroll
   propio, sin empujar el ancho de la página. */
#envios .page-head .nx-ges-head-row.env-head-row {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
#envios .page-head .nx-ges-strip.env-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--bg-secondary);
  overflow: visible;
}
#envios .page-head .nx-ges-strip > .btn,
#envios .page-head .nx-ges-strip > .form-control,
#envios .page-head .nx-ges-strip > .env-printer {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 720px) {
  #envios .page-head .nx-ges-strip.env-head-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-bottom: 10px;
  }
  #envios .page-head .nx-ges-strip > .btn,
  #envios .page-head .nx-ges-strip > select.form-control {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto;
  }
}

#envios .nx-ges-filters,
#envios .nx-ges-filter-row,
#envios .nx-ges-kpis,
#envios .nx-ges-ships,
#envios .nx-ges-ajustes {
  min-width: 0;
  max-width: 100%;
}
#envios .nx-ges-filters > #enviosSearchInput {
  min-width: 0;
  max-width: 100%;
}
#envios .nx-ges-filters .nx-ges-filter-row > .form-control {
  min-width: 0;
  max-width: min(100%, 240px);
  flex: 1 1 160px;
}
@media (max-width: 768px) {
  #envios .nx-ges-filters > #enviosSearchInput {
    flex: 1 1 100%;
    width: 100%;
  }
  #envios .nx-ges-filters .nx-ges-filter-row {
    flex: 1 1 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }
  #envios .nx-ges-filters .nx-ges-filter-row > .form-control {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: max-content;
  }
}

#envios .nx-ges-kpis.env-kpis {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
}
@media (max-width: 720px) {
  #envios .nx-ges-kpis.env-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
#envios .nx-ges-kpi {
  min-width: 0;
  max-width: 100%;
}
#envios .nx-ges-kpi .env-kpi-num { font-variant-numeric: tabular-nums; }
#envios .nx-ges-kpi .env-kpi-rot { overflow-wrap: anywhere; }
#envios .nx-ges-ajustes .form-control,
#envios .nx-ges-ajustes select.form-control {
  max-width: 100%;
}

#envios .card.nx-ges-ship {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
#envios .nx-ges-ship .env-main,
#envios .nx-ges-ship .env-side,
#envios .nx-ges-ship .env-sub,
#envios .nx-ges-ship .env-actions {
  min-width: 0;
  max-width: 100%;
}
#envios .nx-ges-ship .env-prod {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#envios .nx-ges-ship .env-meta,
#envios .nx-ges-ship .env-sub {
  overflow-wrap: anywhere;
  white-space: normal;
}
#envios .nx-ges-ship .env-quien {
  max-width: 100%;
}
#envios .nx-ges-ship .env-side {
  flex: 1 1 240px;
  flex-wrap: wrap;
}
#envios .nx-ges-ship .env-actions {
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  #envios .nx-ges-ship .env-prod {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  #envios .nx-ges-ship .env-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-bottom: 2px;
  }
  #envios .nx-ges-ship .env-actions .btn {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }
}

/* Encargos: fichas en vez de una tabla de 9 columnas. */
#encargos .nx-ges-panel {
  min-width: 0;
  max-width: 100%;
}
#encargos .nx-ges-sec-add {
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}
#encargos .nx-ges-sec-add .form-control { min-width: 0; }
#encargos .nx-ges-sec-add .btn { white-space: nowrap; }
#encargos .nx-ges-sec-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
#encargos .nx-ges-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 12px;
  min-width: 0;
  max-width: 100%;
}
#encargos .nx-ges-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.35;
}
#encargos .nx-ges-stat strong {
  color: var(--text-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#encargos .nx-ges-stat.is-due strong { color: var(--accent-danger, #F2555A); }
#encargos .nx-ges-search {
  display: flex;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 12px;
}
#encargos .nx-ges-search .form-control {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  margin-bottom: 0;
}
#encargos .nx-ges-chips {
  min-width: 0;
  max-width: 100%;
}
#encargos .nx-ges-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
#encargos .nx-ges-enc-list,
#encargos .nx-ges-enc-grid {
  min-width: 0;
  max-width: 100%;
}
#encargos .nx-ges-enc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 800px) {
  #encargos .nx-ges-enc-grid { grid-template-columns: minmax(0, 1fr); }
}
#encargos .nx-ges-enc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent-primary);
  border-radius: 16px;
  background: var(--bg-secondary);
}
#encargos .nx-ges-enc[data-estado="pedido"] { border-left-color: var(--warning, #F5A524); }
#encargos .nx-ges-enc[data-estado="en_camino"] { border-left-color: #60A5FA; }
#encargos .nx-ges-enc[data-estado="llego"] { border-left-color: var(--accent-primary); }
#encargos .nx-ges-enc[data-estado="entregado"] { border-left-color: var(--border-strong, #2C3442); }
#encargos .nx-ges-enc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
#encargos .nx-ges-enc-who { min-width: 0; flex: 1 1 auto; }
#encargos .nx-ges-enc-client {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
#encargos .nx-ges-enc-name {
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
#encargos .nx-ges-enc-state {
  flex: 0 0 auto;
  max-width: 46%;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  color: var(--text-primary);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}
#encargos .nx-ges-enc-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
}
#encargos .nx-ges-enc-meta > div { min-width: 0; }
#encargos .nx-ges-enc-pay { grid-column: 1 / -1; }
#encargos .nx-ges-enc-meta dt {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#encargos .nx-ges-enc-meta dd {
  margin: 2px 0 0;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
#encargos .nx-ges-enc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
#encargos .nx-ges-enc-actions .btn {
  width: auto;
  flex: 0 0 auto;
  margin-right: 0 !important;
}

/* Cierre de caja: barra del día, 4 KPIs y bloques con tabla interna. */
#cierrecaja .nx-ges-cc-bar.cc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: var(--bg-secondary);
  overflow: visible;
}
#cierrecaja .nx-ges-cc-bar #cierreFecha {
  flex: 1 1 10rem;
  width: auto;
  min-width: 0;
  max-width: min(100%, 190px);
  margin-bottom: 0;
}
#cierrecaja .nx-ges-cc-bar #cierrePdfBtn {
  width: auto;
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}
@media (max-width: 420px) {
  #cierrecaja .nx-ges-cc-bar #cierrePdfBtn { margin-left: 0; }
}
#cierrecaja .nx-ges-cc-kpis-wrap,
#cierrecaja .nx-ges-cc-detail,
#cierrecaja .nx-ges-cc-note,
#cierrecaja .nx-ges-cc-block {
  min-width: 0;
  max-width: 100%;
}
#cierrecaja .cc-kpi-grid.nx-ges-cc-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 8px;
}
@media (max-width: 900px) {
  #cierrecaja .cc-kpi-grid.nx-ges-cc-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
#cierrecaja .nx-ges-cc-kpi {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
#cierrecaja .nx-ges-cc-kpi .cc-kpi-value {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  font-size: clamp(16px, 2.2vw, 22px);
}
#cierrecaja .nx-ges-cc-note summary {
  min-width: 0;
}
#cierrecaja .nx-ges-cc-note summary span {
  min-width: 0;
  overflow-wrap: anywhere;
}
#cierrecaja .nx-ges-cc-block { margin-top: 18px; }
#cierrecaja .nx-ges-cc-block:first-child { margin-top: 8px; }
#cierrecaja .nx-ges-cc-h {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 15px;
  min-width: 0;
}
#cierrecaja .nx-ges-cc-h > i,
#cierrecaja .nx-ges-cc-h > svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
#cierrecaja .nx-ges-cc-h-txt { min-width: 0; }
#cierrecaja .nx-ges-cc-h-tot {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
#cierrecaja .nx-ges-cc-empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
#cierrecaja .nx-ges-cc-table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
#cierrecaja .nx-ges-cc-zero { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  #envios .nx-ges-ship,
  #encargos .nx-ges-enc { transition: none; }
}
/* === /SPRINT gestion === */

/* ===== Tarea 4 (2026-09-25): tarjeta "Hoy" (Dashboard) + Por canal/Por tipo (Análisis) + chip Drop ===== */
.nx-hoy-total { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:6px 0 12px; }
.nx-hoy-total-num { font-size:26px; font-weight:800; color:var(--text-primary); }
.nx-hoy-total-sub { font-size:13px; color:var(--text-secondary); }
.nx-hoy-filas { display:flex; flex-direction:column; gap:8px; }
.nx-hoy-fila-txt { font-size:13.5px; color:var(--text-primary); margin-bottom:3px; }
.nx-hoy-barra { height:6px; border-radius:4px; background:var(--bg-tertiary); overflow:hidden; }
.nx-hoy-barra span { display:block; height:100%; border-radius:4px; background:var(--accent-primary); }
.nx-hoy-tipos { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px dashed var(--border-color); }
.nx-hoy-tipo { flex:1 1 140px; border:1.5px solid var(--border-color); border-radius:10px; padding:8px 12px; display:flex; flex-direction:column; gap:2px; font-size:12.5px; color:var(--text-secondary); }
.nx-hoy-tipo b { color:var(--text-primary); font-size:13px; }
.nx-hoy-tipo.vacio { opacity:.55; }
.nx-ana-barra { height:5px; border-radius:4px; background:var(--bg-tertiary); overflow:hidden; max-width:220px; margin-top:4px; }
.nx-ana-barra span { display:block; height:100%; border-radius:4px; background:var(--accent-primary); }
.prod-badge-drop { background:rgba(139,92,246,.15); color:#8b5cf6; font-weight:700; }

/* ===== Preferencias de Configuración (NXPrefs, assets/nexsell-prefs.js) =====
   NXPrefs.apply() pone clases pref-hide-<id> en <body>. Solo OCULTAN: se suman a lo que ya
   ocultan plan, rol y "Mi negocio" (que usan style.display). !important para ganarle al inline
   solo en la dirección de ocultar; ninguna regla de acá muestra nada. */
/* Dashboard: tarjetas */
body.pref-hide-dashboard-cards-commissions #dashCommissionsCard,
body.pref-hide-dashboard-cards-shipping .kpi-card:has(#dashShipping),
body.pref-hide-dashboard-cards-units .kpi-card:has(#dashUnits),
body.pref-hide-dashboard-cards-iva .dash-kpi-chip:has(#dashIva),
body.pref-hide-dashboard-cards-ads .dash-kpi-chip:has(#dashPublicidad),
body.pref-hide-dashboard-cards-iva.pref-hide-dashboard-cards-ads #dashKpiTira,
body.pref-hide-dashboard-cards-today #dashHoyCard,
body.pref-hide-dashboard-cards-winners #dashGanadoresDormidos,
body.pref-hide-dashboard-cards-trend #dashSparklineCard,
body.pref-hide-dashboard-cards-stock #dashStockCard,
body.pref-hide-dashboard-cards-reputation #dashReputacion,
body.pref-hide-dashboard-cards-insights #dashInsightsCard,
body.pref-hide-dashboard-cards-projection #dashProjectionCard,
body.pref-hide-dashboard-cards-canalcmp .nx-cd-cmp { display: none !important; }

/* Menú: módulos del riel (y el aviso del Dashboard que lleva a Envíos) */
body.pref-hide-menu-mod-agenda .rail-item[data-sec="agenda"],
body.pref-hide-menu-mod-clientes .rail-item[data-sec="clientes"],
body.pref-hide-menu-mod-cierrecaja .rail-item[data-sec="cierrecaja"],
body.pref-hide-menu-mod-envios .rail-item[data-sec="envios"],
body.pref-hide-menu-mod-envios #dashEnviosPend { display: none !important; }

/* Buscador global de la barra superior (apagable desde Personalizar) */
body.pref-hide-buscador-topbar #nxBuscador { display: none !important; }
/* Guía corta por sección (apagable desde Personalizar) */
body.pref-hide-guia-secciones-on .nx-guia { display: none !important; }

/* Ventas: columnas de la tabla (encabezado y celdas llevan data-col) */
body.pref-hide-ventas-col-canal #salesTable [data-col="channel"],
body.pref-hide-ventas-col-comision #salesTable [data-col="commission"],
body.pref-hide-ventas-col-envio #salesTable [data-col="shipping"],
body.pref-hide-ventas-col-ganancia #salesTable [data-col="profit"] { display: none !important; }
body.pref-hide-ventas-iva-tras .nx-iva-tras,
body.pref-hide-alertas-centro #dashAlertCenter { display: none !important; }

/* Alertas de stock bajo (interruptor general): la tarjeta del Dashboard y las marcas
   de stock bajo/agotado en las tarjetas de Productos. El mínimo por producto y el
   general se siguen guardando aunque el aviso esté apagado. */
body.pref-hide-alertas-stock-on #dashStockCard,
body.pref-hide-alertas-stock-on .prod-badge-bajo,
body.pref-hide-alertas-stock-on .prod-badge-sin { display: none !important; }
body.pref-hide-alertas-margen-on .nx-margen-bajo { display: none !important; }
body.pref-hide-envios-checklist .nx-pack,
body.pref-hide-envios-checklist .nx-pack-btn { display: none !important; }

/* ===== Buscador global (barra superior, assets/nexsell-buscador.js) ===== */
.nx-bus { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.nx-bus-ico { position: absolute; left: 10px; display: inline-flex; color: var(--text-muted); pointer-events: none; }
.nx-bus-ico svg, .nx-bus-ico [data-lucide] { width: 16px; height: 16px; }
.nx-bus-input { width: 100%; min-width: 0; height: 38px; padding: 0 12px 0 32px; border-radius: 10px;
  border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary); font-size: 14px; }
.nx-bus-input:focus { outline: none; border-color: var(--accent-primary); box-shadow: var(--focus-ring); }
.nx-bus-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1200; max-height: min(60vh, 420px); overflow-y: auto;
  background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; }
.nx-bus-grupo + .nx-bus-grupo { border-top: 1px solid var(--border-soft); margin-top: 4px; padding-top: 4px; }
.nx-bus-cap { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); padding: 6px 8px 2px; }
.nx-bus-item { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; border: none; background: transparent; color: var(--text-primary); padding: 8px; border-radius: 8px; cursor: pointer; }
.nx-bus-item:hover, .nx-bus-item:focus-visible { background: var(--bg-tertiary); outline: none; }
.nx-bus-tit { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-bus-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Guía corta por sección (assets/nexsell-guia.js) ===== */
.nx-guia {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 1000; width: min(520px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 14px;
  background: var(--bg-elevated); border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}
.nx-guia-txt { flex: 1 1 auto; min-width: 0; }
.nx-guia-txt p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.nx-guia-txt p:first-child { color: var(--text-primary); font-weight: 600; }
.nx-guia-ok { flex: none; }
@media (max-width: 430px) { .nx-guia { bottom: 10px; gap: 10px; } }

/* ===== Alertas: marca "Margen bajo" (Productos, Finanzas, tarjeta por canal) =====
   (Fuera del bloque de preferencias: el test prefs-core escanea ese bloque y los
   colores #hex de acá no son ids. El apagado es la regla pref-hide de arriba.) */
.nx-margen-bajo {
  display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #b45309;
  background: rgba(245, 158, 11, .14); border: 1px solid rgba(245, 158, 11, .35);
}
td .nx-margen-bajo, .nx-cd-kpi-s .nx-margen-bajo { margin-top: 0; margin-left: 6px; }

/* Apariencia: densidad compacta (solo escritorio/tablet; en teléfono ya es compacto) */
@media (min-width: 769px) {
  body[data-nx-density="compact"] .card { padding: 14px 16px; margin-bottom: 12px; }
  body[data-nx-density="compact"] th { padding: 9px 12px; }
  body[data-nx-density="compact"] td { padding: 8px 12px; }
  body[data-nx-density="compact"] .rail-item { padding-top: 7px; padding-bottom: 7px; }
}

/* ===== 2026-10-12: canales — color por canal en barras, chips estrella/pérdida, Análisis más ancho ===== */
.nx-hoy-barra span, .nx-ana-barra span { background: var(--nx-ch, var(--accent-primary)); }
.nx-chips { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 10px; }
.nx-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--text-primary); background:var(--bg-tertiary); border:1px solid var(--border-color); max-width:100%; }
.nx-chip [data-lucide], .nx-chip svg { width:14px; height:14px; flex:none; }
.nx-chip.is-star { border-color:var(--accent-primary); }
.nx-chip.is-star [data-lucide], .nx-chip.is-star svg { color:var(--accent-primary); }
.nx-chip.is-loss { border-color:var(--accent-danger,#ef4444); background:var(--danger-soft, rgba(239,68,68,.08)); }
.nx-chip.is-loss [data-lucide], .nx-chip.is-loss svg { color:var(--accent-danger,#ef4444); }
.nx-hoy-fila-gan { color:var(--text-secondary); }
.nx-hoy-fila-gan.is-bad { color:var(--accent-danger,#ef4444); font-weight:700; }
.nx-ana-sub { display:block; font-size:11.5px; color:var(--text-muted); margin-top:2px; }

/* ===== 2026-10-22: vista celular 375px — Envíos, Productos y Configuración =====
   Solo arregla desbordes horizontales y botones cortados. Nada más: no cambia
   colores ni estructura. Va al final para ganar en empate de especificidad. */
@media (max-width: 430px) {
  /* Textos largos (SKU, nº de pedido, títulos, correos) parten en vez de estirar la página. */
  #envios .env-prod,
  #envios .env-meta,
  #envios .env-sub,
  #envios .nxenv-grupo-tit,
  #envios .nx-ges-kpi .env-kpi-rot,
  #products .prod-card,
  #products .prod-name,
  #products .prod-sku,
  #settings .set-panel,
  #settings .nxs-row,
  #settings .nxs-title,
  #settings .nxs-desc {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Botones: si el texto no cabe a 375px, parte en dos líneas en vez de recortarse. */
  #envios .btn,
  #products .btn,
  #settings .btn { white-space: normal; height: auto; }

  /* Configuración: una sola columna de grupos (a 375px dos quedan apretadas). */
  #settings .nxs-groups { grid-template-columns: minmax(0, 1fr); }

  /* Productos: el formulario no desborda; sus columnas encogen. */
  #products .form-row,
  #products .form-group { min-width: 0; max-width: 100%; }
  #products .form-row > * { min-width: 0; }

  /* Barra superior con el buscador: el título largo se recorta, no empuja el buscador. */
  .topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}