/* ==========================================================
   HOME (inspirado en referencia) - NO toca header/footer UNAL
   ========================================================== */

:root {
    --pma-ink: #2D3748;
    --pma-muted: #4A5568;
    --pma-surface: #ffffff;
    --pma-bg: #F1F1F1;
    /* igual sensación a referencia */

    --pma-tab-bg: #F7FAFC;
    --pma-tab-border: #EDF2F7;
    --pma-tab-active: #4A5568;
    --pma-accent: #669d94;
    --pma-border: rgba(0, 0, 0, .10);
    --pma-maxw: 1290px;
}

/* Tipografía global (solicitada) */
body {
    font-family: "Ancizar Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--pma-ink);
}

/* Contenedor tipo “inner-wrap / content width” */
.pma-container {
    max-width: var(--pma-maxw);
    margin: 0 auto;
    padding: 0 16px;
}

/* =============================
   BANNER (se mantiene, estilo referencia)
   ============================= */
.banner {
    width: 100%;
    min-height: 320px;
    background-image:
        linear-gradient(90deg, rgba(0, 0, 0, 0) 56%, rgba(0, 0, 0, .48) 100%),
        url('../images/banners/banner1.png');
    background-size: cover;
    background-position: 49% 80%;
    background-repeat: no-repeat;
    border-bottom: 10px solid var(--pma-ink);
    display: flex;
    align-items: flex-end;
}

.banner .pma-container {
    width: 100%;
    padding-bottom: 24px;
}

.pma-banner-title {
    margin: 0;
    text-align: right;
    color: #fff;
    font-weight: 700;
    letter-spacing: .2px;
    font-size: clamp(22px, 2.6vw, 40px);
    line-height: 1.12;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
    font-family: "Ancizar Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* =============================
   MAIN “inner-wrap” look
   ============================= */
main#inner-wrap.detalle {
    background: var(--pma-bg);
    padding-bottom: 22px;
}

/* Breadcrumb estilo referencia */
.pma-breadcrumb {
    padding: 14px 0 10px;
    font-size: 14px;
}

.pma-breadcrumb .label {
    font-weight: 600;
}

.pma-breadcrumb a {
    color: var(--pma-ink);
    text-decoration: none;
}

.pma-breadcrumb a:hover {
    text-decoration: underline;
}

/* Título con mark */
.pma-page-title {
    margin: 0;
    font-weight: 800;
    font-size: clamp(22px, 2.2vw, 34px);
}

.pma-page-title mark {
    background: transparent;
    color: var(--pma-accent);
    font-weight: 900;
}

.pma-accent-rule {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pma-accent), rgba(102, 157, 148, .25));
    margin: 14px 0 18px;
}

/* =============================
   TABLIST (look referencia)
   ============================= */
/* .pestanias-programas {
    margin: 0 0 18px;
} */

/* sticky como referencia */
.pestanias-programas ul.kt-tabs-title-list {
    background: #fff;
    z-index: 10;
}

@media (min-width: 768px) {
    .pestanias-programas ul.kt-tabs-title-list {
        position: sticky;
        top: 0;
    }
}


.kt-tabs-title-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.kt-tabs-title-list>li {
    flex: 0 1 33.3333%;
}

.kt-tabs-title-list .kt-tab-title {
    display: block;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.5em;
    line-height: 1.3em;
    padding: 6px 15px;
    background: var(--pma-tab-bg);
    color: var(--pma-ink);
    border-top: 0;
    border-left: 4px solid var(--pma-tab-border);
    border-right: 4px solid var(--pma-tab-border);
    border-bottom: 6px solid var(--pma-tab-border);
    transition: background .12s ease, color .12s ease;
}

.kt-tabs-title-list .kt-tab-title:hover {
    background: var(--pma-tab-active);
    color: #fff;
}

/* estado “activo” (en home lo marcamos manual) */
.kt-tabs-title-list li.pma-tab-active .kt-tab-title {
    background: var(--pma-tab-active);
    color: #fff;
}

/* =============================
   Cards (reemplaza los 3 círculos)
   ============================= */
.pma-card-grid {
    padding: 18px 0 26px;
}

.pma-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.pma-card {
    background: var(--pma-surface);
    border: 1px solid var(--pma-border);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
    padding: 18px;
}

.pma-card h2 {
    margin: 0 0 10px;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: .2px;
}

.pma-card p {
    margin: 0;
    color: var(--pma-muted);
    font-size: 15px;
    line-height: 1.5;
}

.pma-card a {
    color: var(--pma-accent);
    font-weight: 800;
}

/* Responsive como referencia: tabs a 2 columnas en móvil */
@media (max-width: 767px) {
    .banner {
        background-position: center;
    }

    .banner .pma-container {
        padding-bottom: 14px;
    }

    .pma-banner-title {
        text-align: center;
    }

    .kt-tabs-title-list>li {
        flex: 0 1 50%;
    }

    .kt-tabs-title-list .kt-tab-title {
        font-size: 1.3em;
        line-height: 1.05em;
        border-left-width: 2px;
        border-right-width: 2px;
        border-bottom-width: 2px;
    }
}

@media (max-width: 991px) {
    .pma-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .pma-cards {
        grid-template-columns: 1fr;
    }
}

/* ===== Tipografía (forzar Sans también en headings del contenido) ===== */
:root {
    --pma-font-sans: "Ancizar Sans", "Ancizar sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body {
    font-family: var(--pma-font-sans) !important;
}

.banner,
main#inner-wrap,
main#inner-wrap h1,
main#inner-wrap h2,
main#inner-wrap h3,
main#inner-wrap h4,
main#inner-wrap h5,
main#inner-wrap h6 {
    font-family: var(--pma-font-sans) !important;
}

/* ===== Accesibilidad sobre banner (overlay) ===== */
.banner {
    position: relative;
}

main.accesibility-on {
    padding-top: 0 !important;
}

/* evita que empuje contenido */

.tx-unal-accesibilidad {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 60;
    background-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* pestaña flotante arriba a la derecha del banner */
#pestania-accesibilidad {
    position: absolute;
    top: 0;
    right: 40px;
    /* mueve a la izquierda vs antes */
    cursor: pointer;
    background-color: rgba(41, 41, 41, .85);
    color: #fff;
    height: 35px;
    line-height: 34px;
    padding: 0 10px;
    font-size: 1rem;
    z-index: 70;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* panel ocupando el alto del banner, centrado */
.tx-unal-accesibilidad .panel-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    padding: 3rem 2.5rem;
    background-color: #fff !important;
    border-bottom: 3px solid #292929;
    box-sizing: border-box;
    overflow: auto;
}

.tx-unal-accesibilidad .row-accessibilidad,
.tx-unal-accesibilidad .col-accesibilidad {
    height: 100%;
}

/* layout de columnas centradas */
.row-accessibilidad .col-accesibilidad .columnas {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    gap: 18px;
}

.tx-unal-accesibilidad .panel-content .columna {
    text-align: center;
    min-width: 180px;
}

/* fix color de encabezados (en accesibilidad.css están en blanco sobre blanco) */
.tx-unal-accesibilidad .panel-content h4 {
    color: #292929 !important;
    font-weight: normal;
    margin: 0 0 10px;
}

/* botones y input centrados */
.tx-unal-accesibilidad .panel-content .boton-panel {
    padding: 10px;
    background-color: #292929;
    border: none;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
}

.tx-unal-accesibilidad .panel-content .boton-panel:hover,
.tx-unal-accesibilidad .panel-content .boton-panel:focus {
    background-color: #0763c8;
}

.tx-unal-accesibilidad .panel-content input.letras-porcentaje {
    height: 35px;
    line-height: 35px;
    border: none;
    background-color: rgba(41, 41, 41, .2);
    font-weight: bold;
    padding: 0 10px;
    width: auto;
    text-align: center;
    display: inline-block;
}

.tx-unal-accesibilidad .panel-content .columna button,
.tx-unal-accesibilidad .panel-content .columna input {
    margin: 0 6px 6px 0;
}

@media (max-width: 900px) {
    .row-accessibilidad .col-accesibilidad .columnas {
        flex-wrap: wrap;
        justify-content: center;
    }

    .tx-unal-accesibilidad .panel-content {
        padding: 1.5rem 1rem;
    }
}

/* ===== Fondo uniforme (inner-wrap + content-wrap) ===== */
:root {
    --pma-bg: #F5F6F8;
    /* gris más claro que #EDF2F7 */
}

main#inner-wrap.detalle,
main#inner-wrap.detalle .content-container,
main#inner-wrap.detalle .content-wrap {
    background: var(--pma-bg) !important;
}

/* ===== kb-row-layout-wrap (info clave) ===== */
.pma-kb-facts {
    margin: 14px 0 18px;
}

.pma-kb-facts .kb-row-layout-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .10);
    /* border-radius: 14px; */
    padding: 12px;
}

.pma-kb-facts .kb-row-layout-column {
    background: #F7FAFC;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}

.pma-kb-label {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: #4A5568;
}

.pma-kb-value {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: #2D3748;
}

.pma-kb-value a {
    color: inherit;
    text-decoration: underline;
}

@media (max-width: 991px) {
    .pma-kb-facts .kb-row-layout-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .pma-kb-facts .kb-row-layout-inner {
        grid-template-columns: 1fr;
    }
}

/* ===== Fix buscador (Google CSE) en header institucional ===== */
#unalTop .navigation .buscador {
    height: 30px;
    /* asegura el alto */
}

#unalTop .navigation .buscador .gsc-control-searchbox-only,
#unalTop .navigation .buscador form.gsc-search-box {
    height: 30px !important;
}

