/* --- BASE ORGANIGRAMA --- */
.masisa-organigrama-wrapper { width: 100%; padding: 40px 0; overflow: visible; }
.org-tree { display: flex; width: 100%; }

.estilo-vertical .org-tree { display: flex; flex-direction: column; width: 100%; align-items: center; }
/* 1. Ajuste de la Fila (Row): Centramos el contenido pero dejamos que crezca */
.estilo-vertical .org-row { 
    display: flex; 
    flex-direction: row; 
    justify-content: center; /* Mantiene todo al centro */
    width: 100%; 
    gap: 0px; /* Aumentamos el gap para que respiren */
    /* flex-wrap: nowrap; */
    margin-top: 30px; 
    position: relative;
}

.estilo-vertical .org-row[class*="level-"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 30px;
    background-color: #009640;
    transform: translate(0, -100%);
}
.estilo-vertical .org-row.level-1::before,
.estilo-horizontal .org-row.level-1::before { display: none; }

/* 2. Ajuste de la Rama (Branch/Col): Adaptación al contenido */
.estilo-vertical .org-col { flex: 0 1 auto;/* display: flex;  */flex-direction: column; align-items: center; position: relative;padding: 30px 10px;}
/* 1. LÍNEA VERTICAL (El "tallo" que baja del padre hacia el hijo) */
.estilo-vertical .org-col::before {content: '';position: absolute;top: 0;left: 50%;width: 2px;height: 30px;background-color: #009640;}
/* 2. LÍNEAS HORIZONTALES (Conectores entre hermanos) */
/* Dibujamos la línea horizontal usando el ::after de la columna */
.estilo-vertical .org-col::after {content: '';position: absolute;top: 0;/* left: 50%; */width: 100%;height: 2px;background-color: #009640;z-index: -1;left: 0;}

/* --- PODADO DE LÍNEAS (Para que no se pasen de largo) --- */

/* El raíz (Nivel 1) no tiene línea hacia arriba */
.estilo-vertical  .level-1 > .org-col::before { display: none; }
/* El primer elemento de la fila: cortamos la línea a la izquierda */
.estilo-vertical .org-col:first-child::after {left: 50%;width: 50%;}
/* El último elemento de la fila: cortamos la línea a la derecha */
.estilo-vertical .org-col:last-child::after {left: 0; width: 50%;}
/* Si es hijo único, quitamos la línea horizontal */
.estilo-vertical .org-col:first-child:last-child::after { display: none; }


/* --- ESTILO HORIZONTAL --- */
.estilo-horizontal .org-tree { flex-direction: column; }
.estilo-horizontal .org-row { display: flex; flex-direction: column; gap: 0px; align-items: flex-start; margin-left: 30px; position: relative; }
.estilo-horizontal .org-row[class*="level-"]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: 2px;
    width: 30px;
    background-color: #009640;
    transform: translate(-100%, 0);
 }
.estilo-horizontal .org-col { display: flex; flex-direction: row; align-items: center; padding: .8rem 0 .8rem 30px;  position: relative; }
/* Línea horizontal del nodo */
.estilo-horizontal .org-col::before { content: ''; position: absolute; left: 0; top: 50%; width: 30px; height: 2px; background-color: #009640; }
/* Línea vertical que conecta hijos */
.estilo-horizontal .org-col::after { content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background-color: #009640; }
.estilo-horizontal .org-col:first-child:after { top: 50%; height: 50%; }
.estilo-horizontal .org-col:last-child:after { height: 50%; }
.estilo-horizontal .level-1 > .org-col::before, 
.estilo-horizontal .level-1 > .org-col::after { display: none; } 

/* 3. Ajuste para que las tarjetas no sean gigantescas */
.org-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;}
/* Tarjeta Premium */
.org-card { background: #fff; border-radius: 8px; width: 100%; max-width: 150px; padding: 10px;box-shadow: 0 4px 10px rgba(0,0,0,0.08); border-top: 5px solid #ccc;text-align: center;transition: transform 0.2s;
    min-height: 4rem;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;}
.org-card:hover { transform: scale(1.05); border-color: #00602d; }
.org-name { font-size: 14px; font-weight: 700; color: #232a2f; margin: 0; }
.org-role { font-size: 12px; color: #666; margin: 5px 0 0 0; }
/* Colores */
.color-teal { border-top-color: #7AD9BA; }
.color-black { border-top-color: #0B0D0E; }
.color-light-green { border-top-color: #009042; }
/* Título */
.org-title { font-size: 11px; color: #009042; text-transform: uppercase; margin-bottom: 8px; }


/* --- ESTILO GRID (VISTA PLANA) --- */
.estilo-grid .org-tree,
.estilo-grid .org-row { 
    display: flex;
    gap: 10px 20px;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    max-width: 1240px;
    margin: 0 auto;
}
.estilo-grid .org-row {margin-top: 0;}
.estilo-grid .org-row.level-2 {flex-wrap: nowrap;}
/* Forzamos a que cada rama (columna) sea un bloque de ancho fijo y se acomode */
.estilo-grid .org-col { 
    /* flex: 0 0 200px; /* Ancho fijo para que se vean uniformes */
    padding-top: 0; 
}
.estilo-grid .org-node { align-items: flex-start; display: flex; flex-direction: column; position: relative;z-index: 1;}

/* APAGAMOS TODAS LAS LÍNEAS DE ÁRBOL */
.estilo-grid .org-col::before, 
.estilo-grid .org-col::after, 
.estilo-grid .org-row::before { 
    display: none !important; 
}

/* Ajuste de tarjeta para Grid */
.estilo-grid .org-card { 
    margin: .5rem 0px;
    width: 200px;
    min-height: 8rem;
}


/* RESPONSIVE: MÓVIL */
@media (max-width: 768px) {
    .org-row { flex-direction: column !important; gap: 0px !important; }
    .org-row::before,.org-row::after { display: none !important; }
    .org-col::after, .org-col::before { display: none !important; }
    .org-col { min-width: 100% !important; }

    .estilo-grid .org-row.level-2 { flex-wrap: wrap !important; }
    .estilo-horizontal .org-row { margin: 0 !important;}
    .estilo-horizontal .org-col {flex-direction: column !important;}
}