/* ==========================================================================
   ESTILOS DEDICADOS A LA VISTA DE VOLÚMENES Y RECURSOS
   ========================================================================== */
 /*color medidas y tamaños de los botones del baner*/
.btn-vol-switch {
  background-color: #ffffff;

  border-radius: 5px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, background-color 0.2s ease;
  width: 80px;
  height: 50px;
}
.btn-vol-switch span{
    color: var(--color-guinda);
}


.btn-vol-switch.is-prev svg {
  transform: rotate(180deg);
}

.page-volumen-3 svg::after, .page-volumen-1 svg {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 16 16'%3E%3Cpath d='M5 1.5 L11.5 8 L5 14.5' fill='none' stroke='%23808080' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    display: inline-block;
    fill: #808080;
}

/* 3. Estructura interna de la vista de volúmenes */
.vol-row {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-start;
}

.vol-col-recursos {
  flex: 1;
  min-width: 280px;
}

.vol-col-volver {
  text-align: center;
}

.btn-volver-icon
{
  justify-content: center;
}
/* Invierte el SVG horizontalmente solo en el botón que tú decidas */


.vol-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  .vol-grid-2x2 {
    grid-template-columns: 1fr !important;
  }
  .vol-row {
    flex-direction: column;
  }
  .vol-col-volver {
    width: 100%;

  }
}

/* 4. Hovers específicos por Volumen */
.page-volumen-1 .card-recurso:hover,
.page-volumen-1 .btn-vol-switch.page-volumen-1:hover {
  background: linear-gradient(to top,var(--color-volumen-1),#A8E720) !important;
  color: #ffffff !important;
  transform: translateY(-4px);
}

.page-volumen-2 .card-recurso:hover,
.page-volumen-2 .btn-vol-switch.page-volumen-2:hover {
  background: linear-gradient(to top,var(--color-volumen-2),#F69208) !important;
  color: #ffffff !important;
  transform: translateY(-4px);
}

.page-volumen-3 .card-recurso:hover,
.page-volumen-3 .btn-vol-switch.page-volumen-3:hover {
  background: linear-gradient(to top,var(--color-volumen-3),#FFF200) !important;
  color: #ffffff !important;
  transform: translateY(-4px);
}

.dropdown-item.hover-vol-1:hover {
  background-color: var(--color-volumen-1) !important;
  color: #ffffff !important;
}

.dropdown-item.hover-vol-2:hover {
  background-color: var(--color-volumen-2) !important;
  color: #ffffff !important;
}

.dropdown-item.hover-vol-3:hover {
  background-color: var(--color-volumen-3) !important;
  color: #212529 !important;
}


/* ==========================================
   ACORDEÓN DE MÓDULOS Y BUSCADOR
   ========================================== */


/* Acordeón de Módulos */
.modulos-accordion-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 100%;
  margin: 0 auto;
}

.modulo-item {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Encabezado del Acordeón (Botón) */
.modulo-header {
  width: 100%;
  background-color: var(--color-guinda); /* Guinda institucional base */
  color: #ffffff;
  border: none;
  padding: 18px 25px;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
}

.modulo-title {
  font-size: 1.5rem;
  font-weight: 800;
}

.modulo-subtitle {
  font-size: 0.95rem;
  font-weight: 400;
  opacity: 0.9;
}

/* Contenido colapsable (Acordeón oculto por defecto) */
.modulo-content {
  max-height: 0;
  overflow: hidden;
  background-color: #ffffff;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
}

.modulo-item.active .modulo-content {
  max-height: 1000px; /* Expande el acordeón */
  transition: max-height 0.3s ease-in-out;
}

/* ==========================================
   HOVER DINÁMICO POR VOLUMEN
   ========================================== */

/* Volumen 1 - Hover Verde */
.page-volumen-1 .modulo-header:hover {
  background-color: var(--color-volumen-1) !important; /* Verde */
  color: #ffffff;
}

/* Volumen 2 - Hover Naranja */
.page-volumen-2 .modulo-header:hover {
  background-color: var(--color-volumen-2) !important; /* Naranja */
  color: #ffffff;
}

/* Volumen 3 - Hover Amarillo */
.page-volumen-3 .modulo-header:hover {
  background-color: var(--color-volumen-3) !important; /* Amarillo */
  color: #212529 !important; /* Texto oscuro para legibilidad sobre amarillo */
}




.modulo-item {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.modulo-header {
  width: 100%;
  color: #ffffff;
  border: none;
  padding: 18px 25px;
  border-radius: 16px;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.1s ease;
  display: flex;
  align-items: center;
}

.modulo-title {
  font-size: 1.4rem;
  font-weight: 800;
}

.modulo-subtitle {
  font-size: 0.9rem;
  font-weight: 400;
  opacity: 0.9;
}

/* Colores exactos de los prototipos para cada módulo */
.modulo-header.mod-1 {
  background-color: #9c1c54; /* Tono guinda más vivo para Módulo 1[cite: 2] */
}

.modulo-header.mod-2 {
  background-color: #7d1242; /* Tono guinda intermedio para Módulo 2[cite: 2] */
}

.modulo-header.mod-3 {
  background-color: #55092a; /* Tono guinda más oscuro para Módulo 3[cite: 2] */
}

/* Efecto hover al pasar el mouse */
.modulo-header:hover {
  filter: brightness(1.1);
}

/* Contenido desplegable */
.modulo-content {
  max-height: 0;
  overflow: hidden;
  background-color: #ffffff;
  transition: max-height 0.35s cubic-bezier(0, 1, 0, 1);
}

.modulo-item.active .modulo-content {
  max-height: 1500px;
  transition: max-height 0.35s ease-in-out;
}


/* ==========================================
   ESTILOS PARA LA CUADRÍCULA DE SESIONES
   ========================================== */

/* Contenedor en cuadrícula para las tarjetas de sesiones */
.sesiones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
  padding: 20px;
  background-color: #ffffff;
}

/* Estilo individual de cada tarjeta de sesión (el cuadrito gris) */
.sesion-card {
  background-color: #b0b0b0; /* Color gris de tus prototipos */
  color: #222222;
  padding: 15px;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 90px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* transition: background-color 0.2s ease, transform 0.1s ease; */
}


/* Título de la sesión dentro de la tarjeta */
.sesion-titulo {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: #111111;
  line-height: 1.2;
}

/* Texto de acción ("Descargar Presentación") */
.sesion-accion {
  font-size: 0.78rem;
  color: #333333;
  font-weight: 400;
}