/* Adapta o componente canônico de acessibilidade aos tokens da Vitrine MOOC. */
html {
  font-size: calc(16px * var(--font-scale));
}

[data-font="dyslexic"] {
  --body: var(--dyslexic);
  --display: var(--dyslexic);
  --sans: var(--dyslexic);
}

[data-theme="dark"] {
  --paper: #132121;
  --paper-soft: #0b1515;
  --surface: #192929;
  --ink: #f0f7f7;
  --ink-soft: #b6c9c9;
  --line: #324646;
  --teal: #33a6a6;
  --teal-deep: #8bd0d0;
  --teal-dark: #071111;
  --teal-light: #70c2c2;
  --teal-soft: #163b3b;
  --green: #70ce62;
  --green-deep: #a0dba9;
  --accent-action: #d0877d;
  --accent-action-deep: #e7a399;
  --accent-action-soft: #4a2925;
  --on-teal: #f0f7f7;
  --on-action: #071111;
  --on-gold: #172424;
  --focus-ring: #f2b84b;
  --success: #70ce62;
  --success-soft: #183b27;
  --warning-soft: #3b3018;
  --warning-ink: #ffe4a8;
  --gold-soft: #3b3018;
  --gold-deep: #ffd980;
  --lic-mint: #16302d;
  --lic-ok: #70ce62;
  --lic-ok-soft: #183b27;
  --lic-warn-bg: #3b3018;
  --lic-warn-ink: #ffe4a8;
  --bg: var(--paper-soft);
  --bg-2: var(--paper);
  --ink-2: var(--ink-soft);
  --verde-marca: var(--teal);
  --shadow: 0 22px 60px rgba(0, 0, 0, .34);
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, .24);
}

/* O tema escuro precisa trocar as superficies literais dos componentes. Apenas
   alterar tokens deixava header ciano, filtros/cards brancos e textos claros
   sem contraste. Esta camada vem antes do alto contraste para que, quando os
   dois recursos estiverem ativos, o alto contraste continue sendo soberano. */
[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="dark"] body,
[data-theme="dark"] main,
[data-theme="dark"] .colecoes-sec,
[data-theme="dark"] .lic-contexto,
[data-theme="dark"] .lic-guidance,
[data-theme="dark"] .lic-tool,
[data-theme="dark"] .faq {
  color: var(--ink);
  background-color: var(--paper-soft);
}

[data-theme="dark"] body::before {
  opacity: .32;
  background-image:
    linear-gradient(rgba(112, 194, 194, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 194, 194, .07) 1px, transparent 1px);
}

/* Cabecalho e navegacao. */
[data-theme="dark"] .site,
[data-theme="dark"] .main-nav.open {
  color: var(--ink);
  background: var(--teal-dark);
  border-color: var(--line);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
}

[data-theme="dark"] .brand,
[data-theme="dark"] .brand-name,
[data-theme="dark"] .main-nav a,
[data-theme="dark"] .menu-toggle {
  color: var(--ink);
}

[data-theme="dark"] .main-nav a:hover,
[data-theme="dark"] .main-nav a[aria-current="page"] {
  color: var(--teal-light);
}

[data-theme="dark"] .lang-btn,
[data-theme="dark"] .menu-toggle,
[data-theme="dark"] .lang-menu {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-soft);
}

[data-theme="dark"] .lang-btn:hover,
[data-theme="dark"] .lang-option:hover {
  color: var(--ink);
  background: var(--teal-soft);
  border-color: var(--teal-light);
}

[data-theme="dark"] .site .btn-primary,
[data-theme="dark"] .hero-search .btn-primary,
[data-theme="dark"] .projeto-hero .btn-primary,
[data-theme="dark"] .projeto-hero[data-tema="riodoce"] .btn-primary {
  color: var(--teal-dark);
  background: var(--teal-light);
  border-color: var(--teal-light);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .28);
}

[data-theme="dark"] .site .btn-primary:hover,
[data-theme="dark"] .hero-search .btn-primary:hover,
[data-theme="dark"] .projeto-hero .btn-primary:hover,
[data-theme="dark"] .projeto-hero[data-tema="riodoce"] .btn-primary:hover {
  color: var(--teal-dark);
  background: #9ad8d8;
}

