/* Sales Dashboard · La Gaviota
   Page-specific components that build on the gv-* design system
   (app/assets/stylesheets/gaviota_ui.css): hero, pair card, combo chart,
   duo-bar, info tooltip, sort toggle. Tailwind handles layout; these rules
   handle look. All colors/type reference --gv-* tokens from the shared
   library — no tokens are defined here.
*/

/* ---------- Hero KPI: precio promedio por unidad ---------- */
.sd-hero {
  background: linear-gradient(180deg, #ffffff 0%, #fdfaf2 100%);
  border: 1px solid #f0c77a;
  border-radius: 8px;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 28px;
  position: relative;
  overflow: hidden;
}
.sd-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(232, 163, 58, 0.08) 0, transparent 30%),
    repeating-linear-gradient(135deg, rgba(232, 163, 58, 0.05) 0 1px, transparent 1px 12px);
  pointer-events: none;
}
.sd-hero > * { position: relative; }
.sd-hero .gv-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.sd-hero__num {
  font-family: var(--gv-font-display);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 60px);
  color: var(--gv-ink);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 8px;
}
.sd-hero__unit {
  font-family: var(--gv-font-mono);
  font-size: 16px;
  color: var(--gv-slate-500);
  letter-spacing: 0.04em;
  margin-left: 6px;
}
.sd-hero__sub {
  font-size: 13px;
  color: var(--gv-slate-600);
  margin-top: 8px;
}
.sd-hero__note {
  font-family: var(--gv-font-mono);
  font-size: 11px;
  color: var(--gv-slate-500);
  letter-spacing: 0.04em;
  margin-top: 14px;
  max-width: 420px;
  line-height: 1.5;
}
.sd-hero__spark-head {
  font-family: var(--gv-font-mono);
  font-size: 10px;
  color: var(--gv-slate-500);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sd-hero__spark {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 0;
  min-height: 120px;
  flex: 1;
}
.sd-hero__spark-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sd-hero__spark-bar {
  width: 100%;
  background: linear-gradient(180deg, #e8a33a 0%, #b4781f 100%);
  border-radius: 3px 3px 0 0;
  min-height: 6px;
}
.sd-hero__spark-bar.sd-current { outline: 2px solid var(--gv-amber-dark); outline-offset: 1px; }
.sd-hero__spark-month {
  font-family: var(--gv-font-mono);
  font-size: 10px;
  color: var(--gv-slate-500);
  letter-spacing: 0.06em;
}
.sd-hero__spark-month.sd-current { color: var(--gv-amber-dark); font-weight: 600; }
.sd-hero__spark-val {
  font-family: var(--gv-font-mono);
  font-size: 10px;
  color: var(--gv-slate-700);
  font-weight: 500;
}

.sd-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--gv-font-mono);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 2px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 10px;
}
.sd-delta-up-warn { background: var(--gv-warn-050); color: var(--gv-amber-dark); border: 1px solid var(--gv-warn-100); }
.sd-delta-up-ok   { background: var(--gv-ok-050); color: var(--gv-ok-700); border: 1px solid var(--gv-ok-100); }
.sd-delta-down    { background: var(--gv-err-050); color: var(--gv-err-700); border: 1px solid var(--gv-err-100); }
.sd-delta-flat    { background: var(--gv-slate-100); color: var(--gv-slate-600); border: 1px solid var(--gv-slate-200); }

