/* ============================================================================= BARRA DE ACESSIBILIDADE ============================================================================= */ .barra-acessibilidade { display: flex; align-items: center; gap: 12px; padding: 6px 0; background-color: #f5f5f5; border-bottom: 1px solid #ddd; font-size: 13px; } /* Link "Pular para o conteúdo" — visível apenas no foco (teclado) */ .pular-navegacao { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .pular-navegacao:focus { position: static; width: auto; height: auto; padding: 4px 10px; background: #000; color: #fff; font-weight: bold; text-decoration: none; border-radius: 3px; z-index: 9999; } /* ============================================================================= MODO ALTO CONTRASTE Aplicado quando tem a classe .alto-contraste ============================================================================= */ /* Base — fundo preto, texto branco */ .alto-contraste, .alto-contraste body, .alto-contraste .header, .alto-contraste .pre-header { background-color: #000 !important; color: #fff !important; } /* Tipografia */ .alto-contraste h1, .alto-contraste h2, .alto-contraste h3, .alto-contraste h4, .alto-contraste h5, .alto-contraste h6, .alto-contraste p, .alto-contraste span, .alto-contraste li, .alto-contraste td, .alto-contraste th { color: #fff !important; } /* Links */.alto-contraste a, .alto-contraste a:link, .alto-contraste a:visited { color: #ff0 !important; text-decoration: none !important; } .alto-contraste a:hover, .alto-contraste a:focus { color: #0ff !important; outline: 2px solid #0ff !important; outline-offset: 2px !important; } /* ── Bootstrap — containers e layout ── */ .alto-contraste .container, .alto-contraste .row, .alto-contraste .col-md-1, .alto-contraste .col-md-2, .alto-contraste .col-md-3, .alto-contraste .col-md-4, .alto-contraste .col-md-5, .alto-contraste .col-md-6, .alto-contraste .col-md-7, .alto-contraste .col-md-8, .alto-contraste .col-md-9, .alto-contraste .col-md-10, .alto-contraste .col-md-11, .alto-contraste .col-md-12, .alto-contraste .col-sm-6, .alto-contraste .col-xs-12 { background-color: transparent !important; } /* ── Bootstrap — well (caixas de conteúdo) ── */ .alto-contraste .well, .alto-contraste .well-small, .alto-contraste .well-large { background-color: #000 !important; border-color: #fff !important; color: #fff !important; box-shadow: none !important; } /* ── Bootstrap — painéis ── */ .alto-contraste .panel, .alto-contraste .panel-default, .alto-contraste .panel-body { background-color: #000 !important; border-color: #fff !important; color: #fff !important; } .alto-contraste .panel-heading { background-color: #222 !important; color: #fff !important; border-bottom-color: #fff !important; } /* ── Bootstrap — tabelas ── */ .alto-contraste table, .alto-contraste .table { background-color: #000 !important; color: #fff !important; } .alto-contraste th, .alto-contraste td { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } .alto-contraste tr:nth-child(even) td { background-color: #111 !important; } .alto-contraste .table-bordered, .alto-contraste .table-bordered th, .alto-contraste .table-bordered td { border-color: #fff !important; } /* ── Bootstrap — formulários ── */ .alto-contraste input, .alto-contraste select, .alto-contraste textarea, .alto-contraste .form-control { background-color: #000 !important; color: #fff !important; border: 2px solid #ff0 !important; } .alto-contraste .input-group-btn .btn, .alto-contraste .input-group-btn .btn-primary { border: 2px solid #ff0 !important; padding: 5px 12px !important; height: 34px !important; line-height: 1.42857 !important; } .alto-contraste input::placeholder, .alto-contraste .form-control::placeholder { color: #aaa !important; } .alto-contraste input:focus, .alto-contraste select:focus, .alto-contraste textarea:focus, .alto-contraste .form-control:focus { outline: 2px solid #ff0 !important; outline-offset: 2px !important; box-shadow: none !important; } /* ── Bootstrap — botões ── */ .alto-contraste .btn, .alto-contraste button { background-color: #000 !important; color: #ff0 !important; border: 2px solid #ff0 !important; } .alto-contraste .btn:hover, .alto-contraste button:hover, .alto-contraste .btn:focus, .alto-contraste button:focus { background-color: #ff0 !important; color: #000 !important; outline: 2px solid #fff !important; } .alto-contraste .btn-primary { background-color: #000 !important; border-color: #ff0 !important; color: #ff0 !important; } .alto-contraste .btn-primary:hover, .alto-contraste .btn-primary:focus { background-color: #ff0 !important; color: #000 !important; } /* ── Bootstrap — input-group ── */ .alto-contraste .input-group-btn .btn { border-left: none !important; } /* ── Botão dropdown à esquerda do input — preserva borda direita ── */ .alto-contraste .search-panel.input-group-btn .btn { border-left: 2px solid #ff0 !important; border-right: 2px solid #ff0 !important; } /* ── Bootstrap — navbar ── */ .alto-contraste .navbar, .alto-contraste .navbar-default { background-color: #000 !important; border-color: #fff !important; } .alto-contraste .navbar-default .navbar-nav > li > a { color: #ff0 !important; } .alto-contraste .navbar-default .navbar-nav > li > a:hover, .alto-contraste .navbar-default .navbar-nav > .active > a { background-color: #ff0 !important; color: #000 !important; } /* ── Bootstrap — alertas ── */ .alto-contraste .alert { background-color: #000 !important; color: #fff !important; border: 2px solid #fff !important; } .alto-contraste .alert-warning { border-color: #ff0 !important; color: #ff0 !important; } /* ── Bootstrap — list-group ── */ .alto-contraste .list-group-item { background-color: #000 !important; border-color: #fff !important; color: #fff !important; } .alto-contraste .list-group-item:hover { background-color: #222 !important; } /* ── Cabeçalho ── */ .alto-contraste header { background-color: #000 !important; border-bottom: 2px solid #fff !important; } /* ── Barra azul decorativa ── */ .alto-contraste [style*="background:steelBlue"], .alto-contraste [style*="background: steelBlue"], .alto-contraste [style*="background:steelblue"], .alto-contraste [style*="background: steelblue"] { background: #fff !important; } /* ── Barra de acessibilidade no modo contraste ── */ .alto-contraste .barra-acessibilidade { background-color: #111 !important; border-bottom-color: #fff !important; } /* ── Imagens — não inverte, adiciona borda sutil ── */ .alto-contraste img { filter: brightness(0.9) contrast(1.1); border: 1px solid #555; } /* ── Remove backgrounds decorativos de divs com style inline ── */ .alto-contraste div[style*="background"], .alto-contraste section[style*="background"] { background-color: #000 !important; background-image: none !important; } /* ── kbd (teclas) no modal ── */ .alto-contraste kbd { background-color: #333 !important; color: #fff !important; border-color: #fff !important; } /* ── Modal Bootstrap ── */ .alto-contraste .modal-content { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } /* ── Modal — corrige sobreposição com seletor div[style*="background"] ── */ .alto-contraste .modal-header, .alto-contraste .modal-body, .alto-contraste .modal-footer { background-color: #111 !important; background-image: none !important; } /* ── Modal — dialog centralizado e largura correta ── */ .alto-contraste .modal-dialog { background-color: #000 !important; } /* ── Modal — backdrop com opacidade correta ── */ .alto-contraste .modal-backdrop.in { opacity: 0.85 !important; } .alto-contraste .modal-header { background-color: #111 !important; border-bottom-color: #fff !important; } .alto-contraste .modal-footer { background-color: #111 !important; border-top-color: #fff !important; } .alto-contraste .modal-title { color: #fff !important; } /* ── Modal Metronic — corrige margin-top negativo que corta o modal ── */ .alto-contraste .modal-scrollable .modal { margin-top: 0 !important; top: 5% !important; } .alto-contraste .modal-scrollable { overflow-y: auto !important; } .alto-contraste .close { color: #fff !important; opacity: 1 !important; } /* ── Backdrop do modal ── */ .alto-contraste .modal-backdrop { background-color: #000 !important; } /* ── hr ── */ .alto-contraste hr { border-color: #555 !important; } /* ── text-muted ── */ .alto-contraste .text-muted { color: #aaa !important; } /* Link "Acessibilidade" — sem sublinhado */ .alto-contraste #link-acessibilidade { text-decoration: none !important; } /* Botão do ícone ◐ — sem borda no modo contraste */ .alto-contraste #btn-alto-contraste { background: transparent !important; border: none !important; box-shadow: none !important; } .alto-contraste #btn-alto-contraste .fa-adjust { color: #ff0 !important; } /* ── Breadcrumb ── */ .alto-contraste .breadcrumb { background-color: #000 !important; border: 1px solid #555 !important; color: #fff !important; } .alto-contraste .breadcrumb a { color: #ff0 !important; } .alto-contraste .breadcrumb > li + li:before { color: #fff !important; } .alto-contraste .breadcrumb > .active { color: #fff !important; } /* ── Collapse / Accordion Bootstrap ── */ .alto-contraste .panel-group .panel { background-color: #000 !important; border-color: #555 !important; } .alto-contraste .panel-group .panel-heading { background-color: #111 !important; border-color: #555 !important; } .alto-contraste .panel-group .panel-heading a { color: #ff0 !important; } .alto-contraste .panel-group .panel-body { background-color: #000 !important; border-color: #555 !important; color: #fff !important; } /* ── IMPORTANTE — não interferir no collapse do Bootstrap ── */ .alto-contraste .collapse { display: none; } .alto-contraste .collapse.in { display: block !important; } .alto-contraste .panel-group .collapsing { -webkit-transition: height 0.35s ease !important; transition: height 0.35s ease !important; } /* ── Modal de Ajuda — caixas de exemplo ── */ .alto-contraste .well, .alto-contraste .well-sm, .alto-contraste .well-lg, .alto-contraste pre, .alto-contraste code, .alto-contraste blockquote { background-color: #111 !important; color: #fff !important; border-color: #555 !important; } /* ── Modal de Ajuda — caixas box-ajuda ── */ .alto-contraste .box-ajuda { background-color: #111 !important; color: #fff !important; border-color: #555 !important; } /* ── Botão dentro do modal de acessibilidade ── */ .alto-contraste #btn-alto-contraste-modal { background-color: #000 !important; color: #ff0 !important; border-color: #ff0 !important; } .alto-contraste #btn-alto-contraste-modal span, .alto-contraste #btn-alto-contraste-modal i { color: #ff0 !important; } /* ── Autocomplete do navegador ── */ .alto-contraste input:-webkit-autofill, .alto-contraste input:-webkit-autofill:hover, .alto-contraste input:-webkit-autofill:focus, .alto-contraste input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px #000 inset !important; -webkit-text-fill-color: #fff !important; caret-color: #fff !important; } /* ── Label informativo ── */ .alto-contraste .label.list-group-item-info, .alto-contraste .list-group-item-info { background-color: #111 !important; color: #fff !important; border-color: #555 !important; } /* ── Tabs Bootstrap ── */ .alto-contraste .nav.nav-tabs { border-bottom-color: #555 !important; background-color: #000 !important; } .alto-contraste .nav.nav-tabs > li > a { background-color: #000 !important; color: #ff0 !important; border-color: #555 !important; } .alto-contraste .nav.nav-tabs > li > a:hover, .alto-contraste .nav.nav-tabs > li > a:focus { background-color: #222 !important; color: #ff0 !important; border-color: #fff !important; } .alto-contraste .nav.nav-tabs > li.active > a, .alto-contraste .nav.nav-tabs > li.active > a:hover, .alto-contraste .nav.nav-tabs > li.active > a:focus { background-color: #ff0 !important; color: #000 !important; border-color: #ff0 !important; border-bottom-color: #ff0 !important; } .alto-contraste .tab-content { background-color: #000 !important; color: #fff !important; border: 1px solid #555 !important; padding: 10px !important; } /* ── Paginação Bootstrap ── */ .alto-contraste .pagination > li > a, .alto-contraste .pagination > li > span { background-color: #000 !important; color: #ff0 !important; border-color: #555 !important; } .alto-contraste .pagination > li > a:hover, .alto-contraste .pagination > li > a:focus { background-color: #222 !important; color: #ff0 !important; border-color: #fff !important; } .alto-contraste .pagination > .active > a, .alto-contraste .pagination > .active > span, .alto-contraste .pagination > .active > a:hover, .alto-contraste .pagination > .active > a:focus { background-color: #ff0 !important; color: #000 !important; border-color: #ff0 !important; } .alto-contraste .pagination > .disabled > a, .alto-contraste .pagination > .disabled > span { background-color: #000 !important; color: #555 !important; border-color: #333 !important; } /* ── Filtros da pesquisa ── */ .alto-contraste .input-group-addon { background-color: #000 !important; color: #fff !important; border-color: #555 !important; } /* ── Accordion AngularJS ── */ .alto-contraste accordion .panel, .alto-contraste accordion .panel-default { background-color: #000 !important; border-color: #555 !important; } .alto-contraste accordion .panel-heading { background-color: #111 !important; color: #fff !important; border-color: #555 !important; } .alto-contraste accordion .panel-heading a { color: #ff0 !important; } .alto-contraste accordion .panel-body { background-color: #000 !important; color: #fff !important; } .alto-contraste accordion .panel-body a { color: #ff0 !important; } .alto-contraste accordion .panel-body a:hover { color: #0ff !important; } /* ── Accordion AngularJS — corrigindo fundo das listas ── */ .alto-contraste accordion .panel, .alto-contraste accordion .panel-default, .alto-contraste accordion .panel-collapse, .alto-contraste accordion .panel-body, .alto-contraste accordion .panel-body ul, .alto-contraste accordion .panel-body li, .alto-contraste [ng-transclude], .alto-contraste .ng-isolate-scope { background-color: #000 !important; color: #fff !important; border-color: #555 !important; } /* ── Título do accordion — letra amarela ── */ .alto-contraste accordion .panel-heading, .alto-contraste accordion .panel-heading a, .alto-contraste accordion .panel-heading a span, .alto-contraste accordion .accordion-toggle, .alto-contraste accordion .accordion-toggle span { background-color: #000 !important; color: #ff0 !important; border-color: #555 !important; } /* ── Caixa de data ── */ .alto-contraste .input-group-addon { background-color: #000 !important; color: #fff !important; border-color: #555 !important; } /* ── Facets list — sobrescreve CSS customizado do projeto ── */ .alto-contraste .facets_list .panel-heading { background: #000 !important; background-image: none !important; color: #ff0 !important; border-color: #555 !important; } .alto-contraste .facets_list .panel-heading a, .alto-contraste .facets_list .panel-heading a span { color: #ff0 !important; } .alto-contraste .facets_list .panel, .alto-contraste .facets_list .panel-body, .alto-contraste .facets_list .panel-collapse { background: #000 !important; background-image: none !important; color: #fff !important; border-color: #555 !important; } .alto-contraste .facets_list .panel-body a { color: #ff0 !important; } .alto-contraste .facets_list .panel-body a:hover { color: #0ff !important; } /* ── jQuery UI Datepicker / DateRangePicker ── */ .alto-contraste .ui-daterangepicker, .alto-contraste .ui-daterangepicker .ui-widget-content, .alto-contraste .ui-daterangepicker .ranges, .alto-contraste .ui-daterangepicker .range-start, .alto-contraste .ui-daterangepicker .range-end { background: #000 !important; background-image: none !important; border-color: #555 !important; color: #fff !important; } /* ── Cabeçalho do calendário ── */ .alto-contraste .ui-daterangepicker .ui-widget-header, .alto-contraste .ui-daterangepicker .ui-datepicker-header { background: #111 !important; background-image: none !important; border-color: #555 !important; color: #fff !important; } /* ── Título mês/ano e selects ── */ .alto-contraste .ui-daterangepicker .ui-datepicker-title, .alto-contraste .ui-daterangepicker .title-start, .alto-contraste .ui-daterangepicker .title-end, .alto-contraste .ui-daterangepicker select { background: #000 !important; color: #ff0 !important; border-color: #555 !important; } /* ── Tabela do calendário ── */ .alto-contraste .ui-daterangepicker .ui-datepicker-calendar, .alto-contraste .ui-daterangepicker .ui-datepicker-calendar th, .alto-contraste .ui-daterangepicker .ui-datepicker-calendar td { background: #000 !important; color: #fff !important; border-color: #333 !important; } /* ── Dias do calendário ── */ .alto-contraste .ui-daterangepicker .ui-state-default { background: #000 !important; background-image: none !important; border-color: #333 !important; color: #ff0 !important; } .alto-contraste .ui-daterangepicker .ui-state-default:hover, .alto-contraste .ui-daterangepicker .ui-state-hover { background: #ff0 !important; color: #000 !important; } /* ── Dia atual destacado ── */ .alto-contraste .ui-daterangepicker .ui-state-highlight { background: #333 !important; background-image: none !important; border-color: #ff0 !important; color: #ff0 !important; } /* ── Dias desabilitados ── */ .alto-contraste .ui-daterangepicker .ui-state-disabled { background: #000 !important; color: #444 !important; opacity: 0.5 !important; } /* ── Lista de opções (Intervalo, Dia Específico...) ── */ .alto-contraste .ui-daterangepicker ul, .alto-contraste .ui-daterangepicker ul li { background: #000 !important; background-image: none !important; border-color: #555 !important; color: #fff !important; } .alto-contraste .ui-daterangepicker ul li a { color: #ff0 !important; } .alto-contraste .ui-daterangepicker ul li.ui-state-active { background: #222 !important; border-color: #ff0 !important; } /* ── Botão OK ── */ .alto-contraste .ui-daterangepicker .btnDone { background: #000 !important; background-image: none !important; color: #ff0 !important; border-color: #ff0 !important; } .alto-contraste .ui-daterangepicker .btnDone:hover { background: #ff0 !important; color: #000 !important; } /* ── Setas de navegação ── */ .alto-contraste .ui-daterangepicker .ui-datepicker-prev, .alto-contraste .ui-daterangepicker .ui-datepicker-next { background: #000 !important; background-image: none !important; border-color: #555 !important; color: #ff0 !important; } /* ── Hover nos itens da lista de opções ── */ .alto-contraste .ui-daterangepicker ul li:hover, .alto-contraste .ui-daterangepicker ul li:hover a, .alto-contraste .ui-daterangepicker ul li.ui-state-active, .alto-contraste .ui-daterangepicker ul li.ui-state-active a { background: #ff0 !important; background-image: none !important; color: #000 !important; } /* ── UI-Select Selectize (AngularJS) ── */ .alto-contraste .selectize-control, .alto-contraste .selectize-input, .alto-contraste .selectize-dropdown, .alto-contraste .selectize-dropdown-content, .alto-contraste .ui-select-choices, .alto-contraste .ui-select-choices-content { background-color: #000 !important; color: #ff0 !important; border-color: #555 !important; } /* ── Itens da lista ── */ .alto-contraste .ui-select-choices-row div, .alto-contraste .ui-select-choices-row .option, .alto-contraste .ui-select-choices-row span, .alto-contraste .ui-select-choices-row small { background-color: #000 !important; color: #ff0 !important; } /* ── Item ativo/hover ── */ .alto-contraste .ui-select-choices-row.active div, .alto-contraste .ui-select-choices-row.active .option, .alto-contraste .ui-select-choices-row.active span, .alto-contraste .ui-select-choices-row.active small { background-color: #ff0 !important; color: #000 !important; } /* ── Input de busca ── */ .alto-contraste .selectize-input input, .alto-contraste .ui-select-search { background-color: #000 !important; color: #fff !important; } /* ── UI-Select Selectize — campo selecionado e placeholder ── */ .alto-contraste .selectize-input, .alto-contraste .selectize-control.single .selectize-input, .alto-contraste .ui-select-match, .alto-contraste .ui-select-container .selectize-input { background-color: #000 !important; color: #ff0 !important; border-color: #555 !important; box-shadow: none !important; } /* ── Texto do item selecionado ── */ .alto-contraste .selectize-input .ng-binding, .alto-contraste .selectize-input span, .alto-contraste .selectize-input small, .alto-contraste .ui-select-match span, .alto-contraste .ui-select-match small { color: #ff0 !important; background-color: #000 !important; } /* ── Placeholder ── */ .alto-contraste .selectize-input input::placeholder, .alto-contraste .ui-select-search::placeholder { color: #aaa !important; } /* ── Seta do dropdown ── */ .alto-contraste .selectize-control.single .selectize-input:after { border-top-color: #ff0 !important; } /* ── AG Grid ── */ .alto-contraste .ag-root, .alto-contraste .ag-body, .alto-contraste .ag-body-viewport, .alto-contraste .ag-body-container, .alto-contraste .ag-pinned-left-cols-container { background-color: #000 !important; } /* ── Linhas pares e ímpares ── */ .alto-contraste .ag-row-even, .alto-contraste .ag-row-odd { background-color: #000 !important; color: #fff !important; border-color: #333 !important; } .alto-contraste .ag-row-odd { background-color: #111 !important; } /* ── Células ── */ .alto-contraste .ag-cell { color: #fff !important; border-color: #333 !important; } /* ── Cabeçalho ── */ .alto-contraste .ag-header, .alto-contraste .ag-header-row, .alto-contraste .ag-header-cell, .alto-contraste .ag-header-group-cell, .alto-contraste .ag-pinned-left-header { background-color: #ff0 !important; color: #000 !important; border-color: #333 !important; } .alto-contraste .ag-header-cell-text, .alto-contraste .ag-header-group-text { color: #000 !important; } /* ── Ícones do cabeçalho ── */ .alto-contraste .ag-header-icon rect, .alto-contraste .ag-header-icon polygon { fill: #000 !important; } /* ── Linha hover ── */ .alto-contraste .ag-row:hover { background-color: #222 !important; } /* ── Scrollbar ── */ .alto-contraste .ag-body-viewport::-webkit-scrollbar-track { background: #000 !important; } .alto-contraste .ag-body-viewport::-webkit-scrollbar-thumb { background: #555 !important; } .alto-contraste .site-logo img { background-color: #fff !important; } .alto-contraste .header-navigation ul li a:hover { background-color: #000 !important; } .alto-contraste .header-navigation .dropdown-menu { background-color: #000 !important; } .alto-contraste .dropdown-menu, .alto-contraste .dropdown-menu li a:hover { background-color: #000 !important; }