/* Heros: a foto permanece, com veu escuro e tipografia clara. */
[data-theme="dark"] .hero,
[data-theme="dark"] .catalog-hero,
[data-theme="dark"] .lic-hero,
[data-theme="dark"] .projeto-hero,
[data-theme="dark"] .projeto-hero[data-tema="unac"],
[data-theme="dark"] .projeto-hero[data-tema="riodoce"] {
  color: var(--ink);
  background: var(--teal-dark);
  border-color: var(--line);
}

[data-theme="dark"] .projeto-hero[data-tema="unac"],
[data-theme="dark"] .projeto-hero[data-tema="riodoce"] {
  background:
    radial-gradient(900px 340px at 88% -12%, rgba(51, 166, 166, .18), transparent 60%),
    linear-gradient(135deg, #102828 0%, #0b1b1b 58%, #071111 100%);
}

[data-theme="dark"] .hero::after {
  background:
    linear-gradient(180deg, rgba(7, 17, 17, .9), rgba(7, 17, 17, .72) 46%, rgba(7, 17, 17, .92)),
    radial-gradient(circle at 50% 30%, rgba(22, 59, 59, .34), transparent 38%);
}

[data-theme="dark"] .catalog-hero-foto::after,
[data-theme="dark"] .lic-hero::after {
  background:
    linear-gradient(100deg, rgba(7, 17, 17, .97) 0%, rgba(7, 17, 17, .92) 38%, rgba(11, 27, 27, .72) 64%, rgba(11, 27, 27, .52) 100%),
    linear-gradient(to top, rgba(7, 17, 17, .9), transparent 48%);
}

[data-theme="dark"] .hero h1,
[data-theme="dark"] .catalog-hero h1,
[data-theme="dark"] .lic-hero h1,
[data-theme="dark"] .projeto-hero h1 {
  color: var(--ink);
}

[data-theme="dark"] .hero h1 span,
[data-theme="dark"] .catalog-hero h1 span,
[data-theme="dark"] .lic-hero h1 span,
[data-theme="dark"] .projeto-extenso,
[data-theme="dark"] .projeto-hero[data-tema="riodoce"] .projeto-extenso,
[data-theme="dark"] .kicker {
  color: var(--teal-light);
}

[data-theme="dark"] .hero .lead,
[data-theme="dark"] .catalog-hero p,
[data-theme="dark"] .lic-hero p,
[data-theme="dark"] .projeto-lead {
  color: #dce9e9;
}

[data-theme="dark"] .hero-search,
[data-theme="dark"] .filters input[type="search"],
[data-theme="dark"] .filters select,
[data-theme="dark"] .toolbar select,
[data-theme="dark"] .picker-busca,
[data-theme="dark"] .picker-select {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
}

[data-theme="dark"] .hero-search input,
[data-theme="dark"] .hero-search-icon {
  color: var(--ink);
  background: transparent;
}

[data-theme="dark"] input::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}

[data-theme="dark"] .hero .btn-outline {
  color: var(--teal-light);
  background: var(--surface);
  border-color: var(--teal-light);
}