#unalTop .navigation .buscador table.gsc-search-box {
    height: 30px !important;
    margin: 0 !important;
}

#unalTop .navigation .buscador .gsc-input-box {
    height: 30px !important;
    display: flex;
    align-items: center;
}

#unalTop .navigation .buscador input.gsc-input {
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 8px !important;
    box-sizing: border-box;
}

#unalTop .navigation .buscador .gsc-search-button {
    height: 30px !important;
    width: 30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

#unalTop .navigation .buscador .gsc-search-button button.gsc-search-button-v2,
#unalTop .navigation .buscador .gsc-search-button input.gsc-search-button {
    height: 30px !important;
    width: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
}

#unalTop .navigation .buscador .gsc-search-button button.gsc-search-button-v2 svg {
    margin: 0 !important;
}

body {
    background: var(--pma-bg) !important;
}

main#inner-wrap.detalle,
main#inner-wrap.detalle .content-container,
main#inner-wrap.detalle .content-wrap {
    background: var(--pma-bg) !important;
}

/* ==========================================================
   Buscador UNAL (Google CSE) - estilos tipo referencia
   ========================================================== */
#unalTop .navigation .buscador {
    border-radius: 5px;
    background: none;
    color: white;
    overflow: hidden;
    min-width: 200px;
    height: 30px;
}

#unalTop .navigation .buscador .gscb_a {
    line-height: 20px;
}

#unalTop .navigation .buscador .gsc-search-box .gsc-input>input:hover,
#unalTop .navigation .buscador .gsc-input-box-hover {
    border: 0;
    box-shadow: none;
    outline: 0;
}

/* caja input */
#unalTop .navigation .buscador .gsc-control-searchbox-only .gsc-input {
    background-color: #777;
    background-image: none !important;
    width: 100%;
    padding: 0;
}

#unalTop .navigation .buscador .gsc-control-searchbox-only .gsc-input input {
    background: none !important;
    text-indent: 0 !important;
    color: #ddd;
    display: inline;
    font-size: 1.2em;
    width: 150px !important;
    line-height: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box;
}

#unalTop .navigation .buscador .gsc-control-searchbox-only .gsc-input input::placeholder {
    color: #ddd;
}

/* ocultar X interno (como referencia) */
#unalTop .navigation .buscador .gsc-control-searchbox-only .gsc-input td.gsib_b {
    display: none;
}

#unalTop .navigation .buscador .gsc-control-searchbox-only .gsc-search-box {
    height: 30px;
    margin: 0;
    position: relative;
}

#unalTop .navigation .buscador .gsc-input-box-focus {
    box-shadow: none;
}

#unalTop .navigation .buscador .gsc-input-box {
    background: #777;
    border: 0;
    color: white;
    padding: 0;
}

/* botón buscar */
#unalTop .navigation .buscador .gsc-search-button {
    border-radius: 0;
    background-color: #94b43b !important;
    border: 0 none;
    box-shadow: none;
    cursor: pointer;
    float: right;
    height: 30px;
    padding: 0;
    width: 30px;
    margin-left: 0 !important;
}

#unalTop .navigation .buscador .gsc-search-button input.gsc-search-button,
#unalTop .navigation .buscador .gsc-search-button button.gsc-search-button-v2 {
    border: 0;
    box-shadow: none;
    margin: 0;
    outline: 0;
    padding: 0;
    height: 30px;
    width: 30px;
}

#unalTop .navigation .buscador .gsc-search-button button.gsc-search-button-v2 svg {
    width: 16px !important;
    height: 16px !important;
    margin: 7px !important;
}

.banner {
    min-height: 380px;
}

/* ==========================================================
   FIX Buscador UNAL (Google CSE)
   - corrige: gsc-search-button desubicado
   - corrige: gs_tti50 se sale (overflow)
   ========================================================== */

/* Contenedor del buscador */
#unalTop .navigation .buscador .gsc-control-searchbox-only,
#unalTop .navigation .buscador form.gsc-search-box {
    margin: 0 !important;
    padding: 0 !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
}

/* La tabla interna del CSE rompe alineación si no se fuerza */
#unalTop .navigation .buscador table.gsc-search-box {
    margin: 0 !important;
    height: 30px !important;
    border-collapse: collapse !important;
}

#unalTop .navigation .buscador table.gsc-search-box td {
    vertical-align: middle !important;
    padding: 0 !important;
}

/* Input wrapper (evita overflow del gs_tti50) */
#unalTop .navigation .buscador .gsc-input-box,
#unalTop .navigation .buscador .gsib_a,
#unalTop .navigation .buscador .gs_tti50 {
    height: 30px !important;
    line-height: 30px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* El elemento problemático (gs_tti50) */
#unalTop .navigation .buscador .gs_tti50 {
    width: 100% !important;
    max-width: 100% !important;
}

/* Input real */
#unalTop .navigation .buscador input.gsc-input {
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Quitar el botón X interno */
#unalTop .navigation .buscador td.gsib_b {
    display: none !important;
}

/* Botón lupa: tamaño y ubicación */
#unalTop .navigation .buscador .gsc-search-button {
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#unalTop .navigation .buscador .gsc-search-button button.gsc-search-button-v2,
#unalTop .navigation .buscador .gsc-search-button input.gsc-search-button {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}

#unalTop .navigation .buscador .gsc-search-button button.gsc-search-button-v2 svg {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
}

#unalTop .navigation .buscador .gsc-clear-button {
    display: none !important;
}

/* ==========================================================
   Accesibilidad - comportamiento estable
   ========================================================== */

/* El banner crea el contexto del overlay */
.banner {
    position: relative;
}

/* Módulo accesibilidad dentro del banner (por debajo del header) */
.banner .tx-unal-accesibilidad {
    position: absolute;
    inset: 0 auto auto 0;
    /* top-left */
    width: 100%;
    z-index: 10;
    /* menor que header */
}

/* Pestaña por defecto: pegada arriba del banner, un poco más a la izquierda */
.banner .tx-unal-accesibilidad #pestania-accesibilidad {
    position: absolute !important;
    top: 0 !important;
    right: 56px !important;
    /* mueve a la izquierda */
    height: 35px !important;
    line-height: 34px !important;
    z-index: 20 !important;
}

/* Panel ocupa EXACTAMENTE el banner (no se mueve con tamaño de letra) */
.banner .tx-unal-accesibilidad #panel-accesibilidad.panel-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    /* height: 100% !important;     clave: no crece con contenido */
    min-height: 100% !important;
    overflow: auto !important;
    /* scroll interno si sube el tamaño */
    box-sizing: border-box;
}

/* Layout interno: estilo “fila” (como referencia) */
.banner .tx-unal-accesibilidad .columnas {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 18px !important;
    width: min(1100px, 100%);
    margin: 0 auto;
}

/* Columna centrada */
.banner .tx-unal-accesibilidad .columna {
    min-width: 210px;
    text-align: center;
}

/* Cuando está abierto: la pestaña se pega al BORDE INFERIOR del panel */
.banner .tx-unal-accesibilidad.pma-acces-open #pestania-accesibilidad {
    top: auto !important;
    bottom: 0 !important;
    right: 56px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
}

/* Para que el banner no cambie su alto con el tamaño de letra */
.banner {
    height: clamp(280px, 30vw, 360px);
    min-height: 0 !important;
}

/* Badges tipo “icono” para enlaces */
.pma-linkrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
}

.pma-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    min-width: 34px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    background: rgba(45, 55, 72, .10);
    color: #2D3748;
}

.pma-badge--pdf {
    background: rgba(200, 30, 30, .12);
    color: #9B1C1C;
}

.pma-badge--ext {
    background: rgba(7, 99, 200, .12);
    color: #0752A6;
}

.pma-linkrow a {
    font-weight: 800;
}

/* ==========================================================
   Accesibilidad: comportamiento estable + header/LOGO por encima
   ========================================================== */

/* Header y logo SIEMPRE por encima del panel */
header,
#unalTop {
    position: relative;
    z-index: 9999 !important;
}

/* El banner es el contenedor del overlay */
.banner {
    position: relative;
    /* fija la “caja” del banner: el panel no se “mueve” con zoom */
    height: clamp(280px, 30vw, 360px);
    min-height: 0 !important;
}

/* Módulo accesibilidad dentro del banner, por debajo del header */
.banner .tx-unal-accesibilidad {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    /* height: 100% !important; */
    z-index: 50 !important;
    /* < header */
}

/* Pestaña: posición inicial (arriba del banner, un poco a la izquierda) */
.banner .tx-unal-accesibilidad #pestania-accesibilidad {
    position: absolute !important;
    top: 0 !important;
    right: 56px !important;
    bottom: auto !important;

    height: 35px !important;
    line-height: 34px !important;
    padding: 0 10px !important;
    font-size: 16px !important;
    /* evita que cambie con zoom */
    z-index: 60 !important;

    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Panel: SIEMPRE abre desde el inicio del banner hacia abajo */
.banner .tx-unal-accesibilidad #panel-accesibilidad.panel-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;
    /* clave: no “salta” con zoom */
    min-height: 100% !important;

    overflow: auto !important;
    /* si aumenta letra, hace scroll interno */
    box-sizing: border-box !important;
}

/* Cuando está abierto: la pestaña se pega al BORDE INFERIOR del panel */
.banner .tx-unal-accesibilidad.pma-acces-open #pestania-accesibilidad {
    top: auto !important;
    bottom: 0 !important;

    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/* ==========================================================
   Contrastes (fallback) — se activan con body.contraste-1/2/3
   ========================================================== */
