/* =========================================================
   UBICACIÓN:
   frontend/src/pages/direccion-ejecutiva/ventas-productos/
   ventas-productos.css

   WIRTZ HUB · DIRECCIÓN EJECUTIVA
   VENTAS POR PRODUCTO

   PARTE 1 DE 4

   DISEÑO:
   - Minimalista
   - Premium
   - Compacto
   - Responsive
   - Dark mode negro real
   - Sin glow
   - Bordes visibles
   - Tipografía firme
   - Animaciones rápidas
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

.ventas-productos-page {
  --vp-bg:
    #f6f7f9;

  --vp-surface:
    #ffffff;

  --vp-surface-2:
    #f9fafb;

  --vp-surface-3:
    #f2f4f7;

  --vp-surface-hover:
    #f5f7fa;

  --vp-text:
    #111317;

  --vp-text-strong:
    #050608;

  --vp-text-soft:
    #4d5562;

  --vp-text-muted:
    #737b87;

  --vp-border:
    #d9dde3;

  --vp-border-strong:
    #c5cad2;

  --vp-border-dark:
    #adb4bf;

  --vp-primary:
    #111827;

  --vp-primary-hover:
    #1f2937;

  --vp-primary-soft:
    #eef0f3;

  --vp-blue:
    #2563eb;

  --vp-blue-soft:
    #eff6ff;

  --vp-green:
    #15803d;

  --vp-green-soft:
    #f0fdf4;

  --vp-amber:
    #b45309;

  --vp-amber-soft:
    #fffbeb;

  --vp-violet:
    #7c3aed;

  --vp-violet-soft:
    #f5f3ff;

  --vp-red:
    #be123c;

  --vp-red-soft:
    #fff1f2;

  --vp-cyan:
    #0f766e;

  --vp-cyan-soft:
    #f0fdfa;

  --vp-radius-xs:
    6px;

  --vp-radius-sm:
    8px;

  --vp-radius-md:
    10px;

  --vp-radius-lg:
    13px;

  --vp-radius-xl:
    16px;

  --vp-shadow-sm:
    0 1px 2px rgba(16, 24, 40, 0.04);

  --vp-shadow-md:
    0 8px 24px rgba(16, 24, 40, 0.06);

  --vp-transition:
    150ms ease;

  --vp-font:
    "DM Sans",
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  width:
    100%;

  min-width:
    0;

  padding:
    18px;

  box-sizing:
    border-box;

  color:
    var(--vp-text);

  font-family:
    var(--vp-font);

  font-size:
    14px;

  line-height:
    1.45;

  background:
    var(--vp-bg);

  overflow-x:
    hidden;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] .ventas-productos-page,
body.dark .ventas-productos-page,
body[data-theme="dark"] .ventas-productos-page {
  --vp-bg:
    #050505;

  --vp-surface:
    #0b0b0c;

  --vp-surface-2:
    #101012;

  --vp-surface-3:
    #151517;

  --vp-surface-hover:
    #18181b;

  --vp-text:
    #f4f4f5;

  --vp-text-strong:
    #ffffff;

  --vp-text-soft:
    #c6c7cb;

  --vp-text-muted:
    #92949a;

  --vp-border:
    #27272a;

  --vp-border-strong:
    #343438;

  --vp-border-dark:
    #45454b;

  --vp-primary:
    #f4f4f5;

  --vp-primary-hover:
    #ffffff;

  --vp-primary-soft:
    #18181b;

  --vp-blue:
    #60a5fa;

  --vp-blue-soft:
    #0c1d34;

  --vp-green:
    #4ade80;

  --vp-green-soft:
    #0a2114;

  --vp-amber:
    #fbbf24;

  --vp-amber-soft:
    #261b08;

  --vp-violet:
    #a78bfa;

  --vp-violet-soft:
    #1d1533;

  --vp-red:
    #fb7185;

  --vp-red-soft:
    #2a0c14;

  --vp-cyan:
    #2dd4bf;

  --vp-cyan-soft:
    #082421;

  --vp-shadow-sm:
    none;

  --vp-shadow-md:
    none;
}


/* =========================================================
   RESET LOCAL
   ========================================================= */

.ventas-productos-page,
.ventas-productos-page *,
.ventas-productos-page *::before,
.ventas-productos-page *::after {
  box-sizing:
    border-box;
}


.ventas-productos-page button,
.ventas-productos-page input,
.ventas-productos-page select {
  font:
    inherit;
}


.ventas-productos-page button {
  -webkit-tap-highlight-color:
    transparent;
}


.ventas-productos-page button,
.ventas-productos-page select {
  cursor:
    pointer;
}


/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes ventasProductosSpin {
  to {
    transform:
      rotate(360deg);
  }
}


@keyframes ventasProductosFadeIn {
  from {
    opacity:
      0;

    transform:
      translateY(4px);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }
}


@keyframes ventasProductosToastIn {
  from {
    opacity:
      0;

    transform:
      translateY(8px)
      scale(0.98);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }
}


.ventas-productos-page .is-spinning {
  animation:
    ventasProductosSpin
    0.75s
    linear
    infinite;
}


/* =========================================================
   ICONOS
   ========================================================= */

.ventas-productos-page .icon {
  display:
    block;

  flex:
    0 0 auto;

  width:
    17px;

  height:
    17px;

  stroke-width:
    2;
}


/* =========================================================
   HEADER PRINCIPAL
   ========================================================= */

.ventas-productos-head {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  width:
    100%;

  margin:
    0 0 14px;

  padding:
    16px;

  border:
    1px solid var(--vp-border-strong);

  border-radius:
    var(--vp-radius-lg);

  background:
    var(--vp-surface);

  box-shadow:
    var(--vp-shadow-sm);

  animation:
    ventasProductosFadeIn
    160ms
    ease;
}


.ventas-productos-head__top {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    18px;

  min-width:
    0;
}


/* =========================================================
   BRAND
   ========================================================= */

.ventas-productos-brand {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  min-width:
    0;

  flex:
    1 1 auto;
}


.ventas-productos-brand__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    40px;

  height:
    40px;

  flex:
    0 0 40px;

  color:
    var(--vp-text-strong);

  border:
    1px solid var(--vp-border-strong);

  border-radius:
    10px;

  background:
    var(--vp-surface-2);
}


.ventas-productos-brand__body {
  min-width:
    0;
}


.ventas-productos-brand__eyebrow {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  min-height:
    20px;

  margin:
    0 0 4px;
}


.ventas-productos-brand__eyebrow > span:first-child {
  color:
    var(--vp-text-muted);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.09em;

  line-height:
    1.2;
}


.ventas-productos-brand__body h1 {
  margin:
    0;

  color:
    var(--vp-text-strong);

  font-size:
    clamp(
      22px,
      2vw,
      29px
    );

  font-weight:
    800;

  letter-spacing:
    -0.035em;

  line-height:
    1.08;
}


.ventas-productos-brand__body p {
  max-width:
    680px;

  margin:
    7px 0 0;

  color:
    var(--vp-text-soft);

  font-size:
    13px;

  font-weight:
    520;

  line-height:
    1.5;
}


/* =========================================================
   HEADER ACCIONES
   ========================================================= */

.ventas-productos-head__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;

  flex:
    0 0 auto;
}


/* =========================================================
   BOTONES
   ========================================================= */

.ventas-productos-btn {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  min-height:
    36px;

  padding:
    0 12px;

  color:
    var(--vp-text);

  border:
    1px solid var(--vp-border-strong);

  border-radius:
    var(--vp-radius-sm);

  background:
    var(--vp-surface);

  font-size:
    12px;

  font-weight:
    750;

  line-height:
    1;

  white-space:
    nowrap;

  outline:
    none;

  transition:
    background-color
    var(--vp-transition),
    border-color
    var(--vp-transition),
    color
    var(--vp-transition),
    transform
    var(--vp-transition);
}


.ventas-productos-btn:hover:not(:disabled) {
  border-color:
    var(--vp-border-dark);

  background:
    var(--vp-surface-hover);

  transform:
    translateY(-1px);
}


.ventas-productos-btn:active:not(:disabled) {
  transform:
    translateY(0);
}


.ventas-productos-btn:focus-visible {
  outline:
    2px solid var(--vp-blue);

  outline-offset:
    2px;
}


.ventas-productos-btn:disabled {
  opacity:
    0.52;

  cursor:
    not-allowed;

  transform:
    none;
}


.ventas-productos-btn--primary {
  color:
    #ffffff;

  border-color:
    #111827;

  background:
    #111827;
}


.ventas-productos-btn--primary:hover:not(:disabled) {
  color:
    #ffffff;

  border-color:
    #000000;

  background:
    #000000;
}


html[data-theme="dark"]
.ventas-productos-btn--primary,
body.dark
.ventas-productos-btn--primary,
body[data-theme="dark"]
.ventas-productos-btn--primary {
  color:
    #050505;

  border-color:
    #ffffff;

  background:
    #ffffff;
}


html[data-theme="dark"]
.ventas-productos-btn--primary:hover:not(:disabled),
body.dark
.ventas-productos-btn--primary:hover:not(:disabled),
body[data-theme="dark"]
.ventas-productos-btn--primary:hover:not(:disabled) {
  color:
    #000000;

  border-color:
    #ffffff;

  background:
    #f4f4f5;
}


.ventas-productos-btn__dot {
  position:
    absolute;

  top:
    6px;

  right:
    6px;

  width:
    6px;

  height:
    6px;

  border:
    1px solid var(--vp-surface);

  border-radius:
    999px;

  background:
    var(--vp-blue);
}


/* =========================================================
   ICON BUTTON
   ========================================================= */

.ventas-productos-icon-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    34px;

  height:
    34px;

  padding:
    0;

  color:
    var(--vp-text);

  border:
    1px solid var(--vp-border);

  border-radius:
    var(--vp-radius-sm);

  background:
    var(--vp-surface);

  outline:
    none;

  transition:
    background-color
    var(--vp-transition),
    border-color
    var(--vp-transition),
    color
    var(--vp-transition),
    transform
    var(--vp-transition);
}


.ventas-productos-icon-btn:hover:not(:disabled) {
  color:
    var(--vp-text-strong);

  border-color:
    var(--vp-border-dark);

  background:
    var(--vp-surface-hover);

  transform:
    translateY(-1px);
}


.ventas-productos-icon-btn:active:not(:disabled) {
  transform:
    translateY(0);
}


.ventas-productos-icon-btn:disabled {
  opacity:
    0.42;

  cursor:
    not-allowed;
}


/* =========================================================
   META HEADER
   ========================================================= */

.ventas-productos-head__meta {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px;

  padding-top:
    12px;

  border-top:
    1px solid var(--vp-border);
}


.ventas-productos-head-stat {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  min-width:
    0;

  padding:
    9px 10px;

  border:
    1px solid var(--vp-border);

  border-radius:
    var(--vp-radius-sm);

  background:
    var(--vp-surface-2);
}


.ventas-productos-head-stat__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    29px;

  height:
    29px;

  flex:
    0 0 29px;

  color:
    var(--vp-text-soft);

  border:
    1px solid var(--vp-border);

  border-radius:
    7px;

  background:
    var(--vp-surface);
}


.ventas-productos-head-stat > div {
  min-width:
    0;
}


.ventas-productos-head-stat small {
  display:
    block;

  margin:
    0 0 2px;

  color:
    var(--vp-text-muted);

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.2;
}


.ventas-productos-head-stat strong {
  display:
    block;

  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--vp-text-strong);

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   BADGES
   ========================================================= */

.ventas-productos-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  min-height:
    24px;

  padding:
    3px 8px;

  border:
    1px solid var(--vp-border);

  border-radius:
    999px;

  background:
    var(--vp-surface-2);

  color:
    var(--vp-text-soft);

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1;

  white-space:
    nowrap;
}


.ventas-productos-badge .icon {
  width:
    13px;

  height:
    13px;
}


.ventas-productos-badge--neutral {
  color:
    var(--vp-text-soft);

  border-color:
    var(--vp-border);

  background:
    var(--vp-surface-2);
}


.ventas-productos-badge--primary {
  color:
    var(--vp-blue);

  border-color:
    color-mix(
      in srgb,
      var(--vp-blue)
      28%,
      var(--vp-border)
    );

  background:
    var(--vp-blue-soft);
}


.ventas-productos-badge--success {
  color:
    var(--vp-green);

  border-color:
    color-mix(
      in srgb,
      var(--vp-green)
      28%,
      var(--vp-border)
    );

  background:
    var(--vp-green-soft);
}


.ventas-productos-badge--warning {
  color:
    var(--vp-amber);

  border-color:
    color-mix(
      in srgb,
      var(--vp-amber)
      28%,
      var(--vp-border)
    );

  background:
    var(--vp-amber-soft);
}


.ventas-productos-badge--danger {
  color:
    var(--vp-red);

  border-color:
    color-mix(
      in srgb,
      var(--vp-red)
      28%,
      var(--vp-border)
    );

  background:
    var(--vp-red-soft);
}


.ventas-productos-badge--info {
  color:
    var(--vp-cyan);

  border-color:
    color-mix(
      in srgb,
      var(--vp-cyan)
      28%,
      var(--vp-border)
    );

  background:
    var(--vp-cyan-soft);
}


/* =========================================================
   SECTION KICKER
   ========================================================= */

.ventas-productos-section-kicker {
  display:
    block;

  margin:
    0 0 3px;

  color:
    var(--vp-text-muted);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.1em;

  line-height:
    1.2;
}


/* =========================================================
   FILTROS
   ========================================================= */