[data-theme="dark"] .stats .wrap,
[data-theme="dark"] .summary-box {
  color: var(--ink);
  background: rgba(25, 41, 41, .94);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

[data-theme="dark"] .stat + .stat {
  border-color: var(--line);
}

[data-theme="dark"] .stat strong,
[data-theme="dark"] .summary-box strong {
  color: var(--teal-light);
}

[data-theme="dark"] .stat-body span,
[data-theme="dark"] .summary-label {
  color: var(--ink-soft);
}

/* Catalogo: facetas, resultados e cards compartilham a mesma paleta escura. */
[data-theme="dark"] .filters {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

[data-theme="dark"] .filters-title,
[data-theme="dark"] .filter-group h3,
[data-theme="dark"] .filter-legend,
[data-theme="dark"] .filter-count,
[data-theme="dark"] .results-count,
[data-theme="dark"] .toolbar h2 {
  color: var(--teal-light);
}

[data-theme="dark"] .filter-option,
[data-theme="dark"] .filter-option label,
[data-theme="dark"] .sorter {
  color: var(--ink);
}

[data-theme="dark"] .filter-option input,
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
  accent-color: var(--teal-light);
}

[data-theme="dark"] .filters-clear,
[data-theme="dark"] .filter-more-toggle,
[data-theme="dark"] .chip,
[data-theme="dark"] .pill {
  color: var(--teal-light);
  background: var(--paper);
  border-color: var(--line);
}

[data-theme="dark"] .filter-legend-badge,
[data-theme="dark"] .filters-clear-count {
  color: var(--teal-dark);
  background: var(--teal-light);
}

[data-theme="dark"] .course-card {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

[data-theme="dark"] .course-card:hover {
  border-color: var(--teal-light);
  box-shadow: var(--shadow);
}

[data-theme="dark"] .course-card h3,
[data-theme="dark"] .course-cat,
[data-theme="dark"] .rank-card .course-body::before {
  color: var(--teal-light);
}

[data-theme="dark"] .course-meta,
[data-theme="dark"] .course-notice {
  color: var(--ink-soft);
}

[data-theme="dark"] .mini-cta {
  color: var(--teal-dark);
  background: var(--teal-light);
  border-color: var(--teal-light);
}

/* Badges nao usam mais ciano claro sobre branco. Cada familia ganha um chip
   escuro com borda visivel e texto que preserva pelo menos 4.5:1. */
[data-theme="dark"] .course-badge,
[data-theme="dark"] .badge-project,
[data-theme="dark"] .badge-series {
  color: #9ad8d8;
  background: var(--teal-soft);
  border-color: #397070;
}

[data-theme="dark"] .badge-new {
  color: #ffe0a3;
  background: #3b2d14;
  border-color: #856523;
}

[data-theme="dark"] .badge-language {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line);
}

/* Demais cards claros da home e das paginas de projeto acompanham o tema. */
[data-theme="dark"] .areas-band,
[data-theme="dark"] .oquee {
  color: var(--ink);
  background-color: var(--paper);
  background-image: none;
}

[data-theme="dark"] .area-pill,
[data-theme="dark"] .audience,
[data-theme="dark"] .fact,
[data-theme="dark"] .mooc-proof-main,
[data-theme="dark"] .fato,
[data-theme="dark"] .mooc-flow,
[data-theme="dark"] .passos li,
[data-theme="dark"] .projeto,
[data-theme="dark"] .serie,
[data-theme="dark"] .parceiro,
[data-theme="dark"] .parceiro-areas li,
[data-theme="dark"] .service-panel,
[data-theme="dark"] .service-panel-corpo,
[data-theme="dark"] .license-meter,
[data-theme="dark"] .license-stack li,
[data-theme="dark"] .tool,
[data-theme="dark"] .tool-body,
[data-theme="dark"] .tool-empty,
[data-theme="dark"] .tool-list li,
[data-theme="dark"] .faq details,
[data-theme="dark"] .faq summary,
[data-theme="dark"] .faq .resp {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
}

[data-theme="dark"] .oquee h2,
[data-theme="dark"] .mooc-intro h2,
[data-theme="dark"] .mooc-flow-head h2,
[data-theme="dark"] .passos h3,
[data-theme="dark"] .projeto h3,
[data-theme="dark"] .serie h3,
[data-theme="dark"] .parceiro-corpo h2 {
  color: var(--teal-light);
}

[data-theme="dark"] .mooc-lead,
[data-theme="dark"] .mooc-copy,
[data-theme="dark"] .fato,
[data-theme="dark"] .fato-txt,
[data-theme="dark"] .passos p,
[data-theme="dark"] .projeto p,
[data-theme="dark"] .serie p,
[data-theme="dark"] .parceiro-lead {
  color: var(--ink-soft);
}

/* Faixa de Licenca da home. O fundo original ja era escuro, mas o gradiente do
   cabecalho da ferramenta usava --teal-deep (claro no tema escuro), deixando
   texto branco sobre ciano. A foto permanece sob uma mascara mais densa e todo
   o painel passa a usar as mesmas superficies do restante do tema. */
[data-theme="dark"] .service-band {
  color: var(--ink);
  background-color: var(--teal-dark);
  background-image:
    linear-gradient(135deg,
      rgba(7, 17, 17, .97) 0%,
      rgba(11, 27, 27, .94) 48%,
      rgba(16, 40, 40, .88) 100%),
    url("../img/licenca-capacitacao-servidores-ifes-1920.jpg");
  background-image:
    linear-gradient(135deg,
      rgba(7, 17, 17, .97) 0%,
      rgba(11, 27, 27, .94) 48%,
      rgba(16, 40, 40, .88) 100%),
    image-set(
      url("../img/licenca-capacitacao-servidores-ifes-1920.webp") type("image/webp"),
      url("../img/licenca-capacitacao-servidores-ifes-1920.jpg") type("image/jpeg"));
  border-block: 1px solid var(--line);
}

[data-theme="dark"] .service-band::after {
  color: rgba(112, 194, 194, .06);
}

[data-theme="dark"] .service-kicker {
  color: var(--teal-light);
  background: var(--teal-soft);
  border: 1px solid #397070;
}

[data-theme="dark"] .service-band h2 {
  color: var(--ink);
}

[data-theme="dark"] .service-copy p {
  color: #dce9e9;
}

[data-theme="dark"] .btn-gold {
  color: var(--teal-dark);
  background: var(--teal-light);
  border-color: var(--teal-light);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .3);
}

