/* ---------- Estados: cargando / inválido (extiende style.css) ---------- */

.state-card {
  text-align: center;
}

.status-text {
  margin: 6px 0 4px;
  font-size: 15px;
  color: var(--text-soft);
  font-weight: 300;
  line-height: 1.5;
}

.status-text--error {
  color: #ffd9d9;
}

.top-label--error {
  border-color: rgba(255, 107, 107, 0.4);
  color: #ffb3b3;
  box-shadow: inset 0 0 18px rgba(140, 20, 20, 0.18);
}

.top-label--error::before,
.top-label--error::after {
  background: linear-gradient(90deg, transparent, rgba(255, 107, 107, 0.6), transparent);
}

.error-badge {
  width: clamp(39px, calc((var(--vh, 1dvh) * 9.31) - 6.32px), 77.5px);
  height: clamp(39px, calc((var(--vh, 1dvh) * 9.31) - 6.32px), 77.5px);
  margin: clamp(3px, calc((var(--vh, 1dvh) * 0.9) - 0.61px), 7.5px) auto clamp(8px, calc((var(--vh, 1dvh) * 2.7) - 1.83px), 22.5px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 800;
  color: #ff8a8a;
  border: 2px solid rgba(255, 107, 107, 0.5);
  background: rgba(140, 20, 20, 0.15);
  box-shadow: 0 0 22px rgba(255, 90, 90, 0.18);
}