/* Coloque isso na LINHA 1 do seu style.css, bem no topo: */
@import url("https://cdn.jsdelivr.net/gh/vsalvino/computer-modern@main/fonts/bright.css");
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');


/* ==============================================
   Widget de Gatilho (Selinho colado)
============================================== */
#obsc-a11y-trigger {
   position: fixed;
   right: -10px;
   top: 85%;
   transform: translateY(-50%);
   width: 44px;
   height: 44px;
   background: #6a3cbc;
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-left: none;
   border-radius: 8px 0px 0 8px;
   box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.5);
   cursor: pointer;
   z-index: 999999;
   padding: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s, width 0.2s;
}

#obsc-a11y-trigger:hover {
   background: #814de6;
   width: 48px;
   right: 0;
}

#obsc-a11y-trigger svg {
   width: 22px;
   height: 22px;
}

/* ==============================================
   Painel Principal
============================================== */
.obsc-a11y-panel {
   box-sizing: border-box;
   position: fixed;
   right: 55px;
   top: 50%;
   width: 320px;
   max-height: 85vh;
   background: #1e1e1e;
   border: 1px solid #333;
   border-radius: 12px;
   box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.8);
   display: flex;
   flex-direction: column;
   z-index: 999999;
   font-family: 'Merriweather Sans', Arial, sans-serif;
   transform: translateY(-50%) translateX(-20px);
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.obsc-a11y-panel.open {
   transform: translateY(-50%) translateX(0);
   opacity: 1;
   visibility: visible;
}

.obsc-a11y-panel * {
   box-sizing: border-box;
}

.obsc-a11y-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 20px;
   background: #252525;
   border-bottom: 1px solid #333;
   border-radius: 12px 12px 0 0;
}

.obsc-a11y-title {
   margin: 0;
   font-size: 16px;
   color: #fff;
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: bold;
}

#obsc-a11y-close {
   background: none;
   border: none;
   color: #888;
   font-size: 24px;
   cursor: pointer;
   transition: 0.2s;
   padding: 0;
}

#obsc-a11y-close:hover {
   color: #fff;
}

.obsc-a11y-body {
   padding: 15px;
   overflow-y: auto;
   overflow-x: hidden;
}

/* Customização sutil da Scrollbar */
.obsc-a11y-body::-webkit-scrollbar {
   width: 6px;
}

.obsc-a11y-body::-webkit-scrollbar-track {
   background: #1e1e1e;
}

.obsc-a11y-body::-webkit-scrollbar-thumb {
   background: #444;
   border-radius: 10px;
}

.obsc-a11y-body::-webkit-scrollbar-thumb:hover {
   background: #666;
}

.obsc-module-title {
   color: #fff;
   font-size: 12px;
   margin: 0 0 12px 0;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-weight: 700;
}

/* ==============================================
   Controles Compactados (+ e -)
============================================== */
.obsc-compact-sliders {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-bottom: 15px;
}

.obsc-card-row {
   background: #252525;
   border: 1px solid #333;
   border-radius: 8px;
   padding: 10px 15px;
   display: flex;
   align-items: center;
}

.obsc-card-title {
   font-size: 13px;
   color: #fff;
   font-weight: 600;
   margin-bottom: 8px;
   width: 100%;
}

.obsc-ctrl-group {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   background: #111;
   border-radius: 50px;
   padding: 3px;
}

.obsc-btn-calc {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #6a3cbc;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: 0.2s;
   padding: 0;
}

.obsc-btn-calc:hover {
   background: #9676d0;
}

.obsc-btn-calc svg {
   width: 14px;
   height: 14px;
}

.obsc-val-display {
   font-size: 12px;
   color: #fff;
   font-weight: bold;
   flex-grow: 1;
   text-align: center;
}

/* ==============================================
   Sistema de Grade
============================================== */
.obsc-grid-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
   margin-bottom: 20px;
}

.obsc-card {
   background: #252525;
   border: 1px solid #333;
   border-radius: 8px;
   padding: 12px 5px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s;
   color: #ffffff;
}

.obsc-card:hover {
   background: #333;
   border-color: #555;
}

.obsc-card.active {
   border-color: #9676d0;
   box-shadow: 0 0 0 1px #9676d0;
   color: #fff;
}

.obsc-card.active .obsc-icon-circle {
   background: #9676d0;
   color: #fff;
}

.obsc-a11y-panel .fa {
   color: #fff;
}

.obsc-icon-circle {
   width: 34px;
   height: 34px;
   background: #9676d0;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 8px;
   font-weight: bold;
   font-size: 15px;
   transition: all 0.2s;
}

.obsc-card-text {
   font-size: 11px;
   text-align: center;
   line-height: 1.3;
}

/* ==============================================
   Rodapé
============================================== */
.obsc-a11y-footer {
   padding: 15px;
   background: #252525;
   border-top: 1px solid #333;
   border-radius: 0 0 12px 12px;
}

#obsc-a11y-reset {
   width: 100%;
   padding: 12px;
   border-radius: 6px;
   border: none;
   background: #6a3cbc;
   color: #fff;
   font-size: 14px;
   font-weight: bold;
   cursor: pointer;
   transition: 0.2s;
}