[data-theme="dark"] .btn-gold:hover {
  color: var(--teal-dark);
  background: #9ad8d8;
}

[data-theme="dark"] .tool-head,
[data-theme="dark"] a.tool-head {
  color: var(--ink);
  background: #102828;
  border-bottom: 1px solid var(--line);
}

[data-theme="dark"] .tool-head h2,
[data-theme="dark"] .tool-head h3 {
  color: var(--ink);
}

[data-theme="dark"] .tool-head p {
  color: var(--ink-soft);
}

[data-theme="dark"] .tool-icon {
  color: var(--teal-light);
  background: var(--teal-soft);
  border-color: #397070;
}

[data-theme="dark"] .service-panel-head span,
[data-theme="dark"] .service-panel-meta b,
[data-theme="dark"] .meter-row strong,
[data-theme="dark"] .license-stack b {
  color: var(--teal-light);
}

[data-theme="dark"] .meter-row span {
  color: var(--ink);
}

[data-theme="dark"] .meter-track {
  background: var(--paper-soft);
  border: 1px solid var(--line);
}

[data-theme="dark"] .meter-track span {
  background: linear-gradient(90deg, var(--teal-light), var(--gold));
}

[data-theme="dark"] .license-stack li {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line);
}

/* Seletor de cursos da Licenca: dialog, area rolavel e rodape precisam receber
   fundo proprio; sem isso o canvas branco do dialog aparecia entre os cards. */
[data-theme="dark"] .picker,
[data-theme="dark"] .picker-head,
[data-theme="dark"] .picker-grid,
[data-theme="dark"] .picker-foot {
  color: var(--ink);
  background: var(--paper-soft);
  border-color: var(--line);
}

[data-theme="dark"] .picker {
  border: 1px solid var(--line);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .58);
}

[data-theme="dark"] .picker::backdrop {
  background: rgba(0, 0, 0, .78);
}

[data-theme="dark"] .picker-head,
[data-theme="dark"] .picker-foot {
  background: var(--surface);
}

[data-theme="dark"] .picker-top h2 {
  color: var(--teal-light);
}

[data-theme="dark"] .picker-x {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line);
}

[data-theme="dark"] .picker-card[data-on] {
  outline-color: var(--teal-light);
}

[data-theme="dark"] .picker-selo {
  color: var(--teal-dark);
  background: var(--teal-light);
}

[data-theme="dark"] .picker-resumo,
[data-theme="dark"] .picker-vazio {
  color: var(--ink-soft);
}

[data-contrast="high"] {
  --paper: #000000;
  --paper-soft: #000000;
  --surface: #000000;
  --ink: #ffff00;
  --ink-soft: #ffffff;
  --line: #ffff00;
  --teal: #000000;
  --teal-deep: #ffff00;
  --teal-dark: #000000;
  --teal-light: #00e676;
  --teal-soft: #00251a;
  --green: #00e676;
  --green-deep: #66ffaa;
  --gold: #ffff00;
  --red: #ff6b6b;
  --accent-action: #ffff00;
  --accent-action-deep: #00e676;
  --accent-action-soft: #1a1a00;
  --on-teal: #ffffff;
  --on-action: #000000;
  --on-gold: #000000;
  --focus-ring: #ffff00;
  --success: #00e676;
  --success-soft: #001a0d;
  --warning: #ffff00;
  --warning-soft: #1a1a00;
  --warning-ink: #ffffff;
  --gold-soft: #1a1a00;
  --gold-deep: #ffff00;
  --lic-mint: #000000;
  --lic-ok: #00e676;
  --lic-ok-soft: #001a0d;
  --lic-warn-bg: #1a1a00;
  --lic-warn-ink: #ffffff;
  --bg: #000000;
  --bg-2: #000000;
  --ink-2: #ffffff;
  --shadow: none;
  --shadow-soft: none;
}

