body {
  background-image: url("../frontend/imagenes/pexels-pixabay-162118.jpg");
  background-size: cover; /* Ajusta para que cubra toda la pantalla */
  background-position: center center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que se repita */

  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 20px;
  min-height: 100vh;
}

.container3 {
  width: 100%; /* Los contenedores ocupan todo el ancho por defecto */
  max-width: 1000px; /* Limita el ancho máximo */
  margin: 10px;
  padding: 30px;
  background-color: #ffffff;
  border: 5px solid #000000;
  border-radius: 30px;
  box-sizing: border-box;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 5%;
  text-align: center;
}

.container3 h1 {
  background-color: lightblue;
  text-align: center;
}

label.razonSocial {
  font-size: 30px;
  margin-top: 30px;
}

label.reenviar {
  font-size: 30px;
}

#archivoReenvio {
  margin-top: 20px;
  padding: 10px;
  font-size: 20px;
  border: 3px dashed #aaa;
  border-radius: 6px;
  background-color: #fcfcfc;
  color: #333;
  transition: border-color 0.3s ease;
}

#archivoReenvio:hover {
  border-color: #076cf0;
}

.container3 button {
  background-color: rgb(254, 242, 76);
  margin: auto;
  font-size: 30px;
  border-radius: 50px;
  margin-top: 30px;
  width: 50%;
  padding: 10px;
}

button:hover {
  background-color: rgb(122, 251, 83);
}

/* Fuerza el contenedor a tomar el ancho completo, esto es para el select de reenviar correos */
.select2-container {
  width: 100% !important;
}

/* Estilo del área visible del select */
.select2-container--default .select2-selection--single {
  background-color: #f0f8ff !important;
  border: 2px solid #007bff !important;
  border-radius: 6px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  padding-left: 10px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
  font-size: 20px !important;
  margin-top: 20px;
  margin-bottom: 40px;
}

/* Estilo para la caja de búsqueda dentro del dropdown */
.select2-container--default .select2-search--inline .select2-search__field {
  font-size: 18px !important; /* Aumenta el tamaño del texto */
  padding: 10px !important; /* Aumenta el relleno (espacio dentro del input) */
  height: 100px !important; /* Aumenta la altura del campo de búsqueda */
  line-height: 25px !important; /* Ajusta la altura de línea para el texto */
  border: 2px solid #007bff !important; /* Borde azul */
  border-radius: 8px !important; /* Bordes redondeados */
}

/* Estilo cuando el campo de búsqueda está enfocado */
.select2-container--default
  .select2-search--inline
  .select2-search__field:focus {
  border-color: #0056b3 !important; /* Borde más oscuro cuando se enfoca */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5) !important; /* Sombra azul cuando está enfocado */
}

/* Texto del valor seleccionado */
.select2-selection__rendered {
  color: #333 !important;
  font-weight: bold !important;
  line-height: normal !important;
}

/* Flecha del select */
.select2-selection__arrow {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Opciones desplegables */
.select2-results__option {
  padding: 8px 12px !important;
  font-size: 15px !important;
  text-align: center;
}

/* Opción resaltada */
.select2-results__option--highlighted {
  background-color: #007bff !important;
  color: #fff !important;
}

.select2-container--open .select2-selection--single {
  border-color: #0056b3;
  background-color: #e6f0ff;
}

/* Contenedor del dropdown (la lista que aparece al escribir) */
.select2-dropdown {
  background-color: #f4f4f4 !important; /* Color de fondo del dropdown */
  border: 1px solid #ccc !important; /* Borde */
  border-radius: 8px !important; /* Bordes redondeados */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; /* Sombra sutil */
  max-height: 300px !important; /* Altura máxima para que no se expanda demasiado */
  overflow-y: auto !important; /* Habilita el scroll si hay muchas opciones */
  width: 43% !important; /* Hace que se ajuste al ancho del contenedor */
}

/* Estilo de cada opción dentro del dropdown */
.select2-results__option {
  padding: 12px 15px !important; /* Relleno de las opciones */
  font-size: 16px !important; /* Tamaño de la fuente */
  color: #333 !important; /* Color del texto */
}

/* Opción resaltada al pasar el mouse o con el teclado */
.select2-results__option--highlighted {
  background-color: #007bff !important; /* Fondo cuando está seleccionada */
  color: white !important; /* Color de texto cuando está seleccionada */
}

/* Hacer que el texto no se corte si es largo */
.select2-results__option {
  white-space: nowrap !important; /* Evita que el texto se corte */
  overflow: hidden !important;
  text-overflow: ellipsis !important; /* Muestra "..." cuando el texto es largo */
}

/* Media Queries para pantallas más pequeñas */

/* Pantallas de 768px o menos (tabletas y móviles en apaisado) */
@media (max-width: 768px) {
  body {
    flex-direction: column; /* Los contenedores se apilan verticalmente */
    justify-content: flex-start;
  }

  .container3 {
    width: 90%; /* Ocupan el 90% del ancho de la pantalla */
    margin: 10px 0;
  }

  #fileInput {
    width: 100%;
    margin-left: 0;
    font-size: 20px;
  }

  button {
    width: 80%;
    font-size: 25px;
    margin-left: 10%;
  }

  .email {
    font-size: 22px;
    margin-left: 10px;
  }
}

/* Pantallas de 480px o menos (móviles pequeños) */
@media (max-width: 480px) {
  body {
    flex-direction: column; /* Los contenedores se apilan verticalmente */
  }

  .container3 {
    width: 95%; /* Ocupan el 95% del ancho de la pantalla */
    margin: 5px 0;
  }

  #fileInput {
    width: 100%;
    font-size: 18px;
  }

  button {
    width: 90%;
    font-size: 22px;
  }

  .email {
    font-size: 20px;
  }
}

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.success {
  color: green;
}
.error {
  color: red;
}

.success {
  color: green;
  font-size: 30px; /* Aumenta el tamaño del texto */
  font-weight: bold;
}