/* =========================================================
   WIRTZ HUB · COMERCIAL DIGITAL · VENTAS PROMEDIO
   FRONTEND CSS V2

   UBICACIÓN:
   frontend/src/pages/comercial-digital/ventas-promedio/
   ventas-promedio.css

   PARTE 1 DE 2

   DISEÑO:
   - DM Sans.
   - Minimalista.
   - Responsive.
   - Negro real en dark mode.
   - Sin glow.
   - Sin blur.
   - Sin sombras decorativas.
   ========================================================= */


/* =========================================================
   01. VARIABLES
   ========================================================= */

.ventas-promedio-page {
  --vp-bg:
    #f7f8fa;

  --vp-surface:
    #ffffff;

  --vp-surface-soft:
    #f3f4f6;

  --vp-surface-muted:
    #eef0f3;

  --vp-border:
    #dde1e7;

  --vp-border-strong:
    #cbd1d9;

  --vp-text:
    #15171a;

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

  --vp-text-muted:
    #7b8490;

  --vp-primary:
    #111827;

  --vp-primary-text:
    #ffffff;

  --vp-success:
    #15803d;

  --vp-success-bg:
    #f0fdf4;

  --vp-success-border:
    #bbf7d0;

  --vp-danger:
    #b42318;

  --vp-danger-bg:
    #fff4f2;

  --vp-danger-border:
    #fecaca;

  --vp-warning:
    #a15c00;

  --vp-warning-bg:
    #fff8e8;

  --vp-warning-border:
    #f8d58a;

  --vp-info:
    #2457c5;

  --vp-info-bg:
    #f1f5ff;

  --vp-info-border:
    #cdd9ff;

  --vp-radius:
    14px;

  --vp-radius-sm:
    9px;

  --vp-control-height:
    40px;

  width:
    100%;

  min-width:
    0;

  max-width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    16px;

  padding:
    4px 0 28px;

  box-sizing:
    border-box;

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

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


/* =========================================================
   02. BOX SIZING
   ========================================================= */

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


/* =========================================================
   03. HEADER
   ========================================================= */

.ventas-promedio-head {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    18px 20px;

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

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

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


.ventas-promedio-head__identity {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    13px;
}


.ventas-promedio-head__icon {
  flex:
    0 0 auto;

  width:
    42px;

  height:
    42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    11px;

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

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


.ventas-promedio-head__identity > div {
  min-width:
    0;
}


.ventas-promedio-head__eyebrow {
  display:
    block;

  margin-bottom:
    3px;

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

  font-size:
    11px;

  font-weight:
    700;

  line-height:
    1.2;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.ventas-promedio-head h1 {
  margin:
    0;

  color:
    var(--vp-text);

  font-size:
    23px;

  font-weight:
    750;

  line-height:
    1.18;
}


.ventas-promedio-head p {
  margin:
    5px 0 0;

  max-width:
    660px;

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

  font-size:
    13px;

  font-weight:
    500;

  line-height:
    1.5;
}


/* =========================================================
   04. HEADER ACTIONS
   UNA SOLA FILA
   ========================================================= */

.ventas-promedio-head__actions {
  flex:
    0 0 auto;

  display:
    flex;

  flex-wrap:
    nowrap;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  min-width:
    0;
}


/* =========================================================
   05. BOTONES
   ========================================================= */

.ventas-promedio-btn {
  min-height:
    var(--vp-control-height);

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    0 13px;

  border:
    1px solid transparent;

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

  background:
    transparent;

  color:
    var(--vp-text);

  font-family:
    inherit;

  font-size:
    12.5px;

  font-weight:
    700;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    opacity 140ms ease;
}


.ventas-promedio-btn svg {
  flex:
    0 0 auto;

  stroke-width:
    1.8;
}


.ventas-promedio-btn:hover:not(:disabled) {
  border-color:
    var(--vp-border-strong);
}


.ventas-promedio-btn:focus-visible {
  outline:
    2px solid currentColor;

  outline-offset:
    2px;
}


.ventas-promedio-btn:disabled {
  opacity:
    0.48;

  cursor:
    not-allowed;
}


.ventas-promedio-btn--primary {
  border-color:
    var(--vp-primary);

  background:
    var(--vp-primary);

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


.ventas-promedio-btn--primary:hover:not(:disabled) {
  border-color:
    #252d3a;

  background:
    #252d3a;
}


.ventas-promedio-btn--secondary {
  border-color:
    var(--vp-border);

  background:
    var(--vp-surface);

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


.ventas-promedio-btn--secondary:hover:not(:disabled) {
  background:
    var(--vp-surface-soft);
}


.ventas-promedio-btn--ghost {
  min-height:
    34px;

  padding:
    0 9px;

  border-color:
    transparent;

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


.ventas-promedio-btn--ghost:hover:not(:disabled) {
  background:
    var(--vp-surface-soft);

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


/* =========================================================
   06. MÉTRICAS
   ========================================================= */

.ventas-promedio-metrics {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    10px;
}


.ventas-promedio-metric {
  min-width:
    0;

  min-height:
    92px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    11px;

  padding:
    14px;

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

  border-radius:
    12px;

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


.ventas-promedio-metric__icon {
  flex:
    0 0 auto;

  width:
    34px;

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    9px;

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

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


.ventas-promedio-metric__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.ventas-promedio-metric__content > span {
  overflow:
    hidden;

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

  font-size:
    11.5px;

  font-weight:
    650;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-promedio-metric__content strong {
  display:
    block;

  color:
    var(--vp-text);

  font-size:
    21px;

  font-weight:
    750;

  line-height:
    1.2;

  font-variant-numeric:
    tabular-nums;
}


.ventas-promedio-metric__content small {
  color:
    var(--vp-text-muted);

  font-size:
    10.5px;

  font-weight:
    500;

  line-height:
    1.2;
}


/* =========================================================
   07. SKELETON
   ========================================================= */

.ventas-promedio-metric.is-loading {
  align-items:
    center;
}


.ventas-promedio-skeleton {
  display:
    block;

  border-radius:
    6px;

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

  animation:
    ventas-promedio-skeleton-pulse
    1.2s
    ease-in-out
    infinite;
}


.ventas-promedio-skeleton--icon {
  flex:
    0 0 auto;

  width:
    34px;

  height:
    34px;
}


.ventas-promedio-skeleton--label {
  width:
    72px;

  height:
    8px;

  margin-bottom:
    8px;
}


.ventas-promedio-skeleton--value {
  width:
    54px;

  height:
    18px;
}


@keyframes ventas-promedio-skeleton-pulse {
  0%,
  100% {
    opacity:
      0.55;
  }

  50% {
    opacity:
      1;
  }
}


/* =========================================================
   08. PANEL COMPARACIÓN
   ========================================================= */

.ventas-promedio-comparison {
  width:
    100%;

  min-width:
    0;

  padding:
    16px;

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

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

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


.ventas-promedio-comparison[hidden] {
  display:
    none !important;
}


.ventas-promedio-comparison__head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  margin-bottom:
    15px;
}


.ventas-promedio-comparison__head > div {
  min-width:
    0;
}


.ventas-promedio-comparison__eyebrow {
  display:
    block;

  margin-bottom:
    3px;

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

  font-size:
    10.5px;

  font-weight:
    700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.ventas-promedio-comparison__head h2 {
  margin:
    0;

  color:
    var(--vp-text);

  font-size:
    16px;

  font-weight:
    750;

  line-height:
    1.25;
}


.ventas-promedio-comparison__filters {
  display:
    grid;

  grid-template-columns:
    minmax(
      100px,
      0.7fr
    )
    minmax(
      130px,
      1fr
    )
    auto
    minmax(
      100px,
      0.7fr
    )
    minmax(
      130px,
      1fr
    )
    auto;

  align-items:
    end;

  gap:
    10px;
}


.ventas-promedio-comparison__vs {
  height:
    var(--vp-control-height);

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 5px;

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

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.06em;
}


/* =========================================================
   09. COMPARACIÓN · RESUMEN
   ========================================================= */

.ventas-promedio-comparison__summary {
  width:
    100%;

  display:
    grid;

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

  gap:
    8px;

  margin-top:
    14px;
}


.ventas-promedio-comparison__summary article {
  min-width:
    0;

  padding:
    11px 12px;

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

  border-radius:
    10px;

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


.ventas-promedio-comparison__summary span {
  display:
    block;

  overflow:
    hidden;

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

  font-size:
    10.5px;

  font-weight:
    650;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-promedio-comparison__summary strong {
  display:
    block;

  margin-top:
    4px;

  color:
    var(--vp-text);

  font-size:
    17px;

  font-weight:
    750;

  line-height:
    1.2;

  font-variant-numeric:
    tabular-nums;
}


.ventas-promedio-comparison__summary strong.is-positive {
  color:
    var(--vp-success);
}


.ventas-promedio-comparison__summary strong.is-negative {
  color:
    var(--vp-danger);
}


.ventas-promedio-comparison__summary small {
  display:
    block;

  margin-top:
    2px;

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

  font-size:
    9.5px;
}


.ventas-promedio-comparison-loading {
  grid-column:
    1 / -1;

  min-height:
    60px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

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

  font-size:
    12px;

  font-weight:
    650;
}


/* =========================================================
   10. FILTROS
   ========================================================= */

.ventas-promedio-filters-card {
  width:
    100%;

  min-width:
    0;

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

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

  background:
    var(--vp-surface);

  overflow:
    hidden;
}


.ventas-promedio-filters {
  display:
    grid;

  grid-template-columns:
    minmax(
      240px,
      1.6fr
    )
    minmax(
      150px,
      1fr
    )
    minmax(
      140px,
      1fr
    )
    minmax(
      100px,
      0.55fr
    )
    minmax(
      125px,
      0.75fr
    )
    minmax(
      145px,
      0.9fr
    );

  align-items:
    end;

  gap:
    10px;

  padding:
    14px;
}


.ventas-promedio-filters-card__footer {
  min-height:
    44px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    8px 14px;

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

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


.ventas-promedio-filter-summary {
  min-width:
    0;

  overflow:
    hidden;

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

  font-size:
    11.5px;

  font-weight:
    600;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   11. CAMPOS
   ========================================================= */

.ventas-promedio-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


.ventas-promedio-field > span {
  display:
    block;

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

  font-size:
    10.5px;

  font-weight:
    700;

  line-height:
    1.2;
}


.ventas-promedio-field input,
.ventas-promedio-field select {
  width:
    100%;

  min-width:
    0;

  height:
    var(--vp-control-height);

  padding:
    0 10px;

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

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

  outline:
    none;

  background:
    var(--vp-surface);

  color:
    var(--vp-text);

  font-family:
    inherit;

  font-size:
    12.5px;

  font-weight:
    600;

  transition:
    border-color 140ms ease,
    background-color 140ms ease;
}


.ventas-promedio-field input:hover,
.ventas-promedio-field select:hover {
  border-color:
    var(--vp-border-strong);
}


.ventas-promedio-field input:focus,
.ventas-promedio-field select:focus {
  border-color:
    var(--vp-text);
}


.ventas-promedio-field input::placeholder {
  color:
    var(--vp-text-muted);

  font-weight:
    500;
}


/* =========================================================
   12. INPUT CON ICONO
   ========================================================= */

.ventas-promedio-input {
  width:
    100%;

  min-width:
    0;

  position:
    relative;
}


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

  top:
    50%;

  left:
    11px;

  z-index:
    1;

  transform:
    translateY(
      -50%
    );

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

  pointer-events:
    none;
}


.ventas-promedio-input--icon input {
  padding-left:
    35px;
}


/* =========================================================
   13. TABLA · CARD
   ========================================================= */

.ventas-promedio-table-card {
  width:
    100%;

  min-width:
    0;

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

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

  background:
    var(--vp-surface);

  overflow:
    hidden;
}


.ventas-promedio-table-card__head {
  min-height:
    58px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    12px 15px;

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


.ventas-promedio-table-card__head > div {
  min-width:
    0;
}


.ventas-promedio-table-card__eyebrow {
  display:
    block;

  margin-bottom:
    2px;

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

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


.ventas-promedio-table-card__head h2 {
  margin:
    0;

  color:
    var(--vp-text);

  font-size:
    15px;

  font-weight:
    750;

  line-height:
    1.25;
}


.ventas-promedio-table-card__tools {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.ventas-promedio-table-status {
  color:
    var(--vp-text-muted);

  font-size:
    11px;

  font-weight:
    650;

  white-space:
    nowrap;
}


/* =========================================================
   14. TABLA · WRAPPER
   ========================================================= */

.ventas-promedio-table-wrap {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;

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


.ventas-promedio-table-wrap::-webkit-scrollbar {
  height:
    8px;
}


.ventas-promedio-table-wrap::-webkit-scrollbar-track {
  background:
    transparent;
}


.ventas-promedio-table-wrap::-webkit-scrollbar-thumb {
  border-radius:
    999px;

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


/* =========================================================
   15. TABLA
   ========================================================= */

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

  min-width:
    1780px;

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    fixed;

  color:
    var(--vp-text);

  font-size:
    11.5px;
}


.ventas-promedio-table th,
.ventas-promedio-table td {
  min-width:
    0;

  height:
    48px;

  padding:
    8px 9px;

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

  vertical-align:
    middle;
}


.ventas-promedio-table th {
  position:
    sticky;

  top:
    0;

  z-index:
    3;

  height:
    42px;

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

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

  font-size:
    10px;

  font-weight:
    750;

  line-height:
    1.1;

  text-align:
    left;

  white-space:
    nowrap;
}


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


.ventas-promedio-table tbody tr {
  background:
    var(--vp-surface);

  transition:
    background-color 120ms ease;
}


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


/* =========================================================
   16. COLUMNAS
   ========================================================= */

.ventas-promedio-col-sku {
  width:
    110px;
}


.ventas-promedio-col-producto {
  width:
    250px;
}


.ventas-promedio-col-proveedor {
  width:
    165px;
}


.ventas-promedio-col-month {
  width:
    62px;

  text-align:
    center !important;
}


.ventas-promedio-col-average {
  width:
    90px;

  text-align:
    right !important;
}


.ventas-promedio-col-comparison {
  width:
    88px;

  text-align:
    center !important;
}


.ventas-promedio-col-source {
  width:
    135px;

  text-align:
    center !important;
}


.ventas-promedio-col-full {
  width:
    92px;

  text-align:
    center !important;
}


.ventas-promedio-col-actions {
  width:
    82px;

  text-align:
    center !important;
}


/* =========================================================
   17. SORT
   ========================================================= */

.ventas-promedio-sort {
  width:
    100%;

  min-width:
    0;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    4px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    inherit;

  font:
    inherit;

  cursor:
    pointer;
}


.ventas-promedio-col-month .ventas-promedio-sort {
  justify-content:
    center;
}


.ventas-promedio-col-average .ventas-promedio-sort {
  justify-content:
    flex-end;
}


.ventas-promedio-sort svg {
  flex:
    0 0 auto;

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

  stroke-width:
    1.8;
}


.ventas-promedio-sort.is-active {
  color:
    var(--vp-text);
}


.ventas-promedio-sort.is-active svg {
  color:
    var(--vp-text);
}


/* =========================================================
   18. CELDAS
   ========================================================= */

.ventas-promedio-sku {
  display:
    block;

  overflow:
    hidden;

  color:
    var(--vp-text);

  font-size:
    10.5px;

  font-weight:
    750;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-promedio-product-cell {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.ventas-promedio-product-cell strong {
  display:
    block;

  overflow:
    hidden;

  color:
    var(--vp-text);

  font-size:
    11.5px;

  font-weight:
    700;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-promedio-provider {
  display:
    block;

  overflow:
    hidden;

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

  font-size:
    10.5px;

  font-weight:
    600;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-promedio-average {
  color:
    var(--vp-text);

  font-size:
    11.5px;

  font-weight:
    750;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   19. VALOR MES EDITABLE
   ========================================================= */

.ventas-promedio-month-value {
  width:
    100%;

  min-height:
    30px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 5px;

  border:
    1px solid transparent;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(--vp-text);

  font-family:
    inherit;

  font-size:
    11px;

  font-weight:
    650;

  font-variant-numeric:
    tabular-nums;

  cursor:
    pointer;

  transition:
    background-color 120ms ease,
    border-color 120ms ease;
}


.ventas-promedio-month-value:hover {
  border-color:
    var(--vp-border);

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


.ventas-promedio-col-month.is-current {
  background:
    rgba(
      36,
      87,
      197,
      0.04
    );
}


.ventas-promedio-col-month.is-current
.ventas-promedio-month-value {
  color:
    var(--vp-info);

  font-weight:
    750;
}


/* =========================================================
   20. INDICADORES EDICIÓN
   ========================================================= */

.ventas-promedio-edited-indicator {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  width:
    fit-content;

  color:
    var(--vp-warning);

  font-size:
    9.5px;

  font-weight:
    700;

  line-height:
    1.2;
}


.ventas-promedio-auto-indicator {
  color:
    var(--vp-text-muted);

  font-size:
    9.5px;

  font-weight:
    650;
}


/* =========================================================
   21. BADGE VARIACIÓN
   ========================================================= */

.ventas-promedio-variation {
  min-height:
    25px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  padding:
    0 7px;

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

  border-radius:
    999px;

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

  font-size:
    9.5px;

  font-weight:
    750;

  line-height:
    1;

  white-space:
    nowrap;
}


.ventas-promedio-variation.is-up {
  border-color:
    var(--vp-success-border);

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

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


.ventas-promedio-variation.is-down {
  border-color:
    var(--vp-danger-border);

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

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


.ventas-promedio-variation.is-neutral {
  color:
    var(--vp-text-muted);
}


/* =========================================================
   22. FUENTES
   ========================================================= */

.ventas-promedio-source-badge {
  max-width:
    124px;

  min-height:
    25px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  padding:
    0 8px;

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

  border-radius:
    999px;

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

  color:
    var(--vp-info);

  font-size:
    9.5px;

  font-weight:
    700;

  line-height:
    1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-promedio-source-badge.is-empty {
  border-color:
    var(--vp-border);

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

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


/* =========================================================
   23. FULL
   ========================================================= */

.ventas-promedio-stock-full {
  color:
    var(--vp-text);

  font-size:
    11px;

  font-weight:
    750;

  font-variant-numeric:
    tabular-nums;
}


.ventas-promedio-full-badge {
  min-height:
    26px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  padding:
    0 8px;

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

  border-radius:
    999px;

  font-size:
    9.5px;

  font-weight:
    750;

  white-space:
    nowrap;
}


.ventas-promedio-full-badge.is-needed {
  border-color:
    var(--vp-warning-border);

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

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


.ventas-promedio-full-badge.is-ok {
  border-color:
    var(--vp-success-border);

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

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


/* =========================================================
   24. DIFERENCIAS
   ========================================================= */

.ventas-promedio-table strong.is-positive {
  color:
    var(--vp-success);
}


.ventas-promedio-table strong.is-negative {
  color:
    var(--vp-danger);
}


/* =========================================================
   25. ACCIONES DE FILA
   ========================================================= */

.ventas-promedio-row-actions {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;
}


.ventas-promedio-row-btn {
  width:
    31px;

  height:
    31px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

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

  border-radius:
    8px;

  background:
    var(--vp-surface);

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

  cursor:
    pointer;

  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}


.ventas-promedio-row-btn:hover {
  border-color:
    var(--vp-border-strong);

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

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


.ventas-promedio-row-btn svg {
  stroke-width:
    1.8;
}


/* =========================================================
   26. ESTADOS
   ========================================================= */

.ventas-promedio-state {
  min-height:
    310px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    30px;

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

  text-align:
    center;
}


.ventas-promedio-state > svg {
  margin-bottom:
    5px;

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


.ventas-promedio-state strong {
  color:
    var(--vp-text);

  font-size:
    14px;

  font-weight:
    750;
}


.ventas-promedio-state p {
  max-width:
    440px;

  margin:
    0;

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

  font-size:
    11.5px;

  font-weight:
    500;

  line-height:
    1.5;
}


.ventas-promedio-state--error > svg {
  color:
    var(--vp-danger);
}


/* =========================================================
   27. SPINNER
   ========================================================= */

.ventas-promedio-spinner {
  width:
    22px;

  height:
    22px;

  display:
    inline-block;

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

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

  border-radius:
    999px;

  animation:
    ventas-promedio-spin
    0.72s
    linear
    infinite;
}


.ventas-promedio-spinner--small {
  width:
    14px;

  height:
    14px;

  border-width:
    1.5px;
}


@keyframes ventas-promedio-spin {
  to {
    transform:
      rotate(
        360deg
      );
  }
}


/* =========================================================
   28. ACCESO DENEGADO
   ========================================================= */

.ventas-promedio-denied {
  min-height:
    430px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    30px;

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

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

  background:
    var(--vp-surface);

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

  text-align:
    center;
}


.ventas-promedio-denied svg {
  color:
    var(--vp-warning);
}


.ventas-promedio-denied h1 {
  margin:
    4px 0 0;

  color:
    var(--vp-text);

  font-size:
    20px;

  font-weight:
    750;
}


.ventas-promedio-denied p {
  margin:
    0;

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

  font-size:
    12.5px;
}/* =========================================================
   29. PAGINACIÓN
   ========================================================= */

.ventas-promedio-pagination {
  min-height:
    54px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    10px 14px;

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

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


.ventas-promedio-pagination__summary {
  min-width:
    0;

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

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1.3;
}


.ventas-promedio-pagination__summary strong {
  color:
    var(--vp-text);

  font-weight:
    750;
}


.ventas-promedio-pagination__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;
}


.ventas-promedio-pagination__page {
  min-width:
    120px;

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

  font-size:
    11px;

  font-weight:
    600;

  text-align:
    center;
}


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

  font-weight:
    750;
}


/* =========================================================
   30. MODAL · BODY LOCK
   ========================================================= */

body.ventas-promedio-modal-open {
  overflow:
    hidden;
}


/* =========================================================
   31. MODAL · OVERLAY
   ========================================================= */

.ventas-promedio-modal {
  --vp-modal-bg:
    #ffffff;

  --vp-modal-soft:
    #f5f6f8;

  --vp-modal-border:
    #dfe3e8;

  --vp-modal-text:
    #15171a;

  --vp-modal-soft-text:
    #535a65;

  --vp-modal-muted:
    #7c8490;

  position:
    fixed;

  inset:
    0;

  z-index:
    9999;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    22px;

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


.ventas-promedio-modal__backdrop {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  padding:
    0;

  border:
    0;

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

  cursor:
    default;
}


/* =========================================================
   32. MODAL · DIALOG
   ========================================================= */

.ventas-promedio-modal__dialog {
  position:
    relative;

  z-index:
    2;

  width:
    min(
      980px,
      100%
    );

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

  display:
    flex;

  flex-direction:
    column;

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

  border-radius:
    16px;

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

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

  overflow:
    hidden;
}


.ventas-promedio-modal__head {
  flex:
    0 0 auto;

  min-height:
    76px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    17px 18px;

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

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


.ventas-promedio-modal__head > div {
  min-width:
    0;
}


.ventas-promedio-modal__head > div > span {
  display:
    block;

  margin-bottom:
    4px;

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

  font-size:
    10px;

  font-weight:
    750;

  line-height:
    1.2;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.ventas-promedio-modal__head h2 {
  margin:
    0;

  overflow:
    hidden;

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

  font-size:
    18px;

  font-weight:
    750;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-promedio-modal__head p {
  margin:
    4px 0 0;

  overflow:
    hidden;

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

  font-size:
    11.5px;

  font-weight:
    550;

  line-height:
    1.35;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-promedio-modal__close {
  flex:
    0 0 auto;

  width:
    34px;

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

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

  border-radius:
    9px;

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

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

  cursor:
    pointer;
}


.ventas-promedio-modal__close:hover {
  background:
    var(--vp-modal-soft);

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


/* =========================================================
   33. MODAL · CONTENT
   ========================================================= */

.ventas-promedio-modal__content {
  flex:
    1 1 auto;

  min-height:
    0;

  overflow-y:
    auto;

  padding:
    18px;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--vp-modal-border)
    transparent;
}


.ventas-promedio-modal__content::-webkit-scrollbar {
  width:
    8px;
}


.ventas-promedio-modal__content::-webkit-scrollbar-track {
  background:
    transparent;
}


.ventas-promedio-modal__content::-webkit-scrollbar-thumb {
  border-radius:
    999px;

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


/* =========================================================
   34. MODAL · FOOTER
   ========================================================= */

.ventas-promedio-modal__footer {
  flex:
    0 0 auto;

  min-height:
    62px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  padding:
    11px 18px;

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

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


/* =========================================================
   35. EDITOR MENSUAL
   ========================================================= */

.ventas-promedio-edit-grid {
  display:
    grid;

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

  gap:
    10px;
}


.ventas-promedio-edit-month {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  padding:
    12px;

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

  border-radius:
    11px;

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


.ventas-promedio-edit-month.is-edited {
  border-color:
    #f0c979;

  background:
    #fffaf0;
}


.ventas-promedio-edit-month header {
  min-height:
    22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    7px;
}


.ventas-promedio-edit-month header > span:first-child {
  color:
    var(--vp-modal-text);

  font-size:
    11px;

  font-weight:
    750;
}


.ventas-promedio-edit-month input {
  width:
    100%;

  height:
    38px;

  padding:
    0 10px;

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

  border-radius:
    8px;

  outline:
    none;

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

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

  font-family:
    inherit;

  font-size:
    14px;

  font-weight:
    750;

  font-variant-numeric:
    tabular-nums;
}


.ventas-promedio-edit-month input:focus {
  border-color:
    var(--vp-modal-text);
}


.ventas-promedio-edit-month small {
  color:
    var(--vp-modal-muted);

  font-size:
    9.5px;

  font-weight:
    550;
}


.ventas-promedio-reset-month {
  width:
    fit-content;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    #9a5c00;

  font-family:
    inherit;

  font-size:
    9.5px;

  font-weight:
    700;

  cursor:
    pointer;
}


.ventas-promedio-reset-month:hover {
  text-decoration:
    underline;
}


/* =========================================================
   36. FULL · SUMMARY
   ========================================================= */

.ventas-promedio-full-summary {
  display:
    grid;

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

  gap:
    9px;

  margin-bottom:
    16px;
}


.ventas-promedio-full-summary article {
  min-width:
    0;

  padding:
    12px;

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

  border-radius:
    10px;

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


.ventas-promedio-full-summary span {
  display:
    block;

  overflow:
    hidden;

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

  font-size:
    9.5px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-promedio-full-summary strong {
  display:
    block;

  margin-top:
    4px;

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

  font-size:
    18px;

  font-weight:
    750;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   37. FULL · CONFIG
   ========================================================= */

.ventas-promedio-full-config {
  display:
    grid;

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

  align-items:
    end;

  gap:
    12px;
}


.ventas-promedio-checkbox {
  min-height:
    40px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 2px;

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

  font-size:
    11px;

  font-weight:
    650;

  cursor:
    pointer;
}


.ventas-promedio-checkbox input {
  width:
    16px;

  height:
    16px;

  margin:
    0;

  accent-color:
    #111827;
}


.ventas-promedio-full-formula {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;

  margin-top:
    15px;

  padding:
    12px 13px;

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

  border-radius:
    10px;

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

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


.ventas-promedio-full-formula > svg {
  flex:
    0 0 auto;

  margin-top:
    1px;
}


.ventas-promedio-full-formula strong {
  display:
    block;

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

  font-size:
    11px;

  font-weight:
    750;
}


.ventas-promedio-full-formula p {
  margin:
    4px 0 0;

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

  font-size:
    10.5px;

  font-weight:
    500;

  line-height:
    1.45;
}


/* =========================================================
   38. IMPORTACIÓN · DROP
   ========================================================= */

.ventas-promedio-import-drop {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    14px;

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

  border-radius:
    11px;

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


.ventas-promedio-import-drop__icon {
  flex:
    0 0 auto;

  width:
    38px;

  height:
    38px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    9px;

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

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


.ventas-promedio-import-drop > div {
  min-width:
    0;

  flex:
    1 1 auto;
}


.ventas-promedio-import-drop strong {
  display:
    block;

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

  font-size:
    11.5px;

  font-weight:
    750;
}


.ventas-promedio-import-drop p {
  margin:
    3px 0 0;

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

  font-size:
    10.5px;

  line-height:
    1.4;
}


/* =========================================================
   39. IMPORTACIÓN · FILE
   ========================================================= */

.ventas-promedio-import-file {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  margin-top:
    12px;

  padding:
    11px 12px;

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

  border-radius:
    9px;

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


.ventas-promedio-import-file > span {
  flex:
    0 0 auto;

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


.ventas-promedio-import-file > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;
}


.ventas-promedio-import-file strong {
  overflow:
    hidden;

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

  font-size:
    11px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-promedio-import-file small {
  margin-top:
    2px;

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

  font-size:
    9.5px;
}


/* =========================================================
   40. IMPORTACIÓN · SUMMARY
   ========================================================= */

.ventas-promedio-import-summary {
  display:
    grid;

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

  gap:
    8px;

  margin-top:
    12px;
}


.ventas-promedio-import-summary article {
  padding:
    10px;

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

  border-radius:
    9px;

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


.ventas-promedio-import-summary small {
  display:
    block;

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

  font-size:
    9.5px;

  font-weight:
    650;
}


.ventas-promedio-import-summary strong {
  display:
    block;

  margin-top:
    3px;

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

  font-size:
    16px;

  font-weight:
    750;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   41. IMPORTACIÓN · ERRORES
   ========================================================= */

.ventas-promedio-import-errors {
  margin-top:
    12px;

  overflow:
    hidden;

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

  border-radius:
    10px;

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


.ventas-promedio-import-errors > header {
  min-height:
    40px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    8px 11px;

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

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


.ventas-promedio-import-errors > header strong {
  font-size:
    10.5px;

  font-weight:
    750;
}


.ventas-promedio-import-errors > div {
  max-height:
    210px;

  overflow-y:
    auto;
}


.ventas-promedio-import-errors article {
  display:
    grid;

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

  gap:
    10px;

  padding:
    8px 11px;

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


.ventas-promedio-import-errors article:last-child {
  border-bottom:
    0;
}


.ventas-promedio-import-errors article strong {
  color:
    var(--vp-danger);

  font-size:
    9.5px;

  font-weight:
    750;
}


.ventas-promedio-import-errors article span {
  color:
    #7c2d28;

  font-size:
    9.5px;

  line-height:
    1.35;
}


/* =========================================================
   42. SINCRONIZACIÓN
   ========================================================= */

.ventas-promedio-sync-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.ventas-promedio-sync-item {
  min-height:
    62px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    11px;

  padding:
    10px 12px;

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

  border-radius:
    10px;

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


.ventas-promedio-sync-item__icon {
  width:
    36px;

  height:
    36px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    9px;

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

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


.ventas-promedio-sync-item > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.ventas-promedio-sync-item strong {
  color:
    var(--vp-modal-text);

  font-size:
    11px;

  font-weight:
    750;
}


.ventas-promedio-sync-item small {
  overflow:
    hidden;

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

  font-size:
    9.5px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-promedio-sync-status {
  min-height:
    24px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 7px;

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

  border-radius:
    999px;

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

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

  font-size:
    8.5px;

  font-weight:
    800;

  letter-spacing:
    0.04em;
}


.ventas-promedio-sync-status.is-success {
  border-color:
    var(--vp-success-border);

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

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


.ventas-promedio-sync-status.is-error {
  border-color:
    var(--vp-danger-border);

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

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


.ventas-promedio-sync-status.is-warning {
  border-color:
    var(--vp-warning-border);

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

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


/* =========================================================
   43. TOAST
   ========================================================= */

.ventas-promedio-toast {
  position:
    fixed;

  right:
    22px;

  bottom:
    22px;

  z-index:
    11000;

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

  min-height:
    44px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    10px 12px;

  border:
    1px solid #dfe3e8;

  border-radius:
    10px;

  background:
    #ffffff;

  color:
    #15171a;

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

  font-size:
    11.5px;

  font-weight:
    650;

  line-height:
    1.35;

  opacity:
    0;

  transform:
    translateY(
      8px
    );

  pointer-events:
    none;

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


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

  transform:
    translateY(
      0
    );
}


.ventas-promedio-toast__icon {
  flex:
    0 0 auto;

  width:
    27px;

  height:
    27px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    7px;

  background:
    #f3f4f6;
}


.ventas-promedio-toast.is-success {
  border-color:
    var(--vp-success-border);

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


.ventas-promedio-toast.is-error {
  border-color:
    var(--vp-danger-border);

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


.ventas-promedio-toast.is-warning {
  border-color:
    var(--vp-warning-border);

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


/* =========================================================
   44. DARK MODE · PAGE
   ========================================================= */

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

  --vp-surface:
    #080808;

  --vp-surface-soft:
    #111111;

  --vp-surface-muted:
    #181818;

  --vp-border:
    #262626;

  --vp-border-strong:
    #3a3a3a;

  --vp-text:
    #f5f5f5;

  --vp-text-soft:
    #c0c0c0;

  --vp-text-muted:
    #888888;

  --vp-primary:
    #f2f2f2;

  --vp-primary-text:
    #080808;

  --vp-success:
    #5ac97a;

  --vp-success-bg:
    #08140c;

  --vp-success-border:
    #1c4c29;

  --vp-danger:
    #ef756c;

  --vp-danger-bg:
    #180b0a;

  --vp-danger-border:
    #55211e;

  --vp-warning:
    #e0ab55;

  --vp-warning-bg:
    #181105;

  --vp-warning-border:
    #5b4216;

  --vp-info:
    #8eb0ff;

  --vp-info-bg:
    #0a1020;

  --vp-info-border:
    #27365d;

  color-scheme:
    dark;
}


/* =========================================================
   45. DARK · CONTROLES
   ========================================================= */

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

  background:
    #f2f2f2;

  color:
    #080808;
}


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

  background:
    #ffffff;
}


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


/* =========================================================
   46. DARK · MODAL
   ========================================================= */

html.dark
.ventas-promedio-modal,
body.dark
.ventas-promedio-modal,
[data-theme="dark"]
.ventas-promedio-modal {
  --vp-modal-bg:
    #080808;

  --vp-modal-soft:
    #111111;

  --vp-modal-border:
    #292929;

  --vp-modal-text:
    #f4f4f4;

  --vp-modal-soft-text:
    #bdbdbd;

  --vp-modal-muted:
    #858585;

  color-scheme:
    dark;
}


html.dark
.ventas-promedio-modal__backdrop,
body.dark
.ventas-promedio-modal__backdrop,
[data-theme="dark"]
.ventas-promedio-modal__backdrop {
  background:
    rgba(
      0,
      0,
      0,
      0.78
    );
}


html.dark
.ventas-promedio-edit-month.is-edited,
body.dark
.ventas-promedio-edit-month.is-edited,
[data-theme="dark"]
.ventas-promedio-edit-month.is-edited {
  border-color:
    #554016;

  background:
    #151005;
}


html.dark
.ventas-promedio-checkbox input,
body.dark
.ventas-promedio-checkbox input,
[data-theme="dark"]
.ventas-promedio-checkbox input {
  accent-color:
    #f2f2f2;
}


/* =========================================================
   47. DARK · TOAST
   ========================================================= */

html.dark
.ventas-promedio-toast,
body.dark
.ventas-promedio-toast,
[data-theme="dark"]
.ventas-promedio-toast {
  border-color:
    #292929;

  background:
    #090909;

  color:
    #f4f4f4;
}


html.dark
.ventas-promedio-toast__icon,
body.dark
.ventas-promedio-toast__icon,
[data-theme="dark"]
.ventas-promedio-toast__icon {
  background:
    #151515;
}


/* =========================================================
   48. RESPONSIVE · 1500
   ========================================================= */

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


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


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


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


/* =========================================================
   49. RESPONSIVE · 1280
   ========================================================= */

@media (
  max-width:
  1280px
) {
  .ventas-promedio-head {
    align-items:
      flex-start;
  }


  .ventas-promedio-head__actions {
    max-width:
      58%;

    overflow-x:
      auto;

    justify-content:
      flex-start;

    padding-bottom:
      3px;

    scrollbar-width:
      thin;
  }


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


  .ventas-promedio-comparison__vs {
    display:
      none;
  }


  .ventas-promedio-comparison__filters
  > .ventas-promedio-btn {
    width:
      100%;
  }
}


/* =========================================================
   50. RESPONSIVE · 980
   ========================================================= */

@media (
  max-width:
  980px
) {
  .ventas-promedio-head {
    flex-direction:
      column;

    align-items:
      stretch;
  }


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

    max-width:
      none;

    justify-content:
      flex-start;

    overflow-x:
      auto;
  }


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


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


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


  .ventas-promedio-full-summary {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .ventas-promedio-full-config {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


/* =========================================================
   51. RESPONSIVE · 760
   ========================================================= */

@media (
  max-width:
  760px
) {
  .ventas-promedio-page {
    gap:
      12px;

    padding-bottom:
      20px;
  }


  .ventas-promedio-head {
    padding:
      14px;
  }


  .ventas-promedio-head h1 {
    font-size:
      20px;
  }


  .ventas-promedio-head p {
    font-size:
      11.5px;
  }


  .ventas-promedio-head__actions {
    gap:
      6px;
  }


  .ventas-promedio-head__actions
  .ventas-promedio-btn {
    flex:
      0 0 auto;
  }


  .ventas-promedio-metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      8px;
  }


  .ventas-promedio-metric {
    min-height:
      82px;

    padding:
      11px;
  }


  .ventas-promedio-metric__content strong {
    font-size:
      18px;
  }


  .ventas-promedio-comparison {
    padding:
      13px;
  }


  .ventas-promedio-comparison__filters {
    grid-template-columns:
      1fr;
  }


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


  .ventas-promedio-filters {
    grid-template-columns:
      1fr;

    padding:
      12px;
  }


  .ventas-promedio-filters-card__footer {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .ventas-promedio-filter-summary {
    width:
      100%;

    white-space:
      normal;
  }


  .ventas-promedio-table-card__head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .ventas-promedio-pagination {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .ventas-promedio-pagination__actions {
    width:
      100%;

    justify-content:
      space-between;
  }


  .ventas-promedio-pagination__page {
    min-width:
      auto;
  }


  .ventas-promedio-modal {
    padding:
      10px;
  }


  .ventas-promedio-modal__dialog {
    max-height:
      calc(
        100vh -
        20px
      );

    border-radius:
      13px;
  }


  .ventas-promedio-modal__head {
    padding:
      14px;
  }


  .ventas-promedio-modal__content {
    padding:
      14px;
  }


  .ventas-promedio-modal__footer {
    flex-wrap:
      wrap;

    padding:
      10px 14px;
  }


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


  .ventas-promedio-full-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .ventas-promedio-full-config {
    grid-template-columns:
      1fr;
  }


  .ventas-promedio-import-drop {
    align-items:
      flex-start;

    flex-wrap:
      wrap;
  }


  .ventas-promedio-import-drop
  > .ventas-promedio-btn {
    width:
      100%;
  }


  .ventas-promedio-import-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}


/* =========================================================
   52. RESPONSIVE · 480
   ========================================================= */

@media (
  max-width:
  480px
) {
  .ventas-promedio-head__identity {
    gap:
      9px;
  }


  .ventas-promedio-head__icon {
    width:
      37px;

    height:
      37px;
  }


  .ventas-promedio-head h1 {
    font-size:
      18px;
  }


  .ventas-promedio-metrics {
    grid-template-columns:
      1fr;
  }


  .ventas-promedio-comparison__summary {
    grid-template-columns:
      1fr;
  }


  .ventas-promedio-edit-grid {
    grid-template-columns:
      1fr;
  }


  .ventas-promedio-full-summary {
    grid-template-columns:
      1fr;
  }


  .ventas-promedio-import-summary {
    grid-template-columns:
      1fr;
  }


  .ventas-promedio-pagination__actions {
    display:
      grid;

    grid-template-columns:
      1fr
      auto
      1fr;
  }


  .ventas-promedio-pagination__actions
  .ventas-promedio-btn {
    padding:
      0 9px;

    font-size:
      11px;
  }


  .ventas-promedio-modal__footer
  .ventas-promedio-btn {
    flex:
      1 1 auto;
  }


  .ventas-promedio-toast {
    right:
      12px;

    bottom:
      12px;

    max-width:
      calc(
        100vw -
        24px
      );
  }
}


/* =========================================================
   53. PROTECCIÓN CONTRA OVERFLOW GLOBAL
   ========================================================= */

.ventas-promedio-page,
.ventas-promedio-head,
.ventas-promedio-head__identity,
.ventas-promedio-filters-card,
.ventas-promedio-filters,
.ventas-promedio-table-card,
.ventas-promedio-table-card__head,
.ventas-promedio-comparison,
.ventas-promedio-comparison__head,
.ventas-promedio-comparison__filters,
.ventas-promedio-comparison__summary {
  min-width:
    0;

  max-width:
    100%;
}


.ventas-promedio-page img,
.ventas-promedio-modal img {
  max-width:
    100%;
}


/* =========================================================
   54. COLOR SCHEME
   ========================================================= */

.ventas-promedio-page {
  color-scheme:
    light;
}


/* =========================================================
   55. REDUCED MOTION
   ========================================================= */

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

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}/* =========================================================
   FIX · BOTONES FOOTER MODAL
   ========================================================= */

.ventas-promedio-modal__footer .ventas-promedio-btn {
  min-width: 140px;

  min-height: 40px;

  padding: 0 16px;

  border-radius: 9px;

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

  font-size: 12.5px;

  font-weight: 700;

  line-height: 1;

  text-decoration: none;

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;
}


.ventas-promedio-modal__footer
.ventas-promedio-btn--secondary {
  border: 1px solid var(--vp-modal-border);

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

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


.ventas-promedio-modal__footer
.ventas-promedio-btn--secondary:hover:not(:disabled) {
  background: var(--vp-modal-soft);

  border-color: #bfc5cd;
}


.ventas-promedio-modal__footer
.ventas-promedio-btn--primary {
  border: 1px solid #111827;

  background: #111827;

  color: #ffffff;
}


.ventas-promedio-modal__footer
.ventas-promedio-btn--primary:hover:not(:disabled) {
  border-color: #252d3a;

  background: #252d3a;

  color: #ffffff;
}


.ventas-promedio-modal__footer
.ventas-promedio-btn svg {
  width: 15px;

  height: 15px;

  flex: 0 0 auto;
}


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

html.dark
.ventas-promedio-modal__footer
.ventas-promedio-btn--secondary,
body.dark
.ventas-promedio-modal__footer
.ventas-promedio-btn--secondary,
[data-theme="dark"]
.ventas-promedio-modal__footer
.ventas-promedio-btn--secondary {
  border-color: #333333;

  background: #0b0b0b;

  color: #f3f3f3;
}


html.dark
.ventas-promedio-modal__footer
.ventas-promedio-btn--secondary:hover:not(:disabled),
body.dark
.ventas-promedio-modal__footer
.ventas-promedio-btn--secondary:hover:not(:disabled),
[data-theme="dark"]
.ventas-promedio-modal__footer
.ventas-promedio-btn--secondary:hover:not(:disabled) {
  background: #161616;

  border-color: #474747;
}


html.dark
.ventas-promedio-modal__footer
.ventas-promedio-btn--primary,
body.dark
.ventas-promedio-modal__footer
.ventas-promedio-btn--primary,
[data-theme="dark"]
.ventas-promedio-modal__footer
.ventas-promedio-btn--primary {
  border-color: #f2f2f2;

  background: #f2f2f2;

  color: #080808;
}