/* O modo de alto contraste precisa vencer cores literais dos componentes,
   nao apenas trocar tokens. Sem esta camada, cards e filtros continuavam
   brancos enquanto seus textos viravam amarelos/brancos. */
[data-contrast="high"] body,
[data-contrast="high"] main,
[data-contrast="high"] .colecoes-sec,
[data-contrast="high"] .lic-contexto,
[data-contrast="high"] .lic-guidance,
[data-contrast="high"] .lic-tool,
[data-contrast="high"] .faq {
  color: #ffffff;
  background-color: #000000;
}

[data-contrast="high"] body::before {
  opacity: .22;
  background-image:
    linear-gradient(rgba(255, 255, 0, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 0, .18) 1px, transparent 1px);
}

/* Heros: imagem preservada, mas sem cor como unica fonte de separacao; o veu
   preto e o texto amarelo/branco tornam a mudanca perceptivel e legivel. */
[data-contrast="high"] .hero,
[data-contrast="high"] .catalog-hero,
[data-contrast="high"] .lic-hero,
[data-contrast="high"] .projeto-hero,
[data-contrast="high"] .projeto-hero[data-tema="unac"],
[data-contrast="high"] .projeto-hero[data-tema="riodoce"] {
  color: #ffffff;
  background: #000000;
  border-color: #ffff00;
}

[data-contrast="high"] .hero::after,
[data-contrast="high"] .catalog-hero-foto::after,
[data-contrast="high"] .lic-hero::after {
  background: rgba(0, 0, 0, .84);
}

[data-contrast="high"] .hero-bg img,
[data-contrast="high"] .catalog-hero-bg img,
[data-contrast="high"] .lic-hero-bg img {
  filter: grayscale(1) contrast(1.2);
}

[data-contrast="high"] .hero h1,
[data-contrast="high"] .catalog-hero h1,
[data-contrast="high"] .lic-hero h1,
[data-contrast="high"] .projeto-hero h1 {
  color: #ffffff;
}

[data-contrast="high"] .hero h1 span,
[data-contrast="high"] .catalog-hero h1 span,
[data-contrast="high"] .lic-hero h1 span,
[data-contrast="high"] .projeto-extenso,
[data-contrast="high"] .projeto-hero[data-tema="riodoce"] .projeto-extenso,
[data-contrast="high"] .kicker {
  color: #ffff00;
}

[data-contrast="high"] .hero .lead,
[data-contrast="high"] .catalog-hero p,
[data-contrast="high"] .lic-hero p,
[data-contrast="high"] .projeto-lead,
[data-contrast="high"] .stat-body span {
  color: #ffffff;
}

[data-contrast="high"] .stats .wrap {
  border-color: #ffff00;
}

/* Campos de busca e controles de formulario. */
[data-contrast="high"] .hero-search,
[data-contrast="high"] .filters input[type="search"],
[data-contrast="high"] .filters select,
[data-contrast="high"] .toolbar select,
[data-contrast="high"] .tool-num input,
[data-contrast="high"] .modal-search,
[data-contrast="high"] .picker-search,
[data-contrast="high"] .picker-busca,
[data-contrast="high"] .picker-select {
  color: #ffffff;
  background: #000000;
  border-color: #ffff00;
  box-shadow: none;
}

[data-contrast="high"] .hero-search input,
[data-contrast="high"] .hero-search-icon {
  color: #ffffff;
  background: #000000;
}

[data-contrast="high"] input::placeholder {
  color: #ffffff;
  opacity: 1;
}

[data-contrast="high"] input[type="checkbox"],
[data-contrast="high"] input[type="radio"] {
  accent-color: #ffff00;
}

/* Acoes: amarelo com texto preto para a acao principal; contorno amarelo para
   a secundaria. Isso evita botoes pretos desaparecerem dentro dos heros. */
