/* static/css/marca.css
 *
 * Fundação visual do sistema na identidade de outubro de 2026: Montserrat, petróleo e teal,
 * sobre o Bootstrap 5.3. Carrega depois do style.css e do confi.css; o <style> de cada tela vem
 * depois, no corpo, e continua mandando nela.
 *
 * Contrastes (WCAG AA = 4,5:1 para texto):
 *   branco sobre teal escuro #027183 ........ 5,69:1  (botão principal)
 *   teal link #02778A sobre branco .......... 5,24:1  (links e texto em teal)
 *   petróleo suave #3F6870 sobre branco ..... 6,30:1  (texto secundário)
 *   teal #03A3BD sobre branco ............... 3,01:1  -> nunca como texto; só fundo, ícone grande e gráfico
 *
 * Alto contraste e modo leitura são temas por variáveis (body.high-contrast-mode, que o base.html
 * acompanha de data-bs-theme="dark" no <html>, e body.dyslexic-mode): os componentes do Bootstrap
 * (menus, cartões, tabelas, janelas, formulários) mudam juntos, sem regra por tela.
 */

/* --- Fonte da marca (subconjunto latino em woff2; os .ttf ficam para os PDFs) --- */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat/Montserrat-400.e8a1f81f6a70.woff2") format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/montserrat/Montserrat-500.59ba19f6b2de.woff2") format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat/Montserrat-600.f6d667fcc1e3.woff2") format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat/Montserrat-700.56ef61e2901d.woff2") format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/montserrat/Montserrat-800.fb3a6ba1203f.woff2") format('woff2'); }

/* --- Cores da marca --- */
:root {
    --marca-petroleo: #05313A;
    --marca-petroleo-suave: #3F6870;
    --marca-teal: #03A3BD;          /* fundo, ícone grande e gráfico: nunca texto sobre branco */
    --marca-teal-forte: #02879C;    /* títulos grandes */
    --marca-teal-link: #02778A;     /* links e texto em teal */
    --marca-teal-escuro: #027183;   /* botão principal, com texto branco */
    --marca-nevoa: #EDF7F8;
    --marca-agua: #9EE1EA;
    --marca-fonte: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* --- Bootstrap na marca (só no tema claro: o alto contraste tem as suas, mais abaixo) --- */
:root:not([data-bs-theme="dark"]) {
    --bs-font-sans-serif: var(--marca-fonte);
    --bs-body-font-family: var(--marca-fonte);
    --bs-body-color: var(--marca-petroleo);
    --bs-body-color-rgb: 5, 49, 58;
    /* Título (h1–h6) herda a cor do bloco (o padrão do Bootstrap): no fundo claro sai petróleo, pela
       cor do corpo; numa faixa escura com text-white, sai branco. Cor fixa aqui apagava o título dos
       cabeçalhos escuros (31/10/2026). */
    --bs-heading-color: inherit;
    --bs-secondary-color: var(--marca-petroleo-suave);   /* .text-muted e textos de apoio */
    --bs-primary: var(--marca-teal-escuro);
    --bs-primary-rgb: 2, 113, 131;
    --bs-primary-text-emphasis: var(--marca-petroleo);
    --bs-primary-bg-subtle: var(--marca-nevoa);
    --bs-primary-border-subtle: var(--marca-agua);
    --bs-link-color: var(--marca-teal-link);
    --bs-link-color-rgb: 2, 119, 138;
    --bs-link-hover-color: var(--marca-petroleo);
    --bs-link-hover-color-rgb: 5, 49, 58;
    --bs-focus-ring-color: rgba(2, 113, 131, .35);
}

body {
    font-weight: 500;
}

h1, h2, h3, .h1, .h2, .h3 {
    font-weight: 700;
}

.btn-primary {
    --bs-btn-bg: var(--marca-teal-escuro);
    --bs-btn-border-color: var(--marca-teal-escuro);
    --bs-btn-hover-bg: var(--marca-petroleo);
    --bs-btn-hover-border-color: var(--marca-petroleo);
    --bs-btn-active-bg: var(--marca-petroleo);
    --bs-btn-active-border-color: var(--marca-petroleo);
    --bs-btn-disabled-bg: var(--marca-teal-escuro);
    --bs-btn-disabled-border-color: var(--marca-teal-escuro);
    --bs-btn-focus-shadow-rgb: 2, 113, 131;
}

.btn-outline-primary {
    --bs-btn-color: var(--marca-teal-link);
    --bs-btn-border-color: var(--marca-teal-link);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--marca-teal-escuro);
    --bs-btn-hover-border-color: var(--marca-teal-escuro);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--marca-petroleo);
    --bs-btn-active-border-color: var(--marca-petroleo);
    --bs-btn-disabled-color: var(--marca-teal-link);
    --bs-btn-disabled-border-color: var(--marca-teal-link);
    --bs-btn-focus-shadow-rgb: 2, 113, 131;
}

