/* =============================================================================
   Organigrama Institucional — Estilos públicos
   Versión: 1.0.0
   Vistas: diagrama | tabla | lista
   ============================================================================= */

:root {
    --org-dorado:       #a57f2c;
    --org-dorado-claro: #e6d194;
    --org-dorado-bg:    rgba(230, 209, 148, 0.55);
    --org-rojo:         #9b2247;
    --org-borde-radio:  4px;
    --org-sombra:       0 2px 6px rgba(0, 0, 0, .12);
    --org-fuente:       inherit;
}

/* ─────────────────────────────────────────────────────────────────────────────
   VISTA 1: DIAGRAMA (árbol con líneas CSS)
   Técnica: display:table en <ul> + pseudo-elementos en <li> para conectores
   ───────────────────────────────────────────────────────────────────────────── */

.org-diagrama-wrap {
    overflow-x: auto;
    overflow-y: visible;
    padding: 24px 8px 32px;
    -webkit-overflow-scrolling: touch;
    /* Centra el árbol cuando cabe en el contenedor */
    text-align: center;
}

.org-chart {
    display: inline-block;
    /* Sin min-width: 100% para que text-align:center funcione
       cuando el árbol es más estrecho que el contenedor.
       El centrado por scroll (cuando desborda) lo maneja organigrama.js */
    text-align: center;
    font-family: var(--org-fuente);
}

/* ── Estructura del árbol ── */

.org-chart ul {
    display: table;
    margin: 0 auto;
    padding: 20px 0 0;
    position: relative;
    list-style: none;
}

/* Línea vertical desde el padre hacia abajo (tronco) */
.org-chart ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 2px solid var(--org-dorado);
    width: 0;
    height: 20px;
}

.org-chart li.org-nodo {
    display: table-cell;
    padding: 20px 6px 0;
    text-align: center;
    vertical-align: top;
    position: relative;
}

/* Mitad IZQUIERDA del conector horizontal + borde derecho vertical */
.org-chart li.org-nodo::before,
.org-chart li.org-nodo::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 2px solid var(--org-dorado);
    width: 50%;
    height: 20px;
}

/* Mitad DERECHA del conector horizontal */
.org-chart li.org-nodo::after {
    right: auto;
    left: 50%;
    border-left: 2px solid var(--org-dorado);
    border-top: 2px solid var(--org-dorado);
}

/* Primer hijo: no extiende línea a la izquierda */
.org-chart li.org-nodo:first-child::before,
.org-chart li.org-nodo:last-child::after {
    border: none;
}

/* Último hijo: esquina superior derecha redondeada del conector */
.org-chart li.org-nodo:last-child::before {
    border-right: 2px solid var(--org-dorado);
    border-radius: 0 5px 0 0;
}

/* Primer hijo: esquina superior izquierda redondeada */
.org-chart li.org-nodo:first-child::after {
    border-radius: 5px 0 0 0;
}

/* Hijo único: sin conectores horizontales */
.org-chart li.org-nodo:only-child::before,
.org-chart li.org-nodo:only-child::after {
    display: none;
}

/* ── Línea punteada para OIC / coordinación ── */

.org-chart li.org-nodo.linea-punteada::before,
.org-chart li.org-nodo.linea-punteada::after {
    border-color: var(--org-dorado-claro) !important;
    border-style: dashed !important;
}

.org-chart li.org-nodo.linea-punteada > ul::before {
    border-left-color: var(--org-dorado-claro);
    border-left-style: dashed;
}

/* ── Tarjeta de cada puesto ── */

.org-tarjeta {
    display: inline-block;
    min-width: 150px;
    max-width: 210px;
    background: #fff;
    border: 1px solid #ddd;
    border-left: 3px solid var(--org-dorado);
    border-right: 3px solid var(--org-dorado);
    border-radius: var(--org-borde-radio);
    box-shadow: var(--org-sombra);
    text-align: left;
    vertical-align: top;
    transition: box-shadow .2s;
}

.org-tarjeta:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.org-cuerpo {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.org-puesto {
    font-size: 11px;
    font-weight: 300;
    color: #555;
    line-height: 1.35;
}

.org-nombre {
    font-size: 12px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.3;
}

.org-vacante {
    color: #999 !important;
    font-weight: 400 !important;
    font-style: italic;
}

.org-correo a {
    font-size: 11px;
    color: #555;
    font-style: italic;
    word-break: break-all;
    text-decoration: none;
}

.org-correo a:hover {
    color: var(--org-rojo);
    text-decoration: underline;
}

.org-pie {
    background: var(--org-dorado-bg);
    border-top: 1px solid rgba(165, 127, 44, .25);
    border-radius: 0 0 var(--org-borde-radio) var(--org-borde-radio);
    padding: 4px 10px;
    font-size: 11px;
    color: #444;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Variantes visuales por tipo */
.tipo-ejecutivo > .org-tarjeta {
    border-left-width: 4px;
    border-right-width: 4px;
    min-width: 195px;
}

.tipo-oic > .org-tarjeta {
    border-left-color: var(--org-dorado-claro);
    border-right-color: var(--org-dorado-claro);
}

.tipo-staff > .org-tarjeta,
.tipo-asesor > .org-tarjeta {
    border-left-style: dashed;
    border-right-style: dashed;
}

/* ─────────────────────────────────────────────────────────────────────────────
   VISTA 2: TABLA RESPONSIVE
   ───────────────────────────────────────────────────────────────────────────── */

.org-tabla-wrap {
    overflow-x: auto;
    margin: 20px 0;
    border-radius: var(--org-borde-radio);
    box-shadow: var(--org-sombra);
}

.org-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #fff;
}

.org-tabla thead tr {
    background: var(--org-dorado);
    color: #fff;
}

.org-tabla th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
}

