/* Componentes visuais do módulo /ronda (tema "Tactical Field Guard") — usa
   as mesmas utilities de troca de tela (.view/.view-active) e safe-area de
   css/style.css, que continua incluído nas páginas /ronda/*; aqui só o que
   é específico da identidade tática escura. */

html, body {
  background: #0d1322;
}

/* Duas instâncias do Material Symbols carregadas nas páginas /ronda/*: uma
   fixa (opsz,wght,FILL,GRAD@24,600,0,0, pros ícones estáticos) e uma
   variável (wght,FILL@100..700,0..1, pra ícones que mudam de peso/preenchi-
   mento em JS, ex: chip de observação selecionado). Sem essa regra, o
   navegador usa os valores default da fonte variável (mais fina) mesmo
   quando o CSS pede um peso maior. */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 600,
    'GRAD' 0,
    'opsz' 24;
}

.material-symbols-outlined.fill-1 {
  font-variation-settings:
    'FILL' 1,
    'wght' 600,
    'GRAD' 0,
    'opsz' 24;
}

/* Pílula de status ativo (ex: "● EM RONDA") — a única forma totalmente
   arredondada permitida pelo design system; todo o resto usa cantos de
   4-8px (ver DESIGN.md > Shapes). */
.ronda-status-pill {
  border-radius: 9999px;
}

/* Glow tático controlado (0-spread), usado em botões/indicadores ativos —
   nunca em drop-shadow difuso, que lava o contraste sob luz solar direta. */
.ronda-glow-primary {
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.45);
}

.ronda-glow-tertiary {
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.45);
}