/* =========================================================
   ARCHIVO:
   admin/modules/dashboard/dashboard.css

   WIRTZ MAYORISTA · DASHBOARD EJECUTIVO
   Minimalista · lectura gerencial · sin acciones operativas
   ========================================================= */

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

.executive-dashboard {
  --dashboard-bg:
    #f6f6f6;

  --dashboard-panel:
    #ffffff;

  --dashboard-panel-soft:
    #fafafa;

  --dashboard-text:
    #111111;

  --dashboard-text-soft:
    #5f5f5f;

  --dashboard-text-muted:
    #8a8a8a;

  --dashboard-line:
    rgba(
      17,
      17,
      17,
      0.1
    );

  --dashboard-line-strong:
    rgba(
      17,
      17,
      17,
      0.18
    );

  --dashboard-success:
    #16794b;

  --dashboard-success-soft:
    rgba(
      22,
      121,
      75,
      0.09
    );

  --dashboard-warning:
    #9a5b00;

  --dashboard-warning-soft:
    rgba(
      154,
      91,
      0,
      0.1
    );

  --dashboard-danger:
    #b42318;

  --dashboard-danger-soft:
    rgba(
      180,
      35,
      24,
      0.08
    );

  --dashboard-info:
    #334155;

  --dashboard-info-soft:
    rgba(
      51,
      65,
      85,
      0.08
    );

  --dashboard-progress:
    #6d4aff;

  --dashboard-progress-soft:
    rgba(
      109,
      74,
      255,
      0.08
    );

  --dashboard-radius-sm:
    8px;

  --dashboard-radius-md:
    12px;

  --dashboard-radius-lg:
    16px;

  width:
    100%;

  min-width:
    0;

  padding:
    0;

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

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

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

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

.executive-dashboard button,
.executive-dashboard select {
  color:
    inherit;
}

/* =========================================================
   CABECERA
   ========================================================= */

.executive-dashboard__header {
  min-height:
    94px;

  margin-bottom:
    16px;

  padding:
    18px
    20px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  border:
    1px solid
    var(
      --dashboard-line
    );

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

  background:
    var(
      --dashboard-panel
    );
}

.executive-dashboard__heading {
  min-width:
    0;
}

.executive-dashboard__eyebrow,
.dashboard-panel__eyebrow {
  display:
    block;

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

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}

.executive-dashboard__heading h2 {
  margin:
    4px
    0
    4px;

  color:
    var(
      --dashboard-text
    );

  font-size:
    clamp(
      22px,
      2.4vw,
      30px
    );

  font-weight:
    800;

  letter-spacing:
    -0.04em;

  line-height:
    1.1;
}

.executive-dashboard__heading p {
  margin:
    0;

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

  font-size:
    12px;
}

.executive-dashboard__controls {
  display:
    flex;

  align-items:
    stretch;

  justify-content:
    flex-end;

  gap:
    10px;
}

/* =========================================================
   SELECTOR DE PERÍODO
   ========================================================= */

.dashboard-period-control {
  position:
    relative;

  min-width:
    190px;

  min-height:
    52px;

  padding:
    7px
    38px
    7px
    12px;

  display:
    grid;

  align-content:
    center;

  gap:
    2px;

  border:
    1px solid
    var(
      --dashboard-line
    );

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

  background:
    var(
      --dashboard-panel-soft
    );
}

.dashboard-period-control > span {
  color:
    var(
      --dashboard-text-muted
    );

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}

.dashboard-period-control select {
  width:
    100%;

  min-width:
    0;

  border:
    0;

  outline:
    0;

  appearance:
    none;

  background:
    transparent;

  color:
    var(
      --dashboard-text
    );

  font-size:
    12px;

  font-weight:
    800;
}

.dashboard-period-control > svg {
  position:
    absolute;

  top:
    50%;

  right:
    13px;

  width:
    15px;

  height:
    15px;

  transform:
    translateY(
      -50%
    );

  pointer-events:
    none;

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

.dashboard-period-control:focus-within {
  border-color:
    var(
      --dashboard-line-strong
    );
}

/* =========================================================
   ACTUALIZACIÓN
   ========================================================= */

.dashboard-update-information {
  min-width:
    184px;

  min-height:
    52px;

  padding:
    8px
    12px;

  display:
    grid;

  align-content:
    center;

  gap:
    2px;

  border:
    1px solid
    var(
      --dashboard-line
    );

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

  background:
    var(
      --dashboard-panel-soft
    );
}

.dashboard-update-information span {
  color:
    var(
      --dashboard-text-muted
    );

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}

.dashboard-update-information strong {
  overflow:
    hidden;

  color:
    var(
      --dashboard-text
    );

  font-size:
    11px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

/* =========================================================
   CONTENIDO
   ========================================================= */

.executive-dashboard__content {
  display:
    grid;

  gap:
    16px;
}

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

.dashboard-loading-state {
  min-height:
    420px;

  padding:
    30px;

  display:
    grid;

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

  place-content:
    center;

  align-items:
    center;

  gap:
    14px;

  border:
    1px solid
    var(
      --dashboard-line
    );

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

  background:
    var(
      --dashboard-panel
    );
}

.dashboard-loading-state__spinner {
  width:
    30px;

  height:
    30px;

  border:
    2px solid
    rgba(
      17,
      17,
      17,
      0.12
    );

  border-top-color:
    #111111;

  border-radius:
    50%;

  animation:
    dashboardSpin
    0.75s
    linear
    infinite;
}

.dashboard-loading-state > div {
  display:
    grid;

  gap:
    2px;
}

.dashboard-loading-state strong {
  font-size:
    14px;

  font-weight:
    800;
}

.dashboard-loading-state span {
  color:
    var(
      --dashboard-text-muted
    );

  font-size:
    11px;
}

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

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

.dashboard-error-state {
  min-height:
    220px;

  padding:
    28px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    16px;

  border:
    1px solid
    rgba(
      180,
      35,
      24,
      0.22
    );

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

  background:
    var(
      --dashboard-danger-soft
    );
}

.dashboard-error-state__icon {
  width:
    44px;

  height:
    44px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(
      180,
      35,
      24,
      0.2
    );

  border-radius:
    50%;

  background:
    #ffffff;

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

.dashboard-error-state strong {
  font-size:
    14px;

  font-weight:
    800;
}

.dashboard-error-state p {
  margin:
    3px
    0
    0;

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

  font-size:
    11px;
}

.dashboard-retry-button {
  min-height:
    38px;

  padding:
    0
    12px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  border:
    1px solid
    var(
      --dashboard-line-strong
    );

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

  background:
    #ffffff;

  color:
    var(
      --dashboard-text
    );

  font-size:
    11px;

  font-weight:
    800;
}

.dashboard-retry-button:hover {
  border-color:
    #111111;

  background:
    #111111;

  color:
    #ffffff;
}

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

.dashboard-kpis {
  display:
    grid;

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

  overflow:
    hidden;

  border:
    1px solid
    var(
      --dashboard-line
    );

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

  background:
    var(
      --dashboard-panel
    );
}

.dashboard-kpi {
  min-width:
    0;

  min-height:
    124px;

  padding:
    16px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    10px;

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

.dashboard-kpi:last-child {
  border-right:
    0;
}

.dashboard-kpi__header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}

.dashboard-kpi__header span {
  color:
    var(
      --dashboard-text-muted
    );

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}

.dashboard-kpi__header svg {
  width:
    17px;

  height:
    17px;

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

  stroke-width:
    1.7;
}

.dashboard-kpi__value {
  overflow:
    hidden;

  color:
    var(
      --dashboard-text
    );

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

  font-weight:
    800;

  letter-spacing:
    -0.045em;

  line-height:
    1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.dashboard-kpi__variation {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;

  font-size:
    10px;

  font-weight:
    800;
}

.dashboard-kpi__variation svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2;
}

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

  font-size:
    9px;

  font-weight:
    600;
}

.dashboard-kpi__variation.is-positive {
  color:
    var(
      --dashboard-success
    );
}

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

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

/* =========================================================
   GRILLAS PRINCIPALES
   ========================================================= */

.dashboard-primary-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.7fr
    )
    minmax(
      300px,
      0.8fr
    );

  align-items:
    stretch;

  gap:
    16px;
}

.dashboard-secondary-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.45fr
    )
    minmax(
      300px,
      0.75fr
    );

  align-items:
    stretch;

  gap:
    16px;
}