/* O cinza do Bootstrap fica em 4,3:1 sobre a névoa da página; o petróleo suave passa de 4,5:1. */
.btn-outline-secondary {
    --bs-btn-color: var(--marca-petroleo-suave);
    --bs-btn-border-color: var(--marca-petroleo-suave);
    --bs-btn-hover-bg: var(--marca-petroleo-suave);
    --bs-btn-hover-border-color: var(--marca-petroleo-suave);
    --bs-btn-active-bg: var(--marca-petroleo);
    --bs-btn-active-border-color: var(--marca-petroleo);
    --bs-btn-disabled-color: var(--marca-petroleo-suave);
    --bs-btn-disabled-border-color: var(--marca-petroleo-suave);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--marca-teal-forte);
    box-shadow: 0 0 0 .25rem rgba(3, 163, 189, .25);
}

/* Caixa de marcar desmarcada com borda visível: a cinza-clara do Bootstrap fica abaixo de 3:1 no branco.
   Especificidade de uma classe: marcada, com foco e com erro continuam valendo. */
.form-check-input {
    border-color: var(--bs-secondary-color);
}

.form-check-input:checked {
    background-color: var(--marca-teal-escuro);
    border-color: var(--marca-teal-escuro);
}

.form-check-input:focus {
    border-color: var(--marca-teal-forte);
    box-shadow: 0 0 0 .25rem rgba(3, 163, 189, .25);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--marca-teal-escuro);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--marca-teal-escuro);
}

.pagination {
    --bs-pagination-active-bg: var(--marca-teal-escuro);
    --bs-pagination-active-border-color: var(--marca-teal-escuro);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(3, 163, 189, .25);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--marca-teal-escuro);
}

.list-group {
    --bs-list-group-active-bg: var(--marca-teal-escuro);
    --bs-list-group-active-border-color: var(--marca-teal-escuro);
}

.accordion {
    --bs-accordion-active-color: var(--marca-petroleo);
    --bs-accordion-active-bg: var(--marca-nevoa);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(3, 163, 189, .25);
}

/* --- Foco visível em tudo que o teclado alcança (na barra petróleo, em água) --- */
:focus-visible {
    outline: 3px solid var(--marca-teal-escuro);
    outline-offset: 2px;
}

.navbar-custom :focus-visible {
    outline-color: var(--marca-agua);
}

