/* Sobreaviso · sistema de botões v2 (30/10/2026; v2 = abas com selecionado em âmbar)
   Carregar DEPOIS de todos os outros CSS (inclusive sobreaviso-design.css).
   Tipos: primário (âmbar), secundário (marinho), contorno, texto, perigo e chip de filtro.
   Alturas: 44 px padrão, 52 px CTA grande, 36 px só em chip no PC (no toque, chip vai a 44).
   Classes novas para código novo: .sa-btn + .sa-btn--primario|--secundario|--contorno|--texto|--perigo,
   tamanhos .sa-btn--g (52) e .sa-btn--p (36), e .sa-chip[aria-pressed]. Selecionado/ligado é sempre âmbar. */

:root {
  --sb-marinho: #13233F;
  --sb-marinho-hover: #1E3456;
  --sb-ambar: #F5A623;
  --sb-ambar-hover: #E8981C;   /* âmbar mais fundo; marinho sobre ele = 6,7:1 */
  --sb-ambar-press: #DB8E12;   /* 5,9:1 */
  --sb-creme: #F6F0E6;
  --sb-areia: #EEE8DA;
  --sb-borda: #CFC6B4;
  --sb-perigo: #B42318;        /* branco sobre ele = 6,6:1 */
  --sb-raio: 10px;
  /* Foco por outline (o sobreaviso-design.css zera box-shadow com !important nos botões âmbar). */
  --sb-foco: 3px solid var(--sb-marinho);
  --sb-foco-escuro: 3px solid var(--sb-ambar);
}

/* ---------- Base comum ---------- */
:is(.sa-btn, .primary, .rp-btn, .sp-btn, .sp-btn-sec, .spv-cta, .spv-btn, .rp-link-btn,
    .load-more, .filter-clear, .footer-contact, .nav-conta, .follow-btn, .sa-chip,
    .job-actions :is(a, button), .toolbar button, .rank-modes button, #rank-clear) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--sb-raio);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  filter: none;
  transform: none;
  animation: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
:is(.sa-btn, .primary, .rp-btn, .sp-btn, .sp-btn-sec, .spv-cta, .spv-btn, .rp-link-btn,
    .load-more, .filter-clear, .footer-contact, .nav-conta, .follow-btn, .sa-chip,
    .job-actions :is(a, button), .toolbar button, .rank-modes button, #rank-clear):active:not(:disabled) {
  transform: scale(.97); /* mesmo aperto do sobreaviso-design.css */
}

/* Foco do teclado: anel marinho de 3 px afastado 2 px, visível em creme, branco e âmbar. */
/* .sp-btn, .sp-btn-sec, .spv-cta e .spv-btn ficam fora: vivem em faixa marinho e já têm anel creme próprio. */
:is(.sa-btn, .primary, .rp-btn, .rp-link-btn,
    .load-more, .filter-clear, .follow-btn, .sa-chip,
    .job-actions :is(a, button), .toolbar button, .rank-modes button, #rank-clear):focus-visible {
  outline: var(--sb-foco);
  outline-offset: 2px;
}
/* Em fundo marinho (topo, rodapé, faixas escuras) o anel é âmbar. */
:is(header, nav, footer, .footer, .sa-escuro, .rp-pro) :is(.sa-btn, .primary, .rp-btn, .nav-conta, .footer-contact, .sd-mais):focus-visible {
  outline: var(--sb-foco-escuro);
  outline-offset: 2px;
}

/* Desativado e carregando */
:is(.sa-btn, .primary, .rp-btn, .sp-btn, .sp-btn-sec, .spv-cta, .load-more, .filter-clear, .follow-btn, .sa-chip):is(:disabled, [aria-disabled="true"]) {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}
:is(.sa-btn, .primary, .rp-btn, .sp-btn)[aria-busy="true"] { cursor: progress; opacity: .8; }
:is(.sa-btn, .primary, .rp-btn, .sp-btn)[aria-busy="true"]::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: sb-gira .7s linear infinite;
}
@keyframes sb-gira { to { transform: rotate(360deg); } }

/* ---------- 1. Primário (âmbar): a ação principal da tela ---------- */
:is(.sa-btn--primario, .primary, .rp-btn, .sp-btn, .spv-cta, .spv-btn) {
  background: var(--sb-ambar);
  color: var(--sb-marinho);
  border: 1px solid var(--sb-ambar);
  box-shadow: none;
}
:is(.sa-btn--primario, .primary, .rp-btn, .sp-btn, .spv-cta, .spv-btn):hover:not(:disabled) {
  background: var(--sb-ambar-hover);
  border-color: var(--sb-ambar-hover);
  color: var(--sb-marinho);
  box-shadow: none;
}
:is(.sa-btn--primario, .primary, .rp-btn, .sp-btn, .spv-cta, .spv-btn):active:not(:disabled) {
  background: var(--sb-ambar-press);
}
:is(.primary, .spv-cta) span { color: inherit; }

