/* Imagen de fondo modo CLARO */
body.light-mode {
  background-image: url('../img/bodyBackground1.png') !important;
  opacity: 0.9;
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-size: cover; /* Cubre toda la pantalla */
  background-position: center; /* Centra la imagen */
  color: #343a40;
}

.container-fluid {
  max-width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  }
/* Imagen de fondo modo OSCURO */
body.dark-mode {
  background-image: url('../img/bodyBackground2.png');
  opacity: 0.9;
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-size: cover; /* Cubre toda la pantalla */
  background-position: center; /* Centra la imagen */
}

.dark-mode h2 {
  color: #dee2e6
}

/* Fuentes */
body, h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
}

/* ESTILOS DE LA NAVBAR */
/* FUENTES */

.navbar-brand,
.navbar-nav .nav-link,
.navbar .btn {
  font-family: 'Roboto', sans-serif;
}

/* Navbar */
.navbar {
  background-image: url(../img/navbarBackground.png);
  border: 2px solid rgba(0, 0, 0, 0.874);
  
}

.nav-item {
  margin-right: 10px;
}

/* CSS personalizado para cambiar el color de fondo de las opciones del menú cuando se mantienen presionadas */
.dropdown-menu.show .dropdown-item:active,
.dropdown-menu.show .dropdown-item:focus {
  background-color: #ffffff; /* Cambia el color de fondo cuando se mantiene presionado el clic */
}

/* CSS personalizado para cambiar el color de las propiedades del botón */
#custom-btn {
  color: black ;
  
  --bs-btn-color: #000000; /* Cambia el color del texto del botón */
  --bs-btn-active-bg: #ffffff; /* Cambia el color de fondo cuando el botón está activo */
  --bs-btn-active-border-color: #000000;
  --bs-btn-active-color: #000000; 
}

/* CSS personalizado para cambiar el color del texto del botón "Curriculum Vitae" cuando una opción del menú desplegable está seleccionada */
.dropdown-menu.show .dropdown-item:active,
.dropdown-menu.show .dropdown-item:focus {
  background-color: #ffffff; /* Cambia el color de fondo cuando se mantiene presionado el clic */
  color: #000 !important; /* Cambia el color del texto a negro */
}

/* Anula el color del texto de las opciones del menú desplegable dentro del botón "Curriculum Vitae" */
.dropdown-toggle.cv-dropdown:focus,
.dropdown-toggle.cv-dropdown:active {
  color: #000 !important; /* Cambia el color del texto a negro */
}
/* Anula el color del texto del botón "Curriculum Vitae" cuando está activo */
.dropdown-toggle:focus,
.dropdown-toggle:active,
.dropdown-toggle:active .dropdown-item:focus,
.dropdown-toggle:focus .dropdown-item:active {
  color: #000 !important; /* Cambia el color del texto a negro */
}

/* CSS personalizado para cambiar el color del texto cuando el botón está activo o tiene el foco */
#custom-btn:active,
#custom-btn:focus {
 
  color: black !important; /* Cambia el color del texto a negro */
}

.highlighted-text {
  color: #ffffff; /* Color blanco */
  padding: 10px; /* Añade un relleno de 4px alrededor del texto */
  text-shadow: 
  -1px -1px 10px rgb(0, 0, 0), /* Sombras hacia arriba y a la izquierda */
  1px -1px 10px rgb(0, 0, 0), /* Sombras hacia arriba y a la derecha */
  -1px 1px 10px rgb(0, 0, 0), /* Sombras hacia abajo y a la izquierda */
  1px 1px 10px rgb(0, 0, 0); /* Sombras hacia abajo y a la derecha */
  font-weight: bold; /* Texto en negrita */
  
}




/* Botones de la navbar */
.navbar .btn-primary,
.navbar .btn-secondary {
  border-radius: 10px;
  color: #ffffff !important;
}

.navbar .btn-primary {
  background-color: #000000;
  border: 2px solid #343a40;
}

.navbar .btn-primary:hover,
.navbar .btn-secondary:hover {
  background-color: #ffffff;
  color: #000000 !important;
  border-color: #343a40;
  transition: all 0.3s ease-in-out;
}

