/**
 * ---------------------------------------------------
 * ESTILOS GENERALES Y RESET
 * ---------------------------------------------------
 */

/* Carga la fuente Montserrat-Medium desde el directorio de fuentes */
@font-face {
  src: url(../fonts/Montserrat-Medium.ttf); /* Ruta relativa al archivo de fuente */
  font-family: Montserrat; /* Nombre de referencia para usar la fuente */
}

/* Reset universal para todos los elementos, body y html */
*, body, html {
  margin: 0;  /* Elimina márgenes predeterminados */
  padding: 0; /* Elimina rellenos predeterminados */
  box-sizing: border-box; /* Incluye padding y border en el ancho/alto total */
}

/**
 * ---------------------------------------------------
 * ESTILOS DE TÍTULOS
 * ---------------------------------------------------
 */

/* Estilo base para los encabezados h2 */
h2 {
  font-family: Montserrat; /* Usa la fuente Montserrat */
  text-align: center; /* Centra el texto horizontalmente */
  color: #555555; /* Color de texto gris oscuro */
  padding-bottom: 10px; /* Espaciado inferior */
}

/* Línea decorativa bajo los títulos h2 */
h2:after {
  content: ''; /* Necesario para que el pseudoelemento se muestre */
  background: rgb(255,204,0); /* Color amarillo */
  display: block; /* Hace que se comporte como bloque */
  height: 3px; /* Altura de la línea */
  width: 170px; /* Ancho de la línea */
  margin: 20px auto 5px; /* Margen superior e inferior con centrado automático */
}

/**
 * ---------------------------------------------------
 * BARRA DE NAVEGACIÓN (NAVBAR)
 * ---------------------------------------------------
 */

/* Estilos para párrafos en sidebar y navbar */
#sidebar p, .navbar p {
  font-family: Arial; /* Fuente alternativa */
  font-size: 1.1em; /* Tamaño de fuente */
  font-weight: 300; /* Grosor de fuente ligero */
  line-height: 1.7em; /* Espaciado entre líneas */
  color: #999; /* Color de texto gris claro */
}

/* Estilos para enlaces y sus estados (normal, hover, focus) */
#sidebar a, .navbar a,
#sidebar a:hover, .navbar a:hover,
#sidebar a:focus, .navbar a:focus {
  color: inherit; /* Hereda el color del elemento padre */
  text-decoration: none; /* Elimina el subrayado */
  transition: all 0.3s; /* Transición suave para efectos hover/focus */
}

/* Estilo principal de la barra de navegación */
.navbar {
  padding: 15px 10px; /* Relleno interno */
  background: #fff; /* Fondo blanco */
  border: none; /* Sin borde */
  border-radius: 0; /* Sin esquinas redondeadas */
  margin-bottom: 2px; /* Margen inferior pequeño */
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* Estilo para el botón que colapsa/expande el sidebar */
#sidebarCollapse {
  box-shadow: none; /* Sin sombra */
  outline: none !important; /* Elimina el outline al hacer focus */
  border: none; /* Sin borde */
}

/* Estilo para el logo en la barra de navegación */
.navbar-brand img {
  height: 60px; /* Altura fija */
  padding-left: 10px; /* Relleno izquierdo */
  user-select: none; /* Evita que se pueda seleccionar la imagen */
}

/**
 * ---------------------------------------------------
 * MENÚ HAMBURGUESA (BURGER)
 * ---------------------------------------------------
 */

/* Contenedor del botón de menú hamburguesa */
.menu-btn {
  position: relative; /* Posicionamiento relativo para elementos hijos */
  display: flex; /* Usa flexbox para centrar */
  justify-content: center; /* Centrado horizontal */
  align-items: center; /* Centrado vertical */
  width: 28px; /* Ancho fijo */
  height: 48px; /* Alto fijo */
  cursor: pointer; /* Cambia el cursor al pasar */
  transition: all .5s ease-in-out; /* Transición suave */
}

/* Barra central del menú hamburguesa */
.burger {
  width: 28px; /* Mismo ancho que el contenedor */
  height: 4px; /* Grosor de la barra */
  background: #9E9E9E; /* Color gris */
  border-radius: 5px; /* Esquinas redondeadas */
  transition: all .5s ease-in-out; /* Transición suave */
}

/* Barras superior e inferior del menú hamburguesa */
.burger:before, .burger:after {
  content: ''; /* Necesario para pseudoelementos */
  position: absolute; /* Posicionamiento absoluto respecto al contenedor */
  width: 28px; /* Mismo ancho */
  height: 4px; /* Mismo grosor */
  background: #9E9E9E; /* Mismo color */
  border-radius: 5px; /* Mismo redondeo */
  transition: all .5s ease-in-out; /* Misma transición */
}

/* Posicionamiento de la barra superior */
.burger:before {
  transform: translate(-14px,-10px); /* Mueve hacia arriba */
}

/* Posicionamiento de la barra inferior */
.burger:after {
  transform: translate(-14px,10px); /* Mueve hacia abajo */
}

/* Animación cuando el menú está abierto */
.menu-btn.open .burger {
  transform: translateX(-28px); /* Mueve la barra central */
  background: transparent; /* Hace invisible la barra central */
}

/* Transformación de la barra superior en X */
.menu-btn.open .burger:before {
  transform: translateX(14px) rotate(225deg); /* Rota 225 grados */
}

/* Transformación de la barra inferior en X */
.menu-btn.open .burger:after {
  transform: translateX(14px) rotate(-225deg); /* Rota -225 grados */
}

