/* evetev.com/evepay-status — lo propio de la página de estado.
   El armazón (.nav, .wrap, .pie) viene de /landings/base.css. */

/* Los tokens de estado que trae /marca/colores.css están calibrados para
   íconos y bordes: --eve-exito da 3,30:1 sobre blanco y --eve-alerta 3,19:1,
   por debajo del 4,5:1 que exige el §5 para texto. Aquí se definen las
   variantes oscuras del MISMO tono para las palabras, y los tokens de marca se
   quedan con la señal de color. Es la desviación descrita en el sistema de
   diseño, hecha explícita. */
:root {
  --estado-ok-texto: #15803d;
  --estado-ok-fondo: #f0fdf4;
  --estado-alerta-texto: #b45309;
  --estado-alerta-fondo: #fffbeb;
  --estado-mal-texto: #b91c1c;
  --estado-mal-fondo: #fef2f2;
  --estado-gris-texto: #475569;
  --estado-gris-fondo: #f8fafc;
}

.estado-pagina {
  padding: 3rem 0 4rem;
}

.estado-pagina h1 {
  font-family: var(--eve-font-marca);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  margin: 0 0 1rem;
  color: var(--eve-azul-noche);
}

.estado-pagina h2 {
  font-family: var(--eve-font-marca);
  font-size: 1.25rem;
  margin: 2.5rem 0 1rem;
  color: var(--eve-azul-noche);
}

.aviso-historial {
  margin: 0 0 2rem;
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--eve-electrico);
  background: var(--eve-tinte);
  border-radius: 0 var(--eve-radio-md) var(--eve-radio-md) 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--estado-gris-texto);
}

/* --- Resumen y servicios --------------------------------------------- */

.resumen {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--eve-linea);
  border-radius: var(--eve-radio-lg);
  background: var(--estado-gris-fondo);
}

.resumen-titulo {
  margin: 0;
  font-family: var(--eve-font-marca);
  font-size: 1.35rem;
  color: var(--eve-azul-noche);
}

.resumen-detalle {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  color: var(--estado-gris-texto);
}

.servicios {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--eve-linea);
  border-radius: var(--eve-radio-lg);
  overflow: hidden;
}

.servicio {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--eve-linea);
  background: #fff;
}

.servicio:last-child {
  border-bottom: none;
}

.servicio-texto {
  flex: 1;
  min-width: 0;
}

.servicio-nombre {
  margin: 0;
  font-weight: 600;
  color: var(--eve-azul-noche);
}

.servicio-detalle {
  margin: 0.1rem 0 0;
  font-size: 0.9rem;
  color: var(--estado-gris-texto);
}

.servicio-estado {
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* La señal de color NUNCA viaja sola: al lado siempre va la palabra
   («Operativo», «Caído»). Hay quien no distingue el rojo del verde, y aquí un
   estado mal leído hace que alguien crea que puede cobrar cuando no puede. */
.senal {
  width: 12px;
  height: 12px;
  border-radius: var(--eve-radio-pill);
  flex: none;
  background: var(--eve-pizarra);
}

[data-estado="operativo"] .senal {
  background: var(--eve-exito);
}
[data-estado="degradado"] .senal {
  background: var(--eve-alerta);
}
[data-estado="caido"] .senal {
  background: var(--eve-error);
}

[data-estado="operativo"] .servicio-estado {
  color: var(--estado-ok-texto);
}
[data-estado="degradado"] .servicio-estado {
  color: var(--estado-alerta-texto);
}
[data-estado="caido"] .servicio-estado {
  color: var(--estado-mal-texto);
}
[data-estado="midiendo"] .servicio-estado,
[data-estado="sin_datos"] .servicio-estado,
[data-estado="desconocido"] .servicio-estado {
  color: var(--estado-gris-texto);
}

.resumen[data-estado="operativo"] {
  background: var(--estado-ok-fondo);
}
.resumen[data-estado="degradado"] {
  background: var(--estado-alerta-fondo);
}
.resumen[data-estado="caido"] {
  background: var(--estado-mal-fondo);
}
.resumen[data-estado="sin_datos"],
.resumen[data-estado="desconocido"] {
  background: var(--estado-gris-fondo);
}

.nota {
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--estado-gris-texto);
}

/* --- Incidentes ------------------------------------------------------- */

.incidente {
  border: 1px solid var(--eve-linea);
  border-radius: var(--eve-radio-lg);
  padding: 1.3rem 1.4rem;
  background: #fff;
}

.incidente h3 {
  margin: 0;
  font-family: var(--eve-font-marca);
  font-size: 1.1rem;
  color: var(--eve-azul-noche);
}

.incidente-cuando {
  margin: 0.3rem 0 1rem;
  font-size: 0.9rem;
  color: var(--estado-gris-texto);
}

.incidente p {
  margin: 0 0 0.7rem;
  line-height: 1.65;
  color: var(--estado-gris-texto);
}

.incidente p:last-child {
  margin-bottom: 0;
}

.incidente strong {
  color: var(--eve-azul-noche);
}

@media (max-width: 560px) {
  .servicio {
    flex-wrap: wrap;
  }
  .servicio-estado {
    width: 100%;
    padding-left: 1.9rem;
  }
}

/* El historial de 90 días lo lleva el servicio de medición externo. Se enlaza
   en vez de incrustarlo: su recuadro viene en tema oscuro y solo repite el
   estado de ahora, que esta página ya muestra con más detalle. */
.enlace-historial {
  color: var(--eve-mezclado);
  font-weight: 600;
  text-decoration: none;
}

.enlace-historial:hover,
.enlace-historial:focus-visible {
  text-decoration: underline;
}