/* Botón de versión en inglés */
#english-version-btn {
  background-image: url(../img/fondobtn.png);
  background-repeat: no-repeat;
  background-position: center;
  font-weight: 900;
  color: black !important;
  border-radius: 10px;
  text-shadow: 
    -1px -1px 10px white, /* Sombras hacia arriba y a la izquierda */
    1px -1px 10px white, /* Sombras hacia arriba y a la derecha */
    -1px 1px 10px white, /* Sombras hacia abajo y a la izquierda */
    1px 1px 10px white; /* Sombras hacia abajo y a la derecha */
}


#english-version-btn:hover {
  background-image: url(../img/fondobtn.png);
  background-repeat: no-repeat;
  background-position: center;
  color: white !important;
  border-color: white;
  transition: all 0.3s ease-in-out;
  text-shadow: 
  -1px -1px 10px rgb(0, 0, 0), /* Sombras hacia arriba y a la izquierda */
  1px -1px 10px rgb(0, 0, 0), /* Sombras hacia arriba y a la derecha */
  -1px 1px 10px rgb(0, 0, 0), /* Sombras hacia abajo y a la izquierda */
  1px 1px 10px rgb(0, 0, 0); /* Sombras hacia abajo y a la derecha */
}

/* FIN de estilos de la  navbar */


/* ESTILOS JUMBOTRON */
.jumbotron {
  background-image: url(../img/jumboBackground.png);
  opacity: 0.9;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.2);
  border: 4px solid black;
  border-radius: 20px;
  color: #ffffff;
}

.jumbotron .btn-primary {
  background-color: #ffffff;
  color: #000000;
  border: 2px solid #000000;
  transition: all 0.3s ease-in-out;
    
}

.jumbotron .btn-primary:hover {
  background-color: #000000;
  color: #f8f9fa;
  border-color: #ffffff;
}

.jumbotron .nav-link {
  color: #ffffff;
}

.jumbotron .nav-link:hover {
  color: #ffffff;
}

/* SOBRE MI */

.extra-padding-top {
    padding-top: 100px; /* Ajusta este valor según tus necesidades */
  }


  .extra-padding-bottom {
    padding: 100px;
    margin-bottom: 50px;
    padding-bottom: 300px;
  }

/* MODIFICACAIONES AL CARROUSEL */

#carouselExampleCaptions .carousel-control-prev,
#carouselExampleCaptions .carousel-control-next {
  background-color: #333; /* Fondo gris oscuro para los botones */
  width: 30px !important; /* Ancho del botón */
  height: 100px; /* Alto del botón */
  margin: auto; /* Centrar horizontalmente */
  border: none; /* Quitar bordes */
  display: flex; /* Utilizar flexbox */
  align-items: center; /* Centrar verticalmente */
  justify-content: center; /* Centrar contenido horizontalmente */
  font-size: 20px; /* Tamaño del icono */
}

#carouselExampleCaptions .carousel-control-prev:hover,
#carouselExampleCaptions .carousel-control-next:hover {
  background-color: #555; /* Cambiar color al pasar el mouse */
}

#carouselExampleCaptions .carousel-control-prev-icon,
#carouselExampleCaptions .carousel-control-next-icon {
  color: white; /* Color del icono */
}


.carousel-caption h5,
.carousel-caption p {
  color: white;
  font-family: 'Montserrat', sans-serif; /* Tipo de fuente */
  font-size: 1.5rem; /* Tamaño del texto */
  font-weight: bold;
  text-shadow: 4px 4px 4px black, -4px -4px 4px black, 4px -4px 4px black, -4px 4px 4px black; /* Sombras negras agrandadas y difuminadas en las cuatro direcciones */
  padding: 10px; /* Añadir relleno alrededor del texto */
}

.carousel-caption p {
  font-size: 1rem; /* Tamaño del texto */
  font-weight: 500;
  margin-bottom: 5px;
    
}

