/* =====================================================
   ORGANIGRAMA.CSS - ESTILOS DE ESTRUCTURA ORGANIZACIONAL
   Asociación de Dodgeball Jalisco
   
   TABLA DE CONTENIDOS:
   1. Sección Principal
   2. Header de la Sección
   3. Contenedor del Organigrama
   4. Estructura Jerárquica
      4.1. Niveles
      4.2. Miembros
      4.3. Fotos de Miembros
      4.4. Texto (Cargo y Nombre)
   5. Estilos por Nivel Jerárquico
   6. Leyenda de Colores
   7. Botón de Navegación
   8. Responsive Design
===================================================== */


/* =====================================================
   1. SECCIÓN PRINCIPAL
   Contenedor general con gradiente de fondo
===================================================== */
.organigrama-section {
    padding: 140px 0 60px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--greenlogo) 100%);
    min-height: 100vh;
}


/* =====================================================
   2. HEADER DE LA SECCIÓN
   Título y subtítulo centrados
===================================================== */
.section-header {
    text-align: center;
    margin-bottom: 40px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* ----- Título Principal ----- */
.section-header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

/* ----- Subtítulo ----- */
.section-header .subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
}


/* =====================================================
   3. CONTENEDOR DEL ORGANIGRAMA
   Caja blanca que contiene toda la estructura
===================================================== */
.organigrama-container {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-bottom: 30px;
}


/* =====================================================
   4. ESTRUCTURA JERÁRQUICA
   Sistema de niveles y miembros
===================================================== */

/* ----- Organigrama Principal ----- */
.organigrama {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-height: 700px;
}


/* =====================================================
   4.1. NIVELES
   Filas horizontales que contienen miembros
===================================================== */
.nivel {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 60px;
    position: relative;
}


/* =====================================================
   4.2. MIEMBROS
   Contenedor individual de cada persona
===================================================== */
.miembro {
    text-align: center;
    margin: 0 25px;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Efecto hover - levanta la tarjeta */
.miembro:hover {
    transform: translateY(-5px);
}


/* =====================================================
   4.3. FOTOS DE MIEMBROS
   Contenedor circular con borde de color
===================================================== */

/* ----- Contenedor Circular ----- */
.foto-container {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid;
    margin: 0 auto 15px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* Efecto hover - aumenta borde */
.foto-container:hover {
    border-width: 5px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* ----- Imagen dentro del contenedor ----- */
.foto-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Efecto hover - zoom ligero */
.foto-container img:hover {
    transform: scale(1.05);
}


/* =====================================================
   4.4. TEXTO (CARGO Y NOMBRE)
   Información textual bajo la foto
===================================================== */

/* ----- Cargo ----- */
.cargo {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
    color: var(--dark);
    text-align: center;
}

/* ----- Nombre ----- */
.nombre {
    font-size: 14px;
    color: #555;
    max-width: 160px;
    line-height: 1.4;
    text-align: center;
}


/* =====================================================
   5. ESTILOS POR NIVEL JERÁRQUICO
   Colores específicos para cada nivel
===================================================== */

/* ----- Nivel 1: Presidencia (Verde) ----- */
.nivel-1 .foto-container { 
    border-color: #4CAF50; 
    background: linear-gradient(45deg, #4CAF50, #2E7D32);
}

.nivel-1 .cargo { 
    color: #2E7D32; 
}

/* ----- Nivel 2: Dirección Ejecutiva (Azul) ----- */
.nivel-2 .foto-container { 
    border-color: #2196F3; 
    background: linear-gradient(45deg, #2196F3, #1565C0);
}

.nivel-2 .cargo { 
    color: #1565C0; 
}

/* ----- Nivel 3: Vocales (Naranja) ----- */
.nivel-3 .foto-container { 
    border-color: #FF9800; 
    background: linear-gradient(45deg, #FF9800, #EF6C00);
}

.nivel-3 .cargo { 
    color: #EF6C00; 
}

/* ----- Nivel 4: Comisiones (Morado) ----- */
.nivel-4 .foto-container { 
    border-color: #aa00ff; 
    background: linear-gradient(45deg, #aa00ff, #6a00b8);
}

.nivel-4 .cargo { 
    color: #6a00b8; 
}


/* =====================================================
   6. LEYENDA DE COLORES
   Explicación de los colores por nivel
===================================================== */

/* ----- Contenedor de la Leyenda ----- */
.leyenda {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
}

/* ----- Item Individual de Leyenda ----- */
.leyenda-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ----- Caja de Color ----- */
.color-box {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

/* Colores por categoría */
.presidencia { 
    background-color: #4CAF50; 
}

.direccion { 
    background-color: #2196F3; 
}

.vocales { 
    background-color: #FF9800; 
}

.comisiones { 
    background-color: #8900d3; 
}


/* =====================================================
   7. BOTÓN DE NAVEGACIÓN
   Botón para regresar a la página anterior
===================================================== */

/* ----- Contenedor Centrado ----- */
.btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    width: 100%;
    padding: 20px 0;
}

/* Nota: El estilo del botón se hereda de styles.css (.btn) */


/* =====================================================
   8. RESPONSIVE DESIGN
   Adaptaciones para diferentes tamaños de pantalla
===================================================== */

/* ----- Tablets Grandes (≤992px) ----- */
@media (max-width: 992px) {
    
    /* --- Miembros --- */
    /* Reducir espaciado lateral */
    .miembro {
        margin: 0 15px;
    }
    
    /* --- Fotos --- */
    /* Reducir tamaño de fotos */
    .foto-container {
        width: 110px;
        height: 110px;
    }
    
    /* --- Organigrama --- */
    /* Ajustar altura mínima */
    .organigrama {
        min-height: 600px;
    }
}

/* ----- Tablets y Móviles (≤768px) ----- */
@media (max-width: 768px) {
    
    /* --- Contenedor --- */
    /* Reducir padding */
    .organigrama-container {
        padding: 20px;
    }
    
    /* --- Niveles --- */
    /* Permitir wrapping de elementos */
    .nivel {
        flex-wrap: wrap;
        margin-bottom: 40px;
    }
    
    /* --- Miembros --- */
    /* Configurar ancho como grid de 3 columnas */
    .miembro {
        margin: 10px;
        width: calc(33.333% - 20px);
    }
    
    /* --- Fotos --- */
    /* Reducir aún más el tamaño */
    .foto-container {
        width: 90px;
        height: 90px;
    }
    
    /* --- Texto --- */
    /* Ajustar tamaños de fuente */
    .cargo {
        font-size: 14px;
    }
    
    .nombre {
        font-size: 12px;
    }
    
    /* --- Header --- */
    /* Reducir tamaño del título */
    .section-header h1 {
        font-size: 2rem;
    }
}

/* ----- Móviles Pequeños (≤576px) ----- */
@media (max-width: 576px) {
    
    /* --- Miembros --- */
    /* Cambiar a grid de 2 columnas */
    .miembro {
        width: calc(50% - 20px);
    }
    
    /* --- Fotos --- */
    /* Tamaño mínimo para móviles pequeños */
    .foto-container {
        width: 80px;
        height: 80px;
    }
    
    /* --- Organigrama --- */
    /* Reducir altura mínima */
    .organigrama {
        min-height: 500px;
    }
    
    /* --- Leyenda --- */
    /* Ajustar espaciado */
    .leyenda {
        padding: 15px;
        gap: 15px;
    }
    
    /* --- Sección --- */
    /* Reducir padding superior */
    .organigrama-section {
        padding: 120px 0 40px;
    }
}


/* =====================================================
   FIN DE ORGANIGRAMA.CSS
===================================================== */