/* =========================================================
   ACCESIBILIDAD UNACAR
   Institucional 2026
   ========================================================= */

:root {

    --acc-azul: #003b70;
    --acc-azul-oscuro: #002b52;
    --acc-dorado: #c8a951;

    --acc-blanco: #ffffff;
    --acc-negro: #111111;

    --acc-gris: #f4f6f8;
    --acc-borde: #d7dde3;

    --acc-sombra:
        0 12px 35px rgba(0, 0, 0, .25);

}


/* =========================================================
   BOTÓN FLOTANTE
   ========================================================= */

.btn-accesibilidad {

    position: fixed;

    right: 0;
    top: 45%;

    z-index: 99998;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 13px 17px;

    border: 0;

    border-radius:
        12px 0 0 12px;

    background:
        var(--acc-azul);

    color:
        #fff;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 5px 18px rgba(0,0,0,.25);

    transition:
        all .25s ease;

}


.btn-accesibilidad:hover {

    background:
        var(--acc-azul-oscuro);

    transform:
        translateX(-4px);

}


.btn-accesibilidad:focus-visible {

    outline:
        3px solid var(--acc-dorado);

    outline-offset:
        3px;

}


.btn-accesibilidad i {

    font-size:
        24px;

}


/* =========================================================
   PANEL
   ========================================================= */

.panel-accesibilidad {

    position: fixed;

    right: 20px;

    top: 50%;

    transform:
        translateY(-50%);

    width:
        350px;

    max-width:
        calc(100vw - 30px);

    max-height:
        calc(100vh - 40px);

    overflow-y:
        auto;

    z-index:
        99999;

    background:
        var(--acc-blanco);

    color:
        var(--acc-negro);

    border:
        1px solid #d5d9dd;

    border-radius:
        16px;

    box-shadow:
        var(--acc-sombra);

}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.accesibilidad-header {

    position:
        sticky;

    top:
        0;

    z-index:
        2;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding:
        17px 20px;

    background:
        var(--acc-azul);

    color:
        #fff;

}


.accesibilidad-titulo {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    font-size:
        18px;

    font-weight:
        700;

}


.accesibilidad-titulo i {

    font-size:
        26px;

}


.btn-cerrar-accesibilidad {

    width:
        36px;

    height:
        36px;

    border:
        0;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.15);

    color:
        #fff;

    cursor:
        pointer;

    font-size:
        18px;

}


.btn-cerrar-accesibilidad:hover {

    background:
        rgba(255,255,255,.30);

}


.btn-cerrar-accesibilidad:focus-visible {

    outline:
        3px solid var(--acc-dorado);

}


/* =========================================================
   CUERPO
   ========================================================= */

.accesibilidad-body {

    padding:
        18px;

}


.accesibilidad-seccion {

    margin-bottom:
        20px;

}


.accesibilidad-seccion h6 {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin:
        0 0 10px;

    color:
        var(--acc-azul);

    font-size:
        14px;

    font-weight:
        800;

}


.accesibilidad-seccion h6 i {

    font-size:
        16px;

}


/* =========================================================
   BOTONES TAMAÑO TEXTO
   ========================================================= */

.accesibilidad-grid-3 {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        8px;

}


.accesibilidad-opcion {

    min-height:
        46px;

    border:
        1px solid var(--acc-borde);

    border-radius:
        8px;

    background:
        #fff;

    color:
        #222;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        all .2s ease;

}


.accesibilidad-opcion:hover {

    background:
        var(--acc-azul);

    color:
        #fff;

    border-color:
        var(--acc-azul);

}


/* =========================================================
   BOTONES COMPLETOS
   ========================================================= */

.accesibilidad-opcion-completa {

    width:
        100%;

    min-height:
        47px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        8px;

    padding:
        10px 13px;

    border:
        1px solid var(--acc-borde);

    border-radius:
        8px;

    background:
        #fff;

    color:
        #222;

    text-align:
        left;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        all .2s ease;

}


.accesibilidad-opcion-completa:hover {

    background:
        #eef4f9;

    border-color:
        var(--acc-azul);

}


.accesibilidad-opcion-completa:focus-visible,
.accesibilidad-opcion:focus-visible {

    outline:
        3px solid var(--acc-dorado);

    outline-offset:
        2px;

}


.accesibilidad-opcion-completa > i {

    width:
        22px;

    flex:
        0 0 22px;

    color:
        var(--acc-azul);

    font-size:
        17px;

}


/* =========================================================
   ESTADO
   ========================================================= */

.estado-opcion {

    width:
        9px;

    height:
        9px;

    margin-left:
        auto;

    border-radius:
        50%;

    background:
        #c8c8c8;

}


body.acc-alto-contraste
#altoContraste .estado-opcion,

body.acc-modo-oscuro
#modoOscuro .estado-opcion,

body.acc-grises
#escalaGrises .estado-opcion {

    background:
        #198754;

}


/* =========================================================
   RESTABLECER
   ========================================================= */

.accesibilidad-restablecer {

    border-top:
        1px solid #e1e5e8;

    padding-top:
        15px;

}


#restablecerAccesibilidad {

    width:
        100%;

    padding:
        9px;

    border:
        0;

    background:
        transparent;

    color:
        var(--acc-azul);

    font-weight:
        700;

    cursor:
        pointer;

}


