/* ==========================================================================
   CSS do Módulo de Acessibilidade JASA+ (v2.2 - Estilo Personalizado + Alta Especificidade)
   ========================================================================== */

/* --- Container Principal (Seu ajuste de posição) --- */
#jasa-acessibilidade-container {
    position: fixed;
    top: 40%; /* Sua preferência */
    right: 0;
    transform: translateY(-50%);
    z-index: 99999;
    display: flex;
    align-items: center;
}

/* --- Botão Principal (Seus ajustes de estilo) --- */
#jasa-trigger-btn {
    width: 40px; /* Seu tamanho */
    height: 40px; /* Seu tamanho */
    margin: 10px; /* Sua margem */
    border-radius: 6px; /* Sua borda */
    background-color: #fff; /* Seu fundo */
    color: #0073aa; /* Cor ajustada para o ícone ser visível */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease-in-out;
    overflow: hidden;
    border: none; /* Removida a borda que existia antes */
}

/* Estilo para o ícone SVG dentro do botão */
#jasa-trigger-btn img {
    width: 32px;
    height: 32px;
    max-width: fit-content;
}

#jasa-trigger-btn:hover {
    transform: scale(1.1);
}

/* --- Painel de Opções e Botões (Estrutura anterior mantida) --- */
.jasa-options-panel {
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    margin-right: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}
#jasa-acessibilidade-container.is-open .jasa-options-panel {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.jasa-options-panel button {
    cursor: pointer;
    background-color: #eaf5ff;
    border: 1px solid #a9d7ff;
    color: #005fcc;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    transition: background-color 0.2s;
}
.jasa-options-panel button:hover {
    background-color: #d4eaff;
}


/* --- Modo de Alto Contraste (REGRAS DE ALTA ESPECIFICIDADE MANTIDAS) --- */
body.jasa-alto-contraste,
body.jasa-alto-contraste header,
body.jasa-alto-contraste main,
body.jasa-alto-contraste article,
body.jasa-alto-contraste section,
body.jasa-alto-contraste div,
body.jasa-alto-contraste footer,
body.jasa-alto-contraste aside,
body.jasa-alto-contraste nav {
    background: #000 !important;
    color: #fff !important;
}

body.jasa-alto-contraste * {
    background-image: none !important;
    background-color: transparent !important;
    color: inherit !important;
    border-color: #fff !important;
    box-shadow: none !important;
}

body.jasa-alto-contraste a {
    color: #ffff00 !important;
}

body.jasa-alto-contraste button,
body.jasa-alto-contraste input,
body.jasa-alto-contraste select,
body.jasa-alto-contraste textarea,
body.jasa-alto-contraste .jasa-options-panel button {
    background-color: #222 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}

body.jasa-alto-contraste #jasa-acessibilidade-container,
body.jasa-alto-contraste #jasa-trigger-btn,
body.jasa-alto-contraste .jasa-options-panel {
    background-color: #222 !important;
    border-color: #fff !important;
}
/* Ajusta o ícone no modo de alto contraste */
body.jasa-alto-contraste #jasa-trigger-btn {
    color: #fff !important;
}

/* --- Estilos para o Botão de Leitura de Texto --- */
#jasa-ler-texto {
    display: flex;
    align-items: center;
    gap: 8px; /* Espaço entre o ícone e o texto */
}

#jasa-ler-texto svg {
    flex-shrink: 0; /* Impede que o ícone seja esmagado */
}



/* Classe de destaque aplicada via JS em parágrafos, títulos, etc. */
.jasa-texto-destacado {
    background-color: #fff3cd !important; /* Um amarelo claro para destaque */
    text-decoration: underline;
    text-decoration-style: dashed;
    cursor: pointer; /* Indica que o elemento é clicável */
    transition: background-color 0.2s;
}


@keyframes jasa-pulse {
    0% {
        box-shadow: 0 0 3px 1px rgba(169, 215, 255, 0.7);
    }
    50% {
        box-shadow: 0 0 8px 4px rgba(169, 215, 255, 1);
    }
    100% {
        box-shadow: 0 0 3px 1px rgba(169, 215, 255, 0.7);
    }
}

/* --- Classe para indicar que o Leitor de Texto está ATIVO --- */
/* Atualize a regra existente para incluir a animação */
#jasa-ler-texto.jasa-leitor-ativo {
    background-color: #a9d7ff; /* Um azul mais forte para indicar "ativo" */
    animation: jasa-pulse 2s infinite; /* Aplica a animação de pulso */
}

/* --- Estilo para o elemento que está sendo lido ATIVAMENTE --- */
.jasa-leitura-ativa {
    background-color: #d4eaff !important; /* Um azul claro para diferenciar do amarelo de hover */
    box-shadow: 0 0 0 2px #0073aa; /* Uma borda sutil para foco */
    text-decoration: none !important; /* Remove o sublinhado para não poluir */
}

/* --- Classe de Ativação para Fonte de Dislexia --- */
body.fonte-dislexia * {
    font-family: 'OpenDyslexic', sans-serif !important;
}

/* --- Estilo de feedback para o botão ativo --- */
#jasa-toggle-dislexia.jasa-dislexia-ativo {
    background-color: #a9d7ff;
    box-shadow: 0 0 5px 2px #a9d7ff;
}

/* --- Estilos para Modo "Links Destacados" --- */
body.jasa-links-destacados a {
    background-color: #ffc !important; /* Fundo amarelo de marca-texto */
    color: #000 !important; /* Garante o contraste do texto */
    text-decoration: underline !important;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
}

/* Feedback visual para o botão quando ativo */
#jasa-toggle-links.jasa-links-ativo {
    background-color: #a9d7ff;
    box-shadow: 0 0 5px 2px #a9d7ff;
}


/* --- Estilos para Modo "Máscara de Leitura" --- */
#jasa-mascara-leitura {
    position: fixed;
    width: 100%;
    height: 120px; /* A altura pode ser ajustada */
    background: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0.7) 0%, 
        rgba(0, 0, 0, 0) 45%, 
        rgba(0, 0, 0, 0) 55%, 
        rgba(0, 0, 0, 0.7) 100%
    );
    z-index: 99998; /* Logo abaixo da nossa barra de acessibilidade */
    left: 0;
    top: 0; /* A posição vertical será controlada pelo JS */
    display: none; /* Começa escondida */
    pointer-events: none; /* ESSENCIAL: Permite clicar "através" da máscara */
}

/* Exibe a máscara quando o modo está ativo */
body.jasa-mascara-ativa #jasa-mascara-leitura {
    display: block;
}

/* Feedback visual para o botão quando ativo */
#jasa-toggle-mascara.jasa-mascara-ativo {
    background-color: #a9d7ff;
    box-shadow: 0 0 5px 2px #a9d7ff;
}

#jasa-acessibilidade-container .alto-contraste,
#jasa-acessibilidade-container .ouvir-texto,
#jasa-acessibilidade-container .dyslexic,
#jasa-acessibilidade-container .mascara-leitura,
#jasa-acessibilidade-container .links-destacados {
    width: 32px;
    height: 32px;
    max-width: fit-content;
}