/* ============================================================================
   Ficha de área: contacto, personal y modal de persona.
   Paleta institucional EXA — azul #1a2537 / medio #1e4a9c / turquesa #00a19a.
   ========================================================================= */

.exa-area-ficha {
    margin: 3rem 0 1rem;
    padding-top: 2rem;
    border-top: 3px solid #00a19a;
}

.exa-area-ficha-titulo {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    color: #1a2537;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* ── Director/a ──────────────────────────────────────────────────────────── */

.exa-area-dir {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.exa-area-dir-foto {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    background: #eef1f5;
    flex-shrink: 0;
}

.exa-area-dir-datos { flex: 1 1 260px; min-width: 0; }

.exa-area-dir-cargo {
    margin: 0;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #00a19a;
}

.exa-area-dir-nombre {
    margin: .15rem 0 .75rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a2537;
}

.exa-area-dato {
    margin: .3rem 0;
    color: #3c4757;
    font-size: .95rem;
}

.exa-area-dato i {
    width: 1.1em;
    margin-right: .5rem;
    color: #1e4a9c;
}

.exa-area-dato a { color: #1e4a9c; }

.exa-area-acciones { margin: 1rem 0 0; }

.exa-btn-vcf {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.1rem;
    border-radius: 4px;
    background: #1e4a9c;
    color: #fff !important;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}

.exa-btn-vcf:hover,
.exa-btn-vcf:focus { background: #00a19a; }

/* ── Personal del área ───────────────────────────────────────────────────── */

.exa-staff-titulo {
    margin: 0 0 1rem;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #1a2537;
}

.exa-staff-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.exa-staff-item { margin: 0; }

/* El bloque se inyecta dentro del cuerpo de la página, así que hereda los
   estilos de lista del contenido editorial: sangría y una viñeta turquesa por
   ítem, que acá aparecían flotando sobre cada tarjeta. */
.exa-area-ficha .exa-staff-grilla { margin-left: 0; }
.exa-area-ficha .exa-staff-item::before { content: none; }
.exa-area-ficha .exa-staff-item { padding-left: 0; }

/* Y las mismas dos clases de arriba para las fotos: `.page-inst-content img`
   fija `height:auto` y `border-radius:6px`, y por ser más específica que una
   clase suelta les ganaba. Sin esto las fotos salen deformadas al recortarse
   una vertical, y con las esquinas del tema en vez de las del componente. */
.exa-area-ficha .exa-area-dir-foto,
.exa-area-ficha .exa-persona-thumb,
.exa-persona-modal .exa-persona-modal-foto {
    margin: 0;
    border-radius: 8px;
    object-fit: cover;
}

.exa-area-ficha .exa-area-dir-foto      { width: 120px; height: 120px; }
.exa-area-ficha .exa-persona-thumb      { width: 72px;  height: 72px;  }
.exa-persona-modal .exa-persona-modal-foto { width: 160px; height: 160px; }

.exa-persona {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    width: 100%;
    /* Que todas las tarjetas de una fila midan lo mismo aunque un nombre o un
       cargo ocupe dos líneas. El <li> ya se estira por la grilla; el botón es
       el que tiene que acompañarlo. */
    height: 100%;
    padding: 1rem .6rem;
    border: 1px solid #e2e6ec;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.exa-persona:hover,
.exa-persona:focus-visible {
    border-color: #00a19a;
    box-shadow: 0 4px 14px rgba(26, 37, 55, .12);
    transform: translateY(-2px);
}

.exa-persona-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    background: #eef1f5;
}

/* El nombre se empuja arriba y el cargo queda al pie de la tarjeta, para que en
   una fila los cargos se lean alineados entre sí. */
.exa-persona-nombre {
    margin-top: auto;
    font-size: .92rem;
    font-weight: 600;
    color: #1a2537;
    line-height: 1.3;
}

.exa-persona-cargo {
    font-size: .78rem;
    color: #6b7683;
    line-height: 1.3;
}

/* ── Modal de persona ────────────────────────────────────────────────────── */

.exa-persona-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(17, 27, 45, .82);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
}

.exa-persona-modal.abierto {
    opacity: 1;
    visibility: visible;
}

.exa-persona-modal-caja {
    position: relative;
    width: 100%;
    max-width: 380px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2.5rem 1.75rem 1.75rem;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    transform: translateY(12px);
    transition: transform .2s;
}

.exa-persona-modal.abierto .exa-persona-modal-caja { transform: none; }

.exa-persona-modal-cerrar {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b7683;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.exa-persona-modal-cerrar:hover,
.exa-persona-modal-cerrar:focus-visible {
    background: #eef1f5;
    color: #1a2537;
}

.exa-persona-modal-foto {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
    background: #eef1f5;
    margin-bottom: 1rem;
}

.exa-persona-modal-cargo {
    margin: 0;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #00a19a;
}

.exa-persona-modal-nombre {
    margin: .2rem 0 1rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a2537;
}

.exa-persona-modal-datos {
    margin-bottom: 1.25rem;
    text-align: left;
}

.exa-persona-modal-datos:empty { display: none; }

@media (max-width: 480px) {
    .exa-staff-grilla { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .exa-persona-modal-foto { width: 130px; height: 130px; }
}

/* ── Personal dentro del acordeón de Administración ──────────────────────── */
/*
   Mismo componente, fondo opuesto: la tarjeta del acordeón es azul oscuro. El
   título usa el mismo azul que el texto del bloque en la página del área, así
   que ahí quedaba invisible sobre el fondo. Las tarjetas de persona siguen
   siendo blancas: son la superficie clara que hace legible cada foto.
*/

.dpto-body-inner .exa-staff-bloque {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.dpto-body-inner .exa-staff-titulo { color: #cfd8e3; }