#restablecerAccesibilidad:hover {

    text-decoration:
        underline;

}


/* =========================================================
   INFORMACIÓN
   ========================================================= */

.accesibilidad-info {

    display:
        flex;

    gap:
        8px;

    align-items:
        flex-start;

    padding:
        10px;

    margin-top:
        12px;

    border-radius:
        8px;

    background:
        #f4f6f8;

    color:
        #555;

    font-size:
        12px;

}


.accesibilidad-info i {

    color:
        var(--acc-azul);

}


/* =========================================================
   ALTO CONTRASTE
   ========================================================= */

body.acc-alto-contraste {

    background:
        #000 !important;

    color:
        #fff !important;

}


body.acc-alto-contraste header,body.acc-alto-contraste main, body.acc-alto-contraste section, body.acc-alto-contraste footer, body.acc-alto-contraste .card,body.acc-alto-contraste .navbar {

    background:
        #000 !important;

    color:
        #fff !important;

}
body.acc-alto-contraste div,body.acc-alto-contraste span,body.acc-alto-contraste ol,body.acc-alto-contraste ul,body.acc-alto-contraste li {

    background:
        #000 !important;

    color:
        #fff !important;

}
body.acc-alto-contraste h3,body.acc-alto-contraste h1,body.acc-alto-contraste h2,body.acc-alto-contraste h4,body.acc-alto-contraste h5 {

    background:
        #000 !important;

    color:
        #fff !important;

}



body.acc-alto-contraste a {

    color:
        #ffff00 !important;

    text-decoration:
        underline !important;

}


body.acc-alto-contraste button {

    border-color:
        #fff !important;

}


body.acc-alto-contraste img {

    border:
        1px solid #fff;

}
/*div.acc-alto-contraste {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important;
    background-color: #000000 !important;

}*/


/* =========================================================
   MODO OSCURO
   ========================================================= */

body.acc-modo-oscuro {

    background:
        #181818 !important;

    color:
        #f2f2f2 !important;

}


body.acc-modo-oscuro header, body.acc-modo-oscuro main, body.acc-modo-oscuro section, body.acc-modo-oscuro footer, body.acc-modo-oscuro .card, body.acc-modo-oscuro .navbar {

    background:
        #202020 !important;

    color:
        #f2f2f2 !important;

}
body.acc-modo-oscuro div,body.acc-modo-oscuro span  {

    background:
        #202020 !important;

    color:
        #f2f2f2 !important;

}


body.acc-modo-oscuro a {

    color:
        #8ec5ff !important;

}


body.acc-modo-oscuro
.panel-accesibilidad {

    background:
        #242424;

    color:
        #fff;

}


body.acc-modo-oscuro
.accesibilidad-opcion,
body.acc-modo-oscuro
.accesibilidad-opcion-completa {

    background:
        #303030;

    color:
        #fff;

    border-color:
        #555;

}


body.acc-modo-oscuro
.accesibilidad-seccion h6 {

    color:
        #8ec5ff;

}


/* =========================================================
   ESCALA DE GRISES
   ========================================================= */

body.acc-grises {

    filter:
        grayscale(100%);

}


/* =========================================================
   RESALTAR ENLACES
   ========================================================= */

body.acc-enlaces a {

    background:
        #ffff00 !important;

    color:
        #000 !important;

    text-decoration:
        underline !important;

    outline:
        2px solid #000;

    outline-offset:
        2px;

}


/* =========================================================
   CURSOR GRANDE
   ========================================================= */

body.acc-cursor-grande,
body.acc-cursor-grande * {

    cursor:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 2l8 25 5-9 9-5z' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E")
        2 2,
        auto !important;

}


/* =========================================================
   MEJORAR LEGIBILIDAD
   ========================================================= */

body.acc-legibilidad {

    line-height:
        1.8 !important;

}


body.acc-legibilidad p,
body.acc-legibilidad li {

    letter-spacing:
        .035em;

    word-spacing:
        .08em;

}


body.acc-legibilidad h1,
body.acc-legibilidad h2,
body.acc-legibilidad h3,
body.acc-legibilidad h4,
body.acc-legibilidad h5,
body.acc-legibilidad h6 {

    line-height:
        1.4;

}


/* =========================================================
   ESPACIADO
   ========================================================= */

body.acc-espaciado p,
body.acc-espaciado li,
body.acc-espaciado a {

    letter-spacing:
        .08em !important;

    word-spacing:
        .12em !important;

}


/* =========================================================
   DETENER ANIMACIONES
   ========================================================= */

body.acc-sin-animaciones *,
body.acc-sin-animaciones *::before,
body.acc-sin-animaciones *::after {

    animation:
        none !important;

    transition:
        none !important;

    scroll-behavior:
        auto !important;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 575.98px) {

    .btn-accesibilidad {

        right:
            15px;

        top:
            auto;

        bottom:
            18px;

        width:
            55px;

        height:
            55px;

        padding:
            0;

        justify-content:
            center;

        border-radius:
            50%;

    }


    .btn-accesibilidad span {

        display:
            none;

    }


    .btn-accesibilidad i {

        font-size:
            25px;

    }


    .panel-accesibilidad {

        left:
            10px;

        right:
            10px;

        bottom:
            82px;

        top:
            auto;

        width:
            auto;

        max-width:
            none;

        max-height:
            calc(100vh - 100px);

        transform:
            none;

    }

}