/* "Pular para o conteúdo": invisível até receber o foco do teclado */
.pular-conteudo:focus {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    padding: .5rem 1rem;
    background: #fff;
    color: var(--marca-petroleo);
    font-weight: 700;
    border-radius: .375rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* ==========================================================================
 * Alto contraste: fundo preto, texto branco, destaques em amarelo e links em ciano,
 * como sempre foi; agora pelas variáveis, e os componentes acompanham.
 * ========================================================================== */
body.high-contrast-mode {
    --bs-body-bg: #000;
    --bs-body-bg-rgb: 0, 0, 0;
    --bs-body-color: #fff;
    --bs-body-color-rgb: 255, 255, 255;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: #fff;
    --bs-secondary-color: #e6e6e6;
    --bs-secondary-color-rgb: 230, 230, 230;
    --bs-tertiary-color: #e6e6e6;
    --bs-secondary-bg: #000;
    --bs-tertiary-bg: #000;
    --bs-tertiary-bg-rgb: 0, 0, 0;
    --bs-border-color: #fff;
    --bs-border-color-translucent: #fff;
    --bs-link-color: #0ff;
    --bs-link-color-rgb: 0, 255, 255;
    --bs-link-hover-color: #ff0;
    --bs-link-hover-color-rgb: 255, 255, 0;
    --bs-focus-ring-color: #ff0;
    /* variáveis antigas do style.css, que algumas telas ainda usam */
    --primary-color: #ff0;
    --secondary-color: #000;
    --bg-color: #000;
    --text-color: #fff;
    background-color: #000;
    color: #fff;
}

body.high-contrast-mode :focus-visible {
    outline: 3px solid #ff0;
}

body.high-contrast-mode a:not(.btn):not(.dropdown-item):not(.nav-link):not(.page-link) {
    color: #0ff;
    text-decoration: underline;
}

body.high-contrast-mode .navbar-custom {
    background-color: #000;
    border-bottom: 2px solid #ff0 !important;
}

body.high-contrast-mode .card,
body.high-contrast-mode .card-custom,
body.high-contrast-mode .modal-content,
body.high-contrast-mode .dropdown-menu,
body.high-contrast-mode .offcanvas,
body.high-contrast-mode .toast {
    --bs-card-bg: #000;
    --bs-card-cap-bg: #000;
    --bs-card-color: #fff;
    --bs-modal-bg: #000;
    --bs-dropdown-bg: #000;
    --bs-dropdown-color: #fff;
    --bs-dropdown-link-color: #fff;
    --bs-dropdown-link-hover-color: #000;
    --bs-dropdown-link-hover-bg: #ff0;
    --bs-dropdown-link-active-color: #000;
    --bs-dropdown-link-active-bg: #ff0;
    --bs-dropdown-header-color: #ff0;
    --bs-dropdown-divider-bg: #fff;
    --bs-offcanvas-bg: #000;
    --bs-toast-bg: #000;
    background-color: #000;
    color: #fff;
    border: 2px solid #ff0;
}

body.high-contrast-mode .table,
body.high-contrast-mode .table-light,
body.high-contrast-mode .table-secondary,
body.high-contrast-mode .table-primary,
body.high-contrast-mode .table-info {
    --bs-table-color: #fff;
    --bs-table-bg: #000;
    --bs-table-border-color: #fff;
    --bs-table-striped-color: #fff;
    --bs-table-striped-bg: #1a1a1a;
    --bs-table-hover-color: #fff;
    --bs-table-hover-bg: #333;
    --bs-table-active-color: #fff;
    --bs-table-active-bg: #333;
    color: #fff;
    border-color: #fff;
}

body.high-contrast-mode .list-group {
    --bs-list-group-bg: #000;
    --bs-list-group-color: #fff;
    --bs-list-group-border-color: #fff;
    --bs-list-group-action-hover-bg: #ff0;
    --bs-list-group-action-hover-color: #000;
    --bs-list-group-active-bg: #ff0;
    --bs-list-group-active-color: #000;
    --bs-list-group-active-border-color: #ff0;
}

body.high-contrast-mode .nav-tabs {
    --bs-nav-tabs-link-active-bg: #000;
    --bs-nav-tabs-link-active-color: #ff0;
    --bs-nav-tabs-link-active-border-color: #ff0;
    --bs-nav-tabs-border-color: #fff;
}

body.high-contrast-mode .form-control,
body.high-contrast-mode .form-select,
body.high-contrast-mode .input-group-text {
    background-color: #000;
    color: #fff;
    border: 2px solid #fff;
}

body.high-contrast-mode .form-control::placeholder {
    color: #e6e6e6;
}

body.high-contrast-mode .form-control:disabled,
body.high-contrast-mode .form-select:disabled {
    border-style: dashed;
}

/* Botões: o principal em amarelo sobre preto, como antes; os demais com borda clara */
body.high-contrast-mode .btn {
    --bs-btn-focus-box-shadow: 0 0 0 .25rem #ff0;
}

body.high-contrast-mode .btn-primary,
body.high-contrast-mode .btn-outline-primary {
    --bs-btn-color: #ff0;
    --bs-btn-bg: #000;
    --bs-btn-border-color: #ff0;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ff0;
    --bs-btn-hover-border-color: #ff0;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ff0;
    --bs-btn-active-border-color: #ff0;
    --bs-btn-disabled-color: #ff0;
    --bs-btn-disabled-bg: #000;
    --bs-btn-disabled-border-color: #ff0;
    border-width: 2px;
    font-weight: 700;
}

body.high-contrast-mode .btn-light,
body.high-contrast-mode .btn-outline-light,
body.high-contrast-mode .btn-secondary,
body.high-contrast-mode .btn-outline-secondary,
body.high-contrast-mode .btn-outline-dark,
body.high-contrast-mode .btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: #000;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ff0;
    --bs-btn-hover-border-color: #ff0;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ff0;
    --bs-btn-disabled-color: #e6e6e6;
    --bs-btn-disabled-bg: #000;
    border-width: 2px;
}

