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

   WIRTZ HUB · DIRECCIÓN EJECUTIVA · LOGÍSTICA
   PARTE 1 DE 2

   REDISEÑO EJECUTIVO
   - CEO / Gerencia
   - Blanco y negro
   - Sin glow
   - Sin blur
   - Sin sombras decorativas
   - Minimalista
   - Premium
   - Responsive
   ========================================================= */

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

.executive-logistics-page {
  --executive-logistics-bg:
    var(
      --background,
      #f7f7f7
    );

  --executive-logistics-surface:
    var(
      --panel,
      #ffffff
    );

  --executive-logistics-surface-soft:
    var(
      --surface,
      #f5f5f5
    );

  --executive-logistics-surface-strong:
    #eeeeee;

  --executive-logistics-border:
    rgba(
      0,
      0,
      0,
      0.14
    );

  --executive-logistics-border-strong:
    rgba(
      0,
      0,
      0,
      0.24
    );

  --executive-logistics-text:
    var(
      --text,
      #111111
    );

  --executive-logistics-text-soft:
    var(
      --text-secondary,
      #555555
    );

  --executive-logistics-text-muted:
    var(
      --text-muted,
      #7b7b7b
    );

  --executive-logistics-inverse:
    #ffffff;

  --executive-logistics-positive:
    #111111;

  --executive-logistics-negative:
    #111111;

  --executive-logistics-warning:
    #111111;

  --executive-logistics-radius-xs:
    7px;

  --executive-logistics-radius-sm:
    9px;

  --executive-logistics-radius:
    12px;

  --executive-logistics-radius-lg:
    15px;

  --executive-logistics-transition:
    160ms
    ease;

  width:
    100%;

  min-width:
    0;

  padding:
    8px;

  box-sizing:
    border-box;

  background:
    transparent;

  color:
    var(
      --executive-logistics-text
    );

  font-family:
    "DM Sans",
    sans-serif;

  overflow-x:
    hidden;
}

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

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

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

.executive-logistics-page button {
  color:
    inherit;
}

.executive-logistics-page .icon {
  width:
    16px;

  height:
    16px;

  stroke-width:
    1.8;
}

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

@keyframes executiveLogisticsFadeUp {
  from {
    opacity:
      0;

    transform:
      translateY(
        4px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}

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

@keyframes executiveLogisticsToastIn {
  from {
    opacity:
      0;

    transform:
      translateY(
        6px
      );
  }

  to {
    opacity:
      1;

    transform:
      translateY(
        0
      );
  }
}

.executive-logistics-page .is-spinning {
  animation:
    executiveLogisticsSpin
    0.8s
    linear
    infinite;
}

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

.executive-logistics-head {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  width:
    100%;

  min-width:
    0;

  margin-bottom:
    8px;

  padding:
    14px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    var(
      --executive-logistics-radius-lg
    );

  background:
    var(
      --executive-logistics-surface
    );

  animation:
    executiveLogisticsFadeUp
    180ms
    ease
    both;
}

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

.executive-logistics-brand {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  min-width:
    0;

  flex:
    1;
}

.executive-logistics-brand__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0
    0
    40px;

  width:
    40px;

  height:
    40px;

  border:
    1px
    solid
    var(
      --executive-logistics-border-strong
    );

  border-radius:
    10px;

  background:
    var(
      --executive-logistics-text
    );

  color:
    var(
      --executive-logistics-inverse
    );
}

.executive-logistics-brand__icon .icon {
  width:
    18px;

  height:
    18px;
}

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

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

  margin-bottom:
    3px;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.08em;
}

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

  color:
    var(
      --executive-logistics-text
    );

  font-size:
    22px;

  font-weight:
    800;

  line-height:
    1.08;

  letter-spacing:
    -0.035em;
}

.executive-logistics-brand__body p {
  max-width:
    620px;

  margin:
    4px
    0
    0;

  color:
    var(
      --executive-logistics-text-soft
    );

  font-size:
    11px;

  line-height:
    1.4;
}

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

.executive-logistics-head__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;

  min-width:
    0;

  flex:
    0
    1
    auto;
}

/* =========================================================
   PERIOD CARD
   ========================================================= */

.executive-logistics-period-card {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    195px;

  min-height:
    36px;

  padding:
    6px
    9px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    9px;

  background:
    var(
      --executive-logistics-surface-soft
    );
}

.executive-logistics-period-card__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    27px;

  height:
    27px;

  flex:
    0
    0
    27px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    7px;

  background:
    var(
      --executive-logistics-surface
    );

  color:
    var(
      --executive-logistics-text-soft
    );
}

.executive-logistics-period-card__icon .icon {
  width:
    13px;

  height:
    13px;
}

.executive-logistics-period-card > div {
  min-width:
    0;
}

.executive-logistics-period-card small,
.executive-logistics-update span {
  display:
    block;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1.15;

  letter-spacing:
    0.055em;
}

.executive-logistics-period-card strong,
.executive-logistics-update strong {
  display:
    block;

  margin-top:
    2px;

  overflow:
    hidden;

  color:
    var(
      --executive-logistics-text
    );

  font-size:
    10px;

  font-weight:
    750;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.executive-logistics-update {
  min-width:
    110px;

  padding:
    2px
    7px;

  text-align:
    right;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.executive-logistics-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  min-height:
    34px;

  padding:
    0
    10px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    8px;

  background:
    var(
      --executive-logistics-surface
    );

  color:
    var(
      --executive-logistics-text
    );

  font-size:
    10px;

  font-weight:
    750;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    background
      var(
        --executive-logistics-transition
      ),
    border-color
      var(
        --executive-logistics-transition
      ),
    color
      var(
        --executive-logistics-transition
      ),
    opacity
      var(
        --executive-logistics-transition
      );
}

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

  background:
    var(
      --executive-logistics-surface-soft
    );
}

.executive-logistics-btn:disabled {
  opacity:
    0.48;

  cursor:
    not-allowed;
}

.executive-logistics-btn--primary {
  border-color:
    var(
      --executive-logistics-text
    );

  background:
    var(
      --executive-logistics-text
    );

  color:
    var(
      --executive-logistics-inverse
    );
}

.executive-logistics-btn--primary:hover:not(:disabled) {
  background:
    var(
      --executive-logistics-text
    );

  color:
    var(
      --executive-logistics-inverse
    );

  opacity:
    0.86;
}

.executive-logistics-btn--quiet {
  background:
    var(
      --executive-logistics-surface-soft
    );
}

.executive-logistics-btn--quiet.is-active {
  border-color:
    var(
      --executive-logistics-text
    );

  background:
    var(
      --executive-logistics-text
    );

  color:
    var(
      --executive-logistics-inverse
    );
}

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

.executive-logistics-filters {
  width:
    100%;

  min-width:
    0;

  margin-bottom:
    8px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    var(
      --executive-logistics-radius
    );

  background:
    var(
      --executive-logistics-surface
    );

  overflow:
    hidden;

  animation:
    executiveLogisticsFadeUp
    200ms
    ease
    both;
}

/* =========================================================
   FILTER BAR
   ========================================================= */

.executive-logistics-filter-bar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  min-width:
    0;

  padding:
    8px
    10px;
}

.executive-logistics-filter-bar__period {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;

  flex:
    1;
}

.executive-logistics-filter-bar__period > span {
  flex:
    0
    0
    auto;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.065em;
}

/* =========================================================
   PRESETS
   ========================================================= */

.executive-logistics-presets {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    4px;

  min-width:
    0;
}