/* body.contraste-1 #inner-wrap,
body.contraste-1 #inner-wrap .content-wrap {
    background: #ffffff !important;
    color: #111 !important;
}

body.contraste-1 a {
    color: #0752A6 !important;
}

body.contraste-2 #inner-wrap,
body.contraste-2 #inner-wrap .content-wrap {
    background: #111 !important;
    color: #fff !important;
}

body.contraste-2 a {
    color: #94b43b !important;
}

body.contraste-2 .pma-card {
    background: #1b1b1b !important;
    border-color: rgba(255, 255, 255, .18) !important;
}

body.contraste-3 #inner-wrap,
body.contraste-3 #inner-wrap .content-wrap {
    background: #0b1a2a !important;
    color: #fff !important;
}

body.contraste-3 a {
    color: #ffd166 !important;
}

body.contraste-3 .pma-card {
    background: #0f2238 !important;
    border-color: rgba(255, 255, 255, .18) !important;
} */

/* kb-row-layout: columnas sin fondo + tipografía mayor */
.pma-kb-facts .kb-row-layout-column {
    background: transparent !important;
    padding: 8px 10px !important;
}

.pma-kb-label {
    font-size: 13px !important;
}

.pma-kb-value {
    font-size: 16px !important;
}

/* Tabs centradas */
.kt-tabs-title-list .kt-tab-title {
    text-align: center !important;
}

/* Móvil: 1 tab por fila */
@media (max-width: 767px) {
    .kt-tabs-title-list>li {
        flex: 0 1 100% !important;
    }
}

/* ==========================================================
   Accesibilidad v-final: alto auto (desktop), mejor responsive,
   sin bordes curvos en pestaña, y header/logo por encima
   ========================================================== */

/* Header/logo siempre por encima del panel */
header,
#unalTop {
    position: relative;
    z-index: 9999 !important;
}

/* Banner como contexto */
.banner {
    position: relative;
}

/* Wrapper dentro del banner (cerrado/abierto) */
.banner .tx-unal-accesibilidad {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50 !important;
    /* por debajo del header */
}

/* ---------- Pestaña (cerrado) ---------- */
.banner .tx-unal-accesibilidad #pestania-accesibilidad {
    position: absolute !important;
    top: 0 !important;
    right: 56px !important;

    height: 35px;
    line-height: 34px;
    padding: 0 10px;
    background: rgba(41, 41, 41, .85);
    color: #fff;

    /* sin bordes curvos */
    border-radius: 0 !important;
}

/* Panel oculto por defecto */
.banner .tx-unal-accesibilidad #panel-accesibilidad {
    display: none;
}

/* ---------- Estado ABIERTO ---------- */
/* Hacemos el wrapper un contenedor flex en columna para que:
   - panel ocupe solo el alto necesario (auto)
   - pestaña quede abajo del panel (sin cálculos) */
.banner .tx-unal-accesibilidad.pma-acces-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: transparent;
}

/* El panel deja de ser absolute; ahora es “parte” del wrapper => da altura real */
.banner .tx-unal-accesibilidad.pma-acces-open #panel-accesibilidad.panel-content {
    display: block;
    position: relative !important;
    top: auto !important;
    left: auto !important;

    width: 100% !important;
    height: auto !important;
    /* <-- altura automática */
    max-height: 100% !important;
    /* si excede el banner, scroll interno (desktop) */
    overflow: auto !important;

    box-sizing: border-box;
}

/* Pestaña en abierto: se ubica al final (abajo) del wrapper */
.banner .tx-unal-accesibilidad.pma-acces-open #pestania-accesibilidad {
    position: relative !important;
    top: auto !important;
    right: 56px !important;
    /* mantiene “un poco a la izquierda” */
    margin-left: auto;
    /* se pega al lado derecho */
    margin-top: 0;
    border-radius: 0 !important;
    /* sin curvas también aquí */
}

/* ---------- Responsive del panel ---------- */
@media (max-width: 575px) {

    /* En móvil: permitimos que el panel crezca en altura (puede superar el banner) */
    /* .banner .tx-unal-accesibilidad.pma-acces-open{
    position: relative !important;   /* pasa a flujo, puede aumentar alto del banner */
    /* } */
    */ .banner .tx-unal-accesibilidad.pma-acces-open #panel-accesibilidad.panel-content {
        max-height: none !important;
        /* sin límite en móvil */
    }

    /* Ajuste layout interno para pantallas pequeñas */
    .banner .tx-unal-accesibilidad .columnas {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    .banner .tx-unal-accesibilidad .columna {
        min-width: 220px;
    }
}

/* ==========================================================
   CONTRASTES (igual a referencia)
   1: Rojo  (#ff0000 / #d90000)
   2: Verde (#008000 / #006400)
   3: Azul  (#0000ff / #0000d7)
   - SOLO aplica a #inner-wrap (no header/footer)
   ========================================================== */

/* util: aplica paleta (bg principal / bg secundario / texto) */
/* body.contraste-1 #inner-wrap {
    --c-bg: #ff0000;
    --c-bg2: #d90000;
    --c-txt: #ffffff;
}

body.contraste-2 #inner-wrap {
    --c-bg: #008000;
    --c-bg2: #006400;
    --c-txt: #ffffff;
}

body.contraste-3 #inner-wrap {
    --c-bg: #0000ff;
    --c-bg2: #0000d7;
    --c-txt: #ffffff;
}

body.contraste-1 #inner-wrap,
body.contraste-2 #inner-wrap,
body.contraste-3 #inner-wrap {
    background: var(--c-bg) !important;
    color: var(--c-txt) !important;
    transition: background .15s ease, color .15s ease;
}

body.contraste-1 #inner-wrap .content-container,
body.contraste-1 #inner-wrap .content-wrap,
body.contraste-2 #inner-wrap .content-container,
body.contraste-2 #inner-wrap .content-wrap,
body.contraste-3 #inner-wrap .content-container,
body.contraste-3 #inner-wrap .content-wrap {
    background: var(--c-bg) !important;
    color: var(--c-txt) !important;
}

body.contraste-1 #inner-wrap .pma-muted,
body.contraste-2 #inner-wrap .pma-muted,
body.contraste-3 #inner-wrap .pma-muted,
body.contraste-1 #inner-wrap p,
body.contraste-2 #inner-wrap p,
body.contraste-3 #inner-wrap p,
body.contraste-1 #inner-wrap h1,
body.contraste-1 #inner-wrap h2,
body.contraste-1 #inner-wrap h3,
body.contraste-1 #inner-wrap h4,
body.contraste-2 #inner-wrap h1,
body.contraste-2 #inner-wrap h2,
body.contraste-2 #inner-wrap h3,
body.contraste-2 #inner-wrap h4,
body.contraste-3 #inner-wrap h1,
body.contraste-3 #inner-wrap h2,
body.contraste-3 #inner-wrap h3,
body.contraste-3 #inner-wrap h4 {
    color: var(--c-txt) !important;
}

body.contraste-1 #inner-wrap a,
body.contraste-2 #inner-wrap a,
body.contraste-3 #inner-wrap a {
    color: var(--c-txt) !important;
    text-decoration: underline;
}

body.contraste-1 #inner-wrap .pma-card,
body.contraste-2 #inner-wrap .pma-card,
body.contraste-3 #inner-wrap .pma-card,
body.contraste-1 #inner-wrap .pma-kb-facts .kb-row-layout-inner,
body.contraste-2 #inner-wrap .pma-kb-facts .kb-row-layout-inner,
body.contraste-3 #inner-wrap .pma-kb-facts .kb-row-layout-inner {
    background: var(--c-bg2) !important;
    border-color: rgba(255, 255, 255, .35) !important;
}

body.contraste-1 #inner-wrap .kt-tab-title,
body.contraste-2 #inner-wrap .kt-tab-title,
body.contraste-3 #inner-wrap .kt-tab-title {
    background: var(--c-bg2) !important;
    color: var(--c-txt) !important;
    border-left-color: rgba(255, 255, 255, .35) !important;
    border-right-color: rgba(255, 255, 255, .35) !important;
    border-bottom-color: rgba(255, 255, 255, .35) !important;
}

body.contraste-1 #inner-wrap .kt-tab-title:hover,
body.contraste-2 #inner-wrap .kt-tab-title:hover,
body.contraste-3 #inner-wrap .kt-tab-title:hover,
body.contraste-1 #inner-wrap li.pma-tab-active .kt-tab-title,
body.contraste-2 #inner-wrap li.pma-tab-active .kt-tab-title,
body.contraste-3 #inner-wrap li.pma-tab-active .kt-tab-title {
    background: var(--c-bg) !important;
    color: var(--c-txt) !important;
}

body.contraste-1 #inner-wrap .pma-badge,
body.contraste-2 #inner-wrap .pma-badge,
body.contraste-3 #inner-wrap .pma-badge {
    background: transparent !important;
    color: var(--c-txt) !important;
    border: 1px solid rgba(255, 255, 255, .55);
} */

/* ==========================================================
   pestañas-programas: el <li> no debe verse azul
   (mismo fondo que inner)
   ========================================================== */
.pestanias-programas,
.pestanias-programas .kt-tabs-title-list,
.pestanias-programas .kt-tabs-title-list>li {
    background: var(--pma-bg) !important;
    background-color: var(--pma-bg) !important;
}

/* por si algún framework pinta el <li> con "background-image" */
.pestanias-programas .kt-tabs-title-list>li {
    background-image: none !important;
}

.pestanias-programas .kt-tabs-title-list>li.active,
.pestanias-programas .kt-tabs-title-list>li.current,
.pestanias-programas .kt-tabs-title-list>li:hover {
    background-color: var(--pma-bg) !important;
}

/* ==========================================================
   pestañas-programas como CARDS (igual look pma-card)
   - fondo del contenedor = fondo del inner
   - cada LI = tarjeta blanca con borde + shadow
   ========================================================== */

