/* telas/mapa.css — Mapa do Brasil (M34; C §5.20, U04, G §5.4). Só tokens (cores por classe q0..q5 = --seq-0..5 da paleta
   ativa: o mesmo SVG serve às 12 combinações de tema × paleta). Seleção nunca só por cor: contorno tracejado + chip + aviso. */

@layer telas {
  .mapa-pagina { max-width: var(--w-larga); margin-inline: auto; display: grid; gap: var(--sp-5); }
  .mapa-pagina--estreita { max-width: var(--w-conteudo); }

  /* ------------------------------------------------------------ cabeçalho, migalhas, controles */
  .mapa-migalhas ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--text-3); }
  .mapa-migalhas li { display: inline-flex; align-items: center; gap: var(--sp-2); }
  .mapa-migalhas li + li::before { content: "›"; color: var(--text-3); }
  .mapa-migalhas a { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--text-2); font-weight: 600; text-decoration: none; min-height: 32px; }
  .mapa-migalhas a:hover { color: var(--accent-text); text-decoration: underline; }
  .mapa-migalhas [aria-current="page"] { color: var(--text); font-weight: 700; }
  .mapa-migalhas .i { width: 16px; height: 16px; }

  .mapa-cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; }
  .mapa-cabeca .titulo-pagina { font-size: var(--fs-2xl); letter-spacing: -0.03em; }
  .mapa-cabeca__sobre { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-1); font-size: var(--fs-xs); font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
  .mapa-cabeca__sobre .i { width: 16px; height: 16px; }
  .mapa-cabeca__acoes { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
  .mapa-controles { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }

  /* ------------------------------------------------------------ filtros */
  .mapa-filtros { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: flex-end; padding: var(--sp-4); border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--border); }
  .mapa-filtros__campos { display: grid; gap: var(--sp-3) var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); flex: 1 1 560px; align-items: end; }
  /* Selects não cortam no meio da palavra (V15): reticências; o interruptor ocupa uma linha inteira. */
  .mapa-filtros select.campo__controle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mapa-filtros__regionais { grid-column: 1 / -1; }
  .mapa-filtros__regionais > * { width: 100%; }
  .mapa-filtros__acoes { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
  .mapa-filtros__chips { margin-top: calc(var(--sp-2) * -1); }
  .mapa-filtros__chips .chip { text-decoration: none; }
  .mapa-filtros__chips .chip .i { width: 14px; height: 14px; }
  .mapa-filtros[data-js] .mapa-filtros__aplicar { display: none; }
  /* Abaixo de 768 px (com JS): botão "Filtros (n)" e o formulário na folha inferior (gaveta do M02). */
  .mapa-filtros-gatilho { display: none; }
  .mapa-filtros-gatilho[hidden] { display: none !important; }
  @media (max-width: 767.98px) {
    .mapa-filtros-gatilho { display: flex; }
    .mapa-controles .mapa-filtros-gatilho { margin-left: auto; }
    .mapa-filtros-lugar[data-vazio] { display: none; }
    /* Os números da UF já estão no subtítulo; no celular os cartões saem para o mapa subir. */
    .mapa-pagina .mapa-numeros { display: none; }
  }
  #mapa-filtros-gaveta .mapa-filtros { padding: 0; border: 0; background: none; flex-direction: column; align-items: stretch; }
  #mapa-filtros-gaveta .mapa-filtros__campos { flex: 0 0 auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #mapa-filtros-gaveta .mapa-filtros__campos > .campo:nth-child(-n+2) { grid-column: 1 / -1; }
  #mapa-filtros-gaveta .mapa-filtros__acoes { justify-content: flex-end; }
  #mapa-filtros-gaveta .mapa-filtros[data-js] .mapa-filtros__aplicar { display: inline-flex; }

  /* ------------------------------------------------------------ corpo */
  .mapa-corpo { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 1024px) { .mapa-corpo { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); } }
  @media (min-width: 1600px) { .mapa-corpo { grid-template-columns: minmax(0, 2fr) 400px; } }
  .mapa-cartao { position: relative; container-type: inline-size; }
  .mapa-numeros { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .mapa-numeros > .stat { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-1); }
  .mapa-numeros .stat__valor { font-size: var(--fs-xl); }

  /* ------------------------------------------------------------ o mapa (SVG) */
  .mapa-area { position: relative; }
  .mapa-svg { position: relative; }
  .mapa-svg { overflow: hidden; border-radius: var(--r-md); }
  .mapa__svg { width: 100%; height: auto; max-height: 72vh; display: block; margin-inline: auto; overflow: hidden; touch-action: manipulation; }
  .mapa__svg .area { cursor: pointer; outline: none; }
  .mapa__svg .area path { fill: var(--seq-0); stroke: var(--surface); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke;
    transition: fill var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out), stroke var(--dur-1) var(--ease-out); }
  .mapa__svg .area.q1 path { fill: var(--seq-1); }
  .mapa__svg .area.q2 path { fill: var(--seq-2); }
  .mapa__svg .area.q3 path { fill: var(--seq-3); }
  .mapa__svg .area.q4 path { fill: var(--seq-4); }
  .mapa__svg .area.q5 path { fill: var(--seq-5); }
  /* Escala divergente (C §3.1.5: "abaixo ← média → acima"), para quem passa 'classes' prontas (ex.: desempenho por UF). */
  .mapa__svg .area.div-abaixo-3 path { fill: var(--div-abaixo-3); } .mapa__svg .area.div-abaixo-2 path { fill: var(--div-abaixo-2); }
  .mapa__svg .area.div-abaixo-1 path { fill: var(--div-abaixo-1); } .mapa__svg .area.div-0 path { fill: var(--div-0); }
  .mapa__svg .area.div-acima-1 path { fill: var(--div-acima-1); } .mapa__svg .area.div-acima-2 path { fill: var(--div-acima-2); }
  .mapa__svg .area.div-acima-3 path { fill: var(--div-acima-3); }
  .mapa__svg .mapa-areas:has(.area:hover) .area:not(:hover) path,
  .mapa__svg .mapa-areas:has(.area:focus-visible) .area:not(:focus-visible) path { opacity: .72; }
  .mapa__svg .area:hover path { stroke: var(--text); stroke-width: 2; }
  .mapa__svg .area:focus-visible path { stroke: var(--ring); stroke-width: 3.5; }
  .mapa__svg .area[data-selecionado="sim"] path { stroke: var(--accent-text); stroke-width: 3; stroke-dasharray: 6 3; }
  .mapa__svg .area[data-destaque="sim"] path { stroke: var(--text); stroke-width: 3; }
  .mapa__svg .mapa-areas:has([data-destaque="sim"]) .area:not([data-destaque="sim"]) path { opacity: .5; }
  .mapa__svg .mapa-fronteiras { fill: none; stroke: var(--surface); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
  .mapa__svg .mapa-contorno { fill: none; stroke: var(--border-strong); stroke-width: 1.2; vector-effect: non-scaling-stroke; pointer-events: none; }
  .mapa-area[data-sem-dados] .mapa__svg .area path { fill: var(--surface-3); }
  .mapa-area[data-nivel="br"] .mapa__svg { max-width: 760px; }

  .mapa-dica { position: absolute; z-index: var(--z-tooltip); pointer-events: none; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-3); font-size: var(--fs-sm); color: var(--text-2);
    min-width: 200px; max-width: 280px; }
  .mapa-dica[data-toque] { pointer-events: auto; }
  .mapa-dica__nome { display: block; font-size: var(--fs-md); font-weight: 800; color: var(--text); }
  .mapa-dica__valor { display: block; font-size: var(--fs-lg); font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; margin-top: var(--sp-1); }
  .mapa-dica__linha { display: block; margin-top: var(--sp-1); }
  .mapa-dica__acao { display: block; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border); font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); }
  .mapa-dica .btn { margin-top: var(--sp-2); }

  .mapa-atualizando { position: absolute; inset-inline: 0; bottom: var(--sp-3); margin: 0 auto; width: fit-content; display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-2);
    font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
  .mapa-atualizando .i { width: 16px; height: 16px; color: var(--accent-text); }
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-movimento="reduzido"]) .mapa-atualizando .i { animation: mapa-girar 1.4s linear infinite; }
  }
  @keyframes mapa-girar { to { transform: rotate(360deg); } }

  .mapa-sem-malha { display: grid; place-items: center; gap: var(--sp-3); text-align: center; padding: var(--sp-12) var(--sp-6); color: var(--text-2);
    border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2); }
  .mapa-sem-malha .i { width: 40px; height: 40px; color: var(--accent-text); }
  .mapa-sem-malha p { max-width: 42ch; margin: 0; }
  .mapa-ajuda { display: flex; gap: var(--sp-2); align-items: flex-start; margin: var(--sp-3) 0 0; }
  .mapa-ajuda .i { flex: none; width: 16px; height: 16px; margin-top: 2px; }

  .mapa-zoom { position: absolute; top: var(--sp-4); right: var(--sp-4); display: grid; gap: var(--sp-2); z-index: var(--z-sticky); }
  .mapa-zoom .btn-icone { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-1); }

  /* ------------------------------------------------------------ grade de UFs (tile map 7×7) */
  .grade-uf { display: none; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); max-width: 640px; margin-inline: auto; }
  .grade-uf__uf { aspect-ratio: 1; min-height: 44px; border-radius: var(--r-md); display: grid; place-content: center; text-align: center; gap: 2px;
    color: var(--text); border: 1px solid var(--border); text-decoration: none; background: var(--seq-0); font: inherit; cursor: pointer;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
  .grade-uf__uf strong { font-weight: 800; font-size: var(--fs-md); line-height: 1.1; }
  .grade-uf__uf span { font-size: var(--fs-xs); font-weight: 600; line-height: 1.1; }
  .grade-uf__uf:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
  .grade-uf__uf:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
  .grade-uf__uf.q1 { background: var(--seq-1); } .grade-uf__uf.q2 { background: var(--seq-2); }
  .grade-uf__uf.q3 { background: var(--seq-3); color: var(--surface); } .grade-uf__uf.q4 { background: var(--seq-4); color: var(--surface); }
  .grade-uf__uf.q5 { background: var(--seq-5); color: var(--surface); }
  :root[data-tema="escuro"] .grade-uf__uf.q3, :root[data-tema="escuro"] .grade-uf__uf.q4, :root[data-tema="escuro"] .grade-uf__uf.q5 { color: var(--bg); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .grade-uf__uf.q3, :root:not([data-tema="claro"]) .grade-uf__uf.q4, :root:not([data-tema="claro"]) .grade-uf__uf.q5 { color: var(--bg); }
  }
  .grade-uf__uf[data-selecionado="sim"] { outline: 3px dashed var(--accent-text); outline-offset: 2px; }
  .grade-uf__vazio { aspect-ratio: 1; }
  @media (max-width: 559.98px) {
    .mapa-cartao { padding: var(--sp-2); }
    .grade-uf { gap: var(--sp-1); }
  }

  /* Visão: "mapa" | "grade" | "auto" (grade abaixo de 390 px e na TV; mapa nos demais). */
  .mapa-area[data-visao="grade"] .mapa-svg { display: none; }
  .mapa-area[data-visao="grade"] .grade-uf { display: grid; }
  @media (max-width: 389.98px) {
    .mapa-area[data-visao="auto"] .mapa-svg { display: none; }
    .mapa-area[data-visao="auto"] .grade-uf { display: grid; }
  }
  :root[data-modo="tv"] .mapa-area[data-visao="auto"] .mapa-svg { display: none; }
  :root[data-modo="tv"] .mapa-area[data-visao="auto"] .grade-uf { display: grid; }

  /* ------------------------------------------------------------ painel */
  .mapa-painel { display: grid; gap: var(--sp-5); align-content: start; }
  .mapa-painel__titulo { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
  .mapa-legenda__faixas { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); color: var(--text-2); font-weight: 600; }
  .mapa-legenda__faixas li { display: inline-flex; align-items: center; gap: var(--sp-1); }
  .mapa-legenda__faixas i { width: 14px; height: 14px; border-radius: var(--r-xs); display: inline-block; border: 1px solid var(--border); }
  .mapa-legenda__faixas i.q0 { background: var(--seq-0); } .mapa-legenda__faixas i.q1 { background: var(--seq-1); } .mapa-legenda__faixas i.q2 { background: var(--seq-2); }
  .mapa-legenda__faixas i.q3 { background: var(--seq-3); } .mapa-legenda__faixas i.q4 { background: var(--seq-4); } .mapa-legenda__faixas i.q5 { background: var(--seq-5); }

  .mapa-ranking { display: grid; gap: var(--sp-1); list-style: none; padding: 0; margin: 0; }
  .mapa-ranking li { display: grid; grid-template-columns: 24px minmax(0, 1fr) 72px 6.5ch; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm);
    min-height: 36px; padding: 0 var(--sp-2); border-radius: var(--r-sm); transition: background var(--dur-1) var(--ease-out); }
  .mapa-ranking li:hover, .mapa-ranking li[data-realce] { background: var(--surface-2); }
  .mapa-ranking__pos { color: var(--text-3); font-weight: 700; font-variant-numeric: tabular-nums; }
  .mapa-ranking__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .mapa-ranking__nome a { color: var(--text); text-decoration: none; }
  .mapa-ranking__nome a:hover { color: var(--accent-text); text-decoration: underline; }
  .mapa-ranking__nome small { display: block; color: var(--text-3); font-weight: 500; }
  .mapa-ranking__barra .barra-bala { width: 100%; height: 10px; display: block; }
  .mapa-ranking__num { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
  .mapa-todas summary, .mapa-regionais summary, .mapa-indice summary { cursor: pointer; font-weight: 700; color: var(--accent-text); min-height: 44px; display: flex; align-items: center; }
  .mapa-indice summary .mapa-painel__titulo { margin: 0; color: var(--text); font-size: var(--fs-md); text-transform: none; letter-spacing: 0; }
  .mapa-todas .mapa-ranking { margin-top: var(--sp-2); }

  .mapa-nacionais { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); align-items: center; padding: var(--sp-4);
    border-radius: var(--r-lg); background: var(--surface-2); }
  .mapa-nacionais > .btn { grid-column: 1 / -1; justify-self: start; }
  .mapa-nacionais__icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); }
  .mapa-nacionais__titulo { margin: 0; font-weight: 800; }
  .mapa-nacionais p { margin: 0; }
  .mapa-regionais__lista, .mapa-orgaos, .mapa-provas, .mapa-lista-ufs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
  .mapa-regionais__lista li, .mapa-orgaos li, .mapa-provas li { display: grid; gap: 2px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
  .mapa-regionais__lista li:last-child, .mapa-orgaos li:last-child, .mapa-provas li:last-child { border-bottom: 0; }
  .mapa-orgaos a { font-weight: 600; color: var(--text); text-decoration: none; }
  .mapa-orgaos a:hover { color: var(--accent-text); text-decoration: underline; }
  .mapa-lista-ufs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .mapa-lista-ufs a { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-2); border-radius: var(--r-sm); color: var(--text);
    text-decoration: none; font-weight: 600; }
  .mapa-lista-ufs a:hover { background: var(--surface-2); }
  .mapa-lista-ufs__sigla { display: inline-grid; place-items: center; min-width: 32px; height: 28px; border-radius: var(--r-xs); background: var(--surface-3);
    font-size: var(--fs-xs); font-weight: 800; }
  .mapa-atualizado, .mapa-nota { margin: 0; font-size: var(--fs-xs); display: flex; gap: var(--sp-2); align-items: flex-start; }
  .mapa-nota .i { flex: none; width: 14px; height: 14px; margin-top: 2px; }

  /* ------------------------------------------------------------ busca e índice de municípios */
  .mapa-busca-mun { display: grid; gap: var(--sp-2); }
  .mapa-indice__letras { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-3) 0; }
  .mapa-indice__letras a { display: inline-grid; place-items: center; min-width: 36px; min-height: 36px; border-radius: var(--r-sm); background: var(--surface-2);
    color: var(--text); font-weight: 700; text-decoration: none; }
  .mapa-indice__letras a:hover, .mapa-indice__letras a:focus-visible { background: var(--accent-soft); color: var(--accent-text); }
  .mapa-indice__letra { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-lg); font-weight: 800; color: var(--accent-text); scroll-margin-top: var(--sp-16); }
  .mapa-indice__lista { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: var(--sp-6); font-size: var(--fs-sm); }
  @media (min-width: 560px) { .mapa-indice__lista { columns: 2; } }
  @media (min-width: 1024px) { .mapa-indice__lista { columns: 4; } }
  .mapa-indice__lista li { break-inside: avoid; padding: var(--sp-1) 0; }
  .mapa-indice__lista a { color: var(--text); font-weight: 600; text-decoration: none; }
  .mapa-indice__lista a:hover { color: var(--accent-text); text-decoration: underline; }

  .mapa-tv-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .mapa-tv-lista a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); min-height: 72px; padding: 0 var(--sp-4);
    border-radius: var(--r-lg); background: var(--surface-2); color: var(--text); text-decoration: none; font-size: var(--fs-lg); font-weight: 700; }
  .mapa-tv-lista a:focus-visible { outline: 4px solid var(--ring); outline-offset: 2px; }
  .mapa-tv-lista__pos { color: var(--text-3); }

  /* ------------------------------------------------------------ rodapé: seleção + Praticar */
  .mapa-rodape { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-1); }
  .mapa-selecao { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
  .mapa-selecao .chip button { min-width: 32px; min-height: 32px; }
  .mapa-seguindo-link { margin: 0; }
  .mapa-seguindo-link a { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; min-height: 44px; }
  .mapa-seguir { display: inline-flex; }
  .mapa-seguir .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-text); }
  .mapa-seguir .btn[aria-pressed="true"] .i { color: var(--accent-text); }

  /* ------------------------------------------------------------ regiões seguidas */
  .mapa-seguidas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
  .mapa-seguida { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
  .mapa-seguida__texto { display: flex; gap: var(--sp-3); align-items: center; min-width: 0; }
  .mapa-seguida__icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); flex: none; }
  .mapa-seguida__nome { margin: 0; font-size: var(--fs-md); font-weight: 800; }
  .mapa-seguida__nome a { color: var(--text); text-decoration: none; }
  .mapa-seguida__nome a:hover { color: var(--accent-text); text-decoration: underline; }
  .mapa-seguida p { margin: 0; }
  .mapa-seguida[data-removida] { opacity: .6; }

  /* ------------------------------------------------------------ alvos de toque e foco (C §15; auditoria do M36):
     a linha inteira do ranking é clicável; links de lista com ≥ 28 px no mouse, ≥ 44 px no toque e ≥ 56 px na TV. */
  .mapa-ranking li { position: relative; }
  .mapa-ranking__nome a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-sm); }
  .mapa-ranking__nome a:focus-visible { outline: none; }
  .mapa-ranking li:has(a:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }
  .mapa-orgaos a, .mapa-indice__lista a, .mapa-seguida__nome a, .mapa-migalhas a { display: inline-flex; align-items: center; min-height: 28px; }
  @media (pointer: coarse) {
    .mapa-ranking li { min-height: 44px; }
    .mapa-orgaos a, .mapa-indice__lista a, .mapa-seguida__nome a, .mapa-migalhas a, .mapa-indice__letras a { min-height: 44px; min-width: 44px; }
  }
  :root[data-modo="tv"] .mapa-ranking li { min-height: 56px; }
  :root[data-modo="tv"] .mapa-orgaos a, :root[data-modo="tv"] .mapa-indice__lista a, :root[data-modo="tv"] .mapa-migalhas a,
  :root[data-modo="tv"] .mapa-indice__letras a, :root[data-modo="tv"] .mapa-seguida__nome a { min-height: 56px; min-width: 56px; }

  /* ------------------------------------------------------------ seletor (U04) embutido */
  .seletor-local { display: grid; gap: var(--sp-4); }
  .seletor-local__dica { margin: 0; }
  .seletor-local__corpo { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 1024px) { .seletor-local__corpo { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); } }
  .seletor-local__painel { display: grid; gap: var(--sp-3); align-content: start; max-height: 60vh; overflow: auto; }

  /* ------------------------------------------------------------ município em foco (pedido do Roger, 23/09)
     O mapa da UF encolhe e vai para o lado (desktop: coluna de ~1/3 à esquerda, fixa ao rolar; tablet: faixa baixa no
     alto; celular: miniatura fixa no alto) e o painel do município ocupa o conteúdo. Clicar no mapa pequeno (a camada
     .mapa-ampliar cobre o cartão), "Ampliar mapa" ou Esc devolvem o mapa. O mapa.js anima a troca (View Transitions ou
     FLIP, 420 ms, --ease-out); sem movimento (preferência do sistema, data-movimento ou TV) a troca é instantânea. */
  .mapa-foco { display: none; min-width: 0; }
  .mapa-ampliar { display: none; }
  .mapa-pagina { --mapa-topo: calc(52px + var(--sp-3)); }
  @media (max-width: 1023.98px) { .mapa-pagina { --mapa-topo: calc(var(--topbar) + var(--sp-2)); } }
  .mapa-pagina[data-foco] .mapa-uf-topo, .mapa-pagina[data-foco] [data-mapa-painel-uf], .mapa-pagina[data-foco] .mapa-so-uf,
  .mapa-pagina[data-foco] .mapa-rodape, .mapa-pagina[data-foco] .mapa-zoom, .mapa-pagina[data-foco] .mapa-ajuda,
  .mapa-pagina[data-foco] .mapa-dica { display: none; }
  .mapa-pagina[data-foco] .mapa-foco { display: block; }
  .mapa-pagina[data-foco] .mapa-cartao { align-self: start; overflow: hidden; }
  .mapa-pagina[data-foco] .mapa-ampliar { display: flex; position: absolute; inset: 0; z-index: 2; align-items: flex-end; justify-content: flex-end;
    padding: var(--sp-3); border-radius: inherit; text-decoration: none; cursor: zoom-in; }
  .mapa-ampliar__rotulo { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-4); border-radius: var(--r-full);
    background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-2); color: var(--text); font-weight: 700; font-size: var(--fs-sm);
    transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out); }
  .mapa-ampliar__rotulo .i { width: 16px; height: 16px; color: var(--accent-text); }
  .mapa-ampliar:hover .mapa-ampliar__rotulo { border-color: var(--accent); color: var(--accent-text); transform: translateY(-1px); }
  .mapa-ampliar:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
  .mapa-ampliar:focus-visible .mapa-ampliar__rotulo { border-color: var(--accent); }
  @media (min-width: 1024px) {
    .mapa-pagina[data-foco] .mapa-corpo { grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); }
    .mapa-pagina[data-foco] .mapa-cartao { position: sticky; top: var(--mapa-topo); }
    .mapa-pagina[data-foco] .mapa__svg { max-height: calc(100dvh - var(--mapa-topo) - var(--sp-16)); }
  }
  @media (min-width: 560px) and (max-width: 1023.98px) {
    .mapa-pagina[data-foco] .mapa-cartao { padding: var(--sp-3); }
    .mapa-pagina[data-foco] .mapa__svg { max-height: 200px; }
  }
  @media (max-width: 559.98px) {
    .mapa-pagina[data-foco] .mapa-corpo { gap: var(--sp-4); }
    .mapa-pagina[data-foco] .mapa-cartao { position: sticky; top: var(--mapa-topo); z-index: var(--z-sticky); padding: var(--sp-1) var(--sp-2); box-shadow: var(--sh-2); }
    .mapa-pagina[data-foco] .mapa__svg { max-height: 72px; margin-inline: 0 auto; }
    .mapa-pagina[data-foco] .mapa-ampliar { align-items: center; padding: 0 var(--sp-2); }
    .mapa-pagina[data-foco] .mapa-ampliar__rotulo { min-height: 44px; padding: 0 var(--sp-3); font-size: var(--fs-xs); }
    .mapa-pagina[data-foco] .mapa-foco-mun__acoes > [data-mapa-ampliar] { display: none; }
  }
  /* TV: a "área" é a lista dos maiores municípios; em foco ela fica na coluna estreita, sem a camada de ampliar por cima. */
  :root[data-modo="tv"] .mapa-pagina[data-foco] .mapa-cartao { display: flex; flex-direction: column; gap: var(--sp-3); }
  :root[data-modo="tv"] .mapa-pagina[data-foco] .mapa-ampliar { position: static; inset: auto; order: -1; justify-content: flex-start; padding: 0; cursor: pointer; }
  :root[data-modo="tv"] .mapa-pagina[data-foco] .mapa-tv-lista { max-height: calc(100dvh - var(--mapa-topo) - 160px); overflow-y: auto; padding: var(--sp-1); }
  .mapa-tv-lista a[aria-current="true"] { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 2px var(--accent); }
  :root[data-modo="tv"] .mapa-pagina[data-foco] .mapa-tv-lista { grid-template-columns: minmax(0, 1fr); }

  /* Durante a troca animada (View Transitions): o cartão do mapa e os painéis deslizam com nome próprio. */
  .mapa-pagina[data-vt] .mapa-cartao { view-transition-name: mapa-cartao; }
  .mapa-pagina[data-vt] .mapa-foco { view-transition-name: mapa-foco; }
  .mapa-pagina[data-vt] [data-mapa-painel-uf] { view-transition-name: mapa-painel-uf; }
  .mapa-pagina[data-vt] .mapa-uf-topo { view-transition-name: mapa-uf-topo; }

  .mapa-foco-mun { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); min-width: 0; }
  .mapa-foco-mun > * { min-width: 0; }
  .mapa-foco-mun__acoes .btn { max-width: 100%; }
  .mapa-foco-mun__acoes .btn span { white-space: normal; text-align: center; }
  .mapa-foco-mun__cabeca { display: grid; gap: var(--sp-1); }
  .mapa-foco-mun__cabeca .titulo-pagina { margin: 0; font-size: var(--fs-2xl); letter-spacing: -0.03em; }
  .mapa-foco-mun__cabeca .titulo-pagina:focus { outline: none; }
  .mapa-foco-mun__cabeca .titulo-pagina:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; border-radius: var(--r-sm); }
  .mapa-foco-mun__resumo { margin: 0; color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
  .mapa-foco-mun__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
  .mapa-foco-mun__secao { display: grid; gap: var(--sp-3); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface);
    border: 1px solid var(--border); box-shadow: var(--sh-1); min-width: 0; }
  .mapa-foco-mun__titulo { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-lg); font-weight: 800; }
  .mapa-foco-mun__titulo .i { width: 20px; height: 20px; color: var(--accent-text); }
  .mapa-foco-mun__ajuda { margin: 0; }
  .mapa-foco-orgaos { list-style: none; margin: 0; padding: 0; display: grid; }
  .mapa-foco-orgaos li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
  .mapa-foco-orgaos li:last-child { border-bottom: 0; padding-bottom: 0; }
  .mapa-foco-orgaos li:first-child { padding-top: 0; }
  .mapa-foco-orgaos__texto { display: grid; gap: 2px; min-width: 0; }
  .mapa-foco-orgaos__texto strong { font-weight: 700; overflow-wrap: anywhere; }
  .mapa-foco-orgaos .btn { flex: none; }
  .mapa-foco-busca { max-width: 520px; }
  .mapa-foco-busca__vazio { margin: 0; }
  .mapa-concursos { display: grid; gap: var(--sp-3); }
  .mapa-concurso { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
  .mapa-concurso > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4);
    min-height: 56px; cursor: pointer; list-style: none; background: var(--surface-2); }
  .mapa-concurso > summary::-webkit-details-marker { display: none; }
  .mapa-concurso > summary:hover { background: var(--surface-3); }
  .mapa-concurso > summary:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
  .mapa-concurso__titulo { font-weight: 800; overflow-wrap: anywhere; }
  .mapa-concurso__meta { grid-column: 1; font-weight: 600; }
  .mapa-concurso > summary > .i { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--text-3); transition: transform var(--dur-2) var(--ease-out); }
  .mapa-concurso[open] > summary > .i { transform: rotate(180deg); }
  .mapa-provas-lista { list-style: none; margin: 0; padding: 0; }
  .mapa-prova { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border); }
  .mapa-prova:hover { background: var(--surface-2); }
  .mapa-prova__texto { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; justify-items: start; }
  .mapa-prova__texto strong { font-weight: 700; overflow-wrap: anywhere; }
  .mapa-prova__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .mapa-provas-mais { border-top: 1px solid var(--border); }
  .mapa-provas-mais > summary { display: flex; align-items: center; min-height: 48px; padding: 0 var(--sp-4); cursor: pointer; font-weight: 700; color: var(--accent-text); }
  .mapa-provas-mais[open] > summary { border-bottom: 1px solid var(--border); }
  .mapa-provas-mais > .mapa-provas-lista > .mapa-prova:first-child { border-top: 0; }
  .mapa-foco-mun [hidden] { display: none !important; }
  @media (max-width: 559.98px) {
    .mapa-foco-mun__secao { padding: var(--sp-4); }
    .mapa-foco-mun__acoes > .btn, .mapa-foco-mun__acoes > .mapa-seguir, .mapa-foco-mun__acoes > .mapa-seguir .btn { width: 100%; justify-content: center; }
    .mapa-foco-orgaos li { flex-wrap: wrap; }
    .mapa-prova { padding: var(--sp-3); }
  }
  :root[data-modo="tv"] .mapa-concurso > summary { min-height: 64px; }
  :root[data-modo="tv"] .mapa-provas-mais > summary { min-height: 56px; }
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-movimento="reduzido"]):not([data-modo="tv"]) .mapa-pagina:not([data-vt])[data-foco] .mapa-foco-mun { animation: mapa-sobe var(--dur-3) var(--ease-out) both; }
  }

  /* ------------------------------------------------------------ movimento (C §3.6) */
  @media (prefers-reduced-motion: no-preference) {
    :root:not([data-movimento="reduzido"]):not([data-modo="tv"]) .mapa-svg { animation: mapa-entra var(--dur-4) var(--ease-out) both; }
    :root:not([data-movimento="reduzido"]):not([data-modo="tv"]) .grade-uf__uf { animation: mapa-entra var(--dur-3) var(--ease-out) both; }
  }
  @keyframes mapa-entra { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes mapa-sobe { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  /* ------------------------------------------------------------ TV (10-foot UI) */
  :root[data-modo="tv"] .grade-uf { max-width: 880px; gap: var(--sp-3); }
  :root[data-modo="tv"] .grade-uf__uf { min-height: 96px; }
  :root[data-modo="tv"] .grade-uf__uf strong { font-size: var(--fs-xl); }
  :root[data-modo="tv"] .grade-uf__uf span { font-size: var(--fs-md); }
  :root[data-modo="tv"] .grade-uf__uf:focus-visible { outline-width: 4px; transform: scale(1.06); }
  :root[data-modo="tv"] .mapa-filtros, :root[data-modo="tv"] .mapa-ajuda { display: none; }
  :root[data-modo="tv"] .mapa-ranking__nome { white-space: normal; }
  [data-mapa-modo-selecao][aria-pressed="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 2px var(--accent); }

  /* ------------------------------------------------------------ alto contraste e impressão */
  @media (forced-colors: active) {
    .mapa__svg .area path { stroke: CanvasText; stroke-width: 1; }
    .mapa__svg .area[data-selecionado="sim"] path, .mapa__svg .area:focus-visible path { stroke: Highlight; stroke-width: 3; }
    .grade-uf__uf { border: 2px solid CanvasText; }
    .grade-uf__uf[data-selecionado="sim"] { outline: 3px solid Highlight; }
  }
  @media print {
    .mapa-filtros, .mapa-controles, .mapa-rodape, .mapa-zoom, .mapa-dica, .mapa-seguir, .mapa-busca-mun { display: none; }
  }
}

/* Troca de página com fade entre /mapa e /mapa/{uf} (View Transitions entre documentos), só sem preferência por menos movimento. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
/* Município em foco: o mapa desliza e encolhe (ou volta) em 420 ms; os painéis trocam com um esmaecer curto. */
::view-transition-group(mapa-cartao), ::view-transition-group(mapa-foco), ::view-transition-group(mapa-painel-uf), ::view-transition-group(mapa-uf-topo) {
  animation-duration: 420ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-old(mapa-cartao), ::view-transition-new(mapa-cartao) { height: 100%; width: 100%; object-fit: contain; }
::view-transition-old(mapa-foco), ::view-transition-new(mapa-foco), ::view-transition-old(mapa-painel-uf), ::view-transition-new(mapa-painel-uf),
::view-transition-old(mapa-uf-topo), ::view-transition-new(mapa-uf-topo) { animation-duration: 260ms; }