/* ---------- 2. Secundário (marinho): canais e ação de apoio ---------- */
:is(.sa-btn--secundario, .rp-btn.rp-btn-wa, .rp-btn.rp-btn-tg, body .rp-btn-wa, body .rp-btn-tg) {
  background: var(--sb-marinho);
  color: var(--sb-creme);
  border: 1px solid var(--sb-marinho);
}
:is(.sa-btn--secundario, .rp-btn.rp-btn-wa, .rp-btn.rp-btn-tg, body .rp-btn-wa, body .rp-btn-tg):hover:not(:disabled) {
  background: var(--sb-marinho-hover);
  border-color: var(--sb-marinho-hover);
  color: #fff;
}

/* ---------- 3. Contorno: alternativa à ação principal ---------- */
:is(.sa-btn--contorno, .rp-btn.rp-btn-ghost, .rp-btn-ghost, .rp-link-btn, .load-more) {
  background: transparent;
  color: var(--sb-marinho);
  border: 1.5px solid var(--sb-marinho);
}
:is(.sa-btn--contorno, .rp-btn.rp-btn-ghost, .rp-btn-ghost, .rp-link-btn, .load-more):hover:not(:disabled) {
  background: rgba(19, 35, 63, .07);
  color: var(--sb-marinho);
  border-color: var(--sb-marinho);
}
.load-more { width: 100%; }

/* Contorno claro: sobre fundo marinho */
:is(.sp-btn-sec, .nav-conta, .footer-contact, .sa-btn--contorno-claro) {
  background: transparent;
  color: var(--sb-creme);
  border: 1.5px solid rgba(246, 240, 230, .7);
}
:is(.sp-btn-sec, .nav-conta, .footer-contact, .sa-btn--contorno-claro):hover {
  background: rgba(246, 240, 230, .12);
  border-color: var(--sb-creme);
  color: #fff;
}
.footer-contact.footer-contact { font-size: 14px; }
.nav-conta.nav-conta { font-size: 14px; padding: 8px 14px; }
.nav-conta svg, .nav-conta [class*="ico"] { color: var(--sb-ambar); }