.org-tabla td {
    padding: 7px 14px;
    border-bottom: 1px solid #ececec;
    vertical-align: middle;
    line-height: 1.4;
}

.org-tabla tbody tr:hover td {
    background: rgba(165, 127, 44, .05);
}

.org-tabla a {
    color: var(--org-dorado);
    text-decoration: none;
}

.org-tabla a:hover {
    color: var(--org-rojo);
    text-decoration: underline;
}

/* Distinción visual por tipo */
.org-tabla .tipo-ejecutivo td:first-child {
    font-weight: 700;
    color: #111;
}

.org-tabla .tipo-subdirector td:first-child {
    font-weight: 600;
    padding-left: 24px;
}

.org-tabla .tipo-jefe-servicio td:first-child {
    padding-left: 40px;
}

.org-tabla .tipo-jefe-departamento td:first-child {
    padding-left: 56px;
    font-size: 12px;
}

.org-tabla .tipo-oic td:first-child,
.org-tabla .tipo-staff td:first-child,
.org-tabla .tipo-asesor td:first-child {
    padding-left: 24px;
    color: #666;
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────────
   VISTA 3: LISTA JERÁRQUICA COLAPSABLE
   ───────────────────────────────────────────────────────────────────────────── */

.org-lista-wrap {
    margin: 20px 0;
    font-size: 14px;
}

.org-lista,
.org-lista ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.org-lista-item {
    margin: 3px 0;
}

/* Nodo con hijos: usa <details>/<summary> */
.org-lista-item > details > summary,
.org-lista-item > .org-lista-puesto-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px;
    border-left: 3px solid var(--org-dorado);
    background: #fafafa;
    border-radius: 0 var(--org-borde-radio) var(--org-borde-radio) 0;
    cursor: pointer;
    transition: background .15s;
    list-style: none; /* quita el triángulo por defecto en algunos navegadores */
}

.org-lista-item > details > summary:hover,
.org-lista-item > .org-lista-puesto-wrap:hover {
    background: rgba(165, 127, 44, .08);
}

/* Triángulo de colapso personalizado */
.org-lista-item > details > summary::marker,
.org-lista-item > details > summary::-webkit-details-marker {
    color: var(--org-dorado);
}

/* Hijos: sangría + línea de guía */
.org-lista-item > details > ul,
.org-lista-item > ul {
    padding-left: 18px;
    border-left: 1px dashed rgba(165, 127, 44, .35);
    margin-left: 9px;
    margin-top: 2px;
}

.org-lista-puesto {
    font-weight: 600;
    color: #222;
}

.org-lista-nombre {
    font-weight: 400;
    color: #555;
    font-size: .9em;
}

.org-lista-correo {
    font-size: .85em;
    color: var(--org-dorado);
    text-decoration: none;
    font-style: italic;
}

.org-lista-correo:hover {
    color: var(--org-rojo);
}

/* Variantes por tipo */
.tipo-ejecutivo > details > summary,
.tipo-ejecutivo > .org-lista-puesto-wrap {
    background: rgba(165, 127, 44, .1);
    border-left-width: 4px;
    font-size: 1.05em;
}

.tipo-subdirector > details > summary,
.tipo-subdirector > .org-lista-puesto-wrap {
    border-left-color: #c8974a;
    background: rgba(165, 127, 44, .05);
}

.tipo-oic > details > summary,
.tipo-oic > .org-lista-puesto-wrap,
.linea-punteada > details > summary,
.linea-punteada > .org-lista-puesto-wrap {
    border-left-style: dashed;
    color: #666;
}

.tipo-staff > details > summary,
.tipo-staff > .org-lista-puesto-wrap,
.tipo-asesor > details > summary,
.tipo-asesor > .org-lista-puesto-wrap {
    border-left-color: #bbb;
    background: #f5f5f5;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ESTADO VACÍO
   ───────────────────────────────────────────────────────────────────────────── */

.org-vacio {
    padding: 24px;
    text-align: center;
    color: #999;
    font-style: italic;
    border: 1px dashed #ddd;
    border-radius: var(--org-borde-radio);
}