/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

/* .wrapper {
  position: fixed;
  bottom: 50px;
  right: -370px;
  max-width: 345px;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 15px 25px 22px;
  transition: right 0.3s ease;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  z-index: 20;
} */
 .wrapper{
  position: fixed;
    bottom: 0px;
    right: -1972px;
    background-color: #2a2a2a;
    color: #fff;
    /* transition: opacity 0.3s ease; */
    transition: right 0.3s ease;
    z-index: 20;
    color: white;
    max-height: 270px;
    width: 100%;
    display: none;
 }
.wrapper.show {
  right: 0px;
  display: block;
}
.wrapper header {
  /* display: flex;
  align-items: center;
  column-gap: 15px; */
  padding: 0px 300px 00px 300px;
  margin-top: 25px;
}
header i {
  color: #ffffff;
  font-size: 32px;
}
header h2 {
  color: #ffffff;
  font-weight: 500;
  text-transform: uppercase;
    font-size: 1.3rem;
    letter-spacing: 1px;
}
.wrapper .data {
  margin-top: 16px;
  padding: 0px 300px 00px 300px;
}
.wrapper .data p {
  color: #333;
  font-size: 16px;
}
.data p a {
  color: #4070f4;
  text-decoration: none;
}
.data p a:hover {
  text-decoration: underline;
}
.wrapper .buttons {
  margin-top: 30px;
  margin-left: 300px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.buttons .button {
  border: none;
  color: #fff;
  padding: 8px 0;
  border-radius: 4px;
  background: #4070f4;
  cursor: pointer;
  width: calc(20% / 2 - 10px);
  transition: all 0.2s ease;
  margin: 5px;
}
.buttons #acceptBtn:hover {
  background-color: #034bf1;
}
#declineBtn {
  border: 2px solid #4070f4;
  background-color: #fff;
  color: #4070f4;
}
#declineBtn:hover {
  background-color: #4070f4;
  color: #fff;
}

.buttons-custom{
  margin-top: 10px;
}

.buttons-custom button{
  width: 25% !important;
}

/*Estilos para el modal*/
.modal {
  display: none; /* Ocultar el modal por defecto */
  position: fixed;
  top: 60%;
  left: 75%;
  transform: translate(-50%, -50%);
  /* background-color: rgba(0, 0, 0, 0.5); */
  z-index: 9999; /* Asegurar que el modal esté por encima de otros elementos */
  transition: opacity 0.3s ease; /* Añadir una transición de opacidad */
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  position: relative;
  width: 50%;
}

.modal-content h2{
  text-align: center;
  margin-bottom: 10px;
  color: gray;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

/* Añadir estilos para los botones dentro del modal si es necesario */

/* Mostrar el modal cuando está abierto */
.modal.show {
  display: block;
  opacity: 1; /* Hacer el modal completamente visible */
}
/*End estilos del modal*/


/*togglea*/
.switch {
  --secondary-container: #3a4b39;
  --primary: #84da89;
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.7em;
  height: 1.8em;
 }
 
 .switch input {
  display: none;
  opacity: 0;
  width: 0;
  height: 0;
 }
 
 .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #313033;
  transition: .2s;
  border-radius: 30px;
 }
 
 .slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.2em;
  bottom: 0.2em;
  background-color: #aeaaae;
  transition: .4s;
 }
 
 input:checked + .slider::before {
  background-color: var(--primary);
 }
 
 input:checked + .slider {
  background-color: var(--secondary-container);
 }
 
 input:focus + .slider {
  box-shadow: 0 0 1px var(--secondary-container);
 }
 
 input:checked + .slider:before {
  transform: translateX(1.9em);
 }
/*end toggle*/



/* Menu de acordeon */
@charset "utf-8";
.accordion {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: auto;
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid #dedede;
  border-radius: 8px;
  margin:0 auto;
} 
/*Contenedor común plegar/desplegar*/
.accordion-toggle,
.accordion-header{
  font-size: 15px;
  width: 100%;
  height: 3em;
  margin: 0;
  line-height: 3em;
  cursor: pointer;
}
/*El botón que pliega/despliega*/
.accordion-toggle {
  opacity: 0;
  background-color: transparent;
  z-index: 1;
  margin-bottom: 2px;
}
/*Bloque para el título*/
.accordion-header{
  background-color: #ffffff;
  color: #7f8787;
  position: relative;
  margin-top: -3em;
  padding-left: 10px
}

