/* =========================================================
   WIRTZ HUB · DIRECCIÓN EJECUTIVA
   VENTAS DEL DÍA

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

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


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

.executive-sales-day-page {
  --sales-bg: #f4f6f8;
  --sales-surface: #ffffff;
  --sales-surface-soft: #f8fafb;
  --sales-surface-muted: #f1f4f6;

  --sales-border: #d8dde3;
  --sales-border-strong: #bec6cf;
  --sales-border-soft: #e7eaee;

  --sales-text: #111418;
  --sales-text-secondary: #41474f;
  --sales-text-muted: #69717b;
  --sales-text-soft: #858d97;

  --sales-primary: #111418;
  --sales-primary-hover: #252a30;
  --sales-primary-soft: #eef0f2;

  --sales-success: #18784c;
  --sales-success-bg: #edf8f2;
  --sales-success-border: #c7e8d7;

  --sales-warning: #986200;
  --sales-warning-bg: #fff8e8;
  --sales-warning-border: #ead7a6;

  --sales-danger: #b42318;
  --sales-danger-bg: #fff1f0;
  --sales-danger-border: #f2c6c2;

  --sales-info: #175cd3;
  --sales-info-bg: #eff6ff;
  --sales-info-border: #c7daf9;

  --sales-radius-xs: 7px;
  --sales-radius-sm: 9px;
  --sales-radius-md: 12px;
  --sales-radius-lg: 15px;
  --sales-radius-xl: 18px;

  --sales-shadow-xs:
    0 1px 2px rgba(16, 24, 40, 0.04);

  --sales-shadow-sm:
    0 2px 7px rgba(16, 24, 40, 0.055);

  --sales-shadow-md:
    0 8px 28px rgba(16, 24, 40, 0.08);

  --sales-transition-fast:
    120ms cubic-bezier(0.4, 0, 0.2, 1);

  --sales-transition:
    180ms cubic-bezier(0.4, 0, 0.2, 1);

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

  --sales-page-inline:
    clamp(16px, 2vw, 30px);

  --sales-section-gap:
    18px;
}


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

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


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


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


.executive-sales-day-page svg {
  display: block;
  flex: 0 0 auto;
}


.executive-sales-day-page a {
  color: inherit;
}


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

body.executive-sales-day-page {
  background:
    var(--sales-bg);

  color:
    var(--sales-text);

  overflow-x:
    hidden;
}


/* =========================================================
   PÁGINA
   ========================================================= */

.sales-day-page {
  position: relative;

  width: 100%;
  min-width: 0;
  min-height: calc(100vh - 64px);

  background:
    var(--sales-bg);

  color:
    var(--sales-text);

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

  font-size: 14px;
  font-weight: 500;

  line-height: 1.5;

  overflow-x: clip;
}


.sales-day-page--executive {
  isolation: isolate;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.sales-day-workspace {
  width: 100%;
  max-width: 1920px;

  margin: 0 auto;

  padding:
    24px
    var(--sales-page-inline)
    38px;

  display: flex;
  flex-direction: column;
  gap: var(--sales-section-gap);

  min-width: 0;
}


/* =========================================================
   SECCIONES
   ========================================================= */

.sales-day-section,
.sales-day-overview,
.sales-day-command,
.sales-day-status {
  width: 100%;
  min-width: 0;
}


.sales-day-section {
  position: relative;
}


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

.sales-day-command {
  position: relative;

  display: block;

  background:
    var(--sales-surface);

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

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

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

  overflow: visible;

  animation:
    salesDayEnter
    220ms
    ease-out
    both;
}


.sales-day-command__hero {
  min-height: 118px;

  padding: 22px 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}


.sales-day-command__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 7px;

  min-width: 0;
  flex: 1 1 auto;
}


.sales-day-command__eyebrow-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 8px;

  min-width: 0;
}


.sales-day-command__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 10px;

  width: 100%;
  min-width: 0;
}


.sales-day-command__title-row h1 {
  margin: 0;

  color:
    var(--sales-text);

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

  font-weight: 800;

  line-height: 1.1;

  letter-spacing:
    -0.045em;
}


.sales-day-command__identity > p {
  max-width: 850px;

  margin: 0;

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

  font-size: 13.5px;
  font-weight: 550;

  line-height: 1.55;
}


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

.sales-day-eyebrow {
  display: inline-flex;
  align-items: center;

  min-height: 22px;

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

  font-size: 10px;

  font-weight: 800;

  line-height: 1;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


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

.sales-day-command__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 7px;

  margin-top: 5px;
}


.sales-day-command__meta-item {
  min-height: 31px;

  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding: 0 10px;

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

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

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

  border-radius:
    8px;

  font-size: 11.5px;
  font-weight: 650;

  white-space: nowrap;
}


.sales-day-command__meta-item strong {
  color:
    var(--sales-text);

  font-weight: 800;
}


.sales-day-command__meta-icon {
  width: 22px;
  height: 22px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

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

  flex: 0 0 auto;
}


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

.sales-day-command__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;

  gap: 8px;

  flex: 0 0 auto;
}


/* =========================================================
   BOTONES
   ========================================================= */

.sales-day-btn {
  appearance: none;

  min-height: 39px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding:
    0 14px;

  border:
    1px solid transparent;

  border-radius:
    9px;

  outline:
    none;

  font-size:
    12.5px;

  font-weight:
    750;

  line-height:
    1;

  letter-spacing:
    -0.01em;

  white-space:
    nowrap;

  cursor:
    pointer;

  user-select:
    none;

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


.sales-day-btn:hover:not(:disabled) {
  transform:
    translateY(-1px);
}


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


.sales-day-btn:focus-visible {
  outline:
    3px solid rgba(17, 20, 24, 0.12);

  outline-offset:
    2px;
}


.sales-day-btn:disabled {
  opacity: 0.46;

  cursor:
    not-allowed;

  transform:
    none;

  pointer-events:
    none;
}


/* =========================================================
   BOTÓN PRIMARIO
   ========================================================= */

.sales-day-btn--primary {
  color:
    #ffffff;

  background:
    var(--sales-primary);

  border-color:
    var(--sales-primary);

  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08);
}


.sales-day-btn--primary:hover:not(:disabled) {
  color:
    #ffffff;

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

  border-color:
    var(--sales-primary-hover);

  box-shadow:
    0 4px 12px rgba(17, 20, 24, 0.16);
}


/* =========================================================
   BOTÓN GHOST
   ========================================================= */