/* Fondo de la sección igual al inner */
#inner-wrap .pestanias-programas {
    background: var(--pma-bg) !important;
    padding: 10px 0 18px;
}

/* Mantén sticky si lo usas, pero sin fondo blanco/azul */
#inner-wrap .pestanias-programas ul.kt-tabs-title-list {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--pma-bg) !important;
    padding: 10px 0;
    margin: 0;
}

/* Layout tipo grid (3 columnas desktop) */
#inner-wrap .pestanias-programas ul.kt-tabs-title-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    list-style: none;
}

/* El LI es la “card” */
#inner-wrap .pestanias-programas ul.kt-tabs-title-list>li {
    background: #fff !important;
    /* border: 1px solid var(--pma-border) !important; */
    /* box-shadow: 0 8px 18px rgba(0,0,0,.06) !important;  */
    border-radius: 0;
    /* si quieres bordes redondeados, cámbialo a 12px */
    margin: 0 !important;
    padding: 0 !important;
    background-image: none !important;
}

/* Quita pseudo-elementos que a veces pintan azul */
#inner-wrap .pestanias-programas ul.kt-tabs-title-list>li::before,
#inner-wrap .pestanias-programas ul.kt-tabs-title-list>li::after {
    content: none !important;
    background: none !important;
}

/* El A ocupa toda la card */
#inner-wrap .pestanias-programas ul.kt-tabs-title-list>li>a.kt-tab-title {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 72px;
    padding: 16px 14px;

    text-align: center;
    font-weight: 800;
    font-size: 1.05rem;

    /* El fondo lo pone el LI; evitamos colores/gradientes del tema */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    /* eliminamos los bordes “de pestaña” anteriores */
    border: 0 !important;

    color: var(--pma-ink) !important;
    text-decoration: none;
}

/* Hover: como card (sombra un poco mayor) */
#inner-wrap .pestanias-programas ul.kt-tabs-title-list>li:hover {
    box-shadow: 0 12px 26px rgba(0, 0, 0, .10) !important;
}

/* Activa: marca lateral con color acento (tipo “card seleccionada”) */
#inner-wrap .pestanias-programas ul.kt-tabs-title-list>li.pma-tab-active {
    border-left: 6px solid var(--pma-accent) !important;
}

/* Si tu activo real es .active/.current, cúbrelo también */
#inner-wrap .pestanias-programas ul.kt-tabs-title-list>li.active,
#inner-wrap .pestanias-programas ul.kt-tabs-title-list>li.current {
    border-left: 6px solid var(--pma-accent) !important;
}

/* Responsive */
@media (max-width: 991px) {
    #inner-wrap .pestanias-programas ul.kt-tabs-title-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    #inner-wrap .pestanias-programas ul.kt-tabs-title-list {
        grid-template-columns: 1fr;
        /* 1 por fila */
    }

    #inner-wrap .pestanias-programas ul.kt-tabs-title-list>li>a.kt-tab-title {
        min-height: 64px;
    }
}

/* ==========================================================
   pestañas-programas (cards) — compacto + texto grande + MAYÚSCULAS
   activo verde + menos gap
   ========================================================== */

/* Menos espacio entre elementos */
#inner-wrap .pestanias-programas ul.kt-tabs-title-list {
    gap: 10px !important;
    /* antes 16px */
    padding: 8px 0 !important;
    /* reduce altura del bloque */
}

/* Card (LI) más compacta */
#inner-wrap .pestanias-programas ul.kt-tabs-title-list>li {
    box-shadow: 0 6px 14px rgba(0, 0, 0, .06) !important;
    /* un poco más sutil */
    /* border-radius: 10px !important;                     opcional, se ve mejor tipo card */
}

/* Link ocupa toda la card, más compacto, texto más grande y en mayúscula */
#inner-wrap .pestanias-programas ul.kt-tabs-title-list>li>a.kt-tab-title {
    min-height: 56px !important;
    /* antes 72px */
    padding: 10px 12px !important;
    /* antes 16px */
    font-size: 1.4rem !important;
    /* más grande */
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    line-height: 1.15 !important;
}

/* Activo: fondo verde (como el usado antes) + texto blanco */
#inner-wrap .pestanias-programas ul.kt-tabs-title-list>li.pma-tab-active {
    background: #669d94 !important;
    border-color: rgba(0, 0, 0, .12) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .14) !important;
}

#inner-wrap .pestanias-programas ul.kt-tabs-title-list>li.pma-tab-active>a.kt-tab-title {
    color: #ffffff !important;
}

/* Si el activo real lo marca el tema con .active/.current, cubrirlo igual */
#inner-wrap .pestanias-programas ul.kt-tabs-title-list>li.active,
#inner-wrap .pestanias-programas ul.kt-tabs-title-list>li.current {
    background: #669d94 !important;
}

#inner-wrap .pestanias-programas ul.kt-tabs-title-list>li.active>a.kt-tab-title,
#inner-wrap .pestanias-programas ul.kt-tabs-title-list>li.current>a.kt-tab-title {
    color: #ffffff !important;
}

/* Hover: leve realce sin cambiar a azul */
#inner-wrap .pestanias-programas ul.kt-tabs-title-list>li:hover {
    box-shadow: 0 10px 22px rgba(0, 0, 0, .12) !important;
}

/* ==========================================================
   Sprint 2 (Index) — Contenido scrolleable + Sticky Tabs
   ========================================================== */

/* Evita que sticky falle si algún wrapper tuviera overflow */
#inner-wrap .content-wrap,
#inner-wrap .content-container {
    overflow: visible !important;
}

/* Sticky tabs (como referencia) */
#inner-wrap .pestanias-programas {
    position: sticky;
    top: var(--pma-sticky-top, 0px);
    z-index: 80;
    background: var(--pma-bg);
    padding-top: 10px;
    padding-bottom: 10px;

    /* ligera separación visual cuando queda pegado */
    /* box-shadow: 0 6px 14px rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06); */
}

/* En móviles suele ser mejor no forzar sombra fuerte */
/* @media (max-width: 575px){
  #inner-wrap .pestanias-programas{
    box-shadow: 0 4px 10px rgba(0,0,0,.06);
  }
} */

/* Para que al hacer click en anclas (#cifras) no quede tapado por sticky */
#inner-wrap .pma-section {
    scroll-margin-top: calc(var(--pma-sticky-top, 0px) + 90px);
}

/* Secciones del contenido (vertical / scrolleable) */
.pma-section {
    margin: 18px 0 26px;
}

.pma-section-title {
    margin: 0 0 10px;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: .2px;
}

.pma-section-lead {
    margin: 0 0 14px;
    color: var(--pma-muted);
    font-size: 16px;
    line-height: 1.6;
}

/* Grids */
.pma-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.pma-grid-2--top {
    align-items: start;
}

@media (max-width: 991px) {
    .pma-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Cards densas */
.pma-cards--dense .pma-card {
    padding: 14px;
}

.pma-card--spaced {
    margin-top: 12px;
}

.pma-card--image {
    padding: 0;
    overflow: hidden;
}

.pma-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Si quieres asegurar 3 columnas en desktop solo para este bloque */
.pma-cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 991px) {
    .pma-cards--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .pma-cards--3 {
        grid-template-columns: 1fr;
    }
}

/* Listas */
.pma-list {
    margin: 0;
    padding-left: 18px;
    color: var(--pma-muted);
    font-size: 15px;
    line-height: 1.6;
}

.pma-list li {
    margin: 6px 0;
}

/* Cifras (stats) */
.pma-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.pma-stat {
    background: #fff;
    border: 1px solid var(--pma-border);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
    padding: 14px;
}

.pma-stat__num {
    font-weight: 900;
    font-size: 26px;
    line-height: 1.1;
    color: var(--pma-ink);
}

.pma-stat__lbl {
    margin-top: 6px;
    color: var(--pma-muted);
    font-size: 13px;
    line-height: 1.35;
}

@media (max-width: 991px) {
    .pma-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .pma-stats {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Toggle de contenido (Home): mostrar info general / ocultar cards
   ========================================================== */

/* Oculto por defecto */
#inner-wrap .pma-info-sections {
    display: none;
}

/* Cuando se activa: muestra secciones y oculta pma-card-grid */
#inner-wrap.pma-show-info .pma-info-sections {
    display: block;
}

#inner-wrap.pma-show-info .pma-card-grid {
    display: none !important;
}

/* Sticky tabs (si no lo tienes ya) */
#inner-wrap .pestanias-programas {
    position: sticky;
    top: var(--pma-sticky-top, 0px);
    z-index: 80;
}

/* Para que los anclajes no queden tapados por sticky */
#inner-wrap .pma-section {
    scroll-margin-top: calc(var(--pma-sticky-top, 0px) + 90px);
}

/* ==========================================================
   Sticky tabs SOLO en desktop/tablet (NO en móvil)
   ========================================================== */

/* Por defecto NO sticky (móvil primero) */
#inner-wrap .pestanias-programas {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
}

/* Sticky desde 768px en adelante */
@media (min-width: 768px) {
    #inner-wrap .pestanias-programas {
        position: sticky !important;
        top: var(--pma-sticky-top, 0px) !important;
        z-index: 80 !important;

        background: var(--pma-bg) !important;
        /* box-shadow: 0 6px 14px rgba(0,0,0,.06) !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important; */
    }

    /* Para anclas (#cifras, #sobre-la-maestria) sin quedar tapadas */
    #inner-wrap .pma-section {
        scroll-margin-top: calc(var(--pma-sticky-top, 0px) + 90px);
    }
}