.ventas-productos-filters {
  width:
    100%;

  margin:
    0 0 14px;

  border:
    1px solid var(--vp-border-strong);

  border-radius:
    var(--vp-radius-lg);

  background:
    var(--vp-surface);

  overflow:
    hidden;

  transition:
    border-color
    var(--vp-transition),
    background-color
    var(--vp-transition);
}


.ventas-productos-filters__head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-height:
    52px;

  padding:
    9px 12px;
}


.ventas-productos-filters__title {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  min-width:
    0;
}


.ventas-productos-filters__title > div {
  min-width:
    0;
}


.ventas-productos-filters__title strong {
  display:
    block;

  color:
    var(--vp-text-strong);

  font-size:
    13px;

  font-weight:
    800;

  line-height:
    1.25;
}


.ventas-productos-filters__title small {
  display:
    block;

  margin-top:
    2px;

  color:
    var(--vp-text-muted);

  font-size:
    11px;

  font-weight:
    500;

  line-height:
    1.3;
}


.ventas-productos-filters__head-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  flex:
    0 0 auto;
}


.ventas-productos-filters__body {
  display:
    grid;

  grid-template-rows:
    0fr;

  border-top:
    0 solid transparent;

  opacity:
    0;

  transition:
    grid-template-rows
    180ms
    ease,
    opacity
    130ms
    ease,
    border-color
    130ms
    ease;
}


.ventas-productos-filters__body > * {
  min-height:
    0;

  overflow:
    hidden;
}


.ventas-productos-filters.is-open
.ventas-productos-filters__body {
  grid-template-rows:
    1fr;

  border-top:
    1px solid var(--vp-border);

  opacity:
    1;
}


.ventas-productos-filter-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;

  padding:
    12px;
}


/* =========================================================
   FIELDS
   ========================================================= */

.ventas-productos-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  min-width:
    0;
}


.ventas-productos-field--search {
  grid-column:
    span 2;
}


.ventas-productos-field__label {
  color:
    var(--vp-text-soft);

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.2;
}


/* =========================================================
   CONTROLES
   ========================================================= */

.ventas-productos-control {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  min-width:
    0;

  min-height:
    36px;

  color:
    var(--vp-text-muted);

  border:
    1px solid var(--vp-border);

  border-radius:
    var(--vp-radius-sm);

  background:
    var(--vp-surface-2);

  transition:
    border-color
    var(--vp-transition),
    background-color
    var(--vp-transition);
}


.ventas-productos-control:focus-within {
  border-color:
    var(--vp-border-dark);

  background:
    var(--vp-surface);
}


.ventas-productos-control > .icon:first-child {
  position:
    absolute;

  left:
    10px;

  z-index:
    1;

  pointer-events:
    none;
}


.ventas-productos-control select,
.ventas-productos-control input {
  width:
    100%;

  min-width:
    0;

  min-height:
    34px;

  padding:
    0 34px 0 33px;

  color:
    var(--vp-text);

  border:
    0;

  outline:
    0;

  background:
    transparent;

  font-size:
    12px;

  font-weight:
    650;
}


.ventas-productos-control input::placeholder {
  color:
    var(--vp-text-muted);

  font-weight:
    500;
}


.ventas-productos-control select {
  appearance:
    none;

  -webkit-appearance:
    none;
}


.ventas-productos-control select option {
  color:
    var(--vp-text);

  background:
    var(--vp-surface);
}


.ventas-productos-control__chevron {
  position:
    absolute;

  right:
    9px;

  width:
    14px;

  height:
    14px;

  pointer-events:
    none;
}


.ventas-productos-control__clear {
  position:
    absolute;

  right:
    6px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    25px;

  height:
    25px;

  padding:
    0;

  color:
    var(--vp-text-muted);

  border:
    0;

  border-radius:
    6px;

  background:
    transparent;
}


.ventas-productos-control__clear:hover {
  color:
    var(--vp-text-strong);

  background:
    var(--vp-surface-3);
}


/* =========================================================
   LINK BUTTON
   ========================================================= */

.ventas-productos-link-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  min-height:
    30px;

  padding:
    0 7px;

  color:
    var(--vp-text-soft);

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  font-size:
    11px;

  font-weight:
    750;

  transition:
    color
    var(--vp-transition),
    background-color
    var(--vp-transition);
}


.ventas-productos-link-btn:hover {
  color:
    var(--vp-text-strong);

  background:
    var(--vp-surface-3);
}


/* =========================================================
   ESTADOS GENERALES
   ========================================================= */

.ventas-productos-state {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  min-height:
    180px;

  width:
    100%;

  padding:
    24px;

  color:
    var(--vp-text);

  text-align:
    center;

  border:
    1px solid var(--vp-border);

  border-radius:
    var(--vp-radius-lg);

  background:
    var(--vp-surface);
}


.ventas-productos-state__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    42px;

  height:
    42px;

  color:
    var(--vp-text-soft);

  border:
    1px solid var(--vp-border);

  border-radius:
    10px;

  background:
    var(--vp-surface-2);
}


.ventas-productos-state strong {
  margin-top:
    3px;

  color:
    var(--vp-text-strong);

  font-size:
    14px;

  font-weight:
    800;
}


.ventas-productos-state p {
  max-width:
    420px;

  margin:
    0;

  color:
    var(--vp-text-muted);

  font-size:
    12px;

  font-weight:
    500;

  line-height:
    1.45;
}


.ventas-productos-state.is-error
.ventas-productos-state__icon {
  color:
    var(--vp-red);

  border-color:
    color-mix(
      in srgb,
      var(--vp-red)
      30%,
      var(--vp-border)
    );

  background:
    var(--vp-red-soft);
}


/* =========================================================
   SKELETON
   ========================================================= */

.ventas-productos-skeleton-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      minmax(
        0,
        1fr
      )
    );

  gap:
    9px;

  margin:
    0 0 14px;
}


.ventas-productos-skeleton-card {
  min-height:
    104px;

  padding:
    13px;

  border:
    1px solid var(--vp-border);

  border-radius:
    var(--vp-radius-md);

  background:
    var(--vp-surface);
}


.ventas-productos-skeleton-card span,
.ventas-productos-skeleton-card strong,
.ventas-productos-skeleton-card small {
  display:
    block;

  border-radius:
    5px;

  background:
    var(--vp-surface-3);
}


.ventas-productos-skeleton-card span {
  width:
    40%;

  height:
    10px;

  margin-bottom:
    14px;
}


.ventas-productos-skeleton-card strong {
  width:
    68%;

  height:
    23px;

  margin-bottom:
    12px;
}


.ventas-productos-skeleton-card small {
  width:
    52%;

  height:
    8px;
}


/* =========================================================
   TOAST
   ========================================================= */

.ventas-productos-toast {
  position:
    fixed;

  right:
    18px;

  bottom:
    18px;

  z-index:
    20050;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  width:
    min(
      390px,
      calc(
        100vw -
        28px
      )
    );

  padding:
    11px;

  color:
    var(--vp-text);

  border:
    1px solid var(--vp-border-strong);

  border-radius:
    11px;

  background:
    var(--vp-surface);

  box-shadow:
    var(--vp-shadow-md);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translateY(8px);

  transition:
    opacity
    150ms
    ease,
    transform
    150ms
    ease,
    visibility
    150ms
    ease;
}


.ventas-productos-toast.is-visible {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transform:
    translateY(0);

  animation:
    ventasProductosToastIn
    160ms
    ease;
}


.ventas-productos-toast__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

  border:
    1px solid var(--vp-border);

  border-radius:
    8px;

  background:
    var(--vp-surface-2);
}


.ventas-productos-toast__body {
  min-width:
    0;

  flex:
    1 1 auto;
}


.ventas-productos-toast__body strong {
  display:
    block;

  color:
    var(--vp-text-strong);

  font-size:
    12px;

  font-weight:
    850;

  line-height:
    1.3;
}


.ventas-productos-toast__body span {
  display:
    block;

  margin-top:
    2px;

  color:
    var(--vp-text-soft);

  font-size:
    11px;

  font-weight:
    500;

  line-height:
    1.4;
}


.ventas-productos-toast__close {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    26px;

  height:
    26px;

  flex:
    0 0 26px;

  padding:
    0;

  color:
    var(--vp-text-muted);

  border:
    0;

  border-radius:
    6px;

  background:
    transparent;
}


.ventas-productos-toast__close:hover {
  color:
    var(--vp-text);

  background:
    var(--vp-surface-3);
}


.ventas-productos-toast.is-success
.ventas-productos-toast__icon {
  color:
    var(--vp-green);

  background:
    var(--vp-green-soft);
}


.ventas-productos-toast.is-error
.ventas-productos-toast__icon {
  color:
    var(--vp-red);

  background:
    var(--vp-red-soft);
}


.ventas-productos-toast.is-warning
.ventas-productos-toast__icon {
  color:
    var(--vp-amber);

  background:
    var(--vp-amber-soft);
}


.ventas-productos-toast.is-info
.ventas-productos-toast__icon {
  color:
    var(--vp-blue);

  background:
    var(--vp-blue-soft);
}


/* =========================================================
   RESPONSIVE · PARTE 1
   ========================================================= */

@media (
  max-width:
    1280px
) {
  .ventas-productos-filter-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .ventas-productos-field--search {
    grid-column:
      span 1;
  }


  .ventas-productos-skeleton-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }
}


@media (
  max-width:
    1100px
) {
  .ventas-productos-page {
    padding:
      14px;
  }


  .ventas-productos-head__top {
    flex-direction:
      column;
  }


  .ventas-productos-head__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .ventas-productos-head__meta {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .ventas-productos-filter-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


@media (
  max-width:
    760px
) {
  .ventas-productos-page {
    padding:
      10px;
  }


  .ventas-productos-head {
    padding:
      12px;

    border-radius:
      11px;
  }


  .ventas-productos-brand__icon {
    width:
      36px;

    height:
      36px;

    flex-basis:
      36px;
  }


  .ventas-productos-brand__body h1 {
    font-size:
      22px;
  }


  .ventas-productos-brand__body p {
    font-size:
      12px;
  }


  .ventas-productos-head__actions {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .ventas-productos-head__actions
  .ventas-productos-btn {
    width:
      100%;
  }


  .ventas-productos-head__meta {
    grid-template-columns:
      1fr;
  }


  .ventas-productos-filter-grid {
    grid-template-columns:
      1fr;
  }


  .ventas-productos-field--search {
    grid-column:
      auto;
  }


  .ventas-productos-filters__head {
    align-items:
      flex-start;
  }


  .ventas-productos-filters__title small {
    display:
      none;
  }


  .ventas-productos-skeleton-grid {
    grid-template-columns:
      1fr;
  }


  .ventas-productos-toast {
    right:
      10px;

    bottom:
      10px;

    width:
      calc(
        100vw -
        20px
      );
  }
}


/* =========================================================
   FIN PARTE 1 DE 4
   CONTINÚA EN PARTE 2
   ========================================================= *//* =========================================================
   WIRTZ HUB · DIRECCIÓN EJECUTIVA
   VENTAS POR PRODUCTO

   PARTE 2 DE 4

   CONTIENE:
   - KPIs
   - Paneles
   - Gráfico evolución
   - Resumen ejecutivo
   - Ranking clientes
   - Grid analítico
   ========================================================= */


/* =========================================================
   KPI GRID
   ========================================================= */

.ventas-productos-kpi-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      minmax(
        0,
        1fr
      )
    );

  gap:
    9px;

  width:
    100%;

  margin:
    0 0 14px;
}


/* =========================================================
   KPI CARD
   ========================================================= */

.ventas-productos-kpi {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  min-width:
    0;

  min-height:
    110px;

  padding:
    13px;

  border:
    1px solid var(--vp-border-strong);

  border-radius:
    var(--vp-radius-md);

  background:
    var(--vp-surface);

  box-shadow:
    var(--vp-shadow-sm);

  overflow:
    hidden;

  transition:
    border-color
    var(--vp-transition),
    background-color
    var(--vp-transition),
    transform
    var(--vp-transition);

  animation:
    ventasProductosFadeIn
    170ms
    ease;
}


.ventas-productos-kpi::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    3px;

  height:
    100%;

  background:
    var(--vp-border-dark);
}


.ventas-productos-kpi:hover {
  border-color:
    var(--vp-border-dark);

  transform:
    translateY(-1px);
}


.ventas-productos-kpi.is-featured {
  background:
    var(--vp-surface-2);
}


.ventas-productos-kpi--primary::before {
  background:
    var(--vp-blue);
}


.ventas-productos-kpi--success::before {
  background:
    var(--vp-green);
}


.ventas-productos-kpi--warning::before {
  background:
    var(--vp-amber);
}


.ventas-productos-kpi--violet::before {
  background:
    var(--vp-violet);
}


.ventas-productos-kpi--info::before {
  background:
    var(--vp-cyan);
}


.ventas-productos-kpi--neutral::before {
  background:
    var(--vp-border-dark);
}


/* =========================================================
   KPI HEAD
   ========================================================= */

.ventas-productos-kpi__head {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;

  color:
    var(--vp-text-soft);

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.2;
}


.ventas-productos-kpi__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    29px;

  height:
    29px;

  flex:
    0 0 29px;

  border:
    1px solid var(--vp-border);

  border-radius:
    7px;

  background:
    var(--vp-surface-2);
}


.ventas-productos-kpi--primary
.ventas-productos-kpi__icon {
  color:
    var(--vp-blue);

  background:
    var(--vp-blue-soft);
}


