/* Página de estado. Va encima de legal.css (tipos, colores y pie compartidos).
   El estado nunca se dice solo con color: cada punto lleva su texto al lado. */

:root {
  --est-ok: #5fd38a;
  --est-caido: #ff6b6b;
  --est-aviso: #f2c14e;
}

.est-punto {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
}
[data-estado="ok"] > .est-punto { background: var(--est-ok); box-shadow: 0 0 0 4px rgba(95, 211, 138, .14); }
[data-estado="caido"] > .est-punto { background: var(--est-caido); box-shadow: 0 0 0 4px rgba(255, 107, 107, .16); }
[data-estado="mantenimiento"] > .est-punto { background: var(--est-aviso); box-shadow: 0 0 0 4px rgba(242, 193, 78, .16); }
[data-estado="cargando"] > .est-punto { animation: est-late 1.2s ease-in-out infinite; }

@keyframes est-late { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  [data-estado="cargando"] > .est-punto { animation: none; }
}

/* ── Resumen arriba ── */
.est-resumen {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 32px 0 28px;
}
.est-resumen > .est-punto { width: 14px; height: 14px; margin-top: 7px; }
.est-resumen[data-estado="caido"] { border-color: rgba(255, 107, 107, .35); }
.est-resumen[data-estado="mantenimiento"] { border-color: rgba(242, 193, 78, .35); }
.est-titulo {
  font-family: var(--display);
  font-size: clamp(19px, 3.2vw, 23px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
  margin: 0;
}
.est-detalle { margin: 6px 0 0; font-size: 15px; }

/* ── Lista de servicios ── */
.est-lista { list-style: none; padding: 0; margin: 0 0 24px; }
.est-lista li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  margin: 0;
  border-bottom: 1px solid var(--border);
}
.est-lista li:last-child { border-bottom: none; }
.est-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.est-nombre { color: var(--text); font-weight: 600; }
.est-desc { color: var(--muted); font-size: 14px; line-height: 1.5; }
.est-valor {
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
[data-estado="ok"] > .est-valor { color: var(--est-ok); }
[data-estado="caido"] > .est-valor { color: var(--est-caido); }

.est-btn { width: auto; margin: 0 0 8px; padding: 11px 20px; font-size: 14.5px; }
.est-btn:disabled { opacity: .5; cursor: default; }

@media (max-width: 560px) {
  .est-resumen { padding: 16px 18px; gap: 14px; }
  .est-lista li { align-items: flex-start; }
  .est-lista li > .est-punto { margin-top: 8px; }
  .est-valor { margin-top: 4px; }
}