/* =============================================================
   Plugin: Acessibilidade & Transparência — v1.0.0
   ISOLAMENTO TOTAL: all:initial no root + all:revert nos filhos
   Todos os seletores internos prefixados com #actr-root.
   Classes genéricas renomeadas: actr-is-active, actr-is-open.
============================================================= */

/* ----- Variáveis CSS (escopo global para contraste etc.) --- */
:root {
    --actr-emerald:       #1DC98A;
    --actr-emerald-hover: #25D293;
    --actr-navy:          #002e47;
    --actr-navy-light:    #003856;
    --actr-text-dark:     #2A454A;
    --actr-text-light:    #7A8987;
    --actr-white:         #ffffff;
    --actr-gray-50:       #F8FAFC;
    --actr-gray-100:      #F1F5F9;
    --actr-gray-200:      #E2E8F0;
    --actr-gray-400:      #94A3B8;
    --actr-radius-panel:  16px;
    --actr-radius-btn:    10px;
    --actr-shadow-panel:  0 8px 40px rgba(0,46,71,.18), 0 2px 8px rgba(0,0,0,.08);
    --actr-font:          'Poppins', system-ui, -apple-system, sans-serif;
    --actr-transition:    0.22s cubic-bezier(0.4,0,0.2,1);
}

/* =============================================================
   SKIP LINKS e-MAG (fora do #actr-root)
============================================================= */
.actr-skip-nav {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
}

.actr-skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background: var(--actr-navy);
    color: var(--actr-white);
    font-family: var(--actr-font);
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.6rem 1.25rem;
    border-radius: 0 0 10px 0;
    text-decoration: none;
    white-space: nowrap;
}

.actr-skip-link:focus {
    position: fixed;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow: visible;
    outline: 3px solid var(--actr-emerald);
    outline-offset: 2px;
    z-index: 99999;
}

/* =============================================================
   ROOT — ISOLAMENTO TOTAL
   all:initial corta TODA herança e estilos do tema/plugins.
   Re-declaramos explicitamente o que o widget precisa.
============================================================= */
#actr-root {
    all: initial;
    position: fixed        !important;
    right: 0               !important;
    top: 25%               !important;
    z-index: 9999          !important;
    display: flex          !important;
    flex-direction: row    !important;
    align-items: flex-start!important;
    pointer-events: none   !important;
    font-family: var(--actr-font) !important;
    font-size: 16px        !important;
    line-height: 1.5       !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale  !important;
}

/* Todos os filhos: reset cirúrgico só nas props que temas costumam sobrescrever.
   NÃO usamos all:revert para não afetar display/opacity/transform/transition. */
#actr-root *,
#actr-root *::before,
#actr-root *::after {
    box-sizing:            border-box         !important;
    font-family:           var(--actr-font)   !important;
    -webkit-font-smoothing: antialiased       !important;
    -moz-osx-font-smoothing: grayscale        !important;
    text-decoration:       none;
    list-style:            none;
    border-collapse:       separate;
    word-break:            normal;
}

/* =============================================================
   RESET DE ELEMENTOS HTML NATIVOS (dentro do widget)
   Neutraliza o que temas definem em button, a, ul, p, svg, etc.
============================================================= */
#actr-root button {
    appearance:      none          !important;
    -webkit-appearance: none       !important;
    background:      transparent   !important;
    border:          none          !important;
    padding:         0             !important;
    margin:          0             !important;
    cursor:          pointer       !important;
    font-family:     var(--actr-font) !important;
    color:           inherit       !important;
    text-align:      left          !important;
}

#actr-root a {
    text-decoration: none          !important;
    color:           inherit       !important;
    background:      transparent   !important;
}

#actr-root ul, #actr-root ol {
    list-style:      none          !important;
    margin:          0             !important;
    padding:         0             !important;
}

#actr-root p {
    margin:          0             !important;
    padding:         0             !important;
}

#actr-root svg {
    display:         inline-block  !important;
    vertical-align:  middle        !important;
    overflow:        visible       !important;
}