.ventas-productos-kpi--success
.ventas-productos-kpi__icon {
  color:
    var(--vp-green);

  background:
    var(--vp-green-soft);
}


.ventas-productos-kpi--warning
.ventas-productos-kpi__icon {
  color:
    var(--vp-amber);

  background:
    var(--vp-amber-soft);
}


.ventas-productos-kpi--violet
.ventas-productos-kpi__icon {
  color:
    var(--vp-violet);

  background:
    var(--vp-violet-soft);
}


.ventas-productos-kpi--info
.ventas-productos-kpi__icon {
  color:
    var(--vp-cyan);

  background:
    var(--vp-cyan-soft);
}


/* =========================================================
   KPI VALUE
   ========================================================= */

.ventas-productos-kpi__value {
  display:
    block;

  min-width:
    0;

  margin:
    11px 0 5px;

  overflow:
    hidden;

  color:
    var(--vp-text-strong);

  font-size:
    clamp(
      19px,
      1.7vw,
      24px
    );

  font-weight:
    850;

  letter-spacing:
    -0.035em;

  line-height:
    1.05;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-productos-kpi__helper {
  display:
    block;

  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--vp-text-muted);

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   PANEL GENERAL
   ========================================================= */

.ventas-productos-panel {
  min-width:
    0;

  border:
    1px solid var(--vp-border-strong);

  border-radius:
    var(--vp-radius-lg);

  background:
    var(--vp-surface);

  box-shadow:
    var(--vp-shadow-sm);

  overflow:
    hidden;

  animation:
    ventasProductosFadeIn
    170ms
    ease;
}


/* =========================================================
   PANEL HEADER
   ========================================================= */

.ventas-productos-panel__head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;

  min-height:
    67px;

  padding:
    13px 14px;

  border-bottom:
    1px solid var(--vp-border);
}


.ventas-productos-panel__head > div:first-child {
  min-width:
    0;

  flex:
    1 1 auto;
}


.ventas-productos-panel__head h2,
.ventas-productos-panel__head h3 {
  margin:
    0;

  color:
    var(--vp-text-strong);

  font-size:
    15px;

  font-weight:
    850;

  letter-spacing:
    -0.015em;

  line-height:
    1.25;
}


.ventas-productos-panel__head p {
  margin:
    4px 0 0;

  color:
    var(--vp-text-muted);

  font-size:
    11px;

  font-weight:
    500;

  line-height:
    1.4;
}


.ventas-productos-panel__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    6px;

  flex:
    0 0 auto;
}


/* =========================================================
   GRID ANALÍTICO
   ========================================================= */

.ventas-productos-analysis-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.65fr
    )
    minmax(
      290px,
      0.75fr
    );

  gap:
    12px;

  width:
    100%;

  margin:
    0 0 14px;
}


.ventas-productos-analysis-grid__main,
.ventas-productos-analysis-grid__side {
  min-width:
    0;
}


.ventas-productos-analysis-grid__side {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}


/* =========================================================
   EVOLUCIÓN
   ========================================================= */

.ventas-productos-evolution {
  min-height:
    330px;
}


/* =========================================================
   CHART
   ========================================================= */

.ventas-productos-chart {
  display:
    grid;

  grid-template-columns:
    44px
    minmax(
      0,
      1fr
    );

  gap:
    9px;

  min-height:
    245px;

  padding:
    14px;
}


/* =========================================================
   CHART SCALE
   ========================================================= */

.ventas-productos-chart__scale {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  align-items:
    flex-end;

  height:
    190px;

  padding:
    1px 0 22px;
}


.ventas-productos-chart__scale span {
  color:
    var(--vp-text-muted);

  font-size:
    9px;

  font-weight:
    650;

  line-height:
    1;
}


/* =========================================================
   CHART BODY
   ========================================================= */

.ventas-productos-chart__body {
  position:
    relative;

  min-width:
    0;

  height:
    190px;
}


/* =========================================================
   CHART GRID
   ========================================================= */

.ventas-productos-chart__grid {
  position:
    absolute;

  inset:
    0 0 22px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  pointer-events:
    none;
}


.ventas-productos-chart__grid span {
  display:
    block;

  width:
    100%;

  height:
    1px;

  background:
    var(--vp-border);
}


/* =========================================================
   CHART BARS
   ========================================================= */

.ventas-productos-chart__bars {
  position:
    absolute;

  inset:
    0;

  z-index:
    2;

  display:
    grid;

  grid-template-columns:
    repeat(
      12,
      minmax(
        24px,
        1fr
      )
    );

  align-items:
    end;

  gap:
    6px;

  min-width:
    0;
}


/* =========================================================
   CHART BAR
   ========================================================= */

.ventas-productos-chart-bar {
  display:
    grid;

  grid-template-rows:
    18px
    1fr
    20px;

  gap:
    4px;

  align-items:
    end;

  min-width:
    0;

  height:
    100%;

  padding:
    0;

  color:
    var(--vp-text);

  border:
    0;

  outline:
    0;

  background:
    transparent;
}


.ventas-productos-chart-bar__value {
  display:
    block;

  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--vp-text-soft);

  font-size:
    8px;

  font-weight:
    750;

  line-height:
    1;

  text-align:
    center;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  opacity:
    0;

  transform:
    translateY(2px);

  transition:
    opacity
    var(--vp-transition),
    transform
    var(--vp-transition);
}


.ventas-productos-chart-bar:hover
.ventas-productos-chart-bar__value,
.ventas-productos-chart-bar.is-selected
.ventas-productos-chart-bar__value {
  opacity:
    1;

  transform:
    translateY(0);
}


/* =========================================================
   CHART TRACK
   ========================================================= */

.ventas-productos-chart-bar__track {
  position:
    relative;

  display:
    flex;

  align-items:
    flex-end;

  width:
    100%;

  height:
    100%;

  min-height:
    120px;

  overflow:
    hidden;

  border:
    1px solid transparent;

  border-radius:
    6px 6px 3px 3px;

  background:
    transparent;
}


.ventas-productos-chart-bar:hover
.ventas-productos-chart-bar__track {
  background:
    var(--vp-surface-2);
}


.ventas-productos-chart-bar.is-selected
.ventas-productos-chart-bar__track {
  border-color:
    var(--vp-border-strong);

  background:
    var(--vp-surface-2);
}


/* =========================================================
   CHART FILL
   ========================================================= */

.ventas-productos-chart-bar__fill {
  display:
    block;

  width:
    100%;

  min-height:
    2px;

  border-radius:
    5px 5px 2px 2px;

  background:
    var(--vp-blue);

  transition:
    height
    220ms
    ease,
    opacity
    var(--vp-transition),
    transform
    var(--vp-transition);

  transform-origin:
    bottom;
}


.ventas-productos-chart-bar:hover
.ventas-productos-chart-bar__fill {
  opacity:
    0.86;
}


/* =========================================================
   CHART SERIES
   ========================================================= */

.ventas-productos-chart-bar.series-1
.ventas-productos-chart-bar__fill,
.series-1
.ventas-productos-drawer-month__track > span,
.series-1
.ventas-productos-drawer-channel__track > span {
  background:
    var(--vp-blue);
}


.ventas-productos-chart-bar.series-2
.ventas-productos-chart-bar__fill,
.series-2
.ventas-productos-drawer-month__track > span,
.series-2
.ventas-productos-drawer-channel__track > span {
  background:
    var(--vp-violet);
}


.ventas-productos-chart-bar.series-3
.ventas-productos-chart-bar__fill,
.series-3
.ventas-productos-drawer-month__track > span,
.series-3
.ventas-productos-drawer-channel__track > span {
  background:
    var(--vp-green);
}


.ventas-productos-chart-bar.series-4
.ventas-productos-chart-bar__fill,
.series-4
.ventas-productos-drawer-month__track > span,
.series-4
.ventas-productos-drawer-channel__track > span {
  background:
    var(--vp-amber);
}


.ventas-productos-chart-bar.series-5
.ventas-productos-chart-bar__fill,
.series-5
.ventas-productos-drawer-month__track > span,
.series-5
.ventas-productos-drawer-channel__track > span {
  background:
    var(--vp-cyan);
}


.ventas-productos-chart-bar.series-6
.ventas-productos-chart-bar__fill,
.series-6
.ventas-productos-drawer-month__track > span,
.series-6
.ventas-productos-drawer-channel__track > span {
  background:
    var(--vp-red);
}


/* =========================================================
   CHART LABEL
   ========================================================= */

.ventas-productos-chart-bar__label {
  display:
    block;

  color:
    var(--vp-text-muted);

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1;

  text-align:
    center;
}


.ventas-productos-chart-bar:hover
.ventas-productos-chart-bar__label,
.ventas-productos-chart-bar.is-selected
.ventas-productos-chart-bar__label {
  color:
    var(--vp-text-strong);
}


/* =========================================================
   RESUMEN EJECUTIVO
   ========================================================= */

.ventas-productos-executive__body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  padding:
    12px;
}


/* =========================================================
   PRODUCTO LÍDER
   ========================================================= */

.ventas-productos-leader-product {
  display:
    grid;

  grid-template-columns:
    36px
    minmax(
      0,
      1fr
    )
    24px;

  align-items:
    center;

  gap:
    9px;

  width:
    100%;

  padding:
    10px;

  color:
    var(--vp-text);

  text-align:
    left;

  border:
    1px solid var(--vp-border-strong);

  border-radius:
    var(--vp-radius-md);

  background:
    var(--vp-surface-2);

  outline:
    none;

  transition:
    border-color
    var(--vp-transition),
    background-color
    var(--vp-transition),
    transform
    var(--vp-transition);
}


.ventas-productos-leader-product:hover {
  border-color:
    var(--vp-border-dark);

  background:
    var(--vp-surface-hover);

  transform:
    translateY(-1px);
}


.ventas-productos-leader-product__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    36px;

  height:
    36px;

  color:
    var(--vp-amber);

  border:
    1px solid color-mix(
      in srgb,
      var(--vp-amber)
      26%,
      var(--vp-border)
    );

  border-radius:
    9px;

  background:
    var(--vp-amber-soft);
}


.ventas-productos-leader-product__body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}


.ventas-productos-leader-product__body small {
  color:
    var(--vp-text-muted);

  font-size:
    9px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    0.05em;
}


.ventas-productos-leader-product__body strong {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--vp-text-strong);

  font-size:
    12px;

  font-weight:
    850;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-productos-leader-product__body span {
  color:
    var(--vp-text-soft);

  font-size:
    10px;

  font-weight:
    600;
}


.ventas-productos-leader-product__arrow {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--vp-text-muted);
}


/* =========================================================
   RESUMEN GRID
   ========================================================= */

.ventas-productos-executive-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px;
}


.ventas-productos-executive-grid article {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    8px;

  min-width:
    0;

  padding:
    9px;

  border:
    1px solid var(--vp-border);

  border-radius:
    var(--vp-radius-sm);

  background:
    var(--vp-surface);
}


.ventas-productos-executive-grid__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    28px;

  height:
    28px;

  flex:
    0 0 28px;

  color:
    var(--vp-text-soft);

  border:
    1px solid var(--vp-border);

  border-radius:
    7px;

  background:
    var(--vp-surface-2);
}


.ventas-productos-executive-grid article > div {
  min-width:
    0;
}


.ventas-productos-executive-grid small {
  display:
    block;

  color:
    var(--vp-text-muted);

  font-size:
    9px;

  font-weight:
    700;
}


.ventas-productos-executive-grid strong {
  display:
    block;

  margin-top:
    2px;

  overflow:
    hidden;

  color:
    var(--vp-text-strong);

  font-size:
    12px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-productos-executive-grid span:not(
  .ventas-productos-executive-grid__icon
) {
  display:
    block;

  margin-top:
    2px;

  color:
    var(--vp-text-soft);

  font-size:
    9px;

  font-weight:
    600;
}


/* =========================================================
   CLIENTE LÍDER
   ========================================================= */

.ventas-productos-executive-client {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  min-width:
    0;

  padding:
    9px 10px;

  border:
    1px solid color-mix(
      in srgb,
      var(--vp-blue)
      24%,
      var(--vp-border)
    );

  border-radius:
    var(--vp-radius-sm);

  background:
    var(--vp-blue-soft);
}


.ventas-productos-executive-client__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    30px;

  height:
    30px;

  flex:
    0 0 30px;

  color:
    var(--vp-blue);
}


.ventas-productos-executive-client > div {
  min-width:
    0;
}


.ventas-productos-executive-client small {
  display:
    block;

  color:
    var(--vp-text-muted);

  font-size:
    9px;

  font-weight:
    700;
}


