/* MarketChronos — gauge.css
 * Reusable, professional risk-gauge visual system (goal16 T1).
 * Replaces the 🟢🟡🔴 emojis with an SVG-based component so state is encoded by
 * COLOR + SHAPE + TEXT LABEL (never color alone, never emoji).
 *
 * Zones (semantic tokens only):
 *   Bajo    / Calma   -> --color-positive (green)  · shape: circle
 *   Medio   / Normal  -> --color-warning  (amber)  · shape: diamond (rombo)
 *   Elevado / Riesgo  -> --color-negative (red)    · shape: triangle (alert)
 *
 * Accessibility:
 *   - Status is never color-only: a text label (Bajo/Medio/Elevado) always
 *     accompanies the dot, and each shape differs (circle/diamond/triangle).
 *   - Inline status SVGs are decorative (aria-hidden) BECAUSE the adjacent text
 *     already names the state; the hero gauge SVG carries an aria-label.
 *   - Colors come from WCAG-AA semantic tokens (variables.css).
 *
 * No external assets, no CDN. Inline SVGs live in the mocks; this file styles
 * them consistently. Uses ONLY semantic tokens — no raw hex.
 */

/* ---------- Status dot: small inline SVG (circle/diamond/triangle) ---------- */
/* Usage:
 *   <svg class="gauge-dot gauge-dot--low"  viewBox="0 0 12 12" aria-hidden="true">
 *     <circle cx="6" cy="6" r="5" />
 *   </svg>
 * The shape element inherits fill from the zone modifier below. */
.gauge-dot {
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  display: inline-block;
  vertical-align: -0.08em;
}

.gauge-dot--low > * {
  fill: var(--color-positive);
}
.gauge-dot--med > * {
  fill: var(--color-warning);
}
.gauge-dot--high > * {
  fill: var(--color-negative);
}
.gauge-dot--none > * {
  fill: var(--color-text-muted);
}

/* Slightly larger dot for hero / kicker contexts */
.gauge-dot--lg {
  width: 1rem;
  height: 1rem;
}

/* ---------- Status pill: dot + text label (compact list variant) ---------- */
/* A generic pill that carries the zone color as tint AND a shape + text.
 * Existing per-mock pills (.tier, .risk-chip, .badge-tier, .sc-tier) keep their
 * own tint rules; this class is available for new/consistent usage. */
.gauge-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0);
  padding: 1px var(--space-1);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--font-size-caption);
  white-space: nowrap;
}
.gauge-pill--low {
  color: var(--color-positive);
  background: var(--color-positive-bg);
}
.gauge-pill--med {
  color: var(--color-warning);
  background: var(--color-warning-bg);
}
.gauge-pill--high {
  color: var(--color-negative);
  background: var(--color-negative-bg);
}
.gauge-pill--none {
  color: var(--color-text-muted);
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
}

/* ---------- Segmented progress bar (large hero variant) ---------- */
/* Structure (self-contained per mock):
 *   <div class="gauge-bar" role="img" aria-label="Riesgo 58 de 100 — Medio">
 *     <div class="gauge-bar-track">
 *       <span class="gauge-seg gauge-seg--low"></span>
 *       <span class="gauge-seg gauge-seg--med"></span>
 *       <span class="gauge-seg gauge-seg--high"></span>
 *       <svg class="gauge-bar-marker" style="--gauge-value: 58%" ...>...</svg>
 *     </div>
 *     <div class="gauge-bar-scale"><span>0</span><span>40</span><span>70</span><span>100</span></div>
 *   </div>
 */
.gauge-bar {
  width: 100%;
}

.gauge-bar-track {
  position: relative;
  display: flex;
  width: 100%;
  height: 0.75rem;
  border-radius: var(--radius-pill);
  overflow: visible;
  background: var(--surface-3);
}

/* Zone widths default to the 40 / 30 / 30 split (0–40, 40–70, 70–100). */
.gauge-seg {
  height: 100%;
  display: block;
}
.gauge-seg:first-child {
  border-top-left-radius: var(--radius-pill);
  border-bottom-left-radius: var(--radius-pill);
}
.gauge-seg:last-child {
  border-top-right-radius: var(--radius-pill);
  border-bottom-right-radius: var(--radius-pill);
}
.gauge-seg--low {
  flex: 40;
  background: var(--color-positive);
  opacity: 0.9;
}
.gauge-seg--med {
  flex: 30;
  background: var(--color-warning);
  opacity: 0.9;
}
.gauge-seg--high {
  flex: 30;
  background: var(--color-negative);
  opacity: 0.9;
}

/* Marker: an SVG pointer parked at --gauge-value (0–100 as a %). */
.gauge-bar-marker {
  position: absolute;
  top: 50%;
  left: var(--gauge-value, 0%);
  transform: translate(-50%, -50%);
  width: 1.5rem;
  height: 1.5rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.gauge-bar-marker > * {
  fill: var(--color-text);
  stroke: var(--bg-base);
  stroke-width: 1.5;
}

/* Numeric scale under the bar */
.gauge-bar-scale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-0);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  font-variant-numeric: var(--numeric-tabular);
}

/* ---------- Legend (shared across large + compact) ---------- */
.gauge-legend {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.gauge-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0);
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
}

/* ---------- Growth animation for the segmented bar ---------- */
@media (prefers-reduced-motion: no-preference) {
  .gauge-bar.animate-gauge .gauge-seg {
    transform-origin: left center;
    animation: bar-grow var(--dur-enter) var(--ease-out) both;
  }
  .gauge-bar.animate-gauge .gauge-bar-marker {
    animation: fade-rise var(--dur-enter) var(--ease-out) both;
    animation-delay: 120ms;
  }
}