/* =============================================================
   BOTÃO FLUTUANTE (#actr-toggle)
============================================================= */
#actr-root #actr-toggle {
    box-sizing: border-box     !important;
    pointer-events: all        !important;
    position: relative         !important;
    display: flex              !important;
    flex-direction: column     !important;
    align-items: center        !important;
    justify-content: center    !important;
    gap: 7px                   !important;
    background: var(--actr-navy)  !important;
    color: var(--actr-white)      !important;
    border: none               !important;
    border-radius: 12px 0 0 12px !important;
    padding: 16px 11px         !important;
    cursor: pointer            !important;
    box-shadow: -3px 4px 18px rgba(0,46,71,.30), 0 1px 4px rgba(0,0,0,.12) !important;
    transition: background var(--actr-transition),
                box-shadow var(--actr-transition),
                transform var(--actr-transition) !important;
    min-width: 50px            !important;
    outline: none              !important;
    text-decoration: none      !important;
    font-family: var(--actr-font) !important;
}

/* Faixa emerald à esquerda */
#actr-root #actr-toggle::before {
    content: ''                !important;
    position: absolute         !important;
    left: 0                    !important;
    top: 50%                   !important;
    transform: translateY(-50%) !important;
    height: 52%                !important;
    width: 3px                 !important;
    background: var(--actr-emerald) !important;
    border-radius: 0 3px 3px 0 !important;
    transition: height var(--actr-transition), background var(--actr-transition) !important;
}

#actr-root #actr-toggle:hover::before,
#actr-root #actr-toggle:focus-visible::before {
    height: 72%                  !important;
    background: var(--actr-emerald-hover) !important;
}

#actr-root #actr-toggle svg {
    width: 22px                  !important;
    height: 22px                 !important;
    flex-shrink: 0               !important;
    fill: var(--actr-white)      !important;
    stroke: none                 !important;
    transition: transform var(--actr-transition), fill var(--actr-transition) !important;
}

#actr-root #actr-toggle:hover,
#actr-root #actr-toggle:focus-visible {
    background: var(--actr-navy-light)   !important;
    box-shadow: -5px 6px 24px rgba(0,46,71,.35), 0 1px 4px rgba(0,0,0,.12) !important;
}

#actr-root #actr-toggle:hover svg {
    fill: var(--actr-emerald)    !important;
    transform: scale(1.1)        !important;
}

#actr-root #actr-toggle:active {
    transform: translateX(-2px)  !important;
}

#actr-root #actr-toggle:focus-visible {
    outline: 3px solid var(--actr-emerald) !important;
    outline-offset: -3px         !important;
}

#actr-root .actr-toggle-label {
    font-family: var(--actr-font) !important;
    font-size: 9px               !important;
    font-weight: 700             !important;
    letter-spacing: .1em         !important;
    text-transform: uppercase    !important;
    color: rgba(255,255,255,.55) !important;
    writing-mode: vertical-rl    !important;
    transition: color var(--actr-transition) !important;
    line-height: 1               !important;
}

#actr-root #actr-toggle:hover .actr-toggle-label {
    color: var(--actr-emerald)   !important;
}

/* =============================================================
   PAINEL (#actr-panel)
============================================================= */
#actr-root #actr-panel {
    pointer-events: all          !important;
    position: absolute           !important;
    right: 50px                  !important;
    top: 0                       !important;
    width: 300px                 !important;
    background: var(--actr-white) !important;
    border-radius: var(--actr-radius-panel) 0 0 var(--actr-radius-panel) !important;
    box-shadow: var(--actr-shadow-panel) !important;
    border: 1px solid var(--actr-gray-200) !important;
    border-right: none           !important;
    overflow: hidden             !important;
    transform: translateX(10px)  !important;
    opacity: 0                   !important;
    transition: transform var(--actr-transition), opacity var(--actr-transition) !important;
}

#actr-root #actr-panel[hidden] {
    display: none !important;
}

#actr-root #actr-panel.actr-is-open {
    transform: translateX(0) !important;
    opacity: 1               !important;
}

/* =============================================================
   CABEÇALHO DO PAINEL
============================================================= */
#actr-root .actr-panel-header {
    display: flex               !important;
    align-items: center         !important;
    gap: 10px                   !important;
    padding: 16px 16px 12px     !important;
    background: linear-gradient(135deg, var(--actr-navy) 0%, #004e73 100%) !important;
    border-bottom: 3px solid var(--actr-emerald) !important;
}