.sales-day-btn--ghost {
  color:
    var(--sales-text);

  background:
    var(--sales-surface);

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


.sales-day-btn--ghost:hover:not(:disabled) {
  background:
    var(--sales-surface-soft);

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


/* =========================================================
   BOTÓN SUBTLE
   ========================================================= */

.sales-day-btn--subtle {
  color:
    var(--sales-text-secondary);

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

  border-color:
    transparent;
}


.sales-day-btn--subtle:hover:not(:disabled) {
  color:
    var(--sales-text);

  background:
    #e9edf1;
}


/* =========================================================
   BOTÓN COMPACTO
   ========================================================= */

.sales-day-btn--compact {
  min-height: 34px;

  padding:
    0 11px;

  font-size:
    11.5px;

  border-radius:
    8px;
}


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

.sales-day-icon-btn {
  appearance:
    none;

  width:
    38px;

  height:
    38px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  padding:
    0;

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

  background:
    var(--sales-surface);

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

  border-radius:
    9px;

  outline:
    none;

  cursor:
    pointer;

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


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

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

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

  transform:
    translateY(-1px);
}


.sales-day-icon-btn:active:not(:disabled) {
  transform:
    translateY(0);
}


.sales-day-icon-btn:focus-visible {
  outline:
    3px solid rgba(17, 20, 24, 0.12);

  outline-offset:
    2px;
}


.sales-day-icon-btn:disabled {
  opacity:
    0.45;

  cursor:
    not-allowed;
}


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

.sales-day-status:empty {
  display:
    none;
}


/* =========================================================
   INLINE ALERT
   ========================================================= */

.sales-day-inline-alert {
  width: 100%;

  min-height: 48px;

  display: flex;
  align-items: center;

  gap: 11px;

  padding:
    11px 14px;

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

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

  background:
    var(--sales-surface);

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

  font-size:
    12.5px;

  font-weight:
    600;

  animation:
    salesDayFadeIn
    var(--sales-transition)
    both;
}


.sales-day-inline-alert > svg,
.sales-day-inline-alert > i {
  flex:
    0 0 auto;
}


.sales-day-inline-alert > div {
  min-width:
    0;

  flex:
    1 1 auto;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.sales-day-inline-alert strong {
  display:
    block;

  color:
    var(--sales-text);

  font-weight:
    800;
}


.sales-day-inline-alert span {
  color:
    inherit;

  font-weight:
    550;
}


.sales-day-inline-alert button {
  appearance:
    none;

  min-height:
    32px;

  padding:
    0 11px;

  color:
    inherit;

  background:
    rgba(255, 255, 255, 0.7);

  border:
    1px solid currentColor;

  border-radius:
    7px;

  font-size:
    11.5px;

  font-weight:
    750;

  cursor:
    pointer;
}


.sales-day-inline-alert--error {
  color:
    var(--sales-danger);

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

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


.sales-day-inline-alert--warning {
  color:
    var(--sales-warning);

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

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


.sales-day-inline-alert--loading {
  color:
    var(--sales-info);

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

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


.sales-day-inline-alert--loading svg,
.sales-day-inline-alert--loading [data-lucide="loader-circle"] {
  animation:
    salesDaySpin
    800ms
    linear
    infinite;
}


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

.sales-day-panel {
  position: relative;

  width: 100%;
  min-width: 0;

  background:
    var(--sales-surface);

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

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

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

  overflow:
    visible;

  transition:
    border-color var(--sales-transition),
    box-shadow var(--sales-transition),
    transform var(--sales-transition);
}


.sales-day-panel:hover {
  border-color:
    var(--sales-border-strong);

  box-shadow:
    var(--sales-shadow-sm);
}


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

.sales-day-panel__header {
  width:
    100%;

  min-height:
    79px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    17px 20px;

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

  background:
    var(--sales-surface);

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


.sales-day-panel__header > div:first-child {
  min-width:
    0;

  flex:
    1 1 auto;
}


.sales-day-panel__header h2 {
  margin:
    2px 0 0;

  color:
    var(--sales-text);

  font-size:
    16px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    -0.025em;
}


.sales-day-panel__header p {
  max-width:
    780px;

  margin:
    5px 0 0;

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

  font-size:
    12px;

  font-weight:
    550;

  line-height:
    1.5;
}


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

.sales-day-panel__actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    7px;

  flex:
    0 0 auto;
}


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

.sales-day-panel__body {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  padding:
    20px;
}


/* =========================================================
   FILTROS
   ========================================================= */

.sales-day-panel--filters {
  overflow:
    visible;
}


.sales-day-panel--filters.is-collapsed
.sales-day-panel__header {
  border-bottom:
    0;
}


.sales-day-panel--filters.is-collapsed
.sales-day-panel__body {
  display:
    none;
}


/* =========================================================
   FILTER GRID
   ========================================================= */

.sales-day-filter-grid {
  width:
    100%;

  display:
    grid;

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

  gap:
    14px;

  align-items:
    end;
}


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

.sales-day-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


.sales-day-field > label {
  color:
    var(--sales-text-secondary);

  font-size:
    10.5px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.025em;
}


.sales-day-field--search {
  position:
    relative;
}


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

.sales-day-input {
  appearance:
    none;

  width:
    100%;

  min-width:
    0;

  height:
    40px;

  padding:
    0 12px;

  color:
    var(--sales-text);

  background:
    var(--sales-surface);

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

  border-radius:
    9px;

  outline:
    none;

  font-size:
    12.5px;

  font-weight:
    650;

  line-height:
    1;

  box-shadow:
    inset 0 1px 1px rgba(16, 24, 40, 0.015);

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


.sales-day-input::placeholder {
  color:
    #9098a2;

  font-weight:
    500;

  opacity:
    1;
}


.sales-day-input:hover:not(:disabled) {
  border-color:
    var(--sales-border-strong);
}


.sales-day-input:focus {
  background:
    #ffffff;

  border-color:
    #727b85;

  box-shadow:
    0 0 0 3px rgba(17, 20, 24, 0.075);
}


.sales-day-input:disabled {
  background:
    var(--sales-surface-muted);

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

  cursor:
    not-allowed;
}


.sales-day-input--small {
  height:
    34px;

  font-size:
    11.5px;

  border-radius:
    8px;
}


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

select.sales-day-input {
  padding-right:
    36px;

  cursor:
    pointer;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      #68707a 50%
    ),
    linear-gradient(
      135deg,
      #68707a 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 16px) 17px,
    calc(100% - 11px) 17px;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat:
    no-repeat;
}


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

.sales-day-input-icon {
  position:
    absolute;

  left:
    11px;

  bottom:
    11px;

  width:
    18px;

  height:
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

  pointer-events:
    none;

  z-index:
    2;
}


.sales-day-field--search .sales-day-input {
  padding-left:
    37px;
}


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

.sales-day-filter-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  min-width:
    0;
}


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

.sales-day-count-badge,
.sales-day-status-chip,
.sales-day-source-chip,
.sales-day-cost-badge,
.sales-day-ok-badge {
  min-height:
    27px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  padding:
    0 9px;

  border-radius:
    7px;

  font-size:
    10.5px;

  font-weight:
    800;

  line-height:
    1;

  white-space:
    nowrap;
}


.sales-day-count-badge {
  color:
    var(--sales-text-secondary);

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

  border:
    1px solid var(--sales-border);
}


.sales-day-status-chip {
  color:
    var(--sales-text-secondary);

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

  border:
    1px solid var(--sales-border);
}


.sales-day-status-chip--success,
.sales-day-ok-badge {
  color:
    var(--sales-success);

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

  border:
    1px solid var(--sales-success-border);
}


.sales-day-status-chip--warning,
.sales-day-cost-badge {
  color:
    var(--sales-warning);

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

  border:
    1px solid var(--sales-warning-border);
}


.sales-day-source-chip {
  color:
    var(--sales-text-secondary);

  background:
    #ffffff;

  border:
    1px solid var(--sales-border);
}


/* =========================================================
   MONOSPACE
   ========================================================= */

.sales-day-mono {
  font-family:
    "JetBrains Mono",
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size:
    0.92em;

  font-weight:
    650;

  letter-spacing:
    -0.02em;
}


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

.sales-day-skeleton {
  position:
    relative;

  display:
    block;

  overflow:
    hidden;

  background:
    #e9edf0;

  border-radius:
    6px;
}


.sales-day-skeleton::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  transform:
    translateX(-110%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.7),
      transparent
    );

  animation:
    salesDaySkeleton
    1.25s
    ease-in-out
    infinite;
}


.sales-day-skeleton--eyebrow {
  width:
    84px;

  height:
    11px;
}


.sales-day-skeleton--hero-title {
  width:
    min(380px, 78%);

  height:
    28px;
}


.sales-day-skeleton--hero-text {
  width:
    min(520px, 92%);

  height:
    13px;
}


.sales-day-skeleton--button {
  width:
    98px;

  height:
    39px;

  border-radius:
    9px;
}


.sales-day-skeleton--label {
  width:
    92px;

  height:
    11px;
}


.sales-day-skeleton--title {
  width:
    150px;

  height:
    17px;
}


.sales-day-skeleton--value {
  width:
    140px;

  height:
    29px;
}


.sales-day-skeleton--text {
  width:
    70%;

  height:
    11px;
}


.sales-day-skeleton--row {
  width:
    100%;

  height:
    45px;

  border-radius:
    8px;
}


.sales-day-skeleton--chart {
  width:
    100%;

  min-height:
    240px;

  border-radius:
    10px;
}


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

.sales-day-command__skeleton {
  min-height:
    118px;

  padding:
    22px 24px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;
}


.sales-day-command__skeleton-main {
  flex:
    1 1 auto;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;
}


.sales-day-command__skeleton-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  flex:
    0 0 auto;
}


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

.executive-sales-day-page--busy
.sales-day-command__actions
.sales-day-btn--primary
[data-lucide="refresh-cw"],
.executive-sales-day-page--busy
[data-lucide="loader-circle"] {
  animation:
    salesDaySpin
    800ms
    linear
    infinite;
}


/* =========================================================
   DENSIDAD
   ========================================================= */

.sales-day-page[data-density="compact"]
.sales-day-workspace {
  --sales-section-gap:
    14px;
}


.sales-day-page[data-density="compact"]
.sales-day-panel__header {
  min-height:
    68px;

  padding:
    13px 17px;
}


.sales-day-page[data-density="compact"]
.sales-day-panel__body {
  padding:
    16px;
}


.sales-day-page[data-density="compact"]
.sales-day-command__hero {
  min-height:
    102px;

  padding:
    18px 20px;
}


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

@keyframes salesDayEnter {
  from {
    opacity:
      0;

    transform:
      translateY(5px);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }
}


@keyframes salesDayFadeIn {
  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}


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


@keyframes salesDaySkeleton {
  100% {
    transform:
      translateX(110%);
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1120px) {

  .sales-day-workspace {
    padding-top:
      19px;
  }


  .sales-day-command__hero {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .sales-day-command__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .sales-day-filter-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .sales-day-command__skeleton {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .sales-day-command__skeleton-actions {
    justify-content:
      flex-start;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .executive-sales-day-page {
    --sales-page-inline:
      12px;

    --sales-section-gap:
      13px;
  }


  .sales-day-workspace {
    padding-top:
      13px;

    padding-bottom:
      26px;
  }


  .sales-day-command {
    border-radius:
      12px;
  }


  .sales-day-command__hero {
    min-height:
      0;

    padding:
      17px 15px;

    gap:
      17px;
  }


  .sales-day-command__title-row h1 {
    font-size:
      22px;
  }


  .sales-day-command__identity > p {
    font-size:
      12px;
  }


  .sales-day-command__meta {
    width:
      100%;
  }


  .sales-day-command__meta-item {
    min-height:
      29px;

    font-size:
      10.5px;
  }


  .sales-day-command__actions {
    display:
      grid;

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

    width:
      100%;

    gap:
      7px;
  }


  .sales-day-command__actions
  .sales-day-btn {
    width:
      100%;
  }


  .sales-day-panel {
    border-radius:
      12px;
  }


  .sales-day-panel__header {
    min-height:
      0;

    padding:
      14px;

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      12px;
  }


  .sales-day-panel__header h2 {
    font-size:
      15px;
  }


  .sales-day-panel__header p {
    font-size:
      11.5px;
  }


  .sales-day-panel__actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .sales-day-panel__body {
    padding:
      14px;
  }


  .sales-day-filter-grid {
    grid-template-columns:
      1fr;

    gap:
      11px;
  }


  .sales-day-filter-actions {
    justify-content:
      stretch;

    width:
      100%;
  }


  .sales-day-filter-actions
  .sales-day-btn {
    flex:
      1 1 0;
  }


  .sales-day-input {
    height:
      42px;

    font-size:
      13px;
  }


  .sales-day-inline-alert {
    align-items:
      flex-start;

    flex-wrap:
      wrap;
  }


  .sales-day-inline-alert button {
    width:
      100%;
  }


  .sales-day-command__skeleton {
    min-height:
      0;

    padding:
      17px 15px;
  }


  .sales-day-command__skeleton-actions {
    display:
      grid;

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

    width:
      100%;
  }


  .sales-day-skeleton--button {
    width:
      100%;
  }
}


/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */

@media (max-width: 480px) {

  .sales-day-command__actions {
    grid-template-columns:
      1fr;
  }


  .sales-day-command__skeleton-actions {
    grid-template-columns:
      1fr;
  }


  .sales-day-btn {
    min-height:
      41px;
  }


  .sales-day-panel__actions {
    gap:
      6px;
  }
}


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

@media (prefers-reduced-motion: reduce) {

  .sales-day-page *,
  .sales-day-page *::before,
  .sales-day-page *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}


/* =========================================================
   FIN PARTE 1 DE 5
   ========================================================= *//* =========================================================
   WIRTZ HUB · DIRECCIÓN EJECUTIVA
   VENTAS DEL DÍA

   PARTE 2 DE 5

   KPIs
   RESUMEN EJECUTIVO
   FISCAL
   MERCADO PAGO
   ========================================================= */


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

.sales-day-overview-block {
  position: relative;

  width: 100%;
  min-width: 0;

  padding: 20px;

  background:
    var(--sales-surface);

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

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

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

  overflow:
    hidden;

  animation:
    salesDayEnter
    220ms
    ease-out
    both;
}


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

.sales-day-overview-block__head {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 18px;
}


.sales-day-overview-block__head > div:first-child {
  min-width: 0;

  flex: 1 1 auto;
}


.sales-day-overview-block__head h2 {
  margin: 3px 0 0;

  color:
    var(--sales-text);

  font-size:
    18px;

  font-weight:
    850;

  line-height:
    1.2;

  letter-spacing:
    -0.035em;
}


.sales-day-overview-block__period {
  min-height: 34px;

  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding:
    0 11px;

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

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

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

  border-radius:
    8px;

  font-size:
    11.5px;

  font-weight:
    750;

  white-space:
    nowrap;
}


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

.sales-day-executive-kpi-grid {
  width: 100%;

  display: grid;

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

  gap: 11px;
}


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

.sales-day-executive-kpi {
  position: relative;

  min-width: 0;
  min-height: 148px;

  display: flex;
  flex-direction: column;

  gap: 10px;

  padding: 15px;

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

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

  border-radius:
    11px;

  overflow:
    hidden;

  transition:
    transform var(--sales-transition),
    border-color var(--sales-transition),
    background-color var(--sales-transition),
    box-shadow var(--sales-transition);
}


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

  background:
    var(--sales-surface);

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

  box-shadow:
    var(--sales-shadow-sm);
}


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

.sales-day-executive-kpi--featured {
  background:
    #ffffff;

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


.sales-day-executive-kpi--featured::before {
  content: "";

  position: absolute;

  top: 0;
  left: 14px;
  right: 14px;

  height: 2px;

  background:
    var(--sales-text);

  border-radius:
    0 0 2px 2px;
}


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

.sales-day-executive-kpi__header {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;
}


.sales-day-executive-kpi__label {
  min-width: 0;

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

  font-size:
    10.5px;

  font-weight:
    800;

  line-height:
    1.25;

  letter-spacing:
    0.02em;

  text-transform:
    uppercase;
}


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

.sales-day-executive-kpi__icon {
  width: 31px;
  height: 31px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  color:
    var(--sales-text);

  background:
    #ffffff;

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

  border-radius:
    8px;
}


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

.sales-day-executive-kpi__value {
  display: block;

  min-width: 0;

  margin-top: 2px;

  color:
    var(--sales-text);

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

  font-weight:
    850;

  line-height:
    1.05;

  letter-spacing:
    -0.045em;

  font-variant-numeric:
    tabular-nums;

  overflow-wrap:
    anywhere;
}


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

.sales-day-executive-kpi__helper {
  display: block;

  min-height: 31px;

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

  font-size:
    10.5px;

  font-weight:
    550;

  line-height:
    1.45;
}


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

.sales-day-executive-kpi--positive
.sales-day-executive-kpi__value {
  color:
    var(--sales-success);
}


.sales-day-executive-kpi--positive
.sales-day-executive-kpi__icon {
  color:
    var(--sales-success);

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

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


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

.sales-day-executive-kpi--negative
.sales-day-executive-kpi__value {
  color:
    var(--sales-danger);
}


.sales-day-executive-kpi--negative
.sales-day-executive-kpi__icon {
  color:
    var(--sales-danger);

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

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


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

.sales-day-executive-kpi--warning
.sales-day-executive-kpi__value {
  color:
    var(--sales-warning);
}


.sales-day-executive-kpi--warning
.sales-day-executive-kpi__icon {
  color:
    var(--sales-warning);

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

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


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

.sales-day-executive-kpi__coverage {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 6px;

  margin-top: auto;
}


.sales-day-executive-kpi__coverage > span {
  color:
    var(--sales-text-secondary);

  font-size:
    9.5px;

  font-weight:
    750;

  line-height:
    1.2;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.sales-day-progress {
  position: relative;

  width: 100%;
  height: 5px;

  overflow: hidden;

  background:
    #e2e6e9;

  border-radius:
    999px;
}


.sales-day-progress__bar {
  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  display: block;

  min-width: 0;

  background:
    var(--sales-text);

  border-radius:
    inherit;

  transition:
    width
    360ms
    cubic-bezier(0.4, 0, 0.2, 1);
}


.sales-day-executive-kpi--positive
.sales-day-progress__bar {
  background:
    var(--sales-success);
}


.sales-day-executive-kpi--warning
.sales-day-progress__bar {
  background:
    var(--sales-warning);
}


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

.sales-day-executive-kpi.is-skeleton {
  pointer-events:
    none;
}


.sales-day-executive-kpi.is-skeleton:hover {
  transform:
    none;

  box-shadow:
    none;
}


/* =========================================================
   SUMMARY STRIP
   ========================================================= */

.sales-day-summary-strip {
  width: 100%;

  display: grid;

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

  margin-top:
    13px;

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

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

  border-radius:
    10px;

  overflow:
    hidden;
}


/* =========================================================
   SUMMARY ITEM
   ========================================================= */

.sales-day-summary-strip__item {
  position: relative;

  min-width: 0;
  min-height: 66px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 4px;

  padding:
    11px 15px;
}


.sales-day-summary-strip__item:not(:last-child) {
  border-right:
    1px solid var(--sales-border);
}


.sales-day-summary-strip__item > span {
  color:
    var(--sales-text-muted);

  font-size:
    9.5px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.045em;

  text-transform:
    uppercase;
}


.sales-day-summary-strip__item > strong {
  min-width:
    0;

  color:
    var(--sales-text);

  font-size:
    16px;

  font-weight:
    850;

  line-height:
    1.15;

  letter-spacing:
    -0.025em;

  font-variant-numeric:
    tabular-nums;
}


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

.sales-day-panel--financial {
  overflow:
    hidden;
}


.sales-day-panel--financial
.sales-day-panel__body {
  display: flex;
  flex-direction: column;

  gap: 17px;
}


/* =========================================================
   FINANCIAL GRID
   ========================================================= */

.sales-day-financial-grid {
  width: 100%;

  display: grid;

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

  gap:
    10px;
}


/* =========================================================
   FINANCIAL CARD
   ========================================================= */

.sales-day-financial-card {
  position: relative;

  min-width: 0;
  min-height: 128px;

  display: flex;
  flex-direction: column;

  gap: 8px;

  padding:
    14px;

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

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

  border-radius:
    10px;

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


.sales-day-financial-card:hover {
  background:
    #ffffff;

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

  transform:
    translateY(-1px);
}


/* =========================================================
   FINANCIAL FEATURED
   ========================================================= */

.sales-day-financial-card--featured {
  background:
    #ffffff;

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


.sales-day-financial-card--featured::after {
  content:
    "";

  position:
    absolute;

  top:
    10px;

  right:
    10px;

  width:
    5px;

  height:
    5px;

  background:
    var(--sales-text);

  border-radius:
    50%;
}


/* =========================================================
   FINANCIAL CARD HEAD
   ========================================================= */

.sales-day-financial-card__head {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 7px;
}


.sales-day-financial-card__icon {
  width: 27px;
  height: 27px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

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

  background:
    #ffffff;

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

  border-radius:
    7px;
}


.sales-day-financial-card__label {
  min-width:
    0;

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

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.3;

  letter-spacing:
    0.025em;

  text-transform:
    uppercase;
}


/* =========================================================
   FINANCIAL VALUE
   ========================================================= */

.sales-day-financial-card__value {
  display:
    block;

  min-width:
    0;

  margin-top:
    3px;

  color:
    var(--sales-text);

  font-size:
    clamp(15px, 1.15vw, 20px);

  font-weight:
    850;

  line-height:
    1.08;

  letter-spacing:
    -0.035em;

  font-variant-numeric:
    tabular-nums;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   FINANCIAL HELPER
   ========================================================= */

.sales-day-financial-card__helper {
  display:
    block;

  margin-top:
    auto;

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

  font-size:
    9.5px;

  font-weight:
    550;

  line-height:
    1.4;
}


/* =========================================================
   FINANCIAL SUMMARY
   ========================================================= */

.sales-day-financial-summary {
  width:
    100%;

  display:
    grid;

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

  align-items:
    stretch;

  gap:
    0;

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

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

  border-radius:
    10px;

  overflow:
    hidden;
}


.sales-day-financial-summary > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    4px;

  padding:
    13px 15px;
}


.sales-day-financial-summary > div > span {
  color:
    var(--sales-text-muted);

  font-size:
    9.5px;

  font-weight:
    800;

  letter-spacing:
    0.04em;

  text-transform:
    uppercase;
}


.sales-day-financial-summary > div > strong {
  color:
    var(--sales-text);

  font-size:
    15px;

  font-weight:
    850;

  line-height:
    1.15;

  font-variant-numeric:
    tabular-nums;

  letter-spacing:
    -0.025em;
}


.sales-day-financial-summary__operator {
  width:
    42px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

  background:
    #ffffff;

  border-left:
    1px solid var(--sales-border);

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

  font-size:
    18px;

  font-weight:
    700;
}


/* =========================================================
   FINANCIAL NOTE
   ========================================================= */

.sales-day-financial-note {
  width:
    100%;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    9px;

  padding:
    11px 13px;

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

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

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

  border-radius:
    9px;

  font-size:
    10.5px;

  font-weight:
    600;

  line-height:
    1.5;
}


.sales-day-financial-note > svg,
.sales-day-financial-note > i {
  margin-top:
    1px;

  flex:
    0 0 auto;

  color:
    var(--sales-text-secondary);
}


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

.sales-day-fiscal-section {
  animation:
    salesDayEnter
    250ms
    ease-out
    both;
}


/* =========================================================
   FISCAL PANEL COLLAPSED
   ========================================================= */

.sales-day-fiscal-section
.sales-day-panel__header:last-child {
  border-bottom:
    0;
}


/* =========================================================
   MERCADO PAGO SECTION
   ========================================================= */

.sales-day-mp-section {
  animation:
    salesDayEnter
    280ms
    ease-out
    both;
}


/* =========================================================
   MERCADO PAGO MAIN GRID
   ========================================================= */

.sales-day-mp-executive-grid {
  width:
    100%;

  display:
    grid;

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

  gap:
    13px;
}


/* =========================================================
   MP CHANNEL BLOCK
   ========================================================= */

.sales-day-mp-channel-block {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  padding:
    15px;

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

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

  border-radius:
    11px;
}


/* =========================================================
   MP CHANNEL HEADER
   ========================================================= */

.sales-day-mp-channel-block__header {
  width:
    100%;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;
}


.sales-day-mp-channel-block__header > div:first-child {
  min-width:
    0;

  flex:
    1 1 auto;
}


.sales-day-mp-channel-block__header h3 {
  margin:
    2px 0 0;

  color:
    var(--sales-text);

  font-size:
    15px;

  font-weight:
    850;

  line-height:
    1.2;

  letter-spacing:
    -0.025em;
}


.sales-day-mp-channel-block__header p {
  margin:
    4px 0 0;

  max-width:
    500px;

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

  font-size:
    10.5px;

  font-weight:
    550;

  line-height:
    1.45;
}


/* =========================================================
   MP FINANCIAL GRID
   ========================================================= */

.sales-day-mp-channel-block
.sales-day-financial-grid {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}


/* =========================================================
   MP CARDS
   ========================================================= */

.sales-day-mp-channel-block
.sales-day-financial-card {
  min-height:
    114px;

  padding:
    12px;
}


.sales-day-mp-channel-block
.sales-day-financial-card__value {
  font-size:
    15px;
}


/* =========================================================
   MP SOURCE STRIP
   ========================================================= */

.sales-day-mp-source-strip {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    9px 11px;

  background:
    #ffffff;

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

  border-radius:
    8px;
}


.sales-day-mp-source-strip > span {
  color:
    var(--sales-text-muted);

  font-size:
    9.5px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.03em;

  text-transform:
    uppercase;
}


.sales-day-mp-source-strip > div {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    5px;
}


/* =========================================================
   MP FLOW
   ========================================================= */

.sales-day-mp-flow {
  width:
    100%;

  display:
    grid;

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

  background:
    #ffffff;

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

  border-radius:
    9px;

  overflow:
    hidden;
}


.sales-day-mp-flow__item {
  position:
    relative;

  min-width:
    0;

  min-height:
    67px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    4px;

  padding:
    10px 12px;
}


.sales-day-mp-flow__item:not(:last-child) {
  border-right:
    1px solid var(--sales-border);
}


.sales-day-mp-flow__item > span {
  color:
    var(--sales-text-muted);

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.25;

  text-transform:
    uppercase;
}


.sales-day-mp-flow__item > strong {
  color:
    var(--sales-text);

  font-size:
    13px;

  font-weight:
    850;

  line-height:
    1.15;

  letter-spacing:
    -0.02em;

  font-variant-numeric:
    tabular-nums;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   MP FLOW RESULT
   ========================================================= */

.sales-day-mp-flow__item--result {
  background:
    #f2f4f6;
}


.sales-day-mp-flow__item--result > strong {
  font-size:
    14px;
}


/* =========================================================
   MP PROFITABILITY
   ========================================================= */

.sales-day-mp-profitability {
  width:
    100%;

  display:
    grid;

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

  background:
    #ffffff;

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

  border-radius:
    9px;

  overflow:
    hidden;
}


.sales-day-mp-profitability > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  padding:
    11px 12px;
}


.sales-day-mp-profitability > div:not(:last-child) {
  border-right:
    1px solid var(--sales-border);
}


.sales-day-mp-profitability span {
  color:
    var(--sales-text-muted);

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.025em;

  text-transform:
    uppercase;
}


.sales-day-mp-profitability strong {
  color:
    var(--sales-text);

  font-size:
    13.5px;

  font-weight:
    850;

  line-height:
    1.15;

  letter-spacing:
    -0.025em;

  font-variant-numeric:
    tabular-nums;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   POSITIVE / NEGATIVE
   ========================================================= */

.sales-day-mp-profitability
.is-positive,
.sales-day-financial-summary
.is-positive,
.sales-day-financial-card
.is-positive {
  color:
    var(--sales-success);
}


.sales-day-mp-profitability
.is-negative,
.sales-day-financial-summary
.is-negative,
.sales-day-financial-card
.is-negative {
  color:
    var(--sales-danger);
}


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

.sales-day-empty-state {
  width:
    100%;

  min-height:
    170px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  gap:
    7px;

  padding:
    24px;

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

  background:
    #ffffff;

  border:
    1px dashed var(--sales-border-strong);

  border-radius:
    9px;
}


.sales-day-empty-state > svg,
.sales-day-empty-state > i {
  margin-bottom:
    4px;

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


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

  font-size:
    12.5px;

  font-weight:
    800;
}


.sales-day-empty-state span {
  max-width:
    350px;

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

  font-size:
    10.5px;

  font-weight:
    550;

  line-height:
    1.5;
}


/* =========================================================
   COLLAPSED FINANCIAL
   ========================================================= */

.sales-day-panel--financial.is-collapsed
.sales-day-panel__header {
  border-bottom:
    0;
}


.sales-day-panel--financial.is-collapsed
.sales-day-panel__body {
  display:
    none;
}


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

html[data-theme="dark"]
.executive-sales-day-page,
body.dark
.executive-sales-day-page,
body[data-theme="dark"]
.executive-sales-day-page {
  --sales-bg:
    #090a0c;

  --sales-surface:
    #111317;

  --sales-surface-soft:
    #16191e;

  --sales-surface-muted:
    #1a1e23;

  --sales-border:
    #2b3037;

  --sales-border-strong:
    #3b424b;

  --sales-border-soft:
    #22272d;

  --sales-text:
    #ffffff;

  --sales-text-secondary:
    #e4e7eb;

  --sales-text-muted:
    #aeb5be;

  --sales-text-soft:
    #858d97;

  --sales-primary:
    #ffffff;

  --sales-primary-hover:
    #e9edf1;
}


html[data-theme="dark"]
.sales-day-page,
body.dark
.sales-day-page,
body[data-theme="dark"]
.sales-day-page {
  background:
    #090a0c;
}


html[data-theme="dark"]
.sales-day-overview-block,
html[data-theme="dark"]
.sales-day-executive-kpi,
html[data-theme="dark"]
.sales-day-financial-card,
html[data-theme="dark"]
.sales-day-mp-channel-block,
body.dark
.sales-day-overview-block,
body.dark
.sales-day-executive-kpi,
body.dark
.sales-day-financial-card,
body.dark
.sales-day-mp-channel-block,
body[data-theme="dark"]
.sales-day-overview-block,
body[data-theme="dark"]
.sales-day-executive-kpi,
body[data-theme="dark"]
.sales-day-financial-card,
body[data-theme="dark"]
.sales-day-mp-channel-block {
  background:
    var(--sales-surface);
}


html[data-theme="dark"]
.sales-day-executive-kpi__icon,
html[data-theme="dark"]
.sales-day-financial-card__icon,
html[data-theme="dark"]
.sales-day-summary-strip,
html[data-theme="dark"]
.sales-day-financial-summary,
html[data-theme="dark"]
.sales-day-financial-note,
html[data-theme="dark"]
.sales-day-mp-source-strip,
html[data-theme="dark"]
.sales-day-mp-flow,
html[data-theme="dark"]
.sales-day-mp-profitability,
html[data-theme="dark"]
.sales-day-empty-state,
body.dark
.sales-day-executive-kpi__icon,
body.dark
.sales-day-financial-card__icon,
body.dark
.sales-day-summary-strip,
body.dark
.sales-day-financial-summary,
body.dark
.sales-day-financial-note,
body.dark
.sales-day-mp-source-strip,
body.dark
.sales-day-mp-flow,
body.dark
.sales-day-mp-profitability,
body.dark
.sales-day-empty-state {
  background:
    var(--sales-surface-soft);
}


/* =========================================================
   TABLET LARGE
   ========================================================= */

@media (max-width: 1500px) {

  .sales-day-executive-kpi-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  .sales-day-financial-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }


  .sales-day-mp-channel-block
  .sales-day-financial-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1120px) {

  .sales-day-overview-block {
    padding:
      17px;
  }


  .sales-day-executive-kpi-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .sales-day-summary-strip {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .sales-day-summary-strip__item:nth-child(2) {
    border-right:
      0;
  }


  .sales-day-summary-strip__item:nth-child(-n + 2) {
    border-bottom:
      1px solid var(--sales-border);
  }


  .sales-day-financial-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  .sales-day-mp-executive-grid {
    grid-template-columns:
      1fr;
  }


  .sales-day-mp-channel-block
  .sales-day-financial-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}


/* =========================================================
   TABLET SMALL
   ========================================================= */

@media (max-width: 900px) {

  .sales-day-financial-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .sales-day-mp-channel-block
  .sales-day-financial-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .sales-day-financial-summary {
    grid-template-columns:
      1fr;
  }


  .sales-day-financial-summary__operator {
    width:
      100%;

    min-height:
      32px;

    border-left:
      0;

    border-right:
      0;

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

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


  .sales-day-mp-flow,
  .sales-day-mp-profitability {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .sales-day-mp-flow__item:nth-child(2),
  .sales-day-mp-profitability > div:nth-child(2) {
    border-right:
      0;
  }


  .sales-day-mp-flow__item:nth-child(-n + 2),
  .sales-day-mp-profitability > div:nth-child(-n + 2) {
    border-bottom:
      1px solid var(--sales-border);
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .sales-day-overview-block {
    padding:
      14px;

    border-radius:
      12px;
  }


  .sales-day-overview-block__head {
    align-items:
      flex-start;

    flex-direction:
      column;

    margin-bottom:
      14px;
  }


  .sales-day-overview-block__period {
    min-height:
      30px;
  }


  .sales-day-executive-kpi-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      8px;
  }


  .sales-day-executive-kpi {
    min-height:
      137px;

    padding:
      12px;

    gap:
      8px;
  }


  .sales-day-executive-kpi__icon {
    width:
      28px;

    height:
      28px;
  }


  .sales-day-executive-kpi__label {
    font-size:
      9.5px;
  }


  .sales-day-executive-kpi__value {
    font-size:
      17px;
  }


  .sales-day-executive-kpi__helper {
    font-size:
      9.5px;
  }


  .sales-day-summary-strip {
    margin-top:
      9px;
  }


  .sales-day-summary-strip__item {
    min-height:
      59px;

    padding:
      9px 11px;
  }


  .sales-day-summary-strip__item > strong {
    font-size:
      14px;
  }


  .sales-day-financial-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      8px;
  }


  .sales-day-financial-card {
    min-height:
      115px;

    padding:
      11px;
  }


  .sales-day-financial-card__value {
    font-size:
      14px;
  }


  .sales-day-mp-channel-block {
    padding:
      12px;

    gap:
      11px;
  }


  .sales-day-mp-channel-block__header {
    flex-direction:
      column;
  }


  .sales-day-mp-source-strip {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .sales-day-mp-source-strip > div {
    justify-content:
      flex-start;
  }


  .sales-day-financial-note {
    font-size:
      10px;
  }
}


/* =========================================================
   MOBILE SMALL
   ========================================================= */

@media (max-width: 520px) {

  .sales-day-executive-kpi-grid {
    grid-template-columns:
      1fr;
  }


  .sales-day-executive-kpi {
    min-height:
      124px;
  }


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


  .sales-day-summary-strip {
    grid-template-columns:
      1fr;
  }


  .sales-day-summary-strip__item {
    border-right:
      0 !important;

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


  .sales-day-summary-strip__item:last-child {
    border-bottom:
      0;
  }


  .sales-day-financial-grid,
  .sales-day-mp-channel-block
  .sales-day-financial-grid {
    grid-template-columns:
      1fr;
  }


  .sales-day-financial-card {
    min-height:
      105px;
  }


  .sales-day-mp-flow,
  .sales-day-mp-profitability {
    grid-template-columns:
      1fr;
  }


  .sales-day-mp-flow__item,
  .sales-day-mp-profitability > div {
    border-right:
      0 !important;

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


  .sales-day-mp-flow__item:last-child,
  .sales-day-mp-profitability > div:last-child {
    border-bottom:
      0;
  }
}


/* =========================================================
   FIN PARTE 2 DE 5
   ========================================================= *//* =========================================================
   WIRTZ HUB · DIRECCIÓN EJECUTIVA
   VENTAS DEL DÍA

   PARTE 3 DE 5

   CANALES
   RENDIMIENTO POR CANAL
   CONFIGURACIÓN DE CANALES
   SWITCHES
   ========================================================= */


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

.sales-day-channels-section {
  animation:
    salesDayEnter
    300ms
    ease-out
    both;
}


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

.sales-day-channel-grid {
  width: 100%;

  display: grid;

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

  gap: 12px;
}


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

.sales-day-channel-performance {
  position: relative;

  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 14px;

  padding: 15px;

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

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

  border-radius:
    11px;

  overflow: hidden;

  transition:
    transform var(--sales-transition),
    background-color var(--sales-transition),
    border-color var(--sales-transition),
    box-shadow var(--sales-transition);
}


.sales-day-channel-performance:hover {
  transform:
    translateY(-2px);

  background:
    var(--sales-surface);

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

  box-shadow:
    var(--sales-shadow-sm);
}


/* =========================================================
   CHANNEL SELECTED
   ========================================================= */

.sales-day-channel-performance.is-selected {
  background:
    var(--sales-surface);

  border-color:
    var(--sales-text);
}


.sales-day-channel-performance.is-selected::before {
  content: "";

  position: absolute;

  top: 0;
  left: 14px;
  right: 14px;

  height: 2px;

  background:
    var(--sales-text);

  border-radius:
    0 0 3px 3px;
}


/* =========================================================
   CHANNEL MISSING COST
   ========================================================= */

.sales-day-channel-performance.has-missing-cost {
  border-color:
    var(--sales-warning-border);
}


/* =========================================================
   CHANNEL HEAD
   ========================================================= */

.sales-day-channel-performance__head {
  width: 100%;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 10px;
}


/* =========================================================
   CHANNEL IDENTITY
   ========================================================= */

.sales-day-channel-performance__identity {
  min-width: 0;

  display: flex;

  align-items: flex-start;

  gap: 10px;

  flex: 1 1 auto;
}


.sales-day-channel-performance__identity > div {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 3px;
}


.sales-day-channel-performance__identity strong {
  color:
    var(--sales-text);

  font-size:
    13px;

  font-weight:
    850;

  line-height:
    1.2;

  letter-spacing:
    -0.02em;
}


.sales-day-channel-performance__identity > div > span {
  color:
    var(--sales-text-muted);

  font-size:
    9.5px;

  font-weight:
    550;

  line-height:
    1.4;
}


/* =========================================================
   CHANNEL ICON
   ========================================================= */

.sales-day-channel-performance__icon {
  width: 34px;
  height: 34px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 auto;

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

  background:
    #ffffff;

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

  border-radius:
    9px;
}


/* =========================================================
   CHANNEL COST BADGE
   ========================================================= */

button.sales-day-cost-badge {
  appearance:
    none;

  cursor:
    pointer;

  outline:
    none;

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


button.sales-day-cost-badge:hover {
  background:
    #fff2d7;

  border-color:
    #d4ad5b;

  transform:
    translateY(-1px);
}


/* =========================================================
   CHANNEL MAIN
   ========================================================= */

.sales-day-channel-performance__main {
  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 5px;

  padding:
    11px 0 3px;
}


.sales-day-channel-performance__main > span {
  color:
    var(--sales-text-muted);

  font-size:
    9.5px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.035em;

  text-transform:
    uppercase;
}


.sales-day-channel-performance__main > strong {
  color:
    var(--sales-text);

  font-size:
    clamp(19px, 1.5vw, 25px);

  font-weight:
    850;

  line-height:
    1.05;

  letter-spacing:
    -0.045em;

  font-variant-numeric:
    tabular-nums;

  overflow-wrap:
    anywhere;
}


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

.sales-day-channel-performance__metrics {
  width: 100%;

  display: grid;

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

  background:
    #ffffff;

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

  border-radius:
    9px;

  overflow:
    hidden;
}


.sales-day-channel-performance__metrics > div {
  min-width: 0;

  min-height: 59px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 4px;

  padding:
    9px 10px;
}


.sales-day-channel-performance__metrics > div:nth-child(odd) {
  border-right:
    1px solid var(--sales-border);
}


.sales-day-channel-performance__metrics > div:nth-child(n + 3) {
  border-top:
    1px solid var(--sales-border);
}


.sales-day-channel-performance__metrics span {
  color:
    var(--sales-text-muted);

  font-size:
    8.5px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.025em;

  text-transform:
    uppercase;
}


.sales-day-channel-performance__metrics strong {
  min-width: 0;

  color:
    var(--sales-text);

  font-size:
    11.5px;

  font-weight:
    850;

  line-height:
    1.15;

  letter-spacing:
    -0.02em;

  font-variant-numeric:
    tabular-nums;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   CHANNEL POSITIVE / NEGATIVE
   ========================================================= */

.sales-day-channel-performance
.is-positive {
  color:
    var(--sales-success) !important;
}


.sales-day-channel-performance
.is-negative {
  color:
    var(--sales-danger) !important;
}


/* =========================================================
   CHANNEL SOURCES
   ========================================================= */

.sales-day-channel-sources {
  width: 100%;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 5px;
}


.sales-day-channel-sources > span {
  min-height: 24px;

  display: inline-flex;

  align-items: center;

  padding:
    0 8px;

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

  background:
    var(--sales-surface);

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

  border-radius:
    6px;

  font-size:
    9px;

  font-weight:
    800;
}


/* =========================================================
   CHANNEL FOOTER
   ========================================================= */

.sales-day-channel-performance__footer {
  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 8px;

  margin-top:
    auto;

  padding-top:
    2px;
}


.sales-day-channel-performance__footer > div:first-child {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;
}


.sales-day-channel-performance__footer > div:first-child span {
  color:
    var(--sales-text-muted);

  font-size:
    9px;

  font-weight:
    750;
}


.sales-day-channel-performance__footer > div:first-child strong {
  color:
    var(--sales-text);

  font-size:
    10.5px;

  font-weight:
    850;
}


.sales-day-channel-performance__footer
.sales-day-btn {
  width: 100%;

  margin-top:
    2px;
}


/* =========================================================
   CHANNEL PROGRESS
   ========================================================= */

.sales-day-channel-performance
.sales-day-progress {
  height:
    4px;
}


.sales-day-channel-performance.has-missing-cost
.sales-day-progress__bar {
  background:
    var(--sales-warning);
}


/* =========================================================
   CHANNEL SELECTED BUTTON
   ========================================================= */

.sales-day-channel-performance.is-selected
.sales-day-btn--primary {
  color:
    #ffffff;

  background:
    var(--sales-text);

  border-color:
    var(--sales-text);
}


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

.sales-day-config-root {
  position:
    fixed;

  inset:
    0;

  z-index:
    9999;

  pointer-events:
    none;
}


.sales-day-config-root:empty {
  display:
    none;
}


/* =========================================================
   CONFIG BACKDROP
   ========================================================= */

.sales-day-config-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(9, 12, 16, 0.52);

  backdrop-filter:
    blur(3px);

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

  pointer-events:
    auto;

  animation:
    salesDayConfigBackdropIn
    160ms
    ease-out
    both;
}


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

.sales-day-config-panel {
  position:
    absolute;

  top:
    0;

  right:
    0;

  width:
    min(540px, 100%);

  height:
    100%;

  display:
    flex;

  flex-direction:
    column;

  color:
    var(--sales-text);

  background:
    var(--sales-surface);

  border-left:
    1px solid var(--sales-border);

  box-shadow:
    -12px 0 40px rgba(16, 24, 40, 0.14);

  pointer-events:
    auto;

  overflow:
    hidden;

  animation:
    salesDayConfigPanelIn
    210ms
    cubic-bezier(0.4, 0, 0.2, 1)
    both;
}


/* =========================================================
   CONFIG PANEL HEADER
   ========================================================= */

.sales-day-config-panel__header {
  flex:
    0 0 auto;

  min-height:
    105px;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    20px;

  background:
    var(--sales-surface);

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


.sales-day-config-panel__header > div:first-child {
  min-width:
    0;

  flex:
    1 1 auto;
}


.sales-day-config-panel__header h2 {
  margin:
    3px 0 0;

  color:
    var(--sales-text);

  font-size:
    18px;

  font-weight:
    850;

  line-height:
    1.2;

  letter-spacing:
    -0.035em;
}


.sales-day-config-panel__header p {
  max-width:
    420px;

  margin:
    6px 0 0;

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

  font-size:
    10.5px;

  font-weight:
    550;

  line-height:
    1.5;
}


/* =========================================================
   CONFIG PANEL BODY
   ========================================================= */

.sales-day-config-panel__body {
  flex:
    1 1 auto;

  min-height:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    11px;

  padding:
    14px;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;

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


.sales-day-config-panel__body::-webkit-scrollbar {
  width:
    8px;
}


.sales-day-config-panel__body::-webkit-scrollbar-track {
  background:
    transparent;
}


.sales-day-config-panel__body::-webkit-scrollbar-thumb {
  background:
    var(--sales-border-strong);

  border-radius:
    999px;

  border:
    2px solid var(--sales-surface);
}


/* =========================================================
   CONFIG CARD
   ========================================================= */

.sales-day-channel-config-card {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    13px;

  padding:
    14px;

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

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

  border-radius:
    10px;

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


/* =========================================================
   CONFIG ACTIVE
   ========================================================= */

.sales-day-channel-config-card.is-active {
  background:
    var(--sales-surface-soft);
}


/* =========================================================
   CONFIG DISABLED
   ========================================================= */

.sales-day-channel-config-card.is-disabled {
  opacity:
    0.66;

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


/* =========================================================
   CONFIG CARD HEAD
   ========================================================= */

.sales-day-channel-config-card__head {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


/* =========================================================
   CONFIG IDENTITY
   ========================================================= */

.sales-day-channel-config-card__identity {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  flex:
    1 1 auto;
}


.sales-day-channel-config-card__identity > span {
  width:
    33px;

  height:
    33px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

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

  background:
    var(--sales-surface);

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

  border-radius:
    8px;
}


.sales-day-channel-config-card__identity > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.sales-day-channel-config-card__identity strong {
  color:
    var(--sales-text);

  font-size:
    12px;

  font-weight:
    850;

  line-height:
    1.2;
}


.sales-day-channel-config-card__identity small {
  color:
    var(--sales-text-muted);

  font-size:
    9.5px;

  font-weight:
    550;

  line-height:
    1.4;
}


/* =========================================================
   SWITCH
   ========================================================= */

.sales-day-switch {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  flex:
    0 0 auto;

  cursor:
    pointer;
}


.sales-day-switch input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}


/* =========================================================
   SWITCH TRACK
   ========================================================= */

.sales-day-switch__track {
  position:
    relative;

  width:
    42px;

  height:
    24px;

  display:
    block;

  background:
    #cdd3d9;

  border:
    1px solid #bdc5cd;

  border-radius:
    999px;

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


.sales-day-switch__track > span {
  position:
    absolute;

  top:
    3px;

  left:
    3px;

  width:
    16px;

  height:
    16px;

  background:
    #ffffff;

  border-radius:
    50%;

  box-shadow:
    0 1px 3px rgba(16, 24, 40, 0.18);

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


/* =========================================================
   SWITCH CHECKED
   ========================================================= */

.sales-day-switch
input:checked
+
.sales-day-switch__track {
  background:
    var(--sales-text);

  border-color:
    var(--sales-text);
}


.sales-day-switch
input:checked
+
.sales-day-switch__track
> span {
  transform:
    translateX(18px);
}


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

.sales-day-switch
input:focus-visible
+
.sales-day-switch__track {
  outline:
    3px solid rgba(17, 20, 24, 0.12);

  outline-offset:
    2px;
}


/* =========================================================
   SWITCH DISABLED
   ========================================================= */

.sales-day-switch
input:disabled
+
.sales-day-switch__track {
  opacity:
    0.5;

  cursor:
    not-allowed;
}


/* =========================================================
   CONFIG OPTIONS
   ========================================================= */

.sales-day-channel-config-card__options {
  width:
    100%;

  display:
    grid;

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

  gap:
    7px;
}


/* =========================================================
   CONFIG CHECK
   ========================================================= */

.sales-day-config-check {
  position:
    relative;

  min-width:
    0;

  min-height:
    36px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    7px 9px;

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

  background:
    var(--sales-surface);

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

  border-radius:
    8px;

  cursor:
    pointer;

  user-select:
    none;

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


.sales-day-config-check:hover {
  border-color:
    var(--sales-border-strong);
}


.sales-day-config-check input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;
}


/* =========================================================
   CONFIG CHECK BOX
   ========================================================= */

.sales-day-config-check > span {
  position:
    relative;

  width:
    16px;

  height:
    16px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  background:
    #ffffff;

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

  border-radius:
    5px;

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


.sales-day-config-check
input:checked
~
span {
  background:
    var(--sales-text);

  border-color:
    var(--sales-text);
}


.sales-day-config-check
input:checked
~
span::after {
  content:
    "";

  width:
    7px;

  height:
    4px;

  border-left:
    2px solid #ffffff;

  border-bottom:
    2px solid #ffffff;

  transform:
    rotate(-45deg)
    translateY(-1px);
}


/* =========================================================
   CONFIG CHECK LABEL
   ========================================================= */

.sales-day-config-check > strong {
  min-width:
    0;

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

  font-size:
    9.5px;

  font-weight:
    750;

  line-height:
    1.2;
}


.sales-day-config-check
input:checked
~
strong {
  color:
    var(--sales-text);
}


/* =========================================================
   CONFIG CHECK DISABLED
   ========================================================= */

.sales-day-config-check:has(input:disabled) {
  opacity:
    0.5;

  cursor:
    not-allowed;
}


/* =========================================================
   CONFIG FOOTER
   ========================================================= */

.sales-day-channel-config-card__footer {
  width:
    100%;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    12px;

  padding-top:
    11px;

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


.sales-day-channel-config-card__footer > label {
  width:
    100px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.sales-day-channel-config-card__footer > label > span {
  color:
    var(--sales-text-muted);

  font-size:
    9px;

  font-weight:
    800;

  text-transform:
    uppercase;
}


/* =========================================================
   CONFIG SAVING
   ========================================================= */

.sales-day-config-saving {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

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

  font-size:
    9.5px;

  font-weight:
    700;
}


.sales-day-config-saving
[data-lucide="loader-circle"] {
  animation:
    salesDaySpin
    800ms
    linear
    infinite;
}


/* =========================================================
   CONFIG OPEN BODY
   ========================================================= */

body.sales-day-drawer-open {
  overflow:
    hidden;
}


/* =========================================================
   CONFIG ANIMATIONS
   ========================================================= */

@keyframes salesDayConfigBackdropIn {

  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}


@keyframes salesDayConfigPanelIn {

  from {
    opacity:
      0;

    transform:
      translateX(28px);
  }

  to {
    opacity:
      1;

    transform:
      translateX(0);
  }
}


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

html[data-theme="dark"]
.sales-day-channel-performance,
html[data-theme="dark"]
.sales-day-channel-performance__metrics,
html[data-theme="dark"]
.sales-day-channel-performance__icon,
html[data-theme="dark"]
.sales-day-channel-config-card,
html[data-theme="dark"]
.sales-day-channel-config-card__identity > span,
html[data-theme="dark"]
.sales-day-config-check,
body.dark
.sales-day-channel-performance,
body.dark
.sales-day-channel-performance__metrics,
body.dark
.sales-day-channel-performance__icon,
body.dark
.sales-day-channel-config-card,
body.dark
.sales-day-channel-config-card__identity > span,
body.dark
.sales-day-config-check {
  background:
    var(--sales-surface);
}


html[data-theme="dark"]
.sales-day-channel-performance.is-selected,
body.dark
.sales-day-channel-performance.is-selected {
  border-color:
    #ffffff;
}


html[data-theme="dark"]
.sales-day-channel-performance.is-selected::before,
body.dark
.sales-day-channel-performance.is-selected::before {
  background:
    #ffffff;
}


html[data-theme="dark"]
.sales-day-switch
input:checked
+
.sales-day-switch__track,
body.dark
.sales-day-switch
input:checked
+
.sales-day-switch__track {
  background:
    #ffffff;

  border-color:
    #ffffff;
}


html[data-theme="dark"]
.sales-day-switch
input:checked
+
.sales-day-switch__track
> span,
body.dark
.sales-day-switch
input:checked
+
.sales-day-switch__track
> span {
  background:
    #111418;
}


html[data-theme="dark"]
.sales-day-config-check
input:checked
~
span,
body.dark
.sales-day-config-check
input:checked
~
span {
  background:
    #ffffff;

  border-color:
    #ffffff;
}


html[data-theme="dark"]
.sales-day-config-check
input:checked
~
span::after,
body.dark
.sales-day-config-check
input:checked
~
span::after {
  border-color:
    #111418;
}


/* =========================================================
   DESKTOP MEDIUM
   ========================================================= */

@media (max-width: 1500px) {

  .sales-day-channel-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1120px) {

  .sales-day-channel-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .sales-day-channel-performance__main > strong {
    font-size:
      21px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .sales-day-channel-grid {
    grid-template-columns:
      1fr;

    gap:
      9px;
  }


  .sales-day-channel-performance {
    padding:
      13px;

    gap:
      11px;
  }


  .sales-day-channel-performance__main {
    padding-top:
      7px;
  }


  .sales-day-channel-performance__main > strong {
    font-size:
      20px;
  }


  .sales-day-channel-performance__metrics > div {
    min-height:
      55px;
  }


  .sales-day-config-panel {
    width:
      100%;
  }


  .sales-day-config-panel__header {
    min-height:
      0;

    padding:
      17px 15px;
  }


  .sales-day-config-panel__header h2 {
    font-size:
      16px;
  }


  .sales-day-config-panel__body {
    padding:
      11px;
  }


  .sales-day-channel-config-card {
    padding:
      12px;
  }


  .sales-day-channel-config-card__options {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   MOBILE SMALL
   ========================================================= */

@media (max-width: 480px) {

  .sales-day-channel-performance__head {
    flex-direction:
      column;
  }


  .sales-day-channel-performance__identity {
    width:
      100%;
  }


  .sales-day-channel-performance__metrics {
    grid-template-columns:
      1fr;
  }


  .sales-day-channel-performance__metrics > div {
    border-right:
      0 !important;

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


  .sales-day-channel-performance__metrics > div:first-child {
    border-top:
      0;
  }


  .sales-day-channel-config-card__head {
    align-items:
      flex-start;
  }


  .sales-day-channel-config-card__footer {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .sales-day-channel-config-card__footer > label {
    width:
      100%;
  }
}


/* =========================================================
   FIN PARTE 3 DE 5
   ========================================================= *//* =========================================================
   WIRTZ HUB · DIRECCIÓN EJECUTIVA
   VENTAS DEL DÍA

   PARTE 4 DE 5

   ANÁLISIS
   GRÁFICOS
   PRODUCTOS
   TABLAS
   COLUMNAS
   PAGINACIÓN
   PRODUCTOS SIN COSTO
   ========================================================= */


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

.sales-day-analysis-section {
  width: 100%;

  animation:
    salesDayEnter
    320ms
    ease-out
    both;
}


/* =========================================================
   ANALYSIS HEAD
   ========================================================= */

.sales-day-analysis-head {
  width: 100%;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 18px;

  margin-bottom: 12px;
}


.sales-day-analysis-head > div:first-child {
  min-width: 0;
}


.sales-day-analysis-head h2 {
  margin: 3px 0 0;

  color:
    var(--sales-text);

  font-size: 18px;
  font-weight: 850;

  line-height: 1.2;

  letter-spacing:
    -0.035em;
}


.sales-day-analysis-head p {
  margin: 5px 0 0;

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

  font-size: 11px;
  font-weight: 550;

  line-height: 1.5;
}


/* =========================================================
   ANALYSIS GRID
   ========================================================= */

.sales-day-analysis-grid {
  width: 100%;

  display: grid;

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

  gap: 12px;
}


/* =========================================================
   ANALYSIS CARD
   ========================================================= */

.sales-day-analysis-card {
  position: relative;

  min-width: 0;
  min-height: 330px;

  display: flex;
  flex-direction: column;

  background:
    var(--sales-surface);

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

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

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

  overflow: hidden;

  transition:
    border-color var(--sales-transition),
    box-shadow var(--sales-transition),
    transform var(--sales-transition);
}


.sales-day-analysis-card:hover {
  border-color:
    var(--sales-border-strong);

  box-shadow:
    var(--sales-shadow-sm);
}


.sales-day-analysis-card--wide {
  grid-column:
    span 1;
}


/* =========================================================
   ANALYSIS CARD HEADER
   ========================================================= */

.sales-day-analysis-card__header {
  min-height: 72px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  padding:
    14px 16px;

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


.sales-day-analysis-card__header > div:first-child {
  min-width: 0;
}


.sales-day-analysis-card__header > div:first-child > span {
  display: block;

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

  font-size: 9px;
  font-weight: 800;

  line-height: 1;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.sales-day-analysis-card__header h3 {
  margin:
    5px 0 0;

  color:
    var(--sales-text);

  font-size:
    14px;

  font-weight:
    850;

  line-height:
    1.2;

  letter-spacing:
    -0.025em;
}


.sales-day-analysis-card__header > svg,
.sales-day-analysis-card__header > i {
  color:
    var(--sales-text-secondary);

  flex:
    0 0 auto;
}


/* =========================================================
   ANALYSIS ACTIONS
   ========================================================= */

.sales-day-analysis-card__actions {
  display: flex;

  align-items: center;

  gap: 7px;

  flex:
    0 0 auto;
}


/* =========================================================
   ANALYSIS BODY
   ========================================================= */

.sales-day-analysis-card__body {
  flex:
    1 1 auto;

  min-height: 0;

  display: flex;

  flex-direction: column;

  padding:
    15px;
}


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

.sales-day-analysis-card.is-skeleton {
  padding:
    15px;

  pointer-events:
    none;
}


.sales-day-analysis-card.is-skeleton:hover {
  box-shadow:
    var(--sales-shadow-xs);
}


/* =========================================================
   CHART SELECT
   ========================================================= */

.sales-day-chart-select {
  appearance:
    none;

  min-width: 132px;

  height: 34px;

  padding:
    0 31px
    0 10px;

  color:
    var(--sales-text);

  background-color:
    var(--sales-surface-soft);

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--sales-text-muted) 50%
    ),
    linear-gradient(
      135deg,
      var(--sales-text-muted) 50%,
      transparent 50%
    );

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

  background-size:
    5px 5px,
    5px 5px;

  background-repeat:
    no-repeat;

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

  border-radius:
    8px;

  outline:
    none;

  font-size:
    10.5px;

  font-weight:
    750;

  cursor:
    pointer;

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


.sales-day-chart-select:hover {
  border-color:
    var(--sales-border-strong);
}


.sales-day-chart-select:focus {
  border-color:
    #737c86;

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


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

.sales-day-chart-empty {
  flex:
    1 1 auto;

  width: 100%;

  min-height: 220px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  gap: 7px;

  padding:
    24px;

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


.sales-day-chart-empty__icon {
  width: 48px;
  height: 48px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 4px;

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

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

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

  border-radius:
    12px;
}


.sales-day-chart-empty strong {
  color:
    var(--sales-text);

  font-size:
    12px;

  font-weight:
    800;
}


.sales-day-chart-empty > span:last-child {
  max-width:
    340px;

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

  font-size:
    10.5px;

  font-weight:
    550;

  line-height:
    1.5;
}


/* =========================================================
   CHART COMMON SVG
   ========================================================= */

.sales-day-analysis-card svg {
  max-width: 100%;
}


.sales-day-analysis-card svg text {
  font-family:
    inherit;
}


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

.sales-day-donut-layout {
  width: 100%;

  flex:
    1 1 auto;

  display: grid;

  grid-template-columns:
    minmax(150px, 0.9fr)
    minmax(180px, 1.1fr);

  align-items: center;

  gap: 18px;
}


.sales-day-donut-chart {
  position: relative;

  width: min(190px, 100%);

  aspect-ratio: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  margin:
    0 auto;
}


.sales-day-donut-chart svg {
  width: 100%;
  height: 100%;
}


.sales-day-donut-center {
  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 2px;

  pointer-events: none;
}


.sales-day-donut-center span {
  color:
    var(--sales-text-muted);

  font-size:
    9px;

  font-weight:
    750;

  text-transform:
    uppercase;
}


.sales-day-donut-center strong {
  max-width:
    95px;

  color:
    var(--sales-text);

  font-size:
    15px;

  font-weight:
    850;

  line-height:
    1.1;

  text-align:
    center;

  letter-spacing:
    -0.03em;
}


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

.sales-day-chart-legend {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 7px;
}


.sales-day-chart-legend__item {
  width: 100%;

  display: grid;

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

  align-items: center;

  gap: 8px;

  min-height:
    31px;

  padding:
    5px 7px;

  border-radius:
    7px;

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


.sales-day-chart-legend__item:hover {
  background:
    var(--sales-surface-soft);
}


.sales-day-chart-legend__dot {
  width: 8px;
  height: 8px;

  border-radius:
    50%;

  flex:
    0 0 auto;
}


.sales-day-chart-legend__item > span:nth-child(2) {
  min-width: 0;

  overflow: hidden;

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

  font-size:
    10px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.sales-day-chart-legend__item > strong {
  color:
    var(--sales-text);

  font-size:
    10.5px;

  font-weight:
    850;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   BAR CHART
   ========================================================= */

.sales-day-bar-chart {
  width: 100%;

  flex:
    1 1 auto;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 12px;
}


.sales-day-bar-row {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(70px, 115px)
    minmax(100px, 1fr)
    auto;

  align-items: center;

  gap: 10px;
}


.sales-day-bar-row__label {
  min-width: 0;

  overflow: hidden;

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

  font-size:
    10px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.sales-day-bar-row__track {
  position: relative;

  width: 100%;
  height: 9px;

  overflow:
    hidden;

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

  border-radius:
    999px;
}


.sales-day-bar-row__fill {
  height: 100%;

  display: block;

  border-radius:
    inherit;

  background:
    var(--sales-text);

  transform-origin:
    left center;

  animation:
    salesDayBarGrow
    400ms
    ease-out
    both;
}


.sales-day-bar-row__value {
  min-width:
    75px;

  color:
    var(--sales-text);

  font-size:
    10px;

  font-weight:
    850;

  text-align:
    right;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   PRODUCT RANKING
   ========================================================= */

.sales-day-product-ranking {
  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 6px;
}


.sales-day-product-ranking__row {
  width: 100%;

  display: grid;

  grid-template-columns:
    28px
    minmax(150px, 1fr)
    minmax(130px, 1.2fr)
    minmax(80px, auto);

  align-items: center;

  gap: 10px;

  min-height:
    42px;

  padding:
    5px 7px;

  border:
    1px solid transparent;

  border-radius:
    8px;

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


.sales-day-product-ranking__row:hover {
  background:
    var(--sales-surface-soft);

  border-color:
    var(--sales-border-soft);
}


.sales-day-product-ranking__position {
  width: 24px;
  height: 24px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

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

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

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

  border-radius:
    6px;

  font-size:
    9px;

  font-weight:
    850;
}


.sales-day-product-ranking__identity {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 2px;
}


.sales-day-product-ranking__identity strong {
  min-width: 0;

  overflow:
    hidden;

  color:
    var(--sales-text);

  font-size:
    10.5px;

  font-weight:
    800;

  line-height:
    1.2;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.sales-day-product-ranking__identity span {
  min-width: 0;

  overflow:
    hidden;

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

  font-size:
    9px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.sales-day-product-ranking__track {
  height: 7px;

  overflow: hidden;

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

  border-radius:
    999px;
}


.sales-day-product-ranking__fill {
  height: 100%;

  display: block;

  background:
    var(--sales-text);

  border-radius:
    inherit;

  animation:
    salesDayBarGrow
    400ms
    ease-out
    both;
}


.sales-day-product-ranking__value {
  min-width: 0;

  color:
    var(--sales-text);

  font-size:
    10.5px;

  font-weight:
    850;

  text-align:
    right;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   CLIENT RANKING
   ========================================================= */

.sales-day-client-ranking {
  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 6px;
}


.sales-day-client-ranking__item {
  appearance:
    none;

  width: 100%;

  display: block;

  padding:
    9px 10px;

  color:
    inherit;

  text-align:
    left;

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

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

  border-radius:
    9px;

  outline:
    none;

  cursor:
    pointer;

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


.sales-day-client-ranking__item:hover {
  background:
    var(--sales-surface);

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

  transform:
    translateY(-1px);
}


.sales-day-client-ranking__item:focus-visible {
  outline:
    3px solid rgba(17, 20, 24, 0.08);

  outline-offset:
    2px;
}


.sales-day-client-ranking__head {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom:
    7px;
}


.sales-day-client-ranking__head > div {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 2px;
}


.sales-day-client-ranking__head strong {
  min-width: 0;

  overflow:
    hidden;

  color:
    var(--sales-text);

  font-size:
    10.5px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.sales-day-client-ranking__head span {
  color:
    var(--sales-text-muted);

  font-size:
    9px;

  font-weight:
    600;
}


.sales-day-client-ranking__head > strong {
  flex:
    0 0 auto;

  color:
    var(--sales-text);

  font-size:
    11px;

  font-weight:
    850;

  font-variant-numeric:
    tabular-nums;
}


.sales-day-client-ranking__track {
  width: 100%;
  height: 6px;

  overflow: hidden;

  margin-bottom:
    7px;

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

  border-radius:
    999px;
}


.sales-day-client-ranking__fill {
  height: 100%;

  display: block;

  background:
    var(--sales-text);

  border-radius:
    inherit;

  animation:
    salesDayBarGrow
    420ms
    ease-out
    both;
}


.sales-day-client-ranking__meta {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap:
    6px 12px;
}


.sales-day-client-ranking__meta span {
  color:
    var(--sales-text-muted);

  font-size:
    8.5px;

  font-weight:
    650;
}


.sales-day-client-ranking__meta .is-positive {
  color:
    var(--sales-success);
}


.sales-day-client-ranking__meta .is-negative {
  color:
    var(--sales-danger);
}


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

.sales-day-products-section {
  animation:
    salesDayEnter
    340ms
    ease-out
    both;
}


.sales-day-panel--products {
  overflow:
    visible;
}


/* =========================================================
   COLUMN CONTROL
   ========================================================= */

.sales-day-column-control {
  position: relative;

  display: inline-flex;

  align-items: center;
}


/* =========================================================
   COLUMN MENU
   ========================================================= */

.sales-day-column-menu {
  position: absolute;

  top: calc(100% + 7px);

  right: 0;

  width: 255px;

  z-index: 40;

  background:
    var(--sales-surface);

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

  border-radius:
    10px;

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

  overflow:
    hidden;

  animation:
    salesDayMenuIn
    140ms
    ease-out
    both;
}


/* =========================================================
   COLUMN MENU HEADER
   ========================================================= */

.sales-day-column-menu__header {
  min-height:
    49px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  padding:
    7px 8px 7px 12px;

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


.sales-day-column-menu__header strong {
  color:
    var(--sales-text);

  font-size:
    11px;

  font-weight:
    850;
}


.sales-day-column-menu__header
.sales-day-icon-btn {
  width: 31px;
  height: 31px;
}


/* =========================================================
   COLUMN MENU BODY
   ========================================================= */

.sales-day-column-menu__body {
  max-height:
    330px;

  display: flex;

  flex-direction: column;

  gap: 2px;

  padding:
    7px;

  overflow-y:
    auto;

  scrollbar-width:
    thin;
}


/* =========================================================
   COLUMN OPTION
   ========================================================= */

.sales-day-column-option {
  min-height:
    34px;

  display: flex;

  align-items: center;

  gap: 8px;

  padding:
    5px 7px;

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

  border-radius:
    7px;

  font-size:
    10px;

  font-weight:
    700;

  cursor:
    pointer;

  user-select:
    none;

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


.sales-day-column-option:hover {
  background:
    var(--sales-surface-soft);
}


.sales-day-column-option input {
  width:
    15px;

  height:
    15px;

  margin:
    0;

  accent-color:
    var(--sales-text);

  cursor:
    pointer;
}


.sales-day-column-option:has(input:disabled) {
  opacity:
    0.6;

  cursor:
    default;
}


/* =========================================================
   COLUMN MENU FOOTER
   ========================================================= */

.sales-day-column-menu__footer {
  padding:
    8px;

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


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

.sales-day-table-wrap {
  width: 100%;

  max-width: 100%;

  overflow-x:
    auto;

  overflow-y:
    hidden;

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

  border-radius:
    10px;

  scrollbar-width:
    thin;

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


.sales-day-table-wrap::-webkit-scrollbar {
  height:
    8px;
}


.sales-day-table-wrap::-webkit-scrollbar-track {
  background:
    transparent;
}


.sales-day-table-wrap::-webkit-scrollbar-thumb {
  background:
    var(--sales-border-strong);

  border-radius:
    999px;
}


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

.sales-day-table {
  width: 100%;

  min-width:
    1040px;

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    auto;

  background:
    var(--sales-surface);

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


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

.sales-day-table thead {
  background:
    var(--sales-surface-muted);
}


.sales-day-table th {
  position:
    sticky;

  top:
    0;

  z-index:
    3;

  height:
    43px;

  padding:
    0 12px;

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

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

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

  font-size:
    9px;

  font-weight:
    850;

  line-height:
    1.2;

  letter-spacing:
    0.035em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.sales-day-table th:not(:last-child) {
  border-right:
    1px solid var(--sales-border-soft);
}


.sales-day-table th.is-right {
  text-align:
    right;
}


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

.sales-day-table-sort {
  appearance:
    none;

  width:
    100%;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    5px;

  padding:
    0;

  color:
    inherit;

  background:
    transparent;

  border:
    0;

  outline:
    0;

  font:
    inherit;

  font-weight:
    850;

  text-transform:
    inherit;

  cursor:
    pointer;
}


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


.sales-day-table-sort:hover {
  color:
    var(--sales-text);
}


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

.sales-day-table tbody tr {
  transition:
    background-color var(--sales-transition-fast);
}


.sales-day-table tbody tr:hover {
  background:
    var(--sales-surface-soft);
}


.sales-day-table td {
  height:
    47px;

  max-width:
    320px;

  padding:
    8px 12px;

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

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

  font-size:
    10.5px;

  font-weight:
    650;

  line-height:
    1.35;

  vertical-align:
    middle;
}


.sales-day-table td:not(:last-child) {
  border-right:
    1px solid var(--sales-border-soft);
}


.sales-day-table tbody tr:last-child td {
  border-bottom:
    0;
}


.sales-day-table td.is-right {
  text-align:
    right;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   PRODUCT TABLE FIRST COLUMNS
   ========================================================= */

.sales-day-table td:first-child {
  min-width:
    220px;

  color:
    var(--sales-text);

  font-weight:
    750;
}


.sales-day-table td:nth-child(2) {
  min-width:
    95px;

  font-family:
    "JetBrains Mono",
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size:
    9.5px;

  font-weight:
    650;
}


/* =========================================================
   TABLE POSITIVE / NEGATIVE
   ========================================================= */

.sales-day-table .is-positive {
  color:
    var(--sales-success);

  font-weight:
    800;
}


.sales-day-table .is-negative {
  color:
    var(--sales-danger);

  font-weight:
    800;
}


/* =========================================================
   CELL WARNING
   ========================================================= */

.sales-day-cell-warning {
  min-height:
    24px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    0 7px;

  color:
    var(--sales-warning);

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

  border:
    1px solid var(--sales-warning-border);

  border-radius:
    6px;

  font-size:
    9px;

  font-weight:
    800;

  white-space:
    nowrap;
}


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

.sales-day-pagination {
  width: 100%;

  min-height:
    56px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap:
    15px;

  margin-top:
    12px;

  padding:
    9px 0 0;
}


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

.sales-day-pagination__summary {
  color:
    var(--sales-text-muted);

  font-size:
    10px;

  font-weight:
    600;
}


.sales-day-pagination__summary strong {
  color:
    var(--sales-text);

  font-weight:
    850;
}


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

.sales-day-pagination__actions {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


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

.sales-day-pagination__page {
  min-height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 10px;

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

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

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

  border-radius:
    8px;

  font-size:
    9.5px;

  font-weight:
    750;

  white-space:
    nowrap;
}


/* =========================================================
   MISSING COST SECTION
   ========================================================= */

.sales-day-missing-costs-section {
  animation:
    salesDayEnter
    360ms
    ease-out
    both;
}


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

.sales-day-panel--missing-costs {
  overflow:
    hidden;
}


.sales-day-panel--missing-costs.has-missing-costs {
  border-color:
    var(--sales-warning-border);
}


.sales-day-panel--missing-costs.has-missing-costs
.sales-day-panel__header {
  background:
    linear-gradient(
      180deg,
      var(--sales-warning-bg) 0%,
      var(--sales-surface) 100%
    );
}


/* =========================================================
   MISSING SUMMARY
   ========================================================= */

.sales-day-missing-summary {
  width: 100%;

  display: grid;

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

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

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

  border-radius:
    9px;

  overflow:
    hidden;
}


.sales-day-missing-summary > div {
  min-width:
    0;

  min-height:
    66px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    4px;

  padding:
    10px 13px;
}


.sales-day-missing-summary > div:not(:last-child) {
  border-right:
    1px solid var(--sales-border);
}


.sales-day-missing-summary span {
  color:
    var(--sales-text-muted);

  font-size:
    9px;

  font-weight:
    800;

  line-height:
    1.2;

  text-transform:
    uppercase;
}


.sales-day-missing-summary strong {
  color:
    var(--sales-text);

  font-size:
    15px;

  font-weight:
    850;

  line-height:
    1.1;

  letter-spacing:
    -0.025em;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   MISSING CHANNELS
   ========================================================= */

.sales-day-missing-channels {
  width:
    100%;

  display:
    grid;

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

  gap:
    8px;

  margin-top:
    10px;
}


.sales-day-missing-channel {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  padding:
    9px 10px;

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

  border:
    1px solid var(--sales-warning-border);

  border-radius:
    8px;
}


.sales-day-missing-channel > span {
  overflow:
    hidden;

  color:
    var(--sales-warning);

  font-size:
    9px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.sales-day-missing-channel > strong {
  color:
    var(--sales-text);

  font-size:
    15px;

  font-weight:
    850;
}


.sales-day-missing-channel > small {
  color:
    var(--sales-text-secondary);

  font-size:
    9px;

  font-weight:
    650;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   MISSING LIST
   ========================================================= */

.sales-day-missing-list {
  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 6px;

  margin-top:
    10px;
}


/* =========================================================
   MISSING ROW
   ========================================================= */

.sales-day-missing-row {
  appearance:
    none;

  width:
    100%;

  min-height:
    56px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    8px 11px;

  color:
    inherit;

  text-align:
    left;

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

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

  border-radius:
    8px;

  outline:
    none;

  cursor:
    pointer;

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


.sales-day-missing-row:hover {
  background:
    var(--sales-surface);

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

  transform:
    translateX(2px);
}


.sales-day-missing-row:focus-visible {
  outline:
    3px solid rgba(17, 20, 24, 0.08);

  outline-offset:
    2px;
}


/* =========================================================
   MISSING ROW MAIN
   ========================================================= */

.sales-day-missing-row__main {
  min-width:
    0;

  flex:
    1 1 auto;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.sales-day-missing-row__main strong {
  min-width:
    0;

  overflow:
    hidden;

  color:
    var(--sales-text);

  font-size:
    10.5px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.sales-day-missing-row__main span {
  color:
    var(--sales-text-muted);

  font-size:
    9px;

  font-weight:
    600;
}


/* =========================================================
   MISSING ROW META
   ========================================================= */

.sales-day-missing-row__meta {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    5px 12px;

  flex:
    0 0 auto;
}


.sales-day-missing-row__meta > span {
  color:
    var(--sales-text-muted);

  font-size:
    9px;

  font-weight:
    650;
}


.sales-day-missing-row__meta > strong {
  color:
    var(--sales-text);

  font-size:
    10.5px;

  font-weight:
    850;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   DARK ANALYSIS / TABLE
   ========================================================= */

html[data-theme="dark"]
.sales-day-analysis-card,
html[data-theme="dark"]
.sales-day-client-ranking__item,
html[data-theme="dark"]
.sales-day-table,
html[data-theme="dark"]
.sales-day-column-menu,
html[data-theme="dark"]
.sales-day-missing-row,
body.dark
.sales-day-analysis-card,
body.dark
.sales-day-client-ranking__item,
body.dark
.sales-day-table,
body.dark
.sales-day-column-menu,
body.dark
.sales-day-missing-row {
  background:
    var(--sales-surface);
}


html[data-theme="dark"]
.sales-day-table thead,
html[data-theme="dark"]
.sales-day-table th,
body.dark
.sales-day-table thead,
body.dark
.sales-day-table th {
  background:
    var(--sales-surface-muted);
}


html[data-theme="dark"]
.sales-day-product-ranking__track,
html[data-theme="dark"]
.sales-day-client-ranking__track,
html[data-theme="dark"]
.sales-day-bar-row__track,
body.dark
.sales-day-product-ranking__track,
body.dark
.sales-day-client-ranking__track,
body.dark
.sales-day-bar-row__track {
  background:
    #242930;
}


/* =========================================================
   BAR ANIMATION
   ========================================================= */

@keyframes salesDayBarGrow {

  from {
    transform:
      scaleX(0);

    opacity:
      0.5;
  }

  to {
    transform:
      scaleX(1);

    opacity:
      1;
  }
}


/* =========================================================
   MENU ANIMATION
   ========================================================= */

@keyframes salesDayMenuIn {

  from {
    opacity:
      0;

    transform:
      translateY(-4px)
      scale(0.985);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }
}


/* =========================================================
   DESKTOP MEDIUM
   ========================================================= */

@media (max-width: 1500px) {

  .sales-day-missing-channels {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1120px) {

  .sales-day-analysis-grid {
    grid-template-columns:
      1fr;
  }


  .sales-day-analysis-card--wide {
    grid-column:
      auto;
  }


  .sales-day-analysis-card {
    min-height:
      300px;
  }


  .sales-day-donut-layout {
    grid-template-columns:
      180px
      minmax(0, 1fr);
  }


  .sales-day-missing-channels {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .sales-day-analysis-head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .sales-day-analysis-card {
    min-height:
      275px;

    border-radius:
      12px;
  }


  .sales-day-analysis-card__header {
    min-height:
      64px;

    padding:
      12px 13px;
  }


  .sales-day-analysis-card__body {
    padding:
      12px;
  }


  .sales-day-analysis-card__actions {
    width:
      auto;
  }


  .sales-day-chart-select {
    min-width:
      115px;
  }


  .sales-day-donut-layout {
    grid-template-columns:
      1fr;

    gap:
      12px;
  }


  .sales-day-donut-chart {
    width:
      160px;
  }


  .sales-day-bar-row {
    grid-template-columns:
      85px
      minmax(90px, 1fr)
      auto;

    gap:
      7px;
  }


  .sales-day-bar-row__value {
    min-width:
      60px;

    font-size:
      9px;
  }


  .sales-day-product-ranking__row {
    grid-template-columns:
      25px
      minmax(100px, 1fr)
      auto;

    gap:
      7px;
  }


  .sales-day-product-ranking__track {
    display:
      none;
  }


  .sales-day-table {
    min-width:
      920px;
  }


  .sales-day-table th {
    padding:
      0 10px;
  }


  .sales-day-table td {
    padding:
      8px 10px;
  }


  .sales-day-pagination {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .sales-day-pagination__actions {
    width:
      100%;

    display:
      grid;

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


  .sales-day-pagination__actions
  .sales-day-btn {
    width:
      100%;
  }


  .sales-day-missing-summary {
    grid-template-columns:
      1fr;
  }


  .sales-day-missing-summary > div {
    border-right:
      0 !important;

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


  .sales-day-missing-summary > div:last-child {
    border-bottom:
      0;
  }


  .sales-day-missing-channels {
    grid-template-columns:
      1fr;
  }


  .sales-day-missing-row {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .sales-day-missing-row__meta {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .sales-day-column-menu {
    position:
      fixed;

    top:
      auto;

    right:
      12px;

    bottom:
      12px;

    left:
      12px;

    width:
      auto;

    max-height:
      min(72vh, 520px);
  }
}


/* =========================================================
   MOBILE SMALL
   ========================================================= */

@media (max-width: 480px) {

  .sales-day-analysis-card__header {
    align-items:
      flex-start;
  }


  .sales-day-analysis-card__header:has(
    .sales-day-analysis-card__actions
  ) {
    flex-direction:
      column;
  }


  .sales-day-analysis-card__actions {
    width:
      100%;
  }


  .sales-day-chart-select {
    width:
      100%;
  }


  .sales-day-chart-legend__item {
    padding:
      5px 3px;
  }


  .sales-day-bar-row {
    grid-template-columns:
      minmax(62px, 80px)
      minmax(70px, 1fr)
      auto;
  }


  .sales-day-client-ranking__meta {
    gap:
      5px 8px;
  }


  .sales-day-pagination__actions {
    grid-template-columns:
      1fr 1fr;
  }


  .sales-day-pagination__page {
    grid-column:
      1 / -1;

    grid-row:
      1;

    width:
      100%;
  }
}


/* =========================================================
   FIN PARTE 4 DE 5
   ========================================================= *//* =========================================================
   WIRTZ HUB · DIRECCIÓN EJECUTIVA
   VENTAS DEL DÍA

   PARTE 5 DE 5

   DRAWERS
   DETALLE PRODUCTO
   CLIENTE MAYORISTA
   CANAL
   FISCAL
   MERCADO PAGO
   TOAST
   AJUSTES FINALES
   ========================================================= */


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

.sales-day-drawer-root {
  position:
    fixed;

  inset:
    0;

  z-index:
    10000;

  pointer-events:
    none;
}


.sales-day-drawer-root:empty {
  display:
    none;
}


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

.sales-day-drawer-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(8, 10, 13, 0.52);

  backdrop-filter:
    blur(3px);

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

  pointer-events:
    auto;

  animation:
    salesDayDrawerBackdropIn
    160ms
    ease-out
    both;
}


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

.sales-day-drawer {
  position:
    absolute;

  top:
    0;

  right:
    0;

  width:
    min(650px, 100%);

  height:
    100%;

  color:
    var(--sales-text);

  background:
    var(--sales-surface);

  border-left:
    1px solid var(--sales-border);

  box-shadow:
    -18px 0 50px rgba(16, 24, 40, 0.14);

  pointer-events:
    auto;

  overflow:
    hidden;

  animation:
    salesDayDrawerIn
    220ms
    cubic-bezier(0.4, 0, 0.2, 1)
    both;
}


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

.sales-day-drawer__close {
  appearance:
    none;

  position:
    absolute;

  top:
    15px;

  right:
    15px;

  z-index:
    10;

  width:
    38px;

  height:
    38px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

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

  background:
    var(--sales-surface);

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

  border-radius:
    9px;

  outline:
    none;

  cursor:
    pointer;

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

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


.sales-day-drawer__close:hover {
  color:
    var(--sales-text);

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

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

  transform:
    translateY(-1px);
}


.sales-day-drawer__close:active {
  transform:
    translateY(0);
}


.sales-day-drawer__close:focus-visible {
  outline:
    3px solid rgba(17, 20, 24, 0.1);

  outline-offset:
    2px;
}


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

.sales-day-drawer__content {
  width:
    100%;

  height:
    100%;

  padding:
    20px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;

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


.sales-day-drawer__content::-webkit-scrollbar {
  width:
    8px;
}


.sales-day-drawer__content::-webkit-scrollbar-track {
  background:
    transparent;
}


.sales-day-drawer__content::-webkit-scrollbar-thumb {
  background:
    var(--sales-border-strong);

  border-radius:
    999px;

  border:
    2px solid var(--sales-surface);
}


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

.sales-day-drawer-header {
  min-height:
    92px;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  padding:
    3px 55px 18px 0;

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


.sales-day-drawer-header__icon {
  width:
    42px;

  height:
    42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  color:
    var(--sales-text);

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

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

  border-radius:
    10px;
}


.sales-day-drawer-header > div {
  min-width:
    0;

  flex:
    1 1 auto;
}


.sales-day-drawer-header h2 {
  margin:
    4px 0 0;

  color:
    var(--sales-text);

  font-size:
    19px;

  font-weight:
    850;

  line-height:
    1.15;

  letter-spacing:
    -0.035em;

  overflow-wrap:
    anywhere;
}


.sales-day-drawer-header p {
  margin:
    5px 0 0;

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

  font-size:
    10.5px;

  font-weight:
    600;

  line-height:
    1.45;

  overflow-wrap:
    anywhere;
}


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

.sales-day-drawer-section {
  width:
    100%;

  padding:
    18px 0;

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


.sales-day-drawer-section:last-child {
  border-bottom:
    0;
}


.sales-day-drawer-section > h3 {
  margin:
    0 0 11px;

  color:
    var(--sales-text);

  font-size:
    12px;

  font-weight:
    850;

  line-height:
    1.2;

  letter-spacing:
    -0.015em;
}


/* =========================================================
   DRAWER SECTION HEAD
   ========================================================= */

.sales-day-drawer-section__head {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    11px;
}


.sales-day-drawer-section__head h3 {
  margin:
    0;

  color:
    var(--sales-text);

  font-size:
    12px;

  font-weight:
    850;
}


.sales-day-drawer-section__head > span {
  min-width:
    27px;

  min-height:
    25px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 7px;

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

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

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

  border-radius:
    6px;

  font-size:
    9px;

  font-weight:
    800;
}


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

.sales-day-drawer-metrics-grid {
  width:
    100%;

  display:
    grid;

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

  gap:
    8px;
}


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

.sales-day-drawer-metric {
  position:
    relative;

  min-width:
    0;

  min-height:
    92px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    5px;

  padding:
    11px 12px;

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

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

  border-radius:
    9px;

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


.sales-day-drawer-metric:hover {
  background:
    var(--sales-surface);

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

  transform:
    translateY(-1px);
}


.sales-day-drawer-metric > span {
  color:
    var(--sales-text-muted);

  font-size:
    8.5px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.035em;

  text-transform:
    uppercase;
}


.sales-day-drawer-metric > strong {
  min-width:
    0;

  color:
    var(--sales-text);

  font-size:
    15px;

  font-weight:
    850;

  line-height:
    1.1;

  letter-spacing:
    -0.03em;

  font-variant-numeric:
    tabular-nums;

  overflow-wrap:
    anywhere;
}


.sales-day-drawer-metric > small {
  color:
    var(--sales-text-muted);

  font-size:
    8.5px;

  font-weight:
    550;

  line-height:
    1.4;
}


/* =========================================================
   DRAWER METRIC POSITIVE
   ========================================================= */

.sales-day-drawer-metric--positive {
  background:
    var(--sales-success-bg);

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


.sales-day-drawer-metric--positive > strong {
  color:
    var(--sales-success);
}


/* =========================================================
   DRAWER METRIC NEGATIVE
   ========================================================= */

.sales-day-drawer-metric--negative {
  background:
    var(--sales-danger-bg);

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


.sales-day-drawer-metric--negative > strong {
  color:
    var(--sales-danger);
}


/* =========================================================
   DRAWER METRIC WARNING
   ========================================================= */

.sales-day-drawer-metric--warning {
  background:
    var(--sales-warning-bg);

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


.sales-day-drawer-metric--warning > strong {
  color:
    var(--sales-warning);
}


/* =========================================================
   DRAWER PRODUCT LIST
   ========================================================= */

.sales-day-drawer-products {
  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


/* =========================================================
   DRAWER PRODUCT ROW
   ========================================================= */

.sales-day-drawer-product-row {
  appearance:
    none;

  width:
    100%;

  min-height:
    57px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    9px 11px;

  color:
    inherit;

  text-align:
    left;

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

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

  border-radius:
    8px;

  outline:
    none;

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


button.sales-day-drawer-product-row {
  cursor:
    pointer;
}


button.sales-day-drawer-product-row:hover {
  background:
    var(--sales-surface);

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

  transform:
    translateX(2px);
}


.sales-day-drawer-product-row.has-warning {
  background:
    var(--sales-warning-bg);

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


/* =========================================================
   DRAWER PRODUCT ROW COLUMNS
   ========================================================= */

.sales-day-drawer-product-row > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.sales-day-drawer-product-row > div:first-child {
  flex:
    1 1 auto;
}


.sales-day-drawer-product-row > div:last-child {
  flex:
    0 0 auto;

  align-items:
    flex-end;

  text-align:
    right;
}


.sales-day-drawer-product-row strong {
  min-width:
    0;

  color:
    var(--sales-text);

  font-size:
    10.5px;

  font-weight:
    800;

  line-height:
    1.25;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}


.sales-day-drawer-product-row
> div:first-child
strong {
  white-space:
    nowrap;
}


.sales-day-drawer-product-row span {
  color:
    var(--sales-text-muted);

  font-size:
    8.5px;

  font-weight:
    600;

  line-height:
    1.35;
}


/* =========================================================
   DRAWER CHANNEL LIST
   ========================================================= */

.sales-day-drawer-channel-list {
  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


/* =========================================================
   DRAWER CHANNEL ROW
   ========================================================= */

.sales-day-drawer-channel-row {
  width:
    100%;

  min-height:
    61px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  padding:
    9px 11px;

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

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

  border-radius:
    8px;
}


.sales-day-drawer-channel-row > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.sales-day-drawer-channel-row > div:last-child {
  align-items:
    flex-end;

  text-align:
    right;
}


.sales-day-drawer-channel-row strong {
  color:
    var(--sales-text);

  font-size:
    10.5px;

  font-weight:
    800;

  line-height:
    1.2;
}


.sales-day-drawer-channel-row span {
  color:
    var(--sales-text-muted);

  font-size:
    8.5px;

  font-weight:
    600;
}


/* =========================================================
   DRAWER CHANNEL TONES
   ========================================================= */

.sales-day-drawer-channel-row
.is-positive {
  color:
    var(--sales-success);
}


.sales-day-drawer-channel-row
.is-negative {
  color:
    var(--sales-danger);
}


/* =========================================================
   DRAWER INLINE ALERT
   ========================================================= */

.sales-day-inline-alert--drawer {
  margin-top:
    14px;
}


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

.sales-day-drawer-loading {
  width:
    100%;

  min-height:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  padding-top:
    14px;
}


.sales-day-drawer-loading
.sales-day-skeleton--row {
  height:
    68px;
}


/* =========================================================
   BODY WHEN DRAWER OPEN
   ========================================================= */

body.sales-day-drawer-open {
  overflow:
    hidden;
}


/* =========================================================
   OCULTAR LAYOUT DETRÁS DEL DRAWER
   ========================================================= */

body.sales-day-drawer-open
.sidebar,
body.sales-day-drawer-open
.app-sidebar,
body.sales-day-drawer-open
.topbar,
body.sales-day-drawer-open
.app-topbar,
body.sales-day-drawer-open
.rightbar,
body.sales-day-drawer-open
.app-rightbar {
  pointer-events:
    none;
}


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

.sales-day-toast {
  position:
    fixed;

  right:
    22px;

  bottom:
    22px;

  z-index:
    11000;

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

  min-height:
    56px;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  padding:
    11px 13px;

  color:
    var(--sales-text);

  background:
    var(--sales-surface);

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

  border-radius:
    10px;

  box-shadow:
    0 14px 40px rgba(16, 24, 40, 0.16);

  opacity:
    0;

  transform:
    translateY(10px)
    scale(0.98);

  pointer-events:
    none;

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


.sales-day-toast.is-visible {
  opacity:
    1;

  transform:
    translateY(0)
    scale(1);
}


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

.sales-day-toast__icon {
  width:
    32px;

  height:
    32px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

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

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

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

  border-radius:
    8px;
}


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

.sales-day-toast__message {
  min-width:
    0;

  flex:
    1 1 auto;

  color:
    var(--sales-text);

  font-size:
    10.5px;

  font-weight:
    700;

  line-height:
    1.4;
}


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

.sales-day-toast.is-success {
  border-color:
    var(--sales-success-border);
}


.sales-day-toast.is-success
.sales-day-toast__icon {
  color:
    var(--sales-success);

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

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


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

.sales-day-toast.is-error {
  border-color:
    var(--sales-danger-border);
}


.sales-day-toast.is-error
.sales-day-toast__icon {
  color:
    var(--sales-danger);

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

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


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

.sales-day-toast.is-info
.sales-day-toast__icon {
  color:
    var(--sales-info);

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

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


/* =========================================================
   GLOBAL FONT WEIGHT
   ========================================================= */

.sales-day-page strong,
.sales-day-page h1,
.sales-day-page h2,
.sales-day-page h3,
.sales-day-page h4 {
  text-rendering:
    optimizeLegibility;
}


/* =========================================================
   NUMBERS
   ========================================================= */

.sales-day-page td,
.sales-day-page strong,
.sales-day-page
.sales-day-executive-kpi__value,
.sales-day-page
.sales-day-financial-card__value {
  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   SELECTION
   ========================================================= */

.sales-day-page ::selection {
  color:
    #ffffff;

  background:
    #17191d;
}


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

.sales-day-page button:focus-visible,
.sales-day-page input:focus-visible,
.sales-day-page select:focus-visible {
  outline:
    3px solid rgba(17, 20, 24, 0.09);

  outline-offset:
    2px;
}


/* =========================================================
   NO HORIZONTAL PAGE SCROLL
   ========================================================= */

.executive-sales-day-page
.app-main,
.executive-sales-day-page
.sales-day-page,
.executive-sales-day-page
.sales-day-workspace,
.executive-sales-day-page
.sales-day-section {
  min-width:
    0;

  max-width:
    100%;
}


/* =========================================================
   FOOTER
   ========================================================= */

.executive-sales-day-page
.app-main {
  min-height:
    100vh;
}


.executive-sales-day-page
.sales-day-page {
  flex:
    1 1 auto;
}


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

html[data-theme="dark"]
.sales-day-drawer,
html[data-theme="dark"]
.sales-day-drawer__close,
html[data-theme="dark"]
.sales-day-drawer-header__icon,
html[data-theme="dark"]
.sales-day-drawer-metric,
html[data-theme="dark"]
.sales-day-drawer-product-row,
html[data-theme="dark"]
.sales-day-drawer-channel-row,
html[data-theme="dark"]
.sales-day-toast,
body.dark
.sales-day-drawer,
body.dark
.sales-day-drawer__close,
body.dark
.sales-day-drawer-header__icon,
body.dark
.sales-day-drawer-metric,
body.dark
.sales-day-drawer-product-row,
body.dark
.sales-day-drawer-channel-row,
body.dark
.sales-day-toast {
  background:
    var(--sales-surface);
}


html[data-theme="dark"]
.sales-day-drawer-metric--positive,
body.dark
.sales-day-drawer-metric--positive {
  background:
    #0f2119;
}


html[data-theme="dark"]
.sales-day-drawer-metric--negative,
body.dark
.sales-day-drawer-metric--negative {
  background:
    #251313;
}


html[data-theme="dark"]
.sales-day-drawer-metric--warning,
body.dark
.sales-day-drawer-metric--warning {
  background:
    #241e10;
}


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

@keyframes salesDayDrawerBackdropIn {

  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }
}


@keyframes salesDayDrawerIn {

  from {
    opacity:
      0;

    transform:
      translateX(30px);
  }

  to {
    opacity:
      1;

    transform:
      translateX(0);
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1120px) {

  .sales-day-drawer {
    width:
      min(620px, 88vw);
  }


  .sales-day-drawer-metrics-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .sales-day-drawer {
    width:
      100%;

    height:
      100dvh;

    border-left:
      0;
  }


  .sales-day-drawer__content {
    padding:
      15px;
  }


  .sales-day-drawer__close {
    top:
      12px;

    right:
      12px;
  }


  .sales-day-drawer-header {
    min-height:
      84px;

    padding:
      2px 48px 15px 0;
  }


  .sales-day-drawer-header__icon {
    width:
      37px;

    height:
      37px;
  }


  .sales-day-drawer-header h2 {
    font-size:
      17px;
  }


  .sales-day-drawer-section {
    padding:
      15px 0;
  }


  .sales-day-drawer-metrics-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      7px;
  }


  .sales-day-drawer-metric {
    min-height:
      84px;

    padding:
      9px 10px;
  }


  .sales-day-drawer-metric > strong {
    font-size:
      13.5px;
  }


  .sales-day-drawer-product-row {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      7px;
  }


  .sales-day-drawer-product-row
  > div:last-child {
    width:
      100%;

    align-items:
      flex-start;

    text-align:
      left;
  }


  .sales-day-drawer-channel-row {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  .sales-day-drawer-channel-row
  > div:last-child {
    align-items:
      flex-start;

    text-align:
      left;
  }


  .sales-day-toast {
    right:
      12px;

    bottom:
      12px;

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


/* =========================================================
   MOBILE SMALL
   ========================================================= */

@media (max-width: 480px) {

  .sales-day-drawer-metrics-grid {
    grid-template-columns:
      1fr;
  }


  .sales-day-drawer-metric {
    min-height:
      77px;
  }


  .sales-day-drawer-header {
    align-items:
      flex-start;
  }


  .sales-day-drawer-header h2 {
    font-size:
      16px;
  }
}


/* =========================================================
   ULTRA WIDE
   ========================================================= */

@media (min-width: 1800px) {

  .sales-day-workspace {
    max-width:
      1880px;
  }


  .sales-day-executive-kpi-grid {
    gap:
      13px;
  }


  .sales-day-channel-grid {
    gap:
      13px;
  }


  .sales-day-analysis-grid {
    gap:
      13px;
  }
}


/* =========================================================
   HOVER SOLO EN DISPOSITIVOS COMPATIBLES
   ========================================================= */

@media (hover: none) {

  .sales-day-panel:hover,
  .sales-day-executive-kpi:hover,
  .sales-day-financial-card:hover,
  .sales-day-channel-performance:hover,
  .sales-day-analysis-card:hover,
  .sales-day-client-ranking__item:hover,
  .sales-day-missing-row:hover,
  .sales-day-drawer-metric:hover,
  button.sales-day-drawer-product-row:hover {
    transform:
      none;

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


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

@media print {

  .sales-day-drawer-root,
  .sales-day-config-root,
  .sales-day-toast,
  .sales-day-btn,
  .sales-day-icon-btn {
    display:
      none !important;
  }


  .sales-day-workspace {
    max-width:
      none;

    padding:
      0;
  }


  .sales-day-panel,
  .sales-day-command,
  .sales-day-overview-block,
  .sales-day-analysis-card {
    break-inside:
      avoid;

    box-shadow:
      none;
  }
}


/* =========================================================
   FINAL RESPONSIVE SAFETY
   ========================================================= */

@media (max-width: 760px) {

  .sales-day-page {
    font-size:
      13px;
  }


  .sales-day-workspace > * {
    min-width:
      0;

    max-width:
      100%;
  }


  .sales-day-panel__header,
  .sales-day-panel__body,
  .sales-day-analysis-card,
  .sales-day-executive-kpi,
  .sales-day-financial-card,
  .sales-day-channel-performance {
    max-width:
      100%;
  }


  .sales-day-table-wrap {
    -webkit-overflow-scrolling:
      touch;
  }
}


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

@media (prefers-reduced-motion: reduce) {

  .sales-day-drawer,
  .sales-day-drawer-backdrop,
  .sales-day-toast {
    animation:
      none !important;

    transition:
      none !important;
  }
}


/* =========================================================
   FIN PARTE 5 DE 5
   ========================================================= *//* =========================================================
   FIX CAMPOS FILTROS
   UBICACIÓN:
   frontend/src/pages/direccion-ejecutiva/ventas-dia/ventas-dia.css

   AGREGAR AL FINAL
   ========================================================= */


/* =========================================================
   LABEL
   ========================================================= */

.sales-day-field {
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 7px;
}


.sales-day-field > span {
  display: block;

  color: var(--sales-text);

  font-size: 11px;
  font-weight: 800;

  line-height: 1.2;

  letter-spacing: -0.01em;
}


/* =========================================================
   INPUTS + SELECTS REALES DEL JS
   ========================================================= */

.sales-day-field > input,
.sales-day-field > select,
.sales-day-field .sales-day-input-icon > input {
  appearance: none;

  width: 100%;
  min-width: 0;
  height: 42px;

  margin: 0;

  padding:
    0 12px;

  color:
    var(--sales-text);

  background:
    var(--sales-surface);

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

  border-radius:
    9px;

  outline:
    none;

  font-family:
    inherit;

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1;

  box-shadow:
    inset 0 1px 1px rgba(16, 24, 40, 0.02);

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


/* =========================================================
   HOVER
   ========================================================= */

.sales-day-field > input:hover,
.sales-day-field > select:hover,
.sales-day-field .sales-day-input-icon > input:hover {
  border-color:
    #8b949e;
}


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

.sales-day-field > input:focus,
.sales-day-field > select:focus,
.sales-day-field .sales-day-input-icon > input:focus {
  background:
    #ffffff;

  border-color:
    #555f6a;

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


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

.sales-day-field > select {
  padding-right:
    38px;

  cursor:
    pointer;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--sales-text-muted) 50%
    ),
    linear-gradient(
      135deg,
      var(--sales-text-muted) 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 17px) 18px,
    calc(100% - 12px) 18px;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat:
    no-repeat;
}


/* =========================================================
   DATE
   ========================================================= */

.sales-day-field > input[type="date"] {
  cursor:
    pointer;

  font-variant-numeric:
    tabular-nums;
}


.sales-day-field > input[type="date"]::-webkit-calendar-picker-indicator {
  opacity:
    0.7;

  cursor:
    pointer;
}


/* =========================================================
   SEARCH WRAPPER
   ========================================================= */

.sales-day-field--search
.sales-day-input-icon {
  position:
    relative;

  width:
    100%;
  height:
    42px;

  display:
    flex;

  align-items:
    center;

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


/* =========================================================
   SEARCH ICON
   ========================================================= */

.sales-day-field--search
.sales-day-input-icon > svg,
.sales-day-field--search
.sales-day-input-icon > i {
  position:
    absolute;

  left:
    12px;

  top:
    50%;

  z-index:
    2;

  width:
    17px;

  height:
    17px;

  transform:
    translateY(-50%);

  pointer-events:
    none;
}


/* =========================================================
   SEARCH INPUT
   ========================================================= */

.sales-day-field--search
.sales-day-input-icon > input {
  height:
    42px;

  padding-left:
    38px;

  padding-right:
    12px;
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.sales-day-field
input::placeholder {
  color:
    var(--sales-text-soft);

  font-weight:
    550;

  opacity:
    1;
}


/* =========================================================
   GRID FILTROS
   ========================================================= */

.sales-day-filter-grid {
  width:
    100%;

  display:
    grid;

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

  gap:
    14px;

  align-items:
    end;
}


/* =========================================================
   LOS 2 BUSCADORES ABAJO
   ========================================================= */

.sales-day-field--search {
  min-width:
    0;
}


/* =========================================================
   ACCIONES
   ========================================================= */

.sales-day-filter-actions {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  margin-top:
    14px;
}


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

html[data-theme="dark"]
.sales-day-field > input,
html[data-theme="dark"]
.sales-day-field > select,
html[data-theme="dark"]
.sales-day-field .sales-day-input-icon > input,
body.dark
.sales-day-field > input,
body.dark
.sales-day-field > select,
body.dark
.sales-day-field .sales-day-input-icon > input {
  color:
    var(--sales-text);

  background:
    var(--sales-surface);

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


html[data-theme="dark"]
.sales-day-field > input:focus,
html[data-theme="dark"]
.sales-day-field > select:focus,
html[data-theme="dark"]
.sales-day-field .sales-day-input-icon > input:focus,
body.dark
.sales-day-field > input:focus,
body.dark
.sales-day-field > select:focus,
body.dark
.sales-day-field .sales-day-input-icon > input:focus {
  background:
    var(--sales-surface-soft);

  border-color:
    #747d87;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1120px) {

  .sales-day-filter-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .sales-day-filter-grid {
    grid-template-columns:
      1fr;

    gap:
      11px;
  }


  .sales-day-field > input,
  .sales-day-field > select,
  .sales-day-field .sales-day-input-icon > input {
    height:
      44px;

    font-size:
      13px;
  }


  .sales-day-field--search
  .sales-day-input-icon {
    height:
      44px;
  }


  .sales-day-filter-actions {
    display:
      grid;

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

    margin-top:
      12px;
  }


  .sales-day-filter-actions
  .sales-day-btn {
    width:
      100%;
  }
}


/* =========================================================
   MOBILE SMALL
   ========================================================= */

@media (max-width: 480px) {

  .sales-day-filter-actions {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   FIN FIX CAMPOS FILTROS
   ========================================================= *//* =========================================================
   FIX SUPERPOSICIÓN LABEL / INPUT
   UBICACIÓN:
   frontend/src/pages/direccion-ejecutiva/ventas-dia/ventas-dia.css

   AGREGAR AL FINAL
   ========================================================= */

.sales-day-filter-grid .sales-day-field {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: stretch !important;

  gap: 8px !important;

  min-width: 0 !important;

  margin: 0 !important;

  padding: 0 !important;
}


.sales-day-filter-grid .sales-day-field > span {
  position: static !important;

  inset: auto !important;

  display: block !important;

  width: 100% !important;

  height: auto !important;

  min-height: 14px !important;

  margin: 0 !important;

  padding: 0 !important;

  transform: none !important;

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

  background: transparent !important;

  font-size: 11px !important;

  font-weight: 800 !important;

  line-height: 14px !important;

  white-space: nowrap !important;
}


.sales-day-filter-grid
.sales-day-field--search
.sales-day-input-icon {
  position: relative !important;

  width: 100% !important;

  height: 42px !important;

  min-height: 42px !important;

  margin: 0 !important;

  padding: 0 !important;

  transform: none !important;
}


.sales-day-filter-grid
.sales-day-field--search
.sales-day-input-icon > input {
  position: static !important;

  width: 100% !important;

  height: 42px !important;

  min-height: 42px !important;

  margin: 0 !important;

  padding:
    0 12px
    0 38px !important;

  transform: none !important;
}


.sales-day-filter-grid
.sales-day-field--search
.sales-day-input-icon > svg,
.sales-day-filter-grid
.sales-day-field--search
.sales-day-input-icon > i {
  position: absolute !important;

  top: 50% !important;

  left: 12px !important;

  margin: 0 !important;

  transform: translateY(-50%) !important;

  pointer-events: none !important;
}


.sales-day-panel--filters
.sales-day-panel__body {
  overflow: visible !important;
}


@media (max-width: 760px) {

  .sales-day-filter-grid .sales-day-field {
    gap: 7px !important;
  }


  .sales-day-filter-grid
  .sales-day-field--search
  .sales-day-input-icon,
  .sales-day-filter-grid
  .sales-day-field--search
  .sales-day-input-icon > input {
    height: 44px !important;

    min-height: 44px !important;
  }
}/* =========================================================
   AJUSTE FINAL FILTROS
   ========================================================= */

.sales-day-filter-grid .sales-day-field--search {
  margin-top: 10px !important;
}


.sales-day-filter-grid
.sales-day-field--search
> span {
  margin-bottom: 3px !important;

  font-size: 11px !important;
  font-weight: 800 !important;

  line-height: 1.2 !important;
}


.sales-day-filter-grid
.sales-day-field--search
.sales-day-input-icon {
  margin-top: 0 !important;
}


.sales-day-panel--filters
.sales-day-panel__body {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}


@media (max-width: 760px) {

  .sales-day-filter-grid
  .sales-day-field--search {
    margin-top: 4px !important;
  }
}/* =========================================================
   FIX FILA BUSCADORES
   ========================================================= */

.sales-day-filter-grid {
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  column-gap:
    14px !important;

  row-gap:
    16px !important;
}


.sales-day-filter-grid
.sales-day-field--search {
  grid-column:
    span 2 !important;

  margin-top:
    0 !important;
}


.sales-day-filter-grid
.sales-day-field--search
> span {
  margin:
    0 0 7px 0 !important;

  line-height:
    1.2 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1120px) {

  .sales-day-filter-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }


  .sales-day-filter-grid
  .sales-day-field--search {
    grid-column:
      span 1 !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .sales-day-filter-grid {
    grid-template-columns:
      1fr !important;

    row-gap:
      12px !important;
  }


  .sales-day-filter-grid
  .sales-day-field--search {
    grid-column:
      1 / -1 !important;
  }
}/* =========================================================
   FIX GANANCIA POR CANAL
   UBICACIÓN:
   frontend/src/pages/direccion-ejecutiva/ventas-dia/ventas-dia.css

   AGREGAR AL FINAL
   ========================================================= */


/* =========================================================
   CONTENEDOR
   ========================================================= */

.sales-day-horizontal-bars {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 10px;
}


/* =========================================================
   BOTÓN / FILA
   ========================================================= */

.sales-day-horizontal-bar {
  appearance: none;

  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 8px;

  padding: 11px 12px;

  color:
    var(--sales-text);

  text-align: left;

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

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

  border-radius:
    9px;

  outline:
    none;

  cursor:
    pointer;

  font-family:
    inherit;

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


.sales-day-horizontal-bar:hover {
  background:
    var(--sales-surface);

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

  transform:
    translateY(-1px);
}


.sales-day-horizontal-bar:focus-visible {
  outline:
    3px solid rgba(17, 20, 24, 0.08);

  outline-offset:
    2px;
}


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

.sales-day-horizontal-bar__head {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;
}


.sales-day-horizontal-bar__head > span {
  min-width: 0;

  color:
    var(--sales-text);

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.2;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.sales-day-horizontal-bar__head > strong {
  flex:
    0 0 auto;

  color:
    var(--sales-text);

  font-size:
    11px;

  font-weight:
    850;

  line-height:
    1.2;

  font-variant-numeric:
    tabular-nums;

  white-space:
    nowrap;
}


/* =========================================================
   POSITIVO / NEGATIVO
   ========================================================= */

.sales-day-horizontal-bar__head
.is-positive {
  color:
    var(--sales-success);
}


.sales-day-horizontal-bar__head
.is-negative {
  color:
    var(--sales-danger);
}


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

.sales-day-horizontal-bar__track {
  position: relative;

  width: 100%;
  height: 7px;

  overflow: hidden;

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

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

  border-radius:
    999px;
}


/* =========================================================
   FILL
   ========================================================= */

.sales-day-horizontal-bar__fill {
  display: block;

  height: 100%;

  min-width: 2%;

  background:
    var(--sales-text);

  border-radius:
    inherit;

  transform-origin:
    left center;

  animation:
    salesDayHorizontalBarGrow
    360ms
    ease-out
    both;
}


.sales-day-horizontal-bar__fill.is-positive {
  background:
    var(--sales-success);
}


.sales-day-horizontal-bar__fill.is-negative {
  background:
    var(--sales-danger);
}


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

.sales-day-horizontal-bar__meta {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;
}


.sales-day-horizontal-bar__meta > span {
  color:
    var(--sales-text-muted);

  font-size:
    9px;

  font-weight:
    650;

  line-height:
    1.2;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   ANIMACIÓN
   ========================================================= */

@keyframes salesDayHorizontalBarGrow {

  from {
    transform:
      scaleX(0);

    opacity:
      0.5;
  }

  to {
    transform:
      scaleX(1);

    opacity:
      1;
  }
}


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

html[data-theme="dark"]
.sales-day-horizontal-bar,
body.dark
.sales-day-horizontal-bar {
  background:
    var(--sales-surface-soft);
}


html[data-theme="dark"]
.sales-day-horizontal-bar:hover,
body.dark
.sales-day-horizontal-bar:hover {
  background:
    var(--sales-surface);
}


html[data-theme="dark"]
.sales-day-horizontal-bar__track,
body.dark
.sales-day-horizontal-bar__track {
  background:
    #242930;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .sales-day-horizontal-bar {
    padding:
      10px;
  }


  .sales-day-horizontal-bar__head > span,
  .sales-day-horizontal-bar__head > strong {
    font-size:
      10px;
  }


  .sales-day-horizontal-bar__meta {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      4px;
  }
}


/* =========================================================
   FIN FIX GANANCIA POR CANAL
   ========================================================= *//* =========================================================
   FIX BOTONES PRODUCTOS
   UBICACIÓN:
   frontend/src/pages/direccion-ejecutiva/ventas-dia/ventas-dia.css
   AGREGAR AL FINAL
   ========================================================= */


/* =========================================================
   RANKING PRODUCTOS
   CONTENEDOR
   ========================================================= */

.sales-day-product-chart {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 7px;
}


/* =========================================================
   RANKING PRODUCTOS
   BOTÓN COMPLETO
   ========================================================= */

.sales-day-product-chart__row {
  appearance: none;

  width: 100%;
  min-width: 0;

  display: grid;

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

  align-items: center;

  gap: 10px;

  padding:
    9px 10px;

  color:
    var(--sales-text);

  text-align:
    left;

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

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

  border-radius:
    9px;

  outline:
    none;

  font-family:
    inherit;

  cursor:
    pointer;

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


.sales-day-product-chart__row:hover {
  background:
    var(--sales-surface);

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

  transform:
    translateY(-1px);
}


.sales-day-product-chart__row:focus-visible {
  outline:
    3px solid rgba(17, 20, 24, 0.08);

  outline-offset:
    2px;
}


/* =========================================================
   POSICIÓN RANKING
   ========================================================= */

.sales-day-product-chart__position {
  width: 27px;
  height: 27px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

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

  background:
    var(--sales-surface);

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

  border-radius:
    7px;

  font-size:
    9.5px;

  font-weight:
    850;

  line-height:
    1;
}


/* =========================================================
   CUERPO RANKING
   ========================================================= */

.sales-day-product-chart__main {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 7px;
}


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

.sales-day-product-chart__head {
  width: 100%;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 14px;
}


.sales-day-product-chart__head > div {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 2px;

  flex: 1 1 auto;
}


.sales-day-product-chart__head
> div
> strong {
  min-width: 0;

  overflow: hidden;

  color:
    var(--sales-text);

  font-size:
    10.5px;

  font-weight:
    800;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.sales-day-product-chart__head
> div
> span {
  min-width: 0;

  overflow: hidden;

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

  font-size:
    8.5px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.sales-day-product-chart__head
> strong {
  flex:
    0 0 auto;

  color:
    var(--sales-text);

  font-size:
    10.5px;

  font-weight:
    850;

  line-height:
    1.2;

  text-align:
    right;

  font-variant-numeric:
    tabular-nums;

  white-space:
    nowrap;
}


/* =========================================================
   TRACK RANKING
   ========================================================= */

.sales-day-product-chart__track {
  position: relative;

  width: 100%;
  height: 6px;

  overflow: hidden;

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

  border-radius:
    999px;
}


/* =========================================================
   FILL RANKING
   ========================================================= */

.sales-day-product-chart__fill {
  display: block;

  height: 100%;

  min-width:
    2%;

  background:
    var(--sales-text);

  border-radius:
    inherit;

  transform-origin:
    left center;

  animation:
    salesDayProductBarGrow
    360ms
    ease-out
    both;
}


/* =========================================================
   BOTÓN PRODUCTO EN TABLA
   ========================================================= */

.sales-day-product-link {
  appearance: none;

  width: 100%;
  min-width: 0;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  flex-wrap: wrap;

  gap: 5px 8px;

  padding:
    0;

  color:
    inherit;

  text-align:
    left;

  background:
    transparent;

  border:
    0;

  border-radius:
    6px;

  outline:
    none;

  font-family:
    inherit;

  cursor:
    pointer;
}


/* =========================================================
   PRODUCTO TABLA TEXTO
   ========================================================= */

.sales-day-product-link > strong {
  min-width: 0;

  color:
    var(--sales-text);

  font-size:
    10.5px;

  font-weight:
    800;

  line-height:
    1.3;

  text-align:
    left;
}


/* =========================================================
   PRODUCTO TABLA HOVER
   ========================================================= */

.sales-day-product-link:hover > strong {
  text-decoration:
    underline;

  text-decoration-thickness:
    1px;

  text-underline-offset:
    3px;
}


.sales-day-product-link:focus-visible {
  outline:
    2px solid var(--sales-border-strong);

  outline-offset:
    3px;
}


/* =========================================================
   PRODUCTO SIN COSTO
   ========================================================= */

.sales-day-product-link__warning {
  min-height:
    21px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    0 6px;

  color:
    var(--sales-warning);

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

  border:
    1px solid var(--sales-warning-border);

  border-radius:
    5px;

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1;

  white-space:
    nowrap;
}


.sales-day-product-link__warning svg,
.sales-day-product-link__warning i {
  width:
    11px;

  height:
    11px;

  flex:
    0 0 auto;
}


/* =========================================================
   QUITAR ESTILO NATIVO DE BOTÓN DEL CSS GLOBAL
   ========================================================= */

.executive-sales-day-page
button.sales-day-product-chart__row,
.executive-sales-day-page
button.sales-day-product-link {
  -webkit-tap-highlight-color:
    transparent;

  font:
    inherit;
}


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

html[data-theme="dark"]
.sales-day-product-chart__row,
body.dark
.sales-day-product-chart__row {
  background:
    var(--sales-surface-soft);
}


html[data-theme="dark"]
.sales-day-product-chart__row:hover,
body.dark
.sales-day-product-chart__row:hover {
  background:
    var(--sales-surface);
}


html[data-theme="dark"]
.sales-day-product-chart__position,
body.dark
.sales-day-product-chart__position {
  background:
    var(--sales-surface);
}


html[data-theme="dark"]
.sales-day-product-chart__track,
body.dark
.sales-day-product-chart__track {
  background:
    #242930;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .sales-day-product-chart__row {
    grid-template-columns:
      27px minmax(0, 1fr);

    gap:
      8px;

    padding:
      8px;
  }


  .sales-day-product-chart__head {
    gap:
      8px;
  }


  .sales-day-product-chart__head
  > div
  > strong {
    font-size:
      10px;
  }


  .sales-day-product-chart__head
  > strong {
    font-size:
      9.5px;
  }


  .sales-day-product-link > strong {
    font-size:
      10px;
  }
}


/* =========================================================
   ANIMACIÓN
   ========================================================= */

@keyframes salesDayProductBarGrow {

  from {
    transform:
      scaleX(0);

    opacity:
      0.45;
  }

  to {
    transform:
      scaleX(1);

    opacity:
      1;
  }
}


/* =========================================================
   FIN FIX BOTONES PRODUCTOS
   ========================================================= *//* =========================================================
   FIX DONUT + LEYENDA
   UBICACIÓN:
   frontend/src/pages/direccion-ejecutiva/ventas-dia/ventas-dia.css
   AGREGAR AL FINAL
   ========================================================= */


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

.sales-day-donut-layout {
  width: 100%;

  display: grid;

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

  align-items: center;

  gap: 26px;
}


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

.sales-day-donut-chart {
  position: relative;

  width: 190px;
  height: 190px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto;
}


.sales-day-donut-chart svg {
  width: 190px !important;
  height: 190px !important;

  display: block;

  overflow: visible;
}


/* =========================================================
   CENTRO DONUT
   ========================================================= */

.sales-day-donut-chart__center {
  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 3px;

  text-align: center;

  pointer-events: none;
}


.sales-day-donut-chart__center > span {
  color: var(--sales-text-muted);

  font-size: 10px;

  font-weight: 700;

  line-height: 1.1;

  text-transform: uppercase;
}


.sales-day-donut-chart__center > strong {
  max-width: 90px;

  color: var(--sales-text);

  font-size: 15px;

  font-weight: 850;

  line-height: 1.15;

  letter-spacing: -0.03em;

  font-variant-numeric: tabular-nums;
}


/* =========================================================
   LEYENDA
   ========================================================= */

.sales-day-chart-legend {
  width: 100%;
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 8px;
}


/* =========================================================
   BOTÓN LEYENDA
   ========================================================= */

button.sales-day-chart-legend__item {
  appearance: none;

  width: 100%;
  min-width: 0;

  min-height: 40px;

  display: grid;

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

  align-items: center;

  gap: 10px;

  padding:
    8px 11px;

  color: var(--sales-text);

  text-align: left;

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

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

  border-radius:
    8px;

  outline: none;

  font-family: inherit;

  cursor: pointer;

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


button.sales-day-chart-legend__item:hover {
  background:
    var(--sales-surface);

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

  transform:
    translateX(2px);
}


button.sales-day-chart-legend__item:focus-visible {
  outline:
    3px solid rgba(17, 20, 24, 0.08);

  outline-offset:
    2px;
}


/* =========================================================
   PUNTO LEYENDA
   ========================================================= */

.sales-day-chart-legend__dot {
  width: 8px;
  height: 8px;

  display: block;

  flex: 0 0 auto;

  border-radius: 50%;
}


/* =========================================================
   NOMBRE CANAL
   ========================================================= */

.sales-day-chart-legend__name {
  min-width: 0;

  overflow: hidden;

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

  font-size: 10.5px;

  font-weight: 750;

  line-height: 1.2;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   PORCENTAJE
   ========================================================= */

.sales-day-chart-legend__item > strong {
  color:
    var(--sales-text);

  font-size: 10.5px;

  font-weight: 850;

  line-height: 1;

  text-align: right;

  font-variant-numeric:
    tabular-nums;

  white-space:
    nowrap;
}


/* =========================================================
   QUITAR ESTILO GLOBAL DE BOTÓN
   ========================================================= */

.executive-sales-day-page
button.sales-day-chart-legend__item {
  font: inherit;

  -webkit-tap-highlight-color:
    transparent;
}


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

html[data-theme="dark"]
button.sales-day-chart-legend__item,
body.dark
button.sales-day-chart-legend__item {
  background:
    var(--sales-surface-soft);
}


html[data-theme="dark"]
button.sales-day-chart-legend__item:hover,
body.dark
button.sales-day-chart-legend__item:hover {
  background:
    var(--sales-surface);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1120px) {

  .sales-day-donut-layout {
    grid-template-columns:
      190px minmax(0, 1fr);

    gap:
      20px;
  }


  .sales-day-donut-chart,
  .sales-day-donut-chart svg {
    width:
      170px !important;

    height:
      170px !important;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .sales-day-donut-layout {
    grid-template-columns:
      1fr;

    gap:
      16px;
  }


  .sales-day-donut-chart,
  .sales-day-donut-chart svg {
    width:
      160px !important;

    height:
      160px !important;
  }


  .sales-day-chart-legend {
    width:
      100%;
  }


  button.sales-day-chart-legend__item {
    min-height:
      38px;
  }
}


/* =========================================================
   FIN FIX DONUT + LEYENDA
   ========================================================= *//* =========================================================
   COLORES POR CANAL
   AGREGAR AL FINAL
   ========================================================= */

:root {
  --sales-channel-mayorista: #2563eb;
  --sales-channel-mercado-libre: #f59e0b;
  --sales-channel-full: #10b981;
  --sales-channel-shopify: #7c3aed;
  --sales-channel-flex: #06b6d4;
  --sales-channel-colecta: #ef4444;
}


/* =========================================================
   DONUT SVG
   ========================================================= */

.sales-day-donut-chart
[data-chart-channel="MAYORISTA"] {
  stroke: var(--sales-channel-mayorista) !important;
}

.sales-day-donut-chart
[data-chart-channel="MERCADO_LIBRE"] {
  stroke: var(--sales-channel-mercado-libre) !important;
}

.sales-day-donut-chart
[data-chart-channel="FULL"] {
  stroke: var(--sales-channel-full) !important;
}

.sales-day-donut-chart
[data-chart-channel="SHOPIFY"] {
  stroke: var(--sales-channel-shopify) !important;
}

.sales-day-donut-chart
[data-chart-channel="FLEX"] {
  stroke: var(--sales-channel-flex) !important;
}

.sales-day-donut-chart
[data-chart-channel="COLECTA"] {
  stroke: var(--sales-channel-colecta) !important;
}


/* =========================================================
   LEYENDA DONUT
   ========================================================= */

button.sales-day-chart-legend__item[data-channel="MAYORISTA"]
.sales-day-chart-legend__dot {
  background: var(--sales-channel-mayorista) !important;
}

button.sales-day-chart-legend__item[data-channel="MERCADO_LIBRE"]
.sales-day-chart-legend__dot {
  background: var(--sales-channel-mercado-libre) !important;
}

button.sales-day-chart-legend__item[data-channel="FULL"]
.sales-day-chart-legend__dot {
  background: var(--sales-channel-full) !important;
}

button.sales-day-chart-legend__item[data-channel="SHOPIFY"]
.sales-day-chart-legend__dot {
  background: var(--sales-channel-shopify) !important;
}

button.sales-day-chart-legend__item[data-channel="FLEX"]
.sales-day-chart-legend__dot {
  background: var(--sales-channel-flex) !important;
}

button.sales-day-chart-legend__item[data-channel="COLECTA"]
.sales-day-chart-legend__dot {
  background: var(--sales-channel-colecta) !important;
}


/* =========================================================
   BORDE SUAVE EN LEYENDA
   ========================================================= */

button.sales-day-chart-legend__item[data-channel="MAYORISTA"] {
  border-color: color-mix(in srgb, var(--sales-channel-mayorista) 35%, #d1d5db) !important;
}

button.sales-day-chart-legend__item[data-channel="MERCADO_LIBRE"] {
  border-color: color-mix(in srgb, var(--sales-channel-mercado-libre) 35%, #d1d5db) !important;
}

button.sales-day-chart-legend__item[data-channel="FULL"] {
  border-color: color-mix(in srgb, var(--sales-channel-full) 35%, #d1d5db) !important;
}

button.sales-day-chart-legend__item[data-channel="SHOPIFY"] {
  border-color: color-mix(in srgb, var(--sales-channel-shopify) 35%, #d1d5db) !important;
}

button.sales-day-chart-legend__item[data-channel="FLEX"] {
  border-color: color-mix(in srgb, var(--sales-channel-flex) 35%, #d1d5db) !important;
}

button.sales-day-chart-legend__item[data-channel="COLECTA"] {
  border-color: color-mix(in srgb, var(--sales-channel-colecta) 35%, #d1d5db) !important;
}


/* =========================================================
   GANANCIA POR CANAL
   ========================================================= */

.sales-day-horizontal-bar[data-channel="MAYORISTA"]
.sales-day-horizontal-bar__fill {
  background: var(--sales-channel-mayorista) !important;
}

.sales-day-horizontal-bar[data-channel="MERCADO_LIBRE"]
.sales-day-horizontal-bar__fill {
  background: var(--sales-channel-mercado-libre) !important;
}

.sales-day-horizontal-bar[data-channel="FULL"]
.sales-day-horizontal-bar__fill {
  background: var(--sales-channel-full) !important;
}

.sales-day-horizontal-bar[data-channel="SHOPIFY"]
.sales-day-horizontal-bar__fill {
  background: var(--sales-channel-shopify) !important;
}

.sales-day-horizontal-bar[data-channel="FLEX"]
.sales-day-horizontal-bar__fill {
  background: var(--sales-channel-flex) !important;
}

.sales-day-horizontal-bar[data-channel="COLECTA"]
.sales-day-horizontal-bar__fill {
  background: var(--sales-channel-colecta) !important;
}


/* =========================================================
   TEXTO GANANCIA POR CANAL
   ========================================================= */

.sales-day-horizontal-bar[data-channel="MAYORISTA"]
.sales-day-horizontal-bar__head
> strong {
  color: var(--sales-channel-mayorista) !important;
}

.sales-day-horizontal-bar[data-channel="MERCADO_LIBRE"]
.sales-day-horizontal-bar__head
> strong {
  color: var(--sales-channel-mercado-libre) !important;
}

.sales-day-horizontal-bar[data-channel="FULL"]
.sales-day-horizontal-bar__head
> strong {
  color: var(--sales-channel-full) !important;
}

.sales-day-horizontal-bar[data-channel="SHOPIFY"]
.sales-day-horizontal-bar__head
> strong {
  color: var(--sales-channel-shopify) !important;
}

.sales-day-horizontal-bar[data-channel="FLEX"]
.sales-day-horizontal-bar__head
> strong {
  color: var(--sales-channel-flex) !important;
}

.sales-day-horizontal-bar[data-channel="COLECTA"]
.sales-day-horizontal-bar__head
> strong {
  color: var(--sales-channel-colecta) !important;
}/* =========================================================
   FIX CLIENTES DESTACADOS MAYORISTA
   UBICACIÓN:
   frontend/src/pages/direccion-ejecutiva/ventas-dia/ventas-dia.css
   AGREGAR AL FINAL
   ========================================================= */


/* =========================================================
   CONTENEDOR
   ========================================================= */

.sales-day-client-ranking {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 8px;
}


/* =========================================================
   FILA / BOTÓN CLIENTE
   ========================================================= */

.sales-day-client-ranking__row {
  appearance: none;

  width: 100%;
  min-width: 0;

  display: grid;

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

  align-items: center;

  gap: 10px;

  padding:
    10px 11px;

  color:
    var(--sales-text);

  text-align:
    left;

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

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

  border-radius:
    9px;

  outline:
    none;

  font-family:
    inherit;

  cursor:
    pointer;

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


.sales-day-client-ranking__row:hover {
  background:
    var(--sales-surface);

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

  transform:
    translateY(-1px);

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


.sales-day-client-ranking__row:focus-visible {
  outline:
    3px solid rgba(17, 20, 24, 0.08);

  outline-offset:
    2px;
}


/* =========================================================
   POSICIÓN
   ========================================================= */

.sales-day-client-ranking__position {
  width: 28px;
  height: 28px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex:
    0 0 auto;

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

  background:
    var(--sales-surface);

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

  border-radius:
    7px;

  font-size:
    9.5px;

  font-weight:
    850;

  line-height:
    1;
}


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

.sales-day-client-ranking__main {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 7px;
}


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

.sales-day-client-ranking__head {
  width: 100%;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 14px;

  margin: 0;
}


.sales-day-client-ranking__head > div {
  min-width: 0;

  flex: 1 1 auto;

  display: flex;

  flex-direction: column;

  gap: 2px;
}


/* =========================================================
   NOMBRE CLIENTE
   ========================================================= */

.sales-day-client-ranking__head
> div
> strong {
  min-width: 0;

  overflow: hidden;

  color:
    var(--sales-text);

  font-size:
    10.5px;

  font-weight:
    850;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   FACTURAS / UNIDADES
   ========================================================= */

.sales-day-client-ranking__head
> div
> span {
  min-width: 0;

  overflow: hidden;

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

  font-size:
    8.5px;

  font-weight:
    650;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   FACTURACIÓN
   ========================================================= */

.sales-day-client-ranking__head
> strong {
  flex:
    0 0 auto;

  color:
    var(--sales-text);

  font-size:
    10.5px;

  font-weight:
    850;

  line-height:
    1.2;

  text-align:
    right;

  font-variant-numeric:
    tabular-nums;

  white-space:
    nowrap;
}


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

.sales-day-client-ranking__track {
  position: relative;

  width: 100%;
  height: 6px;

  overflow: hidden;

  margin: 0;

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

  border-radius:
    999px;
}


/* =========================================================
   FILL
   ========================================================= */

.sales-day-client-ranking__fill {
  display: block;

  height: 100%;

  min-width:
    2%;

  background:
    var(--sales-channel-mayorista, #2563eb);

  border-radius:
    inherit;

  transform-origin:
    left center;

  animation:
    salesDayClientBarGrow
    360ms
    ease-out
    both;
}


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

.sales-day-client-ranking__meta {
  width: 100%;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap:
    5px 12px;
}


.sales-day-client-ranking__meta > span {
  color:
    var(--sales-text-muted);

  font-size:
    8.5px;

  font-weight:
    650;

  line-height:
    1.2;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   GANANCIA POSITIVA / NEGATIVA
   ========================================================= */

.sales-day-client-ranking__meta
.is-positive {
  color:
    var(--sales-success) !important;

  font-weight:
    800;
}


.sales-day-client-ranking__meta
.is-negative {
  color:
    var(--sales-danger) !important;

  font-weight:
    800;
}


/* =========================================================
   QUITAR ESTILO NATIVO DEL BOTÓN
   ========================================================= */

.executive-sales-day-page
button.sales-day-client-ranking__row {
  font:
    inherit;

  -webkit-tap-highlight-color:
    transparent;
}


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

html[data-theme="dark"]
.sales-day-client-ranking__row,
body.dark
.sales-day-client-ranking__row {
  background:
    var(--sales-surface-soft);
}


html[data-theme="dark"]
.sales-day-client-ranking__row:hover,
body.dark
.sales-day-client-ranking__row:hover {
  background:
    var(--sales-surface);
}


html[data-theme="dark"]
.sales-day-client-ranking__position,
body.dark
.sales-day-client-ranking__position {
  background:
    var(--sales-surface);
}


html[data-theme="dark"]
.sales-day-client-ranking__track,
body.dark
.sales-day-client-ranking__track {
  background:
    #242930;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .sales-day-client-ranking__row {
    grid-template-columns:
      27px minmax(0, 1fr);

    gap:
      8px;

    padding:
      9px;
  }


  .sales-day-client-ranking__position {
    width:
      26px;

    height:
      26px;
  }


  .sales-day-client-ranking__head {
    gap:
      8px;
  }


  .sales-day-client-ranking__head
  > div
  > strong {
    font-size:
      10px;
  }


  .sales-day-client-ranking__head
  > strong {
    font-size:
      9.5px;
  }


  .sales-day-client-ranking__meta {
    gap:
      4px 8px;
  }
}


/* =========================================================
   MOBILE SMALL
   ========================================================= */

@media (max-width: 480px) {

  .sales-day-client-ranking__head {
    flex-direction:
      column;
  }


  .sales-day-client-ranking__head
  > strong {
    text-align:
      left;
  }
}


/* =========================================================
   ANIMACIÓN
   ========================================================= */

@keyframes salesDayClientBarGrow {

  from {
    transform:
      scaleX(0);

    opacity:
      0.45;
  }

  to {
    transform:
      scaleX(1);

    opacity:
      1;
  }
}


/* =========================================================
   FIN FIX CLIENTES DESTACADOS
   ========================================================= */
/* =========================================================
   WIRTZ HUB · VENTAS DEL DÍA
   CARDS EJECUTIVAS · MAYORISTA / ML / FULL / SHOPIFY

   AGREGAR AL FINAL
   NO MODIFICAR EL CSS EXISTENTE
   ========================================================= */

/* =========================================================
   GRILLA · CUATRO CANALES INDEPENDIENTES
   ========================================================= */

.executive-sales-day-page .sales-day-channel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  min-width: 0;
  align-items: stretch;
}

/* =========================================================
   CARD BASE
   ========================================================= */

.executive-sales-day-page .sales-day-channel-performance {
  --channel-accent: #334155;
  --channel-soft: #f1f5f9;
  --channel-border: #cbd5e1;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  min-width: 0;
  height: 100%;

  padding: 18px;

  background: var(--sales-surface);
  border: 1px solid var(--sales-border-strong);
  border-radius: 13px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.035);

  overflow: hidden;

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    background-color 180ms ease;
}

.executive-sales-day-page
.sales-day-channel-performance::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--channel-accent);
  pointer-events: none;
}

.executive-sales-day-page
.sales-day-channel-performance:hover {
  transform: translateY(-2px);
  border-color: var(--channel-border);
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.07);
}

.executive-sales-day-page
.sales-day-channel-performance.is-selected {
  border-color: var(--channel-accent);
  background: var(--sales-surface);
}

.executive-sales-day-page
.sales-day-channel-performance.is-selected::before {
  background: var(--channel-accent);
}

/* =========================================================
   MAYORISTA · AZUL
   ========================================================= */

.executive-sales-day-page
.sales-day-channel-performance[data-channel="MAYORISTA"] {
  --channel-accent: #1d4ed8;
  --channel-soft: #eff6ff;
  --channel-border: #93c5fd;
}

/* =========================================================
   MERCADO LIBRE · AMARILLO
   ========================================================= */

.executive-sales-day-page
.sales-day-channel-performance[data-channel="MERCADO_LIBRE"] {
  --channel-accent: #ca8a04;
  --channel-soft: #fefce8;
  --channel-border: #eab308;
}

/* =========================================================
   FULL · VIOLETA
   ========================================================= */

.executive-sales-day-page
.sales-day-channel-performance[data-channel="FULL"] {
  --channel-accent: #7c3aed;
  --channel-soft: #f5f3ff;
  --channel-border: #c4b5fd;
}

/* =========================================================
   SHOPIFY · VERDE
   ========================================================= */

.executive-sales-day-page
.sales-day-channel-performance[data-channel="SHOPIFY"] {
  --channel-accent: #15803d;
  --channel-soft: #f0fdf4;
  --channel-border: #86efac;
}

/* =========================================================
   CABECERA DE CARD
   ========================================================= */

.executive-sales-day-page
.sales-day-channel-performance__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.executive-sales-day-page
.sales-day-channel-performance__identity {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1 1 auto;
  min-width: 0;
}

.executive-sales-day-page
.sales-day-channel-performance__identity > div {
  min-width: 0;
}

.executive-sales-day-page
.sales-day-channel-performance__identity strong {
  display: block;
  color: var(--sales-text);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.executive-sales-day-page
.sales-day-channel-performance__identity > div > span {
  display: block;
  margin-top: 4px;
  color: var(--sales-text-secondary);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.45;
}

/* =========================================================
   ICONO DEL CANAL
   ========================================================= */

.executive-sales-day-page
.sales-day-channel-performance__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  color: var(--channel-accent);
  background: var(--channel-soft);
  border: 1px solid var(--channel-border);
  border-radius: 11px;
}

.executive-sales-day-page
.sales-day-channel-performance__icon svg {
  width: 21px;
  height: 21px;
  stroke-width: 2.3;
}

/* =========================================================
   FACTURACIÓN PRINCIPAL
   ========================================================= */

.executive-sales-day-page
.sales-day-channel-performance__main {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 14px 0;

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

.executive-sales-day-page
.sales-day-channel-performance__main > span {
  color: var(--sales-text-secondary);
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.35;
}

.executive-sales-day-page
.sales-day-channel-performance__main > strong {
  display: block;
  max-width: 100%;

  color: var(--sales-text);
  font-size: clamp(20px, 1.7vw, 27px);
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -0.04em;

  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   MÉTRICAS · DIVISIONES MARCADAS
   ========================================================= */

.executive-sales-day-page
.sales-day-channel-performance__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  min-width: 0;

  border: 1px solid var(--sales-border);
  border-radius: 10px;
  background: var(--sales-surface-soft);
  overflow: hidden;
}

.executive-sales-day-page
.sales-day-channel-performance__metrics > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 13px 12px;
}

.executive-sales-day-page
.sales-day-channel-performance__metrics > div:nth-child(odd) {
  border-right: 1px solid var(--sales-border);
}

.executive-sales-day-page
.sales-day-channel-performance__metrics > div:nth-child(n + 3) {
  border-top: 1px solid var(--sales-border);
}

.executive-sales-day-page
.sales-day-channel-performance__metrics span {
  display: block;
  color: var(--sales-text-secondary);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.4;
}

.executive-sales-day-page
.sales-day-channel-performance__metrics strong {
  display: block;
  color: var(--sales-text);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.3;
  letter-spacing: -0.025em;

  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   ORIGEN DEL CANAL
   ========================================================= */

.executive-sales-day-page
.sales-day-channel-sources {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.executive-sales-day-page
.sales-day-channel-sources > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 25px;
  padding: 4px 9px;

  color: var(--channel-accent);
  background: var(--channel-soft);
  border: 1px solid var(--channel-border);
  border-radius: 6px;

  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.2;
}

/* =========================================================
   FOOTER · GANANCIA Y MARGEN
   ========================================================= */

.executive-sales-day-page
.sales-day-channel-performance__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;

  width: 100%;
  min-width: 0;
  margin-top: auto;
  padding-top: 14px;

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

.executive-sales-day-page
.sales-day-channel-performance__footer > div {
  min-width: 0;
}

.executive-sales-day-page
.sales-day-channel-performance__footer > div:first-child span {
  color: var(--sales-text-secondary);
  font-size: 11px;
  font-weight: 750;
}

.executive-sales-day-page
.sales-day-channel-performance__footer > div:first-child strong {
  display: block;
  margin-top: 5px;

  color: var(--sales-text);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.3;

  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   COSTOS INCOMPLETOS
   ========================================================= */

.executive-sales-day-page
.sales-day-channel-performance.has-missing-cost {
  border-style: solid;
}

.executive-sales-day-page
.sales-day-channel-performance.has-missing-cost
.sales-day-channel-performance__footer {
  border-top-color: var(--sales-border-strong);
}

/* =========================================================
   MODO OSCURO
   RESPETAR VARIABLES EXISTENTES
   ========================================================= */

[data-theme="dark"]
.executive-sales-day-page
.sales-day-channel-performance,
.dark
.executive-sales-day-page
.sales-day-channel-performance {
  --channel-soft: rgba(255, 255, 255, 0.06);
  --channel-border: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"]
.executive-sales-day-page
.sales-day-channel-performance[data-channel="MAYORISTA"],
.dark
.executive-sales-day-page
.sales-day-channel-performance[data-channel="MAYORISTA"] {
  --channel-accent: #60a5fa;
}

[data-theme="dark"]
.executive-sales-day-page
.sales-day-channel-performance[data-channel="MERCADO_LIBRE"],
.dark
.executive-sales-day-page
.sales-day-channel-performance[data-channel="MERCADO_LIBRE"] {
  --channel-accent: #facc15;
}

[data-theme="dark"]
.executive-sales-day-page
.sales-day-channel-performance[data-channel="FULL"],
.dark
.executive-sales-day-page
.sales-day-channel-performance[data-channel="FULL"] {
  --channel-accent: #a78bfa;
}

[data-theme="dark"]
.executive-sales-day-page
.sales-day-channel-performance[data-channel="SHOPIFY"],
.dark
.executive-sales-day-page
.sales-day-channel-performance[data-channel="SHOPIFY"] {
  --channel-accent: #4ade80;
}

[data-theme="dark"]
.executive-sales-day-page
.sales-day-channel-performance__metrics,
.dark
.executive-sales-day-page
.sales-day-channel-performance__metrics {
  background: var(--sales-surface-soft);
}

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

@media (max-width: 1440px) {
  .executive-sales-day-page .sales-day-channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .executive-sales-day-page
  .sales-day-channel-performance__main > strong {
    font-size: 25px;
  }
}

/* =========================================================
   RESPONSIVE · MÓVIL
   ========================================================= */

@media (max-width: 760px) {
  .executive-sales-day-page .sales-day-channel-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .executive-sales-day-page
  .sales-day-channel-performance {
    padding: 16px;
    gap: 13px;
  }

  .executive-sales-day-page
  .sales-day-channel-performance__main > strong {
    font-size: 24px;
  }

  .executive-sales-day-page
  .sales-day-channel-performance__metrics strong {
    font-size: 15px;
  }

  .executive-sales-day-page
  .sales-day-channel-performance__footer {
    align-items: flex-start;
  }
}

/* =========================================================
   RESPONSIVE · MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 420px) {
  .executive-sales-day-page
  .sales-day-channel-performance {
    padding: 14px;
  }

  .executive-sales-day-page
  .sales-day-channel-performance__identity strong {
    font-size: 14px;
  }

  .executive-sales-day-page
  .sales-day-channel-performance__main > strong {
    font-size: 22px;
  }

  .executive-sales-day-page
  .sales-day-channel-performance__metrics > div {
    padding: 12px 10px;
  }

  .executive-sales-day-page
  .sales-day-channel-performance__metrics strong {
    font-size: 14px;
  }
}

/* =========================================================
   ACCESIBILIDAD · MENOS MOVIMIENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .executive-sales-day-page
  .sales-day-channel-performance {
    animation: none;
    transition: none;
  }

  .executive-sales-day-page
  .sales-day-channel-performance:hover {
    transform: none;
  }
}

/* =========================================================
   NO MODIFICAR NINGUNA OTRA REGLA EXISTENTE
   ========================================================= */
/* =========================================================
   WIRTZ HUB · VENTAS DEL DÍA
   CORRECCIÓN DE CONTRASTE · MODO OSCURO
   BOTONES + CONTROL DE COSTOS
   ========================================================= */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page {

  --sales-warning-bg: #211b10;
  --sales-warning-border: #80612e;
  --sales-warning: #f5ba57;

}

/* =========================================================
   BOTONES PRINCIPALES · SINCRONIZAR / APLICAR
   ========================================================= */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page .sales-day-btn--primary {

  color: #08090b !important;
  background: #f4f5f7 !important;
  border: 1px solid #f4f5f7 !important;

  font-weight: 850 !important;
  text-shadow: none !important;
  box-shadow: none !important;

}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page .sales-day-btn--primary:hover:not(:disabled) {

  color: #050607 !important;
  background: #dce1e7 !important;
  border-color: #dce1e7 !important;

  box-shadow: none !important;

}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page .sales-day-btn--primary:is(
  span,
  strong,
  svg,
  i
) {
  color: #08090b !important;
}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page .sales-day-btn--primary :is(
  span,
  strong,
  svg,
  i
) {

  color: #08090b !important;
  stroke: currentColor;

}

/* =========================================================
   BOTONES SECUNDARIOS
   ========================================================= */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page :is(
  .sales-day-btn--ghost,
  .sales-day-btn--subtle
) {

  color: #f5f6f8 !important;
  background: #191c21 !important;
  border: 1px solid #444b55 !important;

  font-weight: 800 !important;
  box-shadow: none !important;

}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page :is(
  .sales-day-btn--ghost,
  .sales-day-btn--subtle
):hover:not(:disabled) {

  color: #ffffff !important;
  background: #252a31 !important;
  border-color: #626d7b !important;

}

/* =========================================================
   CONTROL DE COSTOS · PANEL PRINCIPAL
   ========================================================= */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page
.sales-day-panel--missing-costs {

  background: #0e1013 !important;
  border: 1px solid #555047 !important;

  box-shadow: none !important;

}

/* =========================================================
   CONTROL DE COSTOS · CABECERA
   ELIMINAR FONDO BLANCO / DEGRADADO
   ========================================================= */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page
.sales-day-panel--missing-costs
.sales-day-panel__header,

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page
.sales-day-panel--missing-costs.has-missing-costs
.sales-day-panel__header {

  color: #f5f6f8 !important;

  background: #19170f !important;
  background-image: none !important;

  border-bottom: 1px solid #554729 !important;

  box-shadow: none !important;
  text-shadow: none !important;

}

/* =========================================================
   CONTROL DE COSTOS · TÍTULO
   ========================================================= */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page
.sales-day-panel--missing-costs
.sales-day-panel__header h2 {

  color: #ffffff !important;

  font-weight: 850 !important;
  text-shadow: none !important;

}

/* =========================================================
   CONTROL DE COSTOS · DESCRIPCIÓN
   ========================================================= */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page
.sales-day-panel--missing-costs
.sales-day-panel__header p {

  color: #d2d5da !important;

  font-weight: 650 !important;
  text-shadow: none !important;

}

/* =========================================================
   CONTROL DE COSTOS · ETIQUETA SUPERIOR
   ========================================================= */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page
.sales-day-panel--missing-costs
.sales-day-eyebrow {

  color: #f4c879 !important;

  font-weight: 850 !important;
  text-shadow: none !important;

}

/* =========================================================
   CONTROL DE COSTOS · RESUMEN
   ========================================================= */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page
.sales-day-panel--missing-costs
.sales-day-missing-summary {

  background: #171a1f !important;

  border: 1px solid #3d444e !important;

  box-shadow: none !important;

}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page
.sales-day-missing-summary > div:not(:last-child) {

  border-right: 1px solid #3d444e !important;

}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page
.sales-day-missing-summary span {

  color: #c2c8d0 !important;
  font-weight: 800 !important;

}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page
.sales-day-missing-summary strong {

  color: #ffffff !important;
  font-weight: 850 !important;

}

/* =========================================================
   CONTROL DE COSTOS · TARJETA FULL / CANAL
   ========================================================= */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page
.sales-day-missing-channel {

  background: #272015 !important;

  border: 1px solid #88672f !important;

  box-shadow: none !important;

}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page
.sales-day-missing-channel > span {

  color: #f3bf63 !important;

  font-weight: 850 !important;

}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page
.sales-day-missing-channel > strong {

  color: #ffffff !important;

  font-weight: 850 !important;

}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page
.sales-day-missing-channel > small {

  color: #e3e5e8 !important;

  font-weight: 750 !important;

}

/* =========================================================
   CONTROL DE COSTOS · LISTADO DE PRODUCTOS
   ========================================================= */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page
.sales-day-missing-row {

  color: #f5f6f8 !important;

  background: #111317 !important;

  border-color: #3d444e !important;

  box-shadow: none !important;

}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page
.sales-day-missing-row strong {

  color: #ffffff !important;
  font-weight: 800 !important;

}

/* =========================================================
   CONTROL DE COSTOS · BADGE PENDIENTES
   ========================================================= */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page :is(
  .sales-day-cost-badge,
  .sales-day-status-chip--warning
) {

  color: #ffd38a !important;
  background: #342714 !important;

  border: 1px solid #8b652d !important;

  font-weight: 850 !important;

}

/* =========================================================
   CONTROL DE COSTOS · BOTÓN CONTRAER
   ========================================================= */

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page
.sales-day-panel--missing-costs
.sales-day-icon-btn {

  color: #ffffff !important;
  background: #1d2025 !important;

  border: 1px solid #4b535f !important;

  box-shadow: none !important;

}

:is(
  html[data-theme="dark"],
  body[data-theme="dark"],
  body.dark,
  .dark
) .executive-sales-day-page
.sales-day-panel--missing-costs
.sales-day-icon-btn:hover {

  background: #2a3037 !important;
  border-color: #707987 !important;

}

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

@media (max-width: 760px) {

  .executive-sales-day-page
  .sales-day-panel--missing-costs
  .sales-day-panel__header {

    gap: 12px;
    padding: 15px !important;

  }

  .executive-sales-day-page
  .sales-day-missing-channel {

    min-width: 0;
    overflow: hidden;

  }

  .executive-sales-day-page
  .sales-day-missing-channel > :is(
    span,
    strong,
    small
  ) {

    overflow-wrap: anywhere;
    white-space: normal;

  }

  .executive-sales-day-page
  .sales-day-filter-actions .sales-day-btn {

    min-width: 0;

  }

}

/* =========================================================
   FIN · CORRECCIÓN CONTRASTE MODO OSCURO
   ========================================================= *//* Ocultar selector de lista de precios */
.sales-day-page .sales-day-filter-grid
label.sales-day-field:has(
  select[data-field="lista_precio_id"]
) {
  display: none !important;
}