.ventas-productos-executive-client strong {
  display:
    block;

  margin-top:
    1px;

  overflow:
    hidden;

  color:
    var(--vp-text-strong);

  font-size:
    11px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-productos-executive-client span:not(
  .ventas-productos-executive-client__icon
) {
  display:
    block;

  margin-top:
    2px;

  color:
    var(--vp-text-soft);

  font-size:
    9px;

  font-weight:
    600;
}


/* =========================================================
   EMPTY RESUMEN
   ========================================================= */

.ventas-productos-executive-empty {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  min-height:
    64px;

  color:
    var(--vp-text-muted);

  border:
    1px dashed var(--vp-border-strong);

  border-radius:
    var(--vp-radius-sm);

  background:
    var(--vp-surface-2);

  font-size:
    11px;

  font-weight:
    650;
}


/* =========================================================
   CLIENTES
   ========================================================= */

.ventas-productos-client-list {
  display:
    flex;

  flex-direction:
    column;
}


/* =========================================================
   CLIENTE ROW
   ========================================================= */

.ventas-productos-client-row {
  display:
    grid;

  grid-template-columns:
    24px
    minmax(
      0,
      1fr
    )
    minmax(
      105px,
      0.8fr
    )
    20px;

  align-items:
    center;

  gap:
    8px;

  width:
    100%;

  min-width:
    0;

  padding:
    9px 12px;

  color:
    var(--vp-text);

  text-align:
    left;

  border:
    0;

  border-bottom:
    1px solid var(--vp-border);

  background:
    transparent;

  transition:
    background-color
    var(--vp-transition);
}


.ventas-productos-client-row:last-child {
  border-bottom:
    0;
}


.ventas-productos-client-row:hover {
  background:
    var(--vp-surface-hover);
}


/* =========================================================
   CLIENT POSITION
   ========================================================= */

.ventas-productos-client-row__position {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    24px;

  height:
    24px;

  color:
    var(--vp-text-soft);

  border:
    1px solid var(--vp-border);

  border-radius:
    6px;

  background:
    var(--vp-surface-2);

  font-size:
    9px;

  font-weight:
    850;
}


/* =========================================================
   CLIENT IDENTITY
   ========================================================= */

.ventas-productos-client-row__identity {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}


.ventas-productos-client-row__identity strong {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--vp-text-strong);

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-productos-client-row__identity small {
  color:
    var(--vp-text-muted);

  font-size:
    9px;

  font-weight:
    600;
}


/* =========================================================
   CLIENT PERFORMANCE
   ========================================================= */

.ventas-productos-client-row__performance {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  min-width:
    0;
}


.ventas-productos-client-row__values {
  display:
    flex;

  align-items:
    baseline;

  justify-content:
    space-between;

  gap:
    6px;
}


.ventas-productos-client-row__values strong {
  color:
    var(--vp-text-strong);

  font-size:
    10px;

  font-weight:
    850;
}


.ventas-productos-client-row__values small {
  color:
    var(--vp-text-muted);

  font-size:
    8px;

  font-weight:
    700;
}


.ventas-productos-client-row__track {
  display:
    block;

  width:
    100%;

  height:
    4px;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    var(--vp-surface-3);
}


.ventas-productos-client-row__track > span {
  display:
    block;

  height:
    100%;

  border-radius:
    inherit;

  background:
    var(--vp-blue);

  transition:
    width
    220ms
    ease;
}


.ventas-productos-client-row__arrow {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--vp-text-muted);
}


/* =========================================================
   RESPONSIVE · ANALYTICS
   ========================================================= */

@media (
  max-width:
    1320px
) {
  .ventas-productos-kpi-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .ventas-productos-analysis-grid {
    grid-template-columns:
      minmax(
        0,
        1.45fr
      )
      minmax(
        280px,
        0.8fr
      );
  }
}


@media (
  max-width:
    1100px
) {
  .ventas-productos-kpi-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .ventas-productos-analysis-grid {
    grid-template-columns:
      1fr;
  }


  .ventas-productos-analysis-grid__side {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .ventas-productos-chart__bars {
    gap:
      4px;
  }
}


@media (
  max-width:
    760px
) {
  .ventas-productos-kpi-grid {
    grid-template-columns:
      1fr
      1fr;

    gap:
      7px;
  }


  .ventas-productos-kpi {
    min-height:
      102px;

    padding:
      11px;
  }


  .ventas-productos-kpi__value {
    font-size:
      19px;
  }


  .ventas-productos-analysis-grid__side {
    display:
      flex;

    flex-direction:
      column;
  }


  .ventas-productos-panel__head {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .ventas-productos-panel__actions {
    justify-content:
      flex-start;
  }


  .ventas-productos-chart {
    grid-template-columns:
      34px
      minmax(
        600px,
        1fr
      );

    overflow-x:
      auto;

    padding:
      12px;
  }


  .ventas-productos-chart__body {
    min-width:
      600px;
  }


  .ventas-productos-chart__bars {
    min-width:
      600px;
  }


  .ventas-productos-executive-grid {
    grid-template-columns:
      1fr;
  }


  .ventas-productos-client-row {
    grid-template-columns:
      23px
      minmax(
        0,
        1fr
      )
      20px;
  }


  .ventas-productos-client-row__performance {
    grid-column:
      2 /
      4;

    padding-left:
      0;
  }


  .ventas-productos-client-row__arrow {
    grid-column:
      3;

    grid-row:
      1;
  }
}


@media (
  max-width:
    520px
) {
  .ventas-productos-kpi-grid {
    grid-template-columns:
      1fr;
  }


  .ventas-productos-kpi {
    min-height:
      94px;
  }
}


/* =========================================================
   FIN PARTE 2 DE 4
   CONTINÚA EN PARTE 3
   ========================================================= *//* =========================================================
   WIRTZ HUB · DIRECCIÓN EJECUTIVA
   VENTAS POR PRODUCTO

   PARTE 3 DE 4

   CONTIENE:
   - Tabla productos
   - Densidad
   - Paginación
   - Links producto / cliente
   - Estados de meses
   - Responsive tabla
   ========================================================= */


/* =========================================================
   PRODUCTOS
   ========================================================= */

.ventas-productos-products {
  width:
    100%;

  margin:
    0 0 14px;
}


/* =========================================================
   DENSIDAD
   ========================================================= */

.ventas-productos-density {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    2px;

  padding:
    2px;

  border:
    1px solid var(--vp-border);

  border-radius:
    8px;

  background:
    var(--vp-surface-2);
}


.ventas-productos-density__btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  min-height:
    27px;

  padding:
    0 8px;

  color:
    var(--vp-text-muted);

  border:
    0;

  border-radius:
    6px;

  background:
    transparent;

  font-size:
    9px;

  font-weight:
    750;

  white-space:
    nowrap;

  transition:
    color
    var(--vp-transition),
    background-color
    var(--vp-transition);
}


.ventas-productos-density__btn:hover {
  color:
    var(--vp-text);
}


.ventas-productos-density__btn.is-active {
  color:
    var(--vp-text-strong);

  background:
    var(--vp-surface);
}


/* =========================================================
   TABLE SHELL
   ========================================================= */

.ventas-productos-table-shell {
  width:
    100%;

  min-width:
    0;

  background:
    var(--vp-surface);
}


/* =========================================================
   TABLE SCROLL
   ========================================================= */

.ventas-productos-table-scroll {
  width:
    100%;

  max-width:
    100%;

  overflow-x:
    auto;

  overflow-y:
    visible;

  overscroll-behavior-inline:
    contain;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--vp-border-dark)
    var(--vp-surface-2);
}


.ventas-productos-table-scroll::-webkit-scrollbar {
  height:
    8px;
}


.ventas-productos-table-scroll::-webkit-scrollbar-track {
  background:
    var(--vp-surface-2);
}


.ventas-productos-table-scroll::-webkit-scrollbar-thumb {
  border:
    2px solid var(--vp-surface-2);

  border-radius:
    999px;

  background:
    var(--vp-border-dark);
}


/* =========================================================
   TABLE
   ========================================================= */

.ventas-productos-table {
  width:
    100%;

  min-width:
    1180px;

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    auto;

  color:
    var(--vp-text);

  background:
    var(--vp-surface);
}


/* =========================================================
   THEAD
   ========================================================= */

.ventas-productos-table thead {
  position:
    sticky;

  top:
    0;

  z-index:
    8;
}


.ventas-productos-table thead th {
  position:
    sticky;

  top:
    0;

  z-index:
    8;

  height:
    38px;

  padding:
    0 8px;

  color:
    var(--vp-text-soft);

  border-bottom:
    1px solid var(--vp-border-strong);

  border-right:
    1px solid var(--vp-border);

  background:
    var(--vp-surface-2);

  font-size:
    9px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    0.02em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.ventas-productos-table thead th:last-child {
  border-right:
    0;
}


/* =========================================================
   BODY
   ========================================================= */

.ventas-productos-table tbody td {
  height:
    48px;

  padding:
    7px 8px;

  vertical-align:
    middle;

  border-bottom:
    1px solid var(--vp-border);

  border-right:
    1px solid var(--vp-border);

  background:
    var(--vp-surface);

  font-size:
    11px;

  font-weight:
    600;

  transition:
    background-color
    var(--vp-transition);
}


.ventas-productos-table tbody td:last-child {
  border-right:
    0;
}


.ventas-productos-table tbody tr:last-child td {
  border-bottom:
    0;
}


.ventas-productos-table tbody tr:hover td {
  background:
    var(--vp-surface-hover);
}


/* =========================================================
   DENSIDAD COMPACTA
   ========================================================= */

.ventas-productos-products.is-compact
.ventas-productos-table tbody td {
  height:
    42px;

  padding-top:
    5px;

  padding-bottom:
    5px;
}


.ventas-productos-products.is-compact
.ventas-productos-product-link__body strong {
  font-size:
    10px;
}


.ventas-productos-products.is-compact
.ventas-productos-product-link__body small {
  font-size:
    8px;
}


.ventas-productos-products.is-compact
.ventas-productos-client-link {
  font-size:
    9px;
}


.ventas-productos-products.is-normal
.ventas-productos-table tbody td {
  height:
    53px;
}


/* =========================================================
   POSITION
   ========================================================= */

.ventas-productos-table__position {
  width:
    42px;

  min-width:
    42px;

  max-width:
    42px;

  text-align:
    center !important;
}


.ventas-productos-table__position span {
  color:
    var(--vp-text-muted);

  font-size:
    9px;

  font-weight:
    750;
}


/* =========================================================
   SKU
   ========================================================= */

.ventas-productos-table__sku {
  width:
    105px;

  min-width:
    105px;
}


.ventas-productos-sku {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    23px;

  max-width:
    100%;

  padding:
    3px 6px;

  overflow:
    hidden;

  color:
    var(--vp-text-strong);

  border:
    1px solid var(--vp-border);

  border-radius:
    6px;

  background:
    var(--vp-surface-2);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   PRODUCT
   ========================================================= */

.ventas-productos-table__product {
  min-width:
    260px;

  width:
    310px;
}


.ventas-productos-product-link {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  width:
    100%;

  min-width:
    0;

  padding:
    0;

  color:
    inherit;

  text-align:
    left;

  border:
    0;

  background:
    transparent;

  outline:
    none;
}


.ventas-productos-product-link:hover
.ventas-productos-product-link__body strong {
  color:
    var(--vp-blue);
}


.ventas-productos-product-link__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    29px;

  height:
    29px;

  flex:
    0 0 29px;

  color:
    var(--vp-text-soft);

  border:
    1px solid var(--vp-border);

  border-radius:
    7px;

  background:
    var(--vp-surface-2);
}


.ventas-productos-product-link__body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}


.ventas-productos-product-link__body strong {
  display:
    block;

  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--vp-text-strong);

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  transition:
    color
    var(--vp-transition);
}


.ventas-productos-product-link__body small {
  display:
    block;

  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--vp-text-muted);

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   CLIENT
   ========================================================= */

.ventas-productos-table__client {
  min-width:
    175px;

  width:
    190px;
}


.ventas-productos-client-link {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  max-width:
    100%;

  padding:
    4px 6px;

  overflow:
    hidden;

  color:
    var(--vp-text-soft);

  border:
    1px solid transparent;

  border-radius:
    6px;

  background:
    transparent;

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1;

  transition:
    color
    var(--vp-transition),
    background-color
    var(--vp-transition),
    border-color
    var(--vp-transition);
}


.ventas-productos-client-link:hover {
  color:
    var(--vp-text-strong);

  border-color:
    var(--vp-border);

  background:
    var(--vp-surface-2);
}


.ventas-productos-client-link span {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   MONTHS
   ========================================================= */

.ventas-productos-table__month {
  width:
    50px;

  min-width:
    50px;

  text-align:
    center !important;
}


.ventas-productos-table tbody
.ventas-productos-table__month {
  color:
    var(--vp-text-muted);
}


.ventas-productos-table tbody
.ventas-productos-table__month span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    24px;

  min-height:
    22px;

  padding:
    2px 4px;

  border-radius:
    5px;

  font-size:
    9px;

  font-weight:
    700;
}


.ventas-productos-table tbody
.ventas-productos-table__month.has-sales {
  color:
    var(--vp-text-strong);
}


.ventas-productos-table tbody
.ventas-productos-table__month.has-sales span {
  color:
    var(--vp-blue);

  background:
    var(--vp-blue-soft);

  font-weight:
    850;
}


.ventas-productos-table
.ventas-productos-table__month.is-selected {
  color:
    var(--vp-blue) !important;

  background:
    var(--vp-blue-soft) !important;
}


.ventas-productos-table thead
.ventas-productos-table__month.is-selected {
  box-shadow:
    inset
    0
    -2px
    0
    var(--vp-blue);
}


/* =========================================================
   TOTAL
   ========================================================= */

.ventas-productos-table__total {
  width:
    72px;

  min-width:
    72px;

  text-align:
    right !important;
}


.ventas-productos-table__total strong {
  color:
    var(--vp-text-strong);

  font-size:
    11px;

  font-weight:
    900;
}


/* =========================================================
   AVERAGE
   ========================================================= */

.ventas-productos-table__average {
  width:
    78px;

  min-width:
    78px;

  text-align:
    right !important;
}