.executive-logistics-preset {
  min-height:
    27px;

  padding:
    0
    8px;

  border:
    1px
    solid
    transparent;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(
      --executive-logistics-text-soft
    );

  font-size:
    9px;

  font-weight:
    700;

  cursor:
    pointer;

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

.executive-logistics-preset:hover {
  border-color:
    var(
      --executive-logistics-border
    );

  background:
    var(
      --executive-logistics-surface-soft
    );

  color:
    var(
      --executive-logistics-text
    );
}

.executive-logistics-preset.is-active {
  border-color:
    var(
      --executive-logistics-text
    );

  background:
    var(
      --executive-logistics-text
    );

  color:
    var(
      --executive-logistics-inverse
    );
}

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

.executive-logistics-filters__body {
  display:
    none;

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

  gap:
    8px;

  padding:
    10px;

  border-top:
    1px
    solid
    var(
      --executive-logistics-border
    );

  background:
    var(
      --executive-logistics-surface-soft
    );
}

.executive-logistics-filters__body.is-open {
  display:
    grid;
}

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

.executive-logistics-field {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  min-width:
    0;
}

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

.executive-logistics-field > span,
.executive-logistics-inline-select > span {
  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    8px;

  font-weight:
    750;

  line-height:
    1.2;
}

.executive-logistics-field input,
.executive-logistics-field select,
.executive-logistics-inline-select select {
  width:
    100%;

  min-width:
    0;

  height:
    32px;

  padding:
    0
    8px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    7px;

  outline:
    none;

  background:
    var(
      --executive-logistics-surface
    );

  color:
    var(
      --executive-logistics-text
    );

  font-size:
    9px;

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

.executive-logistics-field input:focus,
.executive-logistics-field select:focus,
.executive-logistics-inline-select select:focus {
  border-color:
    var(
      --executive-logistics-text
    );
}

.executive-logistics-field input::placeholder {
  color:
    var(
      --executive-logistics-text-muted
    );
}

/* =========================================================
   FILTER CHECKS
   ========================================================= */

.executive-logistics-filter-checks {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  grid-column:
    span
    3;

  gap:
    6px
    14px;

  min-width:
    0;
}

.executive-logistics-filter-checks label {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  color:
    var(
      --executive-logistics-text-soft
    );

  font-size:
    9px;

  font-weight:
    650;

  cursor:
    pointer;
}

.executive-logistics-filter-checks input {
  width:
    14px;

  height:
    14px;

  accent-color:
    #111111;
}

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

.executive-logistics-filter-actions {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    flex-end;

  grid-column:
    span
    2;

  gap:
    6px;
}

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

.executive-logistics-content {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  width:
    100%;

  min-width:
    0;
}

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

.executive-logistics-section-heading {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    12px;

  min-width:
    0;

  margin-bottom:
    7px;
}

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

.executive-logistics-section-heading > div > span {
  display:
    block;

  margin-bottom:
    2px;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.075em;
}

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

  color:
    var(
      --executive-logistics-text
    );

  font-size:
    17px;

  font-weight:
    800;

  line-height:
    1.15;

  letter-spacing:
    -0.025em;
}

.executive-logistics-section-heading p {
  max-width:
    680px;

  margin:
    3px
    0
    0;

  color:
    var(
      --executive-logistics-text-soft
    );

  font-size:
    9px;

  line-height:
    1.4;
}

/* =========================================================
   OVERVIEW
   ========================================================= */

.executive-logistics-overview {
  width:
    100%;

  min-width:
    0;

  padding:
    11px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    var(
      --executive-logistics-radius-lg
    );

  background:
    var(
      --executive-logistics-surface
    );
}

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

.executive-logistics-kpis {
  display:
    grid;

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

  gap:
    6px;

  width:
    100%;

  min-width:
    0;
}

.executive-logistics-kpi {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    stretch;

  min-width:
    0;

  min-height:
    132px;

  padding:
    11px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    10px;

  background:
    var(
      --executive-logistics-surface-soft
    );

  text-align:
    left;

  cursor:
    pointer;

  overflow:
    hidden;

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

.executive-logistics-kpi:hover {
  border-color:
    var(
      --executive-logistics-border-strong
    );

  background:
    var(
      --executive-logistics-surface
    );
}

.executive-logistics-kpi.is-active {
  border-color:
    var(
      --executive-logistics-text
    );

  background:
    var(
      --executive-logistics-surface
    );
}

.executive-logistics-kpi.is-active::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  right:
    10px;

  left:
    10px;

  height:
    2px;

  background:
    var(
      --executive-logistics-text
    );
}

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

.executive-logistics-kpi__head {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;
}

.executive-logistics-kpi__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    29px;

  height:
    29px;

  flex:
    0
    0
    29px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    7px;

  background:
    var(
      --executive-logistics-surface
    );

  color:
    var(
      --executive-logistics-text-soft
    );
}

.executive-logistics-kpi__icon .icon {
  width:
    13px;

  height:
    13px;
}

.executive-logistics-kpi__heading {
  min-width:
    0;
}

.executive-logistics-kpi__heading small {
  display:
    block;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    7px;

  font-weight:
    800;

  line-height:
    1.15;

  letter-spacing:
    0.065em;
}

.executive-logistics-kpi__heading strong {
  display:
    block;

  margin-top:
    1px;

  overflow:
    hidden;

  color:
    var(
      --executive-logistics-text
    );

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.executive-logistics-kpi__value {
  display:
    block;

  margin-top:
    12px;

  overflow:
    hidden;

  color:
    var(
      --executive-logistics-text
    );

  font-size:
    clamp(
      20px,
      1.7vw,
      28px
    );

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    -0.035em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.executive-logistics-kpi__detail {
  display:
    block;

  margin-top:
    5px;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    8px;

  line-height:
    1.3;
}

/* =========================================================
   KPI VARIATION
   ========================================================= */

.executive-logistics-kpi__variation {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  align-self:
    flex-start;

  margin-top:
    auto;

  padding-top:
    8px;

  color:
    var(
      --executive-logistics-text-soft
    );

  font-size:
    8px;
}

.executive-logistics-kpi__variation .icon {
  width:
    11px;

  height:
    11px;
}

.executive-logistics-kpi__variation strong {
  color:
    inherit;

  font-size:
    8px;

  font-weight:
    800;
}

.executive-logistics-kpi__variation small {
  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    7px;
}

.executive-logistics-kpi__variation.is-positive,
.executive-logistics-kpi__variation.is-negative,
.executive-logistics-kpi__variation.is-neutral {
  color:
    var(
      --executive-logistics-text
    );
}

/* =========================================================
   SECONDARY KPI
   ========================================================= */

.executive-logistics-mini-kpis {
  display:
    grid;

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

  gap:
    6px;

  margin-top:
    6px;
}

.executive-logistics-mini-kpi {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;

  padding:
    8px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    9px;

  background:
    var(
      --executive-logistics-surface
    );

  text-align:
    left;

  cursor:
    pointer;

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

.executive-logistics-mini-kpi:hover,
.executive-logistics-mini-kpi.is-active {
  border-color:
    var(
      --executive-logistics-border-strong
    );

  background:
    var(
      --executive-logistics-surface-soft
    );
}

.executive-logistics-mini-kpi__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    29px;

  height:
    29px;

  flex:
    0
    0
    29px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    7px;

  background:
    var(
      --executive-logistics-surface-soft
    );

  color:
    var(
      --executive-logistics-text-soft
    );
}

.executive-logistics-mini-kpi__icon .icon {
  width:
    13px;

  height:
    13px;
}

.executive-logistics-mini-kpi__body {
  min-width:
    0;
}

.executive-logistics-mini-kpi__body small,
.executive-logistics-mini-kpi__body strong,
.executive-logistics-mini-kpi__body > span {
  display:
    block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.executive-logistics-mini-kpi__body small {
  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    7px;

  font-weight:
    750;
}

.executive-logistics-mini-kpi__body strong {
  margin-top:
    1px;

  color:
    var(
      --executive-logistics-text
    );

  font-size:
    11px;

  font-weight:
    800;
}

.executive-logistics-mini-kpi__body > span {
  margin-top:
    1px;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    7px;
}

/* =========================================================
   SNAPSHOT
   ========================================================= */

.executive-logistics-snapshot {
  display:
    grid;

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

  gap:
    6px;

  width:
    100%;

  min-width:
    0;
}

.executive-logistics-snapshot__item {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;

  padding:
    9px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    10px;

  background:
    var(
      --executive-logistics-surface
    );
}

.executive-logistics-snapshot__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    31px;

  height:
    31px;

  flex:
    0
    0
    31px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    8px;

  background:
    var(
      --executive-logistics-surface-soft
    );

  color:
    var(
      --executive-logistics-text-soft
    );
}

.executive-logistics-snapshot__icon .icon {
  width:
    13px;

  height:
    13px;
}

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

.executive-logistics-snapshot__item small,
.executive-logistics-snapshot__item strong,
.executive-logistics-snapshot__item > div > span {
  display:
    block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.executive-logistics-snapshot__item small {
  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    7px;

  font-weight:
    750;
}

.executive-logistics-snapshot__item strong {
  margin-top:
    2px;

  color:
    var(
      --executive-logistics-text
    );

  font-size:
    10px;

  font-weight:
    800;
}

.executive-logistics-snapshot__item > div > span {
  margin-top:
    2px;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    7px;
}

/* =========================================================
   GENERIC GRID
   ========================================================= */

.executive-logistics-grid {
  display:
    grid;

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

  gap:
    8px;

  width:
    100%;

  min-width:
    0;
}

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

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

  min-width:
    0;

  padding:
    11px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    var(
      --executive-logistics-radius
    );

  background:
    var(
      --executive-logistics-surface
    );

  animation:
    executiveLogisticsFadeUp
    200ms
    ease
    both;
}

.executive-logistics-panel__head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;

  min-width:
    0;

  margin-bottom:
    9px;
}

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

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

  margin-bottom:
    2px;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    7px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.075em;
}

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

  color:
    var(
      --executive-logistics-text
    );

  font-size:
    13px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    -0.015em;
}

.executive-logistics-panel__head p {
  max-width:
    560px;

  margin:
    3px
    0
    0;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    8px;

  line-height:
    1.35;
}

.executive-logistics-panel__badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    23px;

  padding:
    0
    7px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    999px;

  background:
    var(
      --executive-logistics-surface-soft
    );

  color:
    var(
      --executive-logistics-text-soft
    );

  font-size:
    7px;

  font-weight:
    750;

  white-space:
    nowrap;
}

.executive-logistics-panel__badge.is-warning {
  border-color:
    var(
      --executive-logistics-border-strong
    );

  color:
    var(
      --executive-logistics-text
    );
}

.executive-logistics-panel__actions {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    4px;
}

.executive-logistics-panel__actions
.executive-logistics-btn {
  min-height:
    28px;

  padding:
    0
    8px;

  font-size:
    8px;
}

/* =========================================================
   EXECUTIVE READING
   ========================================================= */

.executive-logistics-reading,
.executive-logistics-distribution-section,
.executive-logistics-operational-section {
  width:
    100%;

  min-width:
    0;
}

.executive-logistics-reading__grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.25fr
    )
    minmax(
      0,
      0.75fr
    );

  gap:
    8px;
}

/* =========================================================
   INSIGHTS / ALERTS
   ========================================================= */

.executive-logistics-insights,
.executive-logistics-alerts {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}

.executive-logistics-insight,
.executive-logistics-alert {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    8px;

  min-width:
    0;

  padding:
    8px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    8px;

  background:
    var(
      --executive-logistics-surface-soft
    );
}

.executive-logistics-insight__icon,
.executive-logistics-alert__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    27px;

  height:
    27px;

  flex:
    0
    0
    27px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    7px;

  background:
    var(
      --executive-logistics-surface
    );

  color:
    var(
      --executive-logistics-text
    );
}

