/*! =============================================================================
 *  © 2026 Renzo Núñez · RonBStudio — "Perú Elige 2026 · Segunda Vuelta".
 *  Todos los derechos reservados. Código propietario: queda prohibida su copia,
 *  redistribución, ingeniería inversa o uso no autorizado, total o parcial.
 *  https://www.ronbstudio.com
 * ============================================================================= */
/* =============================================================================
 *  Proyecto      : Perú Elige 2026 — Segunda Vuelta
 *  Archivo       : system-status.css
 *  Descripción   : Estilos del sistema de graceful degradation:
 *                  · system-banner          → banner global de estado
 *                  · status-dot              → indicador en status-section
 *                  · race-header__stale-badge → badge de antigüedad de datos
 *
 *                  Convenciones:
 *                    · BEM puro (block, block__element, block--modifier)
 *                    · Cero hex outside de tokens.css (las variables locales
 *                      acá referencian tokens existentes)
 *                    · prefers-reduced-motion respetado al final
 *
 *                  Estados visuales mapeados desde SystemState:
 *                    INITIAL          → dot gris pulsando, banner oculto
 *                    LIVE             → dot verde, banner oculto
 *                    DEGRADED_STALE   → dot ámbar, banner oculto, badge antigüedad
 *                    DEGRADED_NETWORK → dot ámbar, banner ámbar
 *                    DEGRADED_DATA    → dot ámbar, banner ámbar
 *                    EMERGENCY        → dot rojo, banner rojo full-width
 *                    RECOVERING       → dot verde con flash breve, banner oculto
 *
 *  Autor         : Renzo Núñez · RonBStudio
 *  Versión       : 0.1.7.0
 * ===========================================================================*/

:root {
  /* Tokens locales del sistema de estado. Cada uno referencia un token
     global de tokens.css; cambiar el sistema visual = cambiar tokens.css
     y todo se actualiza. */
  --system-color-ok          : var(--c-mv-chilca);
  --system-color-warn        : var(--c-mv-mostaza);
  --system-color-warn-dark   : var(--c-mv-mostaza-dark);
  --system-color-critical    : var(--c-mv-cochineal);
  --system-color-critical-dark: var(--c-mv-cochineal-dark);
  --system-color-neutral     : var(--c-mv-ink-soft);
  --system-color-neutral-bg  : var(--c-mv-bg-warm);

  --system-banner-padding-y  : var(--sp-3, 12px);
  --system-banner-padding-x  : var(--sp-4, 16px);
  --system-banner-radius     : 6px;
  --system-banner-z          : 1000;

  --system-dot-size          : 10px;
  --system-dot-pulse-duration: 1.6s;
}


/* =============================================================================
 *  System Banner — global, full-width, fija arriba
 * ===========================================================================*/

.system-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--system-banner-z);

  /* Oculto por default. Se muestra al agregar la clase is-active. */
  display: none;

  background: var(--system-color-neutral-bg);
  color: var(--c-mv-ink);
  border-bottom: 2px solid var(--c-mv-border);
  box-shadow: 0 2px 8px rgba(26, 22, 18, 0.12);

  font-family: var(--ff-sans, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.4;
}

.system-banner.is-active {
  display: block;
  animation: system-banner-slide-in 220ms ease-out;
}

.system-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--system-banner-padding-y) var(--system-banner-padding-x);
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  flex-wrap: wrap;
}

.system-banner__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--system-color-neutral);
  /* Pequeño "ping" sutil para llamar la atención sin gritar. */
  box-shadow: 0 0 0 0 currentColor;
}

.system-banner__text {
  flex: 1 1 auto;
  font-weight: 500;
  min-width: 200px;
}

.system-banner__actions {
  display: flex;
  gap: var(--sp-2, 8px);
  flex-shrink: 0;
}

.system-banner__btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 120ms ease, opacity 120ms ease;
  border: 1px solid transparent;
}

.system-banner__btn--primary {
  background: var(--c-mv-ink);
  color: var(--c-mv-ink-on-accent);
  border-color: var(--c-mv-ink);
}

.system-banner__btn--primary:hover {
  opacity: 0.85;
}

.system-banner__btn--secondary {
  background: transparent;
  color: var(--c-mv-ink-muted);
  border-color: var(--c-mv-border);
}

.system-banner__btn--secondary:hover {
  background: var(--c-mv-bg-overlay);
}


/* === Modifiers de severidad ============================================== */

.system-banner.is-degraded-network,
.system-banner.is-degraded-data {
  background: var(--system-color-neutral-bg);
  border-bottom-color: var(--system-color-warn);
}

.system-banner.is-degraded-network .system-banner__icon,
.system-banner.is-degraded-data .system-banner__icon {
  background: var(--system-color-warn);
  animation: system-banner-pulse 1.6s ease-in-out infinite;
}