/* .certificacion-img {
  max-width: 65vh;
  max-height: 40vh;
} */
.certificacion {
  max-width: 100px; /* Ajusta el tamaño máximo de la certificación */
  margin-right: 10px; /* Ajusta el margen derecho para espaciar las certificaciones */
}

.certificacion-img {
  max-width: 70vh;
  max-height: 40vh; /* Hace que las imágenes ocupen todo el ancho del contenedor */
}


/* FORMACION */
#sobre_mi h2, #formacion h2, #experiencia_laboral h2, #hard_skills h2, #soft_skills h2, #certificaciones h2, #proyectos h2, #contacto h2 {
  color: #333; /* Color del texto */
  font-family: 'Montserrat', sans-serif; /* Tipo de fuente */
  font-size: 2.5rem; /* Tamaño del texto */
  font-weight: 700; /* Grosor de la fuente */
  text-align: center; /* Alineación del texto */
  margin-bottom: 30px; /* Margen inferior */
}

/* HABILIDADES */
#hard_skills ul {
  columns: 3; /* Divide la lista en tres columnas */
  -webkit-columns: 3; /* Soporte para navegadores WebKit */
  -moz-columns: 3; /* Soporte para navegadores basados en Gecko (Firefox) */
  list-style-type: none; /* Quita los puntos de la lista */
  text-align: center; /* Alinea el contenido al centro */
}

.columns {
  columns: 3; /* Divide el contenido en tres columnas */
}

.column-title {
  font-weight: bold; /* Texto en negrita */
  background-color: #f0f0f0; /* Color de fondo */
  border-bottom: px solid #ccc; /* Borde inferior */
  padding: 5px 0; /* Espaciado interno */
  position: sticky; /* Mantener fijo en la parte superior */
  top: 0; /* Desde la parte superior */
  z-index: 1; /* Z-index para asegurar que esté por encima del contenido */
}

.skill-item {
  margin-bottom: 5px;
  font-size: 18px;
  line-height: 1.5;
}

.skill-item i {
  margin-right: 5px;
  font-size: 20px;
}

.skill-item strong {
  font-weight: bold;
  color: #000000; /* Color azul para resaltar los títulos */
}


/* Estilo para los elementos de la lista */
#hard_skills li {
  display: flex; /* Muestra los elementos en línea */
  margin: 10px 20px; /* Margen entre los elementos */
}




/* Botón activo */
.active-btn {
  background-color: #343a40;
  color: #ffffff;
}

/* Estilo para eliminar el fondo celeste al hacer clic en los botones */
.nav-link.btn-primary:not(.dropdown-toggle):active,
.nav-link.btn-primary.active {
    background-color: transparent !important;
}

/* Estilo para eliminar el borde azul al hacer clic en los botones */
.nav-link.btn-primary:not(.dropdown-toggle):active,
.nav-link.btn-primary.active {
    border-color: transparent !important;
}

/* Estilo para eliminar el fondo celeste al hacer clic en el botón "Inicio" */
.navbar .nav-item #inicio-btn.nav-link.btn-primary:not(.dropdown-toggle):active,
.navbar .nav-item #inicio-btn.nav-link.btn-primary.active {
    background-color: transparent !important;
}

/* Estilo para eliminar el borde azul al hacer clic en el botón "Inicio" */
.navbar .nav-item #inicio-btn.nav-link.btn-primary:not(.dropdown-toggle):active,
.navbar .nav-item #inicio-btn.nav-link.btn-primary.active {
    border-color: transparent !important;
}

/* Estilo para eliminar el fondo celeste al seleccionar opciones en el menú desplegable de "Curriculum Vitae" */
.navbar .dropdown-menu #curriculum-btn.dropdown-item.active,
.navbar .dropdown-menu #curriculum-btn.dropdown-item:active {
    background-color: transparent !important;
}

/* CONTACTO */

.custom-shadow {
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4), 0 -12px 20px rgba(0, 0, 0, 0.4), -12px 0 20px rgba(0, 0, 0, 0.4), 12px 0 20px rgba(0, 0, 0, 0.4);
}

#contacto {
  padding-bottom: 20px; /* Ajusta este valor según tus necesidades */
}