.ventas-productos-table__average strong {
  color:
    var(--vp-text-soft);

  font-size:
    10px;

  font-weight:
    800;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.ventas-productos-table__actions {
  width:
    48px;

  min-width:
    48px;

  text-align:
    center !important;
}


/* =========================================================
   STICKY COLUMNS
   ========================================================= */

.ventas-productos-table thead
.ventas-productos-table__position,
.ventas-productos-table tbody
.ventas-productos-table__position {
  position:
    sticky;

  left:
    0;

  z-index:
    6;
}


.ventas-productos-table thead
.ventas-productos-table__sku,
.ventas-productos-table tbody
.ventas-productos-table__sku {
  position:
    sticky;

  left:
    42px;

  z-index:
    6;
}


.ventas-productos-table thead
.ventas-productos-table__product,
.ventas-productos-table tbody
.ventas-productos-table__product {
  position:
    sticky;

  left:
    147px;

  z-index:
    6;

  box-shadow:
    1px
    0
    0
    var(--vp-border);
}


.ventas-productos-table thead
.ventas-productos-table__position,
.ventas-productos-table thead
.ventas-productos-table__sku,
.ventas-productos-table thead
.ventas-productos-table__product {
  z-index:
    11;

  background:
    var(--vp-surface-2);
}


.ventas-productos-table tbody
.ventas-productos-table__position,
.ventas-productos-table tbody
.ventas-productos-table__sku,
.ventas-productos-table tbody
.ventas-productos-table__product {
  background:
    var(--vp-surface);
}


.ventas-productos-table tbody tr:hover
.ventas-productos-table__position,
.ventas-productos-table tbody tr:hover
.ventas-productos-table__sku,
.ventas-productos-table tbody tr:hover
.ventas-productos-table__product {
  background:
    var(--vp-surface-hover);
}


/* =========================================================
   PAGINATION
   ========================================================= */

.ventas-productos-pagination {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-height:
    56px;

  padding:
    10px 13px;

  border-top:
    1px solid var(--vp-border);

  background:
    var(--vp-surface);
}


/* =========================================================
   PAGINATION INFO
   ========================================================= */

.ventas-productos-pagination__info {
  display:
    flex;

  align-items:
    baseline;

  gap:
    5px;

  min-width:
    0;
}


.ventas-productos-pagination__info strong {
  color:
    var(--vp-text-strong);

  font-size:
    11px;

  font-weight:
    850;
}


.ventas-productos-pagination__info span {
  color:
    var(--vp-text-muted);

  font-size:
    10px;

  font-weight:
    600;
}


/* =========================================================
   PAGINATION CONTROLS
   ========================================================= */

.ventas-productos-pagination__controls {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;
}


.ventas-productos-pagination__page {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  min-height:
    32px;

  padding:
    0 9px;

  color:
    var(--vp-text-muted);

  border:
    1px solid var(--vp-border);

  border-radius:
    7px;

  background:
    var(--vp-surface-2);

  font-size:
    9px;

  font-weight:
    600;

  white-space:
    nowrap;
}


.ventas-productos-pagination__page small {
  color:
    var(--vp-text-muted);

  font-size:
    9px;
}


.ventas-productos-pagination__page strong {
  color:
    var(--vp-text-strong);

  font-size:
    10px;

  font-weight:
    850;
}


/* =========================================================
   TABLE FOCUS
   ========================================================= */

.ventas-productos-product-link:focus-visible,
.ventas-productos-client-link:focus-visible,
.ventas-productos-density__btn:focus-visible {
  outline:
    2px solid var(--vp-blue);

  outline-offset:
    2px;
}


/* =========================================================
   MOBILE TABLE
   ========================================================= */

@media (
  max-width:
    900px
) {
  .ventas-productos-panel__head {
    gap:
      10px;
  }


  .ventas-productos-products
  .ventas-productos-panel__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .ventas-productos-density {
    margin-left:
      auto;
  }
}


@media (
  max-width:
    760px
) {
  .ventas-productos-products {
    overflow:
      visible;
  }


  .ventas-productos-table-shell {
    padding:
      8px;
  }


  .ventas-productos-table-scroll {
    overflow:
      visible;
  }


  .ventas-productos-table {
    display:
      block;

    min-width:
      0;

    width:
      100%;
  }


  .ventas-productos-table thead {
    display:
      none;
  }


  .ventas-productos-table tbody {
    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      8px;

    width:
      100%;
  }


  .ventas-productos-table tbody tr {
    position:
      relative;

    display:
      grid;

    grid-template-columns:
      62px
      minmax(
        0,
        1fr
      )
      auto;

    gap:
      0;

    width:
      100%;

    overflow:
      hidden;

    border:
      1px solid var(--vp-border-strong);

    border-radius:
      10px;

    background:
      var(--vp-surface);
  }


  .ventas-productos-table tbody tr:hover td {
    background:
      transparent;
  }


  .ventas-productos-table tbody td {
    position:
      static !important;

    width:
      auto !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    height:
      auto !important;

    padding:
      8px;

    border-right:
      0;

    border-bottom:
      1px solid var(--vp-border);

    background:
      transparent !important;

    box-shadow:
      none !important;
  }


  .ventas-productos-table__position {
    grid-column:
      1;

    grid-row:
      1;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    border-right:
      1px solid var(--vp-border) !important;
  }


  .ventas-productos-table__sku {
    grid-column:
      2;

    grid-row:
      1;

    display:
      flex;

    align-items:
      center;
  }


  .ventas-productos-table__product {
    grid-column:
      1 /
      4;

    grid-row:
      2;
  }


  .ventas-productos-table__client {
    grid-column:
      1 /
      4;
  }


  .ventas-productos-table__month {
    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      space-between;

    gap:
      8px;

    min-width:
      0 !important;

    text-align:
      right !important;
  }


  .ventas-productos-table__month::before {
    content:
      "Mes";

    color:
      var(--vp-text-muted);

    font-size:
      9px;

    font-weight:
      700;
  }


  .ventas-productos-table__month.is-selected::before {
    content:
      "Mes seleccionado";
  }


  .ventas-productos-table__month:not(
    .is-selected
  ) {
    display:
      none;
  }


  .ventas-productos-table__total {
    grid-column:
      1 /
      3;

    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    text-align:
      right !important;
  }


  .ventas-productos-table__total::before {
    content:
      "Total vendido";

    color:
      var(--vp-text-muted);

    font-size:
      9px;

    font-weight:
      700;
  }


  .ventas-productos-table__average {
    grid-column:
      1 /
      3;

    display:
      flex;

    align-items:
      center;

    justify-content:
      space-between;

    text-align:
      right !important;
  }


  .ventas-productos-table__average::before {
    content:
      "Promedio mensual";

    color:
      var(--vp-text-muted);

    font-size:
      9px;

    font-weight:
      700;
  }


  .ventas-productos-table__actions {
    position:
      absolute !important;

    top:
      7px;

    right:
      7px;

    z-index:
      4;

    padding:
      0 !important;

    border:
      0 !important;
  }


  .ventas-productos-product-link__body strong {
    white-space:
      normal;
  }


  .ventas-productos-product-link__body small {
    white-space:
      normal;
  }


  .ventas-productos-pagination {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .ventas-productos-pagination__controls {
    justify-content:
      center;
  }


  .ventas-productos-pagination__info {
    justify-content:
      center;
  }
}


@media (
  max-width:
    480px
) {
  .ventas-productos-density__btn span {
    display:
      none;
  }


  .ventas-productos-density__btn {
    width:
      29px;

    padding:
      0;
  }


  .ventas-productos-pagination__page small {
    display:
      none;
  }
}


/* =========================================================
   FIN PARTE 3 DE 4
   CONTINÚA EN PARTE 4
   ========================================================= *//* =========================================================
   WIRTZ HUB · DIRECCIÓN EJECUTIVA
   VENTAS POR PRODUCTO

   PARTE 4 DE 4

   CONTIENE:
   - Drawer
   - Drawer responsive
   - Overlay
   - Estados internos
   - Dark mode adicional
   - Correcciones finales
   - Accesibilidad
   ========================================================= */


/* =========================================================
   BODY DRAWER OPEN
   ========================================================= */

body.ventas-productos-drawer-open {
  overflow:
    hidden;
}


/* =========================================================
   DRAWER PORTAL
   ========================================================= */

.ventas-productos-drawer-portal {
  position:
    fixed;

  inset:
    0;

  z-index:
    30000;

  display:
    none;

  pointer-events:
    none;
}


.ventas-productos-drawer-portal.is-open {
  display:
    block;

  pointer-events:
    auto;
}


/* =========================================================
   DRAWER BACKDROP
   ========================================================= */

.ventas-productos-drawer-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    1;

  background:
    rgba(
      0,
      0,
      0,
      0.5
    );

  backdrop-filter:
    blur(
      2px
    );

  -webkit-backdrop-filter:
    blur(
      2px
    );

  animation:
    ventasProductosFadeIn
    140ms
    ease;
}


/* =========================================================
   DRAWER
   ========================================================= */

.ventas-productos-drawer {
  position:
    fixed;

  top:
    10px;

  right:
    10px;

  bottom:
    10px;

  z-index:
    2;

  display:
    flex;

  flex-direction:
    column;

  width:
    min(
      540px,
      calc(
        100vw -
        20px
      )
    );

  max-width:
    100%;

  color:
    var(--vp-text);

  border:
    1px solid var(--vp-border-strong);

  border-radius:
    14px;

  background:
    var(--vp-surface);

  box-shadow:
    0 18px 50px rgba(
      0,
      0,
      0,
      0.2
    );

  overflow:
    hidden;

  transform:
    translateX(
      16px
    );

  opacity:
    0;

  animation:
    ventasProductosDrawerIn
    170ms
    ease
    forwards;
}


@keyframes ventasProductosDrawerIn {
  from {
    opacity:
      0;

    transform:
      translateX(
        18px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateX(
        0
      );
  }
}


/* =========================================================
   DRAWER DARK
   ========================================================= */

html[data-theme="dark"]
.ventas-productos-drawer,
body.dark
.ventas-productos-drawer,
body[data-theme="dark"]
.ventas-productos-drawer {
  --vp-bg:
    #050505;

  --vp-surface:
    #0b0b0c;

  --vp-surface-2:
    #101012;

  --vp-surface-3:
    #151517;

  --vp-surface-hover:
    #18181b;

  --vp-text:
    #f4f4f5;

  --vp-text-strong:
    #ffffff;

  --vp-text-soft:
    #c6c7cb;

  --vp-text-muted:
    #92949a;

  --vp-border:
    #27272a;

  --vp-border-strong:
    #343438;

  --vp-border-dark:
    #45454b;

  --vp-blue:
    #60a5fa;

  --vp-blue-soft:
    #0c1d34;

  --vp-green:
    #4ade80;

  --vp-green-soft:
    #0a2114;

  --vp-amber:
    #fbbf24;

  --vp-amber-soft:
    #261b08;

  --vp-violet:
    #a78bfa;

  --vp-violet-soft:
    #1d1533;

  --vp-red:
    #fb7185;

  --vp-red-soft:
    #2a0c14;

  --vp-cyan:
    #2dd4bf;

  --vp-cyan-soft:
    #082421;

  box-shadow:
    none;
}


/* =========================================================
   DRAWER HEAD
   ========================================================= */

.ventas-productos-drawer__head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;

  min-height:
    74px;

  padding:
    14px;

  border-bottom:
    1px solid var(--vp-border-strong);

  background:
    var(--vp-surface);
}


.ventas-productos-drawer__identity {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  min-width:
    0;

  flex:
    1 1 auto;
}


.ventas-productos-drawer__product-icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    37px;

  height:
    37px;

  flex:
    0 0 37px;

  color:
    var(--vp-text-strong);

  border:
    1px solid var(--vp-border-strong);

  border-radius:
    9px;

  background:
    var(--vp-surface-2);
}


.ventas-productos-drawer__head > div,
.ventas-productos-drawer__identity > div {
  min-width:
    0;
}


.ventas-productos-drawer__head h2 {
  margin:
    0;

  overflow:
    hidden;

  color:
    var(--vp-text-strong);

  font-size:
    17px;

  font-weight:
    850;

  letter-spacing:
    -0.02em;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-productos-drawer__head p {
  margin:
    3px 0 0;

  color:
    var(--vp-text-muted);

  font-size:
    10px;

  font-weight:
    650;

  line-height:
    1.3;
}


/* =========================================================
   DRAWER BODY
   ========================================================= */

.ventas-productos-drawer__body {
  flex:
    1 1 auto;

  min-height:
    0;

  padding:
    13px;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--vp-border-dark)
    var(--vp-surface-2);

  background:
    var(--vp-bg);
}


.ventas-productos-drawer__body::-webkit-scrollbar {
  width:
    7px;
}


.ventas-productos-drawer__body::-webkit-scrollbar-track {
  background:
    var(--vp-surface-2);
}


.ventas-productos-drawer__body::-webkit-scrollbar-thumb {
  border:
    2px solid var(--vp-surface-2);

  border-radius:
    999px;

  background:
    var(--vp-border-dark);
}


/* =========================================================
   DRAWER META
   ========================================================= */

.ventas-productos-drawer-meta {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px;

  margin:
    0 0 10px;
}


.ventas-productos-drawer-meta article {
  min-width:
    0;

  padding:
    9px 10px;

  border:
    1px solid var(--vp-border);

  border-radius:
    8px;

  background:
    var(--vp-surface);
}


.ventas-productos-drawer-meta article span {
  display:
    block;

  margin:
    0 0 3px;

  color:
    var(--vp-text-muted);

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1.2;
}


