/* ════════════════════════════════════════════════════════════
   CENTRAL DE ÁNGELES — COMPONENTS · Indicador EN VIVO y auto-actualización (chip + popover)
   ⚠ Consume css/tokens.css. Parte del set de componentes por dominio.
   Ver css/components/_index.css para el mapa completo.
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   INDICADOR "EN VIVO" (.live-chip / .live-dot)
   Chip verde con punto pulsante. Base del componente de
   auto-actualización de abajo. (Movido desde layout.css para que
   el design-system doc — que solo carga tokens + components — lo
   renderice igual que las páginas.)
   ════════════════════════════════════════════════════════════ */
.live-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--success-light);
  border: 1px solid var(--success-border);
  color: var(--success-text);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
}
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  animation: livepulse 1.5s ease-in-out infinite;
}
@keyframes livepulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
}

/* ════════════════════════════════════════════════════════════
   AUTO-ACTUALIZACIÓN — chip "EN VIVO" con cuenta regresiva
   El chip verde (.live-chip, arriba) se vuelve un botón: click
   abre un popover con Pausar/Reanudar + intervalos, y una línea
   fina bajo la píldora se vacía a lo largo del intervalo.
   Markup + comportamiento: patrón 10 en app.js (data-refresh).
   ════════════════════════════════════════════════════════════ */
.refresh-live {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}
/* El chip pasa a ser <button>: reponer lo que el reset de botón quita */
.refresh-live .live-chip {
  cursor: pointer;
  font-family: var(--font-body);
  line-height: 1;
  white-space: nowrap;
  padding: 7px 14px;
  transition: box-shadow 0.15s ease;
}
/* El puntito nunca se deforma aunque el chip se apriete */
.refresh-live .live-dot { flex-shrink: 0; }
.refresh-live .live-chip:hover { box-shadow: var(--shadow-sm); }
.refresh-live .live-chip:focus-visible {
  outline: 2px solid var(--success);
  outline-offset: 2px;
}
/* Dot en pausa: deja de pulsar */
.refresh-live.is-paused .live-dot { animation: none; opacity: 0.45; }

/* Línea de progreso bajo la píldora */
.refresh-underline {
  display: block;
  height: 2px;
  width: 82%;
  margin: 3px auto 0;
  background: var(--success-light);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.refresh-underline-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--success);
  border-radius: var(--radius-full);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 1s linear;
}

/* Popover: Pausar/Reanudar + lista de intervalos */
.refresh-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 150px;
  flex-direction: column;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
  display: none;
}
.refresh-live.menu-open .refresh-menu { display: flex; }
.refresh-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px 7px 26px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
}
.refresh-menu-item:hover { background: var(--surface-3); }
.refresh-menu-item[aria-checked="true"] {
  color: var(--success-text);
  font-weight: 700;
}
.refresh-menu-item[aria-checked="true"]::before {
  content: '✓';
  position: absolute;
  left: 9px;
}
.refresh-menu-pause { padding-left: 10px; font-weight: 600; }
.refresh-menu-ico { font-size: var(--text-sm); }
.refresh-menu-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--border-1);
}
</content>