[data-contrast="high"] .btn-primary,
[data-contrast="high"] .btn-accent,
[data-contrast="high"] .btn-gold,
[data-contrast="high"] .mini-cta,
[data-contrast="high"] .passo-cta,
[data-contrast="high"] .site .btn-primary,
[data-contrast="high"] .hero-search .btn-primary,
[data-contrast="high"] .projeto-hero .btn-primary,
[data-contrast="high"] .projeto-hero[data-tema="riodoce"] .btn-primary {
  color: #000000;
  background: #ffff00;
  border-color: #ffff00;
  box-shadow: none;
}

[data-contrast="high"] .btn-primary:hover,
[data-contrast="high"] .btn-accent:hover,
[data-contrast="high"] .btn-gold:hover,
[data-contrast="high"] .mini-cta:hover,
[data-contrast="high"] .site .btn-primary:hover,
[data-contrast="high"] .projeto-hero .btn-primary:hover,
[data-contrast="high"] .projeto-hero[data-tema="riodoce"] .btn-primary:hover {
  color: #000000;
  background: #ffffff;
  border-color: #ffffff;
}

[data-contrast="high"] .btn-outline,
[data-contrast="high"] .hero .btn-outline,
[data-contrast="high"] .btn-reset,
[data-contrast="high"] .filters-clear,
[data-contrast="high"] .filter-more-toggle,
[data-contrast="high"] .pill,
[data-contrast="high"] .chip {
  color: #ffff00;
  background: #000000;
  border-color: #ffff00;
  box-shadow: none;
}

[data-contrast="high"] .btn-outline:hover,
[data-contrast="high"] .hero .btn-outline:hover,
[data-contrast="high"] .btn-reset:hover,
[data-contrast="high"] .filters-clear:hover,
[data-contrast="high"] .filter-more-toggle:hover,
[data-contrast="high"] .pill:hover,
[data-contrast="high"] .pill[aria-pressed="true"],
[data-contrast="high"] .chip:hover {
  color: #000000;
  background: #ffff00;
  border-color: #ffff00;
}

/* Cards de curso e catalogo. */
[data-contrast="high"] .course-card {
  color: #ffffff;
  background: #000000;
  border: 2px solid #ffff00;
  box-shadow: none;
}

[data-contrast="high"] .course-card h3,
[data-contrast="high"] .course-cat,
[data-contrast="high"] .rank-card .course-body::before {
  color: #ffff00;
}

[data-contrast="high"] .course-meta,
[data-contrast="high"] .course-notice {
  color: #ffffff;
}

[data-contrast="high"] .course-notice,
[data-contrast="high"] .course-badge {
  background: #000000;
  border-color: #ffff00;
}

[data-contrast="high"] .course-badge {
  color: #ffff00;
}

/* Facetas: o painel, os textos e os contadores compartilham o mesmo fundo. */
[data-contrast="high"] .filters {
  color: #ffffff;
  background: #000000;
  border: 2px solid #ffff00;
  box-shadow: none;
}

[data-contrast="high"] .filters-title,
[data-contrast="high"] .filter-group h3,
[data-contrast="high"] .filter-legend,
[data-contrast="high"] .filter-count,
[data-contrast="high"] .results-count,
[data-contrast="high"] .toolbar h2 {
  color: #ffff00;
}

[data-contrast="high"] .filter-option,
[data-contrast="high"] .filter-option label,
[data-contrast="high"] .sorter {
  color: #ffffff;
}

[data-contrast="high"] .filter-legend-badge,
[data-contrast="high"] .filters-clear-count {
  color: #000000;
  background: #ffff00;
}

/* O dialog de escolha de cursos tem tres superficies independentes. A grade
   rolavel sem fundo era a faixa branca que aparecia no alto contraste. */
[data-contrast="high"] .picker,
[data-contrast="high"] .picker-head,
[data-contrast="high"] .picker-grid,
[data-contrast="high"] .picker-foot {
  color: #ffffff;
  background: #000000;
  border-color: #ffff00;
  box-shadow: none;
}

[data-contrast="high"] .picker {
  border: 2px solid #ffff00;
  color-scheme: dark;
}

[data-contrast="high"] .picker::backdrop {
  background: rgba(0, 0, 0, .88);
}

