:root {
  --tm-rojo: #c8102e;
  --tm-oscuro: #1d1d1b;
}

body {
  background-color: #f5f6f8;
}

.navbar-tm {
  background-color: var(--tm-oscuro);
}

.navbar-tm .navbar-brand,
.navbar-tm .nav-link {
  color: #fff !important;
}

.navbar-tm .nav-link.active {
  color: var(--tm-rojo) !important;
  font-weight: 600;
}

/* ============================================================
   FONDO DE LOGIN (imagen "estaciones.webp")
   - TRANSPARENCIA: ajustar los valores en rgba(...).
       Mas bajo = se ve mas la imagen.   Mas alto = mas oscuro.
   - TAMANO: opciones para la imagen:
       "contain"   -> imagen completa centrada (no recorta).
       "cover"     -> llena toda la pantalla pero recorta bordes.
       "150%" etc. -> zoom.
   ============================================================ */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(rgba(29, 29, 27, 0.45), rgba(29, 29, 27, 0.52)),
    url("/static/img/estaciones.webp?v=audio-puertas-00048-rrq") center/cover no-repeat;
}

.login-card {
  width: 100%;
  max-width: 380px;
  backdrop-filter: blur(2px);
}

.brand-dot {
  color: var(--tm-rojo);
}

/* Navbar brand */
.brand-text {
  letter-spacing: 0.5px;
}
.brand-sep {
  color: var(--tm-rojo);
  margin: 0 0.4rem;
  font-weight: 400;
}

/* ============================================================
   FONDO DE PAGINAS CON CONTENIDO (imagen "troncales.webp")
   Aplica a Dashboard, Enviar y Logs (via body_class).
   - TRANSPARENCIA: ajustar los valores en rgba(...).
   - TAMANO: "contain" / "cover" / porcentaje.
   ============================================================ */
.page-bg {
  background:
    linear-gradient(rgba(245, 246, 248, 0.83), rgba(245, 246, 248, 0.88)),
    url("/static/img/troncales.webp?v=audio-puertas-00048-rrq") center / 90% auto fixed no-repeat #f5f6f8;
  min-height: 100vh;
}

.resultado-ok {
  color: #198754;
}

.resultado-error {
  color: #dc3545;
}

.card-nivel {
  cursor: pointer;
}

.table-logs {
  font-size: 0.85rem;
}

/* ============================================================
   ESTADO DE CONECTIVIDAD (dashboard)
   ============================================================ */
.estado-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.estado-dot.lg { width: 16px; height: 16px; }
.estado-verde     { background: #198754; }
.estado-amarillo  { background: #ffc107; }
.estado-rojo      { background: #dc3545; }
.estado-sin_dato  { background: #adb5bd; }

/* Pulso suave en los verdes (vivo) */
.estado-verde.pulso {
  animation: pulso-verde 2s infinite;
}
@keyframes pulso-verde {
  0%, 100% { box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.0); }
  50%      { box-shadow: 0 0 0 5px rgba(25, 135, 84, 0.25); }
}

.card-conectividad .total {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
}
.card-conectividad .label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #6c757d;
  letter-spacing: 0.5px;
}
.actualizado-tag {
  font-size: 0.75rem;
  color: #6c757d;
}