/* ---------- KPI pair cards ---------- */
.sd-pair {
  background: #ffffff;
  border: 1px solid var(--gv-slate-200);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sd-pair.sd-pair--navy-green { border-top: 3px solid var(--gv-navy-800); }
.sd-pair.sd-pair--slate      { border-top: 3px solid var(--gv-slate-400); }
.sd-pair.sd-pair--navy-light { border-top: 3px solid var(--gv-navy-600); }
.sd-pair__row {
  padding: 12px 14px;
  display: grid;
  gap: 2px;
}
.sd-pair__row + .sd-pair__row { border-top: 1px dashed var(--gv-slate-200); }
.sd-pair__lbl {
  font-family: var(--gv-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gv-slate-500);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sd-pair__row--money .sd-pair__lbl { color: var(--gv-navy-700); }
.sd-pair__row--units .sd-pair__lbl { color: var(--gv-ok-700); }
.sd-pair__val {
  font-family: var(--gv-font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--gv-ink);
  line-height: 1.1;
  margin-top: 4px;
}

/* ---------- Info tooltip ---------- */
.sd-info {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: help;
  outline: none;
  vertical-align: middle;
}
.sd-info__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gv-navy-700);
  transition: color 0.12s;
}
.sd-info__dot svg { width: 16px; height: 16px; display: block; }
.sd-info--amber .sd-info__dot { color: var(--gv-amber-dark); }
.sd-info--green .sd-info__dot { color: var(--gv-ok-700); }
.sd-info--slate .sd-info__dot { color: var(--gv-slate-600); }
.sd-info:hover .sd-info__dot,
.sd-info:focus .sd-info__dot { color: var(--gv-navy-800); }
.sd-info--amber:hover .sd-info__dot,
.sd-info--amber:focus .sd-info__dot { color: var(--gv-amber-dark); }
.sd-info--green:hover .sd-info__dot,
.sd-info--green:focus .sd-info__dot { color: var(--gv-ok-700); }
.sd-info--slate:hover .sd-info__dot,
.sd-info--slate:focus .sd-info__dot { color: var(--gv-slate-700); }