.executive-logistics-insight__icon .icon,
.executive-logistics-alert__icon .icon {
  width:
    12px;

  height:
    12px;
}

.executive-logistics-insight__body,
.executive-logistics-alert__body {
  min-width:
    0;

  flex:
    1;
}

.executive-logistics-insight__body strong,
.executive-logistics-alert__body strong {
  display:
    block;

  color:
    var(
      --executive-logistics-text
    );

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.3;
}

.executive-logistics-insight__body p,
.executive-logistics-alert__body p {
  margin:
    3px
    0
    0;

  color:
    var(
      --executive-logistics-text-soft
    );

  font-size:
    8px;

  line-height:
    1.4;
}

.executive-logistics-alert__body > div {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;
}

.executive-logistics-alert__body > div > span {
  flex:
    0
    0
    auto;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    6px;

  font-weight:
    800;

  letter-spacing:
    0.055em;
}

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

.executive-logistics-empty,
.executive-logistics-state {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    180px;

  padding:
    20px;

  text-align:
    center;
}

.executive-logistics-empty.is-compact {
  min-height:
    112px;
}

.executive-logistics-empty > .icon,
.executive-logistics-state__icon {
  width:
    27px;

  height:
    27px;

  margin-bottom:
    7px;

  color:
    var(
      --executive-logistics-text-muted
    );
}

.executive-logistics-state__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;
}

.executive-logistics-state__icon .icon {
  width:
    25px;

  height:
    25px;
}

.executive-logistics-empty strong,
.executive-logistics-state strong {
  color:
    var(
      --executive-logistics-text
    );

  font-size:
    11px;

  font-weight:
    800;
}

.executive-logistics-empty p,
.executive-logistics-state p {
  max-width:
    400px;

  margin:
    4px
    0
    0;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    8px;

  line-height:
    1.45;
}

.executive-logistics-state {
  min-height:
    300px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    var(
      --executive-logistics-radius
    );

  background:
    var(
      --executive-logistics-surface
    );
}

.executive-logistics-state
.executive-logistics-btn {
  margin-top:
    12px;
}

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

.executive-logistics-evolution {
  overflow:
    hidden;
}

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

  min-width:
    0;
}

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

.executive-logistics-chart__headline {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    12px;

  min-width:
    0;

  padding:
    9px
    10px;

  margin-bottom:
    7px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    9px;

  background:
    var(
      --executive-logistics-surface-soft
    );
}

.executive-logistics-chart__headline-value {
  min-width:
    0;
}

.executive-logistics-chart__headline-value > span {
  display:
    block;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    7px;

  font-weight:
    750;
}

.executive-logistics-chart__headline-value > strong {
  display:
    block;

  margin-top:
    2px;

  color:
    var(
      --executive-logistics-text
    );

  font-size:
    23px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    -0.035em;
}

.executive-logistics-chart__headline-value > small {
  display:
    block;

  margin-top:
    3px;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    7px;
}

.executive-logistics-chart__trend {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  flex:
    0
    0
    auto;
}

.executive-logistics-chart__trend > span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    27px;

  height:
    27px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    7px;

  background:
    var(
      --executive-logistics-surface
    );
}

.executive-logistics-chart__trend .icon {
  width:
    12px;

  height:
    12px;
}

.executive-logistics-chart__trend > div {
  text-align:
    right;
}

.executive-logistics-chart__trend strong,
.executive-logistics-chart__trend small {
  display:
    block;
}

.executive-logistics-chart__trend strong {
  color:
    var(
      --executive-logistics-text
    );

  font-size:
    11px;

  font-weight:
    800;
}

.executive-logistics-chart__trend small {
  margin-top:
    1px;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    7px;
}

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

.executive-logistics-chart__viewport {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  padding-bottom:
    24px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    9px;

  background:
    var(
      --executive-logistics-surface
    );

  overflow:
    hidden;
}

.executive-logistics-chart__svg {
  display:
    block;

  width:
    100%;

  height:
    255px;

  overflow:
    visible;
}

.executive-logistics-chart__grid {
  stroke:
    var(
      --executive-logistics-border
    );

  stroke-width:
    1;

  vector-effect:
    non-scaling-stroke;
}

.executive-logistics-chart__line {
  fill:
    none;

  stroke:
    var(
      --executive-logistics-text
    );

  stroke-width:
    2;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  vector-effect:
    non-scaling-stroke;
}

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

  stroke:
    var(
      --executive-logistics-text
    );

  stroke-width:
    2;

  vector-effect:
    non-scaling-stroke;

  cursor:
    pointer;

  transition:
    r
      var(
        --executive-logistics-transition
      );
}

.executive-logistics-chart__point:hover {
  r:
    6;
}

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

.executive-logistics-chart__labels {
  position:
    absolute;

  right:
    0;

  bottom:
    5px;

  left:
    0;

  height:
    16px;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    7px;
}

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

  bottom:
    0;

  transform:
    translateX(
      -50%
    );

  white-space:
    nowrap;
}

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

.executive-logistics-chart__summary {
  display:
    grid;

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

  gap:
    5px;

  margin-top:
    6px;
}

.executive-logistics-chart__summary article {
  min-width:
    0;

  padding:
    7px
    8px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    8px;

  background:
    var(
      --executive-logistics-surface-soft
    );
}

.executive-logistics-chart__summary span,
.executive-logistics-chart__summary strong,
.executive-logistics-chart__summary small {
  display:
    block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.executive-logistics-chart__summary span {
  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    7px;
}

.executive-logistics-chart__summary strong {
  margin-top:
    2px;

  color:
    var(
      --executive-logistics-text
    );

  font-size:
    11px;

  font-weight:
    800;
}

.executive-logistics-chart__summary small {
  margin-top:
    1px;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    7px;
}

/* =========================================================
   DISTRIBUTION
   ========================================================= */

.executive-logistics-distribution-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}

.executive-logistics-distribution {
  min-width:
    0;

  padding:
    8px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    8px;

  background:
    var(
      --executive-logistics-surface-soft
    );
}

.executive-logistics-distribution__head {
  display:
    grid;

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

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;
}

.executive-logistics-distribution__rank {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    24px;

  height:
    24px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    7px;

  background:
    var(
      --executive-logistics-surface
    );

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    7px;

  font-weight:
    800;
}

.executive-logistics-distribution__identity {
  min-width:
    0;
}