.ventas-productos-drawer-meta article strong {
  display:
    block;

  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--vp-text-strong);

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   DRAWER KPIS
   ========================================================= */

.ventas-productos-drawer-kpis {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px;

  margin:
    0 0 10px;
}


.ventas-productos-drawer-kpis article {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  min-width:
    0;

  min-height:
    88px;

  padding:
    10px;

  border:
    1px solid var(--vp-border-strong);

  border-radius:
    9px;

  background:
    var(--vp-surface);
}


.ventas-productos-drawer-kpis article span {
  display:
    block;

  color:
    var(--vp-text-muted);

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1.2;
}


.ventas-productos-drawer-kpis article strong {
  display:
    block;

  margin:
    7px 0 3px;

  overflow:
    hidden;

  color:
    var(--vp-text-strong);

  font-size:
    17px;

  font-weight:
    850;

  letter-spacing:
    -0.025em;

  line-height:
    1.1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-productos-drawer-kpis article small {
  display:
    block;

  color:
    var(--vp-text-soft);

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.2;
}


/* =========================================================
   DRAWER SECTION
   ========================================================= */

.ventas-productos-drawer-section {
  margin:
    0 0 10px;

  border:
    1px solid var(--vp-border-strong);

  border-radius:
    10px;

  background:
    var(--vp-surface);

  overflow:
    hidden;
}


.ventas-productos-drawer-section:last-child {
  margin-bottom:
    0;
}


.ventas-productos-drawer-section__head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  min-height:
    52px;

  padding:
    10px 11px;

  border-bottom:
    1px solid var(--vp-border);
}


.ventas-productos-drawer-section__head h3 {
  margin:
    0;

  color:
    var(--vp-text-strong);

  font-size:
    12px;

  font-weight:
    850;

  line-height:
    1.25;
}


/* =========================================================
   DRAWER MONTHS
   ========================================================= */

.ventas-productos-drawer-months {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    0;
}


.ventas-productos-drawer-month {
  min-width:
    0;

  padding:
    9px 10px;

  border-right:
    1px solid var(--vp-border);

  border-bottom:
    1px solid var(--vp-border);

  background:
    var(--vp-surface);
}


.ventas-productos-drawer-month:nth-child(
  2n
) {
  border-right:
    0;
}


.ventas-productos-drawer-month:nth-last-child(
  -n + 2
) {
  border-bottom:
    0;
}


.ventas-productos-drawer-month__top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;
}


.ventas-productos-drawer-month__top span {
  color:
    var(--vp-text-soft);

  font-size:
    10px;

  font-weight:
    700;
}


.ventas-productos-drawer-month__top strong {
  color:
    var(--vp-text-strong);

  font-size:
    10px;

  font-weight:
    850;
}


/* =========================================================
   DRAWER TRACK COMMON
   ========================================================= */

.ventas-productos-drawer-month__track,
.ventas-productos-drawer-channel__track,
.ventas-productos-drawer-client__track {
  display:
    block;

  width:
    100%;

  height:
    5px;

  margin-top:
    7px;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    var(--vp-surface-3);
}


.ventas-productos-drawer-month__track > span,
.ventas-productos-drawer-channel__track > span,
.ventas-productos-drawer-client__track > span {
  display:
    block;

  height:
    100%;

  border-radius:
    inherit;

  background:
    var(--vp-blue);

  transition:
    width
    220ms
    ease;
}


/* =========================================================
   DRAWER CHANNELS
   ========================================================= */

.ventas-productos-drawer-channels {
  display:
    flex;

  flex-direction:
    column;
}


.ventas-productos-drawer-channel {
  padding:
    10px 11px;

  border-bottom:
    1px solid var(--vp-border);
}


.ventas-productos-drawer-channel:last-child {
  border-bottom:
    0;
}


.ventas-productos-drawer-channel__top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.ventas-productos-drawer-channel__identity {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;
}


.ventas-productos-drawer-channel__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    28px;

  height:
    28px;

  flex:
    0 0 28px;

  color:
    var(--vp-text-soft);

  border:
    1px solid var(--vp-border);

  border-radius:
    7px;

  background:
    var(--vp-surface-2);
}


.ventas-productos-drawer-channel__identity > span:last-child {
  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;

  min-width:
    0;
}


.ventas-productos-drawer-channel__identity strong {
  color:
    var(--vp-text-strong);

  font-size:
    10px;

  font-weight:
    800;
}


.ventas-productos-drawer-channel__identity small {
  color:
    var(--vp-text-muted);

  font-size:
    8px;

  font-weight:
    650;
}


.ventas-productos-drawer-channel__top > strong {
  color:
    var(--vp-text-strong);

  font-size:
    11px;

  font-weight:
    850;
}


/* =========================================================
   DRAWER CLIENTS
   ========================================================= */

.ventas-productos-drawer-clients {
  display:
    flex;

  flex-direction:
    column;
}


.ventas-productos-drawer-client {
  padding:
    10px 11px;

  border-bottom:
    1px solid var(--vp-border);
}


.ventas-productos-drawer-client:last-child {
  border-bottom:
    0;
}


.ventas-productos-drawer-client__top {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;
}


.ventas-productos-drawer-client__top > div:first-child {
  min-width:
    0;

  flex:
    1 1 auto;
}


.ventas-productos-drawer-client__top > div:first-child strong {
  display:
    block;

  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--vp-text-strong);

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-productos-drawer-client__top > div:first-child small {
  display:
    block;

  margin-top:
    2px;

  color:
    var(--vp-text-muted);

  font-size:
    8px;

  font-weight:
    650;
}


.ventas-productos-drawer-client__value {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    1px;

  flex:
    0 0 auto;
}


.ventas-productos-drawer-client__value strong {
  color:
    var(--vp-text-strong);

  font-size:
    11px;

  font-weight:
    850;
}


.ventas-productos-drawer-client__value small {
  color:
    var(--vp-text-muted);

  font-size:
    8px;

  font-weight:
    650;
}


/* =========================================================
   DRAWER LOADING / ERROR
   ========================================================= */

.ventas-productos-drawer
.ventas-productos-state {
  min-height:
    220px;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;
}


/* =========================================================
   GLOBAL BODY SAFETY
   ========================================================= */

body.ventas-productos-drawer-open
.app-shell {
  isolation:
    auto;
}


/* =========================================================
   DARK MODE · TABLA
   ========================================================= */

html[data-theme="dark"]
.ventas-productos-table-scroll,
body.dark
.ventas-productos-table-scroll,
body[data-theme="dark"]
.ventas-productos-table-scroll {
  scrollbar-color:
    #45454b
    #101012;
}


html[data-theme="dark"]
.ventas-productos-table thead th,
body.dark
.ventas-productos-table thead th,
body[data-theme="dark"]
.ventas-productos-table thead th {
  background:
    #101012;
}


html[data-theme="dark"]
.ventas-productos-table tbody td,
body.dark
.ventas-productos-table tbody td,
body[data-theme="dark"]
.ventas-productos-table tbody td {
  background:
    #0b0b0c;
}


html[data-theme="dark"]
.ventas-productos-table tbody tr:hover td,
body.dark
.ventas-productos-table tbody tr:hover td,
body[data-theme="dark"]
.ventas-productos-table tbody tr:hover td {
  background:
    #151517;
}


html[data-theme="dark"]
.ventas-productos-table tbody
.ventas-productos-table__position,
html[data-theme="dark"]
.ventas-productos-table tbody
.ventas-productos-table__sku,
html[data-theme="dark"]
.ventas-productos-table tbody
.ventas-productos-table__product,
body.dark
.ventas-productos-table tbody
.ventas-productos-table__position,
body.dark
.ventas-productos-table tbody
.ventas-productos-table__sku,
body.dark
.ventas-productos-table tbody
.ventas-productos-table__product,
body[data-theme="dark"]
.ventas-productos-table tbody
.ventas-productos-table__position,
body[data-theme="dark"]
.ventas-productos-table tbody
.ventas-productos-table__sku,
body[data-theme="dark"]
.ventas-productos-table tbody
.ventas-productos-table__product {
  background:
    #0b0b0c;
}


html[data-theme="dark"]
.ventas-productos-table tbody tr:hover
.ventas-productos-table__position,
html[data-theme="dark"]
.ventas-productos-table tbody tr:hover
.ventas-productos-table__sku,
html[data-theme="dark"]
.ventas-productos-table tbody tr:hover
.ventas-productos-table__product,
body.dark
.ventas-productos-table tbody tr:hover
.ventas-productos-table__position,
body.dark
.ventas-productos-table tbody tr:hover
.ventas-productos-table__sku,
body.dark
.ventas-productos-table tbody tr:hover
.ventas-productos-table__product,
body[data-theme="dark"]
.ventas-productos-table tbody tr:hover
.ventas-productos-table__position,
body[data-theme="dark"]
.ventas-productos-table tbody tr:hover
.ventas-productos-table__sku,
body[data-theme="dark"]
.ventas-productos-table tbody tr:hover
.ventas-productos-table__product {
  background:
    #151517;
}


/* =========================================================
   DARK MODE · INPUTS
   ========================================================= */

html[data-theme="dark"]
.ventas-productos-control select,
html[data-theme="dark"]
.ventas-productos-control input,
body.dark
.ventas-productos-control select,
body.dark
.ventas-productos-control input,
body[data-theme="dark"]
.ventas-productos-control select,
body[data-theme="dark"]
.ventas-productos-control input {
  color-scheme:
    dark;
}


/* =========================================================
   DARK MODE · OVERLAY
   ========================================================= */

html[data-theme="dark"]
.ventas-productos-drawer-backdrop,
body.dark
.ventas-productos-drawer-backdrop,
body[data-theme="dark"]
.ventas-productos-drawer-backdrop {
  background:
    rgba(
      0,
      0,
      0,
      0.74
    );
}


/* =========================================================
   RESPONSIVE DRAWER
   ========================================================= */

@media (
  max-width:
    760px
) {
  .ventas-productos-drawer {
    top:
      6px;

    right:
      6px;

    bottom:
      6px;

    left:
      6px;

    width:
      auto;

    max-width:
      none;

    border-radius:
      12px;
  }


  .ventas-productos-drawer__head {
    min-height:
      68px;

    padding:
      11px;
  }


  .ventas-productos-drawer__head h2 {
    font-size:
      15px;

    white-space:
      normal;
  }


  .ventas-productos-drawer__body {
    padding:
      9px;
  }


  .ventas-productos-drawer-meta {
    grid-template-columns:
      1fr
      1fr;
  }


  .ventas-productos-drawer-kpis {
    grid-template-columns:
      1fr;
  }


  .ventas-productos-drawer-kpis article {
    min-height:
      72px;
  }


  .ventas-productos-drawer-months {
    grid-template-columns:
      1fr;
  }


  .ventas-productos-drawer-month {
    border-right:
      0;

    border-bottom:
      1px solid var(--vp-border) !important;
  }


  .ventas-productos-drawer-month:last-child {
    border-bottom:
      0 !important;
  }
}


@media (
  max-width:
    480px
) {
  .ventas-productos-drawer-meta {
    grid-template-columns:
      1fr;
  }


  .ventas-productos-drawer__product-icon {
    width:
      32px;

    height:
      32px;

    flex-basis:
      32px;
  }


  .ventas-productos-drawer-client__top {
    gap:
      8px;
  }
}


/* =========================================================
   RESPONSIVE GENERAL FINAL
   ========================================================= */

@media (
  max-width:
    640px
) {
  .ventas-productos-head-stat {
    padding:
      8px;
  }


  .ventas-productos-head-stat__icon {
    width:
      27px;

    height:
      27px;

    flex-basis:
      27px;
  }


  .ventas-productos-head-stat strong {
    font-size:
      11px;
  }


  .ventas-productos-panel__head {
    min-height:
      0;

    padding:
      11px;
  }


  .ventas-productos-panel__head h2 {
    font-size:
      14px;
  }


  .ventas-productos-panel__head p {
    font-size:
      10px;
  }


  .ventas-productos-filters__head {
    min-height:
      48px;

    padding:
      8px 10px;
  }


  .ventas-productos-filter-grid {
    padding:
      10px;
  }


  .ventas-productos-control {
    min-height:
      35px;
  }


  .ventas-productos-control select,
  .ventas-productos-control input {
    min-height:
      33px;

    font-size:
      11px;
  }
}


/* =========================================================
   FOCUS VISIBLE GLOBAL
   ========================================================= */

.ventas-productos-page button:focus-visible,
.ventas-productos-page input:focus-visible,
.ventas-productos-page select:focus-visible,
.ventas-productos-drawer button:focus-visible {
  outline:
    2px solid var(--vp-blue);

  outline-offset:
    2px;
}


/* =========================================================
   SELECCIÓN
   ========================================================= */