/* Fundos fixos do Bootstrap (claros ou coloridos com texto branco) viram preto com borda da
   cor original: o estado continua visível e o texto continua legível. */
body.high-contrast-mode .bg-white,
body.high-contrast-mode .bg-light,
body.high-contrast-mode .bg-body,
body.high-contrast-mode .bg-body-tertiary,
body.high-contrast-mode .bg-body-secondary {
    background-color: #000 !important;
    color: #fff !important;
}

body.high-contrast-mode .bg-primary,
body.high-contrast-mode .text-bg-primary { background-color: #000 !important; color: #fff !important; box-shadow: inset 0 0 0 2px #ff0; }
body.high-contrast-mode .bg-success,
body.high-contrast-mode .text-bg-success { background-color: #000 !important; color: #fff !important; box-shadow: inset 0 0 0 2px #75b798; }
body.high-contrast-mode .bg-danger,
body.high-contrast-mode .text-bg-danger { background-color: #000 !important; color: #fff !important; box-shadow: inset 0 0 0 2px #ea868f; }
body.high-contrast-mode .bg-warning,
body.high-contrast-mode .text-bg-warning { background-color: #000 !important; color: #fff !important; box-shadow: inset 0 0 0 2px #ffda6a; }
body.high-contrast-mode .bg-info,
body.high-contrast-mode .text-bg-info { background-color: #000 !important; color: #fff !important; box-shadow: inset 0 0 0 2px #6edff6; }
body.high-contrast-mode .bg-secondary,
body.high-contrast-mode .text-bg-secondary,
body.high-contrast-mode .bg-dark,
body.high-contrast-mode .text-bg-dark { background-color: #000 !important; color: #fff !important; box-shadow: inset 0 0 0 2px #fff; }

body.high-contrast-mode .text-dark,
body.high-contrast-mode .text-black,
body.high-contrast-mode .text-body,
body.high-contrast-mode .text-body-emphasis,
body.high-contrast-mode .link-dark { color: #fff !important; }
body.high-contrast-mode .text-muted,
body.high-contrast-mode .text-secondary,
body.high-contrast-mode .text-body-secondary { color: #e6e6e6 !important; }
body.high-contrast-mode .text-primary { color: #ff0 !important; }
body.high-contrast-mode .text-success { color: #75b798 !important; }
body.high-contrast-mode .text-danger { color: #ea868f !important; }
body.high-contrast-mode .text-warning { color: #ffda6a !important; }
body.high-contrast-mode .text-info { color: #6edff6 !important; }

body.high-contrast-mode .alert {
    --bs-alert-bg: #000;
    --bs-alert-color: #fff;
    --bs-alert-link-color: #0ff;
    border-width: 2px;
}

body.high-contrast-mode .alert-success { --bs-alert-border-color: #75b798; }
body.high-contrast-mode .alert-danger { --bs-alert-border-color: #ea868f; }
body.high-contrast-mode .alert-warning { --bs-alert-border-color: #ffda6a; }
body.high-contrast-mode .alert-info,
body.high-contrast-mode .alert-primary { --bs-alert-border-color: #6edff6; }
body.high-contrast-mode .alert-secondary,
body.high-contrast-mode .alert-light,
body.high-contrast-mode .alert-dark { --bs-alert-border-color: #fff; }

body.high-contrast-mode .badge { border: 1px solid #fff; }

body.high-contrast-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 1;
}

body.high-contrast-mode .progress { background-color: #000; border: 1px solid #fff; }

body.high-contrast-mode .pular-conteudo:focus {
    background: #000;
    color: #ff0;
    border: 2px solid #ff0;
}

/* ==========================================================================
 * Modo leitura (dislexia): OpenDyslexic, entrelinha e espaçamento maiores. Vale para tudo
 * (inclusive as telas que declaram fonte própria), menos os ícones.
 * ========================================================================== */
@font-face {
    font-family: 'OpenDyslexic';
    font-display: swap;
    src: url("../fonts/OpenDyslexic-Regular.05d83124d493.otf") format('opentype');
}

body.dyslexic-mode {
    --marca-fonte: 'OpenDyslexic', 'Comic Sans MS', sans-serif;
    --bs-body-font-family: var(--marca-fonte);
    --bs-body-line-height: 1.8;
}