/* Oculto por defecto */
#inner-wrap .pma-info-sections {
    display: none;
}

/* Al activar: mostrar secciones y ocultar la grilla inicial */
#inner-wrap.pma-show-info .pma-info-sections {
    display: block;
}

#inner-wrap.pma-show-info .pma-card-grid {
    display: none !important;
}

/* ==========================================================
   PMA Tabs dinámicos (paneles)
   ========================================================== */

.pma-panels {
    padding: 6px 0 26px;
}

.pma-panel {
    display: none;
}

.pma-panel.is-active {
    display: block;
}

.pma-panel-inner {
    /* asegura fondo consistente con el inner */
    background: transparent;
}

.pma-loading,
.pma-load-error {
    background: #fff;
    border: 1px solid var(--pma-border);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
    padding: 16px;
    font-weight: 800;
}

/* Sticky solo desktop/tablet (NO móvil) */
#inner-wrap .pestanias-programas {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}

@media (min-width: 768px) {
    #inner-wrap .pestanias-programas {
        position: sticky !important;
        top: var(--pma-sticky-top, 0px) !important;
        z-index: 80 !important;
        background: var(--pma-bg) !important;
        /* box-shadow: 0 6px 14px rgba(0,0,0,.06) !important; */
        /* border-bottom: 1px solid rgba(0,0,0,.06) !important; */
    }
}

/* ==========================================================
   Panel Info: Destacada (default) vs Contenido largo (on click)
   ========================================================== */

#pma-panel-info #pma-featured {
    display: block;
}

#pma-panel-info #pma-info-content {
    display: none;
}

/* Estilos de loading/error ya definidos en sprints previos */
.pma-loading,
.pma-load-error {
    background: #fff;
    border: 1px solid var(--pma-border);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
    padding: 16px;
    font-weight: 800;
}

/* ==========================================================
   Contenido legacy cargado dentro de paneles (main.detalle antiguo)
   ========================================================== */

.pma-legacy-content .breadcrumb-class {
    margin: 10px 0 14px;
    font-size: 14px;
}

.pma-legacy-content .jumbotron {
    border-radius: 14px;
    overflow: hidden;
    margin: 0 0 18px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
}

/* Tablas del plan curricular: look más limpio */
.pma-legacy-content table {
    width: 100%;
    background: #fff;
    border: 1px solid var(--pma-border);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
    border-collapse: collapse;
}

.pma-legacy-content table td,
.pma-legacy-content table th {
    border: 1px solid rgba(0, 0, 0, .08);
    padding: 10px;
    vertical-align: top;
}

.pma-legacy-content table tr:first-child td,
.pma-legacy-content table tr:first-child th {
    background: rgba(0, 0, 0, .03);
    font-weight: 900;
}

/* ==========================================================
   Tablas estilo PMA (plan/evaluación)
   ========================================================== */
.pma-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.pma-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--pma-border);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
}

.pma-table th,
.pma-table td {
    border: 1px solid rgba(0, 0, 0, .08);
    padding: 10px;
    vertical-align: top;
    color: var(--pma-ink);
    font-size: 15px;
}

.pma-table thead th {
    background: rgba(0, 0, 0, .03);
    font-weight: 900;
}

.pma-table a {
    color: var(--pma-accent);
    font-weight: 900;
    text-decoration: none;
}

.pma-table a:hover {
    text-decoration: underline;
}

/* ==========================================================
   Acordeones (details/summary) estilo PMA
   ========================================================== */
.pma-accordion {
    display: grid;
    gap: 12px;
}

.pma-acc-item {
    background: #fff;
    border: 1px solid var(--pma-border);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
}

.pma-acc-item>summary {
    cursor: pointer;
    padding: 14px 16px;
    font-weight: 900;
    color: var(--pma-ink);
    list-style: none;
}

.pma-acc-item>summary::-webkit-details-marker {
    display: none;
}

.pma-acc-meta {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 800;
    color: var(--pma-muted);
}

.pma-acc-body {
    padding: 0 16px 16px;
}

/* Evita que el contenido legacy (Bootstrap) “rompa” el layout dentro del acordeón */
.pma-legacy-content .row {
    margin-left: 0;
    margin-right: 0;
}

.pma-legacy-content [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.pma-legacy-content hr {
    border-top: 1px solid rgba(0, 0, 0, .10);
}

/* ==========================================================
   Embed (map) responsivo
   ========================================================== */
.pma-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
}

.pma-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Objetivos específicos: mostrar viñetas solo cuando se use la clase */
.pma-list.pma-list--bullets {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0;
}

.pma-list.pma-list--bullets>li {
    margin: 0 0 6px;
}

/* Cifras: igualar alto de convenios con la imagen (desktop) */
@media (min-width: 992px) {
    .pma-cifras-equal {
        align-items: stretch;
    }

    .pma-cifras-equal>* {
        height: 100%;
    }

    /* Asegura que el bloque de convenios pueda estirarse */
    .pma-cifras-convenios {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /* Si la imagen es un <img> dentro de la card de imagen */
    .pma-cifras-equal .pma-card--image {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .pma-cifras-equal .pma-card--image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Si en vez de <img> usas .pma-embed (iframe o similar), también se estira */
    .pma-cifras-equal .pma-card--image .pma-embed {
        flex: 1;
        height: 100%;
    }
}

/* ==========================================================
   Cifras: evitar desbordes y ajustar Convenios al alto de la imagen
   ========================================================== */

/* util general para igualar alturas de columnas en grids */
.pma-grid-2--equal {
    align-items: stretch;
}

.pma-grid-2--equal>* {
    height: 100%;
}

.pma-grid-2--equal>*>.pma-card {
    height: 100%;
}

/* solo en cifras */
@media (min-width: 992px) {
    .pma-cifras-grid {
        align-items: stretch;
    }

    /* Columna izquierda: flex vertical */
    .pma-cifras-left {
        display: flex;
        flex-direction: column;
        min-height: 0;
        /* clave para permitir overflow interno */
    }

    /* La grilla de stats NO debe empujar infinito */
    .pma-cifras-left .pma-stats {
        flex: 0 0 auto;
    }

    /* Convenios: ocupa el espacio restante y hace scroll interno si sobra */
    .pma-cifras-convenios {
        flex: 1 1 auto;
        min-height: 0;
        /* clave */
        overflow: hidden;
        /* evita que se salga de la card */
    }

    .pma-cifras-convenios .pma-list {
        max-height: 100%;
        overflow: auto;
        /* scroll solo dentro del listado si es necesario */
        padding-right: 6px;
        /* pequeño respiro para scrollbar */
    }

    /* Columna derecha: imagen ocupa el alto */
    .pma-cifras-right .pma-card--image {
        height: 100%;
    }

    .pma-cifras-right .pma-card--image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        /* no recorta la imagen */
        display: block;
    }
}

/* Departamentos: enlaces en negro (no verde) */
#departamentos a {
    color: var(--pma-ink) !important;
    text-decoration: none;
    /* font-weight: 900; */
}

#departamentos a:hover {
    text-decoration: underline;
}

/* Departamentos: los títulos (h2 > a) de las facultades en verde */
#departamentos h2 a {
    color: var(--pma-accent) !important;
    /* font-weight: 900; */
    text-decoration: none;
}

#departamentos h2 a:hover {
    text-decoration: underline;
}

.pma-list a {
    font-weight: inherit !important;
}

/* Ajuste de títulos dentro de acordeones (consistente con secciones) */
.pma-acc-body .pma-section-title {
    margin: 0 0 6px;
}

.pma-acc-body .pma-section-lead {
    margin: 0 0 10px;
}

/* Contacto: igualar altura de la card de texto con la del mapa */
.pma-grid-2--contact {
    align-items: stretch;
}

.pma-grid-2--contact>.pma-card {
    height: 100%;
}

/* Normatividad: igualar altura de ambas cards */
.pma-grid-2--norm {
    align-items: stretch;
}

.pma-grid-2--norm>.pma-card {
    height: 100%;
}

/* Perfiles: foto más pequeña, sin borde redondo y en modo cover */
.pma-profiles .pma-grid-2 {
    /* ancho fijo para columna de foto en desktop */
    grid-template-columns: 220px 1fr;
}

@media (max-width: 900px) {
    .pma-profiles .pma-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* La card de la foto: padding mínimo para que la imagen ocupe todo */
.pma-profiles .pma-grid-2>.pma-card.pma-card--spaced:first-child {
    padding: 10px;
    /* controla el "marco" interno */
}

.pma-profiles .pma-grid-2>.pma-card.pma-card--spaced:first-child img {
    width: 100%;
    height: 180px;
    /* “más pequeña”: ajusta si la quieres más baja */
    object-fit: cover;
    /* llena el contenedor sin deformar */
    border-radius: 0 !important;
    display: block;
}

/* Si algún inline style fuerza border-radius (como en tu HTML), lo anulamos */
.pma-profiles img[style*="border-radius"] {
    border-radius: 0 !important;
}

/* Ajusta este valor al alto real del sticky (tabs + separación) */
:root {
    --pma-sticky-offset: 160px;
}

/* Cualquier elemento al que llegues por #hash o scrollIntoView */
[id] {
    scroll-margin-top: var(--pma-sticky-offset);
}

/* Si quieres ser más específico */
.pma-panel [id] {
    scroll-margin-top: var(--pma-sticky-offset);
}

/* ✅ Si además quieres que el avatar SOLO se vea cuando está cerrado (y no cuando está abierto): */
.pma-profiles details[open] .pma-prof-avatar {
    opacity: .85;
    /* o display:none; si quieres ocultarlo completamente */
}

/* Summary con avatar estilo "Google" */
.pma-profiles .pma-acc-item>summary {
    list-style: none;
    cursor: pointer;
}

.pma-profiles .pma-acc-item>summary::-webkit-details-marker {
    display: none;
}

.pma-prof-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 4px;
}