.ventas-productos-page ::selection,
.ventas-productos-drawer ::selection {
  color:
    #ffffff;

  background:
    var(--vp-blue);
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  .ventas-productos-page *,
  .ventas-productos-page *::before,
  .ventas-productos-page *::after,
  .ventas-productos-drawer *,
  .ventas-productos-drawer *::before,
  .ventas-productos-drawer *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {
  .ventas-productos-head__actions,
  .ventas-productos-filters,
  .ventas-productos-pagination,
  .ventas-productos-density,
  .ventas-productos-table__actions,
  .ventas-productos-toast,
  .ventas-productos-drawer-portal {
    display:
      none !important;
  }


  .ventas-productos-page {
    padding:
      0;

    color:
      #000000;

    background:
      #ffffff;
  }


  .ventas-productos-head,
  .ventas-productos-panel,
  .ventas-productos-kpi {
    break-inside:
      avoid;

    box-shadow:
      none;
  }


  .ventas-productos-table-scroll {
    overflow:
      visible;
  }


  .ventas-productos-table {
    min-width:
      0;

    font-size:
      8px;
  }
}


/* =========================================================
   FIN
   frontend/src/pages/direccion-ejecutiva/ventas-productos/
   ventas-productos.css
   ========================================================= *//* =========================================================
   FIX DRAWER · CONTRASTE / OPACIDAD / TIPOGRAFÍA
   AGREGAR AL FINAL DE:
   frontend/src/pages/direccion-ejecutiva/ventas-productos/
   ventas-productos.css
   ========================================================= */


/* =========================================================
   VARIABLES ESPECÍFICAS DEL DRAWER
   ========================================================= */

.ventas-productos-drawer-portal {
  --vp-drawer-bg:
    #ffffff;

  --vp-drawer-bg-soft:
    #f7f8fa;

  --vp-drawer-bg-strong:
    #eef1f4;

  --vp-drawer-text:
    #0a0b0d;

  --vp-drawer-text-soft:
    #2f343b;

  --vp-drawer-text-muted:
    #535b66;

  --vp-drawer-border:
    #c8ced6;

  --vp-drawer-border-strong:
    #aeb6c1;
}


/* =========================================================
   BACKDROP
   ========================================================= */

.ventas-productos-drawer-backdrop {
  background:
    rgba(
      0,
      0,
      0,
      0.58
    ) !important;

  backdrop-filter:
    blur(1px) !important;

  -webkit-backdrop-filter:
    blur(1px) !important;
}


/* =========================================================
   DRAWER TOTALMENTE OPACO
   ========================================================= */

.ventas-productos-drawer {
  opacity:
    1 !important;

  background:
    #ffffff !important;

  color:
    var(--vp-drawer-text) !important;

  border:
    1px solid
    var(--vp-drawer-border-strong) !important;

  box-shadow:
    0
    18px
    45px
    rgba(
      0,
      0,
      0,
      0.26
    ) !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.ventas-productos-drawer__head {
  background:
    #ffffff !important;

  border-bottom:
    1px solid
    var(--vp-drawer-border-strong) !important;
}


.ventas-productos-drawer__head h2 {
  color:
    #050608 !important;

  font-size:
    19px !important;

  font-weight:
    900 !important;

  letter-spacing:
    -0.025em !important;

  line-height:
    1.2 !important;
}


.ventas-productos-drawer__head p {
  color:
    #303640 !important;

  font-size:
    12px !important;

  font-weight:
    750 !important;

  line-height:
    1.35 !important;
}


.ventas-productos-drawer
.ventas-productos-section-kicker {
  color:
    #343a43 !important;

  font-size:
    10px !important;

  font-weight:
    900 !important;

  letter-spacing:
    0.08em !important;
}


/* =========================================================
   DRAWER BODY
   ========================================================= */

.ventas-productos-drawer__body {
  background:
    #f5f6f8 !important;

  color:
    #08090b !important;
}


/* =========================================================
   ICONO PRODUCTO
   ========================================================= */

.ventas-productos-drawer__product-icon {
  color:
    #111317 !important;

  border-color:
    #bfc6cf !important;

  background:
    #f0f2f5 !important;
}


/* =========================================================
   META
   ========================================================= */

.ventas-productos-drawer-meta article {
  background:
    #ffffff !important;

  border-color:
    #c6ccd5 !important;
}


.ventas-productos-drawer-meta article span {
  color:
    #454c57 !important;

  font-size:
    11px !important;

  font-weight:
    750 !important;
}


.ventas-productos-drawer-meta article strong {
  color:
    #090a0c !important;

  font-size:
    13px !important;

  font-weight:
    900 !important;

  line-height:
    1.35 !important;
}


/* =========================================================
   KPIs DRAWER
   ========================================================= */

.ventas-productos-drawer-kpis article {
  min-height:
    96px !important;

  padding:
    12px !important;

  background:
    #ffffff !important;

  border-color:
    #bdc4cd !important;
}


.ventas-productos-drawer-kpis article span {
  color:
    #454c56 !important;

  font-size:
    11px !important;

  font-weight:
    800 !important;
}


.ventas-productos-drawer-kpis article strong {
  margin:
    8px 0 4px !important;

  color:
    #050608 !important;

  font-size:
    21px !important;

  font-weight:
    900 !important;

  letter-spacing:
    -0.03em !important;
}


.ventas-productos-drawer-kpis article small {
  color:
    #3e454f !important;

  font-size:
    10px !important;

  font-weight:
    700 !important;
}


/* =========================================================
   SECCIONES
   ========================================================= */

.ventas-productos-drawer-section {
  background:
    #ffffff !important;

  border-color:
    #bfc6cf !important;
}


.ventas-productos-drawer-section__head {
  min-height:
    56px !important;

  background:
    #ffffff !important;

  border-bottom-color:
    #c5cbd3 !important;
}


.ventas-productos-drawer-section__head h3 {
  color:
    #050608 !important;

  font-size:
    14px !important;

  font-weight:
    900 !important;
}


/* =========================================================
   MESES
   ========================================================= */

.ventas-productos-drawer-month {
  background:
    #ffffff !important;

  border-color:
    #d0d5dc !important;
}


.ventas-productos-drawer-month__top span {
  color:
    #343a44 !important;

  font-size:
    11px !important;

  font-weight:
    800 !important;
}


.ventas-productos-drawer-month__top strong {
  color:
    #050608 !important;

  font-size:
    12px !important;

  font-weight:
    900 !important;
}


.ventas-productos-drawer-month__track {
  height:
    6px !important;

  background:
    #e5e8ec !important;
}


/* =========================================================
   CANALES
   ========================================================= */

.ventas-productos-drawer-channel {
  background:
    #ffffff !important;

  border-bottom-color:
    #d0d5dc !important;
}


.ventas-productos-drawer-channel__icon {
  color:
    #20242a !important;

  border-color:
    #c9ced6 !important;

  background:
    #f4f5f7 !important;
}


.ventas-productos-drawer-channel__identity strong {
  color:
    #050608 !important;

  font-size:
    12px !important;

  font-weight:
    900 !important;
}


.ventas-productos-drawer-channel__identity small {
  color:
    #464d57 !important;

  font-size:
    10px !important;

  font-weight:
    700 !important;
}


.ventas-productos-drawer-channel__top > strong {
  color:
    #050608 !important;

  font-size:
    13px !important;

  font-weight:
    900 !important;
}


.ventas-productos-drawer-channel__track {
  height:
    6px !important;

  background:
    #e4e7eb !important;
}


/* =========================================================
   CLIENTES
   ========================================================= */

.ventas-productos-drawer-client {
  background:
    #ffffff !important;

  border-bottom-color:
    #d0d5dc !important;
}


.ventas-productos-drawer-client__top > div:first-child strong {
  color:
    #050608 !important;

  font-size:
    12px !important;

  font-weight:
    900 !important;
}


.ventas-productos-drawer-client__top > div:first-child small {
  color:
    #444b55 !important;

  font-size:
    10px !important;

  font-weight:
    700 !important;
}


.ventas-productos-drawer-client__value strong {
  color:
    #050608 !important;

  font-size:
    13px !important;

  font-weight:
    900 !important;
}


.ventas-productos-drawer-client__value small {
  color:
    #444b55 !important;

  font-size:
    10px !important;

  font-weight:
    700 !important;
}


.ventas-productos-drawer-client__track {
  height:
    6px !important;

  background:
    #e4e7eb !important;
}


/* =========================================================
   BOTÓN CERRAR
   ========================================================= */

.ventas-productos-drawer
.ventas-productos-icon-btn {
  color:
    #17191d !important;

  border-color:
    #c4cad2 !important;

  background:
    #ffffff !important;
}


.ventas-productos-drawer
.ventas-productos-icon-btn:hover {
  color:
    #000000 !important;

  border-color:
    #969eaa !important;

  background:
    #eef1f4 !important;
}


/* =========================================================
   LOADING / EMPTY
   ========================================================= */

.ventas-productos-drawer
.ventas-productos-state {
  color:
    #111317 !important;

  background:
    transparent !important;
}


.ventas-productos-drawer
.ventas-productos-state strong {
  color:
    #050608 !important;

  font-size:
    15px !important;

  font-weight:
    900 !important;
}


.ventas-productos-drawer
.ventas-productos-state p {
  color:
    #404751 !important;

  font-size:
    12px !important;

  font-weight:
    650 !important;
}


/* =========================================================
   DARK MODE DRAWER
   ========================================================= */

html[data-theme="dark"]
.ventas-productos-drawer,
body.dark
.ventas-productos-drawer,
body[data-theme="dark"]
.ventas-productos-drawer {
  background:
    #090909 !important;

  color:
    #ffffff !important;

  border-color:
    #383838 !important;

  box-shadow:
    0
    18px
    50px
    rgba(
      0,
      0,
      0,
      0.72
    ) !important;
}


html[data-theme="dark"]
.ventas-productos-drawer__head,
body.dark
.ventas-productos-drawer__head,
body[data-theme="dark"]
.ventas-productos-drawer__head {
  background:
    #090909 !important;

  border-bottom-color:
    #343434 !important;
}


html[data-theme="dark"]
.ventas-productos-drawer__body,
body.dark
.ventas-productos-drawer__body,
body[data-theme="dark"]
.ventas-productos-drawer__body {
  background:
    #050505 !important;
}


html[data-theme="dark"]
.ventas-productos-drawer__head h2,
html[data-theme="dark"]
.ventas-productos-drawer-section__head h3,
html[data-theme="dark"]
.ventas-productos-drawer-meta article strong,
html[data-theme="dark"]
.ventas-productos-drawer-kpis article strong,
html[data-theme="dark"]
.ventas-productos-drawer-month__top strong,
html[data-theme="dark"]
.ventas-productos-drawer-channel__identity strong,
html[data-theme="dark"]
.ventas-productos-drawer-channel__top > strong,
html[data-theme="dark"]
.ventas-productos-drawer-client__top > div:first-child strong,
html[data-theme="dark"]
.ventas-productos-drawer-client__value strong,
body.dark
.ventas-productos-drawer__head h2,
body.dark
.ventas-productos-drawer-section__head h3,
body.dark
.ventas-productos-drawer-meta article strong,
body.dark
.ventas-productos-drawer-kpis article strong,
body.dark
.ventas-productos-drawer-month__top strong,
body.dark
.ventas-productos-drawer-channel__identity strong,
body.dark
.ventas-productos-drawer-channel__top > strong,
body.dark
.ventas-productos-drawer-client__top > div:first-child strong,
body.dark
.ventas-productos-drawer-client__value strong,
body[data-theme="dark"]
.ventas-productos-drawer__head h2,
body[data-theme="dark"]
.ventas-productos-drawer-section__head h3,
body[data-theme="dark"]
.ventas-productos-drawer-meta article strong,
body[data-theme="dark"]
.ventas-productos-drawer-kpis article strong,
body[data-theme="dark"]
.ventas-productos-drawer-month__top strong,
body[data-theme="dark"]
.ventas-productos-drawer-channel__identity strong,
body[data-theme="dark"]
.ventas-productos-drawer-channel__top > strong,
body[data-theme="dark"]
.ventas-productos-drawer-client__top > div:first-child strong,
body[data-theme="dark"]
.ventas-productos-drawer-client__value strong {
  color:
    #ffffff !important;
}


html[data-theme="dark"]
.ventas-productos-drawer__head p,
html[data-theme="dark"]
.ventas-productos-drawer
.ventas-productos-section-kicker,
html[data-theme="dark"]
.ventas-productos-drawer-meta article span,
html[data-theme="dark"]
.ventas-productos-drawer-kpis article span,
html[data-theme="dark"]
.ventas-productos-drawer-kpis article small,
html[data-theme="dark"]
.ventas-productos-drawer-month__top span,
html[data-theme="dark"]
.ventas-productos-drawer-channel__identity small,
html[data-theme="dark"]
.ventas-productos-drawer-client__top > div:first-child small,
html[data-theme="dark"]
.ventas-productos-drawer-client__value small,
body.dark
.ventas-productos-drawer__head p,
body.dark
.ventas-productos-drawer
.ventas-productos-section-kicker,
body.dark
.ventas-productos-drawer-meta article span,
body.dark
.ventas-productos-drawer-kpis article span,
body.dark
.ventas-productos-drawer-kpis article small,
body.dark
.ventas-productos-drawer-month__top span,
body.dark
.ventas-productos-drawer-channel__identity small,
body.dark
.ventas-productos-drawer-client__top > div:first-child small,
body.dark
.ventas-productos-drawer-client__value small,
body[data-theme="dark"]
.ventas-productos-drawer__head p,
body[data-theme="dark"]
.ventas-productos-drawer
.ventas-productos-section-kicker,
body[data-theme="dark"]
.ventas-productos-drawer-meta article span,
body[data-theme="dark"]
.ventas-productos-drawer-kpis article span,
body[data-theme="dark"]
.ventas-productos-drawer-kpis article small,
body[data-theme="dark"]
.ventas-productos-drawer-month__top span,
body[data-theme="dark"]
.ventas-productos-drawer-channel__identity small,
body[data-theme="dark"]
.ventas-productos-drawer-client__top > div:first-child small,
body[data-theme="dark"]
.ventas-productos-drawer-client__value small {
  color:
    #c7c7c9 !important;
}


html[data-theme="dark"]
.ventas-productos-drawer-meta article,
html[data-theme="dark"]
.ventas-productos-drawer-kpis article,
html[data-theme="dark"]
.ventas-productos-drawer-section,
html[data-theme="dark"]
.ventas-productos-drawer-month,
html[data-theme="dark"]
.ventas-productos-drawer-channel,
html[data-theme="dark"]
.ventas-productos-drawer-client,
body.dark
.ventas-productos-drawer-meta article,
body.dark
.ventas-productos-drawer-kpis article,
body.dark
.ventas-productos-drawer-section,
body.dark
.ventas-productos-drawer-month,
body.dark
.ventas-productos-drawer-channel,
body.dark
.ventas-productos-drawer-client,
body[data-theme="dark"]
.ventas-productos-drawer-meta article,
body[data-theme="dark"]
.ventas-productos-drawer-kpis article,
body[data-theme="dark"]
.ventas-productos-drawer-section,
body[data-theme="dark"]
.ventas-productos-drawer-month,
body[data-theme="dark"]
.ventas-productos-drawer-channel,
body[data-theme="dark"]
.ventas-productos-drawer-client {
  background:
    #0d0d0e !important;

  border-color:
    #303034 !important;
}


html[data-theme="dark"]
.ventas-productos-drawer__product-icon,
html[data-theme="dark"]
.ventas-productos-drawer-channel__icon,
html[data-theme="dark"]
.ventas-productos-drawer
.ventas-productos-icon-btn,
body.dark
.ventas-productos-drawer__product-icon,
body.dark
.ventas-productos-drawer-channel__icon,
body.dark
.ventas-productos-drawer
.ventas-productos-icon-btn,
body[data-theme="dark"]
.ventas-productos-drawer__product-icon,
body[data-theme="dark"]
.ventas-productos-drawer-channel__icon,
body[data-theme="dark"]
.ventas-productos-drawer
.ventas-productos-icon-btn {
  color:
    #ffffff !important;

  border-color:
    #38383c !important;

  background:
    #151517 !important;
}


/* =========================================================
   TAMAÑO GENERAL TEXTO DRAWER
   ========================================================= */

.ventas-productos-drawer {
  font-size:
    13px !important;

  font-weight:
    600 !important;
}


.ventas-productos-drawer button,
.ventas-productos-drawer span,
.ventas-productos-drawer small,
.ventas-productos-drawer strong,
.ventas-productos-drawer p,
.ventas-productos-drawer h2,
.ventas-productos-drawer h3 {
  text-rendering:
    geometricPrecision;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (
  max-width:
    760px
) {
  .ventas-productos-drawer__head h2 {
    font-size:
      17px !important;
  }


  .ventas-productos-drawer-meta article strong {
    font-size:
      12px !important;
  }


  .ventas-productos-drawer-kpis article strong {
    font-size:
      19px !important;
  }


  .ventas-productos-drawer-section__head h3 {
    font-size:
      13px !important;
  }


  .ventas-productos-drawer-month__top span,
  .ventas-productos-drawer-month__top strong,
  .ventas-productos-drawer-channel__identity strong,
  .ventas-productos-drawer-client__top > div:first-child strong {
    font-size:
      11px !important;
  }
}/* =========================================================
   FIX · BOTÓN ACTUALIZAR · MODO CLARO
   AGREGAR AL FINAL DE:
   frontend/src/pages/direccion-ejecutiva/ventas-productos/
   ventas-productos.css
   ========================================================= */

.ventas-productos-page
.ventas-productos-btn--primary,
.ventas-productos-page
.ventas-productos-btn--primary span,
.ventas-productos-page
.ventas-productos-btn--primary .icon {
  color: #ffffff !important;
}


.ventas-productos-page
.ventas-productos-btn--primary {
  background: #111827 !important;
  border-color: #111827 !important;
  font-weight: 800 !important;
}


.ventas-productos-page
.ventas-productos-btn--primary:hover:not(:disabled) {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}


.ventas-productos-page
.ventas-productos-btn--primary:hover:not(:disabled) span,
.ventas-productos-page
.ventas-productos-btn--primary:hover:not(:disabled) .icon {
  color: #ffffff !important;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"]
.ventas-productos-page
.ventas-productos-btn--primary,
body.dark
.ventas-productos-page
.ventas-productos-btn--primary,
body[data-theme="dark"]
.ventas-productos-page
.ventas-productos-btn--primary {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #050505 !important;
}


html[data-theme="dark"]
.ventas-productos-page
.ventas-productos-btn--primary span,
html[data-theme="dark"]
.ventas-productos-page
.ventas-productos-btn--primary .icon,
body.dark
.ventas-productos-page
.ventas-productos-btn--primary span,
body.dark
.ventas-productos-page
.ventas-productos-btn--primary .icon,
body[data-theme="dark"]
.ventas-productos-page
.ventas-productos-btn--primary span,
body[data-theme="dark"]
.ventas-productos-page
.ventas-productos-btn--primary .icon {
  color: #050505 !important;
}/* =========================================================
   FIX GENERAL · TIPOGRAFÍA MÁS GRANDE Y FIRME
   AGREGAR AL FINAL DE:
   frontend/src/pages/direccion-ejecutiva/ventas-productos/
   ventas-productos.css
   ========================================================= */


/* =========================================================
   BASE GENERAL
   ========================================================= */

.ventas-productos-page {
  font-size: 15px !important;
  font-weight: 600 !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.ventas-productos-brand__eyebrow > span:first-child {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: var(--vp-text-soft) !important;
}


.ventas-productos-brand__body h1 {
  font-size: 30px !important;
  font-weight: 900 !important;
  color: var(--vp-text-strong) !important;
}


.ventas-productos-brand__body p {
  font-size: 14px !important;
  font-weight: 650 !important;
  color: var(--vp-text-soft) !important;
}


/* =========================================================
   BOTONES
   ========================================================= */

.ventas-productos-btn {
  min-height: 38px !important;
  padding: 0 13px !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}


.ventas-productos-icon-btn {
  width: 36px !important;
  height: 36px !important;
}


/* =========================================================
   META HEADER
   ========================================================= */

.ventas-productos-head-stat small {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--vp-text-soft) !important;
}


.ventas-productos-head-stat strong {
  font-size: 13px !important;
  font-weight: 900 !important;
  color: var(--vp-text-strong) !important;
}


/* =========================================================
   BADGES
   ========================================================= */

.ventas-productos-badge {
  min-height: 26px !important;
  padding: 4px 9px !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}


/* =========================================================
   KICKERS
   ========================================================= */

.ventas-productos-section-kicker {
  font-size: 10px !important;
  font-weight: 900 !important;
  color: var(--vp-text-soft) !important;
}


/* =========================================================
   FILTROS
   ========================================================= */

.ventas-productos-filters__title strong {
  font-size: 14px !important;
  font-weight: 900 !important;
}


.ventas-productos-filters__title small {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--vp-text-soft) !important;
}


.ventas-productos-field__label {
  font-size: 11px !important;
  font-weight: 850 !important;
  color: var(--vp-text-soft) !important;
}


.ventas-productos-control select,
.ventas-productos-control input {
  min-height: 36px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--vp-text-strong) !important;
}


/* =========================================================
   KPIS
   ========================================================= */

.ventas-productos-kpi__head {
  font-size: 11px !important;
  font-weight: 850 !important;
  color: var(--vp-text-soft) !important;
}


.ventas-productos-kpi__value {
  font-size: 25px !important;
  font-weight: 900 !important;
  color: var(--vp-text-strong) !important;
}


.ventas-productos-kpi__helper {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--vp-text-soft) !important;
}


/* =========================================================
   PANELES
   ========================================================= */

.ventas-productos-panel__head h2,
.ventas-productos-panel__head h3 {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: var(--vp-text-strong) !important;
}


.ventas-productos-panel__head p {
  font-size: 12px !important;
  font-weight: 650 !important;
  color: var(--vp-text-soft) !important;
}


/* =========================================================
   GRÁFICO
   ========================================================= */

.ventas-productos-chart__scale span {
  font-size: 10px !important;
  font-weight: 750 !important;
  color: var(--vp-text-soft) !important;
}


.ventas-productos-chart-bar__value {
  font-size: 9px !important;
  font-weight: 850 !important;
  color: var(--vp-text-strong) !important;
}


.ventas-productos-chart-bar__label {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--vp-text-soft) !important;
}


