/* junta-directiva.css - Estilos específicos para la página Junta Directiva */
/* Sección principal Junta Directiva */
.junta-directiva-section {
  padding: 20px;
  background-color: #f9f9f9; /* Fondo ligero para la sección */
}

.junta-directiva-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex; /* Usar Flexbox para el layout de lista y vista dinámica */
  gap: 20px;      /* Espacio entre la lista y la vista dinámica */
}

/* Listado de Cargos (Lado Izquierdo) */
.junta-directiva-listado {
  width: 300px; /* Ancho fijo para la lista de cargos */
  padding: 20px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.titulo-junta-directiva {
  font-size: 1.8em;
  margin-bottom: 15px;
  color: #0249aa; /* Azul principal del header */
  text-align: center;
}

.lista-cargos {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lista-cargos li {
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  cursor: pointer; /* Cursor de "mano" al pasar por encima */
  transition: background-color 0.2s ease-in-out; /* Transición suave al hacer hover */
}

.lista-cargos li:last-child {
  border-bottom: none; /* Quitar borde inferior del último item */
}

.lista-cargos li:hover,
.lista-cargos li.active {
  background-color: #e0e0e0; /* Fondo gris claro al hacer hover o estar activo */
  font-weight: bold;
}

.lista-cargos li.active {
  background-color: #35a9aa; /* Azul-verde "activo" de la navegación secundaria */
  color: white;
}


/* =========================
   VISTA DINÁMICA (diseño nuevo)
   ========================= */
   .junta-directiva-vista-dinamica {
    flex: 1; 
    padding: 20px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  
  /* 
     .miembro-detalle en Grid:
     - Fila 1: Foto => spanea 2 columnas
     - Fila 2: Nombre => spanea 2 columnas
     - Fila 3: 2 columnas (izq = datos, der = descripción)
  */
  .miembro-detalle {
    display: grid;
    grid-template-columns: 30% 70%;
    grid-template-rows: auto auto auto; /* 3 filas en total */
    grid-gap: 20px;
  }
  
  /* -------- Fila 1: Foto (spanea 2 columnas) -------- */
  .miembro-foto-container {
    grid-column: 1 / 3; /* Ocupar ambas columnas */
    text-align: center; /* Centrar la foto */
  }
  
  .miembro-foto {
    width: 350px;
    height: 350px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    margin-bottom: 10px;
  }
  
  /* -------- Fila 2: Nombre (spanea 2 columnas) -------- */
  .miembro-nombre-container {
    grid-column: 1 / 3; /* Ocupar ambas columnas */
    text-align: center; 
  }
  
  .miembro-nombre {
    font-size: 1.6em;
    margin: 0; 
    color: #333;
  }
  
  /* -------- Fila 3: 2 columnas => 
       Izq: Cargo, Ubicación, Celular
       Der: Descripción
     --------------------------------- */
  .miembro-datos-container {
    background-color: #fafafa;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    /* Se ubica en columna 1 por defecto */
  }
  
  .miembro-dato {
    margin-bottom: 10px;
    font-size: 0.95em;
    color: #555;
  }
  .miembro-dato strong {
    color: #333;
  }
  
  /* Descripción en la columna 2 de la fila 3 */
  .miembro-descripcion {
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    color: #333;
    line-height: 1.5;
  }
  
  .miembro-descripcion p {
    margin-bottom: 1em;
    text-align: justify; /* Alinear párrafos en justificado */ 
  }
  
  /* =========================
     AJUSTES RESPONSIVOS (opcional)
     ========================= */
  @media (max-width: 768px) {
    .miembro-detalle {
      grid-template-columns: 1fr; /* 1 columna en pantallas pequeñas */
      grid-template-rows: auto auto auto auto; /* 4 filas */
    }
  
    /* Fila 1: Foto => sigue spaneando, pero no hace falta */
    .miembro-foto-container, 
    .miembro-nombre-container {
      grid-column: 1; 
    }
  
    /* Tercera fila (datos) => pasa a la fila 3 */
    .miembro-datos-container {
      grid-column: 1; 
    }
  
    /* Descripción => pasa a la fila 4 */
    .miembro-descripcion {
      grid-column: 1;
    }
  }

.miembro-info {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.miembro-info.show {
    opacity: 1;
}