body {
  background: white;
  font-family: "Inter UI", sans-serif;
  margin: 0;
  padding: 20px;
}
.page {
  display: flex;
  flex-direction: column;
  height: calc(100% - 40px);
  position: absolute;
  place-content: center;
  width: calc(100% - 40px);
  z-index: -1;
}

.titulo {
  display: flex;
  flex-direction:row;
  gap: 10px;

}

.fondoder {
  background-color: rgba(186, 164, 92, 0.236);
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  right: 0px;
  min-width: 50%;
  min-height: 50%;
  width: 50%;
  height: 100%;
  z-index: 0;
  overflow: auto;
  padding: 15px;
 }
.fondoizq {
  background-color:rgba(219, 208, 164, 0.238);
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  left: 0px;
  min-width: 50%;
  min-height: 50%;
  width: 50%;
  height: 100%;
  z-index: 0;
  overflow: auto;
  padding: 15px;
}

/* características del acordeon */

.accordion {
  box-sizing: border-box;
  display: flex;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
  width: 100%;
}

.accordion-select {
  cursor: pointer;
  margin: 0;
  opacity: 0;
  z-index: 1;
}

.accordion-title {
  position: relative;
}

.accordion-title:not(:nth-last-child(6))::after {
  border: 1px solid transparent;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.accordion-title span {
  bottom: 0px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  white-space: nowrap;
  width: 100%;
}

.accordion-content {
  box-sizing: border-box;
  overflow: auto;
  position: relative;
  transition: margin 0.3s ease 0.1s;
}

.accordion-select:checked + .accordion-title + .accordion-content {
  margin-bottom: 0;
  margin-right: 0;
}

/* Generated styles starts here */

.accordion {
  border-color: #06502f;
  border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  flex-direction: column;
  height: auto;
  }

.accordion-title,
.accordion-select {
background: #044f35;
background: linear-gradient(51deg,rgba(4, 79, 53, 1) 0%, rgba(16, 102, 25, 1) 85%, rgba(13, 184, 95, 1) 100%);
  color: #ffffff;
  width: 100%;
  height: 65px;
  font-size: 24px;
}

.accordion-select {
  margin-bottom: -65px;
  margin-right: 0;
}

.accordion-title:not(:nth-last-child(2))::after {
  border-bottom-color: #2ab659;
  border-right-color: transparent;
}

.accordion-select:hover + .accordion-title,
.accordion-select:checked + .accordion-title {
  background: #800909;
   transition: background-color 0.5s;
}

.accordion-title span {
  transform: rotate(0deg);
  -ms-writing-mode: lr-tb;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
  padding-left: 33px;
  padding-right: 33px;
  line-height: 65px;
}
/* OJO - EL TAMAÑO DEL DIV DEL CONTENT DEBE TENER PX - DONDE ESTÁ LA ZONA IZQUIERDA Y DERECHA CON LOS MODULOS */
.accordion-content {
  background-color: #ffffff;
  color: #c22439;
  height: 550px;
  margin-bottom: -550px;
  margin-right: 0;
  padding: 15px;
  width: 100%;
}

/* Estilos de los modulos */

ul {
  list-style-type: none; /* Elimina las viñetas de la lista */
  padding: 0; /* Elimina el relleno por defecto */
  margin: 0; /* Elimina el margen por defecto */
}

li {
 
  margin-right: 15px; /* Espacio entre los elementos del menú */
  padding: 14px;
  margin: 8px 0 0 0;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid rgba(228, 189, 13, 0.663);
  color: #000;
  transition: .3s ease;
}

li:last-child {
  margin-right: 0; /* Elimina el margen del último elemento */
}

a {
  text-decoration: none; /* Elimina el subrayado de los enlaces */
  color: #333; /* Color del texto del enlace */
  padding: 10px; /* Relleno para un área de clic más grande */
}

a:hover {
 
  color: #007bff; /* Color del texto al pasar el ratón */
}