/* ========================================================================== 
   iron.cat · hero signal scene
   --------------------------------------------------------------------------
   Escena compartida por Home V3 y la aplicación "En contexto" del Brand Kit.
   El contenedor de cada página decide su posición; este archivo define el
   panel de pelo, las lecturas, las barras y los estados.
   ========================================================================== */

.ic-hero-signals {
  position: absolute;
  z-index: 2;
  width: min(186px, 15vw);
  color: var(--ic-color-cream);
  pointer-events: none;
}

.ic-hero-signals__fur {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--ic-radius-sm);
  box-shadow:
    0 26px 60px rgba(var(--ic-petrol-950-rgb) / 0.42),
    inset 0 0 0 1px rgba(var(--ic-cream-dim-rgb) / 0.24);
  --ic-fur-veil: linear-gradient(180deg, rgb(7 10 10 / 0.16), transparent 55%, rgb(7 10 10 / 0.14));
}

.ic-hero-signals__datum {
  position: absolute;
  display: grid;
  gap: 7px;
}

.ic-hero-signals__label,
.ic-hero-signals__value,
.ic-hero-bars__key {
  margin: 0;
  color: var(--ic-color-cream);
  font-family: var(--ic-font-mono);
  text-shadow: 0 1px 7px rgba(var(--ic-petrol-950-rgb) / 0.6);
}

.ic-hero-signals__label {
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.065em;
}

.ic-hero-signals__value {
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.025em;
}

.ic-hero-signals__datum--top {
  bottom: calc(100% + 16px);
  left: 0;
  width: max-content;
  max-width: 190px;
}

.ic-hero-signals__datum--diagnosis {
  top: calc(100% + 16px);
  left: 0;
  width: max-content;
  max-width: 210px;
}

.ic-hero-signals__datum--bars {
  top: 50%;
  right: calc(100% + 24px);
  width: 158px;
  translate: 0 -50%;
}

.ic-hero-bars {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ic-hero-bars li {
  display: grid;
  gap: 6px;
}

.ic-hero-bars__key {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.025em;
}

.ic-hero-bars__key em {
  display: inline-flex;
  align-items: center;
  font-style: normal;
  white-space: nowrap;
}

.ic-hero-bars__track {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: var(--ic-radius-pill);
  background: rgba(var(--ic-cream-dim-rgb) / 0.3);
}

.ic-hero-bars__track > i {
  display: block;
  width: var(--v, 50%);
  height: 100%;
  border-radius: inherit;
  background: var(--ic-color-mustard);
  transform-origin: 0 50%;
  animation: ic-hero-signal-fill 1100ms var(--ic-ease-soft) both;
}

.ic-hero-bars li:nth-child(1) .ic-hero-bars__track > i { animation-delay: 120ms; }
.ic-hero-bars li:nth-child(2) .ic-hero-bars__track > i { animation-delay: 260ms; }
.ic-hero-bars li:nth-child(3) .ic-hero-bars__track > i { animation-delay: 400ms; }
.ic-hero-bars li.is-over .ic-hero-bars__key em { color: var(--ic-color-mustard); }
.ic-hero-bars li.is-over .ic-hero-bars__track > i { background: var(--ic-color-mustard); }
.ic-hero-bars li.is-low .ic-hero-bars__key em { color: var(--ic-color-coral); }
.ic-hero-bars li.is-low .ic-hero-bars__track > i { background: var(--ic-color-coral); }

@keyframes ic-hero-signal-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ic-hero-bars__track > i { animation: none; }
}