.section-funcionalidades {
    background-color: white;
    padding-bottom: 2em;
    padding-left: 2em;
    padding-right: 2em;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: none;
    width: 100%;

}
.section-funcionalidades.active {
    display: block;
}
.results {
    margin-top: 2em;
    padding: 1em;
    background-color: #e0f7fa;
    border-radius: 8px;
}
.results h3 {
    color: #00796b;
}
.card {
    border-radius: 8px;
    padding: 1em;
    margin: 1em;
    cursor: pointer;
    transition: background-color 0.3s;
    width: calc(max(250px, 25% - 2em));
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    background-color: #fff;
}
.card:hover {
    background-color: #f0f0f0;
}
.card-title {
    font-size: 1.2em;
    color: #4CAF50;
}
.card-percentage {
    font-size: 1em;
    color: #333;
    font-weight: bold;
}
.card-details {
    display: none;
}
.details-container {
    display: none;
    margin-top: 2em;
    padding: 1em;
    background-color: #e0f7fa;
    border-radius: 8px;
}
.details-container h3 {
    color: #00796b;
}
.details-container-relaciones {
    display: none;
    margin-top: 2em;
    padding: 1em;
    background-color: #e0f7fa;
    border-radius: 8px;
}
.details-container-relaciones h3 {
    color: #00796b;
}
.success-100 {
    background-color: #c8e6c9;
}
.success-85 {
    background-color: #dcedc8;
}
.success-30 {
    background-color: #fff9c4;
}
.success-10 {
    background-color: #ffe0b2;
}
.success-90 {
    background-color: #c8e6c9;
}
.success-70 {
    background-color: #dcedc8;
}
.success-50 {
    background-color: #fff9c4;
}
.success-20 {
    background-color: #ffe0b2;
}
.favorite-button {
    background-color: #4CAF50;
    color: white;
    padding: 0.5em 1em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 1em;
}
.favorite-button:hover {
    background-color: #45a049;
}
#save-icon {
    fill: grey;
    transition: fill 0.3s ease;
}
#save-icon.saved {
    fill: #D04CCC; /* Cambia el color para indicar que está guardado */
}





/* Estilos para el modo oscuro */
body.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

body.dark-mode header {
    background-color: #1e1e1e;
    color: #ffffff;
}

body.dark-mode nav {
    background-color: #333;
}

body.dark-mode nav a {
    color: #ffffff;
}

body.dark-mode nav a:hover {
    background-color: #555;
    color: #ffffff;
}

body.dark-mode .section-funcionalidades {
    background-color: #1e1e1e;
    box-shadow: 0 0 10px rgba(255,255,255,0.1);
}

body.dark-mode .results {
    background-color: #263238;
}

body.dark-mode .results h3 {
    color: #4dd0e1;
}

body.dark-mode .card {
    background-color: #1e1e1e;
    color: #ffffff;
}

body.dark-mode .card:hover {
    background-color: #333;
}

body.dark-mode .card-title {
    color: #4CAF50;
}

body.dark-mode .card-percentage {
    color: #ffffff;
}

body.dark-mode .details-container,
body.dark-mode .details-container-relaciones {
    background-color: #263238;
}

body.dark-mode .details-container h3,
body.dark-mode .details-container-relaciones h3 {
    color: #4dd0e1;
}

body.dark-mode .success-100,
body.dark-mode .success-90,
body.dark-mode .success-85,
body.dark-mode .success-70,
body.dark-mode .success-50,
body.dark-mode .success-30,
body.dark-mode .success-20,
body.dark-mode .success-10 {
    color: #ffffff;
}

body.dark-mode .favorite-button {
    background-color: #4CAF50;
    color: #ffffff;
}

body.dark-mode .favorite-button:hover {
    background-color: #45a049;
}

body.dark-mode #save-icon.saved {
    fill: green;
}







 /* Barra de progreso */
  #progress-bar {
    width: 100%;
    background-color: #ddd;
    height: 20px;
    border-radius: 10px;
    margin-bottom: 1em;
  }
  #progress {
    height: 100%;
    background-color: #4CAF50;
    border-radius: 10px;
    transition: width 0.3s ease;
  }

  /* Media queries para hacer el diseño responsive */
  @media (max-width: 768px) {
    .container {
      padding: 1em;
    }
    
    .section-funcionalidades {
      padding: 1em;
    }
    
    .card {
      width: 100%;
    }
  }

.container-formulario {
    padding: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

#pasos-formulario {
    display: flex;
    justify-content: center;
    background-color: #333;
  }
  #pasos-formulario a {
    color: white;
    padding: 1em;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
  }
  #pasos-formulario a:hover {
    background-color: #ddd;
    color: black;
  }