/*Bloque replegable con el contenido */
.accordion-content {
  box-sizing: border-box;
  background-color: #f7f7f7;
  color: #7f8787;
  overflow: auto;
  position: relative;
  width: 100%;
  height: 250px;
  margin-bottom: -250px;
  padding: 0 20px;
  transition: margin 0.3s ease 0.1s;
  }
.accordion-toggle:checked + .accordion-header + .accordion-content {
  margin-bottom: 0;
  margin-right: 0;
}
.accordion-header::before,
.accordion-toggle:checked + .accordion-header::before {
  content: '+';
  display: inline-block;
  text-align: center;
  width: 1em;
  font-size: 1.em;
}
.accordion-toggle:checked + .accordion-header::before {
  content:'-';
}

.accordion-toggle:hover + .accordion-header{
  background-color: #f7f1f1;
}
.accordion-toggle:checked + .accordion-header {
  background-color: #fff;
} 
/* end menu de acordeon */

/* conten-toggle */
.conten-toggle{
  text-align: start;
  padding-top: 20px;
}
/* end conten-toggle */

/* zona responsive */
/* Para dispositivos con un ancho máximo de 480px (teléfonos) */
@media only screen and (max-width: 480px) {
  /* Estilos específicos para dispositivos móviles */
  .modal{
    width: 100%;
  }

  .wrapper {
    max-height: 570px;
}
  .wrapper header {
    padding: 0px 100px 0px 100px;
}

.wrapper .data {
  margin-top: 16px;
  padding: 0px 50px 0px 50px;
  text-align: justify;
}

.buttons .button {
  width: calc(50% / 2 - 10px);
}

.wrapper .buttons {
  margin-left: 30px;
}
}

/* Para dispositivos con un ancho mínimo de 768px (tabletas en modo vertical) */
@media only screen and (min-width: 768px) {
  /* Estilos específicos para tabletas en modo vertical */
}

/* Para dispositivos con un ancho mínimo de 768px y máximo de 1024px (tabletas en modo horizontal) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* Estilos específicos para tabletas en modo horizontal */
  .modal{
    top: 70%;
  }

  .modal-content{
    width: 50%;
  }
}

/* Para dispositivos con un ancho mínimo de 1024px (escritorio) */
@media only screen and (min-width: 1024px) {
  /* Estilos específicos para dispositivos de escritorio */
  .modal-content{
    width: 35%;
  }
  .modal{
    left: 82%;
  }
}

/* @media only screen and (min-width: 1400px){
  .wrapper{
    max-height: 270px;
   }
} */
/* Para dispositivos en modo retrato (altura mayor que el ancho) */
@media only screen and (orientation: portrait) {
  /* Estilos específicos para dispositivos en modo retrato */
}

/* Para dispositivos en modo paisaje (ancho mayor que la altura) */
@media only screen and (orientation: landscape) {
  /* Estilos específicos para dispositivos en modo paisaje */
}
/* Para dispositivos con una densidad de píxeles (DPI) de al menos 2x */
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (min-resolution: 192dpi) {
  /* Estilos específicos para dispositivos con alta resolución */
}

/* end zona responsive */


/* Large screens */
@media (min-width: 1200px) {
  .wrapper {
      right: -1972px;
      width: 100%; /* Adjust as needed */
      max-width: 100%; /* Adjust as needed */
      padding: 20px;
      max-height: 358px;
  }
}

/* Medium screens */
@media (min-width: 768px) and (max-width: 1199px) {
  .wrapper {
      right: -1972px;
      width: 100%; /* Adjust as needed */
      max-width: 1300px; /* Adjust as needed */
      padding: 15px;
      max-height: 470px;
  }

  .wrapper .data {
    margin-top: 16px;
    padding: 0px 200px 0px 200px;
    text-align: justify;
}

.wrapper header {
  padding: 0px 200px 0px 200px;
  margin-top: 25px;
}

.wrapper .buttons {
  margin-left: 200px;
}

.buttons .button {
  width: calc(30% / 2 - 10px);
}

}