body {
  background: #121212; /* Fondo oscuro */
  color: #e0e0e0; /* Texto claro */
  font-family: 'Nunito', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  background-color: #202124; /* Color de fondo para contenedores */
  border-radius: 10px;
  padding: 20px;
  margin: 30px auto;
}

.text-center {
  color: #e0e0e0; /* Texto claro para contenido centrado */
}
/* Alinea el contenido del encabezado */
.header-content {
  display: flex;
  align-items: center;
}
/* Estilo para el logo */
.logo {
  max-height: 200px; /* Altura máxima del logo */
  margin-right: 20px; /* Espacio a la derecha del logo */
}

/* Estilo para el texto del encabezado */
.header-text {
  text-align: left; /* Alinea el texto a la izquierda */
}

/* Estilo para dispositivos móviles (ancho máximo de 768px) */
@media (max-width: 768px) {
  /* Cambia la dirección de flexión a columna */
  .header-content {
    flex-direction: column;
    align-items: center; /* Centra elementos verticalmente */
    text-align: center; /* Centra texto horizontalmente */
  }
  .header-text {
    text-align: center; /* Centra el texto del encabezado */
  }

  /* Ajusta el margen del logo en dispositivos móviles */
  .logo {
    margin-right: 0; /* Sin margen a la derecha */
    margin-bottom: 10px; /* Espacio inferior al logo */
  }
}

.steps-guide, .faq .card {
  background-color: #2a2b2e; /* Fondo ligeramente más claro para secciones internas */
  border: none;
  padding: 20px;
}

.list-group-item {
  background-color: transparent;
  border: none;
  color: #e0e0e0;
  padding: 10px 15px;
}

textarea, select, .btn {
  background-color: #333840; /* Fondo de inputs y botones */
  border: 1px solid #444b54; /* Borde claro para inputs y botones */
  color: #e0e0e0;
  padding: 10px;
}

.btn {
  display: inline-block;
  text-align: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-primary {
  background-color: #4e5dff; /* Azul brillante para el botón primario */
  border-color: #4e5dff;
}

.btn-secondary {
  background-color: #5a6268; /* Gris oscuro para el botón secundario */
  border-color: #5a6268;
}

.btn-primary:hover, .btn-secondary:hover {
  opacity: 0.85;
  transform: translateY(-2px); /* Pequeña elevación al pasar el mouse */
}

#charCount {
  color: #b0b3b8; /* Color más suave para el contador de caracteres */
  font-size: 0.9em;
  text-align: right;
}

/* Personaliza el acordeón para FAQ */
.card {
  border: none;
  background-color: #2a2b2e; /* Fondo de tarjetas de FAQ */
  margin-bottom: 15px;
  border-radius: 10px;
  overflow: hidden;
}

.card-header {
  background-color: #202124; /* Color de fondo para el encabezado de tarjetas */
  border-bottom: 1px solid #3e424d;
}

.card-body {
  background-color: #121212; /* Fondo oscuro para el cuerpo de tarjetas */
  color: #e0e0e0;
}

.btn-link {
  color: #8ab4f8; /* Color claro para enlaces, inspirado en ChatGPT */
  text-decoration: none;
}

.btn-link:hover {
  color: #e0e0e0;
  text-decoration: none;
}

/* Estilo personalizado para SweetAlert */
.swal2-popup {
  font-family: 'Nunito', sans-serif;
  background: #202124;
}

.swal2-title {
  color: #e0e0e0;
  font-size: 24px;
}

.swal2-content {
  color: #adb5bd;
  font-size: 18px;
}

.swal2-confirm {
  background-color: #4e5dff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.swal2-confirm:hover {
  background-color: #3949ab; /* Color oscuro al pasar el mouse */
}

/* Estilo base del modal */
.modal {
  background-color: #202124;
  color: #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.modal-header {
  background-color: #2a2b2e;
  border-bottom: 1px solid #444b54;
  color: #ffffff;
}

.modal-body {
  background-color: #121212; /* Fondo oscuro para el cuerpo del modal */
  color: #e0e0e0; /* Texto claro para una buena legibilidad */
}

.modal-footer {
  background-color: #202124; /* Color de fondo del pie del modal */
  border-top: 1px solid #444b54; /* Borde superior más claro */
}

/* Botones en el modal */
.modal .btn {
  background-color: #333840; /* Color de fondo para los botones del modal */
  border: none; /* Sin bordes para un look más limpio */
  color: #e0e0e0; /* Texto claro */
  padding: 10px 20px; /* Espaciado interno */
  margin-right: 10px; /* Espaciado entre botones */
  border-radius: 5px; /* Bordes redondeados */
  transition: background-color 0.2s, opacity 0.2s; /* Transiciones suaves */
}

.modal .btn:hover {
  opacity: 0.85; /* Efecto al pasar el ratón */
}

.modal .btn-primary {
  background-color: #4e5dff; /* Color primario para botones */
  border-color: #4e5dff; /* Borde del mismo color */
}

.modal .btn-secondary {
  background-color: #5a6268; /* Color secundario para botones */
  border-color: #5a6268; /* Borde del mismo color */
}

/* Responsividad y ajustes para dispositivos móviles */
@media (max-width: 768px) {

  .container {
    border-radius: 0px;
  }
  
  .btn {
    padding: 8px 16px; /* Ajuste de tamaño de botón para pantallas más pequeñas */
    font-size: 14px; /* Tamaño de fuente más pequeño para ajustarse a pantallas más pequeñas */
  }

  .modal .btn {
    margin-bottom: 10px; /* Espaciado adicional para botones apilados */
  }
}

.voice-input {
  background-color: #333840; /* Fondo para el área de entrada de voz */
  /* border-radius: 5px; /* Bordes redondeados */
  margin-bottom: 20px; /* Espacio debajo del área de entrada de voz */
  padding: 15px;
}

.buttons {
  margin-top: 20px; /* Espacio encima de los botones */
  padding: 10px;
}

/* Ajustes para los gráficos de voz si los hubiera */
.voice-graphic {
  background-color: #121212; /* Fondo oscuro para gráficos de voz */
  height: 100px; /* Altura fija para gráficos de voz */
  margin: 20px 0; /* Espaciado vertical para gráficos de voz */
}

/* Estilos para barras de gráficos de voz animados */
.voice-graphic-bar {
  background-color: #4e5dff; /* Color de las barras de gráfico de voz */
  margin: 0 2px; /* Espaciado entre barras */
  animation: pulse 1s infinite ease-in-out; /* Animación definida previamente */
}

/* Asegúrate de que todos los links sean visibles y elegantes */
a, a:hover, a:focus, a:active {
  color: #8ab4f8; /* Color claro para enlaces */
  text-decoration: none; /* Sin subrayado para mantenerlo limpio */
}

/* Estilos para elementos interactivos como botones y enlaces dentro del contenido del cuerpo */
.content a.button, .content a.button:hover {
  display: inline-block;
  background-color: #4e5dff;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.content a.button:hover {
  background-color: #3949ab; /* Oscurecer el color al pasar el ratón */
}