/* Bloques del departamento en el sitio: personal, cátedras, materias,
   documentos. Los colores salen de las variables del tema, así siguen a los
   que el departamento elija en Personalizar. */

/* El tema le pone viñeta a todo <li> del contenido; las tarjetas no la llevan
   (lo mismo que hace areas-ficha.css dentro de la ficha de un área). */
.exa-d-personas .exa-staff-grilla { margin-left: 0; padding-left: 0; }
.exa-d-personas .exa-staff-item { padding-left: 0; }
.exa-d-personas .exa-staff-item::before { content: none; }
.exa-d-personas { margin: 0 0 32px; }

.exa-d-subtitulo {
    margin: 36px 0 14px;
    color: var(--exa-color-primario, #1e2f4f);
}

.exa-d-contacto { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 8px; }
.exa-d-contacto i { color: var(--exa-color-acento, #00a19a); margin-right: 6px; }

/* Encabezado de grupo dentro de la tabla de documentos. Va en su propio
   <tbody>, así el rayado par/impar se reinicia en cada grupo. */
.exa-d-tabla tr.exa-d-grupo th {
    background: #eef2f7;
    color: var(--exa-color-primario, #1e2f4f);
    text-align: left;
    font-size: .85rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 10px 16px;
}
.exa-d-candado { color: var(--exa-color-secundario, #1e4a9c); margin-right: 6px; }

.exa-d-aviso {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    background: #f7f9fc;
    border: 1px solid #e8ecf2;
    border-left: 4px solid var(--exa-color-acento, #00a19a);
    border-radius: 10px;
    padding: 14px 18px;
    margin: 0 0 28px;
}
.exa-d-aviso > i { color: var(--exa-color-secundario, #1e4a9c); }

/* Listado de cátedras */
.exa-d-catedras {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    margin: 0 0 32px;
}
a.exa-d-catedra {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    border: 1px solid #e8ecf2;
    border-top: 4px solid var(--exa-color-acento, #00a19a);
    border-radius: 12px;
    padding: 18px 20px;
    text-decoration: none;
    color: var(--exa-color-oscuro, #1a2537);
    box-shadow: 0 4px 22px rgba(var(--exa-color-oscuro-rgb, 26, 37, 55), 0.07);
    transition: transform .15s ease, box-shadow .15s ease;
}
a.exa-d-catedra:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(var(--exa-color-oscuro-rgb, 26, 37, 55), 0.12); }
.exa-d-catedra-nombre { font-weight: 700; font-size: 1.1rem; color: var(--exa-color-primario, #1e2f4f); }
.exa-d-catedra-materias { font-size: .9rem; color: #5b6675; line-height: 1.45; }
.exa-d-catedra-ver { margin-top: auto; font-size: .85rem; font-weight: 600; color: var(--exa-color-secundario, #1e4a9c); }

/* El tema le pone a todo .exa-compras-btn un ícono de descarga con ::before.
   Acá cada botón trae el suyo (descargar, programa, ingresar): sin esto salen dos. */
.exa-d-tabla a.exa-compras-btn.exa-compras-btn::before,
.exa-d-aviso a.exa-compras-btn.exa-compras-btn::before { content: none; }