/* =========================================================
   WIRTZ HUB · DIRECCIÓN EJECUTIVA
   VENTAS MENSUALES

   UBICACIÓN:
   frontend/src/pages/direccion-ejecutiva/ventas-mensuales/
   ventas-mensuales.css

   PARTE 1 DE 5
   ========================================================= */


/* =========================================================
   VARIABLES · LIGHT
   ========================================================= */

.executive-sales-monthly-page,
.vm-modal-root,
.vm-toast-root,
.vm-chart-tooltip {
  --vm-bg:
    #f2f4f6;

  --vm-surface:
    #ffffff;

  --vm-surface-soft:
    #f8f9fa;

  --vm-surface-muted:
    #edf0f3;

  --vm-surface-hover:
    #e8ecef;

  --vm-surface-active:
    #dfe4e8;

  --vm-border:
    #c3c9d0;

  --vm-border-strong:
    #8e98a3;

  --vm-border-dark:
    #5f6973;

  --vm-border-soft:
    #d8dde2;

  --vm-text:
    #080a0c;

  --vm-text-secondary:
    #1d2227;

  --vm-text-muted:
    #4f5862;

  --vm-text-soft:
    #747c85;

  --vm-primary:
    #090b0d;

  --vm-primary-hover:
    #171a1e;

  --vm-primary-active:
    #24282d;

  --vm-primary-text:
    #ffffff;

  --vm-success:
    #14643f;

  --vm-success-strong:
    #0d4b2e;

  --vm-success-bg:
    #eaf5ef;

  --vm-success-border:
    #8ec8aa;

  --vm-warning:
    #7c5100;

  --vm-warning-bg:
    #fff4d8;

  --vm-warning-border:
    #d7b660;

  --vm-danger:
    #a2211a;

  --vm-danger-bg:
    #fff0ee;

  --vm-danger-border:
    #d88e88;

  --vm-info:
    #194e9b;

  --vm-info-bg:
    #edf4ff;

  --vm-info-border:
    #98b8e6;

  --vm-chart-1:
    #111417;

  --vm-chart-2:
    #35404a;

  --vm-chart-3:
    #596773;

  --vm-chart-4:
    #76838f;

  --vm-chart-5:
    #949fa9;

  --vm-chart-6:
    #afb7bf;

  --vm-chart-7:
    #697580;

  --vm-chart-8:
    #c3c9cf;

  --vm-radius-xs:
    5px;

  --vm-radius-sm:
    7px;

  --vm-radius-md:
    9px;

  --vm-radius-lg:
    11px;

  --vm-radius-xl:
    14px;

  --vm-shadow-xs:
    0 1px 2px
    rgba(
      0,
      0,
      0,
      0.05
    );

  --vm-shadow-sm:
    0 4px 12px
    rgba(
      0,
      0,
      0,
      0.07
    );

  --vm-shadow-md:
    0 14px 36px
    rgba(
      0,
      0,
      0,
      0.11
    );

  --vm-shadow-modal:
    0 28px 80px
    rgba(
      0,
      0,
      0,
      0.24
    );

  --vm-transition-fast:
    110ms
    cubic-bezier(
      0.4,
      0,
      0.2,
      1
    );

  --vm-transition:
    170ms
    cubic-bezier(
      0.4,
      0,
      0.2,
      1
    );

  --vm-transition-slow:
    260ms
    cubic-bezier(
      0.4,
      0,
      0.2,
      1
    );

  --vm-page-inline:
    clamp(
      14px,
      2vw,
      28px
    );

  --vm-section-gap:
    16px;
}


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

.executive-sales-monthly-page *,
.executive-sales-monthly-page *::before,
.executive-sales-monthly-page *::after,
.vm-modal-root *,
.vm-modal-root *::before,
.vm-modal-root *::after,
.vm-toast-root *,
.vm-toast-root *::before,
.vm-toast-root *::after {
  box-sizing:
    border-box;
}


.executive-sales-monthly-page button,
.executive-sales-monthly-page input,
.executive-sales-monthly-page select,
.executive-sales-monthly-page textarea,
.vm-modal-root button,
.vm-modal-root input,
.vm-modal-root select,
.vm-modal-root textarea {
  font:
    inherit;
}


.executive-sales-monthly-page button,
.vm-modal-root button,
.vm-toast-root button {
  -webkit-tap-highlight-color:
    transparent;
}


.executive-sales-monthly-page svg,
.vm-modal-root svg,
.vm-toast-root svg {
  display:
    block;

  flex:
    0 0 auto;
}


/* =========================================================
   ROOT
   ========================================================= */

.executive-sales-monthly-page {
  position:
    relative;

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  min-height:
    100%;

  margin:
    0;

  padding:
    0;

  color:
    var(--vm-text);

  background:
    var(--vm-bg);

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

  font-size:
    14px;

  font-weight:
    650;

  line-height:
    1.45;

  overflow-x:
    clip;

  isolation:
    isolate;

  text-rendering:
    optimizeLegibility;

  -webkit-font-smoothing:
    antialiased;

  -moz-osx-font-smoothing:
    grayscale;
}


/* =========================================================
   PAGE INNER
   ========================================================= */

.vm-page__inner {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--vm-section-gap);

  width:
    100%;

  max-width:
    1920px;

  min-width:
    0;

  margin:
    0
    auto;

  padding:
    22px
    var(--vm-page-inline)
    38px;
}


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

.vm-section {
  position:
    relative;

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  animation:
    vmEnter
    180ms
    ease-out
    both;
}


/* =========================================================
   ERROR REGION
   ========================================================= */

.vm-error-region {
  width:
    100%;

  min-width:
    0;
}


.vm-error-region:empty {
  display:
    none;
}


/* =========================================================
   PAGE HEADER
   ========================================================= */

.vm-page-header {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  width:
    100%;

  min-width:
    0;

  min-height:
    118px;

  padding:
    21px
    23px;

  color:
    var(--vm-text);

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border-strong);

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

  box-shadow:
    var(--vm-shadow-xs);

  overflow:
    visible;
}


/* =========================================================
   HEADER LEFT
   ========================================================= */

.vm-page-header__left {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    7px;

  min-width:
    0;

  flex:
    1
    1
    auto;
}


/* =========================================================
   HEADER EYEBROW
   ========================================================= */

.vm-page-header__eyebrow {
  display:
    inline-flex;

  align-items:
    center;

  margin:
    0;

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

  font-size:
    10px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}


/* =========================================================
   HEADER TITLE ROW
   ========================================================= */

.vm-page-header__title-row {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    10px;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   HEADER TITLE
   ========================================================= */

.vm-page-header__title {
  margin:
    0;

  color:
    var(--vm-text);

  font-size:
    clamp(
      24px,
      2vw,
      31px
    );

  font-weight:
    950;

  line-height:
    1.08;

  letter-spacing:
    -0.045em;
}


/* =========================================================
   HEADER BADGE
   ========================================================= */

.vm-page-header__badge {
  min-height:
    27px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0
    9px;

  color:
    var(--vm-text);

  background:
    var(--vm-surface-muted);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    6px;

  font-size:
    9.5px;

  font-weight:
    900;

  white-space:
    nowrap;
}


/* =========================================================
   HEADER SUBTITLE
   ========================================================= */

.vm-page-header__subtitle {
  max-width:
    920px;

  margin:
    0;

  color:
    var(--vm-text-secondary);

  font-size:
    13px;

  font-weight:
    700;

  line-height:
    1.48;
}


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

.vm-page-header__meta {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    4px;
}


.vm-page-header__meta > span {
  min-height:
    31px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    0
    10px;

  color:
    var(--vm-text-secondary);

  background:
    var(--vm-surface-soft);

  border:
    1.5px
    solid
    var(--vm-border);

  border-radius:
    6px;

  font-size:
    10.5px;

  font-weight:
    750;

  white-space:
    nowrap;
}


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

.vm-page-header__actions {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;

  flex:
    0
    0
    auto;
}


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

.vm-btn {
  appearance:
    none;

  position:
    relative;

  min-height:
    39px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    0
    14px;

  color:
    var(--vm-text);

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    7px;

  outline:
    none;

  font-size:
    11.5px;

  font-weight:
    850;

  line-height:
    1;

  cursor:
    pointer;

  white-space:
    nowrap;

  user-select:
    none;

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


.vm-btn:hover:not(:disabled) {
  color:
    var(--vm-text);

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

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

  transform:
    translateY(
      -1px
    );
}


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


.vm-btn:disabled {
  opacity:
    0.45;

  cursor:
    not-allowed;

  transform:
    none;
}


/* =========================================================
   BUTTON PRIMARY
   ========================================================= */

.vm-btn--primary {
  color:
    var(--vm-primary-text);

  background:
    var(--vm-primary);

  border-color:
    var(--vm-primary);
}


.vm-btn--primary:hover:not(:disabled) {
  color:
    var(--vm-primary-text);

  background:
    var(--vm-primary-hover);

  border-color:
    var(--vm-primary-hover);
}


/* =========================================================
   BUTTON SECONDARY
   ========================================================= */

.vm-btn--secondary {
  color:
    var(--vm-text);

  background:
    var(--vm-surface);

  border-color:
    var(--vm-border-strong);
}


/* =========================================================
   BUTTON GHOST
   ========================================================= */

.vm-btn--ghost {
  color:
    var(--vm-text-secondary);

  background:
    transparent;

  border-color:
    var(--vm-border);
}


.vm-btn--ghost:hover:not(:disabled) {
  color:
    var(--vm-text);

  background:
    var(--vm-surface-muted);

  border-color:
    var(--vm-border-strong);
}


/* =========================================================
   BUTTON SMALL
   ========================================================= */

.vm-btn--small {
  min-height:
    33px;

  padding:
    0
    10px;

  font-size:
    10.5px;
}


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

.vm-icon-btn {
  appearance:
    none;

  width:
    36px;

  height:
    36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  padding:
    0;

  color:
    var(--vm-text-secondary);

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border);

  border-radius:
    7px;

  outline:
    none;

  cursor:
    pointer;

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


.vm-icon-btn:hover:not(:disabled) {
  color:
    var(--vm-text);

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

  border-color:
    var(--vm-border-strong);

  transform:
    translateY(
      -1px
    );
}


/* =========================================================
   EXPORT
   ========================================================= */

.vm-export-wrap {
  position:
    relative;

  display:
    inline-flex;
}


.vm-export-menu {
  position:
    absolute;

  top:
    calc(
      100% +
      7px
    );

  right:
    0;

  z-index:
    1000;

  width:
    220px;

  padding:
    6px;

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    8px;

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

  animation:
    vmDrop
    120ms
    ease-out
    both;
}


.vm-export-menu__item {
  appearance:
    none;

  width:
    100%;

  min-height:
    38px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    0
    10px;

  color:
    var(--vm-text-secondary);

  background:
    transparent;

  border:
    0;

  border-radius:
    6px;

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;

  text-align:
    left;
}


.vm-export-menu__item:hover {
  color:
    var(--vm-text);

  background:
    var(--vm-surface-hover);
}


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

.vm-panel {
  position:
    relative;

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border-strong);

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

  box-shadow:
    var(--vm-shadow-xs);

  overflow:
    visible;
}


.vm-panel--analytics {
  overflow:
    hidden;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.vm-section-header {
  position:
    relative;

  min-height:
    68px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    17px;

  width:
    100%;

  min-width:
    0;

  padding:
    14px
    16px;

  background:
    var(--vm-surface-soft);

  border-bottom:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    var(--vm-radius-lg)
    var(--vm-radius-lg)
    0
    0;
}


.vm-section-header__main {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  min-width:
    0;

  flex:
    1
    1
    auto;
}


.vm-section-header__icon {
  width:
    35px;

  height:
    35px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0
    auto;

  color:
    var(--vm-text);

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    7px;
}


.vm-section-header__copy {
  min-width:
    0;

  flex:
    1
    1
    auto;
}


.vm-section-header__copy h2 {
  margin:
    0;

  color:
    var(--vm-text);

  font-size:
    13.5px;

  font-weight:
    950;

  line-height:
    1.2;

  letter-spacing:
    -0.015em;
}


.vm-section-header__copy p {
  margin:
    4px
    0
    0;

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

  font-size:
    10.5px;

  font-weight:
    700;

  line-height:
    1.4;
}


.vm-section-header__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;

  min-width:
    0;
}


/* =========================================================
   FIELD
   ========================================================= */

.vm-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  min-width:
    0;
}


.vm-field label {
  color:
    var(--vm-text-secondary);

  font-size:
    9.5px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0.03em;

  text-transform:
    uppercase;
}


.vm-field--wide {
  grid-column:
    span 2;
}


/* =========================================================
   INPUT / SELECT
   ========================================================= */

.vm-input,
.vm-select {
  appearance:
    none;

  width:
    100%;

  min-width:
    0;

  height:
    40px;

  padding:
    0
    11px;

  color:
    var(--vm-text);

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border);

  border-radius:
    7px;

  outline:
    none;

  font-size:
    11.5px;

  font-weight:
    750;

  transition:
    border-color
    var(--vm-transition-fast),
    background-color
    var(--vm-transition-fast),
    box-shadow
    var(--vm-transition-fast);
}


.vm-input:hover,
.vm-select:hover {
  border-color:
    var(--vm-border-strong);
}


.vm-input:focus,
.vm-select:focus {
  border-color:
    var(--vm-text);

  box-shadow:
    0
    0
    0
    2px
    rgba(
      17,
      20,
      24,
      0.07
    );
}


.vm-input::placeholder {
  color:
    var(--vm-text-soft);

  opacity:
    1;
}


.vm-select {
  background-image:
    linear-gradient(
      45deg,
      transparent
      50%,
      currentColor
      50%
    ),
    linear-gradient(
      135deg,
      currentColor
      50%,
      transparent
      50%
    );

  background-position:
    calc(
      100% -
      14px
    )
    50%,
    calc(
      100% -
      10px
    )
    50%;

  background-size:
    4px
    4px,
    4px
    4px;

  background-repeat:
    no-repeat;

  padding-right:
    28px;
}


.vm-select--small {
  width:
    auto;

  min-width:
    145px;

  height:
    34px;

  font-size:
    10px;
}


/* =========================================================
   INPUT ICON
   ========================================================= */

.vm-input-icon {
  position:
    relative;

  width:
    100%;

  min-width:
    0;
}


.vm-input-icon > svg,
.vm-input-icon > i {
  position:
    absolute;

  top:
    50%;

  left:
    11px;

  z-index:
    2;

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

  transform:
    translateY(
      -50%
    );

  pointer-events:
    none;
}


.vm-input-icon
.vm-input {
  padding-left:
    34px;
}


/* =========================================================
   FILTERS
   ========================================================= */

.vm-filters {
  display:
    grid;

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

  gap:
    12px;

  width:
    100%;

  min-width:
    0;

  padding:
    16px;
}