/**
 * ---------------------------------------------------
 * SIDEBAR (BARRA LATERAL)
 * ---------------------------------------------------
 */

/* Estilo base del sidebar */
#sidebar {
  width: 300px; /* Ancho fijo */
  position: fixed; /* Posición fija en pantalla */
  top: 0; /* Alineado arriba */
  left: -300px; /* Oculto por defecto (fuera de pantalla) */
  height: 100vh; /* Altura completa de la ventana */
  z-index: 999; /* Capa superior */
  transition: all 0.3s; /* Transición suave */
  overflow-y: scroll; /* Scroll vertical si es necesario */
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); /* Sombra */
  background: rgba(51,51,51,1); /* Fondo oscuro */
  color: #fff; /* Texto blanco */
}

/* Estado activo (visible) del sidebar */
#sidebar.active {
  left: 0; /* Muestra el sidebar */
}

/* Cabecera del sidebar */
#sidebar .sidebar-header {
  padding: 20px; /* Relleno interno */
  background: rgb(255,204,0); /* Fondo amarillo */
  color: rgba(51,51,51,1); /* Texto oscuro */
}

/* Botón para cerrar el sidebar */
#dismiss {
  width: 35px; /* Ancho fijo */
  height: 35px; /* Alto fijo */
  line-height: 35px; /* Centrado vertical */
  text-align: center; /* Centrado horizontal */
  position: absolute; /* Posición absoluta respecto al sidebar */
  top: 10px; /* Distancia desde arriba */
  right: 10px; /* Distancia desde la derecha */
  cursor: pointer; /* Cambia el cursor */
  transition: all 0.3s; /* Transición suave */
  background: rgb(255,187,10); /* Fondo amarillo más claro */
  color: rgba(51,51,51,1); /* Texto oscuro */
}

/* Efecto hover para el botón de cerrar */
#dismiss:hover {
  background: #fff; /* Fondo blanco */
  color: #7386D5; /* Texto azul */
}

/**
 * ---------------------------------------------------
 * OVERLAY (FONDO OSCURO)
 * ---------------------------------------------------
 */

/* Fondo oscuro semitransparente */
.overlay {
  display: none; /* Oculto por defecto */
  position: fixed; /* Posición fija */
  width: 100vw; /* Ancho completo de la ventana */
  height: 100vh; /* Alto completo de la ventana */
  background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
  z-index: 998; /* Debajo del sidebar */
  opacity: 0; /* Inicialmente transparente */
}

/* Estado activo del overlay */
.overlay.active {
  display: block; /* Muestra el overlay */
  opacity: 1; /* Opacidad completa */
}

/**
 * ---------------------------------------------------
 * CONTENIDO PRINCIPAL
 * ---------------------------------------------------
 */

/* Área de contenido principal */
#content {
  width: 100%; /* Ancho completo */
  min-height: 100vh; /* Altura mínima de la ventana */
  transition: all 0.3s; /* Transición suave */
  position: absolute; /* Posición absoluta */
  top: 0; /* Alineado arriba */
  right: 0; /* Alineado a la derecha */
}

/**
 * ---------------------------------------------------
 * FOOTER (PIE DE PÁGINA)
 * ---------------------------------------------------
 */

/* Contenedor del footer */
#FOOTER {
  display: flex-block; /* Display especial para flexibilidad */
  position: relative; /* Posición relativa para elementos hijos */
  background-color: #333; /* Fondo oscuro */
  padding: 0; /* Sin relleno */
  height: 45px; /* Altura fija */
}

/* Texto del footer */
#FOOTER span {
  position: absolute; /* Posición absoluta respecto al footer */
  padding-top: 10px; /* Relleno superior */
  font-size: 12px; /* Tamaño pequeño */
  color: white; /* Texto blanco */
}

/* Texto de copyright */
#copyfoot {
  left: 15px; /* Distancia desde la izquierda */
  text-align: center; /* Centrado */
}

/* Texto "Made with love" */
#madefoot {
  left: 50%; /* Centrado horizontal */
  transform: translateX(-50%); /* Ajuste fino para centrado */
  text-align: center; /* Centrado */
}

/* Icono de corazón */
.fa-heart {
  color: red; /* Color rojo */
}

/**
 * ---------------------------------------------------
 * MEDIA QUERIES (DISEÑO RESPONSIVO)
 * ---------------------------------------------------
 */

/* Sidebar en pantallas muy pequeñas */
@media only screen and (max-width: 300px) {
  #sidebar {
    width: 100vw; /* Ocupa todo el ancho */
    left: -100vw; /* Se esconde completamente */
  }
}

/* Ajustes progresivos para el footer en diferentes tamaños */
@media only screen and (max-width: 779px) {
  #FOOTER {
    height: 65px; /* Aumenta altura */
  }
  #copyfoot {
    left: 50%; /* Centrado */
    transform: translateX(-50%); /* Ajuste fino */
  }
  #madefoot {
    top: 25px; /* Posición vertical */
    left: 50%; /* Centrado */
    transform: translateX(-50%); /* Ajuste fino */
  }
}

/* Media query general para móviles */
@media (max-width: 768px) {
  header { 
    padding: 1rem !important; /* Relleno reducido */
    flex-direction: column; /* Apila elementos verticalmente */
  }
  img { 
    max-width: 100% !important; /* Imágenes responsivas */
    height: auto !important; /* Mantiene proporciones */
  }
  nav {
    margin-top: 1rem; /* Espaciado superior */
  }
}