#obsc-a11y-reset:hover {
   background: #9676d0;
}

/* ==============================================
   EFEITOS DE ACESSIBILIDADE (Classes do Body/Html)
============================================== */

/* O :not() blinda os ícones (FontAwesome, Jnews) para não desaparecerem nas fontes customizadas */
body.a11y-readable-font *:not(i):not([class*="fa"]):not([class*="icon"]):not([class*="jeg"]) {
   font-family: Arial, Arial, -serif !important;
}

/* Fontes Cíclicas para Dislexia (Sem quebrar ícones) */
body.a11y-font-verdana *:not(i):not([class*="fa"]):not([class*="icon"]):not([class*="jeg"]) {
   font-family: Verdana, sans-serif !important;
}

body.a11y-font-helvetica *:not(i):not([class*="fa"]):not([class*="icon"]):not([class*="jeg"]) {
   font-family: Helvetica, sans-serif !important;
}

body.a11y-font-arial *:not(i):not([class*="fa"]):not([class*="icon"]):not([class*="jeg"]) {
   font-family: Arial, sans-serif !important;
}

body.a11y-font-courier *:not(i):not([class*="fa"]):not([class*="icon"]):not([class*="jeg"]) {
   font-family: "Courier New", Courier, monospace !important;
}

body.a11y-font-cmu *:not(i):not([class*="fa"]):not([class*="icon"]):not([class*="jeg"]) {
   font-family: "Computer Modern Bright", sans-serif;
}

body.a11y-font-comic *:not(i):not([class*="fa"]):not([class*="icon"]):not([class*="jeg"]) {
   font-family: "Comic Sans MS", "Comic Sans", "Itim", cursive !important;
}

/* Peso e Cursor */
body.a11y-font-weight *:not(i):not([class*="fa"]):not([class*="icon"]):not([class*="jeg"]) {
   font-weight: 800 !important;
}

body.a11y-big-cursor,
body.a11y-big-cursor * {
   cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='2' d='M4 2l14 10-6 2 4 8-3 2-4-8-3 4z'/%3E%3C/svg%3E"), auto !important;
}

/* Módulos Globais de Alinhamento (Aplicados no site inteiro) */
body.a11y-align-left p,
body.a11y-align-left h1,
body.a11y-align-left h2,
body.a11y-align-left h3,
body.a11y-align-left li {
   text-align: left !important;
}

body.a11y-align-center p,
body.a11y-align-center h1,
body.a11y-align-center h2,
body.a11y-align-center h3,
body.a11y-align-center li {
   text-align: center !important;
}

body.a11y-align-right p,
body.a11y-align-right h1,
body.a11y-align-right h2,
body.a11y-align-right h3,
body.a11y-align-right li {
   text-align: right !important;
}

/* Filtros Visuais (Aplicados no viewport para não pular a tela) */
html.a11y-high-contrast .jeg_viewport {
   filter: contrast(140%) saturate(120%) !important;
}

html.a11y-monochrome .jeg_viewport {
   filter: grayscale(100%) !important;
}

html.a11y-light-contrast .jeg_viewport {
   filter: invert(1) hue-rotate(180deg) !important;
   background-color: #fff !important;
}

html.a11y-light-contrast .jeg_viewport img,
html.a11y-light-contrast .jeg_viewport video,
html.a11y-light-contrast .jeg_viewport iframe {
   filter: invert(1) hue-rotate(180deg) !important;
}

/* Ocultar Imagens e Animações */
body.a11y-hide-images img,
body.a11y-hide-images video,
body.a11y-hide-images iframe {
   visibility: hidden !important;
}

body.a11y-hide-images * {
   background-image: none !important;
}

body.a11y-stop-animations,
body.a11y-stop-animations * {
   transition: none !important;
   animation: none !important;
   scroll-behavior: auto !important;
}

/* Destaques (Foco em todo o conteúdo para inclusão total) */
body.a11y-highlight-content *:hover {
   outline: 2px solid #6a3cbc !important;
   outline-offset: 2px !important;
}

body.a11y-highlight-links a {
   background-color: #ffeb3b !important;
   color: #000 !important;
   text-decoration: underline !important;
   font-weight: bold !important;
}

body.a11y-highlight-links a * {
   color: #000 !important;
   fill: #000 !important;
}

/* Guias de Leitura */
.obsc-a11y-read-line {
   display: none;
   position: fixed;
   left: 0;
   width: 100%;
   height: 4px;
   background: #6a3cbc;
   border-top: 1px solid #fff;
   border-bottom: 1px solid #fff;
   z-index: 999998;
   pointer-events: none;
}

.obsc-a11y-read-mask {
   display: none;
   position: fixed;
   left: 0;
   width: 100%;
   background: rgba(0, 0, 0, 0.85);
   z-index: 999998;
   pointer-events: none;
}

.obsc-mask-top {
   top: 0;
}

.obsc-mask-bottom {
   bottom: 0;
}