.pma-prof-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    overflow: hidden;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    background: #e9edf2;
    color: #2b2f36;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .5px;
}

.pma-prof-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pma-prof-head {
    min-width: 0;
    flex: 1 1 auto;
}

.pma-prof-name {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
}

.pma-prof-meta {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    opacity: .8;
}

/* Indicador chevron (rotación al abrir) */
.pma-prof-chevron {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    opacity: .7;
    transition: transform .18s ease;
}

details[open] .pma-prof-chevron {
    transform: rotate(180deg);
}

/* Contenido: foto fuera de cards con sombra */
.pma-prof-body {
    padding: 14px 0 4px;
}

.pma-prof-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 768px) {
    .pma-prof-layout {
        grid-template-columns: 88px 1fr;
    }
}

.pma-prof-photo {
    width: 200px;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 12px;
    /* NO círculo aquí: foto vertical, limpia */
    background: #f2f4f7;
}

@media (max-width: 768px) {
    .pma-prof-photo {
        width: 140px;
        border-radius: 10px;
    }
}

.pma-prof-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Link list con badges alineados */
.pma-prof-links {
    margin-top: 14px;
}

.pma-prof-links .pma-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 768px) {
    .pma-prof-layout {
        grid-template-columns: 1fr;
    }

    .pma-prof-photo {
        width: 100%;
        overflow: visible;
        /* opcional, por si el border-radius no es crítico */
    }

    .pma-prof-photo img {
        height: auto;
        object-fit: contain;
        /* evita recorte */
    }
}

/* Evita "hover" en todo el contenedor */
.pma-header-nav:hover,
.pma-header-nav:focus-within {
    background: transparent;
    box-shadow: none;
}

/* Si existe una regla tipo ".btn-group:hover .btn", la neutraliza */
.pma-header-nav:hover>.btn,
.pma-header-nav:focus-within>.btn {
    background-color: #fff;
    /* default btn-default */
    border-color: #ccc;
    color: inherit;
}

/* Hover solo del botón */
.pma-header-nav>.btn:hover,
.pma-header-nav>.btn:focus {
    background-color: #e6e6e6;
    /* hover bootstrap */
}

/* 1) El contenedor NO debe pintar hover */
.btn-group.pma-header-nav,
.btn-group.pma-header-nav:hover,
.btn-group.pma-header-nav:focus,
.btn-group.pma-header-nav:focus-within {
    background: transparent !important;
    box-shadow: none !important;
}

/* 2) Si existe una regla tipo ".btn-group:hover .btn", la neutralizamos */
.btn-group.pma-header-nav:hover>.btn,
.btn-group.pma-header-nav:focus-within>.btn {
    background: #fff !important;
    border-color: #ccc !important;
    color: inherit !important;
}

/* 3) Hover SOLO en el botón bajo el mouse */
.btn-group.pma-header-nav>.btn:hover,
.btn-group.pma-header-nav>.btn:focus {
    background: #e6e6e6 !important;
    border-color: #adadad !important;
    color: inherit !important;
}

/* 4) Si tus botones tienen <a> dentro, asegura que el hover no "salte" raro */
.btn-group.pma-header-nav>.btn>a {
    color: inherit !important;
    text-decoration: none !important;
    display: inline-block;
    width: 100%;
    height: 100%;
}

/* 5) Evita que el hover de <a> pinte el botón vecino por estilos heredados */
.btn-group.pma-header-nav>.btn>a:hover,
.btn-group.pma-header-nav>.btn>a:focus {
    background: transparent !important;
}

.btn-group.pma-header-nav,
.btn-group.pma-header-nav:hover,
.btn-group.pma-header-nav:focus,
.btn-group.pma-header-nav:focus-within {
    background: transparent !important;
    box-shadow: none !important;
}

.btn-group.pma-header-nav:hover>.btn,
.btn-group.pma-header-nav:focus-within>.btn {
    background: transparent !important;
    border-color: transparent !important;
}

.btn-group.pma-header-nav>.btn {
    background: transparent !important;
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-group.pma-header-nav>.btn:hover,
.btn-group.pma-header-nav>.btn:focus {
    background: rgba(255, 255, 255, 0.04) !important;
    /* muy sutil */
    /* border-color: rgba(0,0,0,.15) !important; */
}



/* =========================================================
   CONTRASTES — Tema global robusto (pegar al FINAL del CSS)
   ========================================================= */

/* 0) Variables por defecto (modo normal) */
:root {
    --pma-bg: #ffffff;
    --pma-surface: #ffffff;
    --pma-surface-2: #f7f7f9;
    --pma-text: #111827;
    --pma-muted: rgba(17, 24, 39, .75);
    --pma-border: rgba(17, 24, 39, .16);

    --pma-link: #0b57d0;
    --pma-link-hover: #083b8a;

    --pma-badge-bg: rgba(11, 87, 208, .10);
    --pma-badge-border: rgba(11, 87, 208, .28);
    --pma-badge-text: #0b1f33;

    --pma-focus: #0b57d0;
}

/* 1) Variables por modo */
body.contraste-1 {
    --pma-bg: #0b0f14;
    --pma-surface: #0f1620;
    --pma-surface-2: #121c28;
    --pma-text: #f3f4f6;
    --pma-muted: rgba(243, 244, 246, .78);
    --pma-border: rgba(255, 255, 255, .14);

    --pma-link: #7dd3fc;
    --pma-link-hover: #bae6fd;

    --pma-badge-bg: rgba(125, 211, 252, .14);
    --pma-badge-border: rgba(125, 211, 252, .28);
    --pma-badge-text: #e6f6ff;

    --pma-focus: #38bdf8;
}

body.contraste-2 {
    /* Daltonismo: evita depender de rojo/verde; usa azules + neutros */
    --pma-bg: #ffffff;
    --pma-surface: #ffffff;
    --pma-surface-2: #f6f8fb;
    --pma-text: #111827;
    --pma-muted: rgba(17, 24, 39, .78);
    --pma-border: rgba(17, 24, 39, .16);

    --pma-link: #0072B2;
    --pma-link-hover: #005b8f;

    --pma-badge-bg: rgba(0, 114, 178, .12);
    --pma-badge-border: rgba(0, 114, 178, .35);
    --pma-badge-text: #0b1f33;

    --pma-focus: #0072B2;
}

body.contraste-3 {
    /* Anti-brillo / baja fatiga (fondo cálido, texto oscuro) */
    --pma-bg: #f3efe3;
    --pma-surface: #fbf7ea;
    --pma-surface-2: #f6f0df;
    --pma-text: #111111;
    --pma-muted: rgba(17, 17, 17, .78);
    --pma-border: rgba(0, 0, 0, .20);

    --pma-link: #0b57d0;
    --pma-link-hover: #083b8a;

    --pma-badge-bg: rgba(11, 87, 208, .10);
    --pma-badge-border: rgba(11, 87, 208, .28);
    --pma-badge-text: #0b1f33;

    --pma-focus: #111111;
}

/* 2) Aplicación global: corta de raíz fondos verde/rojo/azul */
body.contraste-1,
body.contraste-2,
body.contraste-3 {
    background: var(--pma-bg) !important;
    color: var(--pma-text) !important;
}

/* Tus contenedores existentes */
body.contraste-1 #inner-wrap .content-container,
body.contraste-1 #inner-wrap .content-wrap,
body.contraste-2 #inner-wrap .content-container,
body.contraste-2 #inner-wrap .content-wrap,
body.contraste-3 #inner-wrap .content-container,
body.contraste-3 #inner-wrap .content-wrap {
    background: var(--pma-bg) !important;
    color: var(--pma-text) !important;
}

/* 3) Elementos base dentro de TODO (evita textos ilegibles) */
body.contraste-1 :where(p, li, span, small, strong, em, h1, h2, h3, h4, h5, h6),
body.contraste-2 :where(p, li, span, small, strong, em, h1, h2, h3, h4, h5, h6),
body.contraste-3 :where(p, li, span, small, strong, em, h1, h2, h3, h4, h5, h6) {
    color: inherit !important;
}

/* 4) Links visibles SIEMPRE */
body.contraste-1 a,
body.contraste-2 a,
body.contraste-3 a {
    color: var(--pma-link) !important;
    text-decoration-color: currentColor !important;
}

body.contraste-1 a:hover,
body.contraste-2 a:hover,
body.contraste-3 a:hover {
    color: var(--pma-link-hover) !important;
}

body.contraste-1 a:visited,
body.contraste-2 a:visited,
body.contraste-3 a:visited {
    color: var(--pma-link) !important;
}

/* 5) Superficies principales (aquí es donde te aparecen verde/rojo/azul) */
body.contraste-1 :where(.pma-card, .pma-panel-inner, .pma-panel, .pma-section, .pma-accordion, .pma-acc-body, .well, .panel, .card),
body.contraste-2 :where(.pma-card, .pma-panel-inner, .pma-panel, .pma-section, .pma-accordion, .pma-acc-body, .well, .panel, .card),
body.contraste-3 :where(.pma-card, .pma-panel-inner, .pma-panel, .pma-section, .pma-accordion, .pma-acc-body, .well, .panel, .card) {
    background: var(--pma-surface) !important;
    color: var(--pma-text) !important;
    border-color: var(--pma-border) !important;
    /* mata gradientes/colores de tema previos */
    background-image: none !important;
}

