/* CSS Document */
/* Estilos del botón fijo */
.btn-fijo{
    position: fixed;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    color: white;
}

.btn-fijo:hover {
    animation: shake2 0.5s;
}

@keyframes shake2 {
    0%   { transform: translateY(-50%) translateX(0); }
    25%  { transform: translateY(-50%) translateX(-3px); }
    50%  { transform: translateY(-50%) translateX(3px); }
    75%  { transform: translateY(-50%) translateX(-3px); }
    100% { transform: translateY(-50%) translateX(0); }
}

/* MOBILE */
@media (max-width: 991px){
    .btn-fijo {
        right: 1px;
        top: 1px;
        margin: 3px;
        transform: none;
        width: 40px;
        height: 40px;
        padding: 5px;
    }
}

.icon-access{
    fill: white;
}

.btn-fijo svg {
    width: 32px;
    height: 32px;
}

/* Estilos del menú */
.menu-opciones {
    position: fixed;
    right: 67px;
    top: 50%;
    background: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.175);
    border-radius: 10px;
    padding: 10px;
    /*display: none;*/
    z-index: 999;

    /* Estado inicial oculto */
    transform: translateY(-50%) translateX(100%);
    opacity: 0;
    pointer-events: none;

    transition: all 0.4s ease;
}

.menu-opciones.activo {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* MOBILE */
@media (max-width: 991px){
    .menu-opciones {
        right: 50px;
        top: 0px;
        margin-top: 3px;
        transform: translateY(-100%) translateX(0);
        opacity: 0;
        pointer-events: none;
    }

    .menu-opciones.activo {
        transform: translateY(0) translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    body.texto-grande{
        margin-bottom: 3rem;
    }

    span#nombre{

    }

    .bg-info a{
        font-size: large;
    }
}

.menu-opciones svg {
    vertical-align: middle;
}

.estado-icono {
    float: right;
    font-size: 1.2rem;
}

/* Aumentar contraste */
.alto-contraste, .alto-contraste * {
    background: black !important;
    color: yellow !important;
}

.alto-contraste .desktop-only img, .alto-contraste img.desktop-only, .alto-contraste .mobile-only img, .alto-contraste img.mobile-only{
    filter: grayscale(100%);
}

.alto-contraste .btn-primary, .alto-contraste .btn{
    border-color: cyan !important;
}

.alto-contraste .btn-success{
    border-color: magenta !important;
}

.alto-contraste .gris{
    background-color: #9e9e9e !important;
}
.alto-contraste .verde{
    background-color: #8BC34A !important;
}

.alto-contraste a.ui-state-default.ui-state-active{
    background-color: #9e9e9e !important;
    color: white !important;
}

.alto-contraste a.ui-state-default{
    background-color: #8BC34A !important;
    color: white !important;
}

.alto-contraste .btn:hover, .alto-contraste .btn:hover span, .alto-contraste .btn:hover span svg, .alto-contraste .bg-info, .alto-contraste .bg-info a, .alto-contraste .bg-info img,.alto-contraste .btn-success:hover, .alto-contraste .btn-secondary:hover, .alto-contraste .btn-primary:hover, .alto-contraste .btn-primary:hover svg, .alto-contraste .btn-primary:hover svg:hover, .alto-contraste .dropdown-item:focus, .alto-contraste .dropdown-item:hover{
    background-color: #1c1c1c !important;
    transition: background-color .15s ease-in-out !important;
}

.alto-contraste svg.bi.bi-universal-access{
    background-color: transparent !important;
}

.alto-contraste a {
    color: cyan !important;
}

.alto-contraste .dropdown-menu.show {
    border-color: cyan !important;
}

.alto-contraste .barra-menu {
    border-right: 1px solid white;
}

.alto-contraste footer {
    border-top: 1px solid white;
}

.alto-contraste header {
    border-bottom: 1px solid white;
    height: 61px;
}

.alto-contraste .titulo-pagina {
    border: 1px solid white;
}

.alto-contraste .accordion, .alto-contraste .accordion-item{
    border-color: cyan!important;
}

.alto-contraste .accordion-button:not(.collapsed){
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 cyan;
}

.alto-contraste .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2300ffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.alto-contraste .modal .fade .show{
    background: transparent!important;
}

.alto-contraste .modal-content{
    border: 1px solid white;
}

.alto-contraste input.form-control::placeholder {
  color: grey;
}

/* Aumentar tamaño de texto */
.texto-grande, .texto-grande * {
    font-size: 1.5rem;
    white-space: normal; /* Permite saltos de línea */
    word-break: break-word; /* Rompe las palabras largas si es necesario */
}

.texto-grande h2 {
    font-size: 2rem;
}

/* Disminuir tamaño de texto */
.texto-chico, .texto-chico * {
    font-size: 0.7rem!important;
}

.texto-chico h2 {
    font-size: 1.2rem;
}

/* Escala de grises */
.escala-grises div, .escala-grises .container, .escala-grises .bg-info, .escala-grises .btn-fijo, .escala-grises footer {
    filter: grayscale(1);
}

.bg-info{
    align-items: center;
    line-height: 30px;
}

.bg-info img{
    width: 30px;
    height: auto;
}

.texto-grande .bg-info{
    line-height: 36px;
}

.texto-grande .bg-info img{
    width: 36px;
    height: auto;
}

.texto-chico .bg-info{
    line-height: 26px;
}

.texto-chico .bg-info img{
    width: 26px;
    height: auto;
}

.alto-contraste .answers a.correct{
    background-color: green !important;
    color: white !important;
}

.alto-contraste .answers a.incorrect{
    background-color: red !important;
    color: white !important;
}

.alto-contraste #quiz-buttons a, .alto-contraste .quiz-container .quiz-button, .alto-contraste .answers a{
    border: 1px solid;
}

.container img{
    /* width: 100%; */
    height: auto;

}

.alto-contraste svg.bi.bi-universal-access:hover {
    background-color: transparent!important;
}