[data-contrast="high"] .picker-top h2 {
  color: #ffff00;
}

[data-contrast="high"] .picker-x {
  color: #ffffff;
  background: #000000;
  border-color: #ffff00;
}

[data-contrast="high"] .picker-x:hover {
  color: #000000;
  background: #ffff00;
}

[data-contrast="high"] .picker-card[data-on] {
  outline-color: #ffff00;
}

[data-contrast="high"] .picker-selo {
  color: #000000;
  background: #ffff00;
  border: 1px solid #ffff00;
  box-shadow: none;
}

[data-contrast="high"] .picker-resumo,
[data-contrast="high"] .picker-vazio {
  color: #ffffff;
}

/* "O que e MOOC" e "Como funciona" tinham fundos claros literais, por isso
   ficaram com texto branco sobre branco depois da troca de tokens. */
[data-contrast="high"] .oquee {
  color: #ffffff;
  background-color: #000000;
  background-image: none;
  border-block: 1px solid #ffff00;
}

[data-contrast="high"] .oquee::after {
  color: rgba(255, 255, 0, .12);
}

[data-contrast="high"] .mooc-label,
[data-contrast="high"] .mooc-flow-head span,
[data-contrast="high"] .service-kicker {
  color: #ffff00;
  background: #000000;
  border: 1px solid #ffff00;
}

[data-contrast="high"] .oquee h2,
[data-contrast="high"] .mooc-intro h2,
[data-contrast="high"] .mooc-flow-head h2,
[data-contrast="high"] .passos h3,
[data-contrast="high"] .fato b {
  color: #ffff00;
}

[data-contrast="high"] .mooc-lead,
[data-contrast="high"] .mooc-copy,
[data-contrast="high"] .mooc-proof-main span,
[data-contrast="high"] .fato,
[data-contrast="high"] .fato-txt,
[data-contrast="high"] .passos p {
  color: #ffffff;
}

[data-contrast="high"] .mooc-proof-main,
[data-contrast="high"] .fato,
[data-contrast="high"] .mooc-flow,
[data-contrast="high"] .passos li {
  color: #ffffff;
  background: #000000;
  border-color: #ffff00;
  box-shadow: none;
}

[data-contrast="high"] .passo-icon,
[data-contrast="high"] .fato-ico {
  color: #ffff00;
  background: #000000;
  border: 1px solid #ffff00;
}

/* Projetos, series e painel de Licenca para Capacitacao. */
[data-contrast="high"] .projeto,
[data-contrast="high"] .projeto.riodoce,
[data-contrast="high"] .projeto.unac,
[data-contrast="high"] .projeto.geral,
[data-contrast="high"] .serie,
[data-contrast="high"] .serie-lovelace,
[data-contrast="high"] .parceiro,
[data-contrast="high"] .parceiro-marca,
[data-contrast="high"] .parceiro-areas li,
[data-contrast="high"] .service-panel,
[data-contrast="high"] .service-panel-corpo,
[data-contrast="high"] .license-meter,
[data-contrast="high"] .license-stack li,
[data-contrast="high"] .license-note,
[data-contrast="high"] .tool,
[data-contrast="high"] .tool-body,
[data-contrast="high"] .tool-empty,
[data-contrast="high"] .tool-list li {
  color: #ffffff;
  background: #000000;
  border-color: #ffff00;
  box-shadow: none;
}

[data-contrast="high"] .projeto h3,
[data-contrast="high"] .projeto .n,
[data-contrast="high"] .projeto .link,
[data-contrast="high"] .serie h3,
[data-contrast="high"] .serie .rotulo,
[data-contrast="high"] .serie .link,
[data-contrast="high"] .parceiro-rotulo,
[data-contrast="high"] .parceiro-corpo h2,
[data-contrast="high"] .parceiro-stats dd,
[data-contrast="high"] .parceiro-areas li,
[data-contrast="high"] .service-panel-head span,
[data-contrast="high"] .service-panel-meta b,
[data-contrast="high"] .meter-row strong,
[data-contrast="high"] .license-stack b {
  color: #ffff00;
}