.vm-filter-actions {
  grid-column:
    1 /
    -1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;

  padding-top:
    10px;

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


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

.vm-kpi-grid {
  display:
    grid;

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

  gap:
    10px;

  width:
    100%;

  min-width:
    0;
}


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

.vm-kpi-card {
  position:
    relative;

  min-width:
    0;

  min-height:
    120px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    13px;

  color:
    var(--vm-text);

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    9px;

  box-shadow:
    var(--vm-shadow-xs);

  overflow:
    hidden;

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


.vm-kpi-card:hover {
  border-color:
    var(--vm-border-dark);

  transform:
    translateY(
      -2px
    );
}


.vm-kpi-card.is-partial {
  background:
    var(--vm-warning-bg);

  border-color:
    var(--vm-warning-border);
}


.vm-kpi-card__top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.vm-kpi-card__label {
  min-width:
    0;

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

  font-size:
    9.5px;

  font-weight:
    900;

  line-height:
    1.2;

  letter-spacing:
    0.035em;

  text-transform:
    uppercase;
}


.vm-kpi-card__icon {
  width:
    30px;

  height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

  color:
    var(--vm-text);

  background:
    var(--vm-surface-soft);

  border:
    1.5px
    solid
    var(--vm-border);

  border-radius:
    7px;
}


.vm-kpi-card__value {
  display:
    block;

  min-width:
    0;

  color:
    var(--vm-text)
    !important;

  font-size:
    clamp(
      18px,
      1.4vw,
      23px
    );

  font-weight:
    950;

  line-height:
    1.08;

  letter-spacing:
    -0.04em;

  font-variant-numeric:
    tabular-nums;

  overflow-wrap:
    anywhere;
}


.vm-kpi-card__value.is-positive,
.vm-kpi-card__value.is-negative,
.vm-kpi-card__value.is-neutral {
  color:
    var(--vm-text)
    !important;
}


.vm-kpi-card__status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  color:
    var(--vm-warning);

  font-size:
    9px;

  font-weight:
    900;
}


.vm-kpi-card__sparkline {
  width:
    100%;

  height:
    34px;

  margin-top:
    auto;

  overflow:
    hidden;
}


/* =========================================================
   CHANNEL GRID
   ========================================================= */

.vm-channel-grid {
  display:
    grid;

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

  gap:
    10px;

  width:
    100%;

  min-width:
    0;

  padding:
    16px;
}


/* =========================================================
   CHANNEL CARD
   ========================================================= */

.vm-channel-card {
  position:
    relative;

  min-width:
    0;

  min-height:
    182px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  padding:
    13px;

  background:
    var(--vm-surface-soft);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    8px;

  overflow:
    hidden;

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


.vm-channel-card:hover {
  background:
    var(--vm-surface);

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

  transform:
    translateY(
      -2px
    );
}


.vm-channel-card__header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;

  min-width:
    0;
}


.vm-channel-card__identity {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  min-width:
    0;

  flex:
    1
    1
    auto;
}


.vm-channel-card__identity > div:last-child {
  min-width:
    0;
}


.vm-channel-card__identity strong {
  display:
    block;

  min-width:
    0;

  color:
    var(--vm-text);

  font-size:
    12px;

  font-weight:
    950;

  line-height:
    1.2;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.vm-channel-card__identity span {
  display:
    block;

  min-width:
    0;

  margin-top:
    3px;

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

  font-size:
    9.5px;

  font-weight:
    700;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.vm-channel-card__icon {
  width:
    33px;

  height:
    33px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

  color:
    var(--vm-text);

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    7px;
}


.vm-channel-card__status {
  min-height:
    25px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  flex:
    0
    0
    auto;

  padding:
    0
    7px;

  color:
    var(--vm-text-secondary);

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border);

  border-radius:
    6px;

  font-size:
    8.5px;

  font-weight:
    900;

  white-space:
    nowrap;
}


.vm-channel-card__status.is-complete {
  color:
    var(--vm-success-strong);

  background:
    var(--vm-success-bg);

  border-color:
    var(--vm-success-border);
}


.vm-channel-card__status.is-partial {
  color:
    var(--vm-warning);

  background:
    var(--vm-warning-bg);

  border-color:
    var(--vm-warning-border);
}


/* =========================================================
   CHANNEL METRICS
   ========================================================= */

.vm-channel-card__metrics {
  display:
    grid;

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

  gap:
    7px;

  width:
    100%;

  margin-top:
    auto;
}


.vm-channel-card__metrics > div {
  min-width:
    0;

  min-height:
    55px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    4px;

  padding:
    8px
    9px;

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border);

  border-radius:
    6px;
}


.vm-channel-card__metrics span {
  display:
    block;

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

  font-size:
    8px;

  font-weight:
    900;

  line-height:
    1.1;

  letter-spacing:
    0.03em;

  text-transform:
    uppercase;
}


.vm-channel-card__metrics strong {
  display:
    block;

  min-width:
    0;

  color:
    var(--vm-text)
    !important;

  font-size:
    11px;

  font-weight:
    950;

  line-height:
    1.2;

  font-variant-numeric:
    tabular-nums;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.vm-channel-card__metrics strong.is-positive,
.vm-channel-card__metrics strong.is-negative,
.vm-channel-card__metrics strong.is-neutral {
  color:
    var(--vm-text)
    !important;
}


/* =========================================================
   SIGN CLASSES · BASE
   ========================================================= */

.is-positive {
  color:
    var(--vm-success-strong);
}


.is-negative {
  color:
    var(--vm-danger);
}


.is-neutral {
  color:
    var(--vm-text-muted);
}


/* =========================================================
   GLOBAL ERROR
   ========================================================= */

.vm-global-error {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  width:
    100%;

  min-height:
    62px;

  padding:
    11px
    13px;

  color:
    var(--vm-danger);

  background:
    var(--vm-danger-bg);

  border:
    1.5px
    solid
    var(--vm-danger-border);

  border-radius:
    8px;
}


.vm-global-error__icon {
  width:
    34px;

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    auto;

  border:
    1.5px
    solid
    currentColor;

  border-radius:
    7px;
}


.vm-global-error__content {
  min-width:
    0;

  flex:
    1
    1
    auto;
}


.vm-global-error__content strong {
  display:
    block;

  font-size:
    11.5px;

  font-weight:
    950;
}


.vm-global-error__content span {
  display:
    block;

  margin-top:
    3px;

  font-size:
    10.5px;

  font-weight:
    700;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.vm-empty-state {
  width:
    100%;

  min-height:
    170px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    24px;

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

  text-align:
    center;
}


.vm-empty-state__icon {
  width:
    42px;

  height:
    42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--vm-text-secondary);

  background:
    var(--vm-surface-muted);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    8px;
}


.vm-empty-state strong {
  color:
    var(--vm-text);

  font-size:
    12px;

  font-weight:
    950;
}


.vm-empty-state p {
  max-width:
    460px;

  margin:
    0;

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

  font-size:
    10.5px;

  font-weight:
    700;

  line-height:
    1.45;
}


/* =========================================================
   LOADING
   ========================================================= */

.vm-loading-block {
  min-height:
    170px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  width:
    100%;

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

  font-size:
    11px;

  font-weight:
    800;
}


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

.vm-skeleton {
  display:
    block;

  border-radius:
    5px;

  background:
    linear-gradient(
      90deg,
      var(--vm-surface-muted)
      0%,
      var(--vm-surface-hover)
      48%,
      var(--vm-surface-muted)
      100%
    );

  background-size:
    220%
    100%;

  animation:
    vmSkeleton
    1.2s
    linear
    infinite;
}


.vm-skeleton--text {
  width:
    72%;

  height:
    11px;
}


.vm-skeleton--label {
  width:
    46%;

  height:
    9px;
}


.vm-skeleton--value {
  width:
    74%;

  height:
    22px;
}


.vm-skeleton--small {
  width:
    58%;

  height:
    8px;
}


/* =========================================================
   SPIN
   ========================================================= */

.vm-spin {
  animation:
    vmSpin
    700ms
    linear
    infinite;
}


/* =========================================================
   FIN PARTE 1 DE 5
   CONTINÚA EXACTAMENTE DESDE ACÁ
   ========================================================= *//* =========================================================
   PARTE 2 DE 5
   CONTINÚA EXACTAMENTE DESDE LA PARTE 1
   ========================================================= */


/* =========================================================
   SECTION TOOLS
   ========================================================= */

.vm-section-tools {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;

  min-width:
    0;
}


/* =========================================================
   SEGMENTED CONTROL
   ========================================================= */

.vm-segmented-control {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    3px;

  padding:
    3px;

  background:
    var(--vm-surface-muted);

  border:
    1.5px
    solid
    var(--vm-border);

  border-radius:
    8px;
}


.vm-segmented-control__item {
  appearance:
    none;

  min-height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  padding:
    0
    10px;

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

  background:
    transparent;

  border:
    1px
    solid
    transparent;

  border-radius:
    6px;

  font-size:
    9.5px;

  font-weight:
    850;

  cursor:
    pointer;

  white-space:
    nowrap;

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


.vm-segmented-control__item:hover {
  color:
    var(--vm-text);

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


.vm-segmented-control__item.is-active {
  color:
    var(--vm-text);

  background:
    var(--vm-surface);

  border-color:
    var(--vm-border-strong);
}


/* =========================================================
   TABBAR
   ========================================================= */

.vm-tabbar {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    4px;

  min-width:
    0;
}


.vm-tabbar__item {
  appearance:
    none;

  min-height:
    32px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  padding:
    0
    10px;

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

  background:
    transparent;

  border:
    1px
    solid
    transparent;

  border-radius:
    7px;

  font-size:
    10px;

  font-weight:
    850;

  cursor:
    pointer;

  white-space:
    nowrap;

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


.vm-tabbar__item:hover {
  color:
    var(--vm-text);

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


.vm-tabbar__item.is-active {
  color:
    var(--vm-text);

  background:
    var(--vm-surface);

  border-color:
    var(--vm-border-strong);
}


.vm-tabbar--analytics {
  justify-content:
    flex-end;
}


/* =========================================================
   EVOLUTION TOOLBAR
   ========================================================= */

.vm-evolution-toolbar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  flex-wrap:
    wrap;

  gap:
    10px;

  width:
    100%;

  min-width:
    0;

  padding:
    12px
    16px;

  background:
    var(--vm-surface);

  border-bottom:
    1.5px
    solid
    var(--vm-border);
}


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

.vm-chart-controls {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;
}


/* =========================================================
   EVOLUTION SUMMARY
   ========================================================= */

.vm-evolution-summary {
  display:
    flex;

  align-items:
    stretch;

  flex-wrap:
    wrap;

  gap:
    7px;

  min-width:
    0;
}


.vm-evolution-summary > div {
  min-width:
    100px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  padding:
    7px
    9px;

  background:
    var(--vm-surface-soft);

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

  border-radius:
    6px;
}


.vm-evolution-summary span {
  color:
    var(--vm-text-muted);

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.03em;

  text-transform:
    uppercase;
}


.vm-evolution-summary strong {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  color:
    var(--vm-text);

  font-size:
    10px;

  font-weight:
    950;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   COMPARISON PERIODS
   ========================================================= */

.vm-comparison-periods {
  display:
    grid;

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

  align-items:
    center;

  gap:
    12px;

  width:
    100%;

  padding:
    15px
    16px;

  background:
    var(--vm-surface);

  border-bottom:
    1.5px
    solid
    var(--vm-border);
}


/* =========================================================
   COMPARISON PERIOD
   ========================================================= */

.vm-comparison-period {
  min-width:
    0;

  min-height:
    63px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    5px;

  padding:
    10px
    11px;

  background:
    var(--vm-surface-soft);

  border:
    1.5px
    solid
    var(--vm-border);

  border-radius:
    7px;
}


.vm-comparison-period > span {
  color:
    var(--vm-text-muted);

  font-size:
    8.5px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}


.vm-comparison-period > strong {
  color:
    var(--vm-text);

  font-size:
    11.5px;

  font-weight:
    950;

  line-height:
    1.25;
}


/* =========================================================
   COMPARISON PERIOD ARROW
   ========================================================= */

.vm-comparison-period__arrow {
  width:
    34px;

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--vm-text-secondary);

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    7px;
}


/* =========================================================
   COMPARISON GRID
   ========================================================= */

.vm-comparison-grid {
  display:
    grid;

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

  gap:
    9px;

  width:
    100%;

  min-width:
    0;

  padding:
    16px;
}


/* =========================================================
   COMPARISON CARD
   ========================================================= */

.vm-comparison-card {
  min-width:
    0;

  min-height:
    128px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    9px;

  padding:
    12px;

  background:
    var(--vm-surface-soft);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    8px;
}


.vm-comparison-card__label {
  display:
    block;

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

  font-size:
    8.5px;

  font-weight:
    900;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}


.vm-comparison-card__main {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    8px;

  min-width:
    0;
}


.vm-comparison-card__main > strong {
  min-width:
    0;

  color:
    var(--vm-text)
    !important;

  font-size:
    18px;

  font-weight:
    950;

  line-height:
    1.1;

  letter-spacing:
    -0.035em;

  font-variant-numeric:
    tabular-nums;

  overflow-wrap:
    anywhere;
}


.vm-comparison-card__variation {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  flex:
    0
    0
    auto;

  font-size:
    9.5px;

  font-weight:
    900;
}


.vm-comparison-card__previous {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  margin-top:
    auto;

  padding-top:
    8px;

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


.vm-comparison-card__previous span {
  color:
    var(--vm-text-muted);

  font-size:
    9px;

  font-weight:
    750;
}


.vm-comparison-card__previous strong {
  color:
    var(--vm-text-secondary);

  font-size:
    9.5px;

  font-weight:
    900;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   RANKING LIST
   ========================================================= */

.vm-ranking-list {
  display:
    grid;

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

  gap:
    8px;

  width:
    100%;

  min-width:
    0;

  padding:
    16px;
}


/* =========================================================
   RANKING ITEM
   ========================================================= */

.vm-ranking-item {
  appearance:
    none;

  width:
    100%;

  min-width:
    0;

  min-height:
    64px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  padding:
    9px
    10px;

  color:
    var(--vm-text);

  background:
    var(--vm-surface-soft);

  border:
    1.5px
    solid
    var(--vm-border);

  border-radius:
    7px;

  text-align:
    left;

  cursor:
    pointer;

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


.vm-ranking-item:hover {
  background:
    var(--vm-surface);

  border-color:
    var(--vm-border-strong);

  transform:
    translateY(
      -1px
    );
}


.vm-ranking-item__position {
  width:
    30px;

  height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--vm-text);

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    6px;

  font-size:
    9.5px;

  font-weight:
    950;

  font-variant-numeric:
    tabular-nums;
}


.vm-ranking-item__main {
  min-width:
    0;
}


.vm-ranking-item__main strong {
  display:
    block;

  min-width:
    0;

  color:
    var(--vm-text);

  font-size:
    11px;

  font-weight:
    950;

  line-height:
    1.25;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.vm-ranking-item__main span {
  display:
    block;

  min-width:
    0;

  margin-top:
    3px;

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

  font-size:
    9px;

  font-weight:
    700;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.vm-ranking-item__value {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    2px;

  text-align:
    right;
}


.vm-ranking-item__value strong {
  color:
    var(--vm-text)
    !important;

  font-size:
    10.5px;

  font-weight:
    950;

  font-variant-numeric:
    tabular-nums;
}


.vm-ranking-item__value span {
  color:
    var(--vm-text-muted);

  font-size:
    8.5px;

  font-weight:
    750;
}


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

.vm-table-wrap {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  max-width:
    100%;

  overflow-x:
    auto;

  overflow-y:
    visible;

  background:
    var(--vm-surface);

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--vm-border-strong)
    transparent;
}


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

.vm-table {
  width:
    100%;

  min-width:
    980px;

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    auto;

  color:
    var(--vm-text);

  background:
    var(--vm-surface);

  font-size:
    10px;
}


.vm-table--compact {
  min-width:
    760px;
}


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

.vm-table thead {
  position:
    relative;

  z-index:
    2;
}


.vm-table th {
  position:
    sticky;

  top:
    0;

  z-index:
    3;

  height:
    42px;

  padding:
    0
    10px;

  color:
    var(--vm-text-secondary);

  background:
    var(--vm-surface-muted);

  border-top:
    1.5px
    solid
    var(--vm-border-strong);

  border-bottom:
    1.5px
    solid
    var(--vm-border-strong);

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

  font-size:
    8.5px;

  font-weight:
    950;

  line-height:
    1.1;

  letter-spacing:
    0.04em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.vm-table th:first-child {
  border-left:
    1.5px
    solid
    var(--vm-border-strong);
}


.vm-table th:last-child {
  border-right:
    1.5px
    solid
    var(--vm-border-strong);
}


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

.vm-table td {
  min-height:
    47px;

  padding:
    9px
    10px;

  color:
    var(--vm-text-secondary);

  background:
    var(--vm-surface);

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

  border-right:
    1px
    solid
    var(--vm-border-soft);

  font-size:
    10px;

  font-weight:
    750;

  line-height:
    1.35;

  vertical-align:
    middle;
}


.vm-table td:first-child {
  border-left:
    1.5px
    solid
    var(--vm-border);
}


.vm-table td:last-child {
  border-right:
    1.5px
    solid
    var(--vm-border);
}


.vm-table tbody tr:last-child td {
  border-bottom:
    1.5px
    solid
    var(--vm-border-strong);
}


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


.vm-table__clickable-row {
  cursor:
    pointer;
}


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

.vm-table th.is-right,
.vm-table td.is-right {
  text-align:
    right;
}


.vm-table th.is-center,
.vm-table td.is-center {
  text-align:
    center;
}


.vm-table td.is-right,
.vm-table td.is-center {
  color:
    var(--vm-text);

  font-weight:
    900;

  font-variant-numeric:
    tabular-nums;
}


.vm-table td.is-right.is-positive,
.vm-table td.is-right.is-negative,
.vm-table td.is-right.is-neutral,
.vm-table td.is-center.is-positive,
.vm-table td.is-center.is-negative,
.vm-table td.is-center.is-neutral,
.vm-table td .is-positive,
.vm-table td .is-negative,
.vm-table td .is-neutral {
  color:
    var(--vm-text)
    !important;

  font-weight:
    900;
}


/* =========================================================
   SORTABLE HEADER
   ========================================================= */

.vm-table th.is-sortable {
  padding:
    0;
}


.vm-table-sort {
  appearance:
    none;

  width:
    100%;

  min-height:
    40px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    5px;

  padding:
    0
    10px;

  color:
    inherit;

  background:
    transparent;

  border:
    0;

  font-size:
    inherit;

  font-weight:
    inherit;

  letter-spacing:
    inherit;

  text-transform:
    inherit;

  cursor:
    pointer;
}


.vm-table th.is-right
.vm-table-sort {
  justify-content:
    flex-end;
}


.vm-table-sort:hover {
  color:
    var(--vm-text);

  background:
    var(--vm-surface-hover);
}


.vm-table th.is-sorted {
  color:
    var(--vm-text);

  background:
    var(--vm-surface-active);
}


/* =========================================================
   PRODUCT / CLIENT CELL
   ========================================================= */

.vm-product-cell,
.vm-client-cell {
  min-width:
    0;
}


.vm-product-cell strong,
.vm-client-cell strong {
  display:
    block;

  min-width:
    0;

  color:
    var(--vm-text);

  font-size:
    10px;

  font-weight:
    950;

  line-height:
    1.25;
}


.vm-product-cell span,
.vm-client-cell span {
  display:
    block;

  min-width:
    0;

  margin-top:
    3px;

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

  font-size:
    8.5px;

  font-weight:
    700;

  line-height:
    1.2;
}


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

.vm-sku {
  color:
    var(--vm-text);

  font-size:
    9.5px;

  font-weight:
    900;

  font-variant-numeric:
    tabular-nums;
}


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

.vm-channel-badges {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    4px;

  min-width:
    0;
}


.vm-channel-badge {
  min-height:
    23px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0
    7px;

  color:
    var(--vm-text-secondary);

  background:
    var(--vm-surface-muted);

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

  border-radius:
    5px;

  font-size:
    8px;

  font-weight:
    900;

  line-height:
    1;

  white-space:
    nowrap;
}


/* =========================================================
   COST STATUS
   ========================================================= */

.vm-cost-status {
  min-height:
    25px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  padding:
    0
    7px;

  color:
    var(--vm-text-secondary);

  background:
    var(--vm-surface-muted);

  border:
    1.5px
    solid
    var(--vm-border);

  border-radius:
    6px;

  font-size:
    8px;

  font-weight:
    900;

  white-space:
    nowrap;
}


.vm-cost-status.is-complete {
  color:
    var(--vm-success-strong);

  background:
    var(--vm-success-bg);

  border-color:
    var(--vm-success-border);
}


.vm-cost-status.is-partial {
  color:
    var(--vm-warning);

  background:
    var(--vm-warning-bg);

  border-color:
    var(--vm-warning-border);
}


/* =========================================================
   COLUMNS WRAP
   ========================================================= */

.vm-columns-wrap {
  position:
    relative;

  display:
    inline-flex;
}


/* =========================================================
   COLUMNS POPOVER
   ========================================================= */

.vm-columns-popover {
  position:
    absolute;

  top:
    calc(
      100% +
      6px
    );

  right:
    0;

  z-index:
    1000;

  width:
    220px;

  max-height:
    340px;

  overflow-y:
    auto;

  padding:
    6px;

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    8px;

  box-shadow:
    var(--vm-shadow-md);
}


.vm-columns-popover.is-hidden {
  display:
    none;
}


/* =========================================================
   COLUMNS MENU
   ========================================================= */

.vm-columns-menu {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.vm-columns-menu__item {
  min-height:
    34px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0
    8px;

  color:
    var(--vm-text-secondary);

  border-radius:
    6px;

  font-size:
    10px;

  font-weight:
    800;

  cursor:
    pointer;
}


.vm-columns-menu__item:hover {
  color:
    var(--vm-text);

  background:
    var(--vm-surface-hover);
}


.vm-columns-menu__item input {
  accent-color:
    var(--vm-text);
}


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

.vm-pagination {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  width:
    100%;

  min-height:
    57px;

  padding:
    10px
    14px;

  background:
    var(--vm-surface-soft);

  border-top:
    1.5px
    solid
    var(--vm-border-strong);
}


.vm-pagination__info {
  color:
    var(--vm-text-muted);

  font-size:
    9.5px;

  font-weight:
    750;
}


.vm-pagination__info strong {
  color:
    var(--vm-text);

  font-weight:
    950;
}


.vm-pagination__controls {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;
}


.vm-pagination__page {
  min-width:
    56px;

  text-align:
    center;

  color:
    var(--vm-text-secondary);

  font-size:
    9.5px;

  font-weight:
    900;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   COST SUMMARY
   ========================================================= */

.vm-cost-summary {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  min-height:
    31px;

  padding:
    0
    9px;

  color:
    var(--vm-text-secondary);

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border);

  border-radius:
    7px;

  font-size:
    9px;

  font-weight:
    800;
}


.vm-cost-summary strong {
  color:
    var(--vm-text);

  font-weight:
    950;
}


/* =========================================================
   FIN PARTE 2 DE 5
   CONTINÚA EXACTAMENTE DESDE ACÁ
   ========================================================= *//* =========================================================
   PARTE 3 DE 5
   CONTINÚA EXACTAMENTE DESDE LA PARTE 2
   ========================================================= */


/* =========================================================
   ANALYTICS CONTENT
   ========================================================= */

.vm-analytics-content {
  width:
    100%;

  min-width:
    0;

  padding:
    16px;
}


/* =========================================================
   ANALYTICS GRID
   ========================================================= */

.vm-analytics-grid {
  display:
    grid;

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

  gap:
    10px;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   ANALYTICS CARD
   ========================================================= */

.vm-analytics-card {
  min-width:
    0;

  min-height:
    286px;

  display:
    flex;

  flex-direction:
    column;

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    8px;

  overflow:
    hidden;
}


.vm-analytics-card--wide {
  grid-column:
    span 2;
}


/* =========================================================
   ANALYTICS CARD HEADER
   ========================================================= */

.vm-analytics-card__header {
  min-height:
    60px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    10px
    12px;

  background:
    var(--vm-surface-soft);

  border-bottom:
    1.5px
    solid
    var(--vm-border);
}


.vm-analytics-card__header > div {
  min-width:
    0;
}


.vm-analytics-card__header span {
  display:
    block;

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

  font-size:
    8px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}


.vm-analytics-card__header strong {
  display:
    block;

  margin-top:
    4px;

  color:
    var(--vm-text);

  font-size:
    11px;

  font-weight:
    950;

  line-height:
    1.2;
}


/* =========================================================
   ANALYTICS CARD BODY
   ========================================================= */

.vm-analytics-card__body {
  position:
    relative;

  min-width:
    0;

  min-height:
    0;

  flex:
    1
    1
    auto;

  padding:
    12px;

  overflow:
    hidden;
}


.vm-analytics-card__body--center {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


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

.vm-chart {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--vm-text);

  background:
    transparent;

  border-radius:
    7px;

  opacity:
    1;

  transform:
    none;

  transition:
    opacity
    var(--vm-transition-slow),
    transform
    var(--vm-transition-slow);
}


.vm-chart.is-chart-visible {
  opacity:
    1;

  transform:
    none;
}


.vm-chart svg {
  display:
    block;

  width:
    100%;

  height:
    auto;

  min-height:
    220px;

  overflow:
    visible;
}


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

.vm-chart__grid {
  stroke:
    var(--vm-border);

  stroke-width:
    1.1;

  opacity:
    0.9;

  shape-rendering:
    crispEdges;
}


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

.vm-chart__baseline {
  stroke:
    var(--vm-border-strong);

  stroke-width:
    1.35;

  shape-rendering:
    crispEdges;
}


/* =========================================================
   CHART AXIS LABELS
   ========================================================= */

.vm-chart__axis-label,
.vm-chart__x-label {
  fill:
    var(--vm-text-secondary);

  font-family:
    "DM Sans",
    "Plus Jakarta Sans",
    "Inter",
    system-ui,
    sans-serif;

  font-size:
    9px;

  font-weight:
    850;
}


/* =========================================================
   LINE
   ========================================================= */

.vm-chart__line {
  fill:
    none;

  stroke:
    var(--vm-chart-1);

  stroke-width:
    2.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.vm-chart__line--animated {
  stroke-dasharray:
    none;

  stroke-dashoffset:
    0;
}


/* =========================================================
   AREA
   ========================================================= */

.vm-chart__area {
  opacity:
    1;
}


.vm-chart__area-stop--start {
  stop-color:
    var(--vm-chart-1);

  stop-opacity:
    0.22;
}


.vm-chart__area-stop--end {
  stop-color:
    var(--vm-chart-1);

  stop-opacity:
    0.025;
}


/* =========================================================
   POINT
   ========================================================= */

.vm-chart__point {
  fill:
    var(--vm-surface);

  stroke:
    var(--vm-chart-1);

  stroke-width:
    2;

  cursor:
    pointer;

  transform-box:
    fill-box;

  transform-origin:
    center;

  transition:
    transform
    var(--vm-transition-fast),
    fill
    var(--vm-transition-fast);
}


.vm-chart__point:hover {
  fill:
    var(--vm-chart-1);

  transform:
    scale(
      1.45
    );
}


/* =========================================================
   VERTICAL BAR
   ========================================================= */

.vm-chart__bar {
  fill:
    var(--vm-chart-1);

  opacity:
    1;

  cursor:
    pointer;

  transform:
    none;

  transform-box:
    fill-box;

  transform-origin:
    center
    bottom;
}


.vm-chart__bar--animated {
  opacity:
    1;

  transform:
    none;
}


.vm-chart__bar.is-negative {
  fill:
    var(--vm-danger);
}


/* =========================================================
   HORIZONTAL BAR
   ========================================================= */

.vm-chart__hbar {
  fill:
    var(--vm-chart-1);

  opacity:
    1;

  cursor:
    pointer;

  transform:
    none;

  transform-box:
    fill-box;

  transform-origin:
    left
    center;
}


.vm-chart__hbar.is-negative {
  fill:
    var(--vm-danger);
}


/* =========================================================
   GROUPED BAR
   ========================================================= */

.vm-chart__group-bar {
  opacity:
    1;

  cursor:
    pointer;

  transform:
    none;

  transform-box:
    fill-box;

  transform-origin:
    center
    bottom;
}


/* =========================================================
   HORIZONTAL LABELS
   ========================================================= */

.vm-chart__hbar-label {
  fill:
    var(--vm-text-secondary);

  font-family:
    "DM Sans",
    "Plus Jakarta Sans",
    "Inter",
    system-ui,
    sans-serif;

  font-size:
    10px;

  font-weight:
    850;
}


.vm-chart__hbar-value {
  fill:
    var(--vm-text);

  font-family:
    "DM Sans",
    "Plus Jakarta Sans",
    "Inter",
    system-ui,
    sans-serif;

  font-size:
    10px;

  font-weight:
    950;
}


/* =========================================================
   SERIES COLORS
   ========================================================= */

.vm-chart__group-bar--1,
.vm-chart__multi-line--1,
.vm-chart__multi-point--1 {
  stroke:
    var(--vm-chart-1);

  fill:
    var(--vm-chart-1);
}


.vm-chart__group-bar--2,
.vm-chart__multi-line--2,
.vm-chart__multi-point--2 {
  stroke:
    var(--vm-chart-2);

  fill:
    var(--vm-chart-2);
}


.vm-chart__group-bar--3,
.vm-chart__multi-line--3,
.vm-chart__multi-point--3 {
  stroke:
    var(--vm-chart-3);

  fill:
    var(--vm-chart-3);
}


.vm-chart__group-bar--4,
.vm-chart__multi-line--4,
.vm-chart__multi-point--4 {
  stroke:
    var(--vm-chart-4);

  fill:
    var(--vm-chart-4);
}


.vm-chart__group-bar--5,
.vm-chart__multi-line--5,
.vm-chart__multi-point--5 {
  stroke:
    var(--vm-chart-5);

  fill:
    var(--vm-chart-5);
}


.vm-chart__group-bar--6,
.vm-chart__multi-line--6,
.vm-chart__multi-point--6 {
  stroke:
    var(--vm-chart-6);

  fill:
    var(--vm-chart-6);
}


.vm-chart__group-bar--7,
.vm-chart__multi-line--7,
.vm-chart__multi-point--7 {
  stroke:
    var(--vm-chart-7);

  fill:
    var(--vm-chart-7);
}


.vm-chart__group-bar--8,
.vm-chart__multi-line--8,
.vm-chart__multi-point--8 {
  stroke:
    var(--vm-chart-8);

  fill:
    var(--vm-chart-8);
}


/* =========================================================
   MULTI LINE
   ========================================================= */

.vm-chart__multi-line {
  fill:
    none;

  stroke-width:
    2.2;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  stroke-dasharray:
    none;

  stroke-dashoffset:
    0;
}


.vm-chart__multi-point {
  stroke:
    var(--vm-surface);

  stroke-width:
    1.5;

  cursor:
    pointer;

  transform-box:
    fill-box;

  transform-origin:
    center;

  transition:
    transform
    var(--vm-transition-fast);
}


.vm-chart__multi-point:hover {
  transform:
    scale(
      1.4
    );
}


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

.vm-chart-legend {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  width:
    100%;

  padding:
    4px
    2px
    10px;
}


.vm-chart-legend__item {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  color:
    var(--vm-text-secondary);

  font-size:
    9px;

  font-weight:
    800;
}


.vm-chart-legend__dot {
  width:
    9px;

  height:
    9px;

  flex:
    0
    0
    auto;

  border-radius:
    3px;
}


.vm-chart-legend__dot--1 {
  background:
    var(--vm-chart-1);
}


.vm-chart-legend__dot--2 {
  background:
    var(--vm-chart-2);
}


.vm-chart-legend__dot--3 {
  background:
    var(--vm-chart-3);
}


.vm-chart-legend__dot--4 {
  background:
    var(--vm-chart-4);
}


.vm-chart-legend__dot--5 {
  background:
    var(--vm-chart-5);
}


.vm-chart-legend__dot--6 {
  background:
    var(--vm-chart-6);
}


.vm-chart-legend__dot--7 {
  background:
    var(--vm-chart-7);
}


.vm-chart-legend__dot--8 {
  background:
    var(--vm-chart-8);
}


/* =========================================================
   DONUT LAYOUT
   ========================================================= */

.vm-donut-layout {
  display:
    grid;

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

  align-items:
    center;

  gap:
    18px;

  width:
    100%;

  min-width:
    0;

  opacity:
    1;

  transform:
    none;
}


.vm-donut-layout.is-chart-visible {
  opacity:
    1;

  transform:
    none;
}


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

.vm-donut-chart {
  width:
    min(
      100%,
      240px
    );

  margin:
    0
    auto;
}


.vm-donut-chart svg {
  display:
    block;

  width:
    100%;

  height:
    auto;
}


/* =========================================================
   DONUT TRACK
   ========================================================= */

.vm-chart__donut-track {
  stroke:
    var(--vm-surface-muted);
}


/* =========================================================
   DONUT SEGMENT
   ========================================================= */

.vm-chart__donut-segment {
  opacity:
    1
    !important;

  cursor:
    pointer;

  transition:
    opacity
    var(--vm-transition-fast),
    filter
    var(--vm-transition-fast);
}


.is-chart-visible
.vm-chart__donut-segment {
  opacity:
    1
    !important;
}


.vm-chart__donut-segment:hover {
  opacity:
    0.78
    !important;
}


.vm-chart__donut-segment--1 {
  stroke:
    var(--vm-chart-1);

  background:
    var(--vm-chart-1);
}


.vm-chart__donut-segment--2 {
  stroke:
    var(--vm-chart-2);

  background:
    var(--vm-chart-2);
}


.vm-chart__donut-segment--3 {
  stroke:
    var(--vm-chart-3);

  background:
    var(--vm-chart-3);
}


.vm-chart__donut-segment--4 {
  stroke:
    var(--vm-chart-4);

  background:
    var(--vm-chart-4);
}


.vm-chart__donut-segment--5 {
  stroke:
    var(--vm-chart-5);

  background:
    var(--vm-chart-5);
}


.vm-chart__donut-segment--6 {
  stroke:
    var(--vm-chart-6);

  background:
    var(--vm-chart-6);
}


.vm-chart__donut-segment--7 {
  stroke:
    var(--vm-chart-7);

  background:
    var(--vm-chart-7);
}


.vm-chart__donut-segment--8 {
  stroke:
    var(--vm-chart-8);

  background:
    var(--vm-chart-8);
}


/* =========================================================
   DONUT TEXT
   ========================================================= */

.vm-chart__donut-label {
  fill:
    var(--vm-text-muted);

  font-family:
    "DM Sans",
    "Plus Jakarta Sans",
    system-ui,
    sans-serif;

  font-size:
    11px;

  font-weight:
    850;

  text-transform:
    uppercase;
}


.vm-chart__donut-value {
  fill:
    var(--vm-text);

  font-family:
    "DM Sans",
    "Plus Jakarta Sans",
    system-ui,
    sans-serif;

  font-size:
    18px;

  font-weight:
    950;
}


/* =========================================================
   DONUT LEGEND
   ========================================================= */

.vm-donut-legend {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  min-width:
    0;
}


.vm-donut-legend__item {
  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  min-height:
    44px;

  padding:
    7px
    9px;

  background:
    var(--vm-surface-soft);

  border:
    1.5px
    solid
    var(--vm-border);

  border-radius:
    7px;
}


.vm-donut-legend__dot {
  width:
    9px;

  height:
    9px;

  border-radius:
    3px;
}


.vm-donut-legend__copy {
  min-width:
    0;
}


.vm-donut-legend__copy strong {
  display:
    block;

  min-width:
    0;

  color:
    var(--vm-text);

  font-size:
    10px;

  font-weight:
    950;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.vm-donut-legend__copy span {
  display:
    block;

  margin-top:
    2px;

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

  font-size:
    8.5px;

  font-weight:
    750;
}


.vm-donut-legend__item > b {
  color:
    var(--vm-text);

  font-size:
    10px;

  font-weight:
    950;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   RADIAL
   ========================================================= */

.vm-radial {
  width:
    min(
      100%,
      230px
    );

  margin:
    0
    auto;

  opacity:
    1;

  transform:
    none;
}


.vm-radial.is-chart-visible {
  opacity:
    1;

  transform:
    none;
}


.vm-radial svg {
  display:
    block;

  width:
    100%;

  height:
    auto;
}


.vm-radial__track {
  stroke:
    var(--vm-surface-muted);
}


.vm-radial__value {
  stroke:
    var(--vm-chart-1);
}


.vm-radial__number {
  fill:
    var(--vm-text);

  font-family:
    "DM Sans",
    "Plus Jakarta Sans",
    system-ui,
    sans-serif;

  font-size:
    21px;

  font-weight:
    950;
}


.vm-radial__label {
  fill:
    var(--vm-text-muted);

  font-family:
    "DM Sans",
    "Plus Jakarta Sans",
    system-ui,
    sans-serif;

  font-size:
    9px;

  font-weight:
    850;

  text-transform:
    uppercase;
}


/* =========================================================
   STACKED BAR
   ========================================================= */

.vm-stacked-bar {
  width:
    100%;

  opacity:
    1;

  transform:
    none;
}


.vm-stacked-bar.is-chart-visible {
  opacity:
    1;

  transform:
    none;
}


.vm-stacked-bar__track {
  display:
    flex;

  width:
    100%;

  height:
    16px;

  overflow:
    hidden;

  background:
    var(--vm-surface-muted);

  border:
    1.5px
    solid
    var(--vm-border);

  border-radius:
    999px;
}


.vm-stacked-bar__segment {
  display:
    block;

  height:
    100%;
}


.vm-stacked-bar__segment--1 {
  background:
    var(--vm-chart-1);
}


.vm-stacked-bar__segment--2 {
  background:
    var(--vm-chart-3);
}


.vm-stacked-bar__segment--3 {
  background:
    var(--vm-chart-5);
}


.vm-stacked-bar__segment--4 {
  background:
    var(--vm-chart-7);
}


/* =========================================================
   STACKED LEGEND
   ========================================================= */

.vm-stacked-bar__legend {
  display:
    grid;

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

  gap:
    7px;

  margin-top:
    10px;
}


.vm-stacked-bar__legend-item {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;

  padding:
    7px
    8px;

  background:
    var(--vm-surface-soft);

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

  border-radius:
    6px;
}


.vm-stacked-bar__legend-dot {
  width:
    9px;

  height:
    9px;

  flex:
    0
    0
    auto;

  border-radius:
    3px;
}


.vm-stacked-bar__legend-dot--1 {
  background:
    var(--vm-chart-1);
}


.vm-stacked-bar__legend-dot--2 {
  background:
    var(--vm-chart-3);
}


.vm-stacked-bar__legend-dot--3 {
  background:
    var(--vm-chart-5);
}


.vm-stacked-bar__legend-dot--4 {
  background:
    var(--vm-chart-7);
}


.vm-stacked-bar__legend-item > div {
  min-width:
    0;
}


.vm-stacked-bar__legend-item span {
  display:
    block;

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

  font-size:
    8px;

  font-weight:
    750;
}


.vm-stacked-bar__legend-item strong {
  display:
    block;

  margin-top:
    2px;

  color:
    var(--vm-text);

  font-size:
    9.5px;

  font-weight:
    950;
}


/* =========================================================
   HEATMAP
   ========================================================= */

.vm-heatmap {
  width:
    100%;

  opacity:
    1;

  transform:
    none;
}


.vm-heatmap.is-chart-visible {
  opacity:
    1;

  transform:
    none;
}


.vm-heatmap__header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  margin-bottom:
    9px;
}


.vm-heatmap__header strong {
  color:
    var(--vm-text);

  font-size:
    10.5px;

  font-weight:
    950;
}


.vm-heatmap__header span {
  color:
    var(--vm-text-muted);

  font-size:
    9px;

  font-weight:
    800;
}


.vm-heatmap__weekdays {
  display:
    grid;

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

  gap:
    5px;

  margin-bottom:
    5px;
}


.vm-heatmap__weekdays span {
  text-align:
    center;

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

  font-size:
    8px;

  font-weight:
    900;
}


.vm-heatmap__grid {
  display:
    grid;

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

  gap:
    5px;
}


.vm-heatmap__cell {
  min-width:
    0;

  min-height:
    54px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    4px;

  padding:
    6px;

  color:
    var(--vm-text);

  background:
    var(--vm-surface-soft);

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

  border-radius:
    6px;

  transition:
    transform
    var(--vm-transition-fast),
    border-color
    var(--vm-transition-fast);
}


.vm-heatmap__cell:hover {
  border-color:
    var(--vm-border-strong);

  transform:
    translateY(
      -1px
    );
}


.vm-heatmap__cell > span {
  color:
    inherit;

  font-size:
    8px;

  font-weight:
    900;
}


.vm-heatmap__cell > strong {
  color:
    inherit;

  font-size:
    8.5px;

  font-weight:
    950;

  font-variant-numeric:
    tabular-nums;
}


.vm-heatmap__cell--empty {
  visibility:
    hidden;
}


.vm-heatmap__cell--level-0 {
  background:
    var(--vm-surface-soft);
}


.vm-heatmap__cell--level-1 {
  background:
    #e7eaed;
}


.vm-heatmap__cell--level-2 {
  background:
    #cfd5da;
}


.vm-heatmap__cell--level-3 {
  background:
    #aeb6bd;
}


.vm-heatmap__cell--level-4 {
  color:
    #ffffff;

  background:
    #67737e;
}


.vm-heatmap__cell--level-5 {
  color:
    #ffffff;

  background:
    #16191c;
}


/* =========================================================
   WATERFALL
   ========================================================= */

.vm-waterfall__connector {
  stroke:
    var(--vm-border-strong);

  stroke-width:
    1;

  stroke-dasharray:
    3
    3;
}


.vm-waterfall__bar {
  opacity:
    1;

  cursor:
    pointer;

  transform:
    none;

  transform-box:
    fill-box;

  transform-origin:
    center
    bottom;
}


.vm-waterfall__bar.is-positive {
  fill:
    var(--vm-success-strong);
}


.vm-waterfall__bar.is-negative {
  fill:
    var(--vm-danger);
}


.vm-waterfall__bar.is-total {
  fill:
    var(--vm-text);
}


/* =========================================================
   SPARKLINE
   ========================================================= */

.vm-sparkline {
  width:
    100%;

  height:
    34px;

  overflow:
    visible;
}


.vm-sparkline__line {
  fill:
    none;

  stroke:
    var(--vm-text-secondary);

  stroke-width:
    2;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  stroke-dasharray:
    none;

  stroke-dashoffset:
    0;
}


.vm-sparkline__point {
  fill:
    var(--vm-text);
}


.vm-sparkline.is-positive
.vm-sparkline__line {
  stroke:
    var(--vm-success-strong);
}


.vm-sparkline.is-positive
.vm-sparkline__point {
  fill:
    var(--vm-success-strong);
}


.vm-sparkline.is-negative
.vm-sparkline__line {
  stroke:
    var(--vm-danger);
}


.vm-sparkline.is-negative
.vm-sparkline__point {
  fill:
    var(--vm-danger);
}


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

.vm-chart-tooltip {
  position:
    fixed;

  z-index:
    200000;

  min-width:
    120px;

  max-width:
    260px;

  padding:
    8px
    9px;

  color:
    #ffffff;

  background:
    #080a0c;

  border:
    1px
    solid
    #353b42;

  border-radius:
    7px;

  box-shadow:
    0
    10px
    30px
    rgba(
      0,
      0,
      0,
      0.28
    );

  opacity:
    0;

  transform:
    translateY(
      3px
    );

  pointer-events:
    none;

  transition:
    opacity
    80ms
    ease,
    transform
    80ms
    ease;

  font-family:
    "DM Sans",
    "Plus Jakarta Sans",
    system-ui,
    sans-serif;
}


.vm-chart-tooltip.is-visible {
  opacity:
    1;

  transform:
    translateY(
      0
    );
}


.vm-chart-tooltip__content {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.vm-chart-tooltip__content strong {
  color:
    #ffffff;

  font-size:
    9px;

  font-weight:
    850;
}


.vm-chart-tooltip__content span {
  color:
    #ffffff;

  font-size:
    11px;

  font-weight:
    950;
}


.vm-chart-tooltip__content small {
  color:
    #aeb5bd;

  font-size:
    8px;

  font-weight:
    700;
}


/* =========================================================
   CHART VIEWPORT · MOBILE
   ========================================================= */

.vm-chart[data-chart-viewport="mobile"]
svg {
  min-height:
    170px;
}


.vm-donut-layout[data-chart-viewport="mobile"] {
  grid-template-columns:
    minmax(
      0,
      1fr
    );
}


/* =========================================================
   CHART VIEWPORT · TABLET
   ========================================================= */

.vm-chart[data-chart-viewport="tablet"]
svg {
  min-height:
    190px;
}


/* =========================================================
   CHART EMPTY SAFETY
   ========================================================= */

.vm-analytics-card__body:empty {
  min-height:
    200px;
}


/* =========================================================
   FIN PARTE 3 DE 5
   CONTINÚA EXACTAMENTE DESDE ACÁ
   ========================================================= *//* =========================================================
   PARTE 4 DE 5
   CONTINÚA EXACTAMENTE DESDE LA PARTE 3
   ========================================================= */


/* =========================================================
   MODAL ROOT
   ========================================================= */

.vm-modal-root {
  position:
    relative;

  z-index:
    999999;

  font-family:
    "DM Sans",
    "Plus Jakarta Sans",
    "Inter",
    system-ui,
    sans-serif;
}


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

.vm-modal-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    999999;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    22px;

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

  backdrop-filter:
    blur(
      2px
    );

  animation:
    vmFadeIn
    140ms
    ease-out
    both;
}


/* =========================================================
   MODAL BASE
   ========================================================= */

.vm-modal {
  position:
    relative;

  width:
    min(
      920px,
      calc(
        100vw -
        32px
      )
    );

  max-height:
    calc(
      100vh -
      44px
    );

  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  color:
    var(--vm-text);

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    11px;

  box-shadow:
    var(--vm-shadow-modal);

  overflow:
    hidden;

  animation:
    vmModalEnter
    170ms
    cubic-bezier(
      0.2,
      0.7,
      0.2,
      1
    )
    both;
}


.vm-modal--xl {
  width:
    min(
      1420px,
      calc(
        100vw -
        34px
      )
    );
}


.vm-modal--comparison {
  width:
    min(
      1560px,
      calc(
        100vw -
        28px
      )
    );

  height:
    min(
      860px,
      calc(
        100vh -
        30px
      )
    );
}


/* =========================================================
   MODAL HEADER
   ========================================================= */

.vm-modal__header {
  min-height:
    76px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    15px
    17px;

  background:
    var(--vm-surface-soft);

  border-bottom:
    1.5px
    solid
    var(--vm-border-strong);
}


.vm-modal__header > div {
  min-width:
    0;

  flex:
    1
    1
    auto;
}


.vm-modal__eyebrow {
  display:
    block;

  margin-bottom:
    5px;

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

  font-size:
    8.5px;

  font-weight:
    900;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.vm-modal__header h3 {
  margin:
    0;

  color:
    var(--vm-text);

  font-size:
    19px;

  font-weight:
    950;

  line-height:
    1.15;

  letter-spacing:
    -0.035em;
}


.vm-modal__header p {
  margin:
    5px
    0
    0;

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

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1.4;
}


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

.vm-modal__body {
  flex:
    1
    1
    auto;

  min-width:
    0;

  min-height:
    0;

  padding:
    17px;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  background:
    var(--vm-surface);

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--vm-border-strong)
    transparent;
}


/* =========================================================
   MODAL SPLIT
   ========================================================= */

.vm-modal__body--split {
  display:
    grid;

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

  gap:
    0;

  padding:
    0;

  overflow:
    hidden;
}


/* =========================================================
   MODAL LOADING
   ========================================================= */

.vm-modal-loading {
  min-height:
    330px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  padding:
    28px;

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

  text-align:
    center;
}


.vm-modal-loading strong {
  color:
    var(--vm-text);

  font-size:
    12px;

  font-weight:
    950;
}


.vm-modal-loading span {
  max-width:
    420px;

  font-size:
    10px;

  font-weight:
    700;
}


/* =========================================================
   MODAL SUMMARY GRID
   ========================================================= */

.vm-modal-summary-grid {
  display:
    grid;

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

  gap:
    9px;

  width:
    100%;

  margin-bottom:
    15px;
}


/* =========================================================
   MODAL SUMMARY CARD
   ========================================================= */

.vm-modal-summary-card {
  min-width:
    0;

  min-height:
    80px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    5px;

  padding:
    10px
    11px;

  background:
    var(--vm-surface-soft);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    7px;
}


.vm-modal-summary-card span {
  color:
    var(--vm-text-muted);

  font-size:
    8px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}


.vm-modal-summary-card strong {
  min-width:
    0;

  color:
    var(--vm-text)
    !important;

  font-size:
    15.5px;

  font-weight:
    950;

  line-height:
    1.1;

  letter-spacing:
    -0.025em;

  font-variant-numeric:
    tabular-nums;

  overflow-wrap:
    anywhere;
}


.vm-modal-summary-card strong.is-positive,
.vm-modal-summary-card strong.is-negative,
.vm-modal-summary-card strong.is-neutral {
  color:
    var(--vm-text)
    !important;
}


/* =========================================================
   MODAL SECTION
   ========================================================= */

.vm-modal-section {
  width:
    100%;

  min-width:
    0;

  margin-top:
    14px;

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    8px;

  overflow:
    hidden;
}


/* =========================================================
   MODAL SECTION HEADER
   ========================================================= */

.vm-modal-section__header {
  min-height:
    58px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    10px
    12px;

  background:
    var(--vm-surface-soft);

  border-bottom:
    1.5px
    solid
    var(--vm-border);
}


.vm-modal-section__header > div {
  min-width:
    0;
}


.vm-modal-section__header span {
  display:
    block;

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

  font-size:
    7.5px;

  font-weight:
    900;

  text-transform:
    uppercase;
}


.vm-modal-section__header strong {
  display:
    block;

  margin-top:
    3px;

  color:
    var(--vm-text);

  font-size:
    11px;

  font-weight:
    950;
}


.vm-modal-section__count {
  min-width:
    30px;

  height:
    28px;

  display:
    inline-flex
    !important;

  align-items:
    center;

  justify-content:
    center;

  margin:
    0
    !important;

  padding:
    0
    7px;

  color:
    var(--vm-text)
    !important;

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    6px;

  font-size:
    8.5px
    !important;

  font-weight:
    950
    !important;
}


/* =========================================================
   DETAIL GRID
   ========================================================= */

.vm-product-detail-grid {
  display:
    grid;

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

  gap:
    8px;

  padding:
    12px;
}


/* =========================================================
   DETAIL ITEM
   ========================================================= */

.vm-product-detail-item {
  min-width:
    0;

  min-height:
    64px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    4px;

  padding:
    9px
    10px;

  background:
    var(--vm-surface-soft);

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

  border-radius:
    6px;
}


.vm-product-detail-item > span {
  color:
    var(--vm-text-muted);

  font-size:
    7.5px;

  font-weight:
    900;

  text-transform:
    uppercase;
}


.vm-product-detail-item > strong {
  min-width:
    0;

  color:
    var(--vm-text)
    !important;

  font-size:
    10px;

  font-weight:
    950;

  overflow-wrap:
    anywhere;
}


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

.vm-product-picker {
  min-width:
    0;

  min-height:
    0;

  display:
    flex;

  flex-direction:
    column;

  background:
    var(--vm-surface-soft);

  border-right:
    1.5px
    solid
    var(--vm-border-strong);
}


/* =========================================================
   PRODUCT PICKER HEADER
   ========================================================= */

.vm-product-picker__header {
  min-height:
    62px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  padding:
    10px
    11px;

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


.vm-product-picker__header > div {
  min-width:
    0;
}


.vm-product-picker__header strong {
  display:
    block;

  color:
    var(--vm-text);

  font-size:
    11px;

  font-weight:
    950;
}


.vm-product-picker__header span {
  display:
    block;

  margin-top:
    3px;

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

  font-size:
    8.5px;

  font-weight:
    750;
}


/* =========================================================
   SELECTED AREA
   ========================================================= */

.vm-product-picker__selected {
  padding:
    8px
    9px;

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


/* =========================================================
   SELECTED EMPTY
   ========================================================= */

.vm-comparison-selected-empty {
  min-height:
    32px;

  display:
    flex;

  align-items:
    center;

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

  font-size:
    9px;

  font-weight:
    750;
}


/* =========================================================
   SELECTED CHIPS
   ========================================================= */

.vm-comparison-selected {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    5px;

  max-height:
    118px;

  overflow-y:
    auto;

  scrollbar-width:
    thin;
}


/* =========================================================
   CHIP
   ========================================================= */

.vm-comparison-chip {
  appearance:
    none;

  min-width:
    0;

  max-width:
    100%;

  min-height:
    31px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    4px
    7px;

  color:
    var(--vm-text);

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    6px;

  cursor:
    pointer;

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


.vm-comparison-chip:hover {
  background:
    var(--vm-surface-hover);

  border-color:
    var(--vm-border-dark);
}


.vm-comparison-chip__copy {
  min-width:
    0;
}


.vm-comparison-chip__copy strong {
  display:
    block;

  max-width:
    160px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(--vm-text);

  font-size:
    8.5px;

  font-weight:
    950;
}


.vm-comparison-chip__copy small {
  display:
    block;

  margin-top:
    1px;

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

  font-size:
    7.5px;

  font-weight:
    750;
}


/* =========================================================
   PICKER SEARCH
   ========================================================= */

.vm-product-picker__search {
  padding:
    9px
    9px
    6px;
}


/* =========================================================
   PICKER SORT
   ========================================================= */

.vm-product-picker__sort {
  display:
    grid;

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

  gap:
    6px;

  padding:
    0
    9px
    7px;
}


/* =========================================================
   RESULTS INFO
   ========================================================= */

.vm-product-picker__results-info {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  padding:
    6px
    9px;

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

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

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

  font-size:
    8px;

  font-weight:
    800;
}


.vm-product-picker__results-info small {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   PICKER LIST
   ========================================================= */

.vm-product-picker__list {
  flex:
    1
    1
    auto;

  min-height:
    0;

  overflow-y:
    auto;

  padding:
    6px;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--vm-border-strong)
    transparent;
}


/* =========================================================
   PICKER ITEM
   ========================================================= */

.vm-product-picker__item {
  min-width:
    0;

  min-height:
    57px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  padding:
    7px
    8px;

  color:
    var(--vm-text-secondary);

  background:
    transparent;

  border:
    1.5px
    solid
    transparent;

  border-radius:
    7px;

  cursor:
    pointer;

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


.vm-product-picker__item:hover {
  background:
    var(--vm-surface);

  border-color:
    var(--vm-border);
}


.vm-product-picker__item.is-selected {
  color:
    var(--vm-text);

  background:
    var(--vm-surface);

  border-color:
    var(--vm-border-strong);
}


.vm-product-picker__item.is-disabled {
  opacity:
    0.42;

  cursor:
    not-allowed;
}


.vm-product-picker__item input {
  width:
    16px;

  height:
    16px;

  margin:
    0;

  accent-color:
    var(--vm-text);
}


/* =========================================================
   PICKER ITEM MAIN
   ========================================================= */

.vm-product-picker__item-main {
  min-width:
    0;
}


.vm-product-picker__item-main strong {
  display:
    block;

  min-width:
    0;

  color:
    var(--vm-text);

  font-size:
    9.5px;

  font-weight:
    950;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.vm-product-picker__item-main small {
  display:
    block;

  min-width:
    0;

  margin-top:
    3px;

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

  font-size:
    8px;

  font-weight:
    700;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   PICKER ITEM META
   ========================================================= */

.vm-product-picker__item-meta {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    2px;

  text-align:
    right;
}


.vm-product-picker__item-meta strong {
  color:
    var(--vm-text);

  font-size:
    8.5px;

  font-weight:
    950;
}


.vm-product-picker__item-meta small {
  color:
    var(--vm-text-muted);

  font-size:
    7.5px;

  font-weight:
    750;
}


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

.vm-product-picker__actions {
  padding:
    9px;

  border-top:
    1.5px
    solid
    var(--vm-border-strong);
}


.vm-product-picker__actions
.vm-btn {
  width:
    100%;
}


/* =========================================================
   COMPARISON CONTENT
   ========================================================= */

.vm-product-comparison-content {
  min-width:
    0;

  min-height:
    0;

  overflow-y:
    auto;

  padding:
    13px;

  background:
    var(--vm-surface);

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--vm-border-strong)
    transparent;
}


/* =========================================================
   COMPARISON RESULTS
   ========================================================= */

.vm-product-comparison-results {
  display:
    flex;

  flex-direction:
    column;

  gap:
    13px;

  min-width:
    0;
}


/* =========================================================
   COMPARISON SUMMARY
   ========================================================= */

.vm-product-comparison-summary {
  display:
    grid;

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

  gap:
    9px;
}


/* =========================================================
   COMPARISON PRODUCT CARD
   ========================================================= */

.vm-product-comparison-card {
  min-width:
    0;

  background:
    var(--vm-surface-soft);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    8px;

  overflow:
    hidden;
}


.vm-product-comparison-card__header {
  min-height:
    59px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  padding:
    9px
    10px;

  background:
    var(--vm-surface);

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


.vm-product-comparison-card__header > div {
  min-width:
    0;
}


.vm-product-comparison-card__header strong {
  display:
    block;

  min-width:
    0;

  color:
    var(--vm-text);

  font-size:
    10px;

  font-weight:
    950;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.vm-product-comparison-card__header span {
  display:
    block;

  margin-top:
    2px;

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

  font-size:
    8px;

  font-weight:
    700;
}


.vm-product-comparison-card dl {
  display:
    grid;

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

  gap:
    0;

  margin:
    0;
}


.vm-product-comparison-card
dl
> div {
  min-width:
    0;

  padding:
    8px
    9px;

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

  border-right:
    1px
    solid
    var(--vm-border);
}


.vm-product-comparison-card
dl
> div:nth-child(
  2n
) {
  border-right:
    0;
}


.vm-product-comparison-card dt {
  margin:
    0;

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

  font-size:
    7px;

  font-weight:
    900;

  text-transform:
    uppercase;
}


.vm-product-comparison-card dd {
  margin:
    3px
    0
    0;

  color:
    var(--vm-text)
    !important;

  font-size:
    9px;

  font-weight:
    950;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   COMPARISON CHARTS
   ========================================================= */

.vm-product-comparison-charts {
  display:
    grid;

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

  gap:
    10px;
}


/* =========================================================
   SYNC LAYOUT
   ========================================================= */

.vm-sync-layout {
  display:
    grid;

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

  gap:
    12px;

  width:
    100%;

  min-width:
    0;

  padding:
    16px;
}


/* =========================================================
   SYNC CARD
   ========================================================= */

.vm-sync-card {
  min-width:
    0;

  background:
    var(--vm-surface-soft);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    8px;

  overflow:
    hidden;
}


.vm-sync-card__header {
  min-height:
    62px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  padding:
    10px
    11px;

  background:
    var(--vm-surface);

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


.vm-sync-card__header span {
  color:
    var(--vm-text-muted);

  font-size:
    7.5px;

  font-weight:
    900;

  text-transform:
    uppercase;
}


.vm-sync-card__header strong {
  display:
    block;

  margin-top:
    3px;

  color:
    var(--vm-text);

  font-size:
    10.5px;

  font-weight:
    950;
}


/* =========================================================
   SYNC METRICS
   ========================================================= */

.vm-sync-card__metrics {
  display:
    grid;

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

  gap:
    0;
}


.vm-sync-card__metrics > div {
  min-width:
    0;

  min-height:
    65px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    4px;

  padding:
    9px
    10px;

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

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


.vm-sync-card__metrics
> div:nth-child(
  2n
) {
  border-right:
    0;
}


.vm-sync-card__metrics span {
  color:
    var(--vm-text-muted);

  font-size:
    7.5px;

  font-weight:
    900;

  text-transform:
    uppercase;
}


.vm-sync-card__metrics strong {
  color:
    var(--vm-text)
    !important;

  font-size:
    10px;

  font-weight:
    950;
}


/* =========================================================
   SYNC HISTORY
   ========================================================= */

.vm-sync-history {
  min-width:
    0;

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    8px;

  overflow:
    hidden;
}


.vm-sync-history__header {
  min-height:
    55px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    9px
    11px;

  background:
    var(--vm-surface-soft);

  border-bottom:
    1.5px
    solid
    var(--vm-border);
}


.vm-sync-history__header strong {
  color:
    var(--vm-text);

  font-size:
    10.5px;

  font-weight:
    950;
}


/* =========================================================
   SYNC STATUS
   ========================================================= */

.vm-sync-status {
  min-height:
    25px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  padding:
    0
    7px;

  color:
    var(--vm-text-secondary);

  background:
    var(--vm-surface-muted);

  border:
    1.5px
    solid
    var(--vm-border);

  border-radius:
    6px;

  font-size:
    7.5px;

  font-weight:
    950;
}


.vm-sync-status.is-complete {
  color:
    var(--vm-success-strong);

  background:
    var(--vm-success-bg);

  border-color:
    var(--vm-success-border);
}


.vm-sync-status.is-partial {
  color:
    var(--vm-warning);

  background:
    var(--vm-warning-bg);

  border-color:
    var(--vm-warning-border);
}


.vm-sync-status.is-error {
  color:
    var(--vm-danger);

  background:
    var(--vm-danger-bg);

  border-color:
    var(--vm-danger-border);
}


.vm-sync-status.is-processing {
  color:
    var(--vm-info);

  background:
    var(--vm-info-bg);

  border-color:
    var(--vm-info-border);
}


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

.vm-toast-root {
  position:
    fixed;

  top:
    82px;

  right:
    18px;

  z-index:
    1005000;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    9px;

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

  pointer-events:
    none;

  font-family:
    "DM Sans",
    "Plus Jakarta Sans",
    "Inter",
    system-ui,
    sans-serif;
}


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

.vm-toast {
  min-width:
    0;

  width:
    100%;

  min-height:
    52px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  padding:
    8px
    9px;

  color:
    var(--vm-text);

  background:
    var(--vm-surface);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    8px;

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

  opacity:
    0;

  transform:
    translateX(
      16px
    );

  pointer-events:
    auto;

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


.vm-toast.is-visible {
  opacity:
    1;

  transform:
    translateX(
      0
    );
}


.vm-toast--success {
  border-color:
    var(--vm-success-border);
}


.vm-toast--error {
  border-color:
    var(--vm-danger-border);
}


.vm-toast--warning {
  border-color:
    var(--vm-warning-border);
}


.vm-toast--info {
  border-color:
    var(--vm-info-border);
}


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

.vm-toast__icon {
  width:
    30px;

  height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    6px;
}


.vm-toast--success
.vm-toast__icon {
  color:
    var(--vm-success-strong);
}


.vm-toast--error
.vm-toast__icon {
  color:
    var(--vm-danger);
}


.vm-toast--warning
.vm-toast__icon {
  color:
    var(--vm-warning);
}


.vm-toast--info
.vm-toast__icon {
  color:
    var(--vm-info);
}


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

.vm-toast__message {
  min-width:
    0;

  color:
    var(--vm-text-secondary);

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.35;
}


/* =========================================================
   MODAL OPEN BODY
   ========================================================= */

body.ventas-mensuales-modal-open {
  overflow:
    hidden;
}


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

.vm-btn:focus-visible,
.vm-icon-btn:focus-visible,
.vm-tabbar__item:focus-visible,
.vm-segmented-control__item:focus-visible,
.vm-table-sort:focus-visible,
.vm-ranking-item:focus-visible,
.vm-export-menu__item:focus-visible,
.vm-comparison-chip:focus-visible,
.vm-input:focus-visible,
.vm-select:focus-visible,
.vm-product-picker__item:focus-visible {
  outline:
    2px
    solid
    var(--vm-text);

  outline-offset:
    2px;
}


/* =========================================================
   FIN PARTE 4 DE 5
   CONTINÚA EXACTAMENTE DESDE ACÁ
   ========================================================= *//* =========================================================
   PARTE 5 DE 5
   CONTINÚA EXACTAMENTE DESDE LA PARTE 4
   ========================================================= */


/* =========================================================
   DARK MODE · VARIABLES
   SOPORTA:
   - html.dark
   - body.dark
   - [data-theme="dark"]
   - .dark-mode
   ========================================================= */

html.dark
.executive-sales-monthly-page,
body.dark
.executive-sales-monthly-page,
html[data-theme="dark"]
.executive-sales-monthly-page,
body[data-theme="dark"]
.executive-sales-monthly-page,
[data-theme="dark"]
.executive-sales-monthly-page,
.dark-mode
.executive-sales-monthly-page,
html.dark
.vm-modal-root,
body.dark
.vm-modal-root,
html[data-theme="dark"]
.vm-modal-root,
body[data-theme="dark"]
.vm-modal-root,
[data-theme="dark"]
.vm-modal-root,
.dark-mode
.vm-modal-root,
html.dark
.vm-toast-root,
body.dark
.vm-toast-root,
html[data-theme="dark"]
.vm-toast-root,
body[data-theme="dark"]
.vm-toast-root,
[data-theme="dark"]
.vm-toast-root,
.dark-mode
.vm-toast-root {
  --vm-bg:
    #050505;

  --vm-surface:
    #090909;

  --vm-surface-soft:
    #0f0f0f;

  --vm-surface-muted:
    #151515;

  --vm-surface-hover:
    #1c1c1c;

  --vm-surface-active:
    #242424;

  --vm-border:
    #303030;

  --vm-border-strong:
    #4a4a4a;

  --vm-border-dark:
    #676767;

  --vm-border-soft:
    #252525;

  --vm-text:
    #f4f4f4;

  --vm-text-secondary:
    #d5d5d5;

  --vm-text-muted:
    #a4a4a4;

  --vm-text-soft:
    #7e7e7e;

  --vm-primary:
    #f4f4f4;

  --vm-primary-hover:
    #ffffff;

  --vm-primary-active:
    #e2e2e2;

  --vm-primary-text:
    #080808;

  --vm-success:
    #66c992;

  --vm-success-strong:
    #79d9a2;

  --vm-success-bg:
    #0d1d15;

  --vm-success-border:
    #285c3d;

  --vm-warning:
    #e1b55a;

  --vm-warning-bg:
    #21190b;

  --vm-warning-border:
    #60491d;

  --vm-danger:
    #ee8680;

  --vm-danger-bg:
    #24100f;

  --vm-danger-border:
    #69312e;

  --vm-info:
    #82acf0;

  --vm-info-bg:
    #101a27;

  --vm-info-border:
    #345273;

  --vm-chart-1:
    #f0f0f0;

  --vm-chart-2:
    #c9c9c9;

  --vm-chart-3:
    #a6a6a6;

  --vm-chart-4:
    #858585;

  --vm-chart-5:
    #686868;

  --vm-chart-6:
    #d9d9d9;

  --vm-chart-7:
    #adadad;

  --vm-chart-8:
    #777777;

  --vm-shadow-xs:
    0 1px 2px
    rgba(
      0,
      0,
      0,
      0.35
    );

  --vm-shadow-sm:
    0 4px 14px
    rgba(
      0,
      0,
      0,
      0.38
    );

  --vm-shadow-md:
    0 16px 42px
    rgba(
      0,
      0,
      0,
      0.48
    );

  --vm-shadow-modal:
    0 30px 90px
    rgba(
      0,
      0,
      0,
      0.72
    );
}


/* =========================================================
   DARK MODE · ROOT
   ========================================================= */

html.dark
.executive-sales-monthly-page,
body.dark
.executive-sales-monthly-page,
html[data-theme="dark"]
.executive-sales-monthly-page,
body[data-theme="dark"]
.executive-sales-monthly-page,
[data-theme="dark"]
.executive-sales-monthly-page,
.dark-mode
.executive-sales-monthly-page {
  color:
    var(--vm-text);

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


/* =========================================================
   DARK MODE · PAGE HEADER
   ========================================================= */

html.dark
.vm-page-header,
body.dark
.vm-page-header,
html[data-theme="dark"]
.vm-page-header,
body[data-theme="dark"]
.vm-page-header,
[data-theme="dark"]
.vm-page-header,
.dark-mode
.vm-page-header {
  color:
    var(--vm-text);

  background:
    #080808;

  border-color:
    var(--vm-border-strong);
}


/* =========================================================
   DARK MODE · PANELS
   ========================================================= */

html.dark
.vm-panel,
body.dark
.vm-panel,
html[data-theme="dark"]
.vm-panel,
body[data-theme="dark"]
.vm-panel,
[data-theme="dark"]
.vm-panel,
.dark-mode
.vm-panel,
html.dark
.vm-analytics-card,
body.dark
.vm-analytics-card,
html[data-theme="dark"]
.vm-analytics-card,
body[data-theme="dark"]
.vm-analytics-card,
[data-theme="dark"]
.vm-analytics-card,
.dark-mode
.vm-analytics-card,
html.dark
.vm-comparison-card,
body.dark
.vm-comparison-card,
html[data-theme="dark"]
.vm-comparison-card,
body[data-theme="dark"]
.vm-comparison-card,
[data-theme="dark"]
.vm-comparison-card,
.dark-mode
.vm-comparison-card,
html.dark
.vm-ranking-item,
body.dark
.vm-ranking-item,
html[data-theme="dark"]
.vm-ranking-item,
body[data-theme="dark"]
.vm-ranking-item,
[data-theme="dark"]
.vm-ranking-item,
.dark-mode
.vm-ranking-item {
  background:
    var(--vm-surface);

  border-color:
    var(--vm-border-strong);
}


/* =========================================================
   DARK MODE · SECTION HEADERS
   ========================================================= */

html.dark
.vm-section-header,
body.dark
.vm-section-header,
html[data-theme="dark"]
.vm-section-header,
body[data-theme="dark"]
.vm-section-header,
[data-theme="dark"]
.vm-section-header,
.dark-mode
.vm-section-header,
html.dark
.vm-analytics-card__header,
body.dark
.vm-analytics-card__header,
html[data-theme="dark"]
.vm-analytics-card__header,
body[data-theme="dark"]
.vm-analytics-card__header,
[data-theme="dark"]
.vm-analytics-card__header,
.dark-mode
.vm-analytics-card__header,
html.dark
.vm-modal__header,
body.dark
.vm-modal__header,
html[data-theme="dark"]
.vm-modal__header,
body[data-theme="dark"]
.vm-modal__header,
[data-theme="dark"]
.vm-modal__header,
.dark-mode
.vm-modal__header,
html.dark
.vm-modal-section__header,
body.dark
.vm-modal-section__header,
html[data-theme="dark"]
.vm-modal-section__header,
body[data-theme="dark"]
.vm-modal-section__header,
[data-theme="dark"]
.vm-modal-section__header,
.dark-mode
.vm-modal-section__header {
  color:
    var(--vm-text);

  background:
    var(--vm-surface-soft);

  border-color:
    var(--vm-border-strong);
}


/* =========================================================
   DARK MODE · CARDS
   ========================================================= */

html.dark
.vm-kpi-card,
body.dark
.vm-kpi-card,
html[data-theme="dark"]
.vm-kpi-card,
body[data-theme="dark"]
.vm-kpi-card,
[data-theme="dark"]
.vm-kpi-card,
.dark-mode
.vm-kpi-card,
html.dark
.vm-channel-card,
body.dark
.vm-channel-card,
html[data-theme="dark"]
.vm-channel-card,
body[data-theme="dark"]
.vm-channel-card,
[data-theme="dark"]
.vm-channel-card,
.dark-mode
.vm-channel-card,
html.dark
.vm-product-detail-item,
body.dark
.vm-product-detail-item,
html[data-theme="dark"]
.vm-product-detail-item,
body[data-theme="dark"]
.vm-product-detail-item,
[data-theme="dark"]
.vm-product-detail-item,
.dark-mode
.vm-product-detail-item,
html.dark
.vm-modal-summary-card,
body.dark
.vm-modal-summary-card,
html[data-theme="dark"]
.vm-modal-summary-card,
body[data-theme="dark"]
.vm-modal-summary-card,
[data-theme="dark"]
.vm-modal-summary-card,
.dark-mode
.vm-modal-summary-card {
  color:
    var(--vm-text);

  background:
    var(--vm-surface-soft);

  border-color:
    var(--vm-border-strong);
}


/* =========================================================
   DARK MODE · CHANNEL METRIC CELLS
   ========================================================= */

html.dark
.vm-channel-card__metrics > div,
body.dark
.vm-channel-card__metrics > div,
html[data-theme="dark"]
.vm-channel-card__metrics > div,
body[data-theme="dark"]
.vm-channel-card__metrics > div,
[data-theme="dark"]
.vm-channel-card__metrics > div,
.dark-mode
.vm-channel-card__metrics > div {
  background:
    var(--vm-surface);

  border-color:
    var(--vm-border);
}


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

html.dark
.vm-input,
html.dark
.vm-select,
body.dark
.vm-input,
body.dark
.vm-select,
html[data-theme="dark"]
.vm-input,
html[data-theme="dark"]
.vm-select,
body[data-theme="dark"]
.vm-input,
body[data-theme="dark"]
.vm-select,
[data-theme="dark"]
.vm-input,
[data-theme="dark"]
.vm-select,
.dark-mode
.vm-input,
.dark-mode
.vm-select {
  color:
    var(--vm-text);

  background-color:
    #0a0a0a;

  border-color:
    var(--vm-border-strong);

  color-scheme:
    dark;
}


html.dark
.vm-input::placeholder,
body.dark
.vm-input::placeholder,
html[data-theme="dark"]
.vm-input::placeholder,
body[data-theme="dark"]
.vm-input::placeholder,
[data-theme="dark"]
.vm-input::placeholder,
.dark-mode
.vm-input::placeholder {
  color:
    var(--vm-text-soft);
}


html.dark
.vm-input:focus,
html.dark
.vm-select:focus,
body.dark
.vm-input:focus,
body.dark
.vm-select:focus,
html[data-theme="dark"]
.vm-input:focus,
html[data-theme="dark"]
.vm-select:focus,
body[data-theme="dark"]
.vm-input:focus,
body[data-theme="dark"]
.vm-select:focus,
[data-theme="dark"]
.vm-input:focus,
[data-theme="dark"]
.vm-select:focus,
.dark-mode
.vm-input:focus,
.dark-mode
.vm-select:focus {
  border-color:
    #888888;

  box-shadow:
    0 0 0 2px
    rgba(
      255,
      255,
      255,
      0.06
    );
}


/* =========================================================
   DARK MODE · BUTTONS
   ========================================================= */

html.dark
.vm-btn--secondary,
html.dark
.vm-btn--ghost,
html.dark
.vm-icon-btn,
body.dark
.vm-btn--secondary,
body.dark
.vm-btn--ghost,
body.dark
.vm-icon-btn,
html[data-theme="dark"]
.vm-btn--secondary,
html[data-theme="dark"]
.vm-btn--ghost,
html[data-theme="dark"]
.vm-icon-btn,
body[data-theme="dark"]
.vm-btn--secondary,
body[data-theme="dark"]
.vm-btn--ghost,
body[data-theme="dark"]
.vm-icon-btn,
[data-theme="dark"]
.vm-btn--secondary,
[data-theme="dark"]
.vm-btn--ghost,
[data-theme="dark"]
.vm-icon-btn,
.dark-mode
.vm-btn--secondary,
.dark-mode
.vm-btn--ghost,
.dark-mode
.vm-icon-btn {
  color:
    var(--vm-text-secondary);

  background:
    var(--vm-surface-soft);

  border-color:
    var(--vm-border-strong);
}


html.dark
.vm-btn--primary,
body.dark
.vm-btn--primary,
html[data-theme="dark"]
.vm-btn--primary,
body[data-theme="dark"]
.vm-btn--primary,
[data-theme="dark"]
.vm-btn--primary,
.dark-mode
.vm-btn--primary {
  color:
    var(--vm-primary-text);

  background:
    var(--vm-primary);

  border-color:
    var(--vm-primary);
}


/* =========================================================
   DARK MODE · TABLE
   ========================================================= */

html.dark
.vm-table,
body.dark
.vm-table,
html[data-theme="dark"]
.vm-table,
body[data-theme="dark"]
.vm-table,
[data-theme="dark"]
.vm-table,
.dark-mode
.vm-table {
  color:
    var(--vm-text);

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


html.dark
.vm-table th,
body.dark
.vm-table th,
html[data-theme="dark"]
.vm-table th,
body[data-theme="dark"]
.vm-table th,
[data-theme="dark"]
.vm-table th,
.dark-mode
.vm-table th {
  color:
    var(--vm-text-secondary);

  background:
    var(--vm-surface-muted);

  border-color:
    var(--vm-border-strong);
}


html.dark
.vm-table td,
body.dark
.vm-table td,
html[data-theme="dark"]
.vm-table td,
body[data-theme="dark"]
.vm-table td,
[data-theme="dark"]
.vm-table td,
.dark-mode
.vm-table td {
  color:
    var(--vm-text-secondary);

  background:
    var(--vm-surface);

  border-color:
    var(--vm-border-soft);
}


html.dark
.vm-table tbody tr:hover td,
body.dark
.vm-table tbody tr:hover td,
html[data-theme="dark"]
.vm-table tbody tr:hover td,
body[data-theme="dark"]
.vm-table tbody tr:hover td,
[data-theme="dark"]
.vm-table tbody tr:hover td,
.dark-mode
.vm-table tbody tr:hover td {
  color:
    var(--vm-text);

  background:
    var(--vm-surface-hover);
}


/* =========================================================
   DARK MODE · NUMBERS ALWAYS LEGIBLE
   ========================================================= */

html.dark
.vm-table td.is-right,
html.dark
.vm-table td.is-center,
html.dark
.vm-kpi-card__value,
html.dark
.vm-channel-card__metrics strong,
html.dark
.vm-ranking-item__value strong,
body.dark
.vm-table td.is-right,
body.dark
.vm-table td.is-center,
body.dark
.vm-kpi-card__value,
body.dark
.vm-channel-card__metrics strong,
body.dark
.vm-ranking-item__value strong,
[data-theme="dark"]
.vm-table td.is-right,
[data-theme="dark"]
.vm-table td.is-center,
[data-theme="dark"]
.vm-kpi-card__value,
[data-theme="dark"]
.vm-channel-card__metrics strong,
[data-theme="dark"]
.vm-ranking-item__value strong,
.dark-mode
.vm-table td.is-right,
.dark-mode
.vm-table td.is-center,
.dark-mode
.vm-kpi-card__value,
.dark-mode
.vm-channel-card__metrics strong,
.dark-mode
.vm-ranking-item__value strong {
  color:
    var(--vm-text)
    !important;

  font-weight:
    950;
}


/* =========================================================
   DARK MODE · MODALS
   ========================================================= */

html.dark
.vm-modal,
body.dark
.vm-modal,
html[data-theme="dark"]
.vm-modal,
body[data-theme="dark"]
.vm-modal,
[data-theme="dark"]
.vm-modal,
.dark-mode
.vm-modal {
  color:
    var(--vm-text);

  background:
    var(--vm-surface);

  border-color:
    var(--vm-border-strong);
}


html.dark
.vm-modal__body,
body.dark
.vm-modal__body,
html[data-theme="dark"]
.vm-modal__body,
body[data-theme="dark"]
.vm-modal__body,
[data-theme="dark"]
.vm-modal__body,
.dark-mode
.vm-modal__body {
  background:
    var(--vm-surface);
}


/* =========================================================
   DARK MODE · PICKER
   ========================================================= */

html.dark
.vm-product-picker,
body.dark
.vm-product-picker,
html[data-theme="dark"]
.vm-product-picker,
body[data-theme="dark"]
.vm-product-picker,
[data-theme="dark"]
.vm-product-picker,
.dark-mode
.vm-product-picker {
  background:
    var(--vm-surface-soft);

  border-color:
    var(--vm-border-strong);
}


html.dark
.vm-product-picker__item:hover,
body.dark
.vm-product-picker__item:hover,
html[data-theme="dark"]
.vm-product-picker__item:hover,
body[data-theme="dark"]
.vm-product-picker__item:hover,
[data-theme="dark"]
.vm-product-picker__item:hover,
.dark-mode
.vm-product-picker__item:hover,
html.dark
.vm-product-picker__item.is-selected,
body.dark
.vm-product-picker__item.is-selected,
html[data-theme="dark"]
.vm-product-picker__item.is-selected,
body[data-theme="dark"]
.vm-product-picker__item.is-selected,
[data-theme="dark"]
.vm-product-picker__item.is-selected,
.dark-mode
.vm-product-picker__item.is-selected {
  color:
    var(--vm-text);

  background:
    var(--vm-surface);

  border-color:
    var(--vm-border-strong);
}


/* =========================================================
   DARK MODE · CHARTS
   ========================================================= */

html.dark
.vm-chart,
body.dark
.vm-chart,
html[data-theme="dark"]
.vm-chart,
body[data-theme="dark"]
.vm-chart,
[data-theme="dark"]
.vm-chart,
.dark-mode
.vm-chart {
  color:
    var(--vm-text);

  background:
    transparent;
}


html.dark
.vm-chart__grid,
body.dark
.vm-chart__grid,
html[data-theme="dark"]
.vm-chart__grid,
body[data-theme="dark"]
.vm-chart__grid,
[data-theme="dark"]
.vm-chart__grid,
.dark-mode
.vm-chart__grid {
  stroke:
    #343434;
}


html.dark
.vm-chart__baseline,
body.dark
.vm-chart__baseline,
html[data-theme="dark"]
.vm-chart__baseline,
body[data-theme="dark"]
.vm-chart__baseline,
[data-theme="dark"]
.vm-chart__baseline,
.dark-mode
.vm-chart__baseline {
  stroke:
    #5b5b5b;
}


html.dark
.vm-chart__axis-label,
html.dark
.vm-chart__x-label,
html.dark
.vm-chart__hbar-label,
html.dark
.vm-chart__hbar-value,
body.dark
.vm-chart__axis-label,
body.dark
.vm-chart__x-label,
body.dark
.vm-chart__hbar-label,
body.dark
.vm-chart__hbar-value,
[data-theme="dark"]
.vm-chart__axis-label,
[data-theme="dark"]
.vm-chart__x-label,
[data-theme="dark"]
.vm-chart__hbar-label,
[data-theme="dark"]
.vm-chart__hbar-value,
.dark-mode
.vm-chart__axis-label,
.dark-mode
.vm-chart__x-label,
.dark-mode
.vm-chart__hbar-label,
.dark-mode
.vm-chart__hbar-value {
  fill:
    var(--vm-text-secondary);
}


/* =========================================================
   DARK MODE · DONUT
   ========================================================= */

html.dark
.vm-chart__donut-track,
body.dark
.vm-chart__donut-track,
html[data-theme="dark"]
.vm-chart__donut-track,
body[data-theme="dark"]
.vm-chart__donut-track,
[data-theme="dark"]
.vm-chart__donut-track,
.dark-mode
.vm-chart__donut-track {
  stroke:
    #1b1b1b;
}


html.dark
.vm-donut-legend__item,
body.dark
.vm-donut-legend__item,
html[data-theme="dark"]
.vm-donut-legend__item,
body[data-theme="dark"]
.vm-donut-legend__item,
[data-theme="dark"]
.vm-donut-legend__item,
.dark-mode
.vm-donut-legend__item {
  background:
    var(--vm-surface-soft);

  border-color:
    var(--vm-border);
}


/* =========================================================
   DARK MODE · HEATMAP
   ========================================================= */

html.dark
.vm-heatmap__cell--level-0,
body.dark
.vm-heatmap__cell--level-0,
[data-theme="dark"]
.vm-heatmap__cell--level-0,
.dark-mode
.vm-heatmap__cell--level-0 {
  background:
    #0f0f0f;
}


html.dark
.vm-heatmap__cell--level-1,
body.dark
.vm-heatmap__cell--level-1,
[data-theme="dark"]
.vm-heatmap__cell--level-1,
.dark-mode
.vm-heatmap__cell--level-1 {
  background:
    #151515;
}


html.dark
.vm-heatmap__cell--level-2,
body.dark
.vm-heatmap__cell--level-2,
[data-theme="dark"]
.vm-heatmap__cell--level-2,
.dark-mode
.vm-heatmap__cell--level-2 {
  background:
    #242424;
}


html.dark
.vm-heatmap__cell--level-3,
body.dark
.vm-heatmap__cell--level-3,
[data-theme="dark"]
.vm-heatmap__cell--level-3,
.dark-mode
.vm-heatmap__cell--level-3 {
  background:
    #383838;
}


html.dark
.vm-heatmap__cell--level-4,
body.dark
.vm-heatmap__cell--level-4,
[data-theme="dark"]
.vm-heatmap__cell--level-4,
.dark-mode
.vm-heatmap__cell--level-4 {
  color:
    #ffffff;

  background:
    #696969;
}


html.dark
.vm-heatmap__cell--level-5,
body.dark
.vm-heatmap__cell--level-5,
[data-theme="dark"]
.vm-heatmap__cell--level-5,
.dark-mode
.vm-heatmap__cell--level-5 {
  color:
    #070707;

  background:
    #dedede;
}


/* =========================================================
   DARK MODE · TOOLTIP
   ========================================================= */

html.dark
.vm-chart-tooltip,
body.dark
.vm-chart-tooltip,
html[data-theme="dark"]
.vm-chart-tooltip,
body[data-theme="dark"]
.vm-chart-tooltip,
[data-theme="dark"]
.vm-chart-tooltip,
.dark-mode
.vm-chart-tooltip {
  color:
    #ffffff;

  background:
    #020202;

  border-color:
    #555555;
}


/* =========================================================
   DARK MODE · BACKDROP
   ========================================================= */

html.dark
.vm-modal-backdrop,
body.dark
.vm-modal-backdrop,
html[data-theme="dark"]
.vm-modal-backdrop,
body[data-theme="dark"]
.vm-modal-backdrop,
[data-theme="dark"]
.vm-modal-backdrop,
.dark-mode
.vm-modal-backdrop {
  background:
    rgba(
      0,
      0,
      0,
      0.78
    );
}


/* =========================================================
   DARK MODE · TOAST
   ========================================================= */

html.dark
.vm-toast,
body.dark
.vm-toast,
html[data-theme="dark"]
.vm-toast,
body[data-theme="dark"]
.vm-toast,
[data-theme="dark"]
.vm-toast,
.dark-mode
.vm-toast {
  color:
    var(--vm-text);

  background:
    var(--vm-surface);

  border-color:
    var(--vm-border-strong);
}


/* =========================================================
   LOADING STATE
   ========================================================= */

body.ventas-mensuales-loading
.vm-page-header,
body.ventas-mensuales-loading
.vm-section {
  pointer-events:
    none;
}


/* =========================================================
   DENSITY · COMPACT
   ========================================================= */

body[data-ventas-mensuales-density="compact"]
.executive-sales-monthly-page {
  --vm-section-gap:
    12px;
}


body[data-ventas-mensuales-density="compact"]
.vm-page__inner {
  padding-top:
    16px;

  padding-bottom:
    26px;
}


body[data-ventas-mensuales-density="compact"]
.vm-page-header {
  min-height:
    100px;

  padding:
    17px
    19px;
}


body[data-ventas-mensuales-density="compact"]
.vm-section-header {
  min-height:
    57px;

  padding:
    10px
    13px;
}


body[data-ventas-mensuales-density="compact"]
.vm-filters {
  gap:
    9px;

  padding:
    13px;
}


body[data-ventas-mensuales-density="compact"]
.vm-kpi-card {
  min-height:
    104px;

  padding:
    10px;
}


body[data-ventas-mensuales-density="compact"]
.vm-channel-grid,
body[data-ventas-mensuales-density="compact"]
.vm-comparison-grid,
body[data-ventas-mensuales-density="compact"]
.vm-ranking-list,
body[data-ventas-mensuales-density="compact"]
.vm-sync-layout {
  padding:
    13px;
}


body[data-ventas-mensuales-density="compact"]
.vm-table td {
  padding-top:
    6px;

  padding-bottom:
    6px;
}


body[data-ventas-mensuales-density="compact"]
.vm-table th {
  height:
    36px;
}


/* =========================================================
   DENSITY · COMFORTABLE
   ========================================================= */

body[data-ventas-mensuales-density="comfortable"]
.executive-sales-monthly-page {
  --vm-section-gap:
    16px;
}


body[data-ventas-mensuales-density="comfortable"]
.vm-page__inner {
  padding-top:
    22px;

  padding-bottom:
    38px;
}


/* =========================================================
   VIEWPORT · TABLET
   ========================================================= */

body[data-ventas-mensuales-viewport="tablet"]
.executive-sales-monthly-page {
  --vm-page-inline:
    16px;
}


/* =========================================================
   VIEWPORT · MOBILE
   ========================================================= */

body[data-ventas-mensuales-viewport="mobile"]
.executive-sales-monthly-page {
  --vm-page-inline:
    10px;
}


/* =========================================================
   RESPONSIVE · 1450
   ========================================================= */

@media (
  max-width:
  1450px
) {
  .vm-kpi-grid {
    grid-template-columns:
      repeat(
        4,
        minmax(
          0,
          1fr
        )
      );
  }


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


  .vm-comparison-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .vm-product-comparison-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


/* =========================================================
   RESPONSIVE · 1240
   ========================================================= */

@media (
  max-width:
  1240px
) {
  .vm-page-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .vm-page-header__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .vm-filters {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .vm-field--wide {
    grid-column:
      span 1;
  }


  .vm-kpi-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


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


  .vm-modal__body--split {
    grid-template-columns:
      320px
      minmax(
        0,
        1fr
      );
  }


  .vm-product-detail-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


/* =========================================================
   RESPONSIVE · 1024
   ========================================================= */

@media (
  max-width:
  1024px
) {
  .vm-page__inner {
    padding-top:
      16px;

    padding-bottom:
      28px;
  }


  .vm-section-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .vm-section-header__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .vm-section-tools {
    width:
      100%;

    justify-content:
      flex-start;
  }


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


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


  .vm-ranking-list {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .vm-analytics-grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .vm-analytics-card--wide {
    grid-column:
      auto;
  }


  .vm-product-comparison-charts {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .vm-sync-layout {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .vm-modal--comparison {
    width:
      calc(
        100vw -
        24px
      );

    height:
      calc(
        100vh -
        24px
      );
  }


  .vm-modal__body--split {
    grid-template-columns:
      300px
      minmax(
        0,
        1fr
      );
  }


  .vm-modal-summary-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .vm-donut-layout {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }
}


/* =========================================================
   RESPONSIVE · 820
   ========================================================= */

@media (
  max-width:
  820px
) {
  .vm-page-header {
    padding:
      18px;
  }


  .vm-page-header__actions {
    display:
      grid;

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


  .vm-page-header__actions
  .vm-btn,
  .vm-page-header__actions
  .vm-export-wrap {
    width:
      100%;
  }


  .vm-page-header__actions
  .vm-export-wrap
  .vm-btn {
    width:
      100%;
  }


  .vm-export-menu {
    left:
      0;

    right:
      auto;

    width:
      100%;
  }


  .vm-channel-grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .vm-comparison-periods {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .vm-comparison-period__arrow {
    margin:
      0
      auto;

    transform:
      rotate(
        90deg
      );
  }


  .vm-comparison-grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .vm-evolution-toolbar {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .vm-segmented-control {
    width:
      100%;

    overflow-x:
      auto;
  }


  .vm-segmented-control__item {
    flex:
      0
      0
      auto;
  }


  .vm-modal__body--split {
    display:
      flex;

    flex-direction:
      column;

    overflow-y:
      auto;
  }


  .vm-product-picker {
    flex:
      0
      0
      auto;

    max-height:
      460px;

    border-right:
      0;

    border-bottom:
      1.5px
      solid
      var(--vm-border-strong);
  }


  .vm-product-comparison-content {
    overflow:
      visible;
  }


  .vm-product-comparison-summary {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }
}


/* =========================================================
   RESPONSIVE · MOBILE
   ========================================================= */

@media (
  max-width:
  640px
) {
  .executive-sales-monthly-page {
    font-size:
      13px;
  }


  .vm-page__inner {
    gap:
      11px;

    padding:
      11px
      9px
      22px;
  }


  .vm-page-header {
    min-height:
      auto;

    gap:
      15px;

    padding:
      14px;

    border-radius:
      9px;
  }


  .vm-page-header__title {
    font-size:
      22px;
  }


  .vm-page-header__subtitle {
    font-size:
      11px;
  }


  .vm-page-header__meta {
    width:
      100%;
  }


  .vm-page-header__meta > span {
    width:
      100%;

    white-space:
      normal;
  }


  .vm-page-header__actions {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .vm-section-header {
    min-height:
      auto;

    padding:
      11px;
  }


  .vm-section-header__copy h2 {
    font-size:
      12.5px;
  }


  .vm-section-header__copy p {
    font-size:
      9.5px;
  }


  .vm-section-header__actions,
  .vm-section-tools {
    width:
      100%;
  }


  .vm-section-tools
  .vm-select,
  .vm-section-tools
  .vm-btn {
    width:
      100%;
  }


  .vm-columns-wrap {
    width:
      100%;
  }


  .vm-columns-wrap
  .vm-btn {
    width:
      100%;
  }


  .vm-columns-popover {
    left:
      0;

    right:
      0;

    width:
      100%;
  }


  .vm-filters {
    grid-template-columns:
      minmax(
        0,
        1fr
      );

    gap:
      9px;

    padding:
      11px;
  }


  .vm-field--wide {
    grid-column:
      auto;
  }


  .vm-filter-actions {
    display:
      grid;

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

    padding-top:
      9px;
  }


  .vm-filter-actions
  .vm-btn {
    width:
      100%;
  }


  .vm-kpi-grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );

    gap:
      8px;
  }


  .vm-kpi-card {
    min-height:
      102px;
  }


  .vm-kpi-card__value {
    font-size:
      19px;
  }


  .vm-channel-grid {
    padding:
      11px;
  }


  .vm-channel-card__metrics {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .vm-ranking-list {
    padding:
      11px;
  }


  .vm-ranking-item {
    grid-template-columns:
      30px
      minmax(
        0,
        1fr
      );

    gap:
      8px;
  }


  .vm-ranking-item__value {
    grid-column:
      2;

    align-items:
      flex-start;

    text-align:
      left;
  }


  .vm-comparison-grid {
    padding:
      11px;
  }


  .vm-comparison-periods {
    padding:
      11px;
  }


  .vm-pagination {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .vm-pagination__controls {
    justify-content:
      space-between;

    width:
      100%;
  }


  .vm-pagination__controls
  .vm-select {
    min-width:
      0;

    flex:
      1
      1
      auto;
  }


  .vm-table {
    min-width:
      860px;
  }


  .vm-analytics-content {
    padding:
      11px;
  }


  .vm-analytics-card {
    min-height:
      245px;
  }


  .vm-chart svg {
    min-height:
      175px;
  }


  .vm-modal-backdrop {
    align-items:
      stretch;

    padding:
      7px;
  }


  .vm-modal,
  .vm-modal--xl,
  .vm-modal--comparison {
    width:
      100%;

    height:
      auto;

    max-height:
      calc(
        100vh -
        14px
      );

    border-radius:
      9px;
  }


  .vm-modal--comparison {
    height:
      calc(
        100vh -
        14px
      );
  }


  .vm-modal__header {
    min-height:
      66px;

    padding:
      12px;
  }


  .vm-modal__header h3 {
    font-size:
      16px;
  }


  .vm-modal__body {
    padding:
      11px;
  }


  .vm-modal__body--split {
    padding:
      0;
  }


  .vm-modal-summary-grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );

    gap:
      7px;
  }


  .vm-modal-summary-card {
    min-height:
      66px;
  }


  .vm-product-detail-grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );

    padding:
      9px;
  }


  .vm-product-picker {
    max-height:
      52vh;
  }


  .vm-product-picker__item-meta {
    display:
      none;
  }


  .vm-product-comparison-content {
    padding:
      9px;
  }


  .vm-product-comparison-card dl {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .vm-product-comparison-card
  dl
  > div {
    border-right:
      0;
  }


  .vm-sync-layout {
    padding:
      11px;
  }


  .vm-sync-card__metrics {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .vm-sync-card__metrics
  > div {
    border-right:
      0;
  }


  .vm-stacked-bar__legend {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .vm-toast-root {
    top:
      68px;

    right:
      8px;

    left:
      8px;

    width:
      auto;
  }


  .vm-chart-tooltip {
    max-width:
      calc(
        100vw -
        24px
      );
  }
}


/* =========================================================
   RESPONSIVE · VERY SMALL
   ========================================================= */

@media (
  max-width:
  420px
) {
  .vm-page__inner {
    padding-left:
      7px;

    padding-right:
      7px;
  }


  .vm-page-header__title-row {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .vm-page-header__badge {
    align-self:
      flex-start;
  }


  .vm-tabbar {
    width:
      100%;

    overflow-x:
      auto;

    flex-wrap:
      nowrap;

    scrollbar-width:
      thin;
  }


  .vm-tabbar__item {
    flex:
      0
      0
      auto;
  }


  .vm-product-picker__sort {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      34px;
  }


  .vm-comparison-chip__copy
  strong {
    max-width:
      130px;
  }
}


/* =========================================================
   TOUCH
   ========================================================= */

@media (
  hover:
  none
) {
  .vm-btn:hover:not(:disabled),
  .vm-icon-btn:hover:not(:disabled),
  .vm-kpi-card:hover,
  .vm-channel-card:hover,
  .vm-ranking-item:hover,
  .vm-heatmap__cell:hover {
    transform:
      none;
  }
}


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

@media (
  prefers-reduced-motion:
  reduce
) {
  .executive-sales-monthly-page *,
  .executive-sales-monthly-page *::before,
  .executive-sales-monthly-page *::after,
  .vm-modal-root *,
  .vm-modal-root *::before,
  .vm-modal-root *::after,
  .vm-toast-root *,
  .vm-toast-root *::before,
  .vm-toast-root *::after,
  .vm-chart-tooltip {
    scroll-behavior:
      auto
      !important;

    animation-duration:
      0.001ms
      !important;

    animation-iteration-count:
      1
      !important;

    transition-duration:
      0.001ms
      !important;
  }


  .vm-chart,
  .vm-donut-layout,
  .vm-radial,
  .vm-heatmap,
  .vm-stacked-bar {
    opacity:
      1
      !important;

    transform:
      none
      !important;
  }


  .vm-chart__bar,
  .vm-chart__hbar,
  .vm-chart__group-bar,
  .vm-waterfall__bar,
  .vm-chart__donut-segment {
    opacity:
      1
      !important;

    transform:
      none
      !important;
  }
}


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

@media print {
  .executive-sales-monthly-page {
    color:
      #000000;

    background:
      #ffffff;
  }


  .vm-page__inner {
    max-width:
      none;

    padding:
      0;
  }


  .vm-page-header,
  .vm-panel,
  .vm-kpi-card,
  .vm-channel-card,
  .vm-analytics-card,
  .vm-ranking-item {
    break-inside:
      avoid;

    box-shadow:
      none;
  }


  .vm-page-header__actions,
  .vm-section-header__actions,
  .vm-filter-actions,
  .vm-pagination,
  .vm-modal-root,
  .vm-toast-root {
    display:
      none
      !important;
  }


  .vm-table-wrap {
    overflow:
      visible;
  }


  .vm-table {
    min-width:
      0;

    font-size:
      8px;
  }
}


/* =========================================================
   KEYFRAMES · ENTER
   ========================================================= */

@keyframes vmEnter {
  from {
    opacity:
      0;

    transform:
      translateY(
        7px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


/* =========================================================
   KEYFRAMES · FADE
   ========================================================= */

@keyframes vmFadeIn {
  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}


/* =========================================================
   KEYFRAMES · DROP
   ========================================================= */

@keyframes vmDrop {
  from {
    opacity:
      0;

    transform:
      translateY(
        -5px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


/* =========================================================
   KEYFRAMES · MODAL
   ========================================================= */

@keyframes vmModalEnter {
  from {
    opacity:
      0;

    transform:
      translateY(
        9px
      )
      scale(
        0.987
      );
  }

  to {
    opacity:
      1;

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


/* =========================================================
   KEYFRAMES · SPIN
   ========================================================= */

@keyframes vmSpin {
  from {
    transform:
      rotate(
        0deg
      );
  }

  to {
    transform:
      rotate(
        360deg
      );
  }
}


/* =========================================================
   KEYFRAMES · SKELETON
   ========================================================= */

@keyframes vmSkeleton {
  0% {
    background-position:
      220%
      0;
  }

  100% {
    background-position:
      -220%
      0;
  }
}


/* =========================================================
   KEYFRAMES · DRAW LINE
   ========================================================= */

@keyframes vmDrawLine {
  from {
    stroke-dashoffset:
      1;
  }

  to {
    stroke-dashoffset:
      0;
  }
}


/* =========================================================
   KEYFRAMES · AREA
   ========================================================= */

@keyframes vmAreaFade {
  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}


/* =========================================================
   KEYFRAMES · BAR
   ========================================================= */

@keyframes vmBarGrow {
  from {
    opacity:
      0;

    transform:
      scaleY(
        0.02
      );
  }

  to {
    opacity:
      1;

    transform:
      scaleY(
        1
      );
  }
}


/* =========================================================
   KEYFRAMES · HORIZONTAL
   ========================================================= */

@keyframes vmHorizontalGrow {
  from {
    opacity:
      0;

    transform:
      scaleX(
        0
      );
  }

  to {
    opacity:
      1;

    transform:
      scaleX(
        1
      );
  }
}


/* =========================================================
   KEYFRAMES · DONUT
   ========================================================= */

@keyframes vmDonutFade {
  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}


/* =========================================================
   KEYFRAMES · RADIAL
   ========================================================= */

@keyframes vmRadialDraw {
  from {
    stroke-dashoffset:
      520;
  }

  to {
    stroke-dashoffset:
      0;
  }
}


/* =========================================================
   FINAL SAFETY · CHARTS
   NUNCA QUEDAN INVISIBLES POR EL OBSERVER
   ========================================================= */

.vm-chart,
.vm-donut-layout,
.vm-radial,
.vm-heatmap,
.vm-stacked-bar {
  opacity:
    1
    !important;

  transform:
    none
    !important;
}


.vm-chart__bar,
.vm-chart__hbar,
.vm-chart__group-bar,
.vm-waterfall__bar,
.vm-chart__donut-segment {
  opacity:
    1
    !important;
}


/* =========================================================
   FINAL SAFETY · LINES
   ========================================================= */

.vm-chart__line--animated,
.vm-chart__multi-line,
.vm-sparkline__line {
  stroke-dasharray:
    none
    !important;

  stroke-dashoffset:
    0
    !important;
}


/* =========================================================
   FINAL SAFETY · NUMBERS
   ========================================================= */

.vm-kpi-card__value,
.vm-channel-card__metrics strong,
.vm-ranking-item__value strong,
.vm-comparison-card__main > strong,
.vm-modal-summary-card strong,
.vm-table td.is-right,
.vm-table td.is-center {
  color:
    var(--vm-text)
    !important;

  font-weight:
    950;
}


/* =========================================================
   FINAL SAFETY · NO HORIZONTAL PAGE SCROLL
   ========================================================= */

.executive-sales-monthly-page,
.executive-sales-monthly-page
.vm-panel,
.executive-sales-monthly-page
.vm-page-header,
.executive-sales-monthly-page
.vm-section,
.executive-sales-monthly-page
.vm-analytics-grid,
.executive-sales-monthly-page
.vm-kpi-grid,
.executive-sales-monthly-page
.vm-channel-grid {
  max-width:
    100%;
}


/* =========================================================
   FINAL SAFETY · Z INDEX
   ========================================================= */

.vm-modal-root,
.vm-modal-backdrop {
  z-index:
    999999
    !important;
}


.vm-toast-root {
  z-index:
    1005000
    !important;
}


.vm-export-menu,
.vm-columns-popover {
  z-index:
    1000
    !important;
}


/* =========================================================
   FINAL
   ========================================================= */

.executive-sales-monthly-page,
.vm-modal-root,
.vm-toast-root {
  font-synthesis:
    none;

  text-rendering:
    optimizeLegibility;

  -webkit-font-smoothing:
    antialiased;

  -moz-osx-font-smoothing:
    grayscale;
}


/* =========================================================
   FIN
   WIRTZ HUB · DIRECCIÓN EJECUTIVA
   VENTAS MENSUALES
   CSS COMPLETO · 5 DE 5
   ========================================================= *//* =========================================================
   VENTAS MENSUALES
   FIX VISUAL FINAL · CHART COLORS + CLIPPING
   PEGAR AL FINAL DEL CSS
   ========================================================= */


/* =========================================================
   PALETA EJECUTIVA
   ========================================================= */

.executive-sales-monthly-page,
.vm-modal-root,
.vm-chart-tooltip {
  --vm-series-blue:
    #4f8cff;

  --vm-series-cyan:
    #38bdf8;

  --vm-series-green:
    #4fd69c;

  --vm-series-yellow:
    #f2c94c;

  --vm-series-orange:
    #f59e42;

  --vm-series-red:
    #ef6b6b;

  --vm-series-purple:
    #9b7cff;

  --vm-series-pink:
    #e879c5;

  --vm-series-teal:
    #36c5b4;

  --vm-series-lime:
    #95d85b;
}


/* =========================================================
   SVG · EVITAR CORTE DE PUNTAS / LABELS
   ========================================================= */

.vm-chart {
  overflow:
    visible
    !important;

  padding-left:
    12px;

  padding-right:
    18px;

  padding-bottom:
    8px;
}


.vm-chart svg {
  overflow:
    visible
    !important;

  max-width:
    100%;
}


/* =========================================================
   ANALYTICS BODY · NO CORTAR GRÁFICOS
   ========================================================= */

.vm-analytics-card__body {
  overflow:
    visible
    !important;

  padding-left:
    20px;

  padding-right:
    24px;

  padding-bottom:
    20px;
}


/* =========================================================
   MODAL · NO CORTAR GRÁFICOS
   ========================================================= */

.vm-modal-section {
  overflow:
    visible;
}


.vm-modal-section__header {
  border-radius:
    8px
    8px
    0
    0;
}


.vm-modal-section
.vm-chart {
  padding-left:
    18px;

  padding-right:
    28px;

  padding-bottom:
    14px;
}


.vm-modal-section
.vm-chart svg {
  overflow:
    visible
    !important;
}


/* =========================================================
   PRODUCT DETAIL · MÁS ESPACIO EN EXTREMOS
   ========================================================= */

.vm-modal
.vm-chart--line,
.vm-modal
.vm-chart--area {
  padding-left:
    22px;

  padding-right:
    34px;
}


/* =========================================================
   X AXIS LABEL · FIRME
   ========================================================= */

.vm-chart__x-label {
  fill:
    var(--vm-text-secondary);

  font-size:
    9px;

  font-weight:
    900;
}


/* =========================================================
   AXIS LABEL
   ========================================================= */

.vm-chart__axis-label {
  fill:
    var(--vm-text-muted);

  font-size:
    8.5px;

  font-weight:
    850;
}


/* =========================================================
   DONUT · CANALES · COLORES
   ========================================================= */

.vm-chart__donut-segment--1 {
  stroke:
    var(--vm-series-blue)
    !important;

  background:
    var(--vm-series-blue)
    !important;
}


.vm-chart__donut-segment--2 {
  stroke:
    var(--vm-series-green)
    !important;

  background:
    var(--vm-series-green)
    !important;
}


.vm-chart__donut-segment--3 {
  stroke:
    var(--vm-series-purple)
    !important;

  background:
    var(--vm-series-purple)
    !important;
}


.vm-chart__donut-segment--4 {
  stroke:
    var(--vm-series-orange)
    !important;

  background:
    var(--vm-series-orange)
    !important;
}


.vm-chart__donut-segment--5 {
  stroke:
    var(--vm-series-cyan)
    !important;

  background:
    var(--vm-series-cyan)
    !important;
}


.vm-chart__donut-segment--6 {
  stroke:
    var(--vm-series-pink)
    !important;

  background:
    var(--vm-series-pink)
    !important;
}


.vm-chart__donut-segment--7 {
  stroke:
    var(--vm-series-yellow)
    !important;

  background:
    var(--vm-series-yellow)
    !important;
}


.vm-chart__donut-segment--8 {
  stroke:
    var(--vm-series-teal)
    !important;

  background:
    var(--vm-series-teal)
    !important;
}


/* =========================================================
   DONUT · LEYENDA
   ========================================================= */

.vm-donut-legend__dot.vm-chart__donut-segment--1 {
  background:
    var(--vm-series-blue)
    !important;
}


.vm-donut-legend__dot.vm-chart__donut-segment--2 {
  background:
    var(--vm-series-green)
    !important;
}


.vm-donut-legend__dot.vm-chart__donut-segment--3 {
  background:
    var(--vm-series-purple)
    !important;
}


.vm-donut-legend__dot.vm-chart__donut-segment--4 {
  background:
    var(--vm-series-orange)
    !important;
}


.vm-donut-legend__dot.vm-chart__donut-segment--5 {
  background:
    var(--vm-series-cyan)
    !important;
}


.vm-donut-legend__dot.vm-chart__donut-segment--6 {
  background:
    var(--vm-series-pink)
    !important;
}


.vm-donut-legend__dot.vm-chart__donut-segment--7 {
  background:
    var(--vm-series-yellow)
    !important;
}


.vm-donut-legend__dot.vm-chart__donut-segment--8 {
  background:
    var(--vm-series-teal)
    !important;
}


/* =========================================================
   DONUT · TRACK
   ========================================================= */

.vm-chart__donut-track {
  stroke:
    var(--vm-surface-muted)
    !important;
}


/* =========================================================
   DONUT · MÁS DEFINICIÓN
   ========================================================= */

.vm-chart__donut-segment {
  opacity:
    1
    !important;

  filter:
    none;

  transition:
    opacity
    120ms
    ease,
    stroke-width
    120ms
    ease;
}


.vm-chart__donut-segment:hover {
  opacity:
    0.82
    !important;

  stroke-width:
    30px;
}


/* =========================================================
   HORIZONTAL BARS · COLORES POR FILA
   GANANCIA POR CANAL / PRODUCTOS / CLIENTES
   ========================================================= */

.vm-chart--horizontal-bars
.vm-chart__hbar-group:nth-of-type(
  8n + 1
)
.vm-chart__hbar {
  fill:
    var(--vm-series-blue)
    !important;
}


.vm-chart--horizontal-bars
.vm-chart__hbar-group:nth-of-type(
  8n + 2
)
.vm-chart__hbar {
  fill:
    var(--vm-series-green)
    !important;
}


.vm-chart--horizontal-bars
.vm-chart__hbar-group:nth-of-type(
  8n + 3
)
.vm-chart__hbar {
  fill:
    var(--vm-series-purple)
    !important;
}


.vm-chart--horizontal-bars
.vm-chart__hbar-group:nth-of-type(
  8n + 4
)
.vm-chart__hbar {
  fill:
    var(--vm-series-orange)
    !important;
}


.vm-chart--horizontal-bars
.vm-chart__hbar-group:nth-of-type(
  8n + 5
)
.vm-chart__hbar {
  fill:
    var(--vm-series-cyan)
    !important;
}


.vm-chart--horizontal-bars
.vm-chart__hbar-group:nth-of-type(
  8n + 6
)
.vm-chart__hbar {
  fill:
    var(--vm-series-pink)
    !important;
}


.vm-chart--horizontal-bars
.vm-chart__hbar-group:nth-of-type(
  8n + 7
)
.vm-chart__hbar {
  fill:
    var(--vm-series-yellow)
    !important;
}


.vm-chart--horizontal-bars
.vm-chart__hbar-group:nth-of-type(
  8n + 8
)
.vm-chart__hbar {
  fill:
    var(--vm-series-teal)
    !important;
}


/* =========================================================
   NEGATIVE BAR · SIEMPRE ROJO
   ========================================================= */

.vm-chart--horizontal-bars
.vm-chart__hbar.is-negative {
  fill:
    var(--vm-series-red)
    !important;
}


/* =========================================================
   HORIZONTAL LABELS
   ========================================================= */

.vm-chart--horizontal-bars
.vm-chart__hbar-label {
  fill:
    var(--vm-text-secondary)
    !important;

  font-size:
    9px;

  font-weight:
    900;
}


.vm-chart--horizontal-bars
.vm-chart__hbar-value {
  fill:
    var(--vm-text)
    !important;

  font-size:
    9px;

  font-weight:
    950;
}


/* =========================================================
   BAR CHART · VERTICAL · COLOR
   ========================================================= */

.vm-chart--bars
.vm-chart__bar:nth-of-type(
  8n + 1
) {
  fill:
    var(--vm-series-blue)
    !important;
}


.vm-chart--bars
.vm-chart__bar:nth-of-type(
  8n + 2
) {
  fill:
    var(--vm-series-green)
    !important;
}


.vm-chart--bars
.vm-chart__bar:nth-of-type(
  8n + 3
) {
  fill:
    var(--vm-series-purple)
    !important;
}


.vm-chart--bars
.vm-chart__bar:nth-of-type(
  8n + 4
) {
  fill:
    var(--vm-series-orange)
    !important;
}


.vm-chart--bars
.vm-chart__bar:nth-of-type(
  8n + 5
) {
  fill:
    var(--vm-series-cyan)
    !important;
}


.vm-chart--bars
.vm-chart__bar:nth-of-type(
  8n + 6
) {
  fill:
    var(--vm-series-pink)
    !important;
}


.vm-chart--bars
.vm-chart__bar:nth-of-type(
  8n + 7
) {
  fill:
    var(--vm-series-yellow)
    !important;
}


.vm-chart--bars
.vm-chart__bar:nth-of-type(
  8n + 8
) {
  fill:
    var(--vm-series-teal)
    !important;
}


/* =========================================================
   EVOLUTION · FACTURACIÓN
   ========================================================= */

.vm-chart--area
.vm-chart__line {
  stroke:
    var(--vm-series-blue)
    !important;
}


.vm-chart--area
.vm-chart__point {
  fill:
    var(--vm-surface);

  stroke:
    var(--vm-series-blue)
    !important;
}


.vm-chart--area
.vm-chart__area-stop--start {
  stop-color:
    var(--vm-series-blue)
    !important;

  stop-opacity:
    0.28;
}


.vm-chart--area
.vm-chart__area-stop--end {
  stop-color:
    var(--vm-series-blue)
    !important;

  stop-opacity:
    0.015;
}


/* =========================================================
   PRODUCT DETAIL · LINE COLOR
   ========================================================= */

.vm-modal
.vm-chart--line
.vm-chart__line {
  stroke:
    var(--vm-series-purple)
    !important;

  stroke-width:
    3
    !important;
}


.vm-modal
.vm-chart--line
.vm-chart__point {
  fill:
    var(--vm-surface)
    !important;

  stroke:
    var(--vm-series-purple)
    !important;

  stroke-width:
    2.3;
}


.vm-modal
.vm-chart--line
.vm-chart__point:hover {
  fill:
    var(--vm-series-purple)
    !important;
}


/* =========================================================
   PRODUCT DETAIL · AREA COLOR
   ========================================================= */

.vm-modal
.vm-chart--area
.vm-chart__line {
  stroke:
    var(--vm-series-cyan)
    !important;
}


.vm-modal
.vm-chart--area
.vm-chart__point {
  stroke:
    var(--vm-series-cyan)
    !important;
}


/* =========================================================
   MULTI PRODUCT · SERIES 1
   ========================================================= */

.vm-chart__multi-line--1 {
  stroke:
    var(--vm-series-blue)
    !important;
}


.vm-chart__multi-point--1 {
  fill:
    var(--vm-series-blue)
    !important;
}


.vm-chart-legend__dot--1 {
  background:
    var(--vm-series-blue)
    !important;
}


/* =========================================================
   MULTI PRODUCT · SERIES 2
   ========================================================= */

.vm-chart__multi-line--2 {
  stroke:
    var(--vm-series-green)
    !important;
}


.vm-chart__multi-point--2 {
  fill:
    var(--vm-series-green)
    !important;
}


.vm-chart-legend__dot--2 {
  background:
    var(--vm-series-green)
    !important;
}


/* =========================================================
   MULTI PRODUCT · SERIES 3
   ========================================================= */

.vm-chart__multi-line--3 {
  stroke:
    var(--vm-series-purple)
    !important;
}


.vm-chart__multi-point--3 {
  fill:
    var(--vm-series-purple)
    !important;
}


.vm-chart-legend__dot--3 {
  background:
    var(--vm-series-purple)
    !important;
}


/* =========================================================
   MULTI PRODUCT · SERIES 4
   ========================================================= */

.vm-chart__multi-line--4 {
  stroke:
    var(--vm-series-orange)
    !important;
}


.vm-chart__multi-point--4 {
  fill:
    var(--vm-series-orange)
    !important;
}


.vm-chart-legend__dot--4 {
  background:
    var(--vm-series-orange)
    !important;
}


/* =========================================================
   MULTI PRODUCT · SERIES 5
   ========================================================= */

.vm-chart__multi-line--5 {
  stroke:
    var(--vm-series-cyan)
    !important;
}


.vm-chart__multi-point--5 {
  fill:
    var(--vm-series-cyan)
    !important;
}


.vm-chart-legend__dot--5 {
  background:
    var(--vm-series-cyan)
    !important;
}


/* =========================================================
   MULTI PRODUCT · SERIES 6
   ========================================================= */

.vm-chart__multi-line--6 {
  stroke:
    var(--vm-series-pink)
    !important;
}


.vm-chart__multi-point--6 {
  fill:
    var(--vm-series-pink)
    !important;
}


.vm-chart-legend__dot--6 {
  background:
    var(--vm-series-pink)
    !important;
}


/* =========================================================
   MULTI PRODUCT · SERIES 7
   ========================================================= */

.vm-chart__multi-line--7 {
  stroke:
    var(--vm-series-yellow)
    !important;
}


.vm-chart__multi-point--7 {
  fill:
    var(--vm-series-yellow)
    !important;
}


.vm-chart-legend__dot--7 {
  background:
    var(--vm-series-yellow)
    !important;
}


/* =========================================================
   MULTI PRODUCT · SERIES 8
   ========================================================= */

.vm-chart__multi-line--8 {
  stroke:
    var(--vm-series-teal)
    !important;
}


.vm-chart__multi-point--8 {
  fill:
    var(--vm-series-teal)
    !important;
}


.vm-chart-legend__dot--8 {
  background:
    var(--vm-series-teal)
    !important;
}


/* =========================================================
   MULTI PRODUCT · POINTS
   ========================================================= */

.vm-chart__multi-point {
  stroke:
    var(--vm-surface)
    !important;

  stroke-width:
    2
    !important;
}


/* =========================================================
   SPARKLINES · COLOR FIRME
   ========================================================= */

.vm-sparkline.is-positive
.vm-sparkline__line {
  stroke:
    var(--vm-series-green)
    !important;
}


.vm-sparkline.is-positive
.vm-sparkline__point {
  fill:
    var(--vm-series-green)
    !important;
}


.vm-sparkline.is-negative
.vm-sparkline__line {
  stroke:
    var(--vm-series-red)
    !important;
}


.vm-sparkline.is-negative
.vm-sparkline__point {
  fill:
    var(--vm-series-red)
    !important;
}


.vm-sparkline.is-neutral
.vm-sparkline__line {
  stroke:
    var(--vm-series-blue)
    !important;
}


.vm-sparkline.is-neutral
.vm-sparkline__point {
  fill:
    var(--vm-series-blue)
    !important;
}


/* =========================================================
   RADIAL · COLOR
   ========================================================= */

.vm-radial__value {
  stroke:
    var(--vm-series-green)
    !important;
}


/* =========================================================
   WATERFALL · COLORS
   ========================================================= */

.vm-waterfall__bar.is-positive {
  fill:
    var(--vm-series-green)
    !important;
}


.vm-waterfall__bar.is-negative {
  fill:
    var(--vm-series-red)
    !important;
}


.vm-waterfall__bar.is-total {
  fill:
    var(--vm-series-blue)
    !important;
}


/* =========================================================
   STACKED BAR
   ========================================================= */

.vm-stacked-bar__segment--1 {
  background:
    var(--vm-series-blue)
    !important;
}


.vm-stacked-bar__segment--2 {
  background:
    var(--vm-series-green)
    !important;
}


.vm-stacked-bar__segment--3 {
  background:
    var(--vm-series-purple)
    !important;
}


.vm-stacked-bar__segment--4 {
  background:
    var(--vm-series-orange)
    !important;
}


/* =========================================================
   STACKED LEGEND
   ========================================================= */

.vm-stacked-bar__legend-dot--1 {
  background:
    var(--vm-series-blue)
    !important;
}


.vm-stacked-bar__legend-dot--2 {
  background:
    var(--vm-series-green)
    !important;
}


.vm-stacked-bar__legend-dot--3 {
  background:
    var(--vm-series-purple)
    !important;
}


.vm-stacked-bar__legend-dot--4 {
  background:
    var(--vm-series-orange)
    !important;
}


/* =========================================================
   DARK · COLORES VIVOS SIN GLOW
   ========================================================= */

html.dark
.executive-sales-monthly-page,
body.dark
.executive-sales-monthly-page,
html[data-theme="dark"]
.executive-sales-monthly-page,
body[data-theme="dark"]
.executive-sales-monthly-page,
[data-theme="dark"]
.executive-sales-monthly-page,
.dark-mode
.executive-sales-monthly-page,
html.dark
.vm-modal-root,
body.dark
.vm-modal-root,
[data-theme="dark"]
.vm-modal-root,
.dark-mode
.vm-modal-root {
  --vm-series-blue:
    #5b93ff;

  --vm-series-cyan:
    #44c7f4;

  --vm-series-green:
    #61dca3;

  --vm-series-yellow:
    #f0c75e;

  --vm-series-orange:
    #f3a255;

  --vm-series-red:
    #ef7772;

  --vm-series-purple:
    #a28aff;

  --vm-series-pink:
    #e68ac8;

  --vm-series-teal:
    #48cabb;

  --vm-series-lime:
    #9edc69;
}


/* =========================================================
   DARK · GRIDS MÁS SUAVES
   ========================================================= */

html.dark
.vm-chart__grid,
body.dark
.vm-chart__grid,
[data-theme="dark"]
.vm-chart__grid,
.dark-mode
.vm-chart__grid {
  stroke:
    #313131
    !important;
}


/* =========================================================
   DARK · BASELINE
   ========================================================= */

html.dark
.vm-chart__baseline,
body.dark
.vm-chart__baseline,
[data-theme="dark"]
.vm-chart__baseline,
.dark-mode
.vm-chart__baseline {
  stroke:
    #555555
    !important;
}


/* =========================================================
   DARK · TEXTOS DE GRÁFICOS
   ========================================================= */

html.dark
.vm-chart__x-label,
html.dark
.vm-chart__axis-label,
html.dark
.vm-chart__hbar-label,
html.dark
.vm-chart__hbar-value,
body.dark
.vm-chart__x-label,
body.dark
.vm-chart__axis-label,
body.dark
.vm-chart__hbar-label,
body.dark
.vm-chart__hbar-value,
[data-theme="dark"]
.vm-chart__x-label,
[data-theme="dark"]
.vm-chart__axis-label,
[data-theme="dark"]
.vm-chart__hbar-label,
[data-theme="dark"]
.vm-chart__hbar-value,
.dark-mode
.vm-chart__x-label,
.dark-mode
.vm-chart__axis-label,
.dark-mode
.vm-chart__hbar-label,
.dark-mode
.vm-chart__hbar-value {
  fill:
    #d5d5d5
    !important;
}


/* =========================================================
   DARK · PRODUCT DETAIL
   ========================================================= */

html.dark
.vm-modal-section,
body.dark
.vm-modal-section,
[data-theme="dark"]
.vm-modal-section,
.dark-mode
.vm-modal-section {
  background:
    #080808;

  border-color:
    #404040;
}


/* =========================================================
   MOBILE · NO CORTAR LABELS
   ========================================================= */

@media (
  max-width:
  640px
) {
  .vm-chart {
    padding-left:
      7px;

    padding-right:
      14px;
  }


  .vm-modal-section
  .vm-chart {
    padding-left:
      10px;

    padding-right:
      18px;
  }


  .vm-analytics-card__body {
    padding-left:
      12px;

    padding-right:
      14px;
  }
}/* =========================================================
   PRODUCTOS · COLUMNAS FINANCIERAS
   GANANCIA / MARGEN
   FONDO, NO COLOR DE TEXTO
   ========================================================= */


/* =========================================================
   RESTAURAR COLOR DE TEXTO
   ========================================================= */

.vm-table
tbody
td[data-column="ganancia"],
.vm-table
tbody
td[data-column="ganancia"] *,
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"],
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"] *,
.vm-table
tbody
td[data-column="margen"],
.vm-table
tbody
td[data-column="margen"] * {
  color:
    var(--vm-text)
    !important;
}


/* =========================================================
   GANANCIA · FONDO VERDE
   ========================================================= */

.vm-table
tbody
td[data-column="ganancia_conocida"],
.vm-table
tbody
td[data-column="ganancia"] {
  background:
    rgba(
      34,
      197,
      94,
      0.10
    )
    !important;
}


/* =========================================================
   GANANCIA · HOVER
   ========================================================= */

.vm-table
tbody
tr:hover
td[data-column="ganancia_conocida"],
.vm-table
tbody
tr:hover
td[data-column="ganancia"] {
  background:
    rgba(
      34,
      197,
      94,
      0.16
    )
    !important;
}


/* =========================================================
   MARGEN · FONDO AZUL
   ========================================================= */

.vm-table
tbody
td[data-column="margen_conocido_porcentaje"],
.vm-table
tbody
td[data-column="margen"] {
  background:
    rgba(
      59,
      130,
      246,
      0.10
    )
    !important;
}


/* =========================================================
   MARGEN · HOVER
   ========================================================= */

.vm-table
tbody
tr:hover
td[data-column="margen_conocido_porcentaje"],
.vm-table
tbody
tr:hover
td[data-column="margen"] {
  background:
    rgba(
      59,
      130,
      246,
      0.16
    )
    !important;
}


/* =========================================================
   HEADERS · TEXTO NORMAL
   ========================================================= */

.vm-table
thead
th:has(
  [data-sort-field="ganancia_conocida"]
),
.vm-table
thead
th:has(
  [data-sort-field="ganancia"]
),
.vm-table
thead
th:has(
  [data-sort-field="margen_conocido_porcentaje"]
),
.vm-table
thead
th:has(
  [data-sort-field="margen"]
) {
  color:
    var(--vm-text-secondary)
    !important;
}


/* =========================================================
   HEADER GANANCIA · FONDO VERDE
   ========================================================= */

.vm-table
thead
th:has(
  [data-sort-field="ganancia_conocida"]
),
.vm-table
thead
th:has(
  [data-sort-field="ganancia"]
) {
  background:
    rgba(
      34,
      197,
      94,
      0.13
    )
    !important;
}


/* =========================================================
   HEADER MARGEN · FONDO AZUL
   ========================================================= */

.vm-table
thead
th:has(
  [data-sort-field="margen_conocido_porcentaje"]
),
.vm-table
thead
th:has(
  [data-sort-field="margen"]
) {
  background:
    rgba(
      59,
      130,
      246,
      0.13
    )
    !important;
}


/* =========================================================
   HEADER · BOTONES SIEMPRE TEXTO NORMAL
   ========================================================= */

.vm-table
thead
th:has(
  [data-sort-field="ganancia_conocida"]
)
.vm-table-sort,
.vm-table
thead
th:has(
  [data-sort-field="ganancia"]
)
.vm-table-sort,
.vm-table
thead
th:has(
  [data-sort-field="margen_conocido_porcentaje"]
)
.vm-table-sort,
.vm-table
thead
th:has(
  [data-sort-field="margen"]
)
.vm-table-sort {
  color:
    var(--vm-text-secondary)
    !important;
}


/* =========================================================
   DARK · GANANCIA
   ========================================================= */

html.dark
.vm-table
tbody
td[data-column="ganancia_conocida"],
html.dark
.vm-table
tbody
td[data-column="ganancia"],
body.dark
.vm-table
tbody
td[data-column="ganancia_conocida"],
body.dark
.vm-table
tbody
td[data-column="ganancia"],
[data-theme="dark"]
.vm-table
tbody
td[data-column="ganancia_conocida"],
[data-theme="dark"]
.vm-table
tbody
td[data-column="ganancia"],
.dark-mode
.vm-table
tbody
td[data-column="ganancia_conocida"],
.dark-mode
.vm-table
tbody
td[data-column="ganancia"] {
  background:
    rgba(
      55,
      190,
      115,
      0.13
    )
    !important;
}


/* =========================================================
   DARK · MARGEN
   ========================================================= */

html.dark
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"],
html.dark
.vm-table
tbody
td[data-column="margen"],
body.dark
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"],
body.dark
.vm-table
tbody
td[data-column="margen"],
[data-theme="dark"]
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"],
[data-theme="dark"]
.vm-table
tbody
td[data-column="margen"],
.dark-mode
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"],
.dark-mode
.vm-table
tbody
td[data-column="margen"] {
  background:
    rgba(
      70,
      125,
      230,
      0.15
    )
    !important;
}


/* =========================================================
   DARK · TEXTO BLANCO/FIRME
   ========================================================= */

html.dark
.vm-table
tbody
td[data-column="ganancia_conocida"] *,
html.dark
.vm-table
tbody
td[data-column="ganancia"] *,
html.dark
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"] *,
html.dark
.vm-table
tbody
td[data-column="margen"] *,
body.dark
.vm-table
tbody
td[data-column="ganancia_conocida"] *,
body.dark
.vm-table
tbody
td[data-column="ganancia"] *,
body.dark
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"] *,
body.dark
.vm-table
tbody
td[data-column="margen"] *,
[data-theme="dark"]
.vm-table
tbody
td[data-column="ganancia_conocida"] *,
[data-theme="dark"]
.vm-table
tbody
td[data-column="ganancia"] *,
[data-theme="dark"]
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"] *,
[data-theme="dark"]
.vm-table
tbody
td[data-column="margen"] *,
.dark-mode
.vm-table
tbody
td[data-column="ganancia_conocida"] *,
.dark-mode
.vm-table
tbody
td[data-column="ganancia"] *,
.dark-mode
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"] *,
.dark-mode
.vm-table
tbody
td[data-column="margen"] * {
  color:
    var(--vm-text)
    !important;

  font-weight:
    950;
}/* =========================================================
   PRODUCTOS + CLIENTES
   GANANCIA / MARGEN
   COLOR EN FONDO, NO EN TEXTO
   ========================================================= */


/* =========================================================
   GANANCIA · FONDO VERDE
   ========================================================= */

.vm-table
tbody
td[data-column="ganancia"],
.vm-table
tbody
td[data-column="ganancia_conocida"] {
  background:
    rgba(
      34,
      197,
      94,
      0.11
    )
    !important;
}


/* =========================================================
   MARGEN · FONDO AZUL
   ========================================================= */

.vm-table
tbody
td[data-column="margen"],
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"] {
  background:
    rgba(
      59,
      130,
      246,
      0.11
    )
    !important;
}


/* =========================================================
   TEXTO NORMAL · GANANCIA
   ========================================================= */

.vm-table
tbody
td[data-column="ganancia"],
.vm-table
tbody
td[data-column="ganancia"] *,
.vm-table
tbody
td[data-column="ganancia_conocida"],
.vm-table
tbody
td[data-column="ganancia_conocida"] * {
  color:
    var(--vm-text)
    !important;

  font-weight:
    950;
}


/* =========================================================
   TEXTO NORMAL · MARGEN
   ========================================================= */

.vm-table
tbody
td[data-column="margen"],
.vm-table
tbody
td[data-column="margen"] *,
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"],
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"] * {
  color:
    var(--vm-text)
    !important;

  font-weight:
    950;
}


/* =========================================================
   HOVER · GANANCIA
   ========================================================= */

.vm-table
tbody
tr:hover
td[data-column="ganancia"],
.vm-table
tbody
tr:hover
td[data-column="ganancia_conocida"] {
  background:
    rgba(
      34,
      197,
      94,
      0.17
    )
    !important;
}


/* =========================================================
   HOVER · MARGEN
   ========================================================= */

.vm-table
tbody
tr:hover
td[data-column="margen"],
.vm-table
tbody
tr:hover
td[data-column="margen_conocido_porcentaje"] {
  background:
    rgba(
      59,
      130,
      246,
      0.17
    )
    !important;
}


/* =========================================================
   HEADER · GANANCIA
   ========================================================= */

.vm-table
thead
th:has(
  [data-sort-field="ganancia"]
),
.vm-table
thead
th:has(
  [data-sort-field="ganancia_conocida"]
) {
  background:
    rgba(
      34,
      197,
      94,
      0.14
    )
    !important;
}


/* =========================================================
   HEADER · MARGEN
   ========================================================= */

.vm-table
thead
th:has(
  [data-sort-field="margen"]
),
.vm-table
thead
th:has(
  [data-sort-field="margen_conocido_porcentaje"]
) {
  background:
    rgba(
      59,
      130,
      246,
      0.14
    )
    !important;
}


/* =========================================================
   HEADER · TEXTO NORMAL
   ========================================================= */

.vm-table
thead
th:has(
  [data-sort-field="ganancia"]
)
.vm-table-sort,
.vm-table
thead
th:has(
  [data-sort-field="ganancia_conocida"]
)
.vm-table-sort,
.vm-table
thead
th:has(
  [data-sort-field="margen"]
)
.vm-table-sort,
.vm-table
thead
th:has(
  [data-sort-field="margen_conocido_porcentaje"]
)
.vm-table-sort {
  color:
    var(--vm-text-secondary)
    !important;
}


/* =========================================================
   DARK · GANANCIA
   ========================================================= */

html.dark
.vm-table
tbody
td[data-column="ganancia"],
html.dark
.vm-table
tbody
td[data-column="ganancia_conocida"],
body.dark
.vm-table
tbody
td[data-column="ganancia"],
body.dark
.vm-table
tbody
td[data-column="ganancia_conocida"],
[data-theme="dark"]
.vm-table
tbody
td[data-column="ganancia"],
[data-theme="dark"]
.vm-table
tbody
td[data-column="ganancia_conocida"],
.dark-mode
.vm-table
tbody
td[data-column="ganancia"],
.dark-mode
.vm-table
tbody
td[data-column="ganancia_conocida"] {
  background:
    rgba(
      55,
      190,
      115,
      0.15
    )
    !important;
}


/* =========================================================
   DARK · MARGEN
   ========================================================= */

html.dark
.vm-table
tbody
td[data-column="margen"],
html.dark
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"],
body.dark
.vm-table
tbody
td[data-column="margen"],
body.dark
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"],
[data-theme="dark"]
.vm-table
tbody
td[data-column="margen"],
[data-theme="dark"]
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"],
.dark-mode
.vm-table
tbody
td[data-column="margen"],
.dark-mode
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"] {
  background:
    rgba(
      70,
      125,
      230,
      0.17
    )
    !important;
}


/* =========================================================
   DARK · TEXTO SIEMPRE FIRME
   ========================================================= */

html.dark
.vm-table
tbody
td[data-column="ganancia"] *,
html.dark
.vm-table
tbody
td[data-column="ganancia_conocida"] *,
html.dark
.vm-table
tbody
td[data-column="margen"] *,
html.dark
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"] *,
body.dark
.vm-table
tbody
td[data-column="ganancia"] *,
body.dark
.vm-table
tbody
td[data-column="ganancia_conocida"] *,
body.dark
.vm-table
tbody
td[data-column="margen"] *,
body.dark
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"] *,
[data-theme="dark"]
.vm-table
tbody
td[data-column="ganancia"] *,
[data-theme="dark"]
.vm-table
tbody
td[data-column="ganancia_conocida"] *,
[data-theme="dark"]
.vm-table
tbody
td[data-column="margen"] *,
[data-theme="dark"]
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"] *,
.dark-mode
.vm-table
tbody
td[data-column="ganancia"] *,
.dark-mode
.vm-table
tbody
td[data-column="ganancia_conocida"] *,
.dark-mode
.vm-table
tbody
td[data-column="margen"] *,
.dark-mode
.vm-table
tbody
td[data-column="margen_conocido_porcentaje"] * {
  color:
    var(--vm-text)
    !important;
}/* =========================================================
   ALERTAS EJECUTIVAS
   RESULTADO PARCIAL / RENTABILIDAD / COBERTURA
   ========================================================= */


/* =========================================================
   ALERT STACK
   ========================================================= */

.vm-alert-stack {
  display:
    flex;

  flex-direction:
    column;

  gap:
    9px;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   ALERT BASE
   ========================================================= */

.vm-alert {
  width:
    100%;

  min-width:
    0;

  min-height:
    64px;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  padding:
    11px
    13px;

  color:
    var(--vm-text);

  background:
    var(--vm-surface-soft);

  border:
    1.5px
    solid
    var(--vm-border-strong);

  border-radius:
    8px;

  box-shadow:
    var(--vm-shadow-xs);

  overflow:
    hidden;
}


/* =========================================================
   ALERT WARNING
   ========================================================= */

.vm-alert--warning {
  color:
    var(--vm-warning);

  background:
    var(--vm-warning-bg);

  border-color:
    var(--vm-warning-border);
}


/* =========================================================
   ALERT ERROR / DANGER
   ========================================================= */

.vm-alert--error,
.vm-alert--danger {
  color:
    var(--vm-danger);

  background:
    var(--vm-danger-bg);

  border-color:
    var(--vm-danger-border);
}


/* =========================================================
   ALERT SUCCESS
   ========================================================= */

.vm-alert--success {
  color:
    var(--vm-success-strong);

  background:
    var(--vm-success-bg);

  border-color:
    var(--vm-success-border);
}


/* =========================================================
   ALERT INFO
   ========================================================= */

.vm-alert--info {
  color:
    var(--vm-info);

  background:
    var(--vm-info-bg);

  border-color:
    var(--vm-info-border);
}


/* =========================================================
   COSTOS INCOMPLETOS
   ========================================================= */

.vm-alert--costos_incompletos {
  color:
    var(--vm-warning);

  background:
    var(--vm-warning-bg);

  border-color:
    var(--vm-warning-border);
}


/* =========================================================
   ALERT ICON
   ========================================================= */

.vm-alert__icon {
  width:
    34px;

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0
    auto;

  color:
    currentColor;

  background:
    rgba(
      255,
      255,
      255,
      0.45
    );

  border:
    1.5px
    solid
    currentColor;

  border-radius:
    7px;
}


/* =========================================================
   ALERT CONTENT
   ========================================================= */

.vm-alert__content {
  min-width:
    0;

  flex:
    1
    1
    auto;
}


/* =========================================================
   ALERT TITLE
   ========================================================= */

.vm-alert__content strong {
  display:
    block;

  margin:
    0;

  color:
    currentColor;

  background:
    transparent
    !important;

  font-size:
    12px;

  font-weight:
    950;

  line-height:
    1.2;

  letter-spacing:
    -0.01em;
}


/* =========================================================
   ALERT TEXT
   ========================================================= */

.vm-alert__content p {
  margin:
    5px
    0
    0;

  color:
    currentColor;

  background:
    transparent
    !important;

  font-size:
    10.5px;

  font-weight:
    750;

  line-height:
    1.45;

  opacity:
    0.92;
}


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

.vm-alert__content
.vm-btn {
  margin-top:
    9px;
}


/* =========================================================
   WARNING BUTTON
   ========================================================= */

.vm-alert--warning
.vm-btn,
.vm-alert--costos_incompletos
.vm-btn {
  color:
    var(--vm-warning);

  background:
    rgba(
      255,
      255,
      255,
      0.52
    );

  border-color:
    var(--vm-warning-border);
}


.vm-alert--warning
.vm-btn:hover,
.vm-alert--costos_incompletos
.vm-btn:hover {
  color:
    var(--vm-warning);

  background:
    rgba(
      255,
      255,
      255,
      0.75
    );

  border-color:
    var(--vm-warning);
}


/* =========================================================
   DARK MODE · BASE
   ========================================================= */

html.dark
.vm-alert,
body.dark
.vm-alert,
html[data-theme="dark"]
.vm-alert,
body[data-theme="dark"]
.vm-alert,
[data-theme="dark"]
.vm-alert,
.dark-mode
.vm-alert {
  box-shadow:
    none;
}


/* =========================================================
   DARK MODE · WARNING
   ========================================================= */

html.dark
.vm-alert--warning,
html.dark
.vm-alert--costos_incompletos,
body.dark
.vm-alert--warning,
body.dark
.vm-alert--costos_incompletos,
[data-theme="dark"]
.vm-alert--warning,
[data-theme="dark"]
.vm-alert--costos_incompletos,
.dark-mode
.vm-alert--warning,
.dark-mode
.vm-alert--costos_incompletos {
  color:
    #e7bd62;

  background:
    #1c1608;

  border-color:
    #6c5420;
}


/* =========================================================
   DARK MODE · WARNING ICON
   ========================================================= */

html.dark
.vm-alert--warning
.vm-alert__icon,
html.dark
.vm-alert--costos_incompletos
.vm-alert__icon,
body.dark
.vm-alert--warning
.vm-alert__icon,
body.dark
.vm-alert--costos_incompletos
.vm-alert__icon,
[data-theme="dark"]
.vm-alert--warning
.vm-alert__icon,
[data-theme="dark"]
.vm-alert--costos_incompletos
.vm-alert__icon,
.dark-mode
.vm-alert--warning
.vm-alert__icon,
.dark-mode
.vm-alert--costos_incompletos
.vm-alert__icon {
  color:
    #e7bd62;

  background:
    #241c0b;

  border-color:
    #6c5420;
}


/* =========================================================
   DARK MODE · WARNING BUTTON
   ========================================================= */

html.dark
.vm-alert--warning
.vm-btn,
html.dark
.vm-alert--costos_incompletos
.vm-btn,
body.dark
.vm-alert--warning
.vm-btn,
body.dark
.vm-alert--costos_incompletos
.vm-btn,
[data-theme="dark"]
.vm-alert--warning
.vm-btn,
[data-theme="dark"]
.vm-alert--costos_incompletos
.vm-btn,
.dark-mode
.vm-alert--warning
.vm-btn,
.dark-mode
.vm-alert--costos_incompletos
.vm-btn {
  color:
    #f0cf7b;

  background:
    #211a0b;

  border-color:
    #6c5420;
}


/* =========================================================
   DARK MODE · ERROR
   ========================================================= */

html.dark
.vm-alert--error,
html.dark
.vm-alert--danger,
body.dark
.vm-alert--error,
body.dark
.vm-alert--danger,
[data-theme="dark"]
.vm-alert--error,
[data-theme="dark"]
.vm-alert--danger,
.dark-mode
.vm-alert--error,
.dark-mode
.vm-alert--danger {
  color:
    #ef8b84;

  background:
    #21100f;

  border-color:
    #6c312e;
}


/* =========================================================
   DARK MODE · SUCCESS
   ========================================================= */

html.dark
.vm-alert--success,
body.dark
.vm-alert--success,
[data-theme="dark"]
.vm-alert--success,
.dark-mode
.vm-alert--success {
  color:
    #72d9a2;

  background:
    #0d1d15;

  border-color:
    #2d6546;
}


/* =========================================================
   DARK MODE · INFO
   ========================================================= */

html.dark
.vm-alert--info,
body.dark
.vm-alert--info,
[data-theme="dark"]
.vm-alert--info,
.dark-mode
.vm-alert--info {
  color:
    #8bb8f5;

  background:
    #101a27;

  border-color:
    #355273;
}


/* =========================================================
   DARK MODE · TEXT
   ========================================================= */

html.dark
.vm-alert__content strong,
html.dark
.vm-alert__content p,
body.dark
.vm-alert__content strong,
body.dark
.vm-alert__content p,
[data-theme="dark"]
.vm-alert__content strong,
[data-theme="dark"]
.vm-alert__content p,
.dark-mode
.vm-alert__content strong,
.dark-mode
.vm-alert__content p {
  background:
    transparent
    !important;
}


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

@media (
  max-width:
  640px
) {
  .vm-alert {
    align-items:
      flex-start;

    padding:
      10px;
  }


  .vm-alert__icon {
    width:
      31px;

    height:
      31px;
  }


  .vm-alert__content strong {
    font-size:
      11px;
  }


  .vm-alert__content p {
    font-size:
      10px;
  }
}/* =========================================================
   VENTAS MENSUALES
   SPARKLINE V3 · FUTURISTA LIMPIO
   ========================================================= */


/* =========================================================
   CONTENEDOR
   ========================================================= */

.vm-kpi-card__sparkline {
  position:
    relative;

  width:
    100%;

  height:
    58px;

  min-height:
    58px;

  margin-top:
    8px;

  padding:
    0;

  background:
    transparent
    !important;

  border:
    0
    !important;

  box-shadow:
    none
    !important;

  overflow:
    visible
    !important;
}


.vm-kpi-card__sparkline::before,
.vm-kpi-card__sparkline::after {
  display:
    none
    !important;

  content:
    none
    !important;
}


/* =========================================================
   SVG
   ========================================================= */

.vm-sparkline {
  display:
    block;

  width:
    100%;

  height:
    58px;

  overflow:
    visible
    !important;

  background:
    transparent
    !important;

  border:
    0
    !important;

  box-shadow:
    none
    !important;
}


/* =========================================================
   AREA
   ========================================================= */

.vm-sparkline__area {
  opacity:
    0.11;

  transform-origin:
    center
    bottom;

  animation:
    vmSparkAreaBreath
    5s
    ease-in-out
    infinite;
}


/* =========================================================
   LINEA BASE
   ========================================================= */

.vm-sparkline__line {
  fill:
    none
    !important;

  stroke-width:
    2.15
    !important;

  stroke-linecap:
    round
    !important;

  stroke-linejoin:
    round
    !important;

  vector-effect:
    non-scaling-stroke;

  stroke-dasharray:
    none
    !important;

  stroke-dashoffset:
    0
    !important;

  opacity:
    0.92;

  filter:
    none
    !important;

  animation:
    vmSparkLineBreath
    4.5s
    ease-in-out
    infinite
    !important;
}


/* =========================================================
   SCANNER
   HAZ QUE RECORRE LA LINEA
   ========================================================= */

.vm-sparkline__scanner {
  fill:
    none;

  stroke-width:
    3.4;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  vector-effect:
    non-scaling-stroke;

  path-length:
    100;

  stroke-dasharray:
    7
    93;

  stroke-dashoffset:
    100;

  opacity:
    0.9;

  pointer-events:
    none;

  animation:
    vmSparkScanner
    3.1s
    linear
    infinite;
}


/* =========================================================
   POINTS
   SIN ZOOM
   ========================================================= */

.vm-sparkline__point {
  opacity:
    0.48;

  transform:
    none
    !important;

  transform-origin:
    center;

  vector-effect:
    non-scaling-stroke;

  stroke-width:
    1.4;

  animation:
    none
    !important;

  transition:
    opacity
    160ms
    ease;
}


/* =========================================================
   ULTIMO PUNTO
   SIN SCALE
   ========================================================= */

.vm-sparkline__point.is-last {
  opacity:
    1;

  transform:
    none
    !important;

  stroke-width:
    2;

  animation:
    vmSparkLastPointGlow
    2.4s
    ease-in-out
    infinite
    !important;
}


/* =========================================================
   POSITIVE
   ========================================================= */

.vm-sparkline.is-positive
.vm-sparkline__line {
  stroke:
    #55d9a4
    !important;
}


.vm-sparkline.is-positive
.vm-sparkline__scanner {
  stroke:
    #b9ffe4;

  filter:
    drop-shadow(
      0
      0
      4px
      rgba(
        85,
        217,
        164,
        0.5
      )
    );
}


.vm-sparkline.is-positive
.vm-sparkline__point {
  fill:
    #55d9a4;

  stroke:
    #55d9a4;
}


.vm-sparkline.is-positive
.vm-sparkline__gradient-start {
  stop-color:
    #55d9a4;

  stop-opacity:
    0.22;
}


.vm-sparkline.is-positive
.vm-sparkline__gradient-end {
  stop-color:
    #55d9a4;

  stop-opacity:
    0;
}


/* =========================================================
   NEGATIVE
   ========================================================= */

.vm-sparkline.is-negative
.vm-sparkline__line {
  stroke:
    #ef7474
    !important;
}


.vm-sparkline.is-negative
.vm-sparkline__scanner {
  stroke:
    #ffc3c3;

  filter:
    drop-shadow(
      0
      0
      4px
      rgba(
        239,
        116,
        116,
        0.48
      )
    );
}


.vm-sparkline.is-negative
.vm-sparkline__point {
  fill:
    #ef7474;

  stroke:
    #ef7474;
}


.vm-sparkline.is-negative
.vm-sparkline__gradient-start {
  stop-color:
    #ef7474;

  stop-opacity:
    0.2;
}


.vm-sparkline.is-negative
.vm-sparkline__gradient-end {
  stop-color:
    #ef7474;

  stop-opacity:
    0;
}


/* =========================================================
   NEUTRAL
   ========================================================= */

.vm-sparkline.is-neutral
.vm-sparkline__line {
  stroke:
    #668fff
    !important;
}


.vm-sparkline.is-neutral
.vm-sparkline__scanner {
  stroke:
    #bfd0ff;

  filter:
    drop-shadow(
      0
      0
      4px
      rgba(
        102,
        143,
        255,
        0.48
      )
    );
}


.vm-sparkline.is-neutral
.vm-sparkline__point {
  fill:
    #668fff;

  stroke:
    #668fff;
}


.vm-sparkline.is-neutral
.vm-sparkline__gradient-start {
  stop-color:
    #668fff;

  stop-opacity:
    0.2;
}


.vm-sparkline.is-neutral
.vm-sparkline__gradient-end {
  stop-color:
    #668fff;

  stop-opacity:
    0;
}


/* =========================================================
   HOVER
   ========================================================= */

.vm-kpi-card:hover
.vm-sparkline__line {
  opacity:
    1;
}


.vm-kpi-card:hover
.vm-sparkline__scanner {
  animation-duration:
    2.15s;
}


/* =========================================================
   ANIMACION · SCANNER
   ========================================================= */

@keyframes vmSparkScanner {
  0% {
    stroke-dashoffset:
      108;

    opacity:
      0;
  }

  8% {
    opacity:
      0.95;
  }

  88% {
    opacity:
      0.95;
  }

  100% {
    stroke-dashoffset:
      -8;

    opacity:
      0;
  }
}


/* =========================================================
   ANIMACION · LINEA
   ========================================================= */

@keyframes vmSparkLineBreath {
  0%,
  100% {
    opacity:
      0.72;
  }

  50% {
    opacity:
      1;
  }
}


/* =========================================================
   ANIMACION · AREA
   ========================================================= */

@keyframes vmSparkAreaBreath {
  0%,
  100% {
    opacity:
      0.07;
  }

  50% {
    opacity:
      0.15;
  }
}


/* =========================================================
   ANIMACION · ULTIMO PUNTO
   SOLO OPACIDAD / BRILLO
   ========================================================= */

@keyframes vmSparkLastPointGlow {
  0%,
  100% {
    opacity:
      0.68;

    filter:
      brightness(
        1
      );
  }

  50% {
    opacity:
      1;

    filter:
      brightness(
        1.35
      );
  }
}


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

html.dark
.vm-kpi-card__sparkline,
body.dark
.vm-kpi-card__sparkline,
[data-theme="dark"]
.vm-kpi-card__sparkline,
.dark-mode
.vm-kpi-card__sparkline,
html.dark
.vm-sparkline,
body.dark
.vm-sparkline,
[data-theme="dark"]
.vm-sparkline,
.dark-mode
.vm-sparkline {
  background:
    transparent
    !important;

  border:
    0
    !important;

  box-shadow:
    none
    !important;
}


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

@media (
  prefers-reduced-motion:
  reduce
) {
  .vm-sparkline__line,
  .vm-sparkline__scanner,
  .vm-sparkline__area,
  .vm-sparkline__point,
  .vm-sparkline__point.is-last {
    animation:
      none
      !important;
  }


  .vm-sparkline__scanner {
    display:
      none;
  }


  .vm-sparkline__line {
    opacity:
      1;
  }


  .vm-sparkline__area {
    opacity:
      0.1;
  }


  .vm-sparkline__point {
    opacity:
      0.65;
  }


  .vm-sparkline__point.is-last {
    opacity:
      1;
  }
}/* =========================================================
   WIRTZ HUB · VENTAS MENSUALES
   CHART UI · MODERN EXECUTIVE V4
   PEGAR AL FINAL ABSOLUTO DEL CSS
   ========================================================= */


/* =========================================================
   PALETA
   ========================================================= */

.executive-sales-monthly-page,
.vm-modal-root,
.vm-toast-root,
.vm-chart-tooltip {
  --vm-modern-green:
    #58d6a4;

  --vm-modern-green-bright:
    #9bf0ce;

  --vm-modern-green-soft:
    rgba(
      88,
      214,
      164,
      0.11
    );

  --vm-modern-red:
    #ef7772;

  --vm-modern-red-bright:
    #ffc0bd;

  --vm-modern-red-soft:
    rgba(
      239,
      119,
      114,
      0.10
    );

  --vm-modern-blue:
    #6b91ff;

  --vm-modern-blue-bright:
    #c3d0ff;

  --vm-modern-blue-soft:
    rgba(
      107,
      145,
      255,
      0.11
    );

  --vm-modern-purple:
    #9c83ff;

  --vm-modern-orange:
    #f0a45e;

  --vm-modern-cyan:
    #56c8e8;

  --vm-modern-grid:
    rgba(
      120,
      130,
      145,
      0.16
    );

  --vm-modern-grid-dark:
    rgba(
      255,
      255,
      255,
      0.075
    );
}


/* =========================================================
   KPI CARD · BASE
   ========================================================= */

.executive-sales-monthly-page
.vm-kpi-card {
  position:
    relative;

  isolation:
    isolate;

  min-height:
    136px;

  overflow:
    hidden;

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

  border-radius:
    11px;

  box-shadow:
    none;

  transition:
    border-color
    180ms
    ease,
    background-color
    180ms
    ease,
    transform
    180ms
    ease;
}


/* =========================================================
   KPI CARD · TOP LINE
   ========================================================= */

.executive-sales-monthly-page
.vm-kpi-card::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    18px;

  right:
    18px;

  height:
    1px;

  z-index:
    1;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        0.18
      ),
      transparent
    );

  opacity:
    0.45;

  pointer-events:
    none;
}


/* =========================================================
   KPI CARD · HOVER
   ========================================================= */

.executive-sales-monthly-page
.vm-kpi-card:hover {
  transform:
    translateY(
      -1px
    );

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

  box-shadow:
    none;
}


/* =========================================================
   KPI SPARKLINE CONTAINER
   ========================================================= */

.executive-sales-monthly-page
.vm-kpi-card__sparkline {
  position:
    relative;

  display:
    block;

  width:
    calc(
      100% +
      2px
    );

  height:
    58px
    !important;

  min-height:
    58px
    !important;

  margin:
    7px
    -1px
    -5px;

  padding:
    0
    5px;

  overflow:
    visible
    !important;

  background:
    transparent
    !important;

  border:
    0
    !important;

  border-radius:
    0
    !important;

  box-shadow:
    none
    !important;
}


/* =========================================================
   ELIMINAR RECTANGULOS / DECORACIONES VIEJAS
   ========================================================= */

.executive-sales-monthly-page
.vm-kpi-card__sparkline::before,
.executive-sales-monthly-page
.vm-kpi-card__sparkline::after {
  display:
    none
    !important;

  content:
    none
    !important;
}


/* =========================================================
   SVG
   ========================================================= */

.executive-sales-monthly-page
.vm-kpi-card__sparkline
.vm-sparkline,
.executive-sales-monthly-page
svg.vm-sparkline {
  position:
    relative;

  display:
    block;

  width:
    100%
    !important;

  height:
    58px
    !important;

  max-width:
    none;

  overflow:
    visible
    !important;

  background:
    transparent
    !important;

  border:
    0
    !important;

  border-radius:
    0
    !important;

  box-shadow:
    none
    !important;
}


/* =========================================================
   SPARKLINE · AREA
   ========================================================= */

.executive-sales-monthly-page
.vm-sparkline__area {
  transform:
    none
    !important;

  transform-origin:
    center
    bottom;

  pointer-events:
    none;

  animation:
    vmModernAreaBreath
    5.8s
    ease-in-out
    infinite
    !important;
}


/* =========================================================
   SPARKLINE · MAIN LINE
   ========================================================= */

.executive-sales-monthly-page
.vm-sparkline__line {
  fill:
    none
    !important;

  stroke-width:
    2.15
    !important;

  stroke-linecap:
    round
    !important;

  stroke-linejoin:
    round
    !important;

  stroke-dasharray:
    none
    !important;

  stroke-dashoffset:
    0
    !important;

  vector-effect:
    non-scaling-stroke;

  opacity:
    0.92;

  filter:
    none
    !important;

  animation:
    vmModernLineOpacity
    4.8s
    ease-in-out
    infinite
    !important;
}


/* =========================================================
   SPARKLINE · SCANNER
   ========================================================= */

.executive-sales-monthly-page
.vm-sparkline__scanner {
  fill:
    none;

  stroke-width:
    3
    !important;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  vector-effect:
    non-scaling-stroke;

  stroke-dasharray:
    8
    92
    !important;

  stroke-dashoffset:
    105;

  opacity:
    0;

  pointer-events:
    none;

  animation:
    vmModernScanner
    3.8s
    cubic-bezier(
      0.45,
      0,
      0.55,
      1
    )
    infinite
    !important;
}


/* =========================================================
   SPARKLINE · POINTS
   SIN ZOOM
   ========================================================= */

.executive-sales-monthly-page
.vm-sparkline__point {
  opacity:
    0.38;

  transform:
    none
    !important;

  transform-origin:
    center;

  transform-box:
    fill-box;

  vector-effect:
    non-scaling-stroke;

  stroke-width:
    1.2
    !important;

  animation:
    vmModernPointFade
    5.4s
    ease-in-out
    infinite
    !important;

  transition:
    opacity
    140ms
    ease;
}


/* =========================================================
   LAST POINT
   ========================================================= */

.executive-sales-monthly-page
.vm-sparkline__point.is-last {
  opacity:
    1;

  transform:
    none
    !important;

  stroke-width:
    2
    !important;

  animation:
    vmModernLastPoint
    2.8s
    ease-in-out
    infinite
    !important;
}


/* =========================================================
   POSITIVE · GREEN
   ========================================================= */

.executive-sales-monthly-page
.vm-sparkline.is-positive
.vm-sparkline__line {
  stroke:
    var(--vm-modern-green)
    !important;
}


.executive-sales-monthly-page
.vm-sparkline.is-positive
.vm-sparkline__scanner {
  stroke:
    var(--vm-modern-green-bright)
    !important;

  filter:
    drop-shadow(
      0
      0
      3px
      rgba(
        88,
        214,
        164,
        0.34
      )
    );
}


.executive-sales-monthly-page
.vm-sparkline.is-positive
.vm-sparkline__point {
  fill:
    var(--vm-modern-green)
    !important;

  stroke:
    var(--vm-modern-green)
    !important;
}


.executive-sales-monthly-page
.vm-sparkline.is-positive
.vm-sparkline__gradient-start {
  stop-color:
    var(--vm-modern-green);

  stop-opacity:
    0.13;
}


.executive-sales-monthly-page
.vm-sparkline.is-positive
.vm-sparkline__gradient-end {
  stop-color:
    var(--vm-modern-green);

  stop-opacity:
    0;
}


/* =========================================================
   NEGATIVE · RED
   ========================================================= */

.executive-sales-monthly-page
.vm-sparkline.is-negative
.vm-sparkline__line {
  stroke:
    var(--vm-modern-red)
    !important;
}


.executive-sales-monthly-page
.vm-sparkline.is-negative
.vm-sparkline__scanner {
  stroke:
    var(--vm-modern-red-bright)
    !important;

  filter:
    drop-shadow(
      0
      0
      3px
      rgba(
        239,
        119,
        114,
        0.32
      )
    );
}


.executive-sales-monthly-page
.vm-sparkline.is-negative
.vm-sparkline__point {
  fill:
    var(--vm-modern-red)
    !important;

  stroke:
    var(--vm-modern-red)
    !important;
}


.executive-sales-monthly-page
.vm-sparkline.is-negative
.vm-sparkline__gradient-start {
  stop-color:
    var(--vm-modern-red);

  stop-opacity:
    0.12;
}


.executive-sales-monthly-page
.vm-sparkline.is-negative
.vm-sparkline__gradient-end {
  stop-color:
    var(--vm-modern-red);

  stop-opacity:
    0;
}


/* =========================================================
   NEUTRAL · BLUE
   ========================================================= */

.executive-sales-monthly-page
.vm-sparkline.is-neutral
.vm-sparkline__line {
  stroke:
    var(--vm-modern-blue)
    !important;
}


.executive-sales-monthly-page
.vm-sparkline.is-neutral
.vm-sparkline__scanner {
  stroke:
    var(--vm-modern-blue-bright)
    !important;

  filter:
    drop-shadow(
      0
      0
      3px
      rgba(
        107,
        145,
        255,
        0.34
      )
    );
}


.executive-sales-monthly-page
.vm-sparkline.is-neutral
.vm-sparkline__point {
  fill:
    var(--vm-modern-blue)
    !important;

  stroke:
    var(--vm-modern-blue)
    !important;
}


.executive-sales-monthly-page
.vm-sparkline.is-neutral
.vm-sparkline__gradient-start {
  stop-color:
    var(--vm-modern-blue);

  stop-opacity:
    0.13;
}


.executive-sales-monthly-page
.vm-sparkline.is-neutral
.vm-sparkline__gradient-end {
  stop-color:
    var(--vm-modern-blue);

  stop-opacity:
    0;
}


/* =========================================================
   BIG CHARTS · BASE
   ========================================================= */

.executive-sales-monthly-page
.vm-chart {
  position:
    relative;

  overflow:
    visible
    !important;

  background:
    transparent
    !important;

  border:
    0;

  box-shadow:
    none;
}


/* =========================================================
   BIG CHART SVG
   ========================================================= */

.executive-sales-monthly-page
.vm-chart
svg {
  display:
    block;

  width:
    100%;

  overflow:
    visible
    !important;

  background:
    transparent
    !important;
}


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

.executive-sales-monthly-page
.vm-chart__grid {
  stroke:
    var(--vm-modern-grid)
    !important;

  stroke-width:
    1
    !important;

  opacity:
    0.75;

  shape-rendering:
    geometricPrecision;
}


/* =========================================================
   BIG CHART BASELINE
   ========================================================= */

.executive-sales-monthly-page
.vm-chart__baseline {
  stroke:
    var(--vm-border-strong)
    !important;

  stroke-width:
    1
    !important;

  opacity:
    0.65;
}


/* =========================================================
   BIG CHART TEXT
   ========================================================= */

.executive-sales-monthly-page
.vm-chart__axis-label,
.executive-sales-monthly-page
.vm-chart__x-label,
.executive-sales-monthly-page
.vm-chart__hbar-label,
.executive-sales-monthly-page
.vm-chart__hbar-value {
  fill:
    var(--vm-text-secondary)
    !important;

  font-family:
    "DM Sans",
    sans-serif;

  font-weight:
    850;
}


/* =========================================================
   BIG CHART LINE
   ========================================================= */

.executive-sales-monthly-page
.vm-chart__line {
  fill:
    none;

  stroke:
    var(--vm-modern-blue)
    !important;

  stroke-width:
    2.7
    !important;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  vector-effect:
    non-scaling-stroke;

  filter:
    none;

  transition:
    stroke-width
    180ms
    ease;
}


/* =========================================================
   BIG CHART POINTS
   ========================================================= */

.executive-sales-monthly-page
.vm-chart__point {
  fill:
    var(--vm-surface)
    !important;

  stroke:
    var(--vm-modern-blue)
    !important;

  stroke-width:
    2.2;

  transform:
    none
    !important;

  transition:
    fill
    150ms
    ease,
    stroke-width
    150ms
    ease,
    opacity
    150ms
    ease;
}


/* =========================================================
   POINT HOVER · SIN SCALE
   ========================================================= */

.executive-sales-monthly-page
.vm-chart__point:hover {
  fill:
    var(--vm-modern-blue)
    !important;

  stroke-width:
    3;

  transform:
    none
    !important;
}


/* =========================================================
   LINE AREA
   ========================================================= */

.executive-sales-monthly-page
.vm-chart__line-area,
.executive-sales-monthly-page
.vm-chart__area {
  opacity:
    0.14;

  animation:
    vmModernBigArea
    6s
    ease-in-out
    infinite;
}


/* =========================================================
   ANALYTICS CARD
   ========================================================= */

.executive-sales-monthly-page
.vm-analytics-card {
  position:
    relative;

  overflow:
    hidden;

  background:
    var(--vm-surface);

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

  border-radius:
    10px;

  box-shadow:
    none;

  transition:
    border-color
    180ms
    ease,
    transform
    180ms
    ease;
}


/* =========================================================
   ANALYTICS CARD · TOP ACCENT
   ========================================================= */

.executive-sales-monthly-page
.vm-analytics-card::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    20px;

  right:
    20px;

  height:
    1px;

  z-index:
    2;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        0.22
      ),
      transparent
    );

  opacity:
    0.5;
}


/* =========================================================
   ANALYTICS HOVER
   ========================================================= */

.executive-sales-monthly-page
.vm-analytics-card:hover {
  transform:
    translateY(
      -1px
    );

  border-color:
    var(--vm-border-dark);
}


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

.executive-sales-monthly-page
.vm-analytics-card__body {
  position:
    relative;

  overflow:
    visible
    !important;

  padding:
    18px
    22px
    20px;
}


/* =========================================================
   DONUT
   ========================================================= */

.executive-sales-monthly-page
.vm-chart__donut-track {
  stroke:
    var(--vm-surface-muted)
    !important;
}


/* =========================================================
   DONUT SERIES
   ========================================================= */

.executive-sales-monthly-page
.vm-chart__donut-segment--1 {
  stroke:
    #648fff
    !important;
}


.executive-sales-monthly-page
.vm-chart__donut-segment--2 {
  stroke:
    #55d9a4
    !important;
}


.executive-sales-monthly-page
.vm-chart__donut-segment--3 {
  stroke:
    #a18aff
    !important;
}


.executive-sales-monthly-page
.vm-chart__donut-segment--4 {
  stroke:
    #f1a45d
    !important;
}


.executive-sales-monthly-page
.vm-chart__donut-segment--5 {
  stroke:
    #55c7e7
    !important;
}


.executive-sales-monthly-page
.vm-chart__donut-segment--6 {
  stroke:
    #de7fb9
    !important;
}


.executive-sales-monthly-page
.vm-chart__donut-segment--7 {
  stroke:
    #e4c254
    !important;
}


.executive-sales-monthly-page
.vm-chart__donut-segment--8 {
  stroke:
    #47b8ad
    !important;
}


/* =========================================================
   DONUT LEGEND
   ========================================================= */

.executive-sales-monthly-page
.vm-donut-legend__item {
  transition:
    border-color
    160ms
    ease,
    background-color
    160ms
    ease,
    transform
    160ms
    ease;
}


.executive-sales-monthly-page
.vm-donut-legend__item:hover {
  transform:
    translateX(
      2px
    );

  border-color:
    var(--vm-border-dark);
}


/* =========================================================
   HORIZONTAL BARS
   ========================================================= */

.executive-sales-monthly-page
.vm-chart__hbar {
  opacity:
    0.94;

  transition:
    opacity
    150ms
    ease,
    filter
    150ms
    ease;
}


.executive-sales-monthly-page
.vm-chart__hbar:hover {
  opacity:
    1;

  filter:
    brightness(
      1.08
    );
}


/* =========================================================
   HBAR SERIES
   ========================================================= */

.executive-sales-monthly-page
.vm-chart__hbar--series-1 {
  fill:
    #648fff
    !important;
}


.executive-sales-monthly-page
.vm-chart__hbar--series-2 {
  fill:
    #55d9a4
    !important;
}


.executive-sales-monthly-page
.vm-chart__hbar--series-3 {
  fill:
    #a18aff
    !important;
}


.executive-sales-monthly-page
.vm-chart__hbar--series-4 {
  fill:
    #f1a45d
    !important;
}


.executive-sales-monthly-page
.vm-chart__hbar--series-5 {
  fill:
    #55c7e7
    !important;
}


.executive-sales-monthly-page
.vm-chart__hbar--series-6 {
  fill:
    #de7fb9
    !important;
}


.executive-sales-monthly-page
.vm-chart__hbar--series-7 {
  fill:
    #e4c254
    !important;
}


.executive-sales-monthly-page
.vm-chart__hbar--series-8 {
  fill:
    #47b8ad
    !important;
}


/* =========================================================
   DARK MODE · KPI
   ========================================================= */

html.dark
.executive-sales-monthly-page
.vm-kpi-card,
body.dark
.executive-sales-monthly-page
.vm-kpi-card,
[data-theme="dark"]
.executive-sales-monthly-page
.vm-kpi-card,
.dark-mode
.executive-sales-monthly-page
.vm-kpi-card {
  background:
    #0b0b0b;

  border-color:
    #343434;
}


/* =========================================================
   DARK MODE · ANALYTICS
   ========================================================= */

html.dark
.executive-sales-monthly-page
.vm-analytics-card,
body.dark
.executive-sales-monthly-page
.vm-analytics-card,
[data-theme="dark"]
.executive-sales-monthly-page
.vm-analytics-card,
.dark-mode
.executive-sales-monthly-page
.vm-analytics-card {
  background:
    #090909;

  border-color:
    #353535;
}


/* =========================================================
   DARK MODE · REMOVE RECTANGLE
   ========================================================= */

html.dark
.executive-sales-monthly-page
.vm-kpi-card__sparkline,
body.dark
.executive-sales-monthly-page
.vm-kpi-card__sparkline,
[data-theme="dark"]
.executive-sales-monthly-page
.vm-kpi-card__sparkline,
.dark-mode
.executive-sales-monthly-page
.vm-kpi-card__sparkline,
html.dark
.executive-sales-monthly-page
.vm-sparkline,
body.dark
.executive-sales-monthly-page
.vm-sparkline,
[data-theme="dark"]
.executive-sales-monthly-page
.vm-sparkline,
.dark-mode
.executive-sales-monthly-page
.vm-sparkline {
  background:
    transparent
    !important;

  border:
    0
    !important;

  box-shadow:
    none
    !important;
}


/* =========================================================
   DARK GRID
   ========================================================= */

html.dark
.executive-sales-monthly-page
.vm-chart__grid,
body.dark
.executive-sales-monthly-page
.vm-chart__grid,
[data-theme="dark"]
.executive-sales-monthly-page
.vm-chart__grid,
.dark-mode
.executive-sales-monthly-page
.vm-chart__grid {
  stroke:
    var(--vm-modern-grid-dark)
    !important;
}


/* =========================================================
   ANIMATION · SCANNER
   ========================================================= */

@keyframes vmModernScanner {
  0% {
    stroke-dashoffset:
      110;

    opacity:
      0;
  }

  6% {
    opacity:
      0.05;
  }

  16% {
    opacity:
      0.95;
  }

  82% {
    opacity:
      0.95;
  }

  94% {
    opacity:
      0.15;
  }

  100% {
    stroke-dashoffset:
      -10;

    opacity:
      0;
  }
}


/* =========================================================
   ANIMATION · LINE
   ========================================================= */

@keyframes vmModernLineOpacity {
  0%,
  100% {
    opacity:
      0.82;
  }

  50% {
    opacity:
      1;
  }
}


/* =========================================================
   ANIMATION · AREA
   ========================================================= */

@keyframes vmModernAreaBreath {
  0%,
  100% {
    opacity:
      0.045;
  }

  50% {
    opacity:
      0.13;
  }
}


/* =========================================================
   ANIMATION · POINTS
   ========================================================= */

@keyframes vmModernPointFade {
  0%,
  100% {
    opacity:
      0.28;
  }

  50% {
    opacity:
      0.58;
  }
}


/* =========================================================
   ANIMATION · LAST POINT
   ========================================================= */

@keyframes vmModernLastPoint {
  0%,
  100% {
    opacity:
      0.72;

    filter:
      brightness(
        1
      );
  }

  50% {
    opacity:
      1;

    filter:
      brightness(
        1.22
      );
  }
}


/* =========================================================
   ANIMATION · BIG AREA
   ========================================================= */

@keyframes vmModernBigArea {
  0%,
  100% {
    opacity:
      0.09;
  }

  50% {
    opacity:
      0.16;
  }
}


/* =========================================================
   NO SCALE EN NINGUN PUNTO
   ========================================================= */

.executive-sales-monthly-page
.vm-sparkline__point,
.executive-sales-monthly-page
.vm-sparkline__point:hover,
.executive-sales-monthly-page
.vm-sparkline__point.is-last,
.executive-sales-monthly-page
.vm-chart__point,
.executive-sales-monthly-page
.vm-chart__point:hover {
  transform:
    none
    !important;
}


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

@media (
  max-width:
  1100px
) {
  .executive-sales-monthly-page
  .vm-kpi-card__sparkline {
    height:
      54px
      !important;

    min-height:
      54px
      !important;
  }


  .executive-sales-monthly-page
  .vm-sparkline {
    height:
      54px
      !important;
  }
}


@media (
  max-width:
  640px
) {
  .executive-sales-monthly-page
  .vm-kpi-card {
    min-height:
      128px;
  }


  .executive-sales-monthly-page
  .vm-kpi-card__sparkline {
    height:
      50px
      !important;

    min-height:
      50px
      !important;
  }


  .executive-sales-monthly-page
  .vm-sparkline {
    height:
      50px
      !important;
  }


  .executive-sales-monthly-page
  .vm-analytics-card__body {
    padding:
      13px
      14px
      16px;
  }
}


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

@media (
  prefers-reduced-motion:
  reduce
) {
  .executive-sales-monthly-page
  .vm-sparkline__scanner {
    display:
      none
      !important;
  }


  .executive-sales-monthly-page
  .vm-sparkline__line,
  .executive-sales-monthly-page
  .vm-sparkline__area,
  .executive-sales-monthly-page
  .vm-sparkline__point,
  .executive-sales-monthly-page
  .vm-chart__line-area,
  .executive-sales-monthly-page
  .vm-chart__area {
    animation:
      none
      !important;
  }
}


/* =========================================================
   FIN · MODERN EXECUTIVE V4
   ========================================================= *//* =========================================================
   WIRTZ HUB · VENTAS MENSUALES
   COMPARADOR DE PRODUCTOS · UI FINAL
   ========================================================= */


/* =========================================================
   MODAL
   ========================================================= */

.vm-modal--comparison {
  width:
    min(
      1540px,
      calc(
        100vw -
        32px
      )
    )
    !important;

  height:
    min(
      900px,
      calc(
        100vh -
        32px
      )
    )
    !important;

  max-height:
    calc(
      100vh -
      32px
    )
    !important;

  border-radius:
    14px
    !important;

  overflow:
    hidden
    !important;
}


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

.vm-modal--comparison
.vm-modal__header {
  min-height:
    76px;

  padding:
    14px
    18px;

  flex:
    0
    0
    auto;

  background:
    var(--vm-surface-soft);

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


.vm-modal--comparison
.vm-modal__header h3 {
  font-size:
    19px;

  font-weight:
    950;

  letter-spacing:
    -0.03em;
}


.vm-modal--comparison
.vm-modal__header p {
  margin-top:
    4px;

  font-size:
    10px;

  font-weight:
    750;
}


/* =========================================================
   SPLIT
   ========================================================= */

.vm-modal--comparison
.vm-modal__body--split {
  display:
    grid;

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

  min-height:
    0;

  height:
    100%;

  overflow:
    hidden;
}


/* =========================================================
   LEFT PICKER
   ========================================================= */

.vm-modal--comparison
.vm-product-picker {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;

  min-height:
    0;

  height:
    100%;

  background:
    var(--vm-surface-soft);

  border-right:
    1px
    solid
    var(--vm-border-strong);
}


/* =========================================================
   PICKER HEADER
   ========================================================= */

.vm-modal--comparison
.vm-product-picker__header {
  flex:
    0
    0
    auto;

  min-height:
    58px;

  padding:
    9px
    10px;
}


/* =========================================================
   SELECTED PRODUCTS
   ========================================================= */

.vm-modal--comparison
.vm-product-picker__selected {
  flex:
    0
    0
    auto;

  max-height:
    112px;

  padding:
    8px
    9px;

  overflow-y:
    auto;

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


/* =========================================================
   CHIPS
   ========================================================= */

.vm-modal--comparison
.vm-comparison-selected {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    stretch;

  gap:
    5px;

  width:
    100%;
}


.vm-modal--comparison
.vm-comparison-chip {
  width:
    100%;

  max-width:
    none;

  justify-content:
    space-between;

  min-height:
    35px;

  padding:
    5px
    8px;

  background:
    var(--vm-surface);

  border:
    1px
    solid
    var(--vm-border-strong);
}


.vm-modal--comparison
.vm-comparison-chip__copy {
  min-width:
    0;

  flex:
    1
    1
    auto;
}


.vm-modal--comparison
.vm-comparison-chip__copy
strong {
  max-width:
    240px;

  font-size:
    8.5px;
}


/* =========================================================
   SEARCH
   ========================================================= */

.vm-modal--comparison
.vm-product-picker__search {
  flex:
    0
    0
    auto;

  padding:
    9px
    9px
    6px;
}


.vm-modal--comparison
.vm-product-picker__search
.vm-input {
  height:
    38px;

  font-size:
    11px;

  font-weight:
    750;

  border-color:
    var(--vm-border-strong);
}


/* =========================================================
   SEARCH FOCUS
   ========================================================= */

.vm-modal--comparison
.vm-product-picker__search
.vm-input:focus {
  border-color:
    var(--vm-text);

  box-shadow:
    0
    0
    0
    2px
    rgba(
      90,
      145,
      255,
      0.1
    );
}


/* =========================================================
   SORT
   ========================================================= */

.vm-modal--comparison
.vm-product-picker__sort {
  flex:
    0
    0
    auto;

  padding:
    0
    9px
    7px;

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


.vm-modal--comparison
.vm-product-picker__sort
.vm-select {
  width:
    100%;

  min-width:
    0;

  height:
    35px;
}


/* =========================================================
   RESULTS INFO
   ========================================================= */

.vm-modal--comparison
.vm-product-picker__results-info {
  flex:
    0
    0
    auto;

  min-height:
    32px;

  padding:
    6px
    9px;

  background:
    var(--vm-surface);

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

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


.vm-modal--comparison
.vm-product-picker__results-info
span {
  color:
    var(--vm-text-secondary);

  font-size:
    8px;

  font-weight:
    900;
}


.vm-modal--comparison
.vm-product-picker__results-info
small {
  max-width:
    145px;

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

  font-size:
    7.5px;

  font-weight:
    750;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.vm-modal--comparison
.vm-product-picker__list {
  flex:
    1
    1
    auto;

  min-height:
    0;

  padding:
    6px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--vm-border-strong)
    transparent;
}


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

.vm-modal--comparison
.vm-product-picker__item {
  min-height:
    57px;

  margin-bottom:
    4px;

  padding:
    7px
    8px;

  border:
    1px
    solid
    transparent;

  border-radius:
    7px;

  background:
    transparent;
}


.vm-modal--comparison
.vm-product-picker__item:hover {
  background:
    var(--vm-surface-hover);

  border-color:
    var(--vm-border);
}


.vm-modal--comparison
.vm-product-picker__item.is-selected {
  background:
    rgba(
      72,
      196,
      144,
      0.08
    );

  border-color:
    rgba(
      72,
      196,
      144,
      0.48
    );
}


/* =========================================================
   ITEM CHECKBOX
   ========================================================= */

.vm-modal--comparison
.vm-product-picker__item
input[type="checkbox"] {
  width:
    15px;

  height:
    15px;

  accent-color:
    #4fcf9a;
}


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

.vm-modal--comparison
.vm-product-picker__item-main
strong {
  font-size:
    9px;

  font-weight:
    950;
}


.vm-modal--comparison
.vm-product-picker__item-main
small {
  margin-top:
    3px;

  font-size:
    7.5px;

  font-weight:
    700;
}


/* =========================================================
   ITEM META
   ========================================================= */

.vm-modal--comparison
.vm-product-picker__item-meta
strong {
  font-size:
    9px;

  font-weight:
    950;
}


.vm-modal--comparison
.vm-product-picker__item-meta
small {
  font-size:
    7px;
}


/* =========================================================
   COMPARE BUTTON
   ========================================================= */

.vm-modal--comparison
.vm-product-picker__actions {
  flex:
    0
    0
    auto;

  padding:
    8px;

  background:
    var(--vm-surface-soft);

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


.vm-modal--comparison
.vm-product-picker__actions
.vm-btn {
  width:
    100%;

  min-height:
    39px;

  border-radius:
    7px;
}


/* =========================================================
   RIGHT CONTENT
   ========================================================= */

.vm-modal--comparison
.vm-product-comparison-content {
  min-width:
    0;

  min-height:
    0;

  height:
    100%;

  padding:
    12px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  background:
    var(--vm-bg);

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--vm-border-strong)
    transparent;
}


/* =========================================================
   RESULTS
   ========================================================= */

.vm-modal--comparison
.vm-product-comparison-results {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   SUMMARY
   ========================================================= */

.vm-modal--comparison
.vm-product-comparison-summary {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        260px,
        1fr
      )
    );

  gap:
    9px;

  width:
    100%;
}


/* =========================================================
   SUMMARY CARDS
   ========================================================= */

.vm-modal--comparison
.vm-product-comparison-card {
  min-width:
    0;

  background:
    var(--vm-surface);

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

  border-radius:
    9px;

  overflow:
    hidden;

  transition:
    border-color
    160ms
    ease,
    transform
    160ms
    ease;
}


.vm-modal--comparison
.vm-product-comparison-card:hover {
  transform:
    translateY(
      -1px
    );

  border-color:
    var(--vm-border-dark);
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.vm-modal--comparison
.vm-product-comparison-card__header {
  min-height:
    57px;

  padding:
    9px
    10px;

  background:
    var(--vm-surface-soft);
}


.vm-modal--comparison
.vm-product-comparison-card__header
strong {
  font-size:
    9.5px;

  font-weight:
    950;
}


/* =========================================================
   CARD VALUES
   ========================================================= */

.vm-modal--comparison
.vm-product-comparison-card
dl {
  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );
}


.vm-modal--comparison
.vm-product-comparison-card
dt {
  color:
    var(--vm-text-muted);

  font-size:
    7px;

  font-weight:
    900;
}


.vm-modal--comparison
.vm-product-comparison-card
dd {
  color:
    var(--vm-text)
    !important;

  font-size:
    9px;

  font-weight:
    950;
}


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

.vm-modal--comparison
.vm-product-comparison-charts {
  display:
    grid;

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

  gap:
    10px;

  width:
    100%;

  min-width:
    0;
}


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

.vm-modal--comparison
.vm-product-comparison-charts
.vm-analytics-card {
  min-width:
    0;

  min-height:
    270px;

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

  border-radius:
    9px;

  background:
    var(--vm-surface);

  overflow:
    hidden;
}


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

.vm-modal--comparison
.vm-product-comparison-charts
.vm-analytics-card__header {
  min-height:
    57px;

  padding:
    9px
    11px;
}


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

.vm-modal--comparison
.vm-product-comparison-charts
.vm-analytics-card__body {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    210px;

  padding:
    16px
    18px;

  overflow:
    visible
    !important;
}


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

.vm-modal--comparison
.vm-product-comparison-charts
.vm-chart {
  width:
    100%;

  min-height:
    190px;

  padding:
    0
    !important;

  overflow:
    visible
    !important;
}


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

.vm-modal--comparison
.vm-product-comparison-charts
.vm-chart
svg {
  display:
    block;

  width:
    100%
    !important;

  min-height:
    185px
    !important;

  overflow:
    visible
    !important;
}


/* =========================================================
   HORIZONTAL BAR
   ========================================================= */

.vm-modal--comparison
.vm-chart--horizontal-bars
.vm-chart__hbar {
  opacity:
    1;

  transition:
    opacity
    150ms
    ease,
    filter
    150ms
    ease;
}


.vm-modal--comparison
.vm-chart--horizontal-bars
.vm-chart__hbar:hover {
  opacity:
    1;

  filter:
    brightness(
      1.12
    );
}


/* =========================================================
   BAR COLORS
   ========================================================= */

.vm-modal--comparison
.vm-chart__hbar--series-1 {
  fill:
    #5b8cff
    !important;
}


.vm-modal--comparison
.vm-chart__hbar--series-2 {
  fill:
    #4fd69c
    !important;
}


.vm-modal--comparison
.vm-chart__hbar--series-3 {
  fill:
    #9b7cff
    !important;
}


.vm-modal--comparison
.vm-chart__hbar--series-4 {
  fill:
    #f59e42
    !important;
}


.vm-modal--comparison
.vm-chart__hbar--series-5 {
  fill:
    #38bdf8
    !important;
}


.vm-modal--comparison
.vm-chart__hbar--series-6 {
  fill:
    #e879c5
    !important;
}


.vm-modal--comparison
.vm-chart__hbar--series-7 {
  fill:
    #f2c94c
    !important;
}


.vm-modal--comparison
.vm-chart__hbar--series-8 {
  fill:
    #36c5b4
    !important;
}


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

.vm-modal--comparison
.vm-chart__hbar-label {
  fill:
    var(--vm-text-secondary)
    !important;

  font-size:
    10px;

  font-weight:
    900;
}


.vm-modal--comparison
.vm-chart__hbar-value {
  fill:
    var(--vm-text)
    !important;

  font-size:
    10px;

  font-weight:
    950;
}


/* =========================================================
   WIDE CARDS
   ========================================================= */

.vm-modal--comparison
.vm-product-comparison-charts
.vm-analytics-card--wide {
  grid-column:
    1 /
    -1;

  min-height:
    320px;
}


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

.vm-modal--comparison
.vm-product-comparison-charts
.vm-analytics-card--wide
.vm-analytics-card__body {
  min-height:
    260px;
}


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

.vm-modal--comparison
.vm-product-comparison-content
.vm-empty-state {
  min-height:
    100%;

  padding:
    40px;
}


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

html.dark
.vm-modal--comparison,
body.dark
.vm-modal--comparison,
[data-theme="dark"]
.vm-modal--comparison,
.dark-mode
.vm-modal--comparison {
  background:
    #090909;

  border-color:
    #3d3d3d;
}


html.dark
.vm-modal--comparison
.vm-product-picker,
body.dark
.vm-modal--comparison
.vm-product-picker,
[data-theme="dark"]
.vm-modal--comparison
.vm-product-picker,
.dark-mode
.vm-modal--comparison
.vm-product-picker {
  background:
    #0c0c0c;

  border-color:
    #343434;
}


html.dark
.vm-modal--comparison
.vm-product-comparison-content,
body.dark
.vm-modal--comparison
.vm-product-comparison-content,
[data-theme="dark"]
.vm-modal--comparison
.vm-product-comparison-content,
.dark-mode
.vm-modal--comparison
.vm-product-comparison-content {
  background:
    #050505;
}


html.dark
.vm-modal--comparison
.vm-product-comparison-card,
html.dark
.vm-modal--comparison
.vm-product-comparison-charts
.vm-analytics-card,
body.dark
.vm-modal--comparison
.vm-product-comparison-card,
body.dark
.vm-modal--comparison
.vm-product-comparison-charts
.vm-analytics-card,
[data-theme="dark"]
.vm-modal--comparison
.vm-product-comparison-card,
[data-theme="dark"]
.vm-modal--comparison
.vm-product-comparison-charts
.vm-analytics-card,
.dark-mode
.vm-modal--comparison
.vm-product-comparison-card,
.dark-mode
.vm-modal--comparison
.vm-product-comparison-charts
.vm-analytics-card {
  background:
    #0b0b0b;

  border-color:
    #383838;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (
  max-width:
  1050px
) {
  .vm-modal--comparison
  .vm-modal__body--split {
    grid-template-columns:
      290px
      minmax(
        0,
        1fr
      );
  }


  .vm-modal--comparison
  .vm-product-comparison-charts {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }


  .vm-modal--comparison
  .vm-product-comparison-charts
  .vm-analytics-card--wide {
    grid-column:
      auto;
  }
}


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

@media (
  max-width:
  760px
) {
  .vm-modal--comparison {
    width:
      calc(
        100vw -
        12px
      )
      !important;

    height:
      calc(
        100vh -
        12px
      )
      !important;

    max-height:
      calc(
        100vh -
        12px
      )
      !important;
  }


  .vm-modal--comparison
  .vm-modal__body--split {
    display:
      flex;

    flex-direction:
      column;

    overflow-y:
      auto;
  }


  .vm-modal--comparison
  .vm-product-picker {
    flex:
      0
      0
      auto;

    height:
      auto;

    max-height:
      58vh;

    border-right:
      0;

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


  .vm-modal--comparison
  .vm-product-comparison-content {
    flex:
      0
      0
      auto;

    height:
      auto;

    overflow:
      visible;
  }


  .vm-modal--comparison
  .vm-product-comparison-summary,
  .vm-modal--comparison
  .vm-product-comparison-charts {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }
}/* =========================================================
   COMPARADOR PRODUCTOS
   AJUSTE FINAL DE GRAFICOS
   ========================================================= */


/* =========================================================
   CARDS DE GRAFICOS
   ========================================================= */

.vm-modal--comparison
.vm-product-comparison-charts
.vm-analytics-card {
  min-height:
    220px
    !important;

  background:
    var(--vm-surface);

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

  border-radius:
    10px;

  overflow:
    hidden;
}


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

.vm-modal--comparison
.vm-product-comparison-charts
.vm-analytics-card__header {
  min-height:
    54px;

  padding:
    10px
    12px;
}


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

.vm-modal--comparison
.vm-product-comparison-charts
.vm-analytics-card__body {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    150px
    !important;

  padding:
    10px
    14px
    14px
    !important;

  overflow:
    hidden
    !important;
}


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

.vm-modal--comparison
.vm-chart--horizontal-bars {
  width:
    100%;

  min-height:
    0
    !important;

  padding:
    0
    !important;

  margin:
    0;

  overflow:
    visible
    !important;
}


/* =========================================================
   SVG HORIZONTAL
   ========================================================= */

.vm-modal--comparison
.vm-chart--horizontal-bars
svg {
  display:
    block;

  width:
    100%
    !important;

  height:
    auto
    !important;

  min-height:
    0
    !important;

  max-height:
    170px;

  overflow:
    visible
    !important;
}


/* =========================================================
   LABEL DEL PRODUCTO
   ========================================================= */

.vm-modal--comparison
.vm-chart--horizontal-bars
.vm-chart__hbar-label {
  fill:
    var(--vm-text-secondary)
    !important;

  font-size:
    11px
    !important;

  font-weight:
    900
    !important;
}


/* =========================================================
   VALOR
   ========================================================= */

.vm-modal--comparison
.vm-chart--horizontal-bars
.vm-chart__hbar-value {
  fill:
    var(--vm-text)
    !important;

  font-size:
    11px
    !important;

  font-weight:
    950
    !important;
}


/* =========================================================
   BARRAS
   ========================================================= */

.vm-modal--comparison
.vm-chart--horizontal-bars
.vm-chart__hbar {
  opacity:
    1
    !important;

  rx:
    7px;

  transition:
    filter
    160ms
    ease,
    opacity
    160ms
    ease;
}


/* =========================================================
   PRODUCTO 1
   ========================================================= */

.vm-modal--comparison
.vm-chart--horizontal-bars
.vm-chart__hbar--series-1 {
  fill:
    #568cff
    !important;
}


/* =========================================================
   PRODUCTO 2
   ========================================================= */

.vm-modal--comparison
.vm-chart--horizontal-bars
.vm-chart__hbar--series-2 {
  fill:
    #4ed49d
    !important;
}


/* =========================================================
   PRODUCTO 3
   ========================================================= */

.vm-modal--comparison
.vm-chart--horizontal-bars
.vm-chart__hbar--series-3 {
  fill:
    #9d82ff
    !important;
}


/* =========================================================
   PRODUCTO 4
   ========================================================= */

.vm-modal--comparison
.vm-chart--horizontal-bars
.vm-chart__hbar--series-4 {
  fill:
    #f2a45f
    !important;
}


/* =========================================================
   CMV VS GANANCIA
   ========================================================= */

.vm-modal--comparison
.vm-chart--grouped {
  width:
    100%;

  min-height:
    250px;

  padding:
    0
    !important;

  overflow:
    visible
    !important;
}


/* =========================================================
   CMV VS GANANCIA · SVG
   ========================================================= */

.vm-modal--comparison
.vm-chart--grouped
svg {
  display:
    block;

  width:
    100%
    !important;

  height:
    auto
    !important;

  min-height:
    240px;

  overflow:
    visible
    !important;
}


/* =========================================================
   CMV · NARANJA
   ========================================================= */

.vm-modal--comparison
.vm-chart--grouped
.vm-chart__group-bar--1 {
  fill:
    #f0a45d
    !important;

  stroke:
    #f0a45d
    !important;

  opacity:
    1
    !important;
}


/* =========================================================
   GANANCIA · VERDE
   ========================================================= */

.vm-modal--comparison
.vm-chart--grouped
.vm-chart__group-bar--2 {
  fill:
    #4fd69c
    !important;

  stroke:
    #4fd69c
    !important;

  opacity:
    1
    !important;
}


/* =========================================================
   LEYENDA CMV
   ========================================================= */

.vm-modal--comparison
.vm-chart--grouped
.vm-chart-legend__dot--1 {
  background:
    #f0a45d
    !important;

  border:
    0;
}


/* =========================================================
   LEYENDA GANANCIA
   ========================================================= */

.vm-modal--comparison
.vm-chart--grouped
.vm-chart-legend__dot--2 {
  background:
    #4fd69c
    !important;

  border:
    0;
}


/* =========================================================
   LEYENDA
   ========================================================= */

.vm-modal--comparison
.vm-chart--grouped
.vm-chart-legend {
  gap:
    14px;

  padding:
    2px
    4px
    8px;
}


.vm-modal--comparison
.vm-chart--grouped
.vm-chart-legend__item {
  gap:
    6px;

  color:
    var(--vm-text-secondary);

  font-size:
    10px;

  font-weight:
    900;
}


.vm-modal--comparison
.vm-chart--grouped
.vm-chart-legend__dot {
  width:
    10px;

  height:
    10px;

  border-radius:
    3px;
}


/* =========================================================
   CMV VS GANANCIA · LABELS
   ========================================================= */

.vm-modal--comparison
.vm-chart--grouped
.vm-chart__x-label {
  fill:
    var(--vm-text-secondary)
    !important;

  font-size:
    10px
    !important;

  font-weight:
    900
    !important;
}


.vm-modal--comparison
.vm-chart--grouped
.vm-chart__axis-label {
  fill:
    var(--vm-text-muted)
    !important;

  font-size:
    9px
    !important;

  font-weight:
    850
    !important;
}


/* =========================================================
   GRID MAS DISCRETO
   ========================================================= */

.vm-modal--comparison
.vm-chart--grouped
.vm-chart__grid {
  stroke:
    var(--vm-border)
    !important;

  opacity:
    0.55;
}


/* =========================================================
   WIDE CARDS
   ========================================================= */

.vm-modal--comparison
.vm-product-comparison-charts
.vm-analytics-card--wide {
  grid-column:
    1 /
    -1;

  min-height:
    300px
    !important;
}


.vm-modal--comparison
.vm-product-comparison-charts
.vm-analytics-card--wide
.vm-analytics-card__body {
  min-height:
    240px
    !important;
}


/* =========================================================
   DARK MODE · CMV
   ========================================================= */

html.dark
.vm-modal--comparison
.vm-chart--grouped
.vm-chart__group-bar--1,
body.dark
.vm-modal--comparison
.vm-chart--grouped
.vm-chart__group-bar--1,
[data-theme="dark"]
.vm-modal--comparison
.vm-chart--grouped
.vm-chart__group-bar--1,
.dark-mode
.vm-modal--comparison
.vm-chart--grouped
.vm-chart__group-bar--1 {
  fill:
    #f2a45f
    !important;

  stroke:
    #f2a45f
    !important;
}


/* =========================================================
   DARK MODE · GANANCIA
   ========================================================= */

html.dark
.vm-modal--comparison
.vm-chart--grouped
.vm-chart__group-bar--2,
body.dark
.vm-modal--comparison
.vm-chart--grouped
.vm-chart__group-bar--2,
[data-theme="dark"]
.vm-modal--comparison
.vm-chart--grouped
.vm-chart__group-bar--2,
.dark-mode
.vm-modal--comparison
.vm-chart--grouped
.vm-chart__group-bar--2 {
  fill:
    #55d9a4
    !important;

  stroke:
    #55d9a4
    !important;
}


/* =========================================================
   DARK MODE · LEGEND CMV
   ========================================================= */

html.dark
.vm-modal--comparison
.vm-chart--grouped
.vm-chart-legend__dot--1,
body.dark
.vm-modal--comparison
.vm-chart--grouped
.vm-chart-legend__dot--1,
[data-theme="dark"]
.vm-modal--comparison
.vm-chart--grouped
.vm-chart-legend__dot--1,
.dark-mode
.vm-modal--comparison
.vm-chart--grouped
.vm-chart-legend__dot--1 {
  background:
    #f2a45f
    !important;
}


/* =========================================================
   DARK MODE · LEGEND GANANCIA
   ========================================================= */

html.dark
.vm-modal--comparison
.vm-chart--grouped
.vm-chart-legend__dot--2,
body.dark
.vm-modal--comparison
.vm-chart--grouped
.vm-chart-legend__dot--2,
[data-theme="dark"]
.vm-modal--comparison
.vm-chart--grouped
.vm-chart-legend__dot--2,
.dark-mode
.vm-modal--comparison
.vm-chart--grouped
.vm-chart-legend__dot--2 {
  background:
    #55d9a4
    !important;
}


/* =========================================================
   HOVER BARRAS
   ========================================================= */

.vm-modal--comparison
.vm-chart__hbar:hover,
.vm-modal--comparison
.vm-chart__group-bar:hover {
  filter:
    brightness(
      1.12
    );

  opacity:
    1
    !important;
}

/* =========================================================
   FISCAL MAYORISTA · DESGLOSE
   ========================================================= */

.vm-fiscal-mayorista {
  width: 100%;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--vm-border, #cbd5e1);
  border-radius: 16px;
  background: var(--vm-surface, #ffffff);
  color: var(--vm-text, #111827);
  box-sizing: border-box;
}

.vm-fiscal-mayorista,
.vm-fiscal-mayorista *,
.vm-fiscal-mayorista *::before,
.vm-fiscal-mayorista *::after {
  box-sizing: border-box;
}

#vmFiscalMayoristaRegion {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.vm-fiscal-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  min-width: 0;
  margin: 20px 0 24px;
}

.vm-fiscal-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 132px;
  padding: 18px;
  border: 1px solid var(--vm-border, #cbd5e1);
  border-radius: 12px;
  background: var(--vm-card-bg, #ffffff);
  color: var(--vm-text, #111827);
  box-shadow: 0 2px 8px rgb(0 0 0 / 3%);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.vm-fiscal-card:hover {
  border-color: var(--vm-border-strong, #64748b);
  box-shadow: 0 5px 16px rgb(0 0 0 / 7%);
  transform: translateY(-1px);
}

.vm-fiscal-card__header {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.vm-fiscal-card__header svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.vm-fiscal-card__header span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.vm-fiscal-card__value {
  display: block;
  width: 100%;
  min-width: 0;
  font-size: clamp(19px, 1.65vw, 27px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vm-fiscal-card__description {
  display: block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  opacity: 0.8;
}

.vm-fiscal-mayorista__detail {
  width: 100%;
  min-width: 0;
  margin-top: 22px;
}

.vm-fiscal-mayorista__detail h3 {
  margin: 0 0 15px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.vm-fiscal-mayorista .vm-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--vm-border, #cbd5e1);
  border-radius: 12px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.vm-fiscal-mayorista .vm-table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--vm-card-bg, #ffffff);
  color: inherit;
}

.vm-fiscal-mayorista .vm-table thead th {
  position: relative;
  padding: 13px 12px;
  border-bottom: 2px solid var(--vm-border, #cbd5e1);
  background: var(--vm-table-head, #f1f5f9);
  color: var(--vm-text, #111827);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
}

.vm-fiscal-mayorista .vm-table tbody td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--vm-border, #cbd5e1);
  color: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
  vertical-align: middle;
}

.vm-fiscal-mayorista .vm-table tbody tr:last-child td {
  border-bottom: 0;
}

.vm-fiscal-mayorista .vm-table tbody tr:hover {
  background: var(--vm-row-hover, rgb(100 116 139 / 6%));
}

.vm-fiscal-mayorista .vm-table th:nth-child(n + 5),
.vm-fiscal-mayorista .vm-table td:nth-child(n + 5) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vm-fiscal-mayorista .vm-table td:nth-child(3) {
  min-width: 190px;
  max-width: 320px;
  overflow-wrap: anywhere;
}

.vm-fiscal-mayorista .vm-table td strong {
  font-weight: 800;
}

.vm-fiscal-mayorista .vm-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin-top: 15px;
  padding: 12px 0;
  border-top: 1px solid var(--vm-border, #cbd5e1);
}

.vm-fiscal-mayorista .vm-pagination__info {
  font-size: 12px;
  font-weight: 700;
}

.vm-fiscal-mayorista .vm-pagination__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.vm-fiscal-mayorista .vm-pagination__page {
  min-width: 54px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.vm-fiscal-mayorista .vm-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--vm-border, #cbd5e1);
  border-radius: 9px;
  background: var(--vm-card-bg, #ffffff);
  color: inherit;
  cursor: pointer;
}

.vm-fiscal-mayorista .vm-icon-btn:hover:not(:disabled) {
  border-color: var(--vm-border-strong, #64748b);
}

.vm-fiscal-mayorista .vm-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.vm-fiscal-mayorista__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid var(--vm-border, #cbd5e1);
  border-radius: 10px;
  background: var(--vm-note-bg, rgb(100 116 139 / 6%));
  color: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.6;
}

.vm-fiscal-mayorista__notice svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.vm-fiscal-mayorista .vm-alert--error {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #dc2626;
  border-radius: 10px;
  color: #b91c1c;
  background: rgb(220 38 38 / 6%);
  font-size: 12px;
  font-weight: 700;
}

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

@media (max-width: 900px) {
  .vm-fiscal-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .vm-fiscal-mayorista {
    padding: 15px;
    border-radius: 12px;
  }

  .vm-fiscal-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 15px 0 20px;
  }

  .vm-fiscal-card {
    min-height: 115px;
    padding: 15px;
  }

  .vm-fiscal-card__value {
    font-size: 22px;
  }

  .vm-fiscal-mayorista__detail h3 {
    font-size: 15px;
  }

  .vm-fiscal-mayorista .vm-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .vm-fiscal-mayorista .vm-pagination__controls {
    justify-content: space-between;
  }
}

[data-theme="dark"] .vm-fiscal-mayorista,
[data-theme="dark"] .vm-fiscal-card {
  --vm-surface: #080808;
  --vm-card-bg: #101010;
  --vm-text: #ffffff;
  --vm-border: #444444;
  --vm-border-strong: #808080;
  --vm-table-head: #181818;
  --vm-row-hover: #202020;
  --vm-note-bg: #171717;
}

[data-theme="dark"] .vm-fiscal-mayorista .vm-icon-btn {
  background: #151515;
  color: #ffffff;
}

[data-theme="dark"] .vm-fiscal-mayorista .vm-alert--error {
  color: #fecaca;
  background: rgb(220 38 38 / 12%);
}

@media (prefers-reduced-motion: reduce) {
  .vm-fiscal-card {
    transition: none;
  }

  .vm-fiscal-card:hover {
    transform: none;
  }
}
/* =========================================================
   VENTAS MENSUALES · DESGLOSE FISCAL MAYORISTA
   ========================================================= */

#vmFiscalMayoristaRegion {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

#vmFiscalMayoristaRegion,
#vmFiscalMayoristaRegion *,
#vmFiscalMayoristaRegion *::before,
#vmFiscalMayoristaRegion *::after {
  box-sizing: border-box;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista {
  --fiscal-bg: #ffffff;
  --fiscal-card: #ffffff;
  --fiscal-text: #080808;
  --fiscal-muted: #303030;
  --fiscal-border: #9da9b8;
  --fiscal-border-strong: #65758a;
  --fiscal-head: #edf1f5;
  --fiscal-row-alt: #f2f5f8;
  --fiscal-row-hover: #e7eef7;

  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 22px;
  background: var(--fiscal-bg);
  border: 1px solid var(--fiscal-border-strong);
  border-radius: 14px;
  color: var(--fiscal-text);
  overflow: hidden;
}

#vmFiscalMayoristaRegion .vm-section-header {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--fiscal-border);
}

#vmFiscalMayoristaRegion .vm-section-header h2 {
  color: var(--fiscal-text);
  font-weight: 850;
}

#vmFiscalMayoristaRegion .vm-section-header p {
  color: var(--fiscal-muted);
  font-weight: 650;
}

#vmFiscalMayoristaRegion .vm-fiscal-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  min-width: 0;
  margin: 16px 0 24px;
}

#vmFiscalMayoristaRegion .vm-fiscal-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-width: 0;
  min-height: 145px;
  padding: 18px;
  background: var(--fiscal-card);
  color: var(--fiscal-text);
  border: 1px solid var(--fiscal-border);
  border-radius: 12px;
  box-shadow: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

#vmFiscalMayoristaRegion .vm-fiscal-card:hover {
  border-color: var(--fiscal-border-strong);
  box-shadow: 0 5px 18px rgb(0 0 0 / 6%);
  transform: translateY(-1px);
}

#vmFiscalMayoristaRegion .vm-fiscal-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  color: var(--fiscal-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

#vmFiscalMayoristaRegion .vm-fiscal-card__header svg,
#vmFiscalMayoristaRegion .vm-fiscal-card__header i {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--fiscal-text);
}

#vmFiscalMayoristaRegion .vm-fiscal-card__header span {
  min-width: 0;
  overflow-wrap: anywhere;
}

#vmFiscalMayoristaRegion .vm-fiscal-card__value {
  display: block;
  width: 100%;
  min-width: 0;
  color: var(--fiscal-text);
  font-size: clamp(20px, 1.65vw, 28px);
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

#vmFiscalMayoristaRegion .vm-fiscal-card__description {
  color: var(--fiscal-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.55;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista__detail {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 26px;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista__detail h3 {
  margin: 0 0 16px;
  color: var(--fiscal-text);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.4;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista__detail > .vm-table-wrap {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  border: 1px solid var(--fiscal-border-strong);
  border-radius: 12px;
  background: var(--fiscal-card);
  -webkit-overflow-scrolling: touch;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--fiscal-text);
  background: var(--fiscal-card);
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th,
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td {
  min-width: 100px;
  padding: 13px 14px;
  border-right: 1px solid var(--fiscal-border);
  border-bottom: 1px solid var(--fiscal-border);
  color: var(--fiscal-text);
  font-size: 12px;
  line-height: 1.5;
  vertical-align: middle;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:last-child,
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:last-child {
  border-right: 0;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table tbody tr:last-child td {
  border-bottom: 0;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--fiscal-head);
  color: var(--fiscal-text);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  white-space: nowrap;
  border-bottom: 2px solid var(--fiscal-border-strong);
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table tbody td {
  background: var(--fiscal-card);
  font-weight: 650;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table tbody tr:nth-child(even) td {
  background: var(--fiscal-row-alt);
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table tbody tr:hover td {
  background: var(--fiscal-row-hover);
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table tbody td strong {
  color: var(--fiscal-text);
  font-weight: 850;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(1),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(1) {
  min-width: 105px;
  white-space: nowrap;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(2),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(2) {
  min-width: 185px;
  white-space: nowrap;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(3),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(3) {
  min-width: 105px;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(4),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(4) {
  min-width: 220px;
  max-width: 340px;
  overflow-wrap: anywhere;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(5),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(5) {
  min-width: 165px;
  white-space: nowrap;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(n + 6),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(n + 6) {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(11),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(11) {
  text-align: center;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(15),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(15) {
  background: #e9f2fc;
  font-weight: 850;
  border-left: 2px solid var(--fiscal-border-strong);
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(14),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(14) {
  font-weight: 800;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin: 14px 0;
  padding: 13px 15px;
  border: 1px solid var(--fiscal-border);
  border-radius: 10px;
  background: var(--fiscal-row-alt);
  color: var(--fiscal-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.65;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista__notice svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

#vmFiscalMayoristaRegion .vm-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  min-width: 0;
  margin-top: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--fiscal-border);
}

#vmFiscalMayoristaRegion .vm-pagination__info,
#vmFiscalMayoristaRegion .vm-pagination__page {
  color: var(--fiscal-text);
  font-size: 12px;
  font-weight: 800;
}

#vmFiscalMayoristaRegion .vm-pagination__controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

#vmFiscalMayoristaRegion .vm-pagination__page {
  min-width: 58px;
  text-align: center;
}

#vmFiscalMayoristaRegion .vm-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  background: var(--fiscal-card);
  color: var(--fiscal-text);
  border: 1px solid var(--fiscal-border-strong);
  border-radius: 9px;
  cursor: pointer;
}

#vmFiscalMayoristaRegion .vm-icon-btn:hover:not(:disabled) {
  background: var(--fiscal-row-alt);
  border-color: var(--fiscal-text);
}

#vmFiscalMayoristaRegion .vm-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

#vmFiscalMayoristaRegion .vm-alert--error {
  margin: 12px 0;
  padding: 13px 15px;
  border: 1px solid #b91c1c;
  border-radius: 10px;
  background: #fff1f2;
  color: #991b1b;
  font-size: 12px;
  font-weight: 750;
}

@media (max-width: 1300px) {
  #vmFiscalMayoristaRegion .vm-fiscal-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  #vmFiscalMayoristaRegion .vm-fiscal-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #vmFiscalMayoristaRegion .vm-fiscal-mayorista {
    padding: 18px;
  }
}

@media (max-width: 620px) {
  #vmFiscalMayoristaRegion .vm-fiscal-mayorista {
    padding: 14px;
    border-radius: 11px;
  }

  #vmFiscalMayoristaRegion .vm-fiscal-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  #vmFiscalMayoristaRegion .vm-fiscal-card {
    min-height: 115px;
    padding: 15px;
  }

  #vmFiscalMayoristaRegion .vm-fiscal-card__value {
    font-size: 23px;
  }

  #vmFiscalMayoristaRegion .vm-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  #vmFiscalMayoristaRegion .vm-pagination__controls {
    justify-content: space-between;
  }
}

/* =========================================================
   MODO OSCURO
   ========================================================= */

[data-theme="dark"] #vmFiscalMayoristaRegion .vm-fiscal-mayorista,
[data-bs-theme="dark"] #vmFiscalMayoristaRegion .vm-fiscal-mayorista,
.dark #vmFiscalMayoristaRegion .vm-fiscal-mayorista {
  --fiscal-bg: #080808;
  --fiscal-card: #111111;
  --fiscal-text: #ffffff;
  --fiscal-muted: #dddddd;
  --fiscal-border: #484848;
  --fiscal-border-strong: #777777;
  --fiscal-head: #1b1b1b;
  --fiscal-row-alt: #181818;
  --fiscal-row-hover: #262626;
}

[data-theme="dark"] #vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(15),
[data-theme="dark"] #vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(15),
[data-bs-theme="dark"] #vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(15),
[data-bs-theme="dark"] #vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(15),
.dark #vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(15),
.dark #vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(15) {
  background: #1b2a3b;
}

[data-theme="dark"] #vmFiscalMayoristaRegion .vm-alert--error,
[data-bs-theme="dark"] #vmFiscalMayoristaRegion .vm-alert--error,
.dark #vmFiscalMayoristaRegion .vm-alert--error {
  background: #2b1010;
  color: #fecaca;
  border-color: #dc2626;
}

@media (prefers-reduced-motion: reduce) {
  #vmFiscalMayoristaRegion .vm-fiscal-card {
    transition: none;
  }

  #vmFiscalMayoristaRegion .vm-fiscal-card:hover {
    transform: none;
  }
}/* COMPARADOR · GRÁFICOS SIN SCROLL HORIZONTAL */

.vm-modal--comparison .vm-product-comparison-results,
.vm-modal--comparison .vm-product-comparison-charts,
.vm-modal--comparison .vm-analytics-card,
.vm-modal--comparison .vm-analytics-card__body,
.vm-modal--comparison .vm-chart,
.vm-modal--comparison .vm-donut-layout {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.vm-modal--comparison .vm-product-comparison-charts {
  width: 100%;
  overflow-x: clip;
}

.vm-modal--comparison .vm-analytics-card {
  overflow: hidden;
}

.vm-modal--comparison .vm-analytics-card__body {
  width: 100%;
  padding: 18px;
  overflow: hidden;
}

/* SVG adaptable al ancho disponible */

.vm-modal--comparison .vm-chart > div > svg,
.vm-modal--comparison .vm-chart > svg {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}

/* Eliminar desplazamiento horizontal interno */

.vm-modal--comparison .vm-chart > div:has(> svg) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Gráficos más proporcionados */

.vm-modal--comparison .vm-chart--grouped,
.vm-modal--comparison .vm-chart--waterfall {
  width: 100%;
  min-width: 0;
}

.vm-modal--comparison .vm-chart-legend {
  gap: 12px;
  flex-wrap: wrap;
}

.vm-modal--comparison .vm-chart-legend__item {
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* Dona y leyenda */

.vm-modal--comparison .vm-donut-layout {
  width: 100%;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
  gap: 18px;
}

.vm-modal--comparison .vm-donut-chart svg {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
}

.vm-modal--comparison .vm-donut-legend {
  min-width: 0;
  width: 100%;
}

.vm-modal--comparison .vm-donut-legend__item {
  min-width: 0;
  max-width: 100%;
}

/* Adaptación a pantallas pequeñas */

@media (max-width: 1100px) {
  .vm-modal--comparison .vm-donut-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .vm-modal--comparison .vm-donut-chart {
    justify-content: center;
  }
}

@media (max-width: 700px) {
  .vm-modal--comparison .vm-analytics-card__body {
    padding: 12px;
  }

  .vm-modal--comparison .vm-product-comparison-charts {
    grid-template-columns: minmax(0, 1fr);
  }
}/* =========================================================
   VENTAS MENSUALES · TABLA FISCAL COMPLETA
   ========================================================= */

#vmFiscalMayoristaRegion .vm-fiscal-mayorista__detail {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista__detail > .vm-table-wrap {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th,
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td {
  min-width: 0 !important;
  max-width: none !important;
  width: auto;
  padding: 9px 5px;
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: normal !important;
  text-align: right;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table thead th {
  font-size: 9px;
  font-weight: 850;
  word-break: normal;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(1),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(1) {
  width: 6%;
  text-align: left;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(2),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(2) {
  width: 10%;
  text-align: left;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(3),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(3) {
  width: 5%;
  text-align: left;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(4),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(4) {
  width: 14%;
  text-align: left;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(5),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(5) {
  width: 9%;
  text-align: left;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(6),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(6) {
  width: 4%;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(7),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(7) {
  width: 7%;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(8),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(8) {
  width: 7%;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(9),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(9) {
  width: 4%;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(10),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(10) {
  width: 6%;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(11),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(11) {
  width: 6%;
  text-align: center;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(12),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(12) {
  width: 4%;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(13),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(13) {
  width: 6%;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(14),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(14) {
  width: 6%;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(15),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(15) {
  width: 6%;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(16),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(16) {
  width: 5%;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th:nth-child(17),
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td:nth-child(17) {
  width: 5%;
  font-weight: 850;
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td strong {
  font-size: inherit;
  font-weight: 850;
}

/* Bordes visibles y filas diferenciadas */

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th,
#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td {
  border-right: 1px solid var(--fiscal-border);
  border-bottom: 1px solid var(--fiscal-border);
}

#vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table tbody tr:nth-child(even) td {
  background: var(--fiscal-row-alt);
}

/* Pantallas medianas */

@media (max-width: 1300px) {
  #vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th,
  #vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td {
    font-size: 9px;
    padding: 8px 3px;
  }

  #vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table thead th {
    font-size: 8px;
  }
}

/* Móviles: todas las columnas permanecen disponibles */

@media (max-width: 700px) {
  #vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table {
    table-layout: fixed;
    width: 100%;
  }

  #vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table th,
  #vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table td {
    padding: 5px 2px;
    font-size: 8px;
  }

  #vmFiscalMayoristaRegion .vm-fiscal-mayorista .vm-table thead th {
    font-size: 7px;
  }
}page #vmAnalyticsRegion .vm-chart__x-label,
  .executive-sales-monthly-page #vmEvolutionRegion .vm-chart__x-label {
    font-size: 11px !important;
  }
/* UBICACIÓN:
   frontend/src/pages/direccion-ejecutiva/ventas-mensuales/ventas-mensuales.css

   AGREGAR AL FINAL DEL ARCHIVO
*/

/* =========================================================
   PARTICIPACIÓN POR CATEGORÍA · DISEÑO COMPACTO
   ========================================================= */

.executive-sales-monthly-page
.vm-analytics-card--categories {
  width: 100%;
  max-width: 100%;
}

.executive-sales-monthly-page
.vm-analytics-card--categories
.vm-analytics-card__body {
  padding: 14px !important;
}

.executive-sales-monthly-page
.vm-chart--category-participation {
  width: 100% !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 16px !important;
  gap: 12px !important;
}

.executive-sales-monthly-page
.vm-chart--category-participation svg {
  display: block;
  width: 100% !important;
  max-width: 780px !important;
  height: auto !important;
  margin: 0 auto;
}

.executive-sales-monthly-page
.vm-chart--category-participation > div:nth-child(3) {
  column-gap: 18px !important;
}

.executive-sales-monthly-page
.vm-chart--category-participation > div:nth-child(3) > div {
  padding: 7px 0 !important;
}

@media (max-width: 700px) {
  .executive-sales-monthly-page
  .vm-chart--category-participation {
    padding: 10px !important;
  }

  .executive-sales-monthly-page
  .vm-chart--category-participation svg {
    max-width: 100% !important;
  }
}/* =========================================================
   PARTICIPACIÓN POR CATEGORÍA · ANCHO COMPLETO
   ========================================================= */

.executive-sales-monthly-page
.vm-analytics-card--categories
.vm-analytics-card__body {
  width: 100%;
  padding: 14px 18px !important;
}

.executive-sales-monthly-page
.vm-analytics-card--categories
.vm-chart--category-participation {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 16px 22px !important;
  gap: 12px !important;
}

.executive-sales-monthly-page
.vm-analytics-card--categories
.vm-chart--category-participation svg {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
}

.executive-sales-monthly-page
.vm-analytics-card--categories
.vm-chart--category-participation > div {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 700px) {
  .executive-sales-monthly-page
  .vm-analytics-card--categories
  .vm-chart--category-participation {
    padding: 12px !important;
  }
}/* UBICACIÓN:
   frontend/src/pages/direccion-ejecutiva/ventas-mensuales/ventas-mensuales.css

   AGREGAR AL FINAL
*/

/* =========================================================
   PARTICIPACIÓN POR CATEGORÍA · MODO CLARO
   ========================================================= */

.executive-sales-monthly-page
.vm-analytics-card--categories
.vm-chart--category-participation {
  background: #ffffff !important;
  color: #080a0c !important;
  border-color: #b7bec8 !important;
}

.executive-sales-monthly-page
.vm-analytics-card--categories
.vm-chart--category-participation svg {
  background: transparent !important;
  color: #080a0c !important;
}

.executive-sales-monthly-page
.vm-analytics-card--categories
.vm-chart--category-participation svg text[fill="#FFFFFF"],
.executive-sales-monthly-page
.vm-analytics-card--categories
.vm-chart--category-participation svg text[fill="#ffffff"] {
  fill: #080a0c !important;
}

.executive-sales-monthly-page
.vm-analytics-card--categories
.vm-chart--category-participation span[style],
.executive-sales-monthly-page
.vm-analytics-card--categories
.vm-chart--category-participation strong[style] {
  color: #080a0c !important;
}

.executive-sales-monthly-page
.vm-analytics-card--categories
.vm-chart--category-participation > div:nth-child(3) > div {
  border-bottom-color: #c3c9d0 !important;
}

.executive-sales-monthly-page
.vm-analytics-card--categories
.vm-chart--category-participation > div:last-child {
  color: #080a0c !important;
  border-top-color: #c3c9d0 !important;
}

/* =========================================================
   MODO OSCURO
   ========================================================= */

[data-theme="dark"]
.executive-sales-monthly-page
.vm-analytics-card--categories
.vm-chart--category-participation {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #374151 !important;
}

[data-theme="dark"]
.executive-sales-monthly-page
.vm-analytics-card--categories
.vm-chart--category-participation svg text[fill="#FFFFFF"] {
  fill: #ffffff !important;
}

[data-theme="dark"]
.executive-sales-monthly-page
.vm-analytics-card--categories
.vm-chart--category-participation span[style],
[data-theme="dark"]
.executive-sales-monthly-page
.vm-analytics-card--categories
.vm-chart--category-participation strong[style] {
  color: #ffffff !important;
}

[data-theme="dark"]
.executive-sales-monthly-page
.vm-analytics-card--categories
.vm-chart--category-participation > div:nth-child(3) > div {
  border-bottom-color: #293241 !important;
}

[data-theme="dark"]
.executive-sales-monthly-page
.vm-analytics-card--categories
.vm-chart--category-participation > div:last-child {
  color: #d5d9e2 !important;
  border-top-color: #374151 !important;
}