/*
 * map-styles.css
 * Estilos base do mapa interativo do Brasil
 * Paleta editorial — azuis IBGE
 * ─────────────────────────────────────────
 * Variáveis CSS, classes de cor por estado,
 * interações hover/ativo e labels.
 */

/* ─── Variáveis globais ─────────────────────────────────────── */
:root {
  --map-bg:      #d6eaf8;   /* fundo do mapa / oceano             */
  --blue-1:      #cce0f0;   /* tom mais claro  — AM, RR, MT       */
  --blue-2:      #93bfe0;   /* tom médio-claro — PA, RO, AC, MA, PE, MS */
  --blue-3:      #4a8dbf;   /* tom médio       — TO, AP, PI, PB, SE, BA, GO, MG, SC */
  --blue-4:      #1e5f8e;   /* tom escuro      — CE, AL, RN, DF, ES, SP, PR */
  --blue-5:      #0d3b6e;   /* navy / destaque — RJ, RS           */
  --blue-hover:  #f0a500;   /* âmbar — hover e seleção ativa      */
  --stroke:      #ffffff;   /* contorno entre estados             */
  --label-text:  #1a3a5c;   /* cor das siglas no mapa             */
}

/* ─── Contentor SVG ─────────────────────────────────────────── */
svg {
  display: block;
  max-width: 100%;
  height: auto;
  background-color: var(--map-bg);
}

/* ─── Todos os paths de estados ────────────────────────────── */
#brasil-estados path {
  transition: fill 0.2s ease, filter 0.2s ease;
  cursor: pointer;
  outline: none;
}

/* ─── Estados: hover e seleção ativa ────────────────────────── */
#brasil-estados path:hover,
#brasil-estados path.ativo {
  fill: var(--blue-hover);
}

/* Opcional: leve sombra no hover para dar profundidade */
#brasil-estados path:hover {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

/* ─── Classes de cor ─────────────────────────────────────────
   Distribuição por estado (critério: vizinhos com tons diferentes)

   Norte
   ─────
   .blue-1  → AM, RR       (estados maiores, tom mais claro)
   .blue-2  → PA, RO, AC   (intermediários)
   .blue-3  → TO, AP       (tom médio)

   Nordeste
   ────────
   .blue-2  → MA, PE       (tom médio-claro)
   .blue-3  → BA, PI, PB, SE  (tom médio)
   .blue-4  → CE, AL, RN   (tom escuro)

   Centro-Oeste
   ────────────
   .blue-1  → MT           (estado grande, tom claro)
   .blue-2  → MS           (tom médio-claro)
   .blue-3  → GO           (tom médio)
   .blue-4  → DF           (destaque, tom escuro)

   Sudeste
   ───────
   .blue-3  → MG           (estado grande, tom médio)
   .blue-4  → ES, SP       (tom escuro)
   .blue-5  → RJ           (navy, destaque máximo)

   Sul
   ───
   .blue-3  → SC           (tom médio)
   .blue-4  → PR           (tom escuro)
   .blue-5  → RS           (navy)
   ─────────────────────────────────────────────────────────── */

.blue-1 { fill: var(--blue-1); }
.blue-2 { fill: var(--blue-2); }
.blue-3 { fill: var(--blue-3); }
.blue-4 { fill: var(--blue-4); }
.blue-5 { fill: var(--blue-5); }

/* ─── Labels (siglas dos estados) ───────────────────────────── */
#labels text,
.state-label {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  fill: var(--label-text);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ─── Foco acessível via teclado ────────────────────────────── */
#brasil-estados path:focus {
  fill: var(--blue-hover);
  outline: 2px solid var(--blue-5);
  outline-offset: 2px;
}

/* ─── Responsividade ────────────────────────────────────────── */
@media (max-width: 600px) {
  #labels text,
  .state-label {
    font-size: 8px;
  }
}

@media (max-width: 400px) {
  #labels text,
  .state-label {
    display: none;
  }
}

/* ─── Modo de alto contraste ─────────────────────────────────── */
@media (prefers-contrast: high) {
  :root {
    --blue-hover: #ff8c00;
    --stroke:     #000000;
    --label-text: #000000;
  }

  #brasil-estados path {
    stroke-width: 2px;
  }
}

/* ─── Redução de movimento ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #brasil-estados path {
    transition: none;
  }
}