/* Barra de acessibilidade */

/* APAGAR
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
  } */

  .social-icons a:focus {
	outline: 2px solid #FFFFFF; /* Cor de foco */
	outline-offset: 2px;
    background-color: transparent;
  }

  /* Foco visível para acessibilidade */
summary:focus {
    outline: 2px dashed #005fcc;
  }
  
  summary a {
    color: #ffcc00; /* Amarelo para bom contraste */
    text-decoration: none;
  }
  
  summary a:hover {
    text-decoration: underline;
  }

/* Melhorando acessibilidade para navegação via teclado */
ul li a:focus {
    outline: 2px solid var(--white);
    outline-offset: 2px;
    background-color: transparent;
  }  

#acessibility-icon-container { 
    position: fixed; 
    top: 10px; 
    right: 10px; 
    z-index: 1001; /* Z-index mais alto para sobrepor a barra */ 
    cursor: pointer; 
} 
    
#accessibility-icon { 
    width: 40px; 
    height: 40px; 
}

/* Estilo da caixa de diálogo */
.tooltip {
    display: none; /* Inicialmente escondido */
    position: absolute;
    bottom: 10%; 
    right: 0;
    transform: translateX(-50%);
    background-color: #203262; 
    color: white;
    padding: 20px 15px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Triângulo abaixo da caixa */
.tooltip::after {
    content: "";
    position: absolute;
    top: 100%; /* Na parte inferior da caixa */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #203262 transparent transparent transparent;
}

/* Exibir a caixa ao passar o mouse */
#accessibility-icon-container:hover .tooltip {
    display: block;
}

/* Barra de acessibilidade oculta por padrão */
#accessibility-bar {
    display: none;
    position: fixed;
    top: 70px;
    right: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
    padding: 10px;
    border-radius: 5px;
    z-index: 1000;
}

.accessibility-buttons {
    display: flex;
    flex-direction: column;
}

.accessibility-buttons button {
    margin: 5px;
    padding: 8px;
    font-size: 16px;
    cursor: pointer;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Estilo da caixa de diálogo */
.tooltip {
    display: none; /* Inicialmente escondido */
    position: absolute;
    bottom: 10%; 
    right: 0;
    transform: translateX(-50%);
    background-color: #203262; 
    color: white;
    padding: 20px 15px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}


/* SVGs em modo escuro */
.dark-mode img[src$=".svg"] {
    filter: invert(0) grayscale(1) brightness(1.5) !important;
}


.high-contrast-mode img {
    color: #FFD700; /* Cor ao ativar o modo contraste (dourado) */
}


.high-contrast-mode img[src*="codiub-branco.svg"] {
    filter: invert(29%) sepia(448%) saturate(267%) hue-rotate(-4deg);
}

.svg-icon {
    fill: white;
}

.high-contrast-mode .svg-icon {
    fill: #FFD700;
}

  /* Links com contraste aumentado */ 
  a.high-contrast { 
	color: #FFFFFF; /* Texto do link branco */ 
	background-color: #007ACC; /* Fundo do link azul */ 
	padding: 5px; 
	text-decoration: none; 
	border-radius: 3px; 
  } 
  
  a.high-contrast:hover { 
	background-color: #005BB5; /* Fundo do link ao passar o mouse */ 
  }


/* Modo alto contraste */


.high-contrast-mode {
    background-color: #000;
    color: #fff;
}

.high-contrast-mode input {
	border: solid 1px #FFD700;
	outline: none;
	background: #171717;
	color: white;
}

.high-contrast-mode #menuHeader, .high-contrast-mode .header-info-bg, .high-contrast-mode .footer, .high-contrast-mode .dropdown-content, .high-contrast-mode  .dark-mode .header-top{
    background: #303134;
}

.high-contrast-mode p, .high-contrast-mode strong, .high-contrast-mode span, .high-contrast-mode nav i, .high-contrast-mode tr, .high-contrast-mode h1, .high-contrast-mode h2, .high-contrast-mode h3, .high-contrast-mode h4, .high-contrast-mode h5, .high-contrast-mode h6, .high-contrast-mode a, .high-contrast-mode .tab-button, .high-contrast-mode .footer-contact li, .high-contrast-mode .footer-links ul li a, .high-contrast-mode img, .high-contrast-mode table, 
.high-contrast-mode th, .high-contrast-mode td, .high-contrast-mode tr, .high-contrast-mode span#word { 
	color: #FFD700; /* Cor amarela dourada para o modo alto contraste */ 
}

.high-contrast-mode .card { background-color: #000; box-shadow: 0 2px rgb(250 247 247 / 12%);}    
.high-contrast-mode .description { background-color: #000; box-shadow: 0 2px rgb(250 247 247 / 12%);}    


/* Modo escuro *//*
Botão Darkmode
*/
.theme-switch {
	display: inline-block;
	height: 24px;
	position: relative;
	width: 40px;
}

.theme-switch input {
	display:none;
}

.slider {
	background-color: #203262;
	bottom: 0;
	cursor: pointer;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: .4s;
}

.slider:before {
	background-color: #fff;
	bottom: 4px;
	content: "";
	height: 16px;
	left: 4px;
	position: absolute;
	transition: .4s;
	width: 16px;
}

input:checked + .slider {
	background-color: #00bef2;
}

input:checked + .slider:before {
	transform: translateX(16px);
}

.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}

/*
Darkmode.
*/

.dark-mode #menuHeader, .dark-mode .header-info-bg, .dark-mode .footer, .dark-mode .dropdown-content, .dark-mode .header-top {
    background: #000000;
}

