/* ======= CABECERA ======= */
.header-suave {
  background-color: #14532d;
  position: relative;
  z-index: 1100;
  border-bottom: none !important;
}

.header-suave a,
.header-suave .nav-link {
  color: #f8f9fa !important;
}

.header-suave .nav-link:hover {
  color: #18c535 !important;
}

.header-suave .nav-link.active {
  font-weight: bold;
  color: #ffffff !important;
}

.header-suave {
  background-color: #14532d;
  border-bottom: 1px solid #d1d5db;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 1rem 2rem;
}

.header-suave svg {
  fill: #f8f9fa;
}

.dropdown-menu {
  background-color: #ffffff;
  border-radius: 0.5rem;
}

.dropdown-menu .dropdown-item {
  color: #111 !important;
  font-weight: 500;
  padding: 0.5rem 1rem;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #6bd68b;
  color: #000 !important;
}

#userDropdown::after {
  display: none !important;
}

/* ======= NAVEGACIÓN ======= */
.nav-pills {
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-item {
  white-space: nowrap;
}

@media (min-width: 992px) {

  .nav-link.dropdown-toggle:hover,
  .nav-item:hover {
    font-size: 1.05rem;
    transition: font-size .15s ease;
  }
}

/* ======= LEGIBILIDAD EN MÓVIL/TABLET ======= */
@media (max-width: 991.98px) {

  .header-suave a,
  .header-suave .nav-link {
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
  }

  /* Título del header (el enlace grande de dos líneas) centrado */
  .header-suave .fs-6 {
    font-size: 1.05rem !important;
    line-height: 1.25;
    text-align: center;
  }

  /* Contenedor un poco más compacto */
  .header-suave .container {
    padding-top: .4rem;
    padding-bottom: .4rem;
    gap: .25rem;
  }

  /* Evitar “saltos” por hover en pantallas táctiles */
  .nav-link.dropdown-toggle:hover,
  .nav-item:hover {
    font-size: inherit !important;
  }
}

/* Aún un poquito más grande para teléfonos pequeños (opcional) */
@media (max-width: 575.98px) {

  .header-suave a,
  .header-suave .nav-link {
    font-size: 1rem !important;
  }

  /* Fondo un poco más oscuro para más contraste */
  .header-suave {
    background-color: #0f3d22;
  }
}

/* ======= LAYOUT DEL MENÚ EN MÓVIL/TABLET (horizontal + centrado) ======= */
@media (max-width: 991.98px) {
  .header-suave .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .header-suave .container>a {
    text-align: center;
    align-self: center;
  }

  .nav {
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    align-items: center;
    gap: .75rem;
  }

  .nav-item {
    width: auto;
  }

  .nav-link {
    width: auto;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }

  .dropdown-menu {
    width: auto;
  }

}

/* ======= UTILIDADES VARIAS ======= */
.footer {
  background-color: #14532d;
}

/* Ajuste de masthead si existiera */
@media (max-width: 768px) {
  .masthead {
    height: 250px;
  }
}

/* Píldoras activas */
.nav-pills .nav-link.active {
  background-color: #1B5E20;
  color: #fff;
}

/* Bloque verde (secciones) */
.bg-verde {
  background-color: #1B5E20;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (max-width: 768px) {
  .bg-verde {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .bg-verde h1 {
    font-size: 1.5rem;
  }

  .bg-verde p {
    font-size: 1rem;
  }
}

/* Carousel: altura global y en móvil */
.carousel-item img {
  height: 450px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .carousel-item img {
    height: 250px;
  }
}

/* Títulos del carousel (responsivo) */
.titulo-principal {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

@media (min-width: 768px) {
  .titulo-principal {
    font-size: 3rem;
  }
}

@media (min-width: 992px) {
  .titulo-principal {
    font-size: 4rem;
  }
}

/* Botones / links personalizados */
.cod:hover {
  color: #0056b3 !important;
  font-size: 1.1rem;
  transition: font-size 0.2s ease;
}

/* Fondo general del body */
body {
  background-color: #f0f2f5;
}

/* Cards de imagen genéricas */
.card-img-custom {
  max-height: 300px;
  width: 100%;
  object-fit: contain;
  padding: 10px;
}

.card-custom {
  height: 100%;
}

/* ======= ZOOM (una sola definición, sin duplicados) ======= */
.zoom-container {
  overflow: hidden;
  position: relative;
  cursor: grab;
}

.zoom-container img {
  transition: transform 0.3s ease;
  transform-origin: center center;
  user-select: none;
}

.zoom-container img.zoomed {
  cursor: grab;
}

.zoom-container img.dragging {
  cursor: grabbing;
  transition: none;
}

/* ======= BLOQUES DE NAVEGACIÓN ======= */
.bloque-navegacion {
  height: 180px;
  background-color: #166d44;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}

.bloque-navegacion:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .3);
}

.bloque-navegacion i {
  color: #fff;
}

.bloque-navegacion p {
  line-height: 1.3;
}

.bloque-navegacion.admin {
  background-color: #0056b3;
}

.offcanvas-body {
  background-color: #166d44;
}

/* ======= BLOG/ANCHO NARROW (opcional) ======= */
.blog-narrow {
  max-width: 85%;
  margin: 0 auto;
}