/* =========================================================
   RESUMEN EJECUTIVO
   ========================================================= */

.ventas-productos-leader-product__body small {
  font-size: 10px !important;
  font-weight: 850 !important;
}


.ventas-productos-leader-product__body strong {
  font-size: 13px !important;
  font-weight: 900 !important;
}


.ventas-productos-leader-product__body span {
  font-size: 11px !important;
  font-weight: 700 !important;
}


.ventas-productos-executive-grid small {
  font-size: 10px !important;
  font-weight: 800 !important;
}


.ventas-productos-executive-grid strong {
  font-size: 13px !important;
  font-weight: 900 !important;
}


.ventas-productos-executive-grid span:not(
  .ventas-productos-executive-grid__icon
) {
  font-size: 10px !important;
  font-weight: 700 !important;
}


/* =========================================================
   CLIENTES
   ========================================================= */

.ventas-productos-client-row__position {
  font-size: 10px !important;
  font-weight: 900 !important;
}


.ventas-productos-client-row__identity strong {
  font-size: 12px !important;
  font-weight: 900 !important;
}


.ventas-productos-client-row__identity small {
  font-size: 10px !important;
  font-weight: 700 !important;
}


.ventas-productos-client-row__values strong {
  font-size: 12px !important;
  font-weight: 900 !important;
}


.ventas-productos-client-row__values small {
  font-size: 9px !important;
  font-weight: 800 !important;
}


/* =========================================================
   TABLA · HEADER
   ========================================================= */

.ventas-productos-table thead th {
  height: 42px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  color: var(--vp-text-strong) !important;
}


/* =========================================================
   TABLA · CUERPO
   ========================================================= */

.ventas-productos-table tbody td {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--vp-text) !important;
}


.ventas-productos-products.is-compact
.ventas-productos-table tbody td {
  height: 46px !important;
}


.ventas-productos-products.is-normal
.ventas-productos-table tbody td {
  height: 56px !important;
}


/* =========================================================
   SKU
   ========================================================= */

.ventas-productos-sku {
  font-size: 10px !important;
  font-weight: 850 !important;
}


/* =========================================================
   PRODUCTO
   ========================================================= */

.ventas-productos-product-link__body strong {
  font-size: 12px !important;
  font-weight: 900 !important;
  color: var(--vp-text-strong) !important;
}


.ventas-productos-product-link__body small {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--vp-text-soft) !important;
}


/* =========================================================
   CLIENTE TABLA
   ========================================================= */

.ventas-productos-client-link {
  font-size: 11px !important;
  font-weight: 800 !important;
}


/* =========================================================
   MESES TABLA
   ========================================================= */

.ventas-productos-table tbody
.ventas-productos-table__month span {
  min-width: 27px !important;
  min-height: 24px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}


.ventas-productos-table tbody
.ventas-productos-table__month.has-sales span {
  font-weight: 900 !important;
}


/* =========================================================
   TOTAL Y PROMEDIO
   ========================================================= */

.ventas-productos-table__total strong {
  font-size: 12px !important;
  font-weight: 900 !important;
}


.ventas-productos-table__average strong {
  font-size: 11px !important;
  font-weight: 850 !important;
}


/* =========================================================
   PAGINACIÓN
   ========================================================= */

.ventas-productos-pagination__info strong {
  font-size: 12px !important;
  font-weight: 900 !important;
}


.ventas-productos-pagination__info span {
  font-size: 11px !important;
  font-weight: 700 !important;
}


.ventas-productos-pagination__page {
  font-size: 10px !important;
  font-weight: 700 !important;
}


.ventas-productos-pagination__page strong {
  font-size: 11px !important;
  font-weight: 900 !important;
}


/* =========================================================
   DENSIDAD
   ========================================================= */

.ventas-productos-density__btn {
  font-size: 10px !important;
  font-weight: 850 !important;
}


/* =========================================================
   ESTADOS
   ========================================================= */

.ventas-productos-state strong {
  font-size: 15px !important;
  font-weight: 900 !important;
}


.ventas-productos-state p {
  font-size: 12px !important;
  font-weight: 650 !important;
}


/* =========================================================
   MODO CLARO · MÁS CONTRASTE
   ========================================================= */

.ventas-productos-page {
  --vp-text:
    #14171b !important;

  --vp-text-strong:
    #050608 !important;

  --vp-text-soft:
    #343a43 !important;

  --vp-text-muted:
    #555d68 !important;
}


/* =========================================================
   DARK MODE · MÁS CONTRASTE
   ========================================================= */

html[data-theme="dark"] .ventas-productos-page,
body.dark .ventas-productos-page,
body[data-theme="dark"] .ventas-productos-page {
  --vp-text:
    #f5f5f5 !important;

  --vp-text-strong:
    #ffffff !important;

  --vp-text-soft:
    #d1d1d4 !important;

  --vp-text-muted:
    #a5a5ab !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {
  .ventas-productos-page {
    font-size: 14px !important;
  }


  .ventas-productos-brand__body h1 {
    font-size: 25px !important;
  }


  .ventas-productos-kpi__value {
    font-size: 22px !important;
  }


  .ventas-productos-panel__head h2,
  .ventas-productos-panel__head h3 {
    font-size: 16px !important;
  }


  .ventas-productos-table tbody td {
    font-size: 12px !important;
  }
}