/* 6) Variantes de superficie */
body.contraste-1 :where(.pma-card--spaced, .pma-card--image, .pma-table-wrap, .pma-list),
body.contraste-2 :where(.pma-card--spaced, .pma-card--image, .pma-table-wrap, .pma-list),
body.contraste-3 :where(.pma-card--spaced, .pma-card--image, .pma-table-wrap, .pma-list) {
    background: var(--pma-surface) !important;
}

/* 7) Badges/tags (evita que se queden en verde/rojo/azul) */
body.contraste-1 :where(.pma-badge, .pma-tag),
body.contraste-2 :where(.pma-badge, .pma-tag),
body.contraste-3 :where(.pma-badge, .pma-tag) {
    background: var(--pma-badge-bg) !important;
    color: var(--pma-badge-text) !important;
    border: 1px solid var(--pma-badge-border) !important;
}

/* 8) Botones (incluye bootstrap) */
body.contraste-1 :where(button, .btn, .btn-default, .btn-primary, .btn-success, .btn-danger, .btn-info),
body.contraste-2 :where(button, .btn, .btn-default, .btn-primary, .btn-success, .btn-danger, .btn-info),
body.contraste-3 :where(button, .btn, .btn-default, .btn-primary, .btn-success, .btn-danger, .btn-info) {
    background: var(--pma-surface-2) !important;
    color: var(--pma-text) !important;
    border-color: var(--pma-border) !important;
}

/* 9) Tablas */
body.contraste-1 :where(table, th, td),
body.contraste-2 :where(table, th, td),
body.contraste-3 :where(table, th, td) {
    color: var(--pma-text) !important;
    border-color: var(--pma-border) !important;
}

body.contraste-1 thead th,
body.contraste-2 thead th,
body.contraste-3 thead th {
    background: var(--pma-surface-2) !important;
}

/* 10) Textos secundarios */
body.contraste-1 :where(.pma-section-lead, .pma-acc-meta, .text-muted),
body.contraste-2 :where(.pma-section-lead, .pma-acc-meta, .text-muted),
body.contraste-3 :where(.pma-section-lead, .pma-acc-meta, .text-muted) {
    color: var(--pma-muted) !important;
}

/* 11) Focus accesible */
body.contraste-1 :focus-visible,
body.contraste-2 :focus-visible,
body.contraste-3 :focus-visible {
    outline: 3px solid var(--pma-focus) !important;
    outline-offset: 2px !important;
}

/* 12) Neutraliza el “verde/rojo/azul” de los botones de contraste */
#contraste-1,
#contraste-2,
#contraste-3,
#contrate-3 {
    background: transparent !important;
    color: inherit !important;
    border: 1px solid currentColor !important;
}

/* =========================================================
   FIX: Contrastes en tabs/accordion/table-wrap/kb-facts
   (pegar al FINAL del CSS)
   ========================================================= */

/* ---- Tabs (nav) ---- */
body.contraste-1 :where(.pestanias-programas, .pma-tabs, .pma-tablist),
body.contraste-2 :where(.pestanias-programas, .pma-tabs, .pma-tablist),
body.contraste-3 :where(.pestanias-programas, .pma-tabs, .pma-tablist) {
    background: var(--pma-surface) !important;
    color: var(--pma-text) !important;
    border-color: var(--pma-border) !important;
    background-image: none !important;
}

body.contraste-1 :where(.pestanias-programas a, .pma-tab),
body.contraste-2 :where(.pestanias-programas a, .pma-tab),
body.contraste-3 :where(.pestanias-programas a, .pma-tab) {
    background: transparent !important;
    color: var(--pma-text) !important;
    border-color: var(--pma-border) !important;
    background-image: none !important;
}

body.contraste-1 :where(.pestanias-programas li.pma-tab-active a, .pma-tab.is-active, .pma-tab[aria-selected="true"]),
body.contraste-2 :where(.pestanias-programas li.pma-tab-active a, .pma-tab.is-active, .pma-tab[aria-selected="true"]),
body.contraste-3 :where(.pestanias-programas li.pma-tab-active a, .pma-tab.is-active, .pma-tab[aria-selected="true"]) {
    background: var(--pma-surface-2) !important;
    color: var(--pma-text) !important;
    border-color: var(--pma-border) !important;
}

/* Hover sutil y solo por item */
body.contraste-1 :where(.pestanias-programas a:hover, .pma-tab:hover),
body.contraste-2 :where(.pestanias-programas a:hover, .pma-tab:hover),
body.contraste-3 :where(.pestanias-programas a:hover, .pma-tab:hover) {
    background: color-mix(in srgb, var(--pma-surface-2) 70%, transparent) !important;
    color: var(--pma-text) !important;
}

/* ---- Accordion (details/summary) ---- */
body.contraste-1 :where(.pma-accordion, .pma-acc-item),
body.contraste-2 :where(.pma-accordion, .pma-acc-item),
body.contraste-3 :where(.pma-accordion, .pma-acc-item) {
    background: transparent !important;
    color: var(--pma-text) !important;
}

body.contraste-1 :where(.pma-acc-item > summary),
body.contraste-2 :where(.pma-acc-item > summary),
body.contraste-3 :where(.pma-acc-item > summary) {
    background: var(--pma-surface) !important;
    color: var(--pma-text) !important;
    border-color: var(--pma-border) !important;
    background-image: none !important;
}

body.contraste-1 :where(.pma-acc-item[open] > summary),
body.contraste-2 :where(.pma-acc-item[open] > summary),
body.contraste-3 :where(.pma-acc-item[open] > summary) {
    background: var(--pma-surface-2) !important;
}

body.contraste-1 :where(.pma-acc-body),
body.contraste-2 :where(.pma-acc-body),
body.contraste-3 :where(.pma-acc-body) {
    background: var(--pma-surface) !important;
    color: var(--pma-text) !important;
    border-color: var(--pma-border) !important;
    background-image: none !important;
}

/* ---- Table wrap / tablas ---- */
body.contraste-1 :where(.pma-table-wrap, .pma-table),
body.contraste-2 :where(.pma-table-wrap, .pma-table),
body.contraste-3 :where(.pma-table-wrap, .pma-table) {
    background: var(--pma-surface) !important;
    color: var(--pma-text) !important;
    border-color: var(--pma-border) !important;
    background-image: none !important;
}

body.contraste-1 :where(.pma-table thead th),
body.contraste-2 :where(.pma-table thead th),
body.contraste-3 :where(.pma-table thead th) {
    background: var(--pma-surface-2) !important;
    color: var(--pma-text) !important;
    border-color: var(--pma-border) !important;
}

body.contraste-1 :where(.pma-table tbody tr),
body.contraste-2 :where(.pma-table tbody tr),
body.contraste-3 :where(.pma-table tbody tr) {
    background: transparent !important;
}

body.contraste-1 :where(.pma-table tbody tr:hover),
body.contraste-2 :where(.pma-table tbody tr:hover),
body.contraste-3 :where(.pma-table tbody tr:hover) {
    background: color-mix(in srgb, var(--pma-surface-2) 70%, transparent) !important;
}

/* ---- KB facts (kb-row-layout-wrap pma-kb-facts) ---- */
body.contraste-1 :where(.kb-row-layout-wrap, .pma-kb-facts),
body.contraste-2 :where(.kb-row-layout-wrap, .pma-kb-facts),
body.contraste-3 :where(.kb-row-layout-wrap, .pma-kb-facts) {
    background: var(--pma-surface) !important;
    color: var(--pma-text) !important;
    border-color: var(--pma-border) !important;
    background-image: none !important;
}

body.contraste-1 :where(.pma-kb-facts .pma-card, .pma-kb-facts .kb-card, .pma-kb-facts article),
body.contraste-2 :where(.pma-kb-facts .pma-card, .pma-kb-facts .kb-card, .pma-kb-facts article),
body.contraste-3 :where(.pma-kb-facts .pma-card, .pma-kb-facts .kb-card, .pma-kb-facts article) {
    background: var(--pma-surface) !important;
    color: var(--pma-text) !important;
    border-color: var(--pma-border) !important;
    background-image: none !important;
}

/* ---- Enlaces dentro de estos componentes (por si están pisados) ---- */
body.contraste-1 :where(.pestanias-programas a, .pma-accordion a, .pma-table-wrap a, .pma-kb-facts a),
body.contraste-2 :where(.pestanias-programas a, .pma-accordion a, .pma-table-wrap a, .pma-kb-facts a),
body.contraste-3 :where(.pestanias-programas a, .pma-accordion a, .pma-table-wrap a, .pma-kb-facts a) {
    color: var(--pma-link) !important;
}

body.contraste-1 :where(.pestanias-programas a:hover, .pma-accordion a:hover, .pma-table-wrap a:hover, .pma-kb-facts a:hover),
body.contraste-2 :where(.pestanias-programas a:hover, .pma-accordion a:hover, .pma-table-wrap a:hover, .pma-kb-facts a:hover),
body.contraste-3 :where(.pestanias-programas a:hover, .pma-accordion a:hover, .pma-table-wrap a:hover, .pma-kb-facts a:hover) {
    color: var(--pma-link-hover) !important;
}

/* =========================================================
   FIX EXTRA: panel-accesibilidad + pestanias-programas pma-tab
   + kb-row-layout-inner (pegar al FINAL)
   ========================================================= */

/* ---- Panel accesibilidad ---- */
body.contraste-1 #panel-accesibilidad,
body.contraste-2 #panel-accesibilidad,
body.contraste-3 #panel-accesibilidad {
    background: var(--pma-surface) !important;
    color: var(--pma-text) !important;
    border-color: var(--pma-border) !important;
    background-image: none !important;
}

