/* =========================================================
  ESTILOS GENERALES Y SIDEBAR
  ========================================================= */
body {
  background-color: #f9f9f9;
}

.sidebar {
  min-height: 100vh;
  border-right: 1px solid #ddd;
}

.nav-link {
  color: #333;
}

.nav-link:hover,
.nav-link.active {
  color: #198754;
  font-weight: bold;
}

footer {
  position: relative;
  bottom: 0;
  width: 100%;
}

/* =========================================================
  ESTILOS DEL HEADER (AJUSTES PARA HACERLO COMPACTO)
  ========================================================= */

/* Contenedor general centrado (Aseguramos que el logo-container dentro del header se maneje bien) */
.logo-container {
  /* Clase usada en tu HTML de la plantilla */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Flex-grow-1 ya está en el HTML, esto es una capa de seguridad */
}
.logo-header {
  max-width: 100%;
  height: 300px;
}

@media (max-width: 768px) {
  .logo-header {
    height: 160px;
  }
}

/* Títulos debajo del logo en el header */
header .text-white.mt-1 {
  margin-top: 0 !important; /* Elimina el margen superior de los títulos */
  padding-bottom: 0.5rem; /* Pequeño padding debajo para compensar */
}

header h1 {
  font-size: 1.8rem; /* Tamaño de h1 un poco más pequeño en escritorio */
  font-weight: 600;
  margin: 0;
}

/* Clases originales del borrador (renombradas o no usadas en el header actual) */
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  text-align: center;
}

/* =========================================================
  Adaptación para móviles (< 768px)
  ========================================================= */
@media (max-width: 768px) {
  /* Reducir los títulos en móvil */
  header h1 {
    font-size: 1.2rem; /* h1 más compacto */
  }

  header h4 {
    font-size: 0.9rem; /* h4 más compacto */
  }

  /* Reglas heredadas del borrador (si son necesarias para otros elementos) */
  .brand {
    flex-direction: column;
  }
}
/* =========================================================
   BOTÓN FLOTANTE WHATSAPP
   ========================================================= */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px; /* ← Esto lo coloca correctamente a la derecha */
  width: 55px;
  height: 55px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 9999; /* Asegura que esté por encima de todo */
}

.whatsapp-float i {
  font-size: 1.8rem;
  color: #fff;
}
.footer-link {
  color: #fff;
  text-decoration: none;
}

.footer-link:hover {
  color: #ddd; /* un blanco suave al pasar el ratón */
  text-decoration: underline;
}