/* ================================================= */
/* 1. ESTILOS BASE DEL CONTENEDOR Y TÍTULOS */
/* ================================================= */

.organigrama-container {
    font-family: Arial, sans-serif;
    padding: 20px;
    text-align: center;
}
/* ================================================= */
/* ESTILO PARA EL TÍTULO PRINCIPAL DE LA SECCIÓN (EQUIPO DIRECTIVO) */
/* ================================================= */

.section-header-title {
    color: #007aa3; /* Azul corporativo */
    font-size: 2.8em; /* Tamaño grande */
    font-weight: 700;
    text-transform: uppercase; 
    margin: 40px 0 10px 0;
    padding-bottom: 15px;
    display: block; /* Asegura que la línea abarque todo el ancho del contenedor */
    text-align: left; /* Alineado a la izquierda */
}

/* Línea de énfasis azul debajo del título */
.section-header-title::after {
    content: '';
    display: block;
    width: 200px; /* Ancho de la línea como se ve en la imagen */
    height: 3px;
    background-color: #007aa3; /* Color azul de la línea */
    margin-top: 5px;
}
/* ================================================= */
/* 1. ESTILOS BASE DEL CONTENEDOR Y TÍTULOS MEJORADOS */
/* ================================================= */

.organigrama-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente moderna */
    padding: 20px;
    text-align: center;
    background-color: #f7f9fc; /* Fondo claro para dar contraste */
}

/* Estilo para "Estructura Directiva" */
.section-title {
    color: #007aa3; /* Azul oscuro corporativo */
    font-size: 2.5em; /* Más grande */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-bottom: 10px;
    border-bottom: 3px solid #007bff; /* Línea inferior para énfasis */
    display: inline-block; /* Ajusta la línea al ancho del texto */
    margin-bottom: 10px;
}

/* Estilo para "Liderazgo y experiencia..." */
.section-subtitle {
    color: #5a6275; /* Gris suave */
    margin-bottom: 40px;
    font-size: 1.2em;
    font-style: italic;
    font-weight: 300;
}

/* Estilo para los nombres dentro de las tarjetas (ej: Ing. José de Jesús Flores Aldana) */
.role-title {
    font-size: 1.4em; /* Más prominente */
    font-weight: 600;
    color: #1a1a1a; /* Casi negro */
    margin: 5px 0 2px 0; /* Menos espacio abajo */
}

/* Estilo para el cargo (ej: DIRECTOR GENERAL) */
.cargo {
    font-size: 0.95em;
    color: #e040fb; /* Un color de acento vibrante (ej. púrpura/magenta) */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

/* --- (El resto del CSS, como las tarjetas y el árbol, se mantiene) --- */

/* ================================================= */
/* 2. ESTILOS DE LAS TARJETAS (NODOS) - MEJORADO CON ICONOS */
/* ================================================= */

.directivo-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    width: 210px;
    margin: 10px;
    padding: 20px 15px; 
    display: inline-block;
    vertical-align: top;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.directivo-card:hover {
    transform: translateY(-8px); 
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

/* ❌ ELIMINAR ESTILOS VIEJOS DE IMAGEN (SI EXISTEN): 
.directivo-card img { ... } */


/* 🟢 ESTILOS PARA EL CONTENEDOR CIRCULAR DEL ICONO (El círculo azul) */
.card-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: #e0f7fa; /* Fondo azul muy claro */
    border: 4px solid #007bff; /* Borde azul brillante */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px auto; /* Centra el icono y le da espacio */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 🟢 ESTILOS PARA EL ICONO DENTRO DEL CÍRCULO */
.card-icon i {
    font-size: 40px;
    color: #007bff; /* Color del icono */
}


/* Estilo especial para la tarjeta principal (Director General) */
.main-director > .directivo-card {
    border: 3px solid #004d99; /* Borde más grueso y oscuro */
    box-shadow: 0 10px 25px rgba(0, 77, 153, 0.3);
}

/* Estilo especial para el ICONO del Director General */
.main-director .card-icon {
    background-color: #cceeff; /* Fondo azul más sólido */
    border-color: #004d99; /* Borde azul oscuro */
}

.main-director .card-icon i {
    color: #004d99; /* Icono azul oscuro */
}

/* ------------------- (El resto del CSS se mantiene) ------------------- */

/* ================================================= */
/* 3. ESTILOS DEL ÁRBOL JERÁRQUICO (LAS LÍNEAS) */
/* ================================================= */

/* Reseteo básico de listas para el organigrama */
.org-tree, .org-children {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Flexbox para centrar y alinear los hijos */
    justify-content: center;
    position: relative;
    width: 100%;
}

/* Los elementos de la lista (li) son los contenedores de los nodos */
.org-children li {
    padding-top: 50px; /* Espacio para la línea vertical de conexión */
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
}

/* Línea Vertical que conecta el nodo padre con la línea horizontal de los hijos */
.org-children li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 2px solid #ccc;
    height: 45px; /* Altura de la línea vertical */
    transform: translateX(-50%);
}

/* Línea Horizontal que une a los hermanos (los nodos hijos) */
.org-children:not(.lower-management)::before {
    content: '';
    position: absolute;
    top: 45px; /* A la altura donde termina la línea vertical */
    left: 0;
    right: 0;
    border-top: 2px solid #ccc;
    z-index: -1; /* Manda la línea detrás de las tarjetas */
}

/* Ocultar la línea horizontal si solo hay un hijo (para evitar líneas innecesarias) */
.org-children li:only-child::before,
.org-children li:only-child::after {
    border: none;
}

/* El nodo que contiene la tarjeta */
.org-node {
    display: block;
    text-align: center;
}

/* Estilo especial para la tarjeta principal (Director General) */
.main-director > .directivo-card {
    border: 2px solid #004d99; /* Borde más distintivo */
    box-shadow: 0 8px 16px rgba(0, 77, 153, 0.2);
}

/* Ajuste para el grupo de Subdirectores (Hijos) que tienen subordinados */
.subdirectores-grupo {
    display: flex; /* Asegura que los dos hijos estén uno al lado del otro */
    justify-content: center;
    flex-wrap: wrap; /* Permite que las tarjetas se envuelvan si es necesario */
}

.subdirectores-grupo > .directivo-card {
    margin: 10px 20px; /* Separa un poco más a los dos hermanos */
}

/* Ajuste para la conexión de los subordinados del nivel 3 (Gerencia) */
.lower-management {
    padding-top: 50px;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    position: relative;
}

.lower-management::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 2px solid #ccc;
    height: 20px;
    transform: translateX(-50%);
}