body.contraste-1 #panel-accesibilidad :where(h1, h2, h3, h4, h5, h6, p, span, label, small),
body.contraste-2 #panel-accesibilidad :where(h1, h2, h3, h4, h5, h6, p, span, label, small),
body.contraste-3 #panel-accesibilidad :where(h1, h2, h3, h4, h5, h6, p, span, label, small) {
    color: var(--pma-text) !important;
}

body.contraste-1 #panel-accesibilidad :where(a),
body.contraste-2 #panel-accesibilidad :where(a),
body.contraste-3 #panel-accesibilidad :where(a) {
    color: var(--pma-link) !important;
}

body.contraste-1 #panel-accesibilidad :where(a:hover),
body.contraste-2 #panel-accesibilidad :where(a:hover),
body.contraste-3 #panel-accesibilidad :where(a:hover) {
    color: var(--pma-link-hover) !important;
}

/* Botones del panel (incluye .boton-panel) */
body.contraste-1 #panel-accesibilidad :where(button, .boton-panel, input[type="button"], input[type="submit"]),
body.contraste-2 #panel-accesibilidad :where(button, .boton-panel, input[type="button"], input[type="submit"]),
body.contraste-3 #panel-accesibilidad :where(button, .boton-panel, input[type="button"], input[type="submit"]) {
    background: var(--pma-surface-2) !important;
    color: var(--pma-text) !important;
    border: 1px solid var(--pma-border) !important;
}

body.contraste-1 #panel-accesibilidad :where(button:hover, .boton-panel:hover),
body.contraste-2 #panel-accesibilidad :where(button:hover, .boton-panel:hover),
body.contraste-3 #panel-accesibilidad :where(button:hover, .boton-panel:hover) {
    background: color-mix(in srgb, var(--pma-surface-2) 70%, transparent) !important;
}

/* ---- Tabs en .pestanias-programas (pma-tab) ---- */
/* Contenedor */
body.contraste-1 .pestanias-programas,
body.contraste-2 .pestanias-programas,
body.contraste-3 .pestanias-programas {
    background: var(--pma-surface) !important;
    border-color: var(--pma-border) !important;
    background-image: none !important;
}

/* Items LI */
body.contraste-1 .pestanias-programas li,
body.contraste-2 .pestanias-programas li,
body.contraste-3 .pestanias-programas li {
    background: transparent !important;
}

/* Tabs como <a class="pma-tab"> o .pma-tab dentro del nav */
body.contraste-1 .pestanias-programas :where(a.pma-tab, .pma-tab, a[role="tab"]),
body.contraste-2 .pestanias-programas :where(a.pma-tab, .pma-tab, a[role="tab"]),
body.contraste-3 .pestanias-programas :where(a.pma-tab, .pma-tab, a[role="tab"]) {
    background: transparent !important;
    color: var(--pma-text) !important;
    border-color: var(--pma-border) !important;
    box-shadow: none !important;
    background-image: none !important;
}

/* Hover */
body.contraste-1 .pestanias-programas :where(a.pma-tab:hover, .pma-tab:hover, a[role="tab"]:hover),
body.contraste-2 .pestanias-programas :where(a.pma-tab:hover, .pma-tab:hover, a[role="tab"]:hover),
body.contraste-3 .pestanias-programas :where(a.pma-tab:hover, .pma-tab:hover, a[role="tab"]:hover) {
    background: color-mix(in srgb, var(--pma-surface-2) 70%, transparent) !important;
    color: var(--pma-text) !important;
}

/* Activo por clase en LI o aria-selected */
body.contraste-1 .pestanias-programas :where(li.pma-tab-active > a, a[aria-selected="true"], .pma-tab.is-active),
body.contraste-2 .pestanias-programas :where(li.pma-tab-active > a, a[aria-selected="true"], .pma-tab.is-active),
body.contraste-3 .pestanias-programas :where(li.pma-tab-active > a, a[aria-selected="true"], .pma-tab.is-active) {
    background: var(--pma-surface-2) !important;
    color: var(--pma-text) !important;
    border-color: var(--pma-border) !important;
}

/* Links dentro del tab (si hay spans) */
body.contraste-1 .pestanias-programas :where(.pma-tab span, a[role="tab"] span),
body.contraste-2 .pestanias-programas :where(.pma-tab span, a[role="tab"] span),
body.contraste-3 .pestanias-programas :where(.pma-tab span, a[role="tab"] span) {
    color: inherit !important;
}

/* ---- KB facts: kb-row-layout-inner dentro de kb-row-layout-wrap pma-kb-facts ---- */
body.contraste-1 :where(.kb-row-layout-wrap.pma-kb-facts, .kb-row-layout-wrap .pma-kb-facts),
body.contraste-2 :where(.kb-row-layout-wrap.pma-kb-facts, .kb-row-layout-wrap .pma-kb-facts),
body.contraste-3 :where(.kb-row-layout-wrap.pma-kb-facts, .kb-row-layout-wrap .pma-kb-facts) {
    background: var(--pma-surface) !important;
    color: var(--pma-text) !important;
    border-color: var(--pma-border) !important;
    background-image: none !important;
}

/* El inner es el que normalmente “se queda” con el color viejo */
body.contraste-1 .kb-row-layout-wrap .kb-row-layout-inner,
body.contraste-2 .kb-row-layout-wrap .kb-row-layout-inner,
body.contraste-3 .kb-row-layout-wrap .kb-row-layout-inner {
    background: transparent !important;
    /* deja ver el surface del wrapper */
    color: var(--pma-text) !important;
    background-image: none !important;
}

/* Cards/filas dentro */
body.contraste-1 .kb-row-layout-wrap .kb-row-layout-inner :where(.pma-card, article, .kb-card, .kb-row),
body.contraste-2 .kb-row-layout-wrap .kb-row-layout-inner :where(.pma-card, article, .kb-card, .kb-row),
body.contraste-3 .kb-row-layout-wrap .kb-row-layout-inner :where(.pma-card, article, .kb-card, .kb-row) {
    background: var(--pma-surface) !important;
    color: var(--pma-text) !important;
    border-color: var(--pma-border) !important;
}

/* Links dentro del KB */
body.contraste-1 .kb-row-layout-wrap .kb-row-layout-inner a,
body.contraste-2 .kb-row-layout-wrap .kb-row-layout-inner a,
body.contraste-3 .kb-row-layout-wrap .kb-row-layout-inner a {
    color: var(--pma-link) !important;
}

body.contraste-1 .kb-row-layout-wrap .kb-row-layout-inner a:hover,
body.contraste-2 .kb-row-layout-wrap .kb-row-layout-inner a:hover,
body.contraste-3 .kb-row-layout-wrap .kb-row-layout-inner a:hover {
    color: var(--pma-link-hover) !important;
}

/* =========================================================
   FIX tabs/pma-tab que no cambian con contraste
   PEGAR AL FINAL DEL CSS
   ========================================================= */

/* 1) Mapear variables “viejas” a las del tema de contraste */
body.contraste-1,
body.contraste-2,
body.contraste-3 {
    /* Tus estilos existentes usan --pma-ink/--pma-tab-* */
    --pma-ink: var(--pma-text) !important;
    --pma-tab-bg: var(--pma-surface-2) !important;
    --pma-tab-border: var(--pma-border) !important;
    --pma-tab-active: var(--pma-surface-2) !important;
}

/* 2) Matar los hardcodes (#fff y #669d94) del “tabs como cards” */
body.contraste-1 #inner-wrap .pestanias-programas ul.kt-tabs-title-list>li,
body.contraste-2 #inner-wrap .pestanias-programas ul.kt-tabs-title-list>li,
body.contraste-3 #inner-wrap .pestanias-programas ul.kt-tabs-title-list>li {
    background: var(--pma-surface) !important;
    border-color: var(--pma-border) !important;
    background-image: none !important;
}

/* Activo: NO verde fijo; usa surface-2 + un borde de énfasis */
body.contraste-1 #inner-wrap .pestanias-programas ul.kt-tabs-title-list>li.pma-tab-active,
body.contraste-1 #inner-wrap .pestanias-programas ul.kt-tabs-title-list>li.active,
body.contraste-1 #inner-wrap .pestanias-programas ul.kt-tabs-title-list>li.current,
body.contraste-2 #inner-wrap .pestanias-programas ul.kt-tabs-title-list>li.pma-tab-active,
body.contraste-2 #inner-wrap .pestanias-programas ul.kt-tabs-title-list>li.active,
body.contraste-2 #inner-wrap .pestanias-programas ul.kt-tabs-title-list>li.current,
body.contraste-3 #inner-wrap .pestanias-programas ul.kt-tabs-title-list>li.pma-tab-active,
body.contraste-3 #inner-wrap .pestanias-programas ul.kt-tabs-title-list>li.active,
body.contraste-3 #inner-wrap .pestanias-programas ul.kt-tabs-title-list>li.current {
    background: var(--pma-surface-2) !important;
    border-left: 6px solid var(--pma-link) !important;
}

/* Texto del tab */
body.contraste-1 #inner-wrap .pestanias-programas .kt-tab-title,
body.contraste-2 #inner-wrap .pestanias-programas .kt-tab-title,
body.contraste-3 #inner-wrap .pestanias-programas .kt-tab-title {
    color: var(--pma-text) !important;
    background: transparent !important;
}

/* Hover del tab (sutil) */
body.contraste-1 #inner-wrap .pestanias-programas .kt-tab-title:hover,
body.contraste-2 #inner-wrap .pestanias-programas .kt-tab-title:hover,
body.contraste-3 #inner-wrap .pestanias-programas .kt-tab-title:hover {
    background: color-mix(in srgb, var(--pma-surface-2) 75%, transparent) !important;
    color: var(--pma-text) !important;
}