/* ---------- 4. Texto: ação leve (limpar, copiar, baixar) ---------- */
:is(.sa-btn--texto, .filter-clear, .toolbar button) {
  background: transparent;
  color: var(--sb-marinho);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
:is(.sa-btn--texto, .filter-clear, .toolbar button):hover:not(:disabled) {
  background: rgba(19, 35, 63, .06);
  text-decoration-thickness: 2px;
}

/* ---------- 5. Perigo: cancelar assinatura, apagar conta ---------- */
.sa-btn--perigo { background: var(--sb-perigo); color: #fff; border: 1px solid var(--sb-perigo); }
.sa-btn--perigo:hover:not(:disabled) { background: #912018; border-color: #912018; }

/* ---------- Abas e filtros (v2, 30/10): selecionado = âmbar cheio ----------
   Antes o selecionado era marinho e os outros brancos: no tema escuro o marinho
   parecia apagado e os brancos pareciam acesos. Agora os não selecionados são só
   contorno na cor do texto da página (funciona no claro e no escuro) e o
   selecionado é âmbar com letra marinho forte. */
:is(.sa-chip, .rank-modes button, .sap .sap-uf-lista button[data-sap-uf]) {
  min-height: 36px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  color: inherit;
  border: 1.5px solid color-mix(in srgb, currentColor 38%, transparent);
}
:is(.sa-chip, .rank-modes button, .sap .sap-uf-lista button[data-sap-uf]):hover:not(:disabled):not([aria-pressed="true"]):not([aria-selected="true"]) {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
:is(.sa-chip, .rank-modes button, .sap .sap-uf-lista button[data-sap-uf]):is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"], .on, .is-active),
:is(.sa-chip, .rank-modes button, .sap .sap-uf-lista button[data-sap-uf]):is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"], .on, .is-active):hover {
  background: var(--sb-ambar);
  color: var(--sb-marinho);
  border-color: var(--sb-ambar);
  font-weight: 700;
}
/* Filtros da residência: mantêm o formato de bloco e a faixa colorida de cada
   situação; só o selecionado passa a âmbar (antes marinho, igual aos outros no escuro). */
.res-filters button[aria-pressed="true"],
.res-filters button[aria-pressed="true"]:hover {
  background: var(--sb-ambar);
  border-color: var(--sb-ambar);
  color: var(--sb-marinho);
  font-weight: 700;
}
.res-filters button[aria-pressed="true"] b { background: rgba(19, 35, 63, .14); color: var(--sb-marinho); }

/* ---------- Ação de cartão (Pôr no sobreaviso, Comparar, Detalhes) ---------- */
:is(.follow-btn, #main .follow-btn, .job-actions :is(a, button), #main .job-actions :is(a, button)) {
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
  color: var(--sb-marinho);
  border: 1px solid var(--sb-borda);
}
/* Ações do cartão quebram linha em vez de estourar a largura no celular. */
.job-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* "Comparar" tem font-size e padding no style do HTML. */
.job-actions button[data-compare], button[data-compare] {
  font-size: 13px !important;
  padding: 6px 14px !important;
}
:is(.follow-btn, #main .follow-btn, .job-actions :is(a, button), #main .job-actions :is(a, button)):hover:not(:disabled) {
  border-color: var(--sb-marinho);
  background: #fff;
  color: var(--sb-marinho);
}
/* Ligado (acompanhando / comparando) = âmbar, igual às abas. */
:is(.job-actions button, #main .job-actions button)[aria-pressed="true"],
.follow-btn.on, #main .follow-btn.on {
  background: var(--sb-ambar);
  color: var(--sb-marinho);
  border-color: var(--sb-ambar);
  font-weight: 700;
}
@media (pointer: coarse) {
  :is(.sa-chip, .follow-btn, #main .follow-btn, .rank-modes button, .job-actions :is(a, button), #main .job-actions :is(a, button), .sa-btn--p) { min-height: 44px; }
}

/* ---------- Tamanhos ---------- */
:is(.sa-btn--g, .sp-btn.sp-assinar, .spv-cta) { min-height: 52px; padding: 14px 24px; font-size: 17px; border-radius: 12px; }
.sa-btn--p.sa-btn--p { min-height: 36px; padding: 6px 14px; font-size: 13px; }
/* Pro no topo: 44 px, sem brilho nem pulso. */
.spv-btn.spv-btn { min-height: 44px; padding: 8px 16px; font-size: 14px; border-radius: var(--sb-raio); }
.spv-btn::before, .spv-btn::after { animation: none !important; }

/* ---------- Correções pontuais ---------- */
/* "Pular para o conteúdo" estava marinho sobre marinho (1,1:1). */
.skip { background: var(--sb-ambar) !important; color: var(--sb-marinho) !important; font-weight: 700; border-radius: var(--sb-raio); }
.skip:focus { outline: var(--sb-foco-escuro); outline-offset: 2px; }
/* Cartão urgente: texto branco garantido sobre o vermelho. */
.rp-tile.sa-urgente, .rp-tile.sa-urgente * { color: #fff; }

/* Lista de estados da home: cada linha vira alvo de 44 px. */
.state-grid > a { min-height: 44px; }
/* Pílulas da faixa de cobertura: no mouse o texto sumia (marinho sobre marinho). */
.coverage a { min-height: 44px; display: inline-flex; align-items: center; }
.coverage a:hover, .coverage a:focus-visible { background: rgba(246, 240, 230, .14); color: #fff; border-color: #fff; }
.coverage a:hover b, .coverage a:focus-visible b { color: var(--sb-ambar); }
.coverage a:focus-visible { outline: var(--sb-foco-escuro); outline-offset: 2px; }
/* Atalhos da busca ("Clínico e ESF ↗"): 44 px no toque. */
@media (pointer: coarse) { .quick-search a { min-height: 44px; display: inline-flex; align-items: center; } }

/* ---------- Área Pro (ranking de residência, classes .sap-*) ----------
   Só tamanho, canto e foco: as cores continuam as do lote "sap-acomp-v1". */
.sap :is(.sap-btn, .sap-btn-sec, .sap-quero, .sap-deixar) { min-height: 44px; border-radius: var(--sb-raio); font-weight: 700; }
@media (pointer: coarse) { .sap .sap-uf-lista button[data-sap-uf] { min-height: 44px; } }

@media (prefers-reduced-motion: reduce) {
  :is(.sa-btn, .primary, .rp-btn, .sp-btn, .sp-btn-sec, .spv-cta, .spv-btn, .follow-btn, .sa-chip, .load-more) { transition: none; }
  :is(.sa-btn, .primary, .rp-btn, .sp-btn)[aria-busy="true"]::after { animation-duration: 2s; }
}