.system-banner.is-emergency {
  background: var(--system-color-critical);
  color: var(--c-mv-ink-on-accent);
  border-bottom-color: var(--system-color-critical-dark);
}

.system-banner.is-emergency .system-banner__icon {
  background: var(--c-mv-ink-on-accent);
  animation: system-banner-pulse 1s ease-in-out infinite;
}

.system-banner.is-emergency .system-banner__btn--primary {
  background: var(--c-mv-ink-on-accent);
  color: var(--system-color-critical-dark);
  border-color: var(--c-mv-ink-on-accent);
}

.system-banner.is-emergency .system-banner__btn--secondary {
  color: var(--c-mv-ink-on-accent);
  border-color: var(--c-mv-ink-on-accent);
  opacity: 0.85;
}

.system-banner.is-emergency .system-banner__btn--secondary:hover {
  background: rgba(250, 246, 236, 0.15);
  opacity: 1;
}

/* En estados degradados (no emergency) ocultamos "Entendido": no es
   suficientemente serio como para ofrecer dismiss persistente. */
.system-banner.is-degraded-network .system-banner__btn--secondary,
.system-banner.is-degraded-data .system-banner__btn--secondary {
  display: none;
}


/* =============================================================================
 *  Status Dot — indicador pequeño en el status-section
 * ===========================================================================*/

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  font-weight: 600;
}

.status-dot::before {
  content: '';
  display: inline-block;
  width: var(--system-dot-size);
  height: var(--system-dot-size);
  border-radius: 50%;
  background: var(--system-color-neutral);
  flex-shrink: 0;
  /* La sombra negra sutil le da peso visual sin ser ruidoso. */
  box-shadow: 0 0 0 1px rgba(26, 22, 18, 0.10);
}

.status-dot--initial::before {
  background: var(--system-color-neutral);
  animation: status-dot-pulse var(--system-dot-pulse-duration) ease-in-out infinite;
}

.status-dot--live::before {
  background: var(--system-color-ok);
}

.status-dot--recovering::before {
  background: var(--system-color-ok);
  animation: status-dot-flash 1.2s ease-out 1;
}

.status-dot--degraded::before {
  background: var(--system-color-warn);
  animation: status-dot-pulse var(--system-dot-pulse-duration) ease-in-out infinite;
}

.status-dot--emergency::before {
  background: var(--system-color-critical);
  animation: status-dot-pulse 1s ease-in-out infinite;
}


/* =============================================================================
 *  Race header stale badge — pequeño, integrado al race-header
 *
 *  El RaceHeader expone un slot interno donde se puede insertar este
 *  badge. Aparece solo cuando el SystemState está en DEGRADED_STALE y
 *  se oculta automáticamente al volver a LIVE.
 * ===========================================================================*/

.race-header__stale-badge {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--system-color-neutral-bg);
  border: 1px solid var(--system-color-warn);
  color: var(--system-color-warn-dark);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--ff-sans, system-ui, sans-serif);
  white-space: nowrap;
}

.race-header__stale-badge.is-active {
  display: inline-flex;
}

.race-header__stale-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--system-color-warn);
}


/* =============================================================================
 *  Animaciones
 * ===========================================================================*/

@keyframes system-banner-slide-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@keyframes system-banner-pulse {
  0%, 100% { opacity: 1; transform: scale(1);    }
  50%      { opacity: 0.7; transform: scale(0.85); }
}

@keyframes status-dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%      { opacity: 0.4; transform: scale(0.85); }
}

@keyframes status-dot-flash {
  0%   { box-shadow: 0 0 0 0 var(--system-color-ok); transform: scale(1);   }
  60%  { box-shadow: 0 0 0 8px transparent;          transform: scale(1.2); }
  100% { box-shadow: 0 0 0 0 transparent;            transform: scale(1);   }
}


/* =============================================================================
 *  Accesibilidad: prefers-reduced-motion
 * ===========================================================================*/

@media (prefers-reduced-motion: reduce) {
  .system-banner.is-active,
  .system-banner__icon,
  .status-dot--initial::before,
  .status-dot--recovering::before,
  .status-dot--degraded::before,
  .status-dot--emergency::before {
    animation: none !important;
  }
}


/* =============================================================================
 *  Responsive — banner se apila vertical en mobile
 * ===========================================================================*/

@media (max-width: 600px) {
  .system-banner__inner {
    padding: 10px 12px;
    gap: var(--sp-2, 8px);
  }

  .system-banner__text {
    font-size: 13px;
    min-width: 100%;
    order: 1;
  }

  .system-banner__actions {
    width: 100%;
    order: 2;
    justify-content: flex-end;
  }

  .system-banner__icon {
    order: 0;
  }

  .system-banner__btn {
    font-size: 12px;
    padding: 5px 10px;
  }
}