/* ===========================
    ACCESSIBILITY
=========================== */

.accessibility {
    display: flex;
    align-items: center;
    gap: 8px;
}

.accessibility button {
    width: 38px;
    height: 38px;

    display: flex;
    justify-content: center;
    align-items: center;

    border: 1px solid rgba(255,255,255,.20);
    border-radius: 8px;

    background: rgba(255,255,255,.08);
    color: #fff;

    font-size: 0.95rem;
    font-weight: 600;

    cursor: pointer;

    transition: all .25s ease;
    
    
}


.accessibility button:hover {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.35);

    transform: translateY(-2px);
}
.accessibility button:active {
    transform: scale(.95);
}

.accessibility button:focus-visible {
    outline: 2px solid #FFD54A;
    outline-offset: 2px;
}

body.dark-mode .accessibility button {
    background: #16203A;
    border: 1px solid #29456D;
    color: #E1E6EA;
}

body.dark-mode .accessibility button:hover {
    background: #1D2D4B;
}

/* ==========================
        ACCESSBILITY-WIDGET
========================== */
.accessibility-widget{
    position: fixed;
    top: 45%;
    right: 0;
    z-index: 9999;
}

/* Botão */

.accessibility-btn{

    width: 45px;
    height: 100px;

    border: none;
 

     background: #0599bf;
    color: #fff;

    font-size: 1.5rem;

    cursor: pointer;

    box-shadow: 0 3px 10px rgba(0,0,0,.25);

    transition: .25s;

     border-radius: 8px 0 0 8px;
    
     transition: background .25s ease, transform .2s ease;

   
}

.accessibility-btn:hover{
    background: #047fa0;
    transform:scale(1.08);
}






/* Painel */

.accessibility-panel{

   display: none;
    position:absolute;
    right:65px;
    top:0;

    width:220px;
    background: #07afda;
    border-radius:8px;

    box-shadow:0 5px 18px rgba(0,0,0,.20);
    padding:15px;
}

.accessibility-panel h3{

    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0 0 15px;
    padding-bottom: 10px;

    font-size: 1rem;
    font-weight: 600;

    color: #0b4c75;

    border-bottom: 1px solid rgba(255,255,255,.30);
}
.read{
    display: none;
}
.accessibility-panel button{

    display:flex;
    align-items:center;
    gap:10px;

    background: rgba(255,255,255,.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);

    width:100%;

    padding:10px 12px;

    border:none;
    border-radius:6px;  

    cursor:pointer;
    margin-bottom:8px;
    transition:.2s;



}


.accessibility-panel button:hover {
    background: rgba(255,255,255,.30);
}



.accessibility-panel.show {

    display: block;

}
.accessibility-panel button:active{

    filter: brightness(.90);

}

@media (max-width: 768px) {
  
    .accessibility-btn {

    width: 60px;
    height: 60px;

    border-radius: 30% 0 0 30%;

    display: flex;
    align-items: center;
    justify-content: center;

}
    .accessibility-btn:hover {

        opacity: 1;

    }
    .accessibility-widget {
    display: flex;
    align-items: center;
}



    #btnReader,
    #btnDark,
    #btnFontPlus,
    #btnFontMinus,
    .btn-documentos
     {
        text-align: center;
        font-size: 1.2rem;      /* 16px */
        padding: 10spx 15px;

    }
    #btnReader i,
    #btnDark i,
    #btnFontPlus i,
    #btnFontMinus i,
    .btn-documentos i{
        font-size: 1rem;
    }


.accessibility-panel {
    border-radius: 12px;
}
.accessibility button {

        width: 44px;
        height: 44px;

        font-size: 16px;

        touch-action: manipulation;

        -webkit-tap-highlight-color: transparent;

    }
}