#actr-root .actr-panel-icon {
    background: rgba(29,201,138,.18) !important;
    border-radius: 10px         !important;
    width: 38px                 !important;
    height: 38px                !important;
    display: flex               !important;
    align-items: center         !important;
    justify-content: center     !important;
    flex-shrink: 0              !important;
}

#actr-root .actr-panel-icon svg {
    width: 20px                 !important;
    height: 20px                !important;
    stroke: var(--actr-emerald) !important;
    fill: none                  !important;
}

#actr-root .actr-panel-title {
    font-family: var(--actr-font) !important;
    font-size: 0.9rem           !important;
    font-weight: 800            !important;
    color: var(--actr-white)    !important;
    margin: 0                   !important;
    line-height: 1.2            !important;
    letter-spacing: -.01em      !important;
}

#actr-root .actr-panel-subtitle {
    font-size: 9px              !important;
    font-weight: 700            !important;
    letter-spacing: .1em        !important;
    text-transform: uppercase   !important;
    color: rgba(255,255,255,.45) !important;
    margin: 2px 0 0             !important;
    display: block              !important;
    font-family: var(--actr-font) !important;
}

#actr-root .actr-close-btn {
    box-sizing: border-box      !important;
    margin-left: auto           !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 8px          !important;
    width: 30px                 !important;
    height: 30px                !important;
    display: flex               !important;
    align-items: center         !important;
    justify-content: center     !important;
    cursor: pointer             !important;
    color: rgba(255,255,255,.7) !important;
    transition: background var(--actr-transition), color var(--actr-transition) !important;
    flex-shrink: 0              !important;
    outline: none               !important;
    padding: 0                  !important;
    font-family: var(--actr-font) !important;
}

#actr-root .actr-close-btn svg {
    width: 14px                 !important;
    height: 14px                !important;
    stroke: currentColor        !important;
    fill: none                  !important;
}

#actr-root .actr-close-btn:hover,
#actr-root .actr-close-btn:focus-visible {
    background: rgba(255,255,255,.18) !important;
    color: var(--actr-white)    !important;
}

#actr-root .actr-close-btn:focus-visible {
    outline: 2px solid var(--actr-emerald) !important;
    outline-offset: 2px         !important;
}

/* =============================================================
   SEÇÕES INTERNAS
============================================================= */
#actr-root .actr-section {
    padding: 14px 16px          !important;
    border-bottom: 1px solid var(--actr-gray-100) !important;
}

#actr-root .actr-section:last-of-type {
    border-bottom: none         !important;
}

#actr-root .actr-section-label {
    font-size: 9px              !important;
    font-weight: 800            !important;
    letter-spacing: .1em        !important;
    text-transform: uppercase   !important;
    color: var(--actr-gray-400) !important;
    margin: 0 0 10px            !important;
    display: block              !important;
    font-family: var(--actr-font) !important;
}

/* =============================================================
   CONTROLES DE FONTE
============================================================= */
#actr-root .actr-font-controls {
    display: flex               !important;
    align-items: stretch        !important;
    gap: 6px                    !important;
}

#actr-root .actr-font-btn {
        box-sizing: border-box      !important;
    flex: 1                     !important;
    background: var(--actr-gray-50)  !important;
    border: 1px solid var(--actr-gray-200) !important;
    border-radius: var(--actr-radius-btn) !important;
    padding: 8px 4px            !important;
    cursor: pointer             !important;
    font-family: var(--actr-font) !important;
    font-weight: 700            !important;
    color: var(--actr-text-dark) !important;
    transition: all var(--actr-transition) !important;
    outline: none               !important;
    text-align: center          !important;
    line-height: 1              !important;
}

#actr-root .actr-font-btn:first-child  { font-size: 0.8rem  !important; }
#actr-root .actr-font-btn.actr-font-btn--mid { font-size: 1rem !important; }
#actr-root .actr-font-btn:last-child   { font-size: 1.2rem  !important; }

#actr-root .actr-font-btn sup {
    font-size: .6em             !important;
    vertical-align: super       !important;
    line-height: 0              !important;
}

