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

   WIRTZ HUB · DIRECCIÓN EJECUTIVA
   CLIENTES Y DEMANDA

   REDISEÑO EXECUTIVE / CEO
   PARTE 1 DE 3

   CONTIENE:
   - Sistema visual
   - Reset local
   - Layout principal
   - Animaciones
   - Header ejecutivo
   - Botones
   - Filtros
   - Presets
   - Secciones
   - KPIs
   - Variaciones
   - Snapshot ejecutivo
   ========================================================= */


/* =========================================================
   01. VARIABLES · LIGHT
   ========================================================= */

.executive-demand-page {
  --ed-bg:
    #f4f4f1;

  --ed-bg-secondary:
    #eeeeea;

  --ed-surface:
    #ffffff;

  --ed-surface-subtle:
    #fafaf8;

  --ed-surface-muted:
    #f5f5f2;

  --ed-surface-hover:
    #f1f1ed;

  --ed-surface-active:
    #eaeae5;

  --ed-text:
    #0a0a0a;

  --ed-text-secondary:
    #202020;

  --ed-text-soft:
    #343434;

  --ed-muted:
    #5f5f5a;

  --ed-muted-2:
    #81817b;

  --ed-muted-3:
    #a8a8a1;

  --ed-black:
    #090909;

  --ed-white:
    #ffffff;

  --ed-border:
    rgba(
      10,
      10,
      10,
      0.13
    );

  --ed-border-soft:
    rgba(
      10,
      10,
      10,
      0.075
    );

  --ed-border-strong:
    rgba(
      10,
      10,
      10,
      0.22
    );

  --ed-border-extra:
    rgba(
      10,
      10,
      10,
      0.32
    );

  --ed-positive:
    #12623c;

  --ed-positive-bg:
    #edf7f1;

  --ed-positive-border:
    rgba(
      18,
      98,
      60,
      0.18
    );

  --ed-negative:
    #a72f2f;

  --ed-negative-bg:
    #fbefef;

  --ed-negative-border:
    rgba(
      167,
      47,
      47,
      0.18
    );

  --ed-warning:
    #83580b;

  --ed-warning-bg:
    #fbf6ea;

  --ed-warning-border:
    rgba(
      131,
      88,
      11,
      0.2
    );

  --ed-info:
    #304d69;

  --ed-radius-xs:
    5px;

  --ed-radius-sm:
    7px;

  --ed-radius-md:
    10px;

  --ed-radius-lg:
    13px;

  --ed-radius-xl:
    16px;

  --ed-shadow-xs:
    0
    1px
    2px
    rgba(
      0,
      0,
      0,
      0.025
    );

  --ed-shadow-sm:
    0
    1px
    2px
    rgba(
      0,
      0,
      0,
      0.025
    ),
    0
    5px
    16px
    rgba(
      0,
      0,
      0,
      0.025
    );

  --ed-shadow-md:
    0
    2px
    5px
    rgba(
      0,
      0,
      0,
      0.035
    ),
    0
    12px
    34px
    rgba(
      0,
      0,
      0,
      0.035
    );

  --ed-transition-fast:
    120ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  --ed-transition:
    190ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  --ed-transition-slow:
    300ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  width:
    100%;

  min-width:
    0;

  margin:
    0;

  padding:
    0
    0
    40px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  color:
    var(--ed-text);

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

  font-size:
    14px;

  line-height:
    1.45;

  text-rendering:
    optimizeLegibility;

  -webkit-font-smoothing:
    antialiased;

  -moz-osx-font-smoothing:
    grayscale;

  box-sizing:
    border-box;
}


/* =========================================================
   02. RESET LOCAL
   ========================================================= */

.executive-demand-page *,
.executive-demand-page *::before,
.executive-demand-page *::after {
  box-sizing:
    border-box;
}


.executive-demand-page button,
.executive-demand-page input,
.executive-demand-page select,
.executive-demand-page textarea {
  font:
    inherit;
}


.executive-demand-page button,
.executive-demand-page input,
.executive-demand-page select {
  color:
    inherit;
}


.executive-demand-page button {
  -webkit-tap-highlight-color:
    transparent;
}


.executive-demand-page button,
.executive-demand-page select {
  cursor:
    pointer;
}


.executive-demand-page img,
.executive-demand-page svg {
  display:
    block;
}


.executive-demand-page svg {
  pointer-events:
    none;
}


.executive-demand-page ::selection {
  background:
    #171717;

  color:
    #ffffff;
}


/* =========================================================
   03. SCROLLBAR LOCAL
   ========================================================= */

.executive-demand-page * {
  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(
      10,
      10,
      10,
      0.22
    )
    transparent;
}


.executive-demand-page
  *::-webkit-scrollbar {
  width:
    7px;

  height:
    7px;
}


.executive-demand-page
  *::-webkit-scrollbar-track {
  background:
    transparent;
}


.executive-demand-page
  *::-webkit-scrollbar-thumb {
  border:
    2px
    solid
    transparent;

  border-radius:
    999px;

  background:
    rgba(
      10,
      10,
      10,
      0.2
    );

  background-clip:
    padding-box;
}


.executive-demand-page
  *::-webkit-scrollbar-thumb:hover {
  background:
    rgba(
      10,
      10,
      10,
      0.36
    );

  background-clip:
    padding-box;
}


/* =========================================================
   04. LAYOUT PRINCIPAL
   ========================================================= */

.executive-demand-main {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    34px;
}


/* =========================================================
   05. ANIMACIONES
   ========================================================= */

@keyframes executiveDemandEnter {
  0% {
    opacity:
      0;

    transform:
      translate3d(
        0,
        10px,
        0
      );
  }

  100% {
    opacity:
      1;

    transform:
      translate3d(
        0,
        0,
        0
      );
  }
}


@keyframes executiveDemandFade {
  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}


@keyframes executiveDemandScale {
  0% {
    opacity:
      0;

    transform:
      scale(
        0.985
      );
  }

  100% {
    opacity:
      1;

    transform:
      scale(
        1
      );
  }
}


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


@keyframes executiveDemandProgress {
  from {
    transform:
      scaleX(
        0
      );
  }

  to {
    transform:
      scaleX(
        1
      );
  }
}


.executive-demand-page
  .is-spinning {
  animation:
    executiveDemandSpin
    0.72s
    linear
    infinite;
}


/* =========================================================
   06. HEADER EJECUTIVO
   ========================================================= */

.executive-demand-head {
  position:
    relative;

  isolation:
    isolate;

  width:
    100%;

  min-width:
    0;

  min-height:
    126px;

  padding:
    22px
    24px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    28px;

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

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

  background:
    var(--ed-surface);

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

  overflow:
    hidden;

  animation:
    executiveDemandEnter
    280ms
    var(--ed-transition)
    both;
}


.executive-demand-head::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    100%;

  height:
    3px;

  background:
    var(--ed-black);
}


.executive-demand-head::after {
  content:
    "";

  position:
    absolute;

  top:
    0;

  bottom:
    0;

  left:
    56%;

  width:
    1px;

  background:
    linear-gradient(
      180deg,
      transparent,
      var(--ed-border-soft)
      16%,
      var(--ed-border-soft)
      84%,
      transparent
    );

  pointer-events:
    none;
}


/* =========================================================
   07. BRAND
   ========================================================= */

.executive-demand-brand {
  position:
    relative;

  z-index:
    1;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    16px;
}


.executive-demand-brand__icon {
  width:
    46px;

  height:
    46px;

  flex:
    0
    0
    46px;

  display:
    grid;

  place-items:
    center;

  border:
    1px
    solid
    #090909;

  border-radius:
    10px;

  background:
    #090909;

  color:
    #ffffff;

  transition:
    transform
    var(--ed-transition),
    border-radius
    var(--ed-transition);
}


.executive-demand-head:hover
  .executive-demand-brand__icon {
  transform:
    translateY(
      -1px
    );

  border-radius:
    12px;
}


.executive-demand-brand__icon svg {
  width:
    20px;

  height:
    20px;

  stroke-width:
    1.85;
}


.executive-demand-brand__body {
  min-width:
    0;
}


.executive-demand-brand__body > span {
  display:
    block;

  margin:
    0
    0
    5px;

  color:
    var(--ed-muted);

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}


.executive-demand-brand__body h1 {
  margin:
    0;

  color:
    var(--ed-text);

  font-size:
    clamp(
      25px,
      2vw,
      33px
    );

  font-weight:
    800;

  line-height:
    1.02;

  letter-spacing:
    -0.045em;
}


.executive-demand-brand__body p {
  max-width:
    700px;

  margin:
    9px
    0
    0;

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

  font-size:
    13px;

  font-weight:
    560;

  line-height:
    1.5;

  letter-spacing:
    -0.005em;
}


/* =========================================================
   08. HEADER ACTIONS
   ========================================================= */

.executive-demand-head__actions {
  position:
    relative;

  z-index:
    1;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    auto
    auto;

  align-items:
    center;

  justify-content:
    end;

  gap:
    8px;
}