.executive-logistics-distribution__identity strong,
.executive-logistics-distribution__identity small {
  display:
    block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.executive-logistics-distribution__identity strong {
  color:
    var(
      --executive-logistics-text
    );

  font-size:
    9px;

  font-weight:
    800;
}

.executive-logistics-distribution__identity small {
  margin-top:
    1px;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    7px;
}

.executive-logistics-distribution__percentage {
  color:
    var(
      --executive-logistics-text
    );

  font-size:
    10px;

  font-weight:
    800;

  white-space:
    nowrap;
}

/* =========================================================
   DISTRIBUTION TRACK
   ========================================================= */

.executive-logistics-distribution__track {
  width:
    100%;

  height:
    4px;

  margin-top:
    7px;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    var(
      --executive-logistics-border
    );
}

.executive-logistics-distribution__track span {
  display:
    block;

  height:
    100%;

  border-radius:
    inherit;

  background:
    var(
      --executive-logistics-text
    );
}

/* =========================================================
   DISTRIBUTION META
   ========================================================= */

.executive-logistics-distribution__meta {
  display:
    grid;

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

  gap:
    5px;

  margin-top:
    7px;
}

.executive-logistics-distribution__meta > span {
  min-width:
    0;
}

.executive-logistics-distribution__meta small,
.executive-logistics-distribution__meta strong {
  display:
    block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.executive-logistics-distribution__meta small {
  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    6px;

  font-weight:
    700;
}

.executive-logistics-distribution__meta strong {
  margin-top:
    1px;

  color:
    var(
      --executive-logistics-text
    );

  font-size:
    8px;

  font-weight:
    750;
}

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

.executive-logistics-operational-section {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  padding-top:
    2px;
}

/* =========================================================
   USERS
   ========================================================= */

.executive-logistics-users {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  width:
    100%;

  min-width:
    0;
}

.executive-logistics-user {
  display:
    grid;

  grid-template-columns:
    27px
    minmax(
      190px,
      1.7fr
    )
    repeat(
      5,
      minmax(
        85px,
        0.65fr
      )
    );

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;

  padding:
    7px
    8px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    8px;

  background:
    var(
      --executive-logistics-surface-soft
    );

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

.executive-logistics-user:hover {
  border-color:
    var(
      --executive-logistics-border-strong
    );

  background:
    var(
      --executive-logistics-surface
    );
}

.executive-logistics-user__position {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    27px;

  height:
    27px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    7px;

  background:
    var(
      --executive-logistics-surface
    );

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    7px;

  font-weight:
    800;
}

.executive-logistics-user__identity {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  min-width:
    0;
}

.executive-logistics-user__avatar {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    30px;

  height:
    30px;

  flex:
    0
    0
    30px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    8px;

  background:
    var(
      --executive-logistics-surface
    );

  color:
    var(
      --executive-logistics-text
    );

  font-size:
    8px;

  font-weight:
    800;
}

.executive-logistics-user__identity > div {
  min-width:
    0;
}

.executive-logistics-user__identity strong,
.executive-logistics-user__identity small {
  display:
    block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.executive-logistics-user__identity strong {
  color:
    var(
      --executive-logistics-text
    );

  font-size:
    9px;

  font-weight:
    800;
}

.executive-logistics-user__identity small {
  margin-top:
    2px;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    7px;
}

.executive-logistics-user__metric {
  min-width:
    0;

  text-align:
    center;
}

.executive-logistics-user__metric span,
.executive-logistics-user__metric strong {
  display:
    block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.executive-logistics-user__metric span {
  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    6px;

  font-weight:
    750;

  text-transform:
    uppercase;

  letter-spacing:
    0.03em;
}

.executive-logistics-user__metric strong {
  margin-top:
    2px;

  color:
    var(
      --executive-logistics-text
    );

  font-size:
    8px;

  font-weight:
    800;
}

/* =========================================================
   INLINE SELECT
   ========================================================= */

.executive-logistics-inline-select {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  min-width:
    0;
}

.executive-logistics-inline-select > span {
  white-space:
    nowrap;
}

.executive-logistics-inline-select select {
  width:
    auto;

  min-width:
    145px;

  height:
    29px;
}

/* =========================================================
   CONTINÚA EN PARTE 2
   ========================================================= *//* =========================================================
   WIRTZ HUB · DIRECCIÓN EJECUTIVA · LOGÍSTICA
   PARTE 2 DE 2
   ========================================================= */

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

.executive-logistics-products-table {
  width:
    100%;

  min-width:
    0;

  overflow:
    hidden;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    9px;

  background:
    var(
      --executive-logistics-surface-soft
    );
}

.executive-logistics-products-head,
.executive-logistics-product-row {
  display:
    grid;

  grid-template-columns:
    minmax(
      260px,
      2fr
    )
    minmax(
      80px,
      0.65fr
    )
    minmax(
      90px,
      0.7fr
    )
    minmax(
      110px,
      0.85fr
    )
    minmax(
      130px,
      1fr
    )
    minmax(
      95px,
      0.7fr
    )
    34px;

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;
}

.executive-logistics-products-head {
  padding:
    7px
    8px;

  border-bottom:
    1px
    solid
    var(
      --executive-logistics-border
    );

  background:
    var(
      --executive-logistics-surface
    );
}

.executive-logistics-products-head > span {
  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    6px;

  font-weight:
    800;

  line-height:
    1.2;

  text-transform:
    uppercase;

  letter-spacing:
    0.045em;
}

.executive-logistics-products-body {
  display:
    flex;

  flex-direction:
    column;

  min-width:
    0;
}

.executive-logistics-product-row {
  padding:
    7px
    8px;

  border-bottom:
    1px
    solid
    var(
      --executive-logistics-border
    );

  background:
    var(
      --executive-logistics-surface-soft
    );

  transition:
    background
      var(
        --executive-logistics-transition
      );
}

.executive-logistics-product-row:last-child {
  border-bottom:
    0;
}

.executive-logistics-product-row:hover {
  background:
    var(
      --executive-logistics-surface
    );
}

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

.executive-logistics-product-row__main {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  text-align:
    left;

  cursor:
    pointer;
}

.executive-logistics-product-row__image {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    34px;

  height:
    34px;

  flex:
    0
    0
    34px;

  overflow:
    hidden;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    8px;

  background:
    var(
      --executive-logistics-surface
    );

  color:
    var(
      --executive-logistics-text-muted
    );
}

.executive-logistics-product-row__image img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}

.executive-logistics-product-row__image > span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;
}

.executive-logistics-product-row__image .icon {
  width:
    14px;

  height:
    14px;
}

.executive-logistics-product-row__identity {
  min-width:
    0;
}

.executive-logistics-product-row__identity strong,
.executive-logistics-product-row__identity small {
  display:
    block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.executive-logistics-product-row__identity strong {
  color:
    var(
      --executive-logistics-text
    );

  font-size:
    9px;

  font-weight:
    800;
}

.executive-logistics-product-row__identity small {
  margin-top:
    2px;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    7px;
}

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

.executive-logistics-product-row__metric {
  min-width:
    0;
}

.executive-logistics-product-row__metric strong,
.executive-logistics-product-row__metric small {
  display:
    block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.executive-logistics-product-row__metric strong {
  color:
    var(
      --executive-logistics-text
    );

  font-size:
    8px;

  font-weight:
    800;
}

.executive-logistics-product-row__metric small {
  margin-top:
    2px;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    6px;
}

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

.executive-logistics-icon-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    29px;

  height:
    29px;

  flex:
    0
    0
    29px;

  padding:
    0;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    7px;

  background:
    var(
      --executive-logistics-surface
    );

  color:
    var(
      --executive-logistics-text-soft
    );

  cursor:
    pointer;

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

.executive-logistics-icon-btn:hover {
  border-color:
    var(
      --executive-logistics-text
    );

  color:
    var(
      --executive-logistics-text
    );
}

.executive-logistics-icon-btn .icon {
  width:
    13px;

  height:
    13px;
}

/* =========================================================
   MOVEMENTS
   ========================================================= */

.executive-logistics-movements {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  width:
    100%;

  min-width:
    0;
}

.executive-logistics-movement {
  display:
    grid;

  grid-template-columns:
    32px
    minmax(
      240px,
      2fr
    )
    minmax(
      75px,
      0.55fr
    )
    minmax(
      125px,
      0.9fr
    )
    minmax(
      150px,
      1fr
    )
    30px;

  align-items:
    center;

  gap:
    8px;

  width:
    100%;

  min-width:
    0;

  padding:
    7px
    8px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    8px;

  background:
    var(
      --executive-logistics-surface-soft
    );

  text-align:
    left;

  cursor:
    pointer;

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

.executive-logistics-movement:hover {
  border-color:
    var(
      --executive-logistics-border-strong
    );

  background:
    var(
      --executive-logistics-surface
    );
}

.executive-logistics-movement__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    30px;

  height:
    30px;

  border:
    1px
    solid
    var(
      --executive-logistics-border
    );

  border-radius:
    7px;

  background:
    var(
      --executive-logistics-surface
    );

  color:
    var(
      --executive-logistics-text-soft
    );
}

.executive-logistics-movement__icon .icon {
  width:
    13px;

  height:
    13px;
}

.executive-logistics-movement__product {
  min-width:
    0;
}

.executive-logistics-movement__product strong,
.executive-logistics-movement__product small,
.executive-logistics-movement__metric strong,
.executive-logistics-movement__metric small {
  display:
    block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.executive-logistics-movement__product strong,
.executive-logistics-movement__metric strong {
  color:
    var(
      --executive-logistics-text
    );

  font-size:
    8px;

  font-weight:
    800;
}

.executive-logistics-movement__product small,
.executive-logistics-movement__metric small {
  margin-top:
    2px;

  color:
    var(
      --executive-logistics-text-muted
    );

  font-size:
    6px;
}

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

.executive-logistics-drawer-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    1190;

  visibility:
    hidden;

  opacity:
    0;

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

  transition:
    opacity
      160ms
      ease,
    visibility
      160ms
      ease;
}

.executive-logistics-drawer-backdrop.is-visible {
  visibility:
    visible;

  opacity:
    1;
}

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

.executive-logistics-drawer {
  position:
    fixed;

  top:
    0;

  right:
    0;

  bottom:
    0;

  z-index:
    1200;

  width:
    min(
      430px,
      94vw
    );

  overflow:
    hidden;

  border-left:
    1px
    solid
    rgba(
      0,
      0,
      0,
      0.18
    );

  background:
    var(
      --panel,
      #ffffff
    );

  transform:
    translateX(
      100%
    );

  transition:
    transform
      200ms
      ease;
}

.executive-logistics-drawer.is-open {
  transform:
    translateX(
      0
    );
}

.executive-logistics-drawer__content {
  width:
    100%;

  height:
    100%;

  overflow-y:
    auto;

  scrollbar-width:
    thin;
}

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

.executive-logistics-detail {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  width:
    100%;

  min-height:
    100%;

  padding:
    12px;

  color:
    var(
      --text,
      #111111
    );
}

.executive-logistics-detail__head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;

  padding-bottom:
    10px;

  border-bottom:
    1px
    solid
    rgba(
      0,
      0,
      0,
      0.14
    );
}

.executive-logistics-detail__head > div {
  min-width:
    0;

  flex:
    1;
}

.executive-logistics-detail__head > div > span {
  display:
    block;

  margin-bottom:
    2px;

  color:
    var(
      --text-muted,
      #777777
    );

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    0.07em;
}

.executive-logistics-detail__head h3 {
  margin:
    0;

  color:
    var(
      --text,
      #111111
    );

  font-size:
    16px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    -0.02em;
}

.executive-logistics-detail__head p {
  margin:
    3px
    0
    0;

  color:
    var(
      --text-muted,
      #777777
    );

  font-size:
    8px;
}

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

.executive-logistics-detail__image {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    100%;

  min-height:
    190px;

  overflow:
    hidden;

  border:
    1px
    solid
    rgba(
      0,
      0,
      0,
      0.14
    );

  border-radius:
    9px;

  background:
    var(
      --surface,
      #f5f5f5
    );
}

.executive-logistics-detail__image img {
  display:
    block;

  width:
    100%;

  max-height:
    260px;

  object-fit:
    contain;
}

.executive-logistics-detail__image > span {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    58px;

  height:
    58px;

  border:
    1px
    solid
    rgba(
      0,
      0,
      0,
      0.14
    );

  border-radius:
    12px;

  background:
    var(
      --panel,
      #ffffff
    );

  color:
    var(
      --text-muted,
      #777777
    );
}

.executive-logistics-detail__image .icon {
  width:
    24px;

  height:
    24px;
}

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

.executive-logistics-detail__metrics {
  display:
    grid;

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

  gap:
    5px;
}

.executive-logistics-detail__metrics article {
  min-width:
    0;

  padding:
    8px;

  border:
    1px
    solid
    rgba(
      0,
      0,
      0,
      0.14
    );

  border-radius:
    8px;

  background:
    var(
      --surface,
      #f5f5f5
    );
}

.executive-logistics-detail__metrics span,
.executive-logistics-detail__metrics strong {
  display:
    block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.executive-logistics-detail__metrics span {
  color:
    var(
      --text-muted,
      #777777
    );

  font-size:
    7px;

  font-weight:
    700;
}

.executive-logistics-detail__metrics strong {
  margin-top:
    3px;

  color:
    var(
      --text,
      #111111
    );

  font-size:
    12px;

  font-weight:
    800;
}

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

.executive-logistics-detail__section {
  padding:
    9px;

  border:
    1px
    solid
    rgba(
      0,
      0,
      0,
      0.14
    );

  border-radius:
    8px;

  background:
    var(
      --panel,
      #ffffff
    );
}

.executive-logistics-detail__section > span {
  display:
    block;

  margin-bottom:
    4px;

  color:
    var(
      --text-muted,
      #777777
    );

  font-size:
    7px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.06em;
}

.executive-logistics-detail__section > strong {
  display:
    block;

  color:
    var(
      --text,
      #111111
    );

  font-size:
    10px;

  font-weight:
    800;
}

.executive-logistics-detail__section p {
  margin:
    4px
    0
    0;

  color:
    var(
      --text-muted,
      #777777
    );

  font-size:
    8px;

  line-height:
    1.45;
}

.executive-logistics-detail__section p strong {
  color:
    var(
      --text,
      #111111
    );

  font-weight:
    750;
}

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

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

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

.executive-logistics-toast {
  position:
    fixed;

  right:
    14px;

  bottom:
    14px;

  z-index:
    1400;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    8px;

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

  padding:
    9px
    10px;

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

  border-radius:
    9px;

  background:
    var(
      --panel,
      #ffffff
    );

  color:
    var(
      --text,
      #111111
    );

  visibility:
    hidden;

  opacity:
    0;

  transform:
    translateY(
      6px
    );

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

.executive-logistics-toast.is-visible {
  visibility:
    visible;

  opacity:
    1;

  transform:
    translateY(
      0
    );
}

.executive-logistics-toast__icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    27px;

  height:
    27px;

  flex:
    0
    0
    27px;

  border:
    1px
    solid
    rgba(
      0,
      0,
      0,
      0.15
    );

  border-radius:
    7px;

  background:
    var(
      --surface,
      #f5f5f5
    );
}

.executive-logistics-toast__icon .icon {
  width:
    12px;

  height:
    12px;
}

.executive-logistics-toast__body {
  min-width:
    0;

  flex:
    1;
}

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

  color:
    inherit;

  font-size:
    9px;

  font-weight:
    800;
}

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

  color:
    var(
      --text-muted,
      #777777
    );

  font-size:
    8px;

  line-height:
    1.4;
}

.executive-logistics-toast.is-error,
.executive-logistics-toast.is-warning,
.executive-logistics-toast.is-info,
.executive-logistics-toast.is-success {
  color:
    var(
      --text,
      #111111
    );
}

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

.executive-logistics-btn:focus-visible,
.executive-logistics-preset:focus-visible,
.executive-logistics-kpi:focus-visible,
.executive-logistics-mini-kpi:focus-visible,
.executive-logistics-icon-btn:focus-visible,
.executive-logistics-product-row__main:focus-visible,
.executive-logistics-movement:focus-visible,
.executive-logistics-field input:focus-visible,
.executive-logistics-field select:focus-visible,
.executive-logistics-inline-select select:focus-visible {
  outline:
    2px
    solid
    currentColor;

  outline-offset:
    2px;
}

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

:root[data-theme="dark"]
.executive-logistics-page {
  --executive-logistics-bg:
    #000000;

  --executive-logistics-surface:
    #080808;

  --executive-logistics-surface-soft:
    #101010;

  --executive-logistics-surface-strong:
    #171717;

  --executive-logistics-border:
    rgba(
      255,
      255,
      255,
      0.13
    );

  --executive-logistics-border-strong:
    rgba(
      255,
      255,
      255,
      0.26
    );

  --executive-logistics-text:
    #f5f5f5;

  --executive-logistics-text-soft:
    #b7b7b7;

  --executive-logistics-text-muted:
    #7e7e7e;

  --executive-logistics-inverse:
    #000000;
}

:root[data-theme="dark"]
.executive-logistics-brand__icon,
:root[data-theme="dark"]
.executive-logistics-btn--primary,
:root[data-theme="dark"]
.executive-logistics-btn--quiet.is-active,
:root[data-theme="dark"]
.executive-logistics-preset.is-active {
  background:
    #ffffff;

  border-color:
    #ffffff;

  color:
    #000000;
}

:root[data-theme="dark"]
.executive-logistics-kpi.is-active::before,
:root[data-theme="dark"]
.executive-logistics-chart__line,
:root[data-theme="dark"]
.executive-logistics-distribution__track span {
  background:
    #ffffff;
}

:root[data-theme="dark"]
.executive-logistics-chart__line {
  stroke:
    #ffffff;
}

:root[data-theme="dark"]
.executive-logistics-chart__point {
  fill:
    #080808;

  stroke:
    #ffffff;
}

:root[data-theme="dark"]
.executive-logistics-drawer {
  border-left-color:
    rgba(
      255,
      255,
      255,
      0.14
    );

  background:
    #080808;
}

:root[data-theme="dark"]
.executive-logistics-detail {
  color:
    #f5f5f5;
}

:root[data-theme="dark"]
.executive-logistics-detail__head,
:root[data-theme="dark"]
.executive-logistics-detail__image,
:root[data-theme="dark"]
.executive-logistics-detail__metrics article,
:root[data-theme="dark"]
.executive-logistics-detail__section {
  border-color:
    rgba(
      255,
      255,
      255,
      0.13
    );
}

:root[data-theme="dark"]
.executive-logistics-detail__image,
:root[data-theme="dark"]
.executive-logistics-detail__metrics article {
  background:
    #101010;
}

:root[data-theme="dark"]
.executive-logistics-detail__section {
  background:
    #080808;
}

:root[data-theme="dark"]
.executive-logistics-detail__head h3,
:root[data-theme="dark"]
.executive-logistics-detail__metrics strong,
:root[data-theme="dark"]
.executive-logistics-detail__section > strong,
:root[data-theme="dark"]
.executive-logistics-detail__section p strong {
  color:
    #f5f5f5;
}

:root[data-theme="dark"]
.executive-logistics-detail__head p,
:root[data-theme="dark"]
.executive-logistics-detail__head > div > span,
:root[data-theme="dark"]
.executive-logistics-detail__metrics span,
:root[data-theme="dark"]
.executive-logistics-detail__section > span,
:root[data-theme="dark"]
.executive-logistics-detail__section p {
  color:
    #8a8a8a;
}

:root[data-theme="dark"]
.executive-logistics-toast {
  border-color:
    rgba(
      255,
      255,
      255,
      0.18
    );

  background:
    #080808;

  color:
    #f5f5f5;
}

:root[data-theme="dark"]
.executive-logistics-toast__icon {
  border-color:
    rgba(
      255,
      255,
      255,
      0.13
    );

  background:
    #101010;
}

:root[data-theme="dark"]
.executive-logistics-toast__body p {
  color:
    #8a8a8a;
}

/* =========================================================
   RESPONSIVE · 1450
   ========================================================= */

@media (
  max-width:
    1450px
) {
  .executive-logistics-head {
    align-items:
      flex-start;
  }

  .executive-logistics-head__actions {
    flex-wrap:
      wrap;
  }

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

  .executive-logistics-filter-checks {
    grid-column:
      span
      2;
  }

  .executive-logistics-filter-actions {
    grid-column:
      span
      2;
  }

  .executive-logistics-user {
    grid-template-columns:
      27px
      minmax(
        170px,
        1.6fr
      )
      repeat(
        4,
        minmax(
          78px,
          0.65fr
        )
      );
  }

  .executive-logistics-user__metric:last-child {
    display:
      none;
  }

  .executive-logistics-products-head,
  .executive-logistics-product-row {
    grid-template-columns:
      minmax(
        220px,
        1.8fr
      )
      minmax(
        70px,
        0.55fr
      )
      minmax(
        80px,
        0.65fr
      )
      minmax(
        105px,
        0.8fr
      )
      minmax(
        115px,
        0.9fr
      )
      minmax(
        85px,
        0.65fr
      )
      32px;
  }
}

/* =========================================================
   RESPONSIVE · 1200
   ========================================================= */

@media (
  max-width:
    1200px
) {
  .executive-logistics-head {
    flex-direction:
      column;
  }

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

    justify-content:
      flex-start;
  }

  .executive-logistics-update {
    text-align:
      left;
  }

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

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

  .executive-logistics-reading__grid {
    grid-template-columns:
      1fr;
  }

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

  .executive-logistics-field--wide {
    grid-column:
      span
      1;
  }

  .executive-logistics-user {
    grid-template-columns:
      27px
      minmax(
        160px,
        1.5fr
      )
      repeat(
        3,
        minmax(
          72px,
          0.65fr
        )
      );
  }

  .executive-logistics-user__metric:nth-last-child(-n + 2) {
    display:
      none;
  }

  .executive-logistics-products-table {
    overflow-x:
      auto;

    scrollbar-width:
      thin;
  }

  .executive-logistics-products-head,
  .executive-logistics-product-row {
    min-width:
      980px;
  }

  .executive-logistics-movements {
    overflow-x:
      auto;

    scrollbar-width:
      thin;
  }

  .executive-logistics-movement {
    min-width:
      860px;
  }
}

/* =========================================================
   RESPONSIVE · TABLET
   ========================================================= */

@media (
  max-width:
    900px
) {
  .executive-logistics-page {
    padding:
      6px;
  }

  .executive-logistics-head {
    padding:
      11px;

    border-radius:
      12px;
  }

  .executive-logistics-brand__body h1 {
    font-size:
      20px;
  }

  .executive-logistics-head__actions {
    display:
      grid;

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

  .executive-logistics-period-card {
    min-width:
      0;

    grid-column:
      1 /
      -1;
  }

  .executive-logistics-update {
    min-width:
      0;

    padding:
      5px
      0;
  }

  .executive-logistics-filter-bar {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .executive-logistics-filter-bar__period {
    width:
      100%;

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      6px;
  }

  .executive-logistics-presets {
    width:
      100%;
  }

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

  .executive-logistics-filter-checks,
  .executive-logistics-filter-actions {
    grid-column:
      1 /
      -1;
  }

  .executive-logistics-filter-actions {
    justify-content:
      flex-start;
  }

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

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

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

  .executive-logistics-user {
    grid-template-columns:
      27px
      minmax(
        150px,
        1fr
      )
      repeat(
        2,
        minmax(
          70px,
          0.55fr
        )
      );
  }

  .executive-logistics-user__metric:nth-last-child(-n + 3) {
    display:
      none;
  }
}

/* =========================================================
   RESPONSIVE · MOBILE
   ========================================================= */

@media (
  max-width:
    760px
) {
  .executive-logistics-page {
    padding:
      5px;

    overflow-x:
      hidden;
  }

  .executive-logistics-head {
    gap:
      10px;

    margin-bottom:
      6px;

    padding:
      10px;

    border-radius:
      10px;
  }

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

  .executive-logistics-brand__icon {
    width:
      36px;

    height:
      36px;

    flex-basis:
      36px;

    border-radius:
      9px;
  }

  .executive-logistics-brand__body > span {
    font-size:
      7px;
  }

  .executive-logistics-brand__body h1 {
    font-size:
      18px;
  }

  .executive-logistics-brand__body p {
    font-size:
      9px;
  }

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

    gap:
      5px;
  }

  .executive-logistics-period-card {
    grid-column:
      1 /
      -1;

    min-height:
      34px;
  }

  .executive-logistics-update {
    grid-column:
      1 /
      -1;
  }

  .executive-logistics-btn {
    min-height:
      32px;

    font-size:
      9px;
  }

  .executive-logistics-filters {
    margin-bottom:
      6px;

    border-radius:
      10px;
  }

  .executive-logistics-filter-bar {
    padding:
      7px;
  }

  .executive-logistics-filter-bar__period > span {
    font-size:
      7px;
  }

  .executive-logistics-presets {
    display:
      grid;

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

    gap:
      4px;
  }

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

    min-width:
      0;

    padding:
      0
      5px;

    font-size:
      8px;
  }

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

    padding:
      8px;
  }

  .executive-logistics-filter-checks,
  .executive-logistics-filter-actions,
  .executive-logistics-field--wide {
    grid-column:
      span
      1;
  }

  .executive-logistics-filter-checks {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .executive-logistics-filter-actions {
    display:
      grid;

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

  .executive-logistics-content {
    gap:
      6px;
  }

  .executive-logistics-overview,
  .executive-logistics-panel {
    padding:
      9px;

    border-radius:
      10px;
  }

  .executive-logistics-section-heading {
    margin-bottom:
      6px;
  }

  .executive-logistics-section-heading h2 {
    font-size:
      15px;
  }

  .executive-logistics-section-heading p {
    font-size:
      8px;
  }

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

    gap:
      5px;
  }

  .executive-logistics-kpi {
    min-height:
      122px;

    padding:
      9px;
  }

  .executive-logistics-kpi__value {
    font-size:
      20px;
  }

  .executive-logistics-kpi__variation {
    flex-wrap:
      wrap;
  }

  .executive-logistics-kpi__variation small {
    width:
      100%;
  }

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

    gap:
      5px;
  }

  .executive-logistics-snapshot__item {
    align-items:
      flex-start;

    padding:
      8px;
  }

  .executive-logistics-snapshot__item > div > span {
    white-space:
      normal;
  }

  .executive-logistics-reading__grid {
    gap:
      6px;
  }

  .executive-logistics-panel__head {
    margin-bottom:
      7px;
  }

  .executive-logistics-panel__head h3 {
    font-size:
      12px;
  }

  .executive-logistics-panel__head p {
    font-size:
      7px;
  }

  .executive-logistics-chart__headline {
    align-items:
      flex-start;

    padding:
      8px;
  }

  .executive-logistics-chart__headline-value > strong {
    font-size:
      19px;
  }

  .executive-logistics-chart__viewport {
    padding-bottom:
      20px;
  }

  .executive-logistics-chart__svg {
    height:
      190px;
  }

  .executive-logistics-chart__labels {
    font-size:
      6px;
  }

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

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

  .executive-logistics-user {
    display:
      grid;

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

    gap:
      7px;

    padding:
      7px;
  }

  .executive-logistics-user__position {
    width:
      26px;

    height:
      26px;
  }

  .executive-logistics-user__identity {
    min-width:
      0;
  }

  .executive-logistics-user__metric {
    display:
      none;
  }

  .executive-logistics-user__metric:nth-of-type(3) {
    display:
      block;

    text-align:
      right;
  }

  .executive-logistics-products-table {
    border:
      0;

    background:
      transparent;

    overflow:
      visible;
  }

  .executive-logistics-products-head {
    display:
      none;
  }

  .executive-logistics-products-body {
    gap:
      5px;
  }

  .executive-logistics-product-row {
    display:
      grid;

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

    gap:
      7px;

    min-width:
      0;

    padding:
      8px;

    border:
      1px
      solid
      var(
        --executive-logistics-border
      );

    border-radius:
      8px;

    background:
      var(
        --executive-logistics-surface-soft
      );
  }

  .executive-logistics-product-row__main {
    grid-column:
      1 /
      -1;
  }

  .executive-logistics-product-row__metric {
    display:
      none;
  }

  .executive-logistics-product-row__metric:nth-of-type(1),
  .executive-logistics-product-row__metric:nth-of-type(4) {
    display:
      block;
  }

  .executive-logistics-product-row >
  .executive-logistics-icon-btn {
    align-self:
      center;

    justify-self:
      end;
  }

  .executive-logistics-movements {
    overflow:
      visible;
  }

  .executive-logistics-movement {
    display:
      grid;

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

    gap:
      7px;

    min-width:
      0;

    padding:
      8px;
  }

  .executive-logistics-movement__product {
    min-width:
      0;
  }

  .executive-logistics-movement__metric {
    display:
      none;
  }

  .executive-logistics-movement__metric:nth-of-type(1) {
    display:
      block;

    text-align:
      right;
  }

  .executive-logistics-movement >
  .executive-logistics-icon-btn {
    display:
      none;
  }

  .executive-logistics-inline-select {
    width:
      100%;
  }

  .executive-logistics-inline-select select {
    flex:
      1;

    min-width:
      0;
  }

  .executive-logistics-drawer {
    top:
      auto;

    width:
      100%;

    height:
      92vh;

    border-top:
      1px
      solid
      rgba(
        0,
        0,
        0,
        0.16
      );

    border-left:
      0;

    border-radius:
      14px
      14px
      0
      0;

    transform:
      translateY(
        100%
      );
  }

  .executive-logistics-drawer.is-open {
    transform:
      translateY(
        0
      );
  }

  .executive-logistics-detail {
    padding:
      10px;
  }

  .executive-logistics-detail__image {
    min-height:
      155px;
  }

  .executive-logistics-toast {
    right:
      8px;

    bottom:
      8px;

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

/* =========================================================
   RESPONSIVE · SMALL MOBILE
   ========================================================= */

@media (
  max-width:
    520px
) {
  .executive-logistics-head__actions {
    grid-template-columns:
      1fr;
  }

  .executive-logistics-period-card,
  .executive-logistics-update {
    grid-column:
      auto;
  }

  .executive-logistics-update {
    padding:
      3px
      0;
  }

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

  .executive-logistics-filter-actions {
    grid-template-columns:
      1fr;
  }

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

  .executive-logistics-kpi {
    min-height:
      112px;
  }

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

  .executive-logistics-chart__headline {
    flex-direction:
      column;

    align-items:
      stretch;
  }

  .executive-logistics-chart__trend {
    justify-content:
      flex-start;
  }

  .executive-logistics-chart__trend > div {
    text-align:
      left;
  }

  .executive-logistics-chart__summary {
    grid-template-columns:
      1fr;
  }

  .executive-logistics-distribution__meta {
    grid-template-columns:
      1fr;
  }

  .executive-logistics-panel__head {
    flex-direction:
      column;
  }

  .executive-logistics-panel__badge {
    align-self:
      flex-start;
  }

  .executive-logistics-panel__actions {
    width:
      100%;
  }

  .executive-logistics-panel__actions
  .executive-logistics-btn {
    flex:
      1;
  }

  .executive-logistics-detail__metrics {
    grid-template-columns:
      1fr;
  }
}

/* =========================================================
   VERY SMALL
   ========================================================= */

@media (
  max-width:
    380px
) {
  .executive-logistics-page {
    padding:
      4px;
  }

  .executive-logistics-brand__icon {
    width:
      32px;

    height:
      32px;

    flex-basis:
      32px;
  }

  .executive-logistics-brand__body h1 {
    font-size:
      16px;
  }

  .executive-logistics-presets {
    grid-template-columns:
      1fr
      1fr;
  }

  .executive-logistics-kpi__value {
    font-size:
      18px;
  }

  .executive-logistics-chart__svg {
    height:
      165px;
  }
}

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

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

    animation-duration:
      0.001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.001ms !important;
  }
}

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

@media print {
  .executive-logistics-head__actions,
  .executive-logistics-filters,
  .executive-logistics-drawer,
  .executive-logistics-drawer-backdrop,
  .executive-logistics-toast,
  .executive-logistics-icon-btn {
    display:
      none !important;
  }

  .executive-logistics-page {
    padding:
      0;

    background:
      #ffffff;

    color:
      #000000;
  }

  .executive-logistics-head,
  .executive-logistics-overview,
  .executive-logistics-panel,
  .executive-logistics-snapshot__item,
  .executive-logistics-kpi,
  .executive-logistics-mini-kpi,
  .executive-logistics-distribution,
  .executive-logistics-user,
  .executive-logistics-product-row,
  .executive-logistics-movement {
    break-inside:
      avoid;

    border-color:
      #cfcfcf !important;

    background:
      #ffffff !important;

    color:
      #000000 !important;
  }

  .executive-logistics-chart__line {
    stroke:
      #000000 !important;
  }

  .executive-logistics-chart__point {
    fill:
      #ffffff !important;

    stroke:
      #000000 !important;
  }

  .executive-logistics-distribution__track span {
    background:
      #000000 !important;
  }
}/* =========================================================
   LOGÍSTICA · AJUSTE TIPOGRAFÍA + BOTÓN EXPORTAR
   AGREGAR AL FINAL DE:
   frontend/src/pages/direccion-ejecutiva/logistica/logistica.css
   ========================================================= */

/* =========================================================
   TIPOGRAFÍA GENERAL MÁS GRANDE
   ========================================================= */

.executive-logistics-brand__body > span {
  font-size: 11px;
}

.executive-logistics-brand__body h1 {
  font-size: 26px;
}

.executive-logistics-brand__body p {
  font-size: 13px;
}

.executive-logistics-period-card small,
.executive-logistics-update span {
  font-size: 10px;
}

.executive-logistics-period-card strong,
.executive-logistics-update strong {
  font-size: 12px;
}

.executive-logistics-btn {
  min-height: 38px;
  padding: 0 13px;
  font-size: 12px;
}

.executive-logistics-preset {
  min-height: 31px;
  padding: 0 10px;
  font-size: 11px;
}

.executive-logistics-filter-bar__period > span {
  font-size: 10px;
}

.executive-logistics-field > span,
.executive-logistics-inline-select > span {
  font-size: 10px;
}

.executive-logistics-field input,
.executive-logistics-field select,
.executive-logistics-inline-select select {
  height: 36px;
  font-size: 11px;
}

.executive-logistics-filter-checks label {
  font-size: 11px;
}

.executive-logistics-section-heading > div > span {
  font-size: 10px;
}

.executive-logistics-section-heading h2 {
  font-size: 20px;
}

.executive-logistics-section-heading p {
  font-size: 11px;
}

.executive-logistics-panel__head > div:first-child > span {
  font-size: 9px;
}

.executive-logistics-panel__head h3 {
  font-size: 16px;
}

.executive-logistics-panel__head p {
  font-size: 10px;
}

.executive-logistics-panel__badge {
  min-height: 26px;
  padding: 0 9px;
  font-size: 9px;
}

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

.executive-logistics-kpi__heading small {
  font-size: 9px;
}

.executive-logistics-kpi__heading strong {
  font-size: 11px;
}

.executive-logistics-kpi__value {
  font-size: clamp(
    24px,
    2vw,
    32px
  );
}

.executive-logistics-kpi__detail {
  font-size: 10px;
}

.executive-logistics-kpi__variation {
  font-size: 10px;
}

.executive-logistics-kpi__variation strong {
  font-size: 10px;
}

.executive-logistics-kpi__variation small {
  font-size: 9px;
}

.executive-logistics-mini-kpi__body small {
  font-size: 9px;
}

.executive-logistics-mini-kpi__body strong {
  font-size: 13px;
}

.executive-logistics-mini-kpi__body > span {
  font-size: 9px;
}

/* =========================================================
   SNAPSHOT
   ========================================================= */

.executive-logistics-snapshot__item small {
  font-size: 9px;
}

.executive-logistics-snapshot__item strong {
  font-size: 12px;
}

.executive-logistics-snapshot__item > div > span {
  font-size: 9px;
}

/* =========================================================
   CONCLUSIONES / ALERTAS
   ========================================================= */

.executive-logistics-insight__body strong,
.executive-logistics-alert__body strong {
  font-size: 11px;
}

.executive-logistics-insight__body p,
.executive-logistics-alert__body p {
  font-size: 10px;
}

.executive-logistics-alert__body > div > span {
  font-size: 8px;
}

/* =========================================================
   GRÁFICO
   ========================================================= */

.executive-logistics-chart__headline-value > span {
  font-size: 9px;
}

.executive-logistics-chart__headline-value > strong {
  font-size: 28px;
}

.executive-logistics-chart__headline-value > small {
  font-size: 9px;
}

.executive-logistics-chart__trend strong {
  font-size: 13px;
}

.executive-logistics-chart__trend small {
  font-size: 9px;
}

.executive-logistics-chart__labels {
  font-size: 9px;
}

.executive-logistics-chart__summary span {
  font-size: 9px;
}

.executive-logistics-chart__summary strong {
  font-size: 13px;
}

.executive-logistics-chart__summary small {
  font-size: 9px;
}

/* =========================================================
   DISTRIBUCIÓN
   ========================================================= */

.executive-logistics-distribution__rank {
  font-size: 9px;
}

.executive-logistics-distribution__identity strong {
  font-size: 11px;
}

.executive-logistics-distribution__identity small {
  font-size: 9px;
}

.executive-logistics-distribution__percentage {
  font-size: 12px;
}

.executive-logistics-distribution__meta small {
  font-size: 8px;
}

.executive-logistics-distribution__meta strong {
  font-size: 10px;
}

/* =========================================================
   USUARIOS
   ========================================================= */

.executive-logistics-user__position {
  font-size: 9px;
}

.executive-logistics-user__avatar {
  font-size: 10px;
}

.executive-logistics-user__identity strong {
  font-size: 11px;
}

.executive-logistics-user__identity small {
  font-size: 9px;
}

.executive-logistics-user__metric span {
  font-size: 8px;
}

.executive-logistics-user__metric strong {
  font-size: 10px;
}

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

.executive-logistics-products-head > span {
  font-size: 8px;
}

.executive-logistics-product-row__identity strong {
  font-size: 11px;
}

.executive-logistics-product-row__identity small {
  font-size: 9px;
}

.executive-logistics-product-row__metric strong {
  font-size: 10px;
}

.executive-logistics-product-row__metric small {
  font-size: 8px;
}

/* =========================================================
   MOVIMIENTOS
   ========================================================= */

.executive-logistics-movement__product strong,
.executive-logistics-movement__metric strong {
  font-size: 10px;
}

.executive-logistics-movement__product small,
.executive-logistics-movement__metric small {
  font-size: 8px;
}

/* =========================================================
   FIX · EXPORTAR MODO CLARO
   ========================================================= */

.executive-logistics-btn--primary,
.executive-logistics-btn--primary span,
.executive-logistics-btn--primary .icon {
  color: #ffffff !important;
}

.executive-logistics-btn--primary {
  background: #111111 !important;
  border-color: #111111 !important;
}

.executive-logistics-btn--primary:hover:not(:disabled) {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

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

:root[data-theme="dark"]
.executive-logistics-btn--primary,
:root[data-theme="dark"]
.executive-logistics-btn--primary span,
:root[data-theme="dark"]
.executive-logistics-btn--primary .icon {
  color: #000000 !important;
}

:root[data-theme="dark"]
.executive-logistics-btn--primary {
  background: #ffffff !important;
  border-color: #ffffff !important;
}

/* =========================================================
   MOBILE · TIPOGRAFÍA
   ========================================================= */

@media (
  max-width: 760px
) {
  .executive-logistics-brand__body h1 {
    font-size: 21px;
  }

  .executive-logistics-brand__body p {
    font-size: 11px;
  }

  .executive-logistics-btn {
    font-size: 11px;
  }

  .executive-logistics-preset {
    font-size: 10px;
  }

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

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

  .executive-logistics-panel__head h3 {
    font-size: 14px;
  }

  .executive-logistics-panel__head p {
    font-size: 9px;
  }

  .executive-logistics-kpi__value {
    font-size: 23px;
  }

  .executive-logistics-chart__headline-value > strong {
    font-size: 23px;
  }

  .executive-logistics-chart__labels {
    font-size: 8px;
  }
}/* =========================================================
   LOGÍSTICA EJECUTIVA · AJUSTE FINAL
   TIPOGRAFÍA + GRÁFICO CEO
   ========================================================= */

/* =========================================================
   TIPOGRAFÍA GENERAL
   ========================================================= */

.executive-logistics-brand__body > span {
  font-size: 12px;
}

.executive-logistics-brand__body h1 {
  font-size: 29px;
}

.executive-logistics-brand__body p {
  font-size: 14px;
}

.executive-logistics-period-card small,
.executive-logistics-update span {
  font-size: 11px;
}

.executive-logistics-period-card strong,
.executive-logistics-update strong {
  font-size: 13px;
}

.executive-logistics-btn {
  min-height: 40px;
  padding-inline: 14px;
  font-size: 13px;
}

.executive-logistics-preset {
  min-height: 33px;
  padding-inline: 11px;
  font-size: 12px;
}

.executive-logistics-filter-bar__period > span {
  font-size: 11px;
}

.executive-logistics-field > span,
.executive-logistics-inline-select > span {
  font-size: 11px;
}

.executive-logistics-field input,
.executive-logistics-field select,
.executive-logistics-inline-select select {
  height: 38px;
  font-size: 12px;
}

.executive-logistics-filter-checks label {
  font-size: 12px;
}

/* =========================================================
   HEADINGS
   ========================================================= */

.executive-logistics-section-heading > div > span {
  font-size: 11px;
}

.executive-logistics-section-heading h2 {
  font-size: 22px;
}

.executive-logistics-section-heading p {
  font-size: 12px;
}

.executive-logistics-panel__head > div:first-child > span {
  font-size: 10px;
}

.executive-logistics-panel__head h3 {
  font-size: 18px;
}

.executive-logistics-panel__head p {
  font-size: 11px;
}

.executive-logistics-panel__badge {
  min-height: 28px;
  padding-inline: 10px;
  font-size: 10px;
}

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

.executive-logistics-kpi {
  min-height: 150px;
  padding: 14px;
}

.executive-logistics-kpi__heading small {
  font-size: 10px;
}

.executive-logistics-kpi__heading strong {
  font-size: 13px;
}

.executive-logistics-kpi__value {
  margin-top: 15px;

  font-size: clamp(
    27px,
    2.2vw,
    36px
  );
}

.executive-logistics-kpi__detail {
  font-size: 11px;
}

.executive-logistics-kpi__variation,
.executive-logistics-kpi__variation strong {
  font-size: 11px;
}

.executive-logistics-kpi__variation small {
  font-size: 10px;
}

.executive-logistics-mini-kpi__body small {
  font-size: 10px;
}

.executive-logistics-mini-kpi__body strong {
  font-size: 15px;
}

.executive-logistics-mini-kpi__body > span {
  font-size: 10px;
}

/* =========================================================
   SNAPSHOT
   ========================================================= */

.executive-logistics-snapshot__item {
  min-height: 70px;
  padding: 11px;
}

.executive-logistics-snapshot__item small {
  font-size: 10px;
}

.executive-logistics-snapshot__item strong {
  font-size: 14px;
}

.executive-logistics-snapshot__item > div > span {
  font-size: 10px;
}

/* =========================================================
   CONCLUSIONES / ALERTAS
   ========================================================= */

.executive-logistics-insight,
.executive-logistics-alert {
  padding: 11px;
}

.executive-logistics-insight__body strong,
.executive-logistics-alert__body strong {
  font-size: 13px;
}

.executive-logistics-insight__body p,
.executive-logistics-alert__body p {
  font-size: 11px;
}

.executive-logistics-alert__body > div > span {
  font-size: 9px;
}

/* =========================================================
   DISTRIBUCIÓN
   ========================================================= */

.executive-logistics-distribution {
  padding: 11px;
}

.executive-logistics-distribution__rank {
  font-size: 10px;
}

.executive-logistics-distribution__identity strong {
  font-size: 13px;
}

.executive-logistics-distribution__identity small {
  font-size: 10px;
}

.executive-logistics-distribution__percentage {
  font-size: 14px;
}

.executive-logistics-distribution__meta small {
  font-size: 9px;
}

.executive-logistics-distribution__meta strong {
  font-size: 12px;
}

/* =========================================================
   USUARIOS
   ========================================================= */

.executive-logistics-user {
  min-height: 54px;
}

.executive-logistics-user__position {
  font-size: 10px;
}

.executive-logistics-user__avatar {
  font-size: 11px;
}

.executive-logistics-user__identity strong {
  font-size: 13px;
}

.executive-logistics-user__identity small {
  font-size: 10px;
}

.executive-logistics-user__metric span {
  font-size: 9px;
}

.executive-logistics-user__metric strong {
  font-size: 12px;
}

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

.executive-logistics-products-head > span {
  font-size: 9px;
}

.executive-logistics-product-row {
  min-height: 54px;
}

.executive-logistics-product-row__identity strong {
  font-size: 13px;
}

.executive-logistics-product-row__identity small {
  font-size: 10px;
}

.executive-logistics-product-row__metric strong {
  font-size: 12px;
}

.executive-logistics-product-row__metric small {
  font-size: 9px;
}

/* =========================================================
   MOVIMIENTOS
   ========================================================= */

.executive-logistics-movement {
  min-height: 54px;
}

.executive-logistics-movement__product strong,
.executive-logistics-movement__metric strong {
  font-size: 12px;
}

.executive-logistics-movement__product small,
.executive-logistics-movement__metric small {
  font-size: 9px;
}

/* =========================================================
   GRÁFICO · CONTENEDOR
   ========================================================= */

.executive-logistics-evolution {
  padding: 16px;
}

.executive-logistics-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* =========================================================
   GRÁFICO · RESUMEN SUPERIOR
   ========================================================= */

.executive-logistics-chart__headline {
  align-items: center;

  margin: 0;
  padding: 14px 16px;

  border-radius: 11px;
}

.executive-logistics-chart__headline-value > span {
  font-size: 11px;
  font-weight: 750;
}

.executive-logistics-chart__headline-value > strong {
  margin-top: 5px;

  font-size: clamp(
    30px,
    3vw,
    42px
  );
}

.executive-logistics-chart__headline-value > small {
  margin-top: 5px;
  font-size: 10px;
}

.executive-logistics-chart__trend {
  gap: 10px;

  padding-left: 18px;

  border-left: 1px solid
    var(
      --executive-logistics-border
    );
}

.executive-logistics-chart__trend > span {
  width: 36px;
  height: 36px;

  border-radius: 9px;
}

.executive-logistics-chart__trend .icon {
  width: 16px;
  height: 16px;
}

.executive-logistics-chart__trend strong {
  font-size: 16px;
}

.executive-logistics-chart__trend small {
  margin-top: 2px;
  font-size: 10px;
}

/* =========================================================
   GRÁFICO · ÁREA
   ========================================================= */

.executive-logistics-chart__viewport {
  position: relative;

  min-height: 340px;

  padding:
    12px
    10px
    36px;

  border-radius: 11px;

  background:
    var(
      --executive-logistics-surface
    );
}

.executive-logistics-chart__svg {
  width: 100%;
  height: 290px;
}

/* =========================================================
   GRÁFICO · GRID
   ========================================================= */

.executive-logistics-chart__grid {
  stroke:
    var(
      --executive-logistics-border
    );

  stroke-width: 1;

  stroke-dasharray:
    3
    7;

  opacity: 0.8;
}

/* =========================================================
   GRÁFICO · LÍNEA
   ========================================================= */

.executive-logistics-chart__line {
  fill: none;

  stroke:
    var(
      --executive-logistics-text
    );

  stroke-width: 2.6;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect:
    non-scaling-stroke;
}

/* =========================================================
   GRÁFICO · PUNTOS
   ========================================================= */

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

  stroke:
    var(
      --executive-logistics-text
    );

  stroke-width: 2;

  vector-effect:
    non-scaling-stroke;

  cursor: pointer;
}

.executive-logistics-chart__point:hover {
  fill:
    var(
      --executive-logistics-text
    );

  stroke:
    var(
      --executive-logistics-text
    );
}

/* =========================================================
   GRÁFICO · ETIQUETAS X
   ========================================================= */

.executive-logistics-chart__labels {
  right: 10px;
  bottom: 9px;
  left: 10px;

  height: 20px;

  font-size: 10px;
  font-weight: 650;
}

.executive-logistics-chart__labels span {
  color:
    var(
      --executive-logistics-text-muted
    );
}

/* =========================================================
   GRÁFICO · DATOS INFERIORES
   ========================================================= */

.executive-logistics-chart__summary {
  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap: 7px;

  margin-top: 0;
}

.executive-logistics-chart__summary article {
  padding: 11px 12px;

  border-radius: 9px;
}

.executive-logistics-chart__summary span {
  font-size: 10px;
}

.executive-logistics-chart__summary strong {
  margin-top: 3px;
  font-size: 16px;
}

.executive-logistics-chart__summary small {
  margin-top: 2px;
  font-size: 9px;
}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (
  max-width: 760px
) {
  .executive-logistics-brand__body > span {
    font-size: 9px;
  }

  .executive-logistics-brand__body h1 {
    font-size: 23px;
  }

  .executive-logistics-brand__body p {
    font-size: 12px;
  }

  .executive-logistics-btn {
    font-size: 12px;
  }

  .executive-logistics-preset {
    font-size: 11px;
  }

  .executive-logistics-section-heading h2 {
    font-size: 20px;
  }

  .executive-logistics-section-heading p {
    font-size: 11px;
  }

  .executive-logistics-panel__head h3 {
    font-size: 16px;
  }

  .executive-logistics-panel__head p {
    font-size: 10px;
  }

  .executive-logistics-kpi {
    min-height: 135px;
  }

  .executive-logistics-kpi__value {
    font-size: 26px;
  }

  .executive-logistics-chart__viewport {
    min-height: 275px;

    padding:
      8px
      5px
      34px;
  }

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

  .executive-logistics-chart__labels {
    right: 4px;
    left: 4px;

    font-size: 8px;
  }

  .executive-logistics-chart__headline {
    padding: 11px;
  }

  .executive-logistics-chart__headline-value > strong {
    font-size: 28px;
  }

  .executive-logistics-chart__trend strong {
    font-size: 14px;
  }
}

/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (
  max-width: 520px
) {
  .executive-logistics-chart__headline {
    align-items: flex-start;
  }

  .executive-logistics-chart__trend {
    width: 100%;

    padding:
      10px
      0
      0;

    border-top:
      1px solid
      var(
        --executive-logistics-border
      );

    border-left: 0;
  }

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

  .executive-logistics-chart__summary article {
    padding: 9px 7px;
  }

  .executive-logistics-chart__summary strong {
    font-size: 13px;
  }
}