@charset "utf-8";
/* CSS Document */
/* Acordeon gemini horizontal*/
.acordeon-horizontal {
  width: 96%;
  margin: 0px auto;
  border: 1px solid #ccc;
}

.tabs-horizontal {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* Disposición horizontal por defecto */
  border-bottom: 1px solid #ccc;
  }

.tab-horizontal {
  padding: 10px 15px;
  cursor: pointer;
  color: white;
  background-color:#ac1444; /* ref w3-theme-d2 */
  z-index: 10!important;
  border-right: 1px solid #ccc;
  /* Para que ocupe todo el ancho en modo vertical */
  width: 100%;
  box-sizing: border-box; /* Incluir padding y border en el ancho */
}

.tab-horizontal:last-child {
  border-right: none;
  /* Eliminar el borde inferior en modo vertical para el último tab */
  border-bottom: none;
}

.tab-horizontal.active {
  /*background-color:#e83d74;*/ /* ref w3-theme-l1  */
  background-color:#2c3e50; /* ref w3-flat-midnight-blue */
}

.tab-horizontal:hover {
  background-color:rgba(44,62,80,1);
}

.contenido-horizontal {
  display: none;
  width: 100%; /* Ocupa todo el ancho del acordeón */
}

.contenido-horizontal.active {
  display: block;
  padding: 15px;
}

.contenido-inner {
  width: 92%; /* Para dejar un margen interno si se desea */
  margin: 0 auto;
}

.contenido-inner img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}
/* BOTON CONTRAER horizontales */
.contraer-horizontal {
  display: block;
  margin: 12px auto;
  padding: 3px 10px;
  cursor: pointer;
  background-color: #6b0d2b; /* ref w3-theme-d5  */ 
  font-size: 0.8em; /* Tamaño de la fuente */
  color: white;
  border: none;
  border-radius: 5px;
}


/* COMIENZA VERTICAL */
.acordeon-vertical-desplegable {
  width: 80%;
  margin: 15px auto;
  border: 1px solid #ccc;
}

.tab-vertical-desplegable {
  border-bottom: 1px solid #ccc;
}

.tab-vertical-desplegable:last-child {
  border-bottom: none;
}

.tab-button-vertical {
  display: block;
  width: 100%;
  padding: 10px 15px;
  cursor: pointer;
  color: white;
  background-color:#ac1444; /* ref w3-theme-d2  */
  z-index: 2000!important;
  border: none;
  text-align: center;
}

.tab-button-vertical.active {
  background-color:#2c3e50; /* ref w3-flat-midnight-blue */
}
.tab-button-vertical:hover {
  background-color:rgba(44,62,80,1); 
}

/* Ocultar todos los contenedores de contenido por su clase */
.contenido-vertical-desplegable {
  display: none;
  overflow: hidden; /* Para transiciones de altura */
}

/* Mostrar el contenedor activo por su clase */
.contenido-vertical-desplegable.active {
  display: block;
  padding: 15px;
}

/*.contenido-vertical-desplegable .contenido-inner {
  width: 90%;
  margin: 0 auto;
  background-image: url(../graficos/fondo_webpb.png)!important;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size:cover;
}*/

.contenido-vertical-desplegable .contenido-inner {
  width: 100%;
  margin: 0 auto;
  position: relative; /* Necesario para posicionar el pseudo-elemento */
  /* Eliminar la imagen de fondo del elemento principal */
  background-color: transparent; /* O cualquier otro color de fondo si lo necesitas */
}

.contenido-vertical-desplegable .contenido-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../graficos/fondo_webpb.png)!important;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  opacity: 0.4; /* Ajusta el valor de opacidad (0 a 1) */
  z-index: -1; /* Colocar el pseudo-elemento detrás del contenido */
}

.contenido-vertical-desplegable .contenido-inner img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}
/* BOTON CONTRAER VERTICAL */
.contraer-vertical-desplegable {
  display: block;
  margin: 12px auto;
  padding: 3px 10px;
  cursor: pointer;
   background-color: #6b0d2b; /* ref w3-theme-d5  */ 
  font-size: 0.8em; /* Tamaño de la fuente */
  color: white;
  border: none;
  border-radius: 5px;
}




/* Media Query para pantallas más pequeñas (ejemplo: hasta 768px de ancho) */
@media (max-width: 660px) {
  .tabs-horizontal {
    display: block; /* Cambiar a disposición vertical */
    border-bottom: none; /* Eliminar el borde inferior en modo vertical */
	z-index: 2000!important;
  }

  .tab-horizontal {
    border-right: none; /* Eliminar el borde derecho en modo vertical */
    border-bottom: 1px solid #ccc; /* Añadir borde inferior entre tabs */
	z-index: 2000!important;
  }

  .tab-horizontal:last-child {
    border-bottom: none; /* Asegurar que el último tab no tenga borde inferior doble */
  }
  
  
  
}