/* ============================================================
   Pictogramas e cores de situação.

   Uma regra só: cor indica SITUAÇÃO, não decora.

     ações ("o que aconteceu")  -> a cor da situação
     navegação (abas, atalhos)  -> neutra: não há situação nenhuma ali

   Base: Manual Brasileiro de Sinalização de Trânsito (CONTRAN, 2022) —
   pesquisa em interno/pesquisas/placas-contran.json. Amarelo é
   advertência, azul é serviço, a cruz vermelha é o pronto-socorro.
   O LARANJA do roubo NÃO vem do manual, que o reserva para obras: é um
   degrau de gravidade entre vida e pane, escolhido para o app. O verde do
   seguro também é escolha nossa — "protegido", não uma placa.

   Em ordem de gravidade:

     vida      vermelho   acidente com ferido
     alerta    laranja    roubo ou furto
     pane      amarelo    a cor da marca: advertência
     serviço   azul       diagnóstico, retirada, oficinas
     proteção  verde      seguro

   No tema claro o amarelo como LETRA/ÍCONE não tem contraste (1,5:1),
   então a pane tem duas variáveis: o traço lateral continua amarelo e o
   ícone escurece para âmbar.
   ============================================================ */

:root {
  --sit-vida: #C62828;
  --sit-alerta: #C2410C;
  --sit-pane: #FFC300;
  --sit-pane-ico: #8A5F00;
  --sit-servico: #1D5FB8;
  --sit-protecao: #15803D;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sit-vida: #FF5C5C;
    --sit-alerta: #FF8A3D;
    --sit-pane: #FFC300;
    --sit-pane-ico: #FFC300;
    --sit-servico: #5AA9FF;
    --sit-protecao: #4ADE80;
  }
}
:root[data-theme="dark"] {
  --sit-vida: #FF5C5C; --sit-alerta: #FF8A3D; --sit-pane: #FFC300;
  --sit-pane-ico: #FFC300; --sit-servico: #5AA9FF; --sit-protecao: #4ADE80;
}

/* ---------- o pictograma em si ---------- */
.ico { display: block; width: 24px; height: 24px; flex: 0 0 auto; }

/* ---------- plaquinha das ações ---------- */
.action-ico .ico { width: 26px; height: 26px; }

.action.vida     { --sit: var(--sit-vida);     --sit-ico: var(--sit-vida); }
.action.alerta   { --sit: var(--sit-alerta);   --sit-ico: var(--sit-alerta); }
.action.pane     { --sit: var(--sit-pane);     --sit-ico: var(--sit-pane-ico); }
.action.servico  { --sit: var(--sit-servico);  --sit-ico: var(--sit-servico); }
.action.protecao { --sit: var(--sit-protecao); --sit-ico: var(--sit-protecao); }

.action:is(.vida, .alerta, .pane, .servico, .protecao) { border-left-color: var(--sit); }
.action:is(.vida, .alerta, .pane, .servico, .protecao) .action-ico {
  color: var(--sit-ico);
  background: color-mix(in srgb, var(--sit) 15%, transparent);
}

/* Acidente com ferido é a única ação que pode ser questão de vida. Ganha
   a placa do pronto-socorro de verdade: cruz VERMELHA sobre quadro BRANCO
   (SAU-10). Ao contrário — branca sobre vermelho — ela lembraria placa de
   regulamentação, que é o que fundo vermelho significa para o brasileiro.
   O quadro branco é o mesmo nos dois temas; no claro ganha um contorno
   para não sumir no cartão branco. */
.action.vida .action-ico {
  background: #FFFFFF; color: #D0202E;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #D0202E 40%, transparent);
}

/* ---------- abas e atalhos: neutros ---------- */
.tab .ico { width: 22px; height: 22px; }
.tile .ico { width: 26px; height: 26px; color: var(--text); }

/* ---------- marca no cabeçalho ---------- */
.brand-mark.marca { background: transparent; padding: 0; overflow: hidden; }
.brand-mark.marca svg { width: 100%; height: 100%; display: block; }