.sd-info__pop {
  /* Fixed so the popover escapes every clipping ancestor (.sd-hero,
     .sd-pair, table cells, .gv-card). The `info-tip` Stimulus controller
     writes top/left on hover; the off-screen defaults prevent a flash at
     (0,0) before JS runs. */
  position: fixed;
  top: -9999px;
  left: -9999px;
  z-index: 1000;
  width: 300px;
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid var(--gv-slate-200);
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 0 10px 28px -8px rgba(15, 23, 42, 0.25);
  display: none;
  flex-direction: column;
  gap: 6px;
  /* Reset cascading text styles — `<th>` sets white-space: nowrap, which
     would otherwise prevent the popover content from wrapping. */
  text-transform: none;
  letter-spacing: 0;
  font-weight: normal;
  white-space: normal;
  text-align: left;
}
.sd-info__pop--open { display: flex; }
.sd-info__title {
  font-family: var(--gv-font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--gv-ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.sd-info__formula {
  font-family: var(--gv-font-mono);
  font-size: 10.5px;
  color: var(--gv-navy-700);
  background: var(--gv-slate-050);
  border: 1px solid var(--gv-slate-200);
  padding: 5px 7px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.sd-info__detail {
  font-size: 12px;
  color: var(--gv-slate-600);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ---------- Chart card ---------- */
.sd-chart-card {
  background: #ffffff;
  border: 1px solid var(--gv-slate-200);
  border-radius: 6px;
  padding: 18px 22px 20px;
}
.sd-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 14px;
  gap: 16px;
  flex-wrap: wrap;
}
.sd-chart-title {
  font-family: var(--gv-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--gv-ink);
}
.sd-chart-sub {
  font-family: var(--gv-font-mono);
  font-size: 11px;
  color: var(--gv-slate-500);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.sd-chart-sub strong { color: var(--gv-amber-dark); font-weight: 500; }
.sd-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  font-family: var(--gv-font-mono);
  color: var(--gv-slate-600);
  letter-spacing: 0.04em;
  align-items: center;
  flex-wrap: wrap;
}
.sd-legend .sw {
  width: 10px; height: 10px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 1px;
}
.sd-legend .sw.navy  { background: var(--gv-navy-800); }
.sd-legend .sw.green { background: var(--gv-ok-500); }
.sd-legend .sw.line  { background: var(--gv-ok-700); height: 3px; border-radius: 2px; }

/* ---------- Sort toggle (provider + top items tables) ---------- */
.sd-sort {
  display: inline-flex;
  border: 1px solid var(--gv-slate-300);
  border-radius: 3px;
  overflow: hidden;
  font-family: var(--gv-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sd-sort .sd-sort__lbl {
  padding: 6px 10px;
  color: var(--gv-slate-500);
  background: var(--gv-slate-050);
  border-right: 1px solid var(--gv-slate-200);
}
.sd-sort button.sd-sort__opt,
.sd-sort .sd-sort__opt {
  padding: 6px 10px;
  color: var(--gv-slate-600);
  background: #ffffff;
  cursor: pointer;
  border: 0;
  border-right: 1px solid var(--gv-slate-200);
  font-family: var(--gv-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sd-sort .sd-sort__opt:last-child { border-right: 0; }
.sd-sort .sd-sort__opt.on {
  background: var(--gv-navy-800);
  color: #ffffff;
}
.sd-sort .sd-sort__opt svg { margin-left: 4px; }

/* Los toggles y el filtro por proveedor son enlaces (navegan su turbo-frame),
   no botones con JS: hay que apagar el subrayado y heredar el color. */
.sd-sort a.sd-sort__opt,
a.sd-toplimit,
.sd-provider-link,
.sd-provider-card { text-decoration: none; }
.sd-provider-link { color: var(--gv-ink); }
.sd-provider-link:hover { text-decoration: underline; }
.sd-provider-card { color: inherit; display: block; }
.sd-sort .sd-sort__lbl svg { vertical-align: -2px; margin-right: 4px; }

/* ---------- Active sort column highlight (on .gv-table) ---------- */
.gv-table th.sd-sort-col {
  background: var(--gv-navy-100);
  color: var(--gv-navy-800);
  box-shadow: inset 0 -2px 0 0 var(--gv-navy-800);
}
.gv-table tbody td.sd-sort-col {
  background: var(--gv-navy-050);
  font-weight: 600;
}
.sd-sort-ind {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  color: var(--gv-navy-800);
}

/* ---------- Table accents on top of .gv-table ---------- */
.gv-table th.sd-amber { color: var(--gv-amber-dark); }
.gv-table td.sd-narrow { width: 1%; white-space: nowrap; }
.sd-num-green { color: var(--gv-ok-700) !important; }
.sd-num-navy  { color: var(--gv-navy-700) !important; }
.sd-num-amber { color: var(--gv-amber-dark) !important; }

/* ---------- Duo bar (inline mix column) ---------- */
.sd-duo {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  width: 120px;
}
.sd-duo__row {
  height: 6px;
  background: var(--gv-slate-100);
  border-radius: 2px;
  overflow: hidden;
}
.sd-duo__fill {
  height: 100%;
  background: var(--gv-navy-800);
  border-radius: 2px;
}
.sd-duo__row--units .sd-duo__fill { background: var(--gv-ok-500); }

/* ---------- Footnote ---------- */
.sd-footnote {
  font-family: var(--gv-font-sans);
  font-size: 11px;
  color: var(--gv-slate-500);
  font-style: italic;
  padding: 10px 18px;
  background: var(--gv-slate-050);
  border-top: 1px dashed var(--gv-slate-200);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.sd-footnote__icon {
  background: var(--gv-warn-050);
  color: var(--gv-amber-dark);
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.sd-footnote__icon svg { width: 14px; height: 14px; }

/* ---------- Arrow badge utilities ---------- */
.sd-up { color: var(--gv-ok-700); }
.sd-down { color: var(--gv-err-700); }
.sd-flat { color: var(--gv-slate-500); }

/* ---------- Colores semánticos de valor ---------- */
/* Mismo criterio que .sd-pair__row--money / --units: dinero en navy, unidades en verde,
   precio medio en ámbar. */
.sd-val-money { color: var(--gv-navy-700); }
.sd-val-units { color: var(--gv-ok-700); }
.sd-val-avg { color: var(--gv-amber-dark); }

/* ---------- Contenedores de gráfico ---------- */
.sd-chart { position: relative; height: 260px; }
.sd-col-product { width: 28%; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .sd-hero { grid-template-columns: 1fr; }
  .sd-hero__spark { min-height: 80px; }
}