.executive-demand-head-stat {
  min-width:
    142px;

  min-height:
    50px;

  padding:
    8px
    13px;

  border:
    1px
    solid
    var(--ed-border-soft);

  border-radius:
    8px;

  background:
    var(--ed-surface-subtle);

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    3px;

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


.executive-demand-head-stat:hover {
  border-color:
    var(--ed-border);

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

  transform:
    translateY(
      -1px
    );
}


.executive-demand-head-stat span {
  color:
    var(--ed-muted);

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.1;

  letter-spacing:
    0.075em;

  text-transform:
    uppercase;
}


.executive-demand-head-stat strong {
  max-width:
    200px;

  overflow:
    hidden;

  color:
    var(--ed-text);

  font-size:
    12px;

  font-weight:
    760;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   09. BOTONES
   ========================================================= */

.executive-demand-btn {
  min-width:
    0;

  min-height:
    38px;

  padding:
    0
    13px;

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

  border-radius:
    7px;

  outline:
    none;

  background:
    var(--ed-surface);

  color:
    var(--ed-text);

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  font-size:
    11px;

  font-weight:
    720;

  line-height:
    1;

  letter-spacing:
    -0.005em;

  white-space:
    nowrap;

  user-select:
    none;

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


.executive-demand-btn svg {
  width:
    14px;

  height:
    14px;

  flex:
    0
    0
    auto;

  stroke-width:
    2;
}


.executive-demand-btn:hover:not(:disabled) {
  border-color:
    var(--ed-border-strong);

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

  transform:
    translateY(
      -1px
    );
}


.executive-demand-btn:active:not(:disabled) {
  transform:
    translateY(
      0
    )
    scale(
      0.985
    );
}


.executive-demand-btn:focus-visible {
  outline:
    2px
    solid
    rgba(
      10,
      10,
      10,
      0.3
    );

  outline-offset:
    2px;
}


.executive-demand-btn:disabled {
  opacity:
    0.42;

  cursor:
    not-allowed;

  transform:
    none;
}


.executive-demand-btn--primary {
  border-color:
    #090909;

  background:
    #090909;

  color:
    #ffffff;
}


.executive-demand-btn--primary:hover:not(:disabled) {
  border-color:
    #000000;

  background:
    #000000;

  color:
    #ffffff;
}


.executive-demand-btn--quiet {
  border-color:
    transparent;

  background:
    transparent;
}


.executive-demand-btn--quiet:hover:not(:disabled) {
  border-color:
    var(--ed-border);

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


/* =========================================================
   10. ICON BUTTON
   ========================================================= */

.executive-demand-icon-btn {
  width:
    32px;

  height:
    32px;

  min-width:
    32px;

  flex:
    0
    0
    32px;

  padding:
    0;

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

  border-radius:
    7px;

  outline:
    none;

  background:
    var(--ed-surface);

  color:
    var(--ed-text);

  display:
    grid;

  place-items:
    center;

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


.executive-demand-icon-btn svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2;
}


.executive-demand-icon-btn:hover:not(:disabled) {
  border-color:
    var(--ed-border-strong);

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

  transform:
    translateY(
      -1px
    );
}


.executive-demand-icon-btn:active:not(:disabled) {
  transform:
    scale(
      0.95
    );
}


.executive-demand-icon-btn:disabled {
  opacity:
    0.3;

  cursor:
    not-allowed;
}


/* =========================================================
   11. FILTROS · CONTENEDOR
   ========================================================= */

.executive-demand-filters {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

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

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

  background:
    var(--ed-surface);

  overflow:
    hidden;

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

  animation:
    executiveDemandEnter
    300ms
    40ms
    var(--ed-transition)
    both;
}


/* =========================================================
   12. PERÍODO
   ========================================================= */

.executive-demand-period {
  width:
    100%;

  min-width:
    0;

  min-height:
    58px;

  padding:
    10px
    12px
    10px
    15px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    16px;

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


.executive-demand-period__main {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    20px;
}


.executive-demand-period__main
  > div:first-child {
  min-width:
    168px;

  padding-right:
    19px;

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

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.executive-demand-period__main
  > div:first-child
  > span {
  color:
    var(--ed-muted);

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.1;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}


.executive-demand-period__main
  > div:first-child
  > strong {
  color:
    var(--ed-text);

  font-size:
    12px;

  font-weight:
    760;

  line-height:
    1.3;

  letter-spacing:
    -0.01em;
}


/* =========================================================
   13. PRESETS
   ========================================================= */

.executive-demand-presets {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  flex-wrap:
    wrap;
}


.executive-demand-preset {
  min-height:
    30px;

  padding:
    0
    10px;

  border:
    1px
    solid
    transparent;

  border-radius:
    6px;

  outline:
    none;

  background:
    transparent;

  color:
    var(--ed-muted);

  font-size:
    10px;

  font-weight:
    690;

  line-height:
    1;

  white-space:
    nowrap;

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


.executive-demand-preset:hover {
  background:
    var(--ed-surface-hover);

  color:
    var(--ed-text);

  transform:
    translateY(
      -1px
    );
}


.executive-demand-preset.is-active {
  border-color:
    #090909;

  background:
    #090909;

  color:
    #ffffff;

  font-weight:
    760;
}


/* =========================================================
   14. BODY FILTROS
   ========================================================= */

.executive-demand-filters__body {
  width:
    100%;

  min-width:
    0;

  max-height:
    0;

  padding:
    0
    14px;

  display:
    grid;

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

  gap:
    12px;

  border-top:
    1px
    solid
    transparent;

  background:
    var(--ed-surface-subtle);

  opacity:
    0;

  overflow:
    hidden;

  pointer-events:
    none;

  transform:
    translateY(
      -4px
    );

  transition:
    max-height
    320ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    ),
    padding
    220ms
    ease,
    opacity
    150ms
    ease,
    transform
    220ms
    ease,
    border-color
    150ms
    ease;
}


.executive-demand-filters__body.is-open {
  max-height:
    1000px;

  padding:
    15px;

  border-top-color:
    var(--ed-border);

  opacity:
    1;

  pointer-events:
    auto;

  transform:
    translateY(
      0
    );
}


/* =========================================================
   15. CAMPOS
   ========================================================= */

.executive-demand-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


.executive-demand-field > span,
.executive-demand-panel__controls
  label
  > span {
  color:
    var(--ed-muted);

  font-size:
    9px;

  font-weight:
    780;

  line-height:
    1.1;

  letter-spacing:
    0.075em;

  text-transform:
    uppercase;
}


.executive-demand-field input,
.executive-demand-field select,
.executive-demand-panel__controls select {
  width:
    100%;

  min-width:
    0;

  height:
    38px;

  padding:
    0
    11px;

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

  border-radius:
    7px;

  outline:
    none;

  background:
    var(--ed-surface);

  color:
    var(--ed-text);

  font-size:
    11px;

  font-weight:
    650;

  line-height:
    1;

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


.executive-demand-field input::placeholder {
  color:
    var(--ed-muted-2);

  opacity:
    1;

  font-weight:
    550;
}


.executive-demand-field input:hover,
.executive-demand-field select:hover,
.executive-demand-panel__controls
  select:hover {
  border-color:
    var(--ed-border-strong);
}


.executive-demand-field input:focus,
.executive-demand-field select:focus,
.executive-demand-panel__controls
  select:focus {
  border-color:
    var(--ed-border-extra);

  background:
    #ffffff;
}


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


/* =========================================================
   16. SEARCH
   ========================================================= */

.executive-demand-input-icon {
  position:
    relative;

  width:
    100%;

  min-width:
    0;
}


.executive-demand-input-icon > svg {
  position:
    absolute;

  top:
    50%;

  left:
    11px;

  width:
    14px;

  height:
    14px;

  color:
    var(--ed-muted);

  transform:
    translateY(
      -50%
    );

  pointer-events:
    none;

  stroke-width:
    2;
}


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


/* =========================================================
   17. ACCIONES FILTROS
   ========================================================= */

.executive-demand-filters__actions {
  min-width:
    0;

  grid-column:
    span
    2;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    flex-end;

  gap:
    7px;
}


/* =========================================================
   18. SECCIONES
   ========================================================= */

.executive-demand-section {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    13px;

  animation:
    executiveDemandEnter
    320ms
    var(--ed-transition)
    both;
}


.executive-demand-section-heading {
  width:
    100%;

  min-width:
    0;

  min-height:
    50px;

  padding:
    0
    2px
    10px;

  border-bottom:
    1px
    solid
    var(--ed-border-soft);

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    18px;
}


.executive-demand-section-heading > div {
  min-width:
    0;
}


.executive-demand-section-heading
  span {
  display:
    block;

  margin:
    0
    0
    5px;

  color:
    var(--ed-muted);

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.executive-demand-section-heading
  h2 {
  margin:
    0;

  color:
    var(--ed-text);

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

  font-weight:
    800;

  line-height:
    1.12;

  letter-spacing:
    -0.032em;
}


.executive-demand-section-heading
  p {
  max-width:
    760px;

  margin:
    5px
    0
    0;

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

  font-size:
    11px;

  font-weight:
    550;

  line-height:
    1.45;
}


/* =========================================================
   19. KPI GRID
   ========================================================= */

.executive-demand-kpis {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    8px;
}


/* =========================================================
   20. KPI
   ========================================================= */

.executive-demand-kpi {
  position:
    relative;

  min-width:
    0;

  min-height:
    150px;

  padding:
    14px;

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

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

  background:
    var(--ed-surface);

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    15px;

  overflow:
    hidden;

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

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

  animation:
    executiveDemandScale
    320ms
    var(--ed-transition)
    both;
}


.executive-demand-kpi:nth-child(1) {
  animation-delay:
    20ms;
}


.executive-demand-kpi:nth-child(2) {
  animation-delay:
    40ms;
}


.executive-demand-kpi:nth-child(3) {
  animation-delay:
    60ms;
}


.executive-demand-kpi:nth-child(4) {
  animation-delay:
    80ms;
}


.executive-demand-kpi:nth-child(5) {
  animation-delay:
    100ms;
}


.executive-demand-kpi:nth-child(6) {
  animation-delay:
    120ms;
}


.executive-demand-kpi:nth-child(7) {
  animation-delay:
    140ms;
}


.executive-demand-kpi::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  right:
    0;

  height:
    2px;

  background:
    transparent;

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


.executive-demand-kpi:hover {
  transform:
    translateY(
      -2px
    );

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

  background:
    var(--ed-surface-subtle);
}


.executive-demand-kpi:hover::before {
  background:
    var(--ed-black);
}


.executive-demand-kpi.is-highlight {
  border-color:
    var(--ed-border-strong);

  background:
    #fafaf8;
}


.executive-demand-kpi.is-highlight::before {
  background:
    var(--ed-black);
}


/* =========================================================
   21. KPI HEAD
   ========================================================= */

.executive-demand-kpi__head {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    7px;
}


.executive-demand-kpi__icon {
  width:
    30px;

  height:
    30px;

  flex:
    0
    0
    30px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    7px;

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

  color:
    var(--ed-text);

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


.executive-demand-kpi:hover
  .executive-demand-kpi__icon {
  border-color:
    var(--ed-border-strong);

  background:
    var(--ed-surface);

  transform:
    translateY(
      -1px
    );
}


.executive-demand-kpi__icon svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2;
}


.executive-demand-kpi__tag {
  min-width:
    0;

  max-width:
    120px;

  padding:
    4px
    7px;

  border:
    1px
    solid
    var(--ed-border-soft);

  border-radius:
    999px;

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

  color:
    var(--ed-muted);

  overflow:
    hidden;

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.05em;

  text-overflow:
    ellipsis;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


/* =========================================================
   22. KPI BODY
   ========================================================= */

.executive-demand-kpi__body {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.executive-demand-kpi__body
  > span {
  color:
    var(--ed-text-soft);

  font-size:
    10px;

  font-weight:
    660;

  line-height:
    1.25;
}


.executive-demand-kpi__body
  > strong {
  min-width:
    0;

  color:
    var(--ed-text);

  font-size:
    clamp(
      25px,
      2vw,
      32px
    );

  font-weight:
    820;

  line-height:
    0.98;

  letter-spacing:
    -0.05em;

  font-variant-numeric:
    tabular-nums;
}


.executive-demand-kpi__body
  > strong.is-text {
  font-size:
    clamp(
      15px,
      1.1vw,
      18px
    );

  font-weight:
    790;

  line-height:
    1.18;

  letter-spacing:
    -0.025em;

  overflow:
    hidden;

  display:
    -webkit-box;

  -webkit-line-clamp:
    2;

  -webkit-box-orient:
    vertical;
}


.executive-demand-kpi__body
  p {
  margin:
    1px
    0
    0;

  color:
    var(--ed-muted);

  font-size:
    9px;

  font-weight:
    540;

  line-height:
    1.4;
}


/* =========================================================
   23. VARIACIONES
   ========================================================= */

.executive-demand-variation {
  min-width:
    0;

  min-height:
    24px;

  padding:
    0
    6px;

  border:
    1px
    solid
    transparent;

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    3px;

  font-size:
    8px;

  font-weight:
    760;

  line-height:
    1;

  white-space:
    nowrap;
}


.executive-demand-variation
  svg {
  width:
    11px;

  height:
    11px;

  stroke-width:
    2.1;
}


.executive-demand-variation
  strong {
  font-size:
    8px;

  font-weight:
    820;
}


.executive-demand-variation
  small {
  display:
    none;
}


.executive-demand-variation.is-positive {
  border-color:
    var(--ed-positive-border);

  background:
    var(--ed-positive-bg);

  color:
    var(--ed-positive);
}


.executive-demand-variation.is-negative {
  border-color:
    var(--ed-negative-border);

  background:
    var(--ed-negative-bg);

  color:
    var(--ed-negative);
}


.executive-demand-variation.is-neutral {
  border-color:
    var(--ed-border-soft);

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

  color:
    var(--ed-muted);
}


/* =========================================================
   24. SNAPSHOT EJECUTIVO
   ========================================================= */

.executive-demand-snapshot {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

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

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

  background:
    var(--ed-surface);

  overflow:
    hidden;

  box-shadow:
    var(--ed-shadow-xs);
}


/* =========================================================
   25. SNAPSHOT ITEM
   ========================================================= */

.executive-demand-snapshot__item {
  position:
    relative;

  min-width:
    0;

  min-height:
    86px;

  padding:
    13px
    15px;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

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

  background:
    var(--ed-surface);

  transition:
    background-color
    var(--ed-transition-fast);
}


.executive-demand-snapshot__item:last-child {
  border-right:
    0;
}


.executive-demand-snapshot__item:hover {
  background:
    var(--ed-surface-subtle);
}


.executive-demand-snapshot__icon {
  width:
    32px;

  height:
    32px;

  flex:
    0
    0
    32px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    7px;

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

  color:
    var(--ed-text);

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


.executive-demand-snapshot__item:hover
  .executive-demand-snapshot__icon {
  border-color:
    var(--ed-border-strong);

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


.executive-demand-snapshot__icon
  svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2;
}


.executive-demand-snapshot__item
  > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.executive-demand-snapshot__item
  small {
  color:
    var(--ed-muted);

  font-size:
    8px;

  font-weight:
    780;

  line-height:
    1.15;

  letter-spacing:
    0.055em;

  text-transform:
    uppercase;
}


.executive-demand-snapshot__item
  strong {
  color:
    var(--ed-text);

  font-size:
    18px;

  font-weight:
    810;

  line-height:
    1.1;

  letter-spacing:
    -0.03em;

  font-variant-numeric:
    tabular-nums;
}


.executive-demand-snapshot__item
  > div
  > span {
  color:
    var(--ed-muted);

  font-size:
    9px;

  font-weight:
    540;

  line-height:
    1.3;
}


/* =========================================================
   26. AJUSTE DESKTOP GRANDE
   ========================================================= */

@media (
  min-width:
    1700px
) {
  .executive-demand-page {
    font-size:
      14px;
  }


  .executive-demand-head {
    min-height:
      132px;

    padding:
      24px
      26px;
  }


  .executive-demand-kpi {
    min-height:
      158px;
  }


  .executive-demand-kpi__body
    > strong {
    font-size:
      32px;
  }
}


/* =========================================================
   27. DESKTOP MEDIO
   ========================================================= */

@media (
  max-width:
    1550px
) {
  .executive-demand-kpis {
    grid-template-columns:
      repeat(
        4,
        minmax(
          0,
          1fr
        )
      );
  }


  .executive-demand-kpi:nth-child(5),
  .executive-demand-kpi:nth-child(6),
  .executive-demand-kpi:nth-child(7) {
    min-height:
      134px;
  }
}


/* =========================================================
   28. DESKTOP 1350
   ========================================================= */

@media (
  max-width:
    1350px
) {
  .executive-demand-head {
    grid-template-columns:
      minmax(
        0,
        1fr
      );

    gap:
      18px;
  }


  .executive-demand-head::after {
    display:
      none;
  }


  .executive-demand-head__actions {
    grid-template-columns:
      repeat(
        4,
        auto
      );

    justify-content:
      start;
  }


  .executive-demand-filters__body {
    grid-template-columns:
      repeat(
        4,
        minmax(
          0,
          1fr
        )
      );
  }
}


/* =========================================================
   29. TABLET LARGE
   ========================================================= */

@media (
  max-width:
    1100px
) {
  .executive-demand-main {
    gap:
      28px;
  }


  .executive-demand-kpis {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .executive-demand-snapshot {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .executive-demand-snapshot__item:nth-child(
      2
    ) {
    border-right:
      0;
  }


  .executive-demand-snapshot__item:nth-child(
      -n
      + 2
    ) {
    border-bottom:
      1px
      solid
      var(--ed-border);
  }


  .executive-demand-period {
    align-items:
      start;
  }


  .executive-demand-period__main {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      8px;
  }


  .executive-demand-period__main
    > div:first-child {
    min-width:
      0;

    padding-right:
      0;

    border-right:
      0;
  }
}


/* =========================================================
   30. TABLET
   ========================================================= */

@media (
  max-width:
    900px
) {
  .executive-demand-page {
    gap:
      12px;

    padding-bottom:
      30px;
  }


  .executive-demand-head {
    min-height:
      0;

    padding:
      18px;
  }


  .executive-demand-brand {
    align-items:
      flex-start;
  }


  .executive-demand-brand__body
    h1 {
    font-size:
      25px;
  }


  .executive-demand-head__actions {
    width:
      100%;

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


  .executive-demand-head-stat {
    min-width:
      0;

    width:
      100%;
  }


  .executive-demand-head__actions
    .executive-demand-btn {
    width:
      100%;
  }


  .executive-demand-filters__body {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .executive-demand-field--wide,
  .executive-demand-filters__actions {
    grid-column:
      span
      2;
  }


  .executive-demand-kpis {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .executive-demand-kpi,
  .executive-demand-kpi:nth-child(5),
  .executive-demand-kpi:nth-child(6),
  .executive-demand-kpi:nth-child(7) {
    min-height:
      140px;
  }
}


/* =========================================================
   31. MOBILE
   ========================================================= */

@media (
  max-width:
    680px
) {
  .executive-demand-page {
    --ed-radius-md:
      8px;

    --ed-radius-lg:
      10px;

    padding-bottom:
      24px;
  }


  .executive-demand-main {
    gap:
      25px;
  }


  .executive-demand-head {
    padding:
      15px;

    gap:
      15px;

    border-radius:
      9px;
  }


  .executive-demand-head::before {
    height:
      2px;
  }


  .executive-demand-brand {
    gap:
      11px;
  }


  .executive-demand-brand__icon {
    width:
      39px;

    height:
      39px;

    flex-basis:
      39px;

    border-radius:
      8px;
  }


  .executive-demand-brand__icon
    svg {
    width:
      17px;

    height:
      17px;
  }


  .executive-demand-brand__body
    > span {
    margin-bottom:
      4px;

    font-size:
      8px;
  }


  .executive-demand-brand__body
    h1 {
    font-size:
      21px;

    line-height:
      1.07;
  }


  .executive-demand-brand__body
    p {
    margin-top:
      7px;

    font-size:
      11px;

    line-height:
      1.45;
  }


  .executive-demand-head__actions {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      6px;
  }


  .executive-demand-head-stat {
    min-height:
      47px;

    padding:
      7px
      10px;
  }


  .executive-demand-head-stat
    strong {
    font-size:
      11px;
  }


  .executive-demand-period {
    grid-template-columns:
      minmax(
        0,
        1fr
      );

    gap:
      11px;

    padding:
      12px;
  }


  .executive-demand-period
    > .executive-demand-btn {
    width:
      100%;
  }


  .executive-demand-presets {
    width:
      100%;

    display:
      grid;

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

    gap:
      5px;
  }


  .executive-demand-preset {
    width:
      100%;

    padding:
      0
      6px;
  }


  .executive-demand-filters__body {
    grid-template-columns:
      1fr;
  }


  .executive-demand-field--wide,
  .executive-demand-filters__actions {
    grid-column:
      auto;
  }


  .executive-demand-filters__actions {
    display:
      grid;

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


  .executive-demand-filters__actions
    .executive-demand-btn {
    width:
      100%;
  }


  .executive-demand-section {
    gap:
      10px;
  }


  .executive-demand-section-heading {
    min-height:
      0;

    padding-bottom:
      8px;
  }


  .executive-demand-section-heading
    h2 {
    font-size:
      18px;
  }


  .executive-demand-section-heading
    p {
    font-size:
      10px;
  }


  .executive-demand-kpis {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      6px;
  }


  .executive-demand-kpi,
  .executive-demand-kpi:nth-child(5),
  .executive-demand-kpi:nth-child(6),
  .executive-demand-kpi:nth-child(7) {
    min-height:
      132px;

    padding:
      12px;
  }


  .executive-demand-kpi__body
    > strong {
    font-size:
      25px;
  }


  .executive-demand-kpi__body
    > strong.is-text {
    font-size:
      14px;
  }


  .executive-demand-snapshot {
    grid-template-columns:
      1fr;
  }


  .executive-demand-snapshot__item,
  .executive-demand-snapshot__item:nth-child(
      2
    ) {
    min-height:
      72px;

    border-right:
      0;

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


  .executive-demand-snapshot__item:last-child {
    border-bottom:
      0;
  }
}


/* =========================================================
   32. MOBILE SMALL
   ========================================================= */

@media (
  max-width:
    480px
) {
  .executive-demand-head {
    padding:
      13px;
  }


  .executive-demand-head__actions {
    grid-template-columns:
      1fr;
  }


  .executive-demand-head-stat {
    min-height:
      44px;
  }


  .executive-demand-presets {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .executive-demand-filters__body.is-open {
    padding:
      12px;
  }


  .executive-demand-kpis {
    grid-template-columns:
      1fr;
  }


  .executive-demand-kpi,
  .executive-demand-kpi:nth-child(5),
  .executive-demand-kpi:nth-child(6),
  .executive-demand-kpi:nth-child(7) {
    min-height:
      124px;
  }


  .executive-demand-kpi__body
    > strong {
    font-size:
      27px;
  }


  .executive-demand-snapshot__item {
    padding:
      12px;
  }
}


/* =========================================================
   CONTINÚA EN PARTE 2 DE 3

   PARTE 2:
   - Paneles
   - Canales
   - Facturación Mayorista
   - Tablas desktop
   - Tablas responsive mobile
   - Productos
   - Clientes
   - Paginación
   - Gráfico evolución
   - Lectura ejecutiva
   ========================================================= *//* =========================================================
   UBICACIÓN:
   frontend/src/pages/direccion-ejecutiva/clientes/clientes.css

   WIRTZ HUB · DIRECCIÓN EJECUTIVA
   CLIENTES Y DEMANDA

   REDISEÑO EXECUTIVE / CEO
   PARTE 2 DE 3

   CONTIENE:
   - Paneles
   - Canales
   - Facturación Mayorista
   - Progress bars
   - Tablas
   - Productos
   - Clientes
   - Paginación
   - Evolución
   - Lectura ejecutiva
   ========================================================= */


/* =========================================================
   33. PANEL BASE
   ========================================================= */

.executive-demand-panel {
  width:
    100%;

  min-width:
    0;

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

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

  background:
    var(--ed-surface);

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

  overflow:
    hidden;

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


.executive-demand-panel:hover {
  border-color:
    var(--ed-border-strong);
}


/* =========================================================
   34. PANEL HEADER
   ========================================================= */

.executive-demand-panel__head {
  width:
    100%;

  min-width:
    0;

  min-height:
    72px;

  padding:
    14px
    16px;

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

  background:
    var(--ed-surface);

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    18px;
}


.executive-demand-panel__head
  > div:first-child {
  min-width:
    0;
}


.executive-demand-panel__head
  > div:first-child
  > span {
  display:
    block;

  margin:
    0
    0
    4px;

  color:
    var(--ed-muted);

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}


.executive-demand-panel__head
  h3 {
  margin:
    0;

  color:
    var(--ed-text);

  font-size:
    17px;

  font-weight:
    800;

  line-height:
    1.18;

  letter-spacing:
    -0.027em;
}


.executive-demand-panel__head
  p {
  max-width:
    700px;

  margin:
    5px
    0
    0;

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

  font-size:
    10px;

  font-weight:
    550;

  line-height:
    1.45;
}


/* =========================================================
   35. PANEL CONTROLS
   ========================================================= */

.executive-demand-panel__controls {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    flex-end;

  gap:
    7px;

  flex-wrap:
    wrap;
}


.executive-demand-panel__controls
  label {
  min-width:
    130px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.executive-demand-panel__badge {
  min-height:
    30px;

  padding:
    0
    9px;

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

  border-radius:
    999px;

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

  color:
    var(--ed-text);

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1;

  white-space:
    nowrap;
}


.executive-demand-panel__badge
  svg {
  width:
    13px;

  height:
    13px;

  stroke-width:
    2;
}


.executive-demand-panel__counter {
  min-width:
    30px;

  height:
    30px;

  padding:
    0
    8px;

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

  border-radius:
    999px;

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

  color:
    var(--ed-text);

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    10px;

  font-weight:
    820;
}


/* =========================================================
   36. CANALES GRID
   ========================================================= */

.executive-demand-channels {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    8px;
}


/* =========================================================
   37. CANAL CARD
   ========================================================= */

.executive-demand-channel {
  position:
    relative;

  min-width:
    0;

  min-height:
    230px;

  padding:
    13px;

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

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

  background:
    var(--ed-surface);

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  overflow:
    hidden;

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

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

  animation:
    executiveDemandScale
    320ms
    var(--ed-transition)
    both;
}


.executive-demand-channel::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  right:
    0;

  height:
    2px;

  background:
    transparent;

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


.executive-demand-channel:hover {
  transform:
    translateY(
      -2px
    );

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

  background:
    var(--ed-surface-subtle);
}


.executive-demand-channel:hover::before {
  background:
    var(--ed-black);
}


/* =========================================================
   38. CANAL HEAD
   ========================================================= */

.executive-demand-channel__head {
  min-width:
    0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;
}


.executive-demand-channel__icon {
  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    7px;

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

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


.executive-demand-channel__icon
  svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2;
}


.executive-demand-channel__head
  > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.executive-demand-channel__head
  > div
  > span {
  color:
    var(--ed-muted);

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.executive-demand-channel__head
  > div
  > strong {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    var(--ed-text);

  font-size:
    13px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    -0.02em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   39. VARIACIÓN CANAL
   ========================================================= */

.executive-demand-channel__variation {
  min-height:
    24px;

  padding:
    0
    6px;

  border:
    1px
    solid
    transparent;

  border-radius:
    999px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    3px;

  font-size:
    8px;

  font-weight:
    800;

  white-space:
    nowrap;
}


.executive-demand-channel__variation
  svg {
  width:
    11px;

  height:
    11px;

  stroke-width:
    2;
}


.executive-demand-channel__variation.is-positive {
  border-color:
    var(--ed-positive-border);

  background:
    var(--ed-positive-bg);

  color:
    var(--ed-positive);
}


.executive-demand-channel__variation.is-negative {
  border-color:
    var(--ed-negative-border);

  background:
    var(--ed-negative-bg);

  color:
    var(--ed-negative);
}


.executive-demand-channel__variation.is-neutral {
  border-color:
    var(--ed-border-soft);

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

  color:
    var(--ed-muted);
}


/* =========================================================
   40. MÉTRICAS CANAL
   ========================================================= */

.executive-demand-channel__metrics {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

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

  border-radius:
    8px;

  overflow:
    hidden;

  background:
    var(--ed-surface-muted);
}


.executive-demand-channel__metrics
  > div {
  min-width:
    0;

  min-height:
    56px;

  padding:
    9px
    8px;

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

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    3px;

  background:
    transparent;
}


.executive-demand-channel__metrics
  > div:last-child {
  border-right:
    0;
}


.executive-demand-channel__metrics
  span {
  color:
    var(--ed-muted);

  font-size:
    7px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}


.executive-demand-channel__metrics
  strong {
  color:
    var(--ed-text);

  font-size:
    14px;

  font-weight:
    820;

  line-height:
    1.1;

  letter-spacing:
    -0.025em;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   41. FACTURACIÓN MAYORISTA
   ========================================================= */

.executive-demand-channel__metric-money {
  grid-column:
    1
    /
    -1;

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

  border-right:
    0
    !important;
}


.executive-demand-channel__billing {
  width:
    100%;

  min-width:
    0;

  padding:
    10px;

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

  border-radius:
    8px;

  background:
    var(--ed-surface-subtle);

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;
}


.executive-demand-channel__billing-icon {
  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    7px;

  background:
    var(--ed-surface);

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


.executive-demand-channel__billing-icon
  svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2;
}


.executive-demand-channel__billing
  > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.executive-demand-channel__billing
  small {
  color:
    var(--ed-muted);

  font-size:
    7px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}


.executive-demand-channel__billing
  strong {
  color:
    var(--ed-text);

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1.2;

  font-variant-numeric:
    tabular-nums;
}


.executive-demand-channel__billing
  span {
  color:
    var(--ed-muted);

  font-size:
    7px;

  font-weight:
    520;

  line-height:
    1.35;
}


/* =========================================================
   42. PARTICIPACIÓN
   ========================================================= */

.executive-demand-channel__share {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


.executive-demand-channel__share
  > div:first-child {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;
}


.executive-demand-channel__share
  span {
  color:
    var(--ed-text-soft);

  font-size:
    8px;

  font-weight:
    650;
}


.executive-demand-channel__share
  strong {
  color:
    var(--ed-text);

  font-size:
    9px;

  font-weight:
    820;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   43. PROGRESS BAR
   ========================================================= */

.executive-demand-progress {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  height:
    4px;

  border-radius:
    999px;

  background:
    rgba(
      10,
      10,
      10,
      0.09
    );

  overflow:
    hidden;
}


.executive-demand-progress
  > span {
  display:
    block;

  width:
    0;

  height:
    100%;

  border-radius:
    inherit;

  background:
    var(--ed-black);

  transform-origin:
    left
    center;

  animation:
    executiveDemandProgress
    520ms
    var(--ed-transition)
    both;

  transition:
    width
    260ms
    var(--ed-transition);
}


/* =========================================================
   44. LÍDER DEL CANAL
   ========================================================= */

.executive-demand-channel__leader {
  margin-top:
    auto;

  min-width:
    0;

  padding-top:
    10px;

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

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.executive-demand-channel__leader-icon {
  width:
    28px;

  height:
    28px;

  flex:
    0
    0
    28px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    7px;

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

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


.executive-demand-channel__leader-icon
  svg {
  width:
    13px;

  height:
    13px;

  stroke-width:
    2;
}


.executive-demand-channel__leader
  > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}


.executive-demand-channel__leader
  small {
  color:
    var(--ed-muted);

  font-size:
    7px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}


.executive-demand-channel__leader
  strong {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    var(--ed-text);

  font-size:
    10px;

  font-weight:
    780;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.executive-demand-channel__leader
  span {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    var(--ed-muted);

  font-size:
    8px;

  font-weight:
    520;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   45. TABLE SHELL
   ========================================================= */

.executive-demand-table-shell {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    hidden;

  background:
    var(--ed-surface);

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(
      10,
      10,
      10,
      0.22
    )
    transparent;
}


/* =========================================================
   46. TABLA
   ========================================================= */

.executive-demand-table {
  width:
    100%;

  border-collapse:
    collapse;

  border-spacing:
    0;

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


.executive-demand-products-table {
  min-width:
    980px;
}


.executive-demand-clients-table {
  min-width:
    820px;
}


.executive-demand-table
  thead {
  background:
    var(--ed-surface-muted);
}


.executive-demand-table
  th {
  height:
    39px;

  padding:
    0
    11px;

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

  color:
    var(--ed-muted);

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.06em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.executive-demand-table
  td {
  min-width:
    0;

  padding:
    10px
    11px;

  border-bottom:
    1px
    solid
    var(--ed-border-soft);

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

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.35;

  vertical-align:
    middle;

  font-variant-numeric:
    tabular-nums;
}


.executive-demand-table
  tbody
  tr {
  background:
    var(--ed-surface);

  transition:
    background-color
    var(--ed-transition-fast);
}


.executive-demand-table
  tbody
  tr:hover {
  background:
    var(--ed-surface-subtle);
}


.executive-demand-table
  tbody
  tr:last-child
  td {
  border-bottom:
    0;
}


.executive-demand-table
  th:first-child,
.executive-demand-table
  td:first-child {
  padding-left:
    15px;
}


.executive-demand-table
  th:last-child,
.executive-demand-table
  td:last-child {
  padding-right:
    15px;

  text-align:
    right;
}


/* =========================================================
   47. COLUMNAS VISUALES
   ========================================================= */

.executive-demand-products-table
  th:nth-child(n + 3):nth-child(-n + 9),
.executive-demand-products-table
  td:nth-child(n + 3):nth-child(-n + 9) {
  text-align:
    right;
}


.executive-demand-clients-table
  th:nth-child(n + 3):nth-child(-n + 7),
.executive-demand-clients-table
  td:nth-child(n + 3):nth-child(-n + 7) {
  text-align:
    right;
}


/* =========================================================
   48. RANK
   ========================================================= */

.executive-demand-rank {
  width:
    24px;

  height:
    24px;

  display:
    inline-grid;

  place-items:
    center;

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

  border-radius:
    6px;

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

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

  font-size:
    8px;

  font-weight:
    820;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   49. PRODUCTO / CLIENTE CELL
   ========================================================= */

.executive-demand-product-cell,
.executive-demand-client-cell {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


.executive-demand-product-cell__icon,
.executive-demand-client-cell__icon {
  width:
    29px;

  height:
    29px;

  flex:
    0
    0
    29px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    7px;

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

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


.executive-demand-product-cell__icon
  svg,
.executive-demand-client-cell__icon
  svg {
  width:
    13px;

  height:
    13px;

  stroke-width:
    2;
}


.executive-demand-product-cell
  > div,
.executive-demand-client-cell
  > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.executive-demand-product-cell
  strong,
.executive-demand-client-cell
  strong {
  max-width:
    330px;

  overflow:
    hidden;

  color:
    var(--ed-text);

  font-size:
    10px;

  font-weight:
    780;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.executive-demand-product-cell
  span,
.executive-demand-client-cell
  span {
  max-width:
    330px;

  overflow:
    hidden;

  color:
    var(--ed-muted);

  font-size:
    8px;

  font-weight:
    550;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.executive-demand-number-strong {
  color:
    var(--ed-text);

  font-size:
    10px;

  font-weight:
    820;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   50. SHARE CELL
   ========================================================= */

.executive-demand-share-cell {
  min-width:
    94px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.executive-demand-share-cell
  strong {
  color:
    var(--ed-text);

  font-size:
    9px;

  font-weight:
    800;

  text-align:
    right;
}


/* =========================================================
   51. PAGINACIÓN
   ========================================================= */

.executive-demand-pagination {
  width:
    100%;

  min-width:
    0;

  min-height:
    48px;

  padding:
    8px
    12px;

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

  background:
    var(--ed-surface-subtle);

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.executive-demand-pagination
  > span {
  color:
    var(--ed-muted);

  font-size:
    9px;

  font-weight:
    650;
}


.executive-demand-pagination
  > div {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.executive-demand-pagination
  > div
  > span {
  color:
    var(--ed-muted);

  font-size:
    9px;

  font-weight:
    650;
}


.executive-demand-pagination
  > div
  > span
  strong {
  color:
    var(--ed-text);

  font-weight:
    820;
}


/* =========================================================
   52. CHART
   ========================================================= */

.executive-demand-chart {
  width:
    100%;

  min-width:
    0;

  padding:
    16px
    17px
    8px;

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


.executive-demand-chart__viewport {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  padding-bottom:
    28px;
}


.executive-demand-chart__svg {
  width:
    100%;

  height:
    250px;

  overflow:
    visible;
}


/* =========================================================
   53. CHART GRID
   ========================================================= */

.executive-demand-chart__grid-line {
  stroke:
    rgba(
      10,
      10,
      10,
      0.085
    );

  stroke-width:
    1;

  vector-effect:
    non-scaling-stroke;
}


.executive-demand-chart__line {
  fill:
    none;

  stroke:
    var(--ed-black);

  stroke-width:
    1.75;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  vector-effect:
    non-scaling-stroke;

  stroke-dasharray:
    1600;

  stroke-dashoffset:
    1600;

  animation:
    executiveDemandChartLine
    700ms
    var(--ed-transition)
    forwards;
}


@keyframes executiveDemandChartLine {
  to {
    stroke-dashoffset:
      0;
  }
}


.executive-demand-chart__point {
  fill:
    var(--ed-surface);

  stroke:
    var(--ed-black);

  stroke-width:
    1.7;

  vector-effect:
    non-scaling-stroke;

  transition:
    r
    var(--ed-transition-fast),
    fill
    var(--ed-transition-fast);
}


.executive-demand-chart__point:hover {
  r:
    6px;

  fill:
    var(--ed-black);
}


/* =========================================================
   54. CHART LABELS
   ========================================================= */

.executive-demand-chart__labels {
  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    0;

  height:
    23px;
}


.executive-demand-chart__labels
  span {
  position:
    absolute;

  bottom:
    0;

  transform:
    translateX(
      -50%
    );

  color:
    var(--ed-muted);

  font-size:
    8px;

  font-weight:
    650;

  line-height:
    1;

  white-space:
    nowrap;
}


/* =========================================================
   55. CHART STATS
   ========================================================= */

.executive-demand-chart-stats {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

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

  background:
    var(--ed-surface-subtle);
}


.executive-demand-chart-stats
  article {
  min-width:
    0;

  min-height:
    68px;

  padding:
    11px
    14px;

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

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    3px;
}


.executive-demand-chart-stats
  article:last-child {
  border-right:
    0;
}


.executive-demand-chart-stats
  span {
  color:
    var(--ed-muted);

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


.executive-demand-chart-stats
  strong {
  color:
    var(--ed-text);

  font-size:
    16px;

  font-weight:
    820;

  line-height:
    1.15;

  letter-spacing:
    -0.025em;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   56. LECTURA EJECUTIVA GRID
   ========================================================= */

.executive-demand-reading-grid {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.35fr
    )
    minmax(
      330px,
      0.65fr
    );

  gap:
    10px;

  align-items:
    start;
}


/* =========================================================
   57. INSIGHTS
   ========================================================= */

.executive-demand-insights {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;
}


.executive-demand-insight {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  padding:
    13px
    15px;

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

  display:
    grid;

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

  gap:
    10px;

  background:
    var(--ed-surface);

  transition:
    background-color
    var(--ed-transition-fast),
    padding-left
    var(--ed-transition-fast);
}


.executive-demand-insight:last-child {
  border-bottom:
    0;
}


.executive-demand-insight:hover {
  padding-left:
    17px;

  background:
    var(--ed-surface-subtle);
}


.executive-demand-insight__icon {
  width:
    32px;

  height:
    32px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    7px;

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

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


.executive-demand-insight__icon
  svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2;
}


.executive-demand-insight
  > div {
  min-width:
    0;
}


.executive-demand-insight__meta {
  min-width:
    0;

  margin-bottom:
    4px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;
}


.executive-demand-insight__meta
  span {
  color:
    var(--ed-muted);

  font-size:
    7px;

  font-weight:
    820;

  line-height:
    1;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


.executive-demand-insight__meta
  strong {
  font-size:
    8px;

  font-weight:
    820;
}


.executive-demand-insight
  > div
  > strong {
  display:
    block;

  color:
    var(--ed-text);

  font-size:
    11px;

  font-weight:
    790;

  line-height:
    1.3;
}


.executive-demand-insight
  p {
  margin:
    4px
    0
    0;

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

  font-size:
    9px;

  font-weight:
    540;

  line-height:
    1.45;
}


.executive-demand-insight.is-positiva
  .executive-demand-insight__icon,
.executive-demand-insight.is-positiva
  .executive-demand-insight__meta
  strong {
  color:
    var(--ed-positive);
}


.executive-demand-insight.is-alerta
  .executive-demand-insight__icon,
.executive-demand-insight.is-alerta
  .executive-demand-insight__meta
  strong {
  color:
    var(--ed-negative);
}


/* =========================================================
   58. LEADERS
   ========================================================= */

.executive-demand-leaders {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;
}


.executive-demand-leader {
  width:
    100%;

  min-width:
    0;

  min-height:
    56px;

  padding:
    10px
    13px;

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

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  background:
    var(--ed-surface);

  transition:
    background-color
    var(--ed-transition-fast),
    padding-left
    var(--ed-transition-fast);
}


.executive-demand-leader:last-child {
  border-bottom:
    0;
}


.executive-demand-leader:hover {
  padding-left:
    15px;

  background:
    var(--ed-surface-subtle);
}


.executive-demand-leader__icon {
  width:
    30px;

  height:
    30px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    7px;

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

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


.executive-demand-leader__icon
  svg {
  width:
    13px;

  height:
    13px;

  stroke-width:
    2;
}


.executive-demand-leader
  > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}


.executive-demand-leader
  small {
  color:
    var(--ed-muted);

  font-size:
    7px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


.executive-demand-leader
  strong {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    var(--ed-text);

  font-size:
    10px;

  font-weight:
    780;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.executive-demand-leader
  span {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    var(--ed-muted);

  font-size:
    8px;

  font-weight:
    520;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.executive-demand-leader
  b {
  color:
    var(--ed-text);

  font-size:
    12px;

  font-weight:
    840;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   59. ESTADOS
   ========================================================= */

.executive-demand-state,
.executive-demand-empty {
  width:
    100%;

  min-width:
    0;

  min-height:
    170px;

  padding:
    28px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  text-align:
    center;

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


.executive-demand-state__icon,
.executive-demand-empty__icon {
  width:
    36px;

  height:
    36px;

  margin-bottom:
    3px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    8px;

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

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


.executive-demand-state__icon
  svg,
.executive-demand-empty__icon
  svg {
  width:
    16px;

  height:
    16px;

  stroke-width:
    2;
}


.executive-demand-state
  > strong,
.executive-demand-empty
  > strong {
  color:
    var(--ed-text);

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1.25;
}


.executive-demand-state
  > p,
.executive-demand-empty
  > p {
  max-width:
    450px;

  margin:
    0;

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

  font-size:
    9px;

  font-weight:
    540;

  line-height:
    1.5;
}


.executive-demand-state.is-error
  .executive-demand-state__icon {
  border-color:
    var(--ed-negative-border);

  background:
    var(--ed-negative-bg);

  color:
    var(--ed-negative);
}


/* =========================================================
   60. INLINE LOADING
   ========================================================= */

.executive-demand-inline-loading {
  width:
    100%;

  min-height:
    150px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  color:
    var(--ed-muted);

  font-size:
    10px;

  font-weight:
    650;
}


.executive-demand-inline-loading
  svg {
  width:
    15px;

  height:
    15px;
}


/* =========================================================
   61. RESPONSIVE · 1500
   ========================================================= */

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


  .executive-demand-channel {
    min-height:
      218px;
  }
}


/* =========================================================
   62. RESPONSIVE · 1180
   ========================================================= */

@media (
  max-width:
    1180px
) {
  .executive-demand-channels {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .executive-demand-reading-grid {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   63. RESPONSIVE · 1000
   ========================================================= */

@media (
  max-width:
    1000px
) {
  .executive-demand-panel__head {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      12px;
  }


  .executive-demand-panel__controls {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .executive-demand-panel__controls
    label {
    flex:
      1
      1
      150px;
  }


  .executive-demand-chart__svg {
    height:
      225px;
  }
}


/* =========================================================
   64. RESPONSIVE · 760
   ========================================================= */

@media (
  max-width:
    760px
) {
  .executive-demand-channels {
    grid-template-columns:
      1fr;
  }


  .executive-demand-channel {
    min-height:
      0;
  }


  .executive-demand-table-shell {
    overflow:
      visible;
  }


  .executive-demand-products-table,
  .executive-demand-clients-table {
    min-width:
      0;

    width:
      100%;
  }


  .executive-demand-table,
  .executive-demand-table
    tbody,
  .executive-demand-table
    tr,
  .executive-demand-table
    td {
    display:
      block;

    width:
      100%;
  }


  .executive-demand-table
    thead {
    display:
      none;
  }


  .executive-demand-table
    tbody {
    padding:
      8px;
  }


  .executive-demand-table
    tbody
    tr {
    position:
      relative;

    margin-bottom:
      8px;

    padding:
      11px;

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

    border-radius:
      8px;

    background:
      var(--ed-surface);

    display:
      grid;

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

    gap:
      9px
      12px;
  }


  .executive-demand-table
    tbody
    tr:last-child {
    margin-bottom:
      0;
  }


  .executive-demand-table
    tbody
    tr:hover {
    background:
      var(--ed-surface-subtle);
  }


  .executive-demand-table
    td {
    min-width:
      0;

    padding:
      0;

    border:
      0;

    text-align:
      left
      !important;
  }


  .executive-demand-table
    td:first-child {
    padding-left:
      0;

    position:
      absolute;

    top:
      10px;

    right:
      10px;

    width:
      auto;
  }


  .executive-demand-table
    td:last-child {
    padding-right:
      0;

    position:
      absolute;

    right:
      10px;

    bottom:
      10px;

    width:
      auto;
  }


  .executive-demand-products-table
    td:nth-child(2),
  .executive-demand-clients-table
    td:nth-child(2) {
    grid-column:
      1
      /
      -1;

    padding-right:
      40px;

    padding-bottom:
      8px;

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


  .executive-demand-products-table
    td:nth-child(n + 3):nth-child(-n + 9),
  .executive-demand-clients-table
    td:nth-child(n + 3):nth-child(-n + 7) {
    position:
      relative;

    padding-top:
      16px;
  }


  .executive-demand-products-table
    td:nth-child(n + 3):nth-child(-n + 9)::before,
  .executive-demand-clients-table
    td:nth-child(n + 3):nth-child(-n + 7)::before {
    position:
      absolute;

    top:
      0;

    left:
      0;

    color:
      var(--ed-muted);

    font-size:
      7px;

    font-weight:
      800;

    line-height:
      1;

    letter-spacing:
      0.05em;

    text-transform:
      uppercase;
  }


  .executive-demand-products-table
    td:nth-child(3)::before {
    content:
      "Total";
  }


  .executive-demand-products-table
    td:nth-child(4)::before {
    content:
      "Mayorista";
  }


  .executive-demand-products-table
    td:nth-child(5)::before {
    content:
      "Flex";
  }


  .executive-demand-products-table
    td:nth-child(6)::before {
    content:
      "Colecta";
  }


  .executive-demand-products-table
    td:nth-child(7)::before {
    content:
      "Enviados a Full";
  }


  .executive-demand-products-table
    td:nth-child(8)::before {
    content:
      "Shopify";
  }


  .executive-demand-products-table
    td:nth-child(9)::before {
    content:
      "Participación";
  }


  .executive-demand-clients-table
    td:nth-child(3)::before {
    content:
      "Pedidos";
  }


  .executive-demand-clients-table
    td:nth-child(4)::before {
    content:
      "Productos";
  }


  .executive-demand-clients-table
    td:nth-child(5)::before {
    content:
      "Unidades";
  }


  .executive-demand-clients-table
    td:nth-child(6)::before {
    content:
      "Facturación";
  }


  .executive-demand-clients-table
    td:nth-child(7)::before {
    content:
      "Última compra";
  }


  .executive-demand-product-cell,
  .executive-demand-client-cell {
    padding-right:
      32px;
  }


  .executive-demand-product-cell
    strong,
  .executive-demand-client-cell
    strong,
  .executive-demand-product-cell
    span,
  .executive-demand-client-cell
    span {
    max-width:
      100%;
  }


  .executive-demand-share-cell {
    min-width:
      0;
  }


  .executive-demand-share-cell
    strong {
    text-align:
      left;
  }


  .executive-demand-pagination {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .executive-demand-pagination
    > div {
    width:
      100%;

    justify-content:
      space-between;
  }


  .executive-demand-chart {
    padding:
      14px
      11px
      7px;
  }


  .executive-demand-chart__svg {
    height:
      205px;
  }


  .executive-demand-chart-stats {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }
}


/* =========================================================
   65. MOBILE · 560
   ========================================================= */

@media (
  max-width:
    560px
) {
  .executive-demand-panel__head {
    min-height:
      0;

    padding:
      13px;
  }


  .executive-demand-panel__head
    h3 {
    font-size:
      15px;
  }


  .executive-demand-panel__controls {
    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      8px;
  }


  .executive-demand-panel__controls
    label {
    width:
      100%;
  }


  .executive-demand-channel {
    padding:
      12px;
  }


  .executive-demand-channel__metrics {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .executive-demand-table
    tbody {
    padding:
      6px;
  }


  .executive-demand-table
    tbody
    tr {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    margin-bottom:
      6px;

    padding:
      10px;

    gap:
      9px;
  }


  .executive-demand-products-table
    td:nth-child(9),
  .executive-demand-clients-table
    td:nth-child(6) {
    grid-column:
      1
      /
      -1;
  }


  .executive-demand-chart__svg {
    height:
      185px;
  }


  .executive-demand-chart__labels
    span {
    font-size:
      7px;
  }


  .executive-demand-chart-stats {
    grid-template-columns:
      1fr;
  }


  .executive-demand-chart-stats
    article {
    min-height:
      55px;

    border-right:
      0;

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


  .executive-demand-chart-stats
    article:last-child {
    border-bottom:
      0;
  }


  .executive-demand-insight {
    padding:
      12px;
  }


  .executive-demand-leader {
    padding:
      10px
      12px;
  }
}


/* =========================================================
   CONTINÚA EN PARTE 3 DE 3

   PARTE 3:
   - Drawer
   - Detalle producto
   - Detalle cliente
   - Toast
   - Dark mode completo
   - Responsive final
   - Reduced motion
   ========================================================= *//* =========================================================
   UBICACIÓN:
   frontend/src/pages/direccion-ejecutiva/clientes/clientes.css

   WIRTZ HUB · DIRECCIÓN EJECUTIVA
   CLIENTES Y DEMANDA

   REDISEÑO EXECUTIVE / CEO
   PARTE 3 DE 3

   CONTIENE:
   - Drawer
   - Detalle producto
   - Detalle cliente
   - Toast
   - Dark mode completo
   - Responsive final
   - Reduced motion
   ========================================================= */


/* =========================================================
   66. BODY LOCK
   ========================================================= */

body.executive-demand-drawer-open {
  overflow:
    hidden;
}


/* =========================================================
   67. DRAWER VARIABLES
   ========================================================= */

.executive-demand-drawer {
  --ed-bg:
    #f4f4f1;

  --ed-bg-secondary:
    #eeeeea;

  --ed-surface:
    #ffffff;

  --ed-surface-subtle:
    #fafaf8;

  --ed-surface-muted:
    #f5f5f2;

  --ed-surface-hover:
    #f1f1ed;

  --ed-text:
    #0a0a0a;

  --ed-text-secondary:
    #202020;

  --ed-text-soft:
    #343434;

  --ed-muted:
    #5f5f5a;

  --ed-muted-2:
    #81817b;

  --ed-border:
    rgba(
      10,
      10,
      10,
      0.13
    );

  --ed-border-soft:
    rgba(
      10,
      10,
      10,
      0.075
    );

  --ed-border-strong:
    rgba(
      10,
      10,
      10,
      0.22
    );

  --ed-black:
    #090909;

  --ed-white:
    #ffffff;

  --ed-positive:
    #12623c;

  --ed-positive-bg:
    #edf7f1;

  --ed-negative:
    #a72f2f;

  --ed-negative-bg:
    #fbefef;

  --ed-warning:
    #83580b;

  --ed-warning-bg:
    #fbf6ea;

  --ed-transition-fast:
    120ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  --ed-transition:
    190ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  width:
    100vw;

  height:
    100dvh;

  max-width:
    100vw;

  max-height:
    100dvh;

  position:
    fixed;

  inset:
    0;

  z-index:
    9999;

  display:
    grid;

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

  overflow:
    hidden;

  opacity:
    0;

  pointer-events:
    none;

  transition:
    opacity
    var(--ed-transition-fast);

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


.executive-demand-drawer.is-open {
  opacity:
    1;

  pointer-events:
    auto;
}


/* =========================================================
   68. DRAWER BACKDROP
   ========================================================= */

.executive-demand-drawer__backdrop {
  grid-column:
    1
    /
    -1;

  grid-row:
    1;

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

  backdrop-filter:
    blur(
      1px
    );

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

  animation:
    executiveDemandFade
    170ms
    ease
    both;
}


/* =========================================================
   69. DRAWER PANEL
   ========================================================= */

.executive-demand-drawer__panel {
  grid-column:
    2;

  grid-row:
    1;

  position:
    relative;

  z-index:
    1;

  width:
    100%;

  min-width:
    0;

  height:
    100dvh;

  min-height:
    0;

  max-height:
    100dvh;

  display:
    flex;

  flex-direction:
    column;

  border-left:
    1px
    solid
    var(--ed-border-strong);

  background:
    var(--ed-surface);

  overflow:
    hidden;

  box-shadow:
    -18px
    0
    48px
    rgba(
      0,
      0,
      0,
      0.11
    );

  animation:
    executiveDemandDrawerIn
    220ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )
    both;
}


@keyframes executiveDemandDrawerIn {
  0% {
    opacity:
      0;

    transform:
      translate3d(
        28px,
        0,
        0
      );
  }

  100% {
    opacity:
      1;

    transform:
      translate3d(
        0,
        0,
        0
      );
  }
}


/* =========================================================
   70. DRAWER HEADER
   ========================================================= */

.executive-demand-drawer__head {
  width:
    100%;

  min-width:
    0;

  flex:
    0
    0
    auto;

  min-height:
    78px;

  padding:
    15px
    16px;

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

  background:
    var(--ed-surface);

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    13px;
}


.executive-demand-drawer__identity {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;
}


.executive-demand-drawer__icon {
  width:
    36px;

  height:
    36px;

  flex:
    0
    0
    36px;

  display:
    grid;

  place-items:
    center;

  border:
    1px
    solid
    #090909;

  border-radius:
    8px;

  background:
    #090909;

  color:
    #ffffff;
}


.executive-demand-drawer__icon
  svg {
  width:
    16px;

  height:
    16px;

  stroke-width:
    2;
}


.executive-demand-drawer__identity
  > div {
  min-width:
    0;
}


.executive-demand-drawer__identity
  > div
  > span {
  display:
    block;

  margin:
    0
    0
    4px;

  color:
    var(--ed-muted);

  font-size:
    8px;

  font-weight:
    820;

  line-height:
    1;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}


.executive-demand-drawer__identity
  h3 {
  margin:
    0;

  color:
    var(--ed-text);

  font-size:
    18px;

  font-weight:
    820;

  line-height:
    1.15;

  letter-spacing:
    -0.03em;

  overflow-wrap:
    anywhere;
}


.executive-demand-drawer__identity
  p {
  margin:
    4px
    0
    0;

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

  font-size:
    9px;

  font-weight:
    550;

  line-height:
    1.4;
}


/* =========================================================
   71. DRAWER CLOSE BUTTON
   ========================================================= */

.executive-demand-drawer
  .executive-demand-icon-btn {
  width:
    32px;

  height:
    32px;

  min-width:
    32px;

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

  border-radius:
    7px;

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

  color:
    var(--ed-text);

  display:
    grid;

  place-items:
    center;

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


.executive-demand-drawer
  .executive-demand-icon-btn:hover {
  border-color:
    var(--ed-border-strong);

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

  transform:
    translateY(
      -1px
    );
}


/* =========================================================
   72. DRAWER BODY
   ========================================================= */

.executive-demand-drawer__body {
  width:
    100%;

  min-width:
    0;

  min-height:
    0;

  flex:
    1
    1
    auto;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  -webkit-overflow-scrolling:
    touch;

  background:
    var(--ed-bg);

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(
      10,
      10,
      10,
      0.28
    )
    transparent;
}


.executive-demand-drawer__body::-webkit-scrollbar {
  width:
    7px;
}


.executive-demand-drawer__body::-webkit-scrollbar-track {
  background:
    transparent;
}


.executive-demand-drawer__body::-webkit-scrollbar-thumb {
  border:
    2px
    solid
    transparent;

  border-radius:
    999px;

  background:
    rgba(
      10,
      10,
      10,
      0.25
    );

  background-clip:
    padding-box;
}


.executive-demand-drawer__body::-webkit-scrollbar-thumb:hover {
  background:
    rgba(
      10,
      10,
      10,
      0.42
    );

  background-clip:
    padding-box;
}


/* =========================================================
   73. DRAWER LOADING
   ========================================================= */

.executive-demand-drawer-state {
  min-height:
    280px;

  padding:
    30px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  text-align:
    center;
}


.executive-demand-drawer-state__icon {
  width:
    38px;

  height:
    38px;

  margin-bottom:
    3px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    8px;

  background:
    var(--ed-surface);

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


.executive-demand-drawer-state__icon
  svg {
  width:
    17px;

  height:
    17px;

  stroke-width:
    2;
}


.executive-demand-drawer-state
  strong {
  color:
    var(--ed-text);

  font-size:
    12px;

  font-weight:
    800;
}


.executive-demand-drawer-state
  p {
  margin:
    0;

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

  font-size:
    9px;

  font-weight:
    540;

  line-height:
    1.45;
}


/* =========================================================
   74. DETAIL SUMMARY
   ========================================================= */

.executive-demand-detail-summary {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

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

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


.executive-demand-detail-summary
  article {
  position:
    relative;

  min-width:
    0;

  min-height:
    86px;

  padding:
    13px
    15px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    4px;

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

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

  transition:
    background-color
    var(--ed-transition-fast);
}


.executive-demand-detail-summary
  article:hover {
  background:
    var(--ed-surface-subtle);
}


.executive-demand-detail-summary
  article:nth-child(2n) {
  border-right:
    0;
}


.executive-demand-detail-summary
  article:nth-last-child(-n + 2) {
  border-bottom:
    0;
}


.executive-demand-detail-summary
  span {
  color:
    var(--ed-muted);

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


.executive-demand-detail-summary
  strong {
  color:
    var(--ed-text);

  font-size:
    21px;

  font-weight:
    840;

  line-height:
    1.05;

  letter-spacing:
    -0.035em;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   75. DRAWER SECTION
   ========================================================= */

.executive-demand-drawer-section {
  width:
    100%;

  min-width:
    0;

  margin-top:
    9px;

  border-top:
    1px
    solid
    var(--ed-border-strong);

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

  background:
    var(--ed-surface);

  flex:
    0
    0
    auto;
}


.executive-demand-drawer-section__head {
  width:
    100%;

  min-width:
    0;

  min-height:
    57px;

  padding:
    12px
    15px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.executive-demand-drawer-section__head
  span {
  display:
    block;

  margin:
    0
    0
    3px;

  color:
    var(--ed-muted);

  font-size:
    8px;

  font-weight:
    820;

  line-height:
    1;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}


.executive-demand-drawer-section__head
  h4 {
  margin:
    0;

  color:
    var(--ed-text);

  font-size:
    13px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    -0.02em;
}


/* =========================================================
   76. DETAIL CHANNELS
   ========================================================= */

.executive-demand-detail-channels {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;
}


.executive-demand-detail-channel {
  min-width:
    0;

  padding:
    11px
    14px;

  display:
    grid;

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

  gap:
    9px;

  border-bottom:
    1px
    solid
    var(--ed-border-soft);

  background:
    var(--ed-surface);

  transition:
    background-color
    var(--ed-transition-fast),
    padding-left
    var(--ed-transition-fast);
}


.executive-demand-detail-channel:last-child {
  border-bottom:
    0;
}


.executive-demand-detail-channel:hover {
  padding-left:
    16px;

  background:
    var(--ed-surface-subtle);
}


.executive-demand-detail-channel__icon {
  width:
    32px;

  height:
    32px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    7px;

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

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


.executive-demand-detail-channel__icon
  svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2;
}


.executive-demand-detail-channel__body {
  min-width:
    0;

  display:
    grid;

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

  gap:
    7px
    11px;
}


.executive-demand-detail-channel__body
  > div:first-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.executive-demand-detail-channel__body
  > div:first-child
  strong {
  color:
    var(--ed-text);

  font-size:
    10px;

  font-weight:
    790;

  line-height:
    1.2;
}


.executive-demand-detail-channel__body
  > div:first-child
  span {
  color:
    var(--ed-muted);

  font-size:
    8px;

  font-weight:
    540;
}


.executive-demand-detail-channel__value {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    2px;
}


.executive-demand-detail-channel__value
  strong {
  color:
    var(--ed-text);

  font-size:
    12px;

  font-weight:
    830;

  font-variant-numeric:
    tabular-nums;
}


.executive-demand-detail-channel__value
  span {
  color:
    var(--ed-muted);

  font-size:
    8px;

  font-weight:
    650;
}


.executive-demand-detail-channel__billing {
  grid-column:
    1
    /
    -1;

  padding:
    8px
    9px;

  border:
    1px
    solid
    var(--ed-border-soft);

  border-radius:
    6px;

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

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.executive-demand-detail-channel__billing
  span {
  color:
    var(--ed-muted);

  font-size:
    8px;

  font-weight:
    700;
}


.executive-demand-detail-channel__billing
  strong {
  color:
    var(--ed-text);

  font-size:
    10px;

  font-weight:
    820;

  font-variant-numeric:
    tabular-nums;
}


.executive-demand-detail-channel__body
  .executive-demand-progress {
  grid-column:
    1
    /
    -1;
}


/* =========================================================
   77. CLIENT OVERVIEW
   ========================================================= */

.executive-demand-client-overview {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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


.executive-demand-client-overview
  article {
  min-width:
    0;

  min-height:
    88px;

  padding:
    12px
    14px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

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

  border-bottom:
    1px
    solid
    var(--ed-border-soft);

  background:
    var(--ed-surface);

  transition:
    background-color
    var(--ed-transition-fast);
}


.executive-demand-client-overview
  article:hover {
  background:
    var(--ed-surface-subtle);
}


.executive-demand-client-overview
  article:nth-child(2n) {
  border-right:
    0;
}


.executive-demand-client-overview
  article:nth-last-child(-n + 2) {
  border-bottom:
    0;
}


.executive-demand-client-overview__icon {
  width:
    32px;

  height:
    32px;

  flex:
    0
    0
    32px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    7px;

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

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


.executive-demand-client-overview__icon
  svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2;
}


.executive-demand-client-overview
  article
  > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.executive-demand-client-overview
  small {
  color:
    var(--ed-muted);

  font-size:
    7px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.055em;

  text-transform:
    uppercase;
}


.executive-demand-client-overview
  strong {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    var(--ed-text);

  font-size:
    10px;

  font-weight:
    790;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.executive-demand-client-overview
  article
  > div
  > span {
  color:
    var(--ed-muted);

  font-size:
    8px;

  font-weight:
    540;

  line-height:
    1.3;
}


/* =========================================================
   78. CLIENT PRODUCTS
   ========================================================= */

.executive-demand-client-products {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  overflow:
    visible;
}


.executive-demand-client-product {
  width:
    100%;

  min-width:
    0;

  padding:
    10px
    13px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  border-bottom:
    1px
    solid
    var(--ed-border-soft);

  background:
    var(--ed-surface);

  transition:
    background-color
    var(--ed-transition-fast),
    padding-left
    var(--ed-transition-fast);
}


.executive-demand-client-product:last-child {
  border-bottom:
    0;
}


.executive-demand-client-product:hover {
  padding-left:
    15px;

  background:
    var(--ed-surface-subtle);
}


.executive-demand-client-product__body {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.executive-demand-client-product__body
  strong {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    var(--ed-text);

  font-size:
    10px;

  font-weight:
    780;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.executive-demand-client-product__body
  > span {
  max-width:
    100%;

  overflow:
    hidden;

  color:
    var(--ed-muted);

  font-size:
    8px;

  font-weight:
    540;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.executive-demand-client-product__body
  .executive-demand-progress {
  margin-top:
    2px;
}


.executive-demand-client-product__metrics {
  min-width:
    72px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    2px;
}


.executive-demand-client-product__metrics
  strong {
  color:
    var(--ed-text);

  font-size:
    11px;

  font-weight:
    830;

  font-variant-numeric:
    tabular-nums;
}


.executive-demand-client-product__metrics
  span {
  color:
    var(--ed-muted);

  font-size:
    8px;

  font-weight:
    650;
}


.executive-demand-client-product__metrics
  small {
  color:
    var(--ed-text-soft);

  font-size:
    8px;

  font-weight:
    650;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   79. TOAST
   ========================================================= */

.executive-demand-toast {
  position:
    fixed;

  right:
    17px;

  bottom:
    17px;

  z-index:
    12000;

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

  min-height:
    62px;

  padding:
    11px
    12px;

  border:
    1px
    solid
    rgba(
      10,
      10,
      10,
      0.2
    );

  border-radius:
    9px;

  background:
    #ffffff;

  color:
    #0a0a0a;

  box-shadow:
    0
    14px
    40px
    rgba(
      0,
      0,
      0,
      0.11
    );

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  opacity:
    0;

  transform:
    translate3d(
      0,
      10px,
      0
    )
    scale(
      0.985
    );

  pointer-events:
    none;

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


.executive-demand-toast.is-visible {
  opacity:
    1;

  transform:
    translate3d(
      0,
      0,
      0
    )
    scale(
      1
    );

  pointer-events:
    auto;
}


.executive-demand-toast__icon {
  width:
    31px;

  height:
    31px;

  display:
    grid;

  place-items:
    center;

  border:
    1px
    solid
    rgba(
      10,
      10,
      10,
      0.12
    );

  border-radius:
    7px;

  background:
    #f5f5f2;
}


.executive-demand-toast__icon
  svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2;
}


.executive-demand-toast__body {
  min-width:
    0;
}


.executive-demand-toast__body
  strong {
  display:
    block;

  color:
    #0a0a0a;

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.3;
}


.executive-demand-toast__body
  p {
  margin:
    3px
    0
    0;

  color:
    #50504d;

  font-size:
    8px;

  font-weight:
    550;

  line-height:
    1.4;
}


.executive-demand-toast.is-success
  .executive-demand-toast__icon {
  border-color:
    rgba(
      18,
      98,
      60,
      0.16
    );

  background:
    #edf7f1;

  color:
    #12623c;
}


.executive-demand-toast.is-error
  .executive-demand-toast__icon {
  border-color:
    rgba(
      167,
      47,
      47,
      0.16
    );

  background:
    #fbefef;

  color:
    #a72f2f;
}


.executive-demand-toast.is-warning
  .executive-demand-toast__icon {
  border-color:
    rgba(
      131,
      88,
      11,
      0.16
    );

  background:
    #fbf6ea;

  color:
    #83580b;
}


/* =========================================================
   80. MOBILE DRAWER
   ========================================================= */

@media (
  max-width:
    680px
) {
  .executive-demand-drawer {
    display:
      block;
  }


  .executive-demand-drawer__backdrop {
    position:
      absolute;

    inset:
      0;
  }


  .executive-demand-drawer__panel {
    position:
      absolute;

    left:
      0;

    right:
      0;

    bottom:
      0;

    width:
      100%;

    height:
      min(
        90dvh,
        780px
      );

    min-height:
      0;

    border-left:
      0;

    border-top:
      1px
      solid
      var(--ed-border-strong);

    border-radius:
      13px
      13px
      0
      0;

    box-shadow:
      0
      -18px
      48px
      rgba(
        0,
        0,
        0,
        0.15
      );

    animation:
      executiveDemandDrawerMobileIn
      220ms
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      )
      both;
  }


  @keyframes executiveDemandDrawerMobileIn {
    0% {
      opacity:
        0;

      transform:
        translate3d(
          0,
          30px,
          0
        );
    }

    100% {
      opacity:
        1;

      transform:
        translate3d(
          0,
          0,
          0
        );
    }
  }


  .executive-demand-drawer__panel::before {
    content:
      "";

    width:
      38px;

    height:
      4px;

    position:
      absolute;

    top:
      7px;

    left:
      50%;

    border-radius:
      999px;

    background:
      var(--ed-border-strong);

    transform:
      translateX(
        -50%
      );

    z-index:
      5;
  }


  .executive-demand-drawer__head {
    min-height:
      76px;

    padding:
      17px
      13px
      12px;
  }


  .executive-demand-drawer__identity
    h3 {
    font-size:
      16px;
  }


  .executive-demand-detail-summary
    strong {
    font-size:
      19px;
  }
}


/* =========================================================
   81. MOBILE SMALL DRAWER
   ========================================================= */

@media (
  max-width:
    470px
) {
  .executive-demand-drawer__panel {
    height:
      92dvh;

    border-radius:
      11px
      11px
      0
      0;
  }


  .executive-demand-detail-summary {
    grid-template-columns:
      1fr;
  }


  .executive-demand-detail-summary
    article,
  .executive-demand-detail-summary
    article:nth-child(2n),
  .executive-demand-detail-summary
    article:nth-last-child(-n + 2) {
    min-height:
      68px;

    border-right:
      0;

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


  .executive-demand-detail-summary
    article:last-child {
    border-bottom:
      0;
  }


  .executive-demand-client-overview {
    grid-template-columns:
      1fr;
  }


  .executive-demand-client-overview
    article,
  .executive-demand-client-overview
    article:nth-child(2n),
  .executive-demand-client-overview
    article:nth-last-child(-n + 2) {
    min-height:
      72px;

    border-right:
      0;

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


  .executive-demand-client-overview
    article:last-child {
    border-bottom:
      0;
  }


  .executive-demand-client-product {
    grid-template-columns:
      24px
      minmax(
        0,
        1fr
      );

    align-items:
      start;
  }


  .executive-demand-client-product__metrics {
    grid-column:
      2;

    width:
      100%;

    min-width:
      0;

    padding-top:
      4px;

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

    flex-direction:
      row;

    justify-content:
      space-between;

    align-items:
      center;

    gap:
      8px;
  }


  .executive-demand-detail-channel__body {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      auto;
  }
}


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

[data-theme="dark"]
  .executive-demand-page,
.dark
  .executive-demand-page,
body.dark
  .executive-demand-page {
  --ed-bg:
    #090909;

  --ed-bg-secondary:
    #0d0d0d;

  --ed-surface:
    #111111;

  --ed-surface-subtle:
    #141414;

  --ed-surface-muted:
    #181818;

  --ed-surface-hover:
    #1c1c1c;

  --ed-surface-active:
    #222222;

  --ed-text:
    #f7f7f7;

  --ed-text-secondary:
    #e3e3e3;

  --ed-text-soft:
    #c9c9c9;

  --ed-muted:
    #a3a3a3;

  --ed-muted-2:
    #818181;

  --ed-muted-3:
    #666666;

  --ed-black:
    #f5f5f5;

  --ed-white:
    #101010;

  --ed-border:
    rgba(
      255,
      255,
      255,
      0.13
    );

  --ed-border-soft:
    rgba(
      255,
      255,
      255,
      0.075
    );

  --ed-border-strong:
    rgba(
      255,
      255,
      255,
      0.2
    );

  --ed-border-extra:
    rgba(
      255,
      255,
      255,
      0.3
    );

  --ed-positive:
    #68cb95;

  --ed-positive-bg:
    rgba(
      104,
      203,
      149,
      0.09
    );

  --ed-positive-border:
    rgba(
      104,
      203,
      149,
      0.19
    );

  --ed-negative:
    #f17b7b;

  --ed-negative-bg:
    rgba(
      241,
      123,
      123,
      0.09
    );

  --ed-negative-border:
    rgba(
      241,
      123,
      123,
      0.19
    );

  --ed-warning:
    #e1b35d;

  --ed-warning-bg:
    rgba(
      225,
      179,
      93,
      0.09
    );

  --ed-warning-border:
    rgba(
      225,
      179,
      93,
      0.19
    );

  --ed-shadow-xs:
    0
    1px
    2px
    rgba(
      0,
      0,
      0,
      0.28
    );

  --ed-shadow-sm:
    0
    1px
    2px
    rgba(
      0,
      0,
      0,
      0.32
    ),
    0
    8px
    24px
    rgba(
      0,
      0,
      0,
      0.16
    );

  --ed-shadow-md:
    0
    2px
    5px
    rgba(
      0,
      0,
      0,
      0.34
    ),
    0
    14px
    34px
    rgba(
      0,
      0,
      0,
      0.2
    );

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


/* =========================================================
   83. DARK · ELEMENTOS PRINCIPALES
   ========================================================= */

[data-theme="dark"]
  .executive-demand-head,
.dark
  .executive-demand-head,
body.dark
  .executive-demand-head,

[data-theme="dark"]
  .executive-demand-filters,
.dark
  .executive-demand-filters,
body.dark
  .executive-demand-filters,

[data-theme="dark"]
  .executive-demand-kpi,
.dark
  .executive-demand-kpi,
body.dark
  .executive-demand-kpi,

[data-theme="dark"]
  .executive-demand-snapshot,
.dark
  .executive-demand-snapshot,
body.dark
  .executive-demand-snapshot,

[data-theme="dark"]
  .executive-demand-channel,
.dark
  .executive-demand-channel,
body.dark
  .executive-demand-channel,

[data-theme="dark"]
  .executive-demand-panel,
.dark
  .executive-demand-panel,
body.dark
  .executive-demand-panel {
  background:
    var(--ed-surface);

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


/* =========================================================
   84. DARK · KPI HIGHLIGHT
   ========================================================= */

[data-theme="dark"]
  .executive-demand-kpi.is-highlight,
.dark
  .executive-demand-kpi.is-highlight,
body.dark
  .executive-demand-kpi.is-highlight {
  background:
    #131313;

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


/* =========================================================
   85. DARK · HEADER ICON
   ========================================================= */

[data-theme="dark"]
  .executive-demand-brand__icon,
.dark
  .executive-demand-brand__icon,
body.dark
  .executive-demand-brand__icon {
  border-color:
    #f1f1f1;

  background:
    #f1f1f1;

  color:
    #101010;
}


/* =========================================================
   86. DARK · FILTERS
   ========================================================= */

[data-theme="dark"]
  .executive-demand-filters__body,
.dark
  .executive-demand-filters__body,
body.dark
  .executive-demand-filters__body {
  background:
    #0f0f0f;
}


[data-theme="dark"]
  .executive-demand-field input,
[data-theme="dark"]
  .executive-demand-field select,
[data-theme="dark"]
  .executive-demand-panel__controls select,
.dark
  .executive-demand-field input,
.dark
  .executive-demand-field select,
.dark
  .executive-demand-panel__controls select,
body.dark
  .executive-demand-field input,
body.dark
  .executive-demand-field select,
body.dark
  .executive-demand-panel__controls select {
  background:
    var(--ed-surface-muted);

  color:
    var(--ed-text);

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


[data-theme="dark"]
  .executive-demand-field input:focus,
[data-theme="dark"]
  .executive-demand-field select:focus,
[data-theme="dark"]
  .executive-demand-panel__controls select:focus,
.dark
  .executive-demand-field input:focus,
.dark
  .executive-demand-field select:focus,
.dark
  .executive-demand-panel__controls select:focus,
body.dark
  .executive-demand-field input:focus,
body.dark
  .executive-demand-field select:focus,
body.dark
  .executive-demand-panel__controls select:focus {
  background:
    #181818;

  border-color:
    var(--ed-border-extra);
}


/* =========================================================
   87. DARK · BOTONES
   ========================================================= */

[data-theme="dark"]
  .executive-demand-btn,
.dark
  .executive-demand-btn,
body.dark
  .executive-demand-btn {
  background:
    var(--ed-surface);

  color:
    var(--ed-text);

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


[data-theme="dark"]
  .executive-demand-btn:hover:not(:disabled),
.dark
  .executive-demand-btn:hover:not(:disabled),
body.dark
  .executive-demand-btn:hover:not(:disabled) {
  background:
    var(--ed-surface-hover);

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


[data-theme="dark"]
  .executive-demand-btn--primary,
.dark
  .executive-demand-btn--primary,
body.dark
  .executive-demand-btn--primary {
  border-color:
    #f1f1f1;

  background:
    #f1f1f1;

  color:
    #101010;
}


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

  background:
    #ffffff;

  color:
    #080808;
}


/* =========================================================
   88. DARK · PRESET
   ========================================================= */

[data-theme="dark"]
  .executive-demand-preset.is-active,
.dark
  .executive-demand-preset.is-active,
body.dark
  .executive-demand-preset.is-active {
  border-color:
    #f1f1f1;

  background:
    #f1f1f1;

  color:
    #101010;
}


/* =========================================================
   89. DARK · TABLE
   ========================================================= */

[data-theme="dark"]
  .executive-demand-table
  thead,
.dark
  .executive-demand-table
  thead,
body.dark
  .executive-demand-table
  thead {
  background:
    var(--ed-surface-muted);
}


[data-theme="dark"]
  .executive-demand-table
  tbody
  tr,
.dark
  .executive-demand-table
  tbody
  tr,
body.dark
  .executive-demand-table
  tbody
  tr {
  background:
    var(--ed-surface);
}


[data-theme="dark"]
  .executive-demand-table
  tbody
  tr:hover,
.dark
  .executive-demand-table
  tbody
  tr:hover,
body.dark
  .executive-demand-table
  tbody
  tr:hover {
  background:
    var(--ed-surface-hover);
}


/* =========================================================
   90. DARK · PROGRESS
   ========================================================= */

[data-theme="dark"]
  .executive-demand-progress,
.dark
  .executive-demand-progress,
body.dark
  .executive-demand-progress {
  background:
    rgba(
      255,
      255,
      255,
      0.1
    );
}


[data-theme="dark"]
  .executive-demand-progress
  > span,
.dark
  .executive-demand-progress
  > span,
body.dark
  .executive-demand-progress
  > span {
  background:
    #efefef;
}


/* =========================================================
   91. DARK · CHART
   ========================================================= */

[data-theme="dark"]
  .executive-demand-chart__grid-line,
.dark
  .executive-demand-chart__grid-line,
body.dark
  .executive-demand-chart__grid-line {
  stroke:
    rgba(
      255,
      255,
      255,
      0.09
    );
}


[data-theme="dark"]
  .executive-demand-chart__line,
.dark
  .executive-demand-chart__line,
body.dark
  .executive-demand-chart__line {
  stroke:
    #f1f1f1;
}


[data-theme="dark"]
  .executive-demand-chart__point,
.dark
  .executive-demand-chart__point,
body.dark
  .executive-demand-chart__point {
  fill:
    #111111;

  stroke:
    #f1f1f1;
}


[data-theme="dark"]
  .executive-demand-chart__point:hover,
.dark
  .executive-demand-chart__point:hover,
body.dark
  .executive-demand-chart__point:hover {
  fill:
    #f1f1f1;
}


/* =========================================================
   92. DARK · DRAWER VARIABLES
   ========================================================= */

[data-theme="dark"]
  .executive-demand-drawer,
.dark
  .executive-demand-drawer,
body.dark
  .executive-demand-drawer {
  --ed-bg:
    #090909;

  --ed-bg-secondary:
    #0d0d0d;

  --ed-surface:
    #111111;

  --ed-surface-subtle:
    #141414;

  --ed-surface-muted:
    #181818;

  --ed-surface-hover:
    #1c1c1c;

  --ed-text:
    #f7f7f7;

  --ed-text-secondary:
    #e3e3e3;

  --ed-text-soft:
    #c9c9c9;

  --ed-muted:
    #a3a3a3;

  --ed-muted-2:
    #818181;

  --ed-border:
    rgba(
      255,
      255,
      255,
      0.13
    );

  --ed-border-soft:
    rgba(
      255,
      255,
      255,
      0.075
    );

  --ed-border-strong:
    rgba(
      255,
      255,
      255,
      0.2
    );

  --ed-black:
    #f5f5f5;

  --ed-white:
    #101010;

  --ed-positive:
    #68cb95;

  --ed-positive-bg:
    rgba(
      104,
      203,
      149,
      0.09
    );

  --ed-negative:
    #f17b7b;

  --ed-negative-bg:
    rgba(
      241,
      123,
      123,
      0.09
    );

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


/* =========================================================
   93. DARK · DRAWER PANEL
   ========================================================= */

[data-theme="dark"]
  .executive-demand-drawer__panel,
.dark
  .executive-demand-drawer__panel,
body.dark
  .executive-demand-drawer__panel {
  border-color:
    var(--ed-border-strong);

  background:
    var(--ed-surface);

  box-shadow:
    -18px
    0
    52px
    rgba(
      0,
      0,
      0,
      0.5
    );
}


[data-theme="dark"]
  .executive-demand-drawer__head,
.dark
  .executive-demand-drawer__head,
body.dark
  .executive-demand-drawer__head {
  border-color:
    var(--ed-border-strong);

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


[data-theme="dark"]
  .executive-demand-drawer__body,
.dark
  .executive-demand-drawer__body,
body.dark
  .executive-demand-drawer__body {
  background:
    var(--ed-bg);

  scrollbar-color:
    rgba(
      255,
      255,
      255,
      0.24
    )
    transparent;
}


/* =========================================================
   94. DARK · DRAWER ICON
   ========================================================= */

[data-theme="dark"]
  .executive-demand-drawer__icon,
.dark
  .executive-demand-drawer__icon,
body.dark
  .executive-demand-drawer__icon {
  border-color:
    #f2f2f2;

  background:
    #f2f2f2;

  color:
    #101010;
}


/* =========================================================
   95. DARK · DRAWER SECTIONS
   ========================================================= */

[data-theme="dark"]
  .executive-demand-detail-summary,
.dark
  .executive-demand-detail-summary,
body.dark
  .executive-demand-detail-summary,

[data-theme="dark"]
  .executive-demand-drawer-section,
.dark
  .executive-demand-drawer-section,
body.dark
  .executive-demand-drawer-section,

[data-theme="dark"]
  .executive-demand-detail-channel,
.dark
  .executive-demand-detail-channel,
body.dark
  .executive-demand-detail-channel,

[data-theme="dark"]
  .executive-demand-client-overview
  article,
.dark
  .executive-demand-client-overview
  article,
body.dark
  .executive-demand-client-overview
  article,

[data-theme="dark"]
  .executive-demand-client-product,
.dark
  .executive-demand-client-product,
body.dark
  .executive-demand-client-product {
  background:
    var(--ed-surface);

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


/* =========================================================
   96. DARK · DRAWER HOVERS
   ========================================================= */

[data-theme="dark"]
  .executive-demand-detail-channel:hover,
.dark
  .executive-demand-detail-channel:hover,
body.dark
  .executive-demand-detail-channel:hover,

[data-theme="dark"]
  .executive-demand-client-overview
  article:hover,
.dark
  .executive-demand-client-overview
  article:hover,
body.dark
  .executive-demand-client-overview
  article:hover,

[data-theme="dark"]
  .executive-demand-client-product:hover,
.dark
  .executive-demand-client-product:hover,
body.dark
  .executive-demand-client-product:hover {
  background:
    var(--ed-surface-hover);
}


/* =========================================================
   97. DARK · TOAST
   ========================================================= */

[data-theme="dark"]
  .executive-demand-toast,
.dark
  .executive-demand-toast,
body.dark
  .executive-demand-toast {
  border-color:
    rgba(
      255,
      255,
      255,
      0.18
    );

  background:
    #111111;

  color:
    #f7f7f7;

  box-shadow:
    0
    16px
    45px
    rgba(
      0,
      0,
      0,
      0.42
    );
}


[data-theme="dark"]
  .executive-demand-toast__icon,
.dark
  .executive-demand-toast__icon,
body.dark
  .executive-demand-toast__icon {
  border-color:
    rgba(
      255,
      255,
      255,
      0.12
    );

  background:
    #181818;
}


[data-theme="dark"]
  .executive-demand-toast__body
  strong,
.dark
  .executive-demand-toast__body
  strong,
body.dark
  .executive-demand-toast__body
  strong {
  color:
    #f7f7f7;
}


[data-theme="dark"]
  .executive-demand-toast__body
  p,
.dark
  .executive-demand-toast__body
  p,
body.dark
  .executive-demand-toast__body
  p {
  color:
    #b4b4b4;
}


/* =========================================================
   98. LIGHT MODE · REFUERZO TIPOGRÁFICO

   Letras más negras y marcadas.
   ========================================================= */

:root:not([data-theme="dark"])
  .executive-demand-page
  h1,
:root:not([data-theme="dark"])
  .executive-demand-page
  h2,
:root:not([data-theme="dark"])
  .executive-demand-page
  h3,
:root:not([data-theme="dark"])
  .executive-demand-page
  h4,
:root:not([data-theme="dark"])
  .executive-demand-page
  strong {
  color:
    #090909;
}


:root:not([data-theme="dark"])
  .executive-demand-table
  td {
  color:
    #252525;
}


:root:not([data-theme="dark"])
  .executive-demand-table
  td
  strong {
  color:
    #080808;
}


:root:not([data-theme="dark"])
  .executive-demand-brand__body
  p,
:root:not([data-theme="dark"])
  .executive-demand-section-heading
  p,
:root:not([data-theme="dark"])
  .executive-demand-panel__head
  p {
  color:
    #3e3e3a;
}


:root:not([data-theme="dark"])
  .executive-demand-field
  > span,
:root:not([data-theme="dark"])
  .executive-demand-panel__controls
  label
  > span {
  color:
    #4e4e49;
}


/* =========================================================
   99. DIVISIONES PREMIUM
   ========================================================= */

.executive-demand-panel,
.executive-demand-filters,
.executive-demand-head,
.executive-demand-snapshot {
  outline:
    1px
    solid
    transparent;

  outline-offset:
    -1px;
}


.executive-demand-table
  tbody
  tr {
  position:
    relative;
}


.executive-demand-table
  tbody
  tr::after {
  content:
    "";

  position:
    absolute;

  left:
    15px;

  right:
    15px;

  bottom:
    0;

  height:
    1px;

  background:
    var(--ed-border-soft);

  pointer-events:
    none;
}


.executive-demand-table
  tbody
  tr:last-child::after {
  display:
    none;
}


/* =========================================================
   100. REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {
  .executive-demand-page *,
  .executive-demand-page *::before,
  .executive-demand-page *::after,
  .executive-demand-drawer *,
  .executive-demand-drawer *::before,
  .executive-demand-drawer *::after,
  .executive-demand-toast {
    animation-duration:
      0.01ms
      !important;

    animation-delay:
      0ms
      !important;

    animation-iteration-count:
      1
      !important;

    transition-duration:
      0.01ms
      !important;

    transition-delay:
      0ms
      !important;

    scroll-behavior:
      auto
      !important;
  }
}


/* =========================================================
   FIN
   ========================================================= *//* =========================================================
   FIX · MODO CLARO
   TIPOGRAFÍA MÁS NEGRA Y MARCADA
   ========================================================= */

:root:not([data-theme="dark"])
  .executive-demand-page {
  --ed-text:
    #050505;

  --ed-text-secondary:
    #111111;

  --ed-text-soft:
    #242424;

  --ed-muted:
    #494949;

  --ed-muted-2:
    #666666;

  --ed-muted-3:
    #858585;
}


/* =========================================================
   TÍTULOS
   ========================================================= */

:root:not([data-theme="dark"])
  .executive-demand-page h1,
:root:not([data-theme="dark"])
  .executive-demand-page h2,
:root:not([data-theme="dark"])
  .executive-demand-page h3,
:root:not([data-theme="dark"])
  .executive-demand-page h4 {
  color:
    #000000;

  font-weight:
    850;
}


/* =========================================================
   STRONG / VALORES
   ========================================================= */

:root:not([data-theme="dark"])
  .executive-demand-page strong,
:root:not([data-theme="dark"])
  .executive-demand-page b {
  color:
    #050505;

  font-weight:
    800;
}


/* =========================================================
   TEXTOS GENERALES
   ========================================================= */

:root:not([data-theme="dark"])
  .executive-demand-page p {
  color:
    #303030;

  font-weight:
    590;
}


/* =========================================================
   SUBTÍTULOS / LABELS
   ========================================================= */

:root:not([data-theme="dark"])
  .executive-demand-brand__body > span,
:root:not([data-theme="dark"])
  .executive-demand-section-heading span,
:root:not([data-theme="dark"])
  .executive-demand-panel__head > div:first-child > span,
:root:not([data-theme="dark"])
  .executive-demand-field > span,
:root:not([data-theme="dark"])
  .executive-demand-panel__controls label > span,
:root:not([data-theme="dark"])
  .executive-demand-period__main > div:first-child > span {
  color:
    #3d3d3d;

  font-weight:
    850;
}


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

:root:not([data-theme="dark"])
  .executive-demand-brand__body h1 {
  color:
    #000000;

  font-weight:
    860;
}


:root:not([data-theme="dark"])
  .executive-demand-brand__body p {
  color:
    #292929;

  font-weight:
    600;
}


:root:not([data-theme="dark"])
  .executive-demand-head-stat span {
  color:
    #444444;

  font-weight:
    820;
}


:root:not([data-theme="dark"])
  .executive-demand-head-stat strong {
  color:
    #050505;

  font-weight:
    820;
}


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

:root:not([data-theme="dark"])
  .executive-demand-field input,
:root:not([data-theme="dark"])
  .executive-demand-field select,
:root:not([data-theme="dark"])
  .executive-demand-panel__controls select {
  color:
    #090909;

  font-weight:
    680;
}


:root:not([data-theme="dark"])
  .executive-demand-field input::placeholder {
  color:
    #666666;

  font-weight:
    580;
}


/* =========================================================
   PRESETS
   ========================================================= */

:root:not([data-theme="dark"])
  .executive-demand-preset {
  color:
    #434343;

  font-weight:
    730;
}


:root:not([data-theme="dark"])
  .executive-demand-preset.is-active {
  color:
    #ffffff;

  font-weight:
    820;
}


/* =========================================================
   SECCIONES
   ========================================================= */

:root:not([data-theme="dark"])
  .executive-demand-section-heading h2 {
  color:
    #000000;

  font-weight:
    850;
}


:root:not([data-theme="dark"])
  .executive-demand-section-heading p {
  color:
    #303030;

  font-weight:
    590;
}


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

:root:not([data-theme="dark"])
  .executive-demand-kpi__body > span {
  color:
    #333333;

  font-weight:
    700;
}


:root:not([data-theme="dark"])
  .executive-demand-kpi__body > strong {
  color:
    #000000;

  font-weight:
    860;
}


:root:not([data-theme="dark"])
  .executive-demand-kpi__body > strong.is-text {
  color:
    #050505;

  font-weight:
    830;
}


:root:not([data-theme="dark"])
  .executive-demand-kpi__body p {
  color:
    #454545;

  font-weight:
    590;
}


:root:not([data-theme="dark"])
  .executive-demand-kpi__tag {
  color:
    #454545;

  font-weight:
    820;
}


/* =========================================================
   SNAPSHOT
   ========================================================= */

:root:not([data-theme="dark"])
  .executive-demand-snapshot__item small {
  color:
    #404040;

  font-weight:
    820;
}


:root:not([data-theme="dark"])
  .executive-demand-snapshot__item strong {
  color:
    #000000;

  font-weight:
    850;
}


:root:not([data-theme="dark"])
  .executive-demand-snapshot__item > div > span {
  color:
    #414141;

  font-weight:
    590;
}


/* =========================================================
   CANALES
   ========================================================= */

:root:not([data-theme="dark"])
  .executive-demand-channel__head > div > span {
  color:
    #414141;

  font-weight:
    820;
}


:root:not([data-theme="dark"])
  .executive-demand-channel__head > div > strong {
  color:
    #000000;

  font-weight:
    840;
}


:root:not([data-theme="dark"])
  .executive-demand-channel__metrics span {
  color:
    #444444;

  font-weight:
    820;
}


:root:not([data-theme="dark"])
  .executive-demand-channel__metrics strong {
  color:
    #000000;

  font-weight:
    850;
}


:root:not([data-theme="dark"])
  .executive-demand-channel__share span {
  color:
    #333333;

  font-weight:
    680;
}


:root:not([data-theme="dark"])
  .executive-demand-channel__share strong {
  color:
    #000000;

  font-weight:
    840;
}


:root:not([data-theme="dark"])
  .executive-demand-channel__leader small {
  color:
    #464646;

  font-weight:
    820;
}


:root:not([data-theme="dark"])
  .executive-demand-channel__leader strong {
  color:
    #050505;

  font-weight:
    820;
}


:root:not([data-theme="dark"])
  .executive-demand-channel__leader span {
  color:
    #414141;

  font-weight:
    580;
}


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

:root:not([data-theme="dark"])
  .executive-demand-panel__head h3 {
  color:
    #000000;

  font-weight:
    850;
}


:root:not([data-theme="dark"])
  .executive-demand-panel__head p {
  color:
    #303030;

  font-weight:
    590;
}


/* =========================================================
   TABLAS
   ========================================================= */

:root:not([data-theme="dark"])
  .executive-demand-table th {
  color:
    #343434;

  font-weight:
    850;
}


:root:not([data-theme="dark"])
  .executive-demand-table td {
  color:
    #181818;

  font-weight:
    640;
}


:root:not([data-theme="dark"])
  .executive-demand-table td strong,
:root:not([data-theme="dark"])
  .executive-demand-number-strong {
  color:
    #000000;

  font-weight:
    850;
}


:root:not([data-theme="dark"])
  .executive-demand-product-cell strong,
:root:not([data-theme="dark"])
  .executive-demand-client-cell strong {
  color:
    #000000;

  font-weight:
    820;
}


:root:not([data-theme="dark"])
  .executive-demand-product-cell span,
:root:not([data-theme="dark"])
  .executive-demand-client-cell span {
  color:
    #3d3d3d;

  font-weight:
    590;
}


/* =========================================================
   PAGINACIÓN
   ========================================================= */

:root:not([data-theme="dark"])
  .executive-demand-pagination > span,
:root:not([data-theme="dark"])
  .executive-demand-pagination > div > span {
  color:
    #3c3c3c;

  font-weight:
    650;
}


:root:not([data-theme="dark"])
  .executive-demand-pagination > div > span strong {
  color:
    #000000;

  font-weight:
    850;
}


/* =========================================================
   GRÁFICO
   ========================================================= */

:root:not([data-theme="dark"])
  .executive-demand-chart__labels span {
  color:
    #3b3b3b;

  font-weight:
    690;
}


:root:not([data-theme="dark"])
  .executive-demand-chart-stats span {
  color:
    #414141;

  font-weight:
    820;
}


:root:not([data-theme="dark"])
  .executive-demand-chart-stats strong {
  color:
    #000000;

  font-weight:
    850;
}


/* =========================================================
   INSIGHTS
   ========================================================= */

:root:not([data-theme="dark"])
  .executive-demand-insight__meta span {
  color:
    #414141;

  font-weight:
    830;
}


:root:not([data-theme="dark"])
  .executive-demand-insight > div > strong {
  color:
    #000000;

  font-weight:
    830;
}


:root:not([data-theme="dark"])
  .executive-demand-insight p {
  color:
    #333333;

  font-weight:
    580;
}


/* =========================================================
   LÍDERES
   ========================================================= */

:root:not([data-theme="dark"])
  .executive-demand-leader small {
  color:
    #414141;

  font-weight:
    820;
}


:root:not([data-theme="dark"])
  .executive-demand-leader strong {
  color:
    #000000;

  font-weight:
    820;
}


:root:not([data-theme="dark"])
  .executive-demand-leader span {
  color:
    #3e3e3e;

  font-weight:
    580;
}


:root:not([data-theme="dark"])
  .executive-demand-leader b {
  color:
    #000000;

  font-weight:
    860;
}


/* =========================================================
   DRAWER · MODO CLARO
   ========================================================= */

:root:not([data-theme="dark"])
  .executive-demand-drawer__identity h3 {
  color:
    #000000;

  font-weight:
    850;
}


:root:not([data-theme="dark"])
  .executive-demand-drawer__identity p {
  color:
    #333333;

  font-weight:
    590;
}


:root:not([data-theme="dark"])
  .executive-demand-detail-summary span,
:root:not([data-theme="dark"])
  .executive-demand-drawer-section__head span {
  color:
    #414141;

  font-weight:
    830;
}


:root:not([data-theme="dark"])
  .executive-demand-detail-summary strong,
:root:not([data-theme="dark"])
  .executive-demand-drawer-section__head h4 {
  color:
    #000000;

  font-weight:
    850;
}


:root:not([data-theme="dark"])
  .executive-demand-client-overview small {
  color:
    #424242;

  font-weight:
    820;
}


:root:not([data-theme="dark"])
  .executive-demand-client-overview strong {
  color:
    #000000;

  font-weight:
    820;
}


:root:not([data-theme="dark"])
  .executive-demand-client-overview article > div > span {
  color:
    #3d3d3d;

  font-weight:
    590;
}


:root:not([data-theme="dark"])
  .executive-demand-client-product__body strong,
:root:not([data-theme="dark"])
  .executive-demand-client-product__metrics strong {
  color:
    #000000;

  font-weight:
    830;
}


:root:not([data-theme="dark"])
  .executive-demand-client-product__body > span,
:root:not([data-theme="dark"])
  .executive-demand-client-product__metrics span,
:root:not([data-theme="dark"])
  .executive-demand-client-product__metrics small {
  color:
    #3d3d3d;

  font-weight:
    590;
}/* =========================================================
   FIX · GRÁFICO EXECUTIVE
   MÁS SUAVE + ANIMADO + PREMIUM
   ========================================================= */


/* =========================================================
   CONTENEDOR
   ========================================================= */

.executive-demand-chart {
  position:
    relative;

  overflow:
    hidden;

  background:
    linear-gradient(
      180deg,
      var(--ed-surface)
      0%,
      var(--ed-surface-subtle)
      100%
    );
}


.executive-demand-chart::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      transparent
      0%,
      rgba(
        10,
        10,
        10,
        0.018
      )
      50%,
      transparent
      100%
    );

  opacity:
    0.8;
}


/* =========================================================
   VIEWPORT
   ========================================================= */

.executive-demand-chart__viewport {
  position:
    relative;

  z-index:
    1;

  padding:
    10px
    4px
    30px;

  animation:
    executiveDemandChartViewportIn
    480ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )
    both;
}


@keyframes executiveDemandChartViewportIn {
  from {
    opacity:
      0;

    transform:
      translateY(
        8px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}


/* =========================================================
   SVG
   ========================================================= */

.executive-demand-chart__svg {
  width:
    100%;

  height:
    270px;

  overflow:
    visible;
}


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

.executive-demand-chart__grid-line {
  stroke:
    rgba(
      10,
      10,
      10,
      0.065
    );

  stroke-width:
    1;

  stroke-dasharray:
    3
    6;

  vector-effect:
    non-scaling-stroke;

  opacity:
    0;

  animation:
    executiveDemandChartGridIn
    380ms
    ease
    forwards;
}


.executive-demand-chart__grid-line:nth-child(1) {
  animation-delay:
    60ms;
}


.executive-demand-chart__grid-line:nth-child(2) {
  animation-delay:
    110ms;
}


.executive-demand-chart__grid-line:nth-child(3) {
  animation-delay:
    160ms;
}


@keyframes executiveDemandChartGridIn {
  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}


/* =========================================================
   LÍNEA
   ========================================================= */

.executive-demand-chart__line {
  fill:
    none;

  stroke:
    var(--ed-black);

  stroke-width:
    2;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  vector-effect:
    non-scaling-stroke;

  stroke-dasharray:
    1800;

  stroke-dashoffset:
    1800;

  filter:
    none;

  animation:
    executiveDemandChartLineDraw
    950ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )
    120ms
    forwards;
}


@keyframes executiveDemandChartLineDraw {
  from {
    stroke-dashoffset:
      1800;

    opacity:
      0.35;
  }

  to {
    stroke-dashoffset:
      0;

    opacity:
      1;
  }
}


/* =========================================================
   PUNTOS
   ========================================================= */

.executive-demand-chart__point {
  fill:
    var(--ed-surface);

  stroke:
    var(--ed-black);

  stroke-width:
    1.7;

  vector-effect:
    non-scaling-stroke;

  opacity:
    0;

  transform-box:
    fill-box;

  transform-origin:
    center;

  animation:
    executiveDemandChartPointIn
    320ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )
    forwards;

  transition:
    r
    160ms
    ease,
    fill
    160ms
    ease,
    stroke-width
    160ms
    ease,
    opacity
    160ms
    ease;
}


.executive-demand-chart__point:nth-of-type(1) {
  animation-delay:
    360ms;
}


.executive-demand-chart__point:nth-of-type(2) {
  animation-delay:
    390ms;
}


.executive-demand-chart__point:nth-of-type(3) {
  animation-delay:
    420ms;
}


.executive-demand-chart__point:nth-of-type(4) {
  animation-delay:
    450ms;
}


.executive-demand-chart__point:nth-of-type(5) {
  animation-delay:
    480ms;
}


.executive-demand-chart__point:nth-of-type(6) {
  animation-delay:
    510ms;
}


.executive-demand-chart__point:nth-of-type(7) {
  animation-delay:
    540ms;
}


.executive-demand-chart__point:nth-of-type(8) {
  animation-delay:
    570ms;
}


.executive-demand-chart__point:nth-of-type(n + 9) {
  animation-delay:
    600ms;
}


@keyframes executiveDemandChartPointIn {
  from {
    opacity:
      0;

    transform:
      scale(
        0.5
      );
  }

  to {
    opacity:
      1;

    transform:
      scale(
        1
      );
  }
}


.executive-demand-chart__point:hover {
  r:
    6.2px;

  fill:
    var(--ed-black);

  stroke-width:
    2;
}


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

.executive-demand-chart__labels {
  height:
    26px;
}


.executive-demand-chart__labels span {
  bottom:
    1px;

  color:
    var(--ed-muted);

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    -0.005em;

  opacity:
    0;

  animation:
    executiveDemandChartLabelIn
    350ms
    ease
    520ms
    forwards;

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


@keyframes executiveDemandChartLabelIn {
  from {
    opacity:
      0;

    transform:
      translateX(
        -50%
      )
      translateY(
        4px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateX(
        -50%
      )
      translateY(
        0
      );
  }
}


/* =========================================================
   STATS
   ========================================================= */

.executive-demand-chart-stats {
  background:
    var(--ed-surface-subtle);
}


.executive-demand-chart-stats article {
  position:
    relative;

  transition:
    background-color
    160ms
    ease;
}


.executive-demand-chart-stats article:hover {
  background:
    var(--ed-surface);
}


.executive-demand-chart-stats article::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    100%;

  height:
    1px;

  background:
    transparent;

  transition:
    background-color
    160ms
    ease;
}


.executive-demand-chart-stats article:hover::before {
  background:
    var(--ed-black);
}


.executive-demand-chart-stats strong {
  transition:
    transform
    160ms
    ease;
}


.executive-demand-chart-stats article:hover strong {
  transform:
    translateY(
      -1px
    );
}


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

[data-theme="dark"]
  .executive-demand-chart,
.dark
  .executive-demand-chart,
body.dark
  .executive-demand-chart {
  background:
    linear-gradient(
      180deg,
      #111111
      0%,
      #0f0f0f
      100%
    );
}


[data-theme="dark"]
  .executive-demand-chart::before,
.dark
  .executive-demand-chart::before,
body.dark
  .executive-demand-chart::before {
  background:
    linear-gradient(
      90deg,
      transparent
      0%,
      rgba(
        255,
        255,
        255,
        0.015
      )
      50%,
      transparent
      100%
    );
}


[data-theme="dark"]
  .executive-demand-chart__grid-line,
.dark
  .executive-demand-chart__grid-line,
body.dark
  .executive-demand-chart__grid-line {
  stroke:
    rgba(
      255,
      255,
      255,
      0.075
    );
}


[data-theme="dark"]
  .executive-demand-chart__line,
.dark
  .executive-demand-chart__line,
body.dark
  .executive-demand-chart__line {
  stroke:
    #efefef;
}


[data-theme="dark"]
  .executive-demand-chart__point,
.dark
  .executive-demand-chart__point,
body.dark
  .executive-demand-chart__point {
  fill:
    #111111;

  stroke:
    #efefef;
}


[data-theme="dark"]
  .executive-demand-chart__point:hover,
.dark
  .executive-demand-chart__point:hover,
body.dark
  .executive-demand-chart__point:hover {
  fill:
    #efefef;

  stroke:
    #ffffff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (
  max-width:
    900px
) {
  .executive-demand-chart__svg {
    height:
      230px;
  }


  .executive-demand-chart__viewport {
    padding-top:
      6px;
  }
}


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

@media (
  max-width:
    680px
) {
  .executive-demand-chart {
    padding:
      13px
      10px
      7px;
  }


  .executive-demand-chart__viewport {
    padding:
      5px
      0
      27px;
  }


  .executive-demand-chart__svg {
    height:
      205px;
  }


  .executive-demand-chart__line {
    stroke-width:
      1.8;
  }


  .executive-demand-chart__point {
    r:
      3.8px;
  }


  .executive-demand-chart__point:hover {
    r:
      5px;
  }
}


/* =========================================================
   MOBILE SMALL
   ========================================================= */

@media (
  max-width:
    480px
) {
  .executive-demand-chart__svg {
    height:
      180px;
  }


  .executive-demand-chart__labels span {
    font-size:
      7px;
  }
}


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

@media (
  prefers-reduced-motion:
    reduce
) {
  .executive-demand-chart__viewport,
  .executive-demand-chart__grid-line,
  .executive-demand-chart__line,
  .executive-demand-chart__point,
  .executive-demand-chart__labels span {
    animation:
      none
      !important;

    opacity:
      1
      !important;

    stroke-dashoffset:
      0
      !important;

    transform:
      none;
  }


  .executive-demand-chart__labels span {
    transform:
      translateX(
        -50%
      );
  }
}/* =========================================================
   FIX · BOTÓN EXPORTAR
   TEXTO BLANCO EN MODO CLARO
   ========================================================= */

:root:not([data-theme="dark"])
  .executive-demand-btn--primary {
  background:
    #090909 !important;

  border-color:
    #090909 !important;

  color:
    #ffffff !important;
}


:root:not([data-theme="dark"])
  .executive-demand-btn--primary span,
:root:not([data-theme="dark"])
  .executive-demand-btn--primary svg {
  color:
    #ffffff !important;

  stroke:
    currentColor !important;
}


:root:not([data-theme="dark"])
  .executive-demand-btn--primary:hover:not(:disabled) {
  background:
    #000000 !important;

  border-color:
    #000000 !important;

  color:
    #ffffff !important;
}


:root:not([data-theme="dark"])
  .executive-demand-btn--primary:hover:not(:disabled) span,
:root:not([data-theme="dark"])
  .executive-demand-btn--primary:hover:not(:disabled) svg {
  color:
    #ffffff !important;

  stroke:
    currentColor !important;
}


/* =========================================================
   DISABLED
   QUE SIGA LEYÉNDOSE
   ========================================================= */

:root:not([data-theme="dark"])
  .executive-demand-btn--primary:disabled {
  background:
    #1a1a1a !important;

  border-color:
    #1a1a1a !important;

  color:
    rgba(
      255,
      255,
      255,
      0.72
    ) !important;

  opacity:
    1 !important;
}


:root:not([data-theme="dark"])
  .executive-demand-btn--primary:disabled span,
:root:not([data-theme="dark"])
  .executive-demand-btn--primary:disabled svg {
  color:
    rgba(
      255,
      255,
      255,
      0.72
    ) !important;

  stroke:
    currentColor !important;
}