/* Asegurarse de que las transiciones están bien definidas en el CSS */
html {
    scroll-behavior: smooth;
}
/* Estilos globales */
body {
    font-family: Arial, sans-serif;
    transition: background-color 0.5s, color 0.5s;
    margin: 0;
    padding: 0;
    overflow-y: hidden; 
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.1); 
    background: linear-gradient(70deg, #d6d6d6 ,rgb(148, 181, 235,0.5),rgb(117, 170, 255,0.9));
    color: #333333;
  
}

body::before {
    background: linear-gradient(70deg, #A1A1A1,#D1D5DB,rgba(59,130,246,0.5));
}

/* Estilos de navegación */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(181, 181, 181, 0.2);
    backdrop-filter: blur(5px);
}

nav ul li {
    transition: transform 0.5s ease;
}

nav ul li:hover {
    transform: translateY(-2px);
}

/* Estilos de contenedores */
.container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Estilos principales */
main {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

section {
    height: 100vh;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateY(0px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    padding: 20px;
    box-sizing: border-box;
}

section.active {
    opacity: 1;
    transform: translateY(0);
}

/* Estilos para modo oscuro */
.dark {
    background: linear-gradient(70deg, #4B5563, #1F2937, #111827);
    color: #EAEAEA;
}
.dark::before {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(1, 54, 111, 0.1); /* Color del difuminado */
    filter: blur(15px); /* Ajusta el nivel de difuminado */
    z-index: 1; /* Asegúrate de que esté por encima del fondo */
}

.dark nav {
    background-color: rgba(37, 37, 37, 0.2);
}

.dark input,
.dark textarea,
.dark select {
    background-color: #4A5568;
    border-color: #718096;
    color: #EAEAEA;
}

.dark button {
    background-color: #858585;
}

.dark button:hover {
    background-color: #3182CE;
}

/* Estilos para elementos redondos */
.elemento-redondo {
    background-color: azul;
    border-radius: 50%;
}

/* Estilos para la barra de desplazamiento en navegadores WebKit */
body::-webkit-scrollbar {
    width: 12px;
}

body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Estilos de carrusel */
.carousel-control-prev,
.carousel-control-next {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s;
    color: rgba(59, 130, 246, 0.5) !important;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    color: rgba(59, 130, 246, 1) !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: transparent !important;
}

.carousel-control-prev-icon::before,
.carousel-control-next-icon::before {
    color: inherit;
    font-size: 1.5rem;
}

/* Posicionamiento de flechas */
.carousel-control-prev {
    left: 10px;
}

.carousel-control-next {
    right: 10px;
}

/* Estilos de tarjetas */
.card {
    transition: transform 0.3s, box-shadow 0.3s;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.5);
}

/* Estilos para modo oscuro en tarjetas */
.dark .card {
    background: rgba(255, 255, 255, 0.67);
}

.carousel-control-prev,
.carousel-control-next {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Asegura que ocupen todo el alto del carrusel */
    background-color: transparent !important;
}

/* Asegurar transición en botón */
.btn-transition {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Estilos para botón en modo oscuro */
.dark .btn-transition.bg-blue-500 {
    background-color: #3182CE; /* Ajustar azul para modo oscuro */
}

.dark .btn-transition.bg-green-500 {
    background-color: #48BB78; /* Ajustar verde para modo oscuro */
}

.dark .btn-transition.bg-red-500 {
    background-color: #E53E3E; /* Ajustar rojo para modo oscuro */
}



/* ############################################################################################## */
/* ############################################################################################## */
/* ############################################################################################## */

/* BOTON DARK */

.labelb, .bubble {
  display: block;
  -webkit-tap-highlight-color: transparent;
}

.labelb {
  animation: float74 4s ease-in-out infinite;
}

.bubble, .bubble:before, .bubble:after {
  transition-duration: 0.2s;
}

.bubble, .bubble:after {
  border-radius: 50%;
}

.bubble {
  background-image: radial-gradient(8% 8% at 22% 28%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
    radial-gradient(8% 8% at 23% 27%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
    radial-gradient(8% 8% at 24% 26%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
    radial-gradient(8% 8% at 25% 25%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
    radial-gradient(8% 8% at 26% 24%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
    radial-gradient(8% 8% at 27% 23%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),
    radial-gradient(8% 8% at 28% 22%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%);
  box-shadow: 0 -0.06em 0.1em hsl(0,90%,100%) inset,
    0 -0.15em 0.4em hsl(211, 100%, 24%) inset,
    0 0.05em 0.05em hsl(211, 100%, 24%) inset,
    0.05em 0 0.1em hsl(236, 63%, 41%) inset,
    -0.05em 0 0.1em hsl(241, 100%, 50%) inset,
    0 0.1em 0.4em hsl(211, 100%, 13%) inset;
  cursor: pointer;
  position: relative;
  width: 2em;
  height: 2em;
  transform-style: preserve-3d;
  transition-property: box-shadow, transform, width, height;
  transition-timing-function: ease-in-out, ease-in-out, var(--bubbleTiming), var(--bubbleTiming);
  will-change: transform;
  -webkit-appearance: none;
  appearance: none;
  z-index: 0;
}

.bubble:before, .bubble:after {
  content: "";
  display: block;
  position: absolute;
  transition-timing-function: var(--bubbleTiming);
}

.bubble:before {
  border-radius: 0.75em;
  box-shadow: 0 0 0 0.5em hsl(211, 32%, 14%) inset;
  filter: drop-shadow(0.6em 0.6em 4px hsla(0,0%,0%,0.2));
  top: 50%;
  left: 50%;
  width: 1.5em;
  height: 1.5em;
  transform: translate3d(-50%,-50%,-1px);
  z-index: -1;
}

.bubble:after {
  background: radial-gradient(100% 100% at center,hsla(0,0%,0%,0) 35%,hsla(0,0%,0,0.2) 48%,hsla(0,0%,0%,0) 50%);
  filter: blur(4px);
  top: 0.6em;
  left: 0.6em;
  width: 100%;
  height: 100%;
  transform: translate3d(0,0,-1px);
  z-index: -2;
}

.bubble:focus, .bubble:hover {
  transform: scale(1.1);
  outline: none;
}

.bubble:focus:active, .bubble:hover:active {
  width: 3.6em;
  height: 2.4em;
}

.bubble:focus:before, .bubble:hover:before {
  filter: drop-shadow(0.75em 0.75em 4px hsla(0,0%,0%,0.2));
}

.bubble:focus:after, .bubble:hover:after {
  transform: translate3d(0.15em,0.15em,-1px);
}

.bubble:checked {
  box-shadow: 0 -0.06em 0.1em hsl(120,90%,100%) inset,
    0 -0.15em 0.4em hsl(181, 100%, 50%) inset,
    0 0.05em 0.05em hsl(214, 100%, 50%) inset,
    0.05em 0 0.1em hsl(120,90%,100%) inset,
    -0.05em 0 0.1em hsl(120,90%,100%) inset,
    0 0.1em 0.4em hsl(230, 44%, 51%) inset;
}

.bubble:checked:before {
  border-radius: 0.25em;
  width: 0.5em;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .labelb {
    animation: none;
  }

  .bubble, .bubble:before, .bubble:after {
    transition-duration: 0s;
  }

  .bubble:focus, .bubble:hover {
    transform: scale(1);
  }

  .bubble:focus:active, .bubble:hover:active {
    width: 3em;
    height: 3em;
  }

  .bubble:focus:before, .bubble:hover:before {
    filter: drop-shadow(0.6em 0.6em 4px hsla(0,0%,0%,0.2));
  }

  .bubble:focus:after, .bubble:hover:after {
    transform: translate3d(0,0,-1px);
  }
}

/* Animations */
@keyframes float74 {
  from, to {
    transform: translate(0,3%);
  }

  25% {
    transform: translate(-3%,0);
  }

  50% {
    transform: translate(0,-3%);
  }

  75% {
    transform: translate(3%,0);
  }
}



/* ############################################################################################## */
/* ############################################################################################## */
/* ############################################################################################## */

/* Modo oscuro - Corrección de color de texto */
.dark .nav-link {
    color: #EAEAEA; /* Color claro para las opciones del menú */
}

.dark #nav-name {
    color: #EAEAEA; /* Color claro para el nombre o título */
}

.dark .navbar-toggler-icon {
    filter: invert(1); /* Asegura que el icono del toggler sea visible en modo oscuro */
}

.dark select, .dark option {
    color: #EAEAEA; /* Asegura que el texto en el selector sea legible */
    background-color: #4A5568; /* Fondo oscuro para el selector */
}

/* Ajusta el color de los enlaces de redes sociales en modo oscuro */
.dark a.text-blue-500 {
    color: #90cdf4; /* Ajustar a un azul claro legible en fondo oscuro */
}

.dark a.text-gray-700 {
    color: #EAEAEA; /* Cambia el gris a blanco en modo oscuro */
}

.dark a.text-blue-400 {
    color: #63b3ed; /* Azul más claro en modo oscuro */
}
/* ############################################################################################## */
/* ############################################################################################## */
/* ############################################################################################## */
/* AJUSTE DE NAVBAR */
.navbar{
    position:fixed;
}

/* ############################################################################################## */
/* ############################################################################################## */
/* ############################################################################################## */

.containerExpr {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.containerExpr .glassExpr {
  position: relative;
  width: 200px;
  height: 250px;
  background: linear-gradient(#fff2, transparent);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  border-radius: 10px;
  margin: 0 -45px;
  backdrop-filter: blur(10px);
  transform: rotate(calc(var(--r) * 1deg));
}

.containerExpr:hover .glassExpr {
  transform: rotate(0deg);
  margin: 0 10px;
}

.containerExpr .glassExpr::before {
  content: attr(data-text);
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 74px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.containerExpr .glassExpr svg {
  font-size: 2.5em;
  fill: #fff;
}

/* ############################################################################################## */
/* ############################################################################################## */
/* ############################################################################################## */

.modal-content {
  background: linear-gradient(to bottom, rgba(203, 210, 226, 0.7),rgba(203, 210, 226, 1),rgba(203, 210, 226, 0.5) );
}

.dark2 {
  background: linear-gradient(to bottom, rgba(28, 35, 51, 0.9), rgba(28, 35, 51, 1), rgba(28, 35, 51, 0.9)) !important;
}

/* ############################################################################################## */
/* ############################################################################################## */
/* ############################################################################################## */


/* Estilo base para el contenedor */
#summary-content {
  padding: 15px;
  max-height: none;
  overflow: hidden;
}

/* Para móviles */
@media only screen and (max-width: 768px) {
  #summary-content {
    overflow-y: auto; /* Scroll vertical para móviles */
    max-height: 60vh; /* Limitar la altura al 80% de la pantalla */
    padding: 10px; /* Ajustar el padding en móviles */
  }

 
  
}



/* Estilos para pantallas pequeñas */
@media (max-width: 768px) {
    .containerExpr {
        flex: 0 1 100%; /* Tarjetas ocupan el 100% del ancho en pantallas pequeñas */
    }
  /* Estilos para el contenedor de experiencias */
  #experience-list {
      display: flex;
      flex-wrap: wrap; /* Permite que las tarjetas se envuelvan */
      justify-content: center; /* Centra las tarjetas horizontalmente */
  }

  /* Estilo para cada tarjeta */
  .containerExpr {
      margin: 10px; /* Espaciado entre las tarjetas */
      flex: 0 1 calc(33% - 20px); /* Tarjetas ocupan un tercio en pantallas más grandes */
  }
  .glassExpr {
    width: 100px !important;
  }
}