.dashboard-tertiary-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.4fr
    )
    minmax(
      300px,
      0.8fr
    );

  align-items:
    stretch;

  gap:
    16px;
}

/* =========================================================
   PANELES
   ========================================================= */

.dashboard-panel {
  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid
    var(
      --dashboard-line
    );

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

  background:
    var(
      --dashboard-panel
    );
}

.dashboard-panel__header {
  min-height:
    80px;

  padding:
    15px
    17px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  border-bottom:
    1px solid
    var(
      --dashboard-line
    );

  background:
    var(
      --dashboard-panel-soft
    );
}

.dashboard-panel__header > div {
  min-width:
    0;
}

.dashboard-panel__header h3 {
  margin:
    4px
    0
    0;

  color:
    var(
      --dashboard-text
    );

  font-size:
    17px;

  font-weight:
    800;

  letter-spacing:
    -0.03em;
}

.dashboard-panel__header p {
  margin:
    4px
    0
    0;

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

  font-size:
    10px;

  line-height:
    1.45;
}

.dashboard-panel__icon {
  width:
    36px;

  height:
    36px;

  display:
    grid;

  flex:
    0
    0
    auto;

  place-items:
    center;

  border:
    1px solid
    var(
      --dashboard-line
    );

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

  background:
    #ffffff;

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

.dashboard-panel__icon svg {
  width:
    17px;

  height:
    17px;

  stroke-width:
    1.8;
}

.dashboard-panel__body {
  min-width:
    0;

  min-height:
    0;
}

/* =========================================================
   GRÁFICO DE VENTAS
   ========================================================= */

.dashboard-sales-chart {
  padding:
    16px
    17px
    14px;

  display:
    grid;

  gap:
    15px;
}

.dashboard-sales-chart__summary {
  display:
    grid;

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

  overflow:
    hidden;

  border:
    1px solid
    var(
      --dashboard-line
    );

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

  background:
    var(
      --dashboard-panel-soft
    );
}

.dashboard-sales-chart__summary > div {
  min-width:
    0;

  padding:
    11px
    13px;

  display:
    grid;

  gap:
    2px;

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

.dashboard-sales-chart__summary > div:last-child {
  border-right:
    0;
}

.dashboard-sales-chart__summary span {
  color:
    var(
      --dashboard-text-muted
    );

  font-size:
    9px;

  font-weight:
    700;

  text-transform:
    uppercase;
}

.dashboard-sales-chart__summary strong {
  overflow:
    hidden;

  font-size:
    17px;

  font-weight:
    800;

  letter-spacing:
    -0.03em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.dashboard-chart {
  min-width:
    0;

  min-height:
    260px;

  padding:
    10px
    0
    0;

  overflow:
    hidden;
}

.dashboard-chart__svg {
  width:
    100%;

  height:
    240px;

  overflow:
    visible;
}

.dashboard-chart__grid-line {
  stroke:
    var(
      --dashboard-line
    );

  stroke-width:
    1;

  vector-effect:
    non-scaling-stroke;
}

.dashboard-chart__line {
  fill:
    none;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  stroke-width:
    2.3;

  vector-effect:
    non-scaling-stroke;
}

.dashboard-chart__line--current {
  stroke:
    #111111;
}

.dashboard-chart__line--previous {
  stroke:
    #b6b6b6;

  stroke-dasharray:
    5
    5;
}

.dashboard-chart__labels {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        52px,
        1fr
      )
    );

  gap:
    4px;
}

.dashboard-chart__labels span {
  overflow:
    hidden;

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

  font-size:
    8px;

  text-align:
    center;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.dashboard-chart__legend {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    14px;

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

  font-size:
    9px;

  font-weight:
    700;
}

.dashboard-chart__legend span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;
}

.dashboard-chart__legend i {
  width:
    18px;

  height:
    2px;

  display:
    block;

  background:
    #111111;
}

.dashboard-chart__legend i.is-previous {
  background:
    repeating-linear-gradient(
      90deg,
      #b6b6b6
      0
      4px,
      transparent
      4px
      7px
    );
}

/* =========================================================
   ESTADO DE PEDIDOS
   ========================================================= */

.dashboard-status-list {
  display:
    grid;
}

.dashboard-status-row {
  padding:
    12px
    15px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px
    14px;

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

.dashboard-status-row:last-child {
  border-bottom:
    0;
}

.dashboard-status-row__main {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}

.dashboard-status-row__main strong {
  overflow:
    hidden;

  font-size:
    11px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.dashboard-status-row__dot {
  width:
    8px;

  height:
    8px;

  flex:
    0
    0
    auto;

  border-radius:
    50%;

  background:
    var(
      --dashboard-text-muted
    );
}

.dashboard-status-row__metrics {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}

.dashboard-status-row__metrics strong {
  font-size:
    12px;

  font-weight:
    800;
}

.dashboard-status-row__metrics span {
  min-width:
    42px;

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

  font-size:
    9px;

  text-align:
    right;
}

.dashboard-status-row__bar {
  grid-column:
    1
    /
    -1;

  height:
    4px;

  overflow:
    hidden;

  border-radius:
    20px;

  background:
    var(
      --dashboard-panel-soft
    );
}

.dashboard-status-row__bar > span {
  height:
    100%;

  display:
    block;

  border-radius:
    inherit;

  background:
    var(
      --dashboard-text-muted
    );
}

.dashboard-status-row__dot.is-success,
.dashboard-status-row__bar > span.is-success {
  background:
    var(
      --dashboard-success
    );
}

.dashboard-status-row__dot.is-warning,
.dashboard-status-row__bar > span.is-warning {
  background:
    var(
      --dashboard-warning
    );
}

.dashboard-status-row__dot.is-danger,
.dashboard-status-row__bar > span.is-danger {
  background:
    var(
      --dashboard-danger
    );
}

.dashboard-status-row__dot.is-info,
.dashboard-status-row__bar > span.is-info {
  background:
    var(
      --dashboard-info
    );
}

.dashboard-status-row__dot.is-progress,
.dashboard-status-row__bar > span.is-progress {
  background:
    var(
      --dashboard-progress
    );
}

.dashboard-status-row__dot.is-neutral,
.dashboard-status-row__bar > span.is-neutral {
  background:
    var(
      --dashboard-text-muted
    );
}

/* =========================================================
   RANKING DE PRODUCTOS
   ========================================================= */

.dashboard-ranking {
  display:
    grid;
}

.dashboard-ranking__header {
  min-height:
    34px;

  padding:
    0
    14px
    0
    48px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    12px;

  border-bottom:
    1px solid
    var(
      --dashboard-line
    );

  background:
    var(
      --dashboard-panel-soft
    );

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

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}

.dashboard-ranking__header span:nth-child(
  2
),
.dashboard-ranking__header span:nth-child(
  3
) {
  text-align:
    right;
}

.dashboard-ranking__row {
  min-height:
    62px;

  padding:
    10px
    14px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

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

.dashboard-ranking__row:last-child {
  border-bottom:
    0;
}

.dashboard-ranking__position {
  width:
    24px;

  height:
    24px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --dashboard-line
    );

  border-radius:
    50%;

  background:
    var(
      --dashboard-panel-soft
    );

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

  font-size:
    9px;

  font-weight:
    800;
}

.dashboard-ranking__identity {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}

.dashboard-ranking__identity strong {
  overflow:
    hidden;

  color:
    var(
      --dashboard-text
    );

  font-size:
    11px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.dashboard-ranking__identity span {
  overflow:
    hidden;

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

  font-size:
    9px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.dashboard-ranking__units,
.dashboard-ranking__sales {
  overflow:
    hidden;

  font-size:
    11px;

  font-weight:
    800;

  text-align:
    right;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

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

.dashboard-alert-list {
  display:
    grid;
}

.dashboard-alert {
  min-height:
    64px;

  padding:
    11px
    13px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  border-bottom:
    1px solid
    var(
      --dashboard-line
    );

  border-left:
    3px solid
    transparent;
}

.dashboard-alert:last-child {
  border-bottom:
    0;
}

.dashboard-alert.is-danger {
  border-left-color:
    var(
      --dashboard-danger
    );

  background:
    var(
      --dashboard-danger-soft
    );
}

.dashboard-alert.is-warning {
  border-left-color:
    var(
      --dashboard-warning
    );

  background:
    var(
      --dashboard-warning-soft
    );
}

.dashboard-alert.is-success {
  border-left-color:
    var(
      --dashboard-success
    );

  background:
    var(
      --dashboard-success-soft
    );
}

.dashboard-alert.is-info {
  border-left-color:
    var(
      --dashboard-info
    );

  background:
    var(
      --dashboard-info-soft
    );
}

.dashboard-alert__icon {
  width:
    31px;

  height:
    31px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --dashboard-line
    );

  border-radius:
    50%;

  background:
    #ffffff;
}

.dashboard-alert__icon svg {
  width:
    15px;

  height:
    15px;

  stroke-width:
    2;
}

.dashboard-alert.is-danger
.dashboard-alert__icon {
  color:
    var(
      --dashboard-danger
    );
}

.dashboard-alert.is-warning
.dashboard-alert__icon {
  color:
    var(
      --dashboard-warning
    );
}

.dashboard-alert.is-success
.dashboard-alert__icon {
  color:
    var(
      --dashboard-success
    );
}

.dashboard-alert.is-info
.dashboard-alert__icon {
  color:
    var(
      --dashboard-info
    );
}

.dashboard-alert__content {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}

.dashboard-alert__content strong {
  overflow:
    hidden;

  font-size:
    11px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.dashboard-alert__content p {
  margin:
    0;

  display:
    -webkit-box;

  overflow:
    hidden;

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

  font-size:
    9px;

  line-height:
    1.4;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;
}

.dashboard-alert__count {
  min-width:
    28px;

  height:
    28px;

  padding:
    0
    7px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --dashboard-line
    );

  border-radius:
    20px;

  background:
    #ffffff;

  font-size:
    10px;

  font-weight:
    800;
}

.dashboard-alerts-empty {
  min-height:
    240px;

  padding:
    24px;

  display:
    grid;

  place-items:
    center;

  align-content:
    center;

  gap:
    10px;

  text-align:
    center;
}

.dashboard-alerts-empty > span {
  width:
    46px;

  height:
    46px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    var(
      --dashboard-success-soft
    );

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

.dashboard-alerts-empty strong {
  font-size:
    13px;

  font-weight:
    800;
}

.dashboard-alerts-empty p {
  max-width:
    290px;

  margin:
    0;

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

  font-size:
    10px;

  line-height:
    1.5;
}

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

.dashboard-customers-table {
  display:
    grid;
}

.dashboard-customers-table__header {
  min-height:
    34px;

  padding:
    0
    14px;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    74px
    114px
    92px;

  align-items:
    center;

  gap:
    12px;

  border-bottom:
    1px solid
    var(
      --dashboard-line
    );

  background:
    var(
      --dashboard-panel-soft
    );

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

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}

.dashboard-customers-table__header span:not(
  :first-child
) {
  text-align:
    right;
}

.dashboard-customers-table__row {
  min-height:
    66px;

  padding:
    10px
    14px;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    74px
    114px
    92px;

  align-items:
    center;

  gap:
    12px;

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

.dashboard-customers-table__row:last-child {
  border-bottom:
    0;
}

.dashboard-customers-table__row >
strong,
.dashboard-customers-table__row >
span {
  overflow:
    hidden;

  font-size:
    10px;

  font-weight:
    800;

  text-align:
    right;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.dashboard-customers-table__row >
span {
  color:
    var(
      --dashboard-text-soft
    );

  font-weight:
    600;
}

.dashboard-customer-identity {
  min-width:
    0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;
}

.dashboard-customer-identity__avatar {
  width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --dashboard-line
    );

  border-radius:
    50%;

  background:
    var(
      --dashboard-panel-soft
    );

  font-size:
    9px;

  font-weight:
    800;
}

.dashboard-customer-identity > div {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}

.dashboard-customer-identity strong {
  overflow:
    hidden;

  font-size:
    11px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.dashboard-customer-identity span {
  overflow:
    hidden;

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

  font-size:
    8px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

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

.dashboard-distribution {
  display:
    grid;

  padding:
    4px
    0;
}

.dashboard-distribution__row {
  padding:
    11px
    14px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px
    12px;

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

.dashboard-distribution__row:last-child {
  border-bottom:
    0;
}

.dashboard-distribution__identity {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}

.dashboard-distribution__identity strong {
  overflow:
    hidden;

  font-size:
    10px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.dashboard-distribution__identity span {
  overflow:
    hidden;

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

  font-size:
    9px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.dashboard-distribution__percentage {
  font-size:
    11px;

  font-weight:
    800;
}

.dashboard-distribution__bar {
  grid-column:
    1
    /
    -1;

  height:
    5px;

  overflow:
    hidden;

  border-radius:
    20px;

  background:
    var(
      --dashboard-panel-soft
    );
}

.dashboard-distribution__bar span {
  height:
    100%;

  display:
    block;

  border-radius:
    inherit;

  background:
    #111111;
}

/* =========================================================
   ACTIVIDAD RECIENTE
   ========================================================= */

.dashboard-activity-list {
  display:
    grid;

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

.dashboard-activity {
  min-height:
    72px;

  padding:
    12px
    14px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  border-right:
    1px solid
    var(
      --dashboard-line
    );

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

.dashboard-activity:nth-child(
  2n
) {
  border-right:
    0;
}

.dashboard-activity:nth-last-child(
  -n + 2
) {
  border-bottom:
    0;
}

.dashboard-activity__icon {
  width:
    34px;

  height:
    34px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --dashboard-line
    );

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

  background:
    var(
      --dashboard-panel-soft
    );

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

.dashboard-activity__icon svg {
  width:
    16px;

  height:
    16px;

  stroke-width:
    1.8;
}

.dashboard-activity__content {
  min-width:
    0;

  display:
    grid;

  gap:
    2px;
}

.dashboard-activity__content strong {
  overflow:
    hidden;

  font-size:
    10px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.dashboard-activity__content p {
  margin:
    0;

  display:
    -webkit-box;

  overflow:
    hidden;

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

  font-size:
    9px;

  line-height:
    1.4;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;
}

.dashboard-activity time {
  color:
    var(
      --dashboard-text-muted
    );

  font-size:
    8px;

  font-weight:
    700;

  white-space:
    nowrap;
}

/* =========================================================
   ESTADOS VACÍOS
   ========================================================= */

.dashboard-panel-empty {
  min-height:
    250px;

  padding:
    28px;

  display:
    grid;

  place-items:
    center;

  align-content:
    center;

  gap:
    8px;

  text-align:
    center;
}

.dashboard-panel-empty > span {
  width:
    46px;

  height:
    46px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --dashboard-line
    );

  border-radius:
    50%;

  background:
    var(
      --dashboard-panel-soft
    );

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

.dashboard-panel-empty > span svg {
  width:
    20px;

  height:
    20px;

  stroke-width:
    1.7;
}

.dashboard-panel-empty strong {
  margin-top:
    3px;

  font-size:
    13px;

  font-weight:
    800;
}

.dashboard-panel-empty p {
  max-width:
    320px;

  margin:
    0;

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

  font-size:
    10px;

  line-height:
    1.5;
}

/* =========================================================
   RESPONSIVE 1400
   ========================================================= */

@media (
  max-width:
  1400px
) {
  .dashboard-kpis {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }

  .dashboard-kpi:nth-child(
    3
  ) {
    border-right:
      0;
  }

  .dashboard-kpi:nth-child(
    -n + 3
  ) {
    border-bottom:
      1px solid
      var(
        --dashboard-line
      );
  }

  .dashboard-kpi:nth-child(
    4
  ) {
    grid-column:
      span
      1;
  }

  .dashboard-kpi:nth-child(
    5
  ) {
    border-right:
      0;
  }

  .dashboard-customers-table__header,
  .dashboard-customers-table__row {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      64px
      100px
      82px;
  }
}

/* =========================================================
   RESPONSIVE 1180
   ========================================================= */

@media (
  max-width:
  1180px
) {
  .dashboard-primary-grid,
  .dashboard-secondary-grid,
  .dashboard-tertiary-grid {
    grid-template-columns:
      1fr;
  }

  .dashboard-panel--orders,
  .dashboard-panel--alerts,
  .dashboard-panel--distribution {
    min-height:
      auto;
  }
}

/* =========================================================
   RESPONSIVE 900
   ========================================================= */

@media (
  max-width:
  900px
) {
  .executive-dashboard__header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .executive-dashboard__controls {
    width:
      100%;

    justify-content:
      flex-start;
  }

  .dashboard-period-control,
  .dashboard-update-information {
    flex:
      1;
  }

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

  .dashboard-kpi,
  .dashboard-kpi:nth-child(
    3
  ),
  .dashboard-kpi:nth-child(
    4
  ),
  .dashboard-kpi:nth-child(
    5
  ) {
    border-right:
      1px solid
      var(
        --dashboard-line
      );

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

  .dashboard-kpi:nth-child(
    2n
  ) {
    border-right:
      0;
  }

  .dashboard-kpi:last-child {
    grid-column:
      1
      /
      -1;

    border-right:
      0;

    border-bottom:
      0;
  }

  .dashboard-activity-list {
    grid-template-columns:
      1fr;
  }

  .dashboard-activity,
  .dashboard-activity:nth-child(
    2n
  ),
  .dashboard-activity:nth-last-child(
    -n + 2
  ) {
    border-right:
      0;

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

  .dashboard-activity:last-child {
    border-bottom:
      0;
  }
}

/* =========================================================
   RESPONSIVE 720
   ========================================================= */

@media (
  max-width:
  720px
) {
  .executive-dashboard__header {
    padding:
      16px;
  }

  .executive-dashboard__controls {
    display:
      grid;

    grid-template-columns:
      1fr;
  }

  .dashboard-period-control,
  .dashboard-update-information {
    min-width:
      0;
  }

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

  .dashboard-kpi,
  .dashboard-kpi:nth-child(
    2n
  ),
  .dashboard-kpi:nth-child(
    3
  ),
  .dashboard-kpi:nth-child(
    4
  ),
  .dashboard-kpi:nth-child(
    5
  ),
  .dashboard-kpi:last-child {
    grid-column:
      auto;

    border-right:
      0;

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

  .dashboard-kpi:last-child {
    border-bottom:
      0;
  }

  .dashboard-error-state {
    grid-template-columns:
      auto
      minmax(
        0,
        1fr
      );
  }

  .dashboard-retry-button {
    grid-column:
      1
      /
      -1;

    width:
      100%;
  }

  .dashboard-ranking__header {
    display:
      none;
  }

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

    grid-template-areas:
      "position identity units"
      "position identity sales";
  }

  .dashboard-ranking__position {
    grid-area:
      position;
  }

  .dashboard-ranking__identity {
    grid-area:
      identity;
  }

  .dashboard-ranking__units {
    grid-area:
      units;
  }

  .dashboard-ranking__sales {
    grid-area:
      sales;
  }

  .dashboard-customers-table__header {
    display:
      none;
  }

  .dashboard-customers-table__row {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      auto;

    gap:
      6px
      12px;
  }

  .dashboard-customers-table__row >
strong,
  .dashboard-customers-table__row >
span {
    text-align:
      right;
  }

  .dashboard-customers-table__row >
strong:nth-child(
    2
  )::before {
    content:
      "Pedidos: ";

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

    font-weight:
      600;
  }

  .dashboard-customers-table__row >
strong:nth-child(
    3
  )::before {
    content:
      "Total: ";

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

    font-weight:
      600;
  }

  .dashboard-customers-table__row >
span::before {
    content:
      "Última compra: ";

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

    font-weight:
      600;
  }

  .dashboard-customer-identity {
    grid-row:
      1
      /
      4;
  }

  .dashboard-chart__labels {
    display:
      none;
  }
}

/* =========================================================
   RESPONSIVE 520
   ========================================================= */

@media (
  max-width:
  520px
) {
  .executive-dashboard__heading h2 {
    font-size:
      23px;
  }

  .dashboard-panel__header {
    padding:
      14px;
  }

  .dashboard-panel__header p {
    display:
      none;
  }

  .dashboard-sales-chart {
    padding:
      14px;
  }

  .dashboard-sales-chart__summary {
    grid-template-columns:
      1fr;
  }

  .dashboard-sales-chart__summary > div {
    border-right:
      0;

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

  .dashboard-sales-chart__summary > div:last-child {
    border-bottom:
      0;
  }

  .dashboard-chart {
    min-height:
      210px;
  }

  .dashboard-chart__svg {
    height:
      200px;
  }

  .dashboard-status-row {
    padding:
      11px
      13px;
  }

  .dashboard-alert {
    grid-template-columns:
      auto
      minmax(
        0,
        1fr
      );
  }

  .dashboard-alert__count {
    grid-column:
      2;

    justify-self:
      start;
  }

  .dashboard-activity {
    grid-template-columns:
      auto
      minmax(
        0,
        1fr
      );
  }

  .dashboard-activity time {
    grid-column:
      2;

    justify-self:
      start;
  }
}

/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {
  .dashboard-loading-state__spinner {
    animation:
      none;
  }

  .executive-dashboard *,
  .executive-dashboard *::before,
  .executive-dashboard *::after {
    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }
}