[data-contrast="high"] .projeto p,
[data-contrast="high"] .serie p,
[data-contrast="high"] .serie .n,
[data-contrast="high"] .parceiro-extenso,
[data-contrast="high"] .parceiro-lead,
[data-contrast="high"] .parceiro-stats dt,
[data-contrast="high"] .parceiro-areas .area-n,
[data-contrast="high"] .service-panel-meta,
[data-contrast="high"] .meter-row span,
[data-contrast="high"] .license-note strong,
[data-contrast="high"] .license-note p {
  color: #ffffff;
}

/* Placas de marca continuam brancas para nao inverter logos institucionais. */
[data-contrast="high"] .projeto-logo,
[data-contrast="high"] .parceiro-marca .projeto-logo,
[data-contrast="high"] .projeto-brand .projeto-logo {
  background: #ffffff;
  border: 2px solid #ffff00;
}

[data-contrast="high"] .service-band {
  color: #ffffff;
  background-color: #000000;
  background-image: none;
  border-block: 1px solid #ffff00;
}

[data-contrast="high"] .service-band h2,
[data-contrast="high"] .service-copy p {
  color: #ffffff;
}

[data-contrast="high"] .tool-head,
[data-contrast="high"] a.tool-head {
  color: #ffffff;
  background: #000000;
  border-bottom: 2px solid #ffff00;
}

[data-contrast="high"] .tool-head h2,
[data-contrast="high"] .tool-head h3 {
  color: #ffff00;
}

[data-contrast="high"] .tool-head p {
  color: #ffffff;
}

[data-contrast="high"] .tool-icon {
  color: #ffff00;
  background: #000000;
  border-color: #ffff00;
}

[data-contrast="high"] .meter-track,
[data-contrast="high"] .tool-bar::-webkit-progress-bar {
  background: #ffffff;
  border: 1px solid #ffff00;
}

[data-contrast="high"] .meter-track span,
[data-contrast="high"] .tool-bar::-webkit-progress-value,
[data-contrast="high"] .tool-bar::-moz-progress-bar {
  background: #ffff00;
}

[data-contrast="high"] .service-band .meter-track span {
  background: #ffff00;
}

[data-contrast="high"] .site,
[data-contrast="high"] .main-nav.open,
[data-contrast="high"] footer,
[data-contrast="high"] .a11y-bar,
[data-contrast="high"] .lang-menu,
[data-contrast="high"] .faq details,
[data-contrast="high"] .faq summary,
[data-contrast="high"] .faq .resp {
  color: #ffffff;
  background: #000000;
  border-color: #ffff00;
}

[data-contrast="high"] .main-nav a:hover,
[data-contrast="high"] .main-nav a[aria-current="page"],
[data-contrast="high"] footer a:hover,
[data-contrast="high"] .faq summary::after,
[data-contrast="high"] .faq .resp a {
  color: #ffff00;
}

@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid CanvasText;
  }

  .btn,
  button,
  input,
  select,
  summary,
  .course-card {
    border: 1px solid CanvasText;
    forced-color-adjust: auto;
  }
}

/* O header da Vitrine tem 68px e leva o CTA "Acessar ambiente" colado na borda
   direita: no canto superior a barra cobria o botão em telas estreitas. Aqui ela
   desce para logo abaixo do header, que é sticky e acompanha a rolagem.
   Abaixo de 540px o a11y.css já a manda para o rodapé — a regra é repetida
   porque esta folha carrega depois e venceria a de lá. */
.a11y-bar {
  top: 84px;
  right: 16px;
}

@media (max-width: 540px) {
  .a11y-bar {
    top: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    right: max(8px, env(safe-area-inset-right));
    max-width: calc(100vw - 16px);
    flex-wrap: nowrap;
    gap: 2px;
    padding: 3px;
  }

  .a11y-bar[data-active="true"] {
    padding: 2px;
  }

  .a11y-bar button {
    min-width: 44px;
    min-height: 44px;
    padding-inline: 6px;
    gap: 2px;
    font-size: .8rem;
  }

  .a11y-bar-controls {
    gap: 2px;
  }

  .a11y-bar .a11y-sep {
    display: none;
  }

  .a11y-bar button svg {
    width: 14px;
    height: 14px;
  }

  .a11y-trigger svg {
    width: 16px;
    height: 16px;
  }

  .a11y-bar[data-active="true"] .a11y-trigger::after {
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .a11y-bar *,
  .a11y-bar *::before,
  .a11y-bar *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}