.dark-mode .ui-degrade-transparent-bg {
	transition: all .5s;
	background: linear-gradient(rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    backdrop-filter: blur(10px);
}

.dark-mode .fc-daygrid-day-number {
	color: white;
}

.dark-mode .fc-col-header-cell-cushion {
	color: white;
}

.dark-mode .iu-skyblue  { color: #00bef2;}

.dark-textarea {
	border: solid 1px #e0e0e0;
	outline: none;
}


.dark-mode .dark-textarea {
	border: solid 1px #00bef2;
	outline: none;
	background: #171717;
	color: white;
}

select {
	border: solid 1px black;
	outline: none;
	background: white;
	color: black;
}

.dark-mode select {
	border: solid 1px #00bef2;
	outline: none;
	background: #171717;
	color: white;
}

.dark-mode input {
	border: solid 1px #00bef2;
	outline: none;
	background: #171717;
	color: white;
}

.dark-mode {
	transition-duration: .4s;
	background-color: #202124;
	color: white;
}

.dark-mode svg {
    fill: #FFFFFF; /* Cor branca para o modo escuro */
}

.darkmode p.menuitem {color:white;}

.dark-mode menu {color: white;}

.dark-mode .ui-degrade-bg {
	transition: 0.3s;
    background: linear-gradient(-180deg, rgb(48,49,52,0.90) 0%, rgb(32,33,36,0.90) 100%)  !important;
}

.dark-mode p.dv-padding-top-ldpi.dv-padding-right-hdpi.dv-padding-bottom-ldpi.dv-padding-left-hdpi.dv-radius.dv-bold.iu-blue-bg.dv-white {
    color: black;
	background: #f2f9ff;
}

.dark-mode .ui-white-bg { background: #171717; }

.dark-mode .solucoes-container { background: #171717; }

.dark-mode .solucao-card { background: #171717; box-shadow: 0 0px 1px rgb(255 255 255); } 

.dark-mode .leia-mais-button { background: #171717; box-shadow: 0 0px 1px rgb(255 255 255); } 

.dark-mode .dv-black { color: white;}

.dark-mode .iu-gray-bg { background: #E0E0E0; }

.dark-mode .iu-blue-bg { background: #203262; }

.dark-mode p, .dark-mode strong p { color: white; }

.dark-mode h1, .dark-mode strong h1 { color: white; }

.dark-mode h2, .dark-mode strong h2 { color: white; }

.dark-mode h3, .dark-mode strong h3 { color: white; }

.dark-mode h4, .dark-mode strong h4 { color: white; }

.dark-mode h5, .dark-mode strong h5 { color: white; }

.dark-mode h6, .dark-mode strong h6 { color: white; }

.dark-mode td { color: white; }

.dark-mode li { color: white; }

.dark-mode ul { color: white; }

.dark-mode tr { color: white; }

.dark-mode span { color: white; }

.dark-mode a { color: white; text-decoration: underline; }

.dark-mode .footer-links ul li a { color: white; }

.dark-mode .dv-gray-bg { background: #303134; }

.dark-mode .section-title { color: white; }

.dark-mode .dropdown-content-tag {
	box-shadow: 0 0 1.25rem rgb(30 34 40 / 6%);
	background: rgba(0,0,0,.90);
}

.dark-mode .owl-nav > div {
	margin-top: -26px;
	position: absolute;
	top: 50%;
	color: white;
}

.dark-mode .popup { background: #171717; }

.dark-mode .iu-skyblue { color: #00bef2; }

.dark-mode .ui-black-bg { 
	border: solid 3px #00bef2;
	background: none; }

.dark-mode .card { background-color: #000; box-shadow: 0 2px rgb(250 247 247 / 12%);}    
.dark-mode .description { background-color: #000; box-shadow: 0 2px rgb(250 247 247 / 12%);}    

/* Inverter cores */
.invert-colors {
    filter: invert(1); 
	background-color: #000;
}

/* Desabilitar animações */
.disable-animations * {
    animation: none !important;
    transition: none !important;
}

/* Opacidade de texto para clareza */
.low-vision {
    color: rgba(0, 0, 0, 0.9);
}

@media (max-width: 768px) {
    #accessibility-icon { 
        width: 40px; 
        height: 40px; 
    }

    .tooltip {
        font-size: 12px;
        padding: 15px 10px;
    }

    #accessibility-bar {
        width: 90%;
        right: 5%;
        top: 50px;
    }

    .accessibility-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .accessibility-buttons button {
        width: 45%;
        font-size: 14px;
        padding: 10px;
    }
}

@media (max-width: 480px) {
    #accessibility-icon { 
        width: 30px; 
        height: 30px; 
    }

    .tooltip {
        font-size: 10px;
        padding: 10px 5px;
    }

    #accessibility-bar {
        top: 40px;
    }

    .accessibility-buttons button {
        font-size: 12px;
        padding: 8px;
    }
}