/* Sales Dashboard · La Gaviota
   Mirrors the design tokens from Claude Design / colors_and_type.css and adds
   the custom components (hero, pair card, combo chart, duo-bar, info tooltip).
   Tailwind handles layout; these rules handle look.
*/

:root {
  --sd-brand-navy-900: #0b3458;
  --sd-brand-navy-800: #15568c;
  --sd-brand-navy-700: #1a6aad;
  --sd-brand-navy-600: #2b7bbd;
  --sd-brand-navy-100: #e6eff7;
  --sd-brand-navy-050: #f3f7fb;

  --sd-brand-amber: #e8a33a;
  --sd-brand-amber-dark: #b4781f;
  --sd-brand-amber-050: #fef3c7;
  --sd-brand-amber-border: #fde68a;

  --sd-ink: #0b1220;
  --sd-slate-900: #0f172a;
  --sd-slate-700: #334155;
  --sd-slate-600: #475569;
  --sd-slate-500: #64748b;
  --sd-slate-400: #94a3b8;
  --sd-slate-300: #cbd5e1;
  --sd-slate-200: #e2e8f0;
  --sd-slate-100: #f1f5f9;
  --sd-slate-050: #f8fafc;

  --sd-ok-700: #166534;
  --sd-ok-500: #2f7a4a;
  --sd-ok-050: #ecf7f0;

  --sd-err-700: #991b1b;
  --sd-err-050: #fef2f2;

  --sd-font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --sd-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sd-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Scope the whole dashboard block so we can safely change globals */
.sd-scope {
  font-family: var(--sd-font-sans);
  color: var(--sd-ink);
}

/* ---------- Eyebrow / page head ---------- */
.sd-eyebrow {
  font-family: var(--sd-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sd-brand-navy-600);
  font-weight: 500;
}
.sd-title {
  font-family: var(--sd-font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--sd-ink);
  margin: 4px 0 0;
}

/* ---------- 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 .sd-eyebrow { color: var(--sd-brand-amber-dark); display: inline-flex; align-items: center; gap: 8px; }
.sd-hero__num {
  font-family: var(--sd-font-display);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 60px);
  color: var(--sd-ink);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 8px;
}
.sd-hero__unit {
  font-family: var(--sd-font-mono);
  font-size: 16px;
  color: var(--sd-slate-500);
  letter-spacing: 0.04em;
  margin-left: 6px;
}
.sd-hero__sub {
  font-size: 13px;
  color: var(--sd-slate-600);
  margin-top: 8px;
}
.sd-hero__note {
  font-family: var(--sd-font-mono);
  font-size: 11px;
  color: var(--sd-slate-500);
  letter-spacing: 0.04em;
  margin-top: 14px;
  max-width: 420px;
  line-height: 1.5;
}
.sd-hero__spark-head {
  font-family: var(--sd-font-mono);
  font-size: 10px;
  color: var(--sd-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(--sd-brand-amber-dark); outline-offset: 1px; }
.sd-hero__spark-month {
  font-family: var(--sd-font-mono);
  font-size: 10px;
  color: var(--sd-slate-500);
  letter-spacing: 0.06em;
}
.sd-hero__spark-month.sd-current { color: var(--sd-brand-amber-dark); font-weight: 600; }
.sd-hero__spark-val {
  font-family: var(--sd-font-mono);
  font-size: 10px;
  color: var(--sd-slate-700);
  font-weight: 500;
}

.sd-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sd-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(--sd-brand-amber-050); color: var(--sd-brand-amber-dark); border: 1px solid var(--sd-brand-amber-border); }
.sd-delta-up-ok   { background: var(--sd-ok-050); color: var(--sd-ok-700); border: 1px solid #bfe0cc; }
.sd-delta-down    { background: var(--sd-err-050); color: var(--sd-err-700); border: 1px solid #fecaca; }
.sd-delta-flat    { background: var(--sd-slate-100); color: var(--sd-slate-600); border: 1px solid var(--sd-slate-200); }

/* ---------- KPI pair cards ---------- */
.sd-pair {
  background: #ffffff;
  border: 1px solid var(--sd-slate-200);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sd-pair.sd-pair--navy-green { border-top: 3px solid var(--sd-brand-navy-800); }
.sd-pair.sd-pair--slate      { border-top: 3px solid var(--sd-slate-400); }
.sd-pair.sd-pair--navy-light { border-top: 3px solid var(--sd-brand-navy-600); }
.sd-pair__row {
  padding: 12px 14px;
  display: grid;
  gap: 2px;
}
.sd-pair__row + .sd-pair__row { border-top: 1px dashed var(--sd-slate-200); }
.sd-pair__lbl {
  font-family: var(--sd-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sd-slate-500);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sd-pair__row--money .sd-pair__lbl { color: var(--sd-brand-navy-700); }
.sd-pair__row--units .sd-pair__lbl { color: var(--sd-ok-700); }
.sd-pair__val {
  font-family: var(--sd-font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--sd-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(--sd-brand-navy-700);
  transition: color 0.12s;
}
.sd-info__dot svg { width: 16px; height: 16px; display: block; }
.sd-info--amber .sd-info__dot { color: var(--sd-brand-amber-dark); }
.sd-info--green .sd-info__dot { color: var(--sd-ok-700); }
.sd-info--slate .sd-info__dot { color: var(--sd-slate-600); }
.sd-info:hover .sd-info__dot,
.sd-info:focus .sd-info__dot { color: var(--sd-brand-navy-800); }
.sd-info--amber:hover .sd-info__dot,
.sd-info--amber:focus .sd-info__dot { color: var(--sd-brand-amber-dark); }
.sd-info--green:hover .sd-info__dot,
.sd-info--green:focus .sd-info__dot { color: var(--sd-ok-700); }
.sd-info--slate:hover .sd-info__dot,
.sd-info--slate:focus .sd-info__dot { color: var(--sd-slate-700); }

.sd-info__pop {
  position: absolute;
  z-index: 60;
  width: 300px;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid var(--sd-slate-200);
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 0 10px 28px -8px rgba(15, 23, 42, 0.25);
  top: 22px;
  display: none;
  flex-direction: column;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: normal;
}
.sd-info__pop--right { right: 0; }
.sd-info__pop--left { left: 0; }
.sd-info:hover .sd-info__pop,
.sd-info:focus-within .sd-info__pop { display: flex; }
.sd-info__title {
  font-family: var(--sd-font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--sd-ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.sd-info__formula {
  font-family: var(--sd-font-mono);
  font-size: 10.5px;
  color: var(--sd-brand-navy-700);
  background: var(--sd-slate-050);
  border: 1px solid var(--sd-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(--sd-slate-600);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ---------- Chart card ---------- */
.sd-chart-card {
  background: #ffffff;
  border: 1px solid var(--sd-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(--sd-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--sd-ink);
}
.sd-chart-sub {
  font-family: var(--sd-font-mono);
  font-size: 11px;
  color: var(--sd-slate-500);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.sd-chart-sub strong { color: var(--sd-brand-amber-dark); font-weight: 500; }
.sd-legend {
  display: flex;
  gap: 14px;
  font-size: 11px;
  font-family: var(--sd-font-mono);
  color: var(--sd-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(--sd-brand-navy-800); }
.sd-legend .sw.green { background: var(--sd-ok-500); }
.sd-legend .sw.line  { background: var(--sd-ok-700); height: 3px; border-radius: 2px; }

/* ---------- Section (provider + top items tables) ---------- */
.sd-section {
  background: #ffffff;
  border: 1px solid var(--sd-slate-200);
  border-radius: 6px;
  /* overflow: visible so info tooltips anchored in the table can escape */
  overflow: visible;
}
.sd-table-wrap {
  /* Replaces overflow-x-auto on desktop table wrappers: lets the .sd-info popover
     escape the card while still preventing horizontal scroll at lg+ widths. */
  overflow: visible;
}
.sd-section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--sd-slate-200);
  gap: 12px;
  flex-wrap: wrap;
}
.sd-section__head h3 {
  font-family: var(--sd-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--sd-ink);
  margin: 0;
}
.sd-sort {
  display: inline-flex;
  border: 1px solid var(--sd-slate-300);
  border-radius: 3px;
  overflow: hidden;
  font-family: var(--sd-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sd-sort .sd-sort__lbl {
  padding: 6px 10px;
  color: var(--sd-slate-500);
  background: var(--sd-slate-050);
  border-right: 1px solid var(--sd-slate-200);
}
.sd-sort button.sd-sort__opt,
.sd-sort .sd-sort__opt {
  padding: 6px 10px;
  color: var(--sd-slate-600);
  background: #ffffff;
  cursor: pointer;
  border: 0;
  border-right: 1px solid var(--sd-slate-200);
  font-family: var(--sd-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(--sd-brand-navy-800);
  color: #ffffff;
}
.sd-sort .sd-sort__opt svg { margin-left: 4px; }
.sd-sort .sd-sort__lbl svg { vertical-align: -2px; margin-right: 4px; }

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

/* ---------- Table ---------- */
.sd-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sd-table thead th {
  text-align: left;
  font-family: var(--sd-font-mono);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sd-slate-500);
  padding: 8px 14px;
  background: var(--sd-slate-050);
  border-bottom: 1px solid var(--sd-slate-200);
  white-space: nowrap;
}
.sd-table thead th.sd-num { text-align: right; }
.sd-table thead th.sd-amber { color: var(--sd-brand-amber-dark); }
.sd-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--sd-slate-100);
  color: var(--sd-slate-700);
  vertical-align: middle;
}
.sd-table tbody tr:last-child td { border-bottom: 0; }
.sd-table .sd-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--sd-ink);
  font-family: var(--sd-font-mono);
  font-size: 12px;
  white-space: nowrap;
}
.sd-table .sd-name { color: var(--sd-ink); font-weight: 500; font-size: 12.5px; }
.sd-table .sd-mono { font-family: var(--sd-font-mono); color: var(--sd-slate-500); font-size: 11px; }
.sd-table td.sd-narrow { width: 1%; white-space: nowrap; }
.sd-num-green { color: var(--sd-ok-700) !important; }
.sd-num-navy  { color: var(--sd-brand-navy-700) !important; }
.sd-num-amber { color: var(--sd-brand-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(--sd-slate-100);
  border-radius: 2px;
  overflow: hidden;
}
.sd-duo__fill {
  height: 100%;
  background: var(--sd-brand-navy-800);
  border-radius: 2px;
}
.sd-duo__row--units .sd-duo__fill { background: var(--sd-ok-500); }

/* ---------- Footnote ---------- */
.sd-footnote {
  font-family: var(--sd-font-sans);
  font-size: 11px;
  color: var(--sd-slate-500);
  font-style: italic;
  padding: 10px 18px;
  background: var(--sd-slate-050);
  border-top: 1px dashed var(--sd-slate-200);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.sd-footnote__icon {
  background: var(--sd-brand-amber-050);
  color: var(--sd-brand-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(--sd-ok-700); }
.sd-down { color: var(--sd-err-700); }
.sd-flat { color: var(--sd-slate-500); }

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