#actr-root .actr-font-btn:hover,
#actr-root .actr-font-btn:focus-visible {
    background: var(--actr-navy)  !important;
    border-color: var(--actr-navy) !important;
    color: var(--actr-white)    !important;
}

#actr-root .actr-font-btn:focus-visible {
    outline: 2px solid var(--actr-emerald) !important;
    outline-offset: 2px         !important;
}

#actr-root .actr-font-btn.actr-is-active {
    background: var(--actr-emerald)  !important;
    border-color: var(--actr-emerald) !important;
    color: var(--actr-white)    !important;
}

#actr-root .actr-status-text {
    font-size: 10px             !important;
    color: var(--actr-gray-400) !important;
    margin: 6px 0 0             !important;
    min-height: 14px            !important;
    font-weight: 600            !important;
    display: block              !important;
    font-family: var(--actr-font) !important;
}

/* =============================================================
   GRID DE CONTRASTE
============================================================= */
#actr-root .actr-contrast-grid {
    display: grid               !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px                    !important;
}

#actr-root .actr-contrast-btn {
        box-sizing: border-box      !important;
    display: flex               !important;
    flex-direction: column      !important;
    align-items: center         !important;
    gap: 5px                    !important;
    padding: 8px 4px            !important;
    background: var(--actr-gray-50)  !important;
    border: 1px solid var(--actr-gray-200) !important;
    border-radius: var(--actr-radius-btn) !important;
    cursor: pointer             !important;
    font-family: var(--actr-font) !important;
    font-size: 10px             !important;
    font-weight: 700            !important;
    color: var(--actr-text-light) !important;
    transition: all var(--actr-transition) !important;
    outline: none               !important;
    width: 100%                 !important;
}

#actr-root .actr-contrast-btn:hover,
#actr-root .actr-contrast-btn:focus-visible {
    border-color: var(--actr-emerald) !important;
    color: var(--actr-text-dark) !important;
}

#actr-root .actr-contrast-btn:focus-visible {
    outline: 2px solid var(--actr-emerald) !important;
    outline-offset: 2px         !important;
}

#actr-root .actr-contrast-btn.actr-is-active {
    border-color: var(--actr-emerald)  !important;
    background: rgba(29,201,138,.08)   !important;
    color: var(--actr-navy)            !important;
}

#actr-root .actr-contrast-preview {
    width: 42px                 !important;
    height: 28px                !important;
    border-radius: 6px          !important;
    display: flex               !important;
    align-items: center         !important;
    justify-content: center     !important;
    font-size: 13px             !important;
    font-weight: 800            !important;
    font-family: var(--actr-font) !important;
    border: 1.5px solid transparent !important;
}

#actr-root .actr-contrast-preview--default {
    background: #f8fafc         !important;
    color: #2A454A              !important;
    border-color: #e2e8f0       !important;
}

#actr-root .actr-contrast-preview--dark {
    background: #000            !important;
    color: #fff                 !important;
    border-color: #333          !important;
}

#actr-root .actr-contrast-preview--yellow {
    background: #000000         !important;
    color: #FFD700              !important;
    border-color: #FFD700       !important;
}

/* =============================================================
   LISTA DE ATALHOS
============================================================= */
#actr-root .actr-shortcut-hint {
    font-weight: 600            !important;
    text-transform: none        !important;
    letter-spacing: 0           !important;
    color: var(--actr-gray-400) !important;
    font-family: var(--actr-font) !important;
}

#actr-root .actr-shortcuts-list {
    list-style: none            !important;
    margin: 0                   !important;
    padding: 0                  !important;
    display: flex               !important;
    flex-direction: column      !important;
    gap: 4px                    !important;
}

#actr-root .actr-shortcuts-list li {
    margin: 0                   !important;
    padding: 0                  !important;
    list-style: none            !important;
}

#actr-root .actr-shortcut-link {
    display: flex               !important;
    align-items: center         !important;
    gap: 8px                    !important;
    padding: 6px 8px            !important;
    border-radius: 8px          !important;
    text-decoration: none       !important;
    color: var(--actr-text-dark) !important;
    font-size: 12px             !important;
    font-weight: 600            !important;
    font-family: var(--actr-font) !important;
    transition: background var(--actr-transition), color var(--actr-transition) !important;
    outline: none               !important;
    background: transparent     !important;
}

#actr-root .actr-shortcut-link:hover,
#actr-root .actr-shortcut-link:focus-visible {
    background: rgba(29,201,138,.08) !important;
    color: var(--actr-navy)     !important;
}

#actr-root .actr-shortcut-link:focus-visible {
    outline: 2px solid var(--actr-emerald) !important;
    outline-offset: -2px        !important;
}

#actr-root .actr-key {
    background: var(--actr-navy) !important;
    color: var(--actr-white)    !important;
    font-size: 9px              !important;
    font-weight: 800            !important;
    width: 20px                 !important;
    height: 20px                !important;
    border-radius: 5px          !important;
    display: flex               !important;
    align-items: center         !important;
    justify-content: center     !important;
    flex-shrink: 0              !important;
    font-family: var(--actr-font) !important;
    letter-spacing: 0           !important;
    box-shadow: 0 2px 0 rgba(0,0,0,.25) !important;
}

/* =============================================================
   RODAPÉ DO PAINEL
============================================================= */
#actr-root .actr-panel-footer {
    display: flex               !important;
    align-items: center         !important;
    justify-content: space-between !important;
    padding: 10px 16px 14px     !important;
    background: var(--actr-gray-50) !important;
    border-top: 1px solid var(--actr-gray-100) !important;
}

#actr-root .actr-reset-btn {
        box-sizing: border-box      !important;
    display: inline-flex        !important;
    align-items: center         !important;
    gap: 5px                    !important;
    background: none            !important;
    border: 1px solid var(--actr-gray-200) !important;
    border-radius: 8px          !important;
    padding: 5px 10px           !important;
    font-family: var(--actr-font) !important;
    font-size: 10px             !important;
    font-weight: 700            !important;
    color: var(--actr-text-light) !important;
    cursor: pointer             !important;
    transition: all var(--actr-transition) !important;
    outline: none               !important;
    text-decoration: none       !important;
}

#actr-root .actr-reset-btn:hover,
#actr-root .actr-reset-btn:focus-visible {
    border-color: var(--actr-emerald) !important;
    color: var(--actr-navy)     !important;
    background: rgba(29,201,138,.05) !important;
}

#actr-root .actr-reset-btn:focus-visible {
    outline: 2px solid var(--actr-emerald) !important;
    outline-offset: 2px         !important;
}

#actr-root .actr-icon-sm {
    width: 13px                 !important;
    height: 13px                !important;
    stroke: currentColor        !important;
    fill: none                  !important;
}

#actr-root .actr-emag-badge {
    font-size: 8px              !important;
    font-weight: 800            !important;
    letter-spacing: .12em       !important;
    text-transform: uppercase   !important;
    background: var(--actr-navy) !important;
    color: var(--actr-emerald)  !important;
    padding: 3px 7px            !important;
    border-radius: 5px          !important;
    font-family: var(--actr-font) !important;
    display: inline-block       !important;
}

/* =============================================================
   MODOS DE CONTRASTE
============================================================= */

/* Modo escuro */
html.actr-contrast-dark {
    filter: invert(1) hue-rotate(180deg);
}

html.actr-contrast-dark img,
html.actr-contrast-dark video,
html.actr-contrast-dark iframe {
    filter: invert(1) hue-rotate(180deg);
}

/* Mantém o widget sem inversão */
html.actr-contrast-dark #actr-panel {
    filter: invert(1) hue-rotate(180deg);
}

/* Modo alto contraste: preto e amarelo */
html.actr-contrast-yellow *:not(#actr-root):not(#actr-root *) {
    background-color: #000000 !important;
    color: #FFD700            !important;
    border-color: #FFD700     !important;
}

html.actr-contrast-yellow img:not(#actr-root img) {
    filter: grayscale(100%) contrast(120%) !important;
}

html.actr-contrast-yellow a:not(#actr-root a) {
    color: #FFD700         !important;
    text-decoration: underline !important;
}

/* =============================================================
   RESPONSIVIDADE
============================================================= */
@media (max-width: 480px) {
    #actr-root #actr-panel {
        width: calc(100vw - 58px) !important;
    }
}