@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap;
  src: url("/static/vendor/fontes/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap;
  src: url("/static/vendor/fontes/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap;
  src: url("/static/vendor/fontes/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

:root {
  --amarelo: #FFD400;
  --amarelo-escuro: #E6BF00;
  --azul: #13328C;
  --azul-claro: #E8EDF8;
  --tinta: #172033;
  --cinza: #5A6577;
  --linha: #DCE1E8;
  --papel: #FFFFFF;
  --fundo: #F4F6F9;
  --alerta: #A8430B;
  --alerta-fundo: #FDF1E7;
  --fonte: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-num: "Barlow Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--papel);
  color: var(--tinta);
  font: 17px/1.5 var(--fonte);
}
button, input { font: inherit; color: inherit; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* ---------- faixa amarela (a caixa do genérico) ---------- */
.faixa {
  background: var(--amarelo);
  border-bottom: 6px solid var(--azul);
  padding: 18px 24px 20px;
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 12px 32px;
  align-items: end;
}
.marca h1 {
  margin: 0;
  font: 700 2.4rem/0.95 var(--fonte-num);
  color: var(--azul);
  letter-spacing: -0.01em;
}
.marca p { margin: 6px 0 0; font-size: 0.9rem; color: var(--tinta); max-width: 34ch; }
#cidade {
  font: 700 1rem var(--fonte);
  color: var(--azul);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--azul);
  padding: 0 18px 0 0;
  max-width: 100%;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--azul) 50%), linear-gradient(135deg, var(--azul) 50%, transparent 50%);
  background-position: right 6px top 55%, right 1px top 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
#cidade option { color: var(--tinta); font-weight: 400; }
#cidadeBusca {
  font: 700 1rem var(--fonte);
  color: var(--azul);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--azul);
  padding: 0 2px;
  width: 15em;
  max-width: 100%;
}
#cidadeBusca::placeholder { color: var(--azul); opacity: .6; font-weight: 400; }
#cidadeBusca:focus { outline: none; background: rgba(255, 255, 255, .5); }

.aviso-cobertura {
  margin: 16px 20px 0;
  padding: 12px 14px;
  background: var(--alerta-fundo);
  border-left: 4px solid var(--alerta);
  font-size: 0.9rem;
}
.aviso-cobertura p { margin: 0 0 6px; }
.aviso-cobertura p:last-child { margin-bottom: 0; }
.aviso-cobertura b { color: var(--alerta); }

.busca {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(200px, 1.3fr) auto auto;
  gap: 12px;
  align-items: end;
}
.campo { margin: 0; padding: 0; border: 0; min-width: 0; }
.campo label, .campo legend {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--azul);
  margin-bottom: 4px;
  padding: 0;
}
.busca input[type="text"], .busca input:not([type]) {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 2px solid var(--azul);
  border-radius: 4px;
  background: var(--papel);
}
.com-botao { display: flex; }
.com-botao input { border-radius: 4px 0 0 4px !important; }
.icone {
  width: 48px; height: 48px; flex: none;
  border: 2px solid var(--azul); border-left: 0;
  border-radius: 0 4px 4px 0;
  background: var(--papel);
  cursor: pointer;
  display: grid; place-items: center;
}
.icone svg { width: 22px; height: 22px; fill: var(--azul); stroke: var(--azul); stroke-width: 2; }
.icone:hover { background: var(--azul-claro); }

.raios { display: flex; height: 48px; }
.raios input { position: absolute; opacity: 0; pointer-events: none; }
.raios label {
  margin: 0;
  display: grid; place-items: center;
  padding: 0 10px;
  border: 2px solid var(--azul);
  margin-left: -2px;
  background: var(--papel);
  color: var(--azul);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}
.raios label:first-of-type { margin-left: 0; border-radius: 4px 0 0 4px; }
.raios label:last-of-type { border-radius: 0 4px 4px 0; }
.raios input:checked + label { background: var(--azul); color: var(--papel); }
.raios input:focus-visible + label { outline: 3px solid var(--tinta); outline-offset: 2px; position: relative; }

.buscar {
  height: 48px;
  padding: 0 26px;
  border: 0;
  border-radius: 4px;
  background: var(--azul);
  color: var(--papel);
  font-weight: 700;
  cursor: pointer;
}
.buscar:hover { background: #0d2468; }
.buscar[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- corpo: lista + mapa ---------- */
.abas { display: none; }
.corpo {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(360px, 460px) 1fr;
}
.painel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  background: var(--fundo);
  border-right: 1px solid var(--linha);
}
.area-mapa { position: relative; min-height: 300px; }
#mapa { position: absolute; inset: 0; }

/* legenda = filtro das redes */
.legenda {
  position: absolute; z-index: 800; right: 12px; top: 12px;
  margin: 0; padding: 10px 14px 12px;
  background: var(--papel);
  border: 2px solid var(--azul);
  border-radius: 4px;
  font-size: 0.85rem;
  max-width: 250px;
}
.legenda:not(:has(label)) { display: none; }
.legenda legend { padding: 0 4px; font-weight: 700; color: var(--azul); background: var(--papel); }
.legenda label { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; }
.legenda input { accent-color: var(--azul); width: 16px; height: 16px; margin: 0; }
.legenda .cor { width: 11px; height: 11px; border-radius: 50%; flex: none; border: 1px solid var(--papel); box-shadow: 0 0 0 1px var(--linha); }
.legenda .n { margin-left: auto; color: var(--cinza); font-variant-numeric: tabular-nums; padding-left: 10px; }

.resumo:empty { display: none; }
.resumo { padding: 16px 20px 12px; border-bottom: 1px solid var(--linha); background: var(--papel); }
.resumo strong { font-size: 1.1rem; }
.resumo .onde { display: block; color: var(--cinza); font-size: 0.9rem; }
.erro { color: var(--alerta); }

#conteudo { flex: 1; }
.vazio { padding: 24px 20px; color: var(--cinza); max-width: 42ch; }
.vazio p:first-child { color: var(--tinta); font-size: 1.05rem; }

/* resultado: linhas separadas por fio, quantidade como na caixa */
.posto {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  padding: 16px 20px;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  border-left: 5px solid transparent;
  cursor: pointer;
}
.posto:hover { background: #FBFCFE; }
.posto.ativo { border-left-color: var(--azul); background: var(--azul-claro); }
.qtd { text-align: right; padding-top: 2px; }
.qtd .num {
  display: block;
  font: 700 2.1rem/0.9 var(--fonte-num);
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}
.qtd .un { font-size: 0.75rem; color: var(--cinza); }
.info h3 { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.info p { margin: 2px 0 0; font-size: 0.9rem; }
.end { color: var(--cinza); }
.dist { color: var(--tinta); font-weight: 700; white-space: nowrap; }
.med { font-size: 0.82rem !important; color: var(--cinza); }
.idade { color: var(--cinza); }
.idade.velho {
  color: var(--alerta);
  background: var(--alerta-fundo);
  display: inline-block;
  padding: 1px 8px;
  border-radius: 3px;
  margin-top: 6px !important;
}
.acoes { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.acoes a, .acoes button, .link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--azul);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.sem-info { padding: 16px 20px 24px; }
.sem-info summary { cursor: pointer; font-weight: 700; color: var(--tinta); }
.sem-info p { color: var(--cinza); font-size: 0.9rem; margin: 8px 0; }
.sem-info ul { list-style: none; margin: 0; padding: 0; }
.sem-info li { padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: 0.9rem; display: flex; justify-content: space-between; gap: 12px; }
.sem-info li span:last-child { color: var(--cinza); white-space: nowrap; }

/* detalhe do posto */
.detalhe { background: var(--papel); min-height: 100%; }
.detalhe header { padding: 16px 20px; border-bottom: 1px solid var(--linha); }
.detalhe h2 { margin: 8px 0 2px; font-size: 1.2rem; line-height: 1.3; }
.detalhe header p { margin: 0; color: var(--cinza); font-size: 0.9rem; }
.detalhe .filtro { padding: 12px 20px; border-bottom: 1px solid var(--linha); }
.detalhe .filtro input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--cinza); border-radius: 4px; }
.itens { list-style: none; margin: 0; padding: 0; }
.itens li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--linha);
  font-size: 0.9rem;
}
.itens .q { font: 700 1.3rem/1 var(--fonte-num); color: var(--azul); text-align: right; font-variant-numeric: tabular-nums; }
.itens li.zerado { color: var(--cinza); }
.itens li.zerado .q { color: var(--cinza); }

.fonte {
  padding: 14px 20px 18px;
  font-size: 0.8rem;
  color: var(--cinza);
  border-top: 1px solid var(--linha);
}
.fonte b { color: var(--tinta); }

/* marcadores do mapa */
.voce {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--azul);
  border: 3px solid var(--papel);
  box-shadow: 0 0 0 4px rgba(19, 50, 140, 0.25);
}
.pino {
  font: 700 0.95rem/1 var(--fonte-num);
  background: var(--amarelo);
  color: var(--azul);
  border: 2px solid var(--azul);
  border-radius: 3px;
  padding: 3px 5px;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  display: inline-block;
}
.pino.ativo { background: var(--azul); color: var(--amarelo); }
.pino.pino-g { transform: none; }
.sem-info-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--papel); border: 2px solid var(--cinza); transform: translateY(5px); }

/* detalhe: selo da rede e bloco do Google */
.selo {
  display: table; margin-top: 10px;
  font-size: 0.8rem; font-weight: 700;
  color: var(--cor); border: 1.5px solid var(--cor); border-radius: 3px; padding: 0 7px;
}
.detalhe .sub { color: var(--cinza); font-size: 0.88rem; margin-top: 6px; }
.detalhe a[href^="tel:"] { color: var(--azul); font-weight: 700; }
.acoes-det { margin-top: 8px !important; }
.google { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--linha); background: var(--fundo); font-size: 0.9rem; }
.google p { margin: 0 0 4px; color: var(--tinta); }
.google .aberto { color: #1B6E2E; }
.google .fechado { color: var(--alerta); }
.google .alerta { color: var(--alerta); font-weight: 700; }
.google details { margin: 4px 0; }
.google summary { cursor: pointer; color: var(--azul); font-weight: 700; }
.google ul { margin: 6px 0 0; padding-left: 18px; color: var(--cinza); }
.google .credito { font-size: 0.78rem; color: var(--cinza); margin-top: 6px; }
.google .credito a { color: var(--azul); }
.leaflet-div-icon { background: none; border: 0; }
.leaflet-popup-content { font-family: var(--fonte); font-size: 0.9rem; }

/* ---------- celular ---------- */
/* janelas médias: a busca ganha a largura toda, abaixo do nome */
@media (max-width: 1280px) {
  .faixa { grid-template-columns: 1fr; gap: 10px; }
  .marca { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
  .marca p { max-width: none; margin: 0; }
}

@media (max-width: 900px) {
  .faixa { grid-template-columns: 1fr; padding: 12px 16px 14px; gap: 8px; }
  .marca h1 { font-size: 1.75rem; }
  .marca p { font-size: 0.85rem; margin-top: 2px; }
  .busca { grid-template-columns: 1fr auto; gap: 10px; }
  .campo-med, .campo-end { grid-column: 1 / -1; }
  .raios label { flex: 1; padding: 0 2px; font-size: 0.85rem; }
  .buscar { padding: 0 18px; }
  .abas {
    display: flex;
    border-bottom: 1px solid var(--linha);
    background: var(--papel);
    position: sticky; top: 0; z-index: 500;
  }
  .abas button {
    flex: 1; height: 46px; border: 0; background: none;
    font-weight: 700; color: var(--cinza);
    border-bottom: 3px solid transparent;
  }
  .abas button[aria-pressed="true"] { color: var(--azul); border-bottom-color: var(--azul); }
  .corpo { display: block; flex: none; }
  .painel { border-right: 0; overflow: visible; }
  .area-mapa { height: 72vh; }
  .corpo[data-aba="lista"] .area-mapa { display: none; }
  .legenda { top: 10px; right: 10px; max-width: 210px; padding: 6px 10px 8px; font-size: 0.8rem; }
  .legenda label { padding: 1px 0; }
  .corpo[data-aba="mapa"] .painel { display: none; }
  .posto { grid-template-columns: 70px 1fr; padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* "me avise" */
.botao-aviso {
  margin-top: 10px;
  padding: 8px 14px;
  border: 2px solid var(--azul);
  border-radius: 4px;
  background: var(--amarelo);
  color: var(--azul);
  font-weight: 700;
  cursor: pointer;
}
.botao-aviso:hover { background: var(--amarelo-escuro); }
.form-aviso {
  padding: 14px 20px 18px;
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  border-left: 5px solid var(--amarelo);
  font-size: 0.9rem;
}
.form-aviso .titulo-aviso { margin: 0 0 10px; font-weight: 700; }
.form-aviso .canais { border: 0; margin: 0 0 8px; padding: 0; display: flex; gap: 18px; }
.form-aviso .canais label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.form-aviso .campo-email { display: block; margin-bottom: 10px; font-weight: 700; color: var(--azul); }
.form-aviso .campo-email[hidden] { display: none; }
.form-aviso .campo-email input {
  display: block; width: 100%; height: 44px; margin-top: 4px; padding: 0 12px;
  border: 2px solid var(--azul); border-radius: 4px; font-weight: 400; color: var(--tinta);
}
.form-aviso .consentimento { display: flex; gap: 8px; align-items: flex-start; color: var(--cinza); margin-bottom: 12px; }
.form-aviso .consentimento input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--azul); }
.form-aviso .buscar { height: 42px; }
.form-aviso .retorno { margin: 10px 0 0; }
.botao-telegram {
  display: inline-block; margin-top: 8px; padding: 8px 14px; border-radius: 4px;
  background: #229ED9; color: #fff; font-weight: 700; text-decoration: none;
}
.pagina-simples { max-width: 60ch; margin: 32px auto; padding: 0 20px; }
.pagina-simples h2 { color: var(--azul); }

/* várias apresentações do mesmo remédio no mesmo posto */
.apresentacoes { list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.82rem; color: var(--cinza); }
.apresentacoes li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-top: 1px dashed var(--linha); }
.apresentacoes li:first-child { border-top: 0; }
.apresentacoes b { color: var(--azul); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* notas: farmácia central, alto custo, programa estratégico */
.nota { font-size: 0.82rem !important; margin: 8px 0 0 !important; padding: 6px 9px; border-radius: 3px; line-height: 1.4; }
.nota b { display: block; }
.nota-central { background: #FFF6CC; color: #5C4A00; border-left: 3px solid var(--amarelo-escuro); }
.nota-comp { background: var(--azul-claro); color: var(--azul); border-left: 3px solid var(--azul); }
.etiqueta {
  font-style: normal; font-size: 0.72rem; font-weight: 700; white-space: nowrap;
  color: var(--azul); border: 1px solid var(--azul); border-radius: 3px; padding: 0 4px; margin-left: 4px;
}


/* ---------- tema Brasil: verde, amarelo, azul e branco ---------- */
:root {
  --verde: #00843D;          /* um pouco mais escuro que o da bandeira (#009C3B) para o branco ser legível */
  --verde-escuro: #006B32;
  --amarelo: #FFDF00;
  --azul: #002776;
}
.faixa {
  background:
    linear-gradient(160deg, transparent 62%, rgba(255, 223, 0, .16) 62%, rgba(255, 223, 0, .16) 70%, transparent 70%),
    var(--verde);
  border-bottom: 0;
  box-shadow: inset 0 -6px 0 var(--amarelo), inset 0 -10px 0 var(--azul);
  padding-bottom: 26px;
}
.marca h1 { color: #fff; display: flex; align-items: center; gap: 10px; }
.bandeira { width: 46px; height: 32px; flex: none; border-radius: 3px; box-shadow: 0 0 0 2px #fff; }
.marca p { color: #fff; }
#cidade, #cidadeBusca { color: var(--amarelo); border-bottom-color: var(--amarelo); }
#cidade {
  background-image: linear-gradient(45deg, transparent 50%, var(--amarelo) 50%), linear-gradient(135deg, var(--amarelo) 50%, transparent 50%);
}
#cidadeBusca::placeholder { color: var(--amarelo); }
#cidadeBusca:focus { background: rgba(255, 255, 255, .12); }
.faixa .campo > label, .faixa .campo > legend { color: #fff; }
.buscar[disabled] { opacity: .85; }
.busca input[type="text"], .busca input:not([type]), .icone, .raios label { border-color: var(--verde-escuro); }
.faixa :focus-visible { outline-color: var(--amarelo); }
.buscar { background: var(--amarelo); color: var(--azul); }
.buscar:hover { background: #F2D200; }
.raios input:checked + label { background: var(--azul); border-color: var(--azul); }


/* ---------- animações de saúde ---------- */
.faixa { position: relative; overflow: hidden; flex: none; }
.faixa > :not(.batimento) { position: relative; z-index: 1; }
.batimento {
  position: absolute; left: 0; right: 0; bottom: 6px; width: 100%; height: 42px;
  pointer-events: none; z-index: 0;
}
.batimento path {
  fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.batimento .trilho { stroke: #fff; stroke-width: 2; opacity: .14; }
.batimento .pulso {
  stroke: #fff; stroke-width: 3.5; opacity: .9;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9)) drop-shadow(0 0 10px rgba(255, 223, 0, .8));
  stroke-dasharray: 18 100; stroke-dashoffset: 18;
  animation: batimento 3.6s linear infinite;
}
@keyframes batimento { to { stroke-dashoffset: -100; } }

.carregando { display: flex; align-items: center; gap: 12px; color: var(--azul); font-weight: 700; }
.capsula {
  width: 34px; height: 14px; flex: none; border-radius: 7px;
  background: linear-gradient(90deg, var(--verde) 50%, var(--amarelo) 50%);
  box-shadow: 0 0 0 2px var(--azul);
  animation: capsula 1s ease-in-out infinite;
}
@keyframes capsula {
  0% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(180deg) translateY(-3px); }
  100% { transform: rotate(360deg) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .batimento .pulso { animation: none; opacity: 0; }
  .batimento .trilho { opacity: .3; }
  .bandeira { animation: none; }
  .capsula { animation: none; }
}

/* procurar posto pelo nome */
.busca-posto { margin: 4px 20px 24px; padding: 16px; background: var(--papel); border: 1px solid var(--linha); border-radius: 6px; }
.busca-posto label { display: block; font-weight: 700; color: var(--azul); margin-bottom: 6px; font-size: .95rem; }
.busca-posto input { width: 100%; height: 44px; padding: 0 12px; border: 2px solid var(--azul); border-radius: 4px; background: var(--papel); }
.postos-achados { list-style: none; margin: 8px 0 0; padding: 0; }
.postos-achados:empty { display: none; }
.postos-achados li + li { border-top: 1px solid var(--linha); }
.postos-achados button {
  width: 100%; text-align: left; background: none; border: 0; padding: 10px 4px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.postos-achados button:hover { background: var(--azul-claro); }
.postos-achados .n { font-weight: 700; color: var(--tinta); font-size: .92rem; }
.postos-achados .s { font-size: .8rem; color: var(--cinza); }
.postos-achados .nada { padding: 10px 4px; color: var(--cinza); font-size: .9rem; }

/* a bandeira "bate" junto com o pulso */
.bandeira { animation: coracao 1.2s ease-in-out infinite; transform-origin: center; }
@keyframes coracao {
  0%, 40%, 100% { transform: scale(1); }
  46% { transform: scale(1.12); }
  52% { transform: scale(.97); }
  58% { transform: scale(1.08); }
  66% { transform: scale(1); }
}
.capsula { width: 42px; height: 18px; border-radius: 9px; }
.faixa, .faixa { padding-bottom: 50px; }
@media (max-width: 900px) { .faixa { padding-bottom: 46px; } }

.marca .interrogacao { color: var(--amarelo); }


/* ---------- Farmácia Popular ---------- */
.fp {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px;
  margin: 16px 16px 20px; padding: 16px;
  background: var(--papel); border: 2px solid var(--verde); border-radius: 8px;
  animation: fp-entra .6s cubic-bezier(.2, .8, .2, 1.2) both;
}
.fp-destaque { margin-top: 18px; box-shadow: 0 6px 0 var(--amarelo), 0 8px 18px rgba(0, 0, 0, .08); }
.fp-icone { position: relative; width: 64px; height: 64px; }
.fp-icone svg { width: 64px; height: 64px; overflow: visible; }
.fp-loja { fill: #E6F3EB; stroke: var(--verde); stroke-width: 2.5; stroke-linejoin: round; }
.fp-toldo { fill: var(--verde); }
.fp-porta { fill: var(--verde); opacity: .35; }
.fp-cruz { fill: var(--verde); transform-origin: 32px 22px; animation: fp-cruz 1.6s ease-in-out .6s infinite; }
.fp-brilho {
  position: absolute; right: -4px; top: -4px; width: 14px; height: 14px;
  background: var(--amarelo); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: fp-brilho 1.6s ease-in-out .6s infinite;
}
.fp h3 { margin: 0 0 6px; font: 700 1.25rem/1.15 var(--fonte-num); color: var(--verde-escuro); }
.fp p { margin: 0 0 8px; font-size: .92rem; }
.fp .fp-leve { color: var(--cinza); font-size: .85rem; }
.fp-botao {
  display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 10px;
  padding: 10px 16px; border-radius: 4px; background: var(--verde); color: #fff;
  font-weight: 700; text-decoration: none;
}
.fp-botao span { display: inline-block; animation: fp-seta 1.2s ease-in-out infinite; }
.fp-botao:hover { background: var(--verde-escuro); }
.fp .fp-fonte { font-size: .78rem; color: var(--cinza); margin: 0; }
.fp .fp-fonte a { color: var(--azul); }
@keyframes fp-entra { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fp-cruz { 0%, 60%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } }
@keyframes fp-brilho { 0%, 100% { transform: scale(.4) rotate(0); opacity: 0; } 40% { transform: scale(1) rotate(45deg); opacity: 1; } 70% { opacity: 0; } }
@keyframes fp-seta { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) {
  .fp, .fp-cruz, .fp-brilho, .fp-botao span { animation: none; }
}


/* sugestões de endereço */
.faixa { overflow: visible; z-index: 1100; }
.campo-end .com-botao { position: relative; }
.sug-end {
  position: absolute; left: 0; right: 48px; top: calc(100% + 4px); z-index: 2000;
  margin: 0; padding: 4px 0; list-style: none;
  background: var(--papel); border: 2px solid var(--azul); border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
  animation: sug-abre .14s ease-out;
}
.sug-end li {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer;
  font-size: .92rem; color: var(--tinta); line-height: 1.3;
}
.sug-end li:hover, .sug-end li.ativo { background: var(--azul-claro); }
.pino-sug {
  width: 12px; height: 12px; flex: none; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--verde); box-shadow: inset 0 0 0 3px var(--verde), inset 0 0 0 6px #fff;
}
@keyframes sug-abre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.corrigido { display: block; margin-bottom: 6px; font-size: .88rem; color: var(--verde-escuro); }


/* ---------- receita, relatos, WhatsApp ---------- */
.vazio .dica { background: var(--papel); border-left: 4px solid var(--amarelo); padding: 10px 12px; color: var(--tinta); font-size: .92rem; }
.chips-receita { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; padding: 0; }
.chips-receita li {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: .85rem; font-weight: 700; border: 2px solid;
}
.chips-receita li small { font-weight: 400; }
.chips-receita .ok { color: var(--verde-escuro); border-color: var(--verde); background: #E6F3EB; }
.chips-receita .falta { color: var(--alerta); border-color: var(--alerta); background: var(--alerta-fundo); }
.posto-receita .num small { font-size: .55em; color: var(--cinza); }
.checklist { list-style: none; margin: 6px 0; padding: 0; font-size: .9rem; }
.checklist li { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; }
.checklist li b { margin-left: auto; font-family: var(--fonte-num); font-size: 1.05rem; color: var(--azul); }
.checklist .ok span { color: var(--verde); font-weight: 700; }
.checklist .falta { color: var(--cinza); }
.checklist .falta span { color: var(--alerta); font-weight: 700; }
.checklist .falta i { margin-left: auto; font-size: .8rem; }

.relato { margin: 6px 0 4px; }
.relato .r-resumo:empty { display: none; }
.relato .r-resumo { margin: 0 0 6px; font-size: .85rem; }
.r-sim { color: var(--verde-escuro); font-weight: 700; }
.r-nao { color: var(--alerta); font-weight: 700; }
.r-quando { color: var(--cinza); }
.r-botoes { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--cinza); }
.r-botoes button {
  border: 2px solid var(--azul); background: var(--papel); color: var(--azul); border-radius: 999px;
  padding: 3px 12px; font-weight: 700; font-size: .82rem; cursor: pointer;
}
.r-botoes button[data-tinha="1"]:hover { background: #E6F3EB; border-color: var(--verde); color: var(--verde-escuro); }
.r-botoes button[data-tinha="0"]:hover { background: var(--alerta-fundo); border-color: var(--alerta); color: var(--alerta); }
.r-botoes button:disabled { opacity: .5; }
.r-obrigado { margin: 0; font-size: .85rem; color: var(--verde-escuro); animation: fp-entra .4s ease-out both; }

.botao-zap {
  display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0;
  padding: 8px 14px; border-radius: 4px; background: #25D366; color: #0B3D1E;
  font-weight: 700; text-decoration: none; font-size: .92rem; vertical-align: middle;
}
.botao-zap svg { width: 18px; height: 18px; fill: currentColor; }
.botao-zap:hover { background: #1EBE5A; }
.botao-aviso + .botao-zap { margin-left: 8px; }


/* correção de digitação: vermelho no errado, verde no certo */
.corrigido .errado { color: var(--cinza); }
.corrigido { font-size: .95rem; }
.corrigido .certo { font-weight: 700; color: var(--verde-escuro); }
.chips-receita .errado { opacity: .85; font-weight: 400; }
mark.m-errado, mark.m-certo { border-radius: 3px; padding: 0 1px; font-weight: 700; }
mark.m-errado { text-decoration: line-through 2px; }
mark.m-errado { background: #FAD4D0; color: #B42318; animation: acende-vermelho 1.4s ease-out 2; }
mark.m-certo { background: #CDEFD9; color: #006B32; animation: acende-verde 1.4s ease-out 2; }
@keyframes acende-vermelho {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .7); background: #F87171; color: #fff; }
  70% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
  100% { box-shadow: none; }
}
@keyframes acende-verde {
  0%, 30% { box-shadow: 0 0 0 0 rgba(0, 156, 59, .7); }
  45% { background: #22C55E; color: #fff; }
  100% { box-shadow: 0 0 0 6px rgba(0, 156, 59, 0); }
}
.busca input.piscar-erro { animation: campo-erro-certo 1.6s ease-out; }
.busca input.piscar-marca { animation: campo-certo 1.2s ease-out; }
@keyframes campo-erro-certo {
  0% { border-color: #DC2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .45); }
  45% { border-color: #DC2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .2); }
  60% { border-color: #16A34A; box-shadow: 0 0 0 4px rgba(22, 163, 74, .5); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
@keyframes campo-certo {
  0% { border-color: #16A34A; box-shadow: 0 0 0 4px rgba(22, 163, 74, .5); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
@media (prefers-reduced-motion: reduce) {
  mark.m-errado, mark.m-certo, .busca input.piscar-erro, .busca input.piscar-marca { animation: none; }
}


/* bonequinho acenando no "obrigado" */
.r-obrigado { display: flex; align-items: center; gap: 10px; }
.boneco { width: 44px; height: 52px; flex: none; overflow: visible; animation: boneco-pula 1.2s ease-in-out 3; }
.boneco .braco { transform-origin: 31px 27px; animation: acena .45s ease-in-out 8 alternate; }
.boneco .olho { animation: pisca 3s steps(1) infinite; transform-origin: center; transform-box: fill-box; }
@keyframes acena { from { transform: rotate(-25deg); } to { transform: rotate(35deg); } }
@keyframes boneco-pula { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes pisca { 0%, 92% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@media (prefers-reduced-motion: reduce) { .boneco, .boneco .braco, .boneco .olho { animation: none; } }

.checklist .falta-perto { padding: 0 0 4px 22px; font-size: .82rem; color: var(--cinza); display: block; }
.checklist .falta-perto .link { font-size: .82rem; font-weight: 700; color: var(--azul); }

/* aberto agora */
.horario { margin: 2px 0 6px; font-size: .82rem; font-weight: 700; line-height: 1.4; }
.horario .bolinha { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.st-aberto { color: var(--verde-escuro); }
.st-aberto .bolinha { background: #16A34A; animation: pulso-aberto 2s ease-out infinite; }
.st-fechado { color: var(--cinza); }
.st-fechado .bolinha { background: #9AA3AF; }
.horario .tel { font-weight: 700; color: var(--azul); margin-left: 6px; white-space: nowrap; }
@keyframes pulso-aberto { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .6); } 100% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .horario .bolinha { animation: none; } }

/* o que levar */
.levar { margin: 4px 0 8px; font-size: .85rem; }
.levar summary { cursor: pointer; font-weight: 700; color: var(--azul); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.levar summary::before { content: "📋"; }
.levar summary::-webkit-details-marker { display: none; }
.levar ul { margin: 6px 0 0; padding: 10px 12px 10px 28px; background: var(--papel); border: 1px solid var(--linha); border-radius: 6px; }
.levar li { margin: 3px 0; }

/* letra grande */
.marca { position: relative; }
.btn-letra {
  position: absolute; right: 0; top: 2px; z-index: 2;
  min-width: 44px; height: 36px; padding: 0 8px; border-radius: 18px;
  border: 2px solid #fff; background: transparent; color: #fff;
  font: 700 1rem var(--fonte); cursor: pointer;
}
.btn-letra span { font-size: .8em; color: var(--amarelo); }
.btn-letra[aria-pressed="true"] { background: #fff; color: var(--verde-escuro); }
html.letra-grande { font-size: 125%; }
html.letra-grande body { font-size: 21px; }
html.letra-grande .corpo { grid-template-columns: minmax(380px, 560px) 1fr; }
@media (min-width: 1281px) { .faixa .marca { padding-right: 56px; } }
.botao-ouvir {
  margin: 10px 8px 0 0; padding: 8px 14px; border-radius: 4px; border: 2px solid var(--azul);
  background: var(--papel); color: var(--azul); font-weight: 700; cursor: pointer; font-size: .92rem;
}
.botao-ouvir + .botao-zap { margin-left: 0; }

/* lembrete */
.lembrete { margin-top: 10px; font-size: .9rem; }
.lembrete summary { cursor: pointer; font-weight: 700; color: var(--azul); list-style: none; }
.lembrete summary::-webkit-details-marker { display: none; }
.lembrete-corpo { margin-top: 8px; padding: 12px; background: var(--papel); border: 1px solid var(--linha); border-radius: 6px; }
.lembrete-corpo p { margin: 0 0 8px; }
.lembrete-dias { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.lembrete-dias button { border: 2px solid var(--azul); background: var(--papel); color: var(--azul); border-radius: 999px; padding: 4px 12px; font-weight: 700; cursor: pointer; }
.lembrete-dias button.ativo { background: var(--azul); color: #fff; }
.botao-agenda { display: inline-block; margin: 0 6px 6px 0; padding: 8px 12px; border-radius: 4px; background: var(--verde); color: #fff; font-weight: 700; text-decoration: none; }
.botao-agenda.outro { background: var(--papel); color: var(--verde-escuro); border: 2px solid var(--verde); }
.lembrete-obs { font-size: .78rem; color: var(--cinza); }

.fp-sub { margin: 10px 0 4px; font-size: .9rem; color: var(--tinta); }
.fp-lista { list-style: none; margin: 0 0 6px; padding: 0; }
.fp-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--linha); font-size: .88rem; }
.fp-lista li small { display: block; color: var(--cinza); font-size: .78rem; }
.fp-lista .dist { color: var(--verde-escuro); font-weight: 700; white-space: nowrap; }
.fp-acoes { display: flex; flex-direction: column; gap: 2px; text-align: right; white-space: nowrap; }
.fp-acoes a { color: var(--azul); font-weight: 700; font-size: .82rem; }
.fp .fp-selo { font-size: .8rem; background: #FFF8D6; border-left: 3px solid var(--amarelo); padding: 6px 8px; }

/* título e A+ lado a lado, sem apertar o nome */
.marca-topo { display: flex; align-items: center; gap: 12px; }
.marca-topo h1 { white-space: nowrap; }
.marca-topo .btn-letra { position: static; flex: none; }
@media (min-width: 1281px) { .faixa .marca { padding-right: 0; } .faixa { grid-template-columns: minmax(300px, 380px) 1fr; } }

/* "não tinha": polegar para baixo balançando */
.boneco-nao { animation: none; }
.boneco-nao .polegar { transform-origin: 31px 28px; animation: polegar-baixo .5s ease-in-out 6 alternate; }
@keyframes polegar-baixo { from { transform: rotate(-8deg) translateY(-1px); } to { transform: rotate(10deg) translateY(2px); } }
.r-pena { color: var(--alerta); }
@media (prefers-reduced-motion: reduce) { .boneco-nao .polegar { animation: none; } }
.boneco-nao { width: 50px; }

/* palavra que se corrige: circula, apaga, escreve */
.palavra-anim { font-weight: 700; color: var(--tinta); white-space: nowrap; }
.troca { position: relative; display: inline-grid; vertical-align: baseline; --t: var(--atraso, 0s); }
.troca > .velha, .troca > .nova { grid-area: 1 / 1; text-align: center; }
.troca .velha { color: #B42318; animation: apaga .45s ease-in calc(var(--t) + .75s) forwards; }
.troca .nova { color: #006B32; opacity: 0; transform: translateY(-6px) scale(.4);
  animation: escreve .45s cubic-bezier(.2, 1.6, .4, 1) calc(var(--t) + 1.15s) forwards; }
.troca .circulo { position: absolute; left: -7px; right: -7px; top: -5px; bottom: -5px; width: calc(100% + 14px); height: calc(100% + 10px);
  overflow: visible; pointer-events: none; animation: some-circulo .3s ease-out calc(var(--t) + 1.5s) forwards; }
.troca .circulo path { fill: none; stroke: #DC2626; stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 100; stroke-dashoffset: 100; animation: circula .6s ease-out calc(var(--t) + .1s) forwards; }
.troca.so-tira { animation: fecha .35s ease-in calc(var(--t) + 1.15s) forwards; overflow: visible; }
.troca.so-poe .nova { animation-delay: calc(var(--t) + .3s); }
@keyframes circula { to { stroke-dashoffset: 0; } }
@keyframes apaga {
  0% { opacity: 1; transform: none; filter: none; }
  40% { transform: translateX(-1px) rotate(-8deg); }
  70% { transform: translateX(1px) rotate(6deg); opacity: .5; filter: blur(.5px); }
  100% { opacity: 0; transform: scale(.3) rotate(0); filter: blur(2px); }
}
@keyframes escreve { to { opacity: 1; transform: none; } }
@keyframes some-circulo { to { opacity: 0; } }
@keyframes fecha { to { max-width: 0; opacity: 0; } }
.troca.so-tira { max-width: 1.2em; }
@media (prefers-reduced-motion: reduce) {
  .troca .velha { display: none; }
  .troca .nova { opacity: 1; transform: none; animation: none; }
  .troca .circulo { display: none; }
  .troca.so-tira { display: none; }
}

.troca .circulo { left: -9px; right: -9px; width: calc(100% + 18px); }
.ok-corrigido { color: var(--verde); font-weight: 700; opacity: 0; display: inline-block;
  animation: escreve .4s cubic-bezier(.2, 1.6, .4, 1) 1.7s forwards; transform: scale(.4); }
@media (prefers-reduced-motion: reduce) { .ok-corrigido { opacity: 1; transform: none; animation: none; } }

/* nome de farmácia: caixinha que vira */
.marca-aviso {
  display: flex; align-items: center; gap: 14px; margin: 0 0 10px; padding: 12px 14px;
  background: #FFF8D6; border: 2px solid var(--amarelo); border-left: 6px solid var(--verde); border-radius: 8px;
  animation: marca-entra .5s cubic-bezier(.2, 1.4, .4, 1) both, marca-brilha 1.2s ease-out 1.4s 1;
}
.marca-aviso p { margin: 0; font-size: .95rem; line-height: 1.35; color: var(--tinta); }
.marca-aviso p small { display: block; color: var(--cinza); font-size: .8rem; margin-top: 2px; }
.marca-aviso .generico { color: var(--verde-escuro); background: #CDEFD9; padding: 0 4px; border-radius: 3px; }
.caixinha { position: relative; width: 104px; height: 58px; flex: none; perspective: 500px; }
.caixinha .lado {
  position: absolute; inset: 0; border-radius: 6px; display: flex; flex-direction: column; justify-content: center;
  align-items: center; backface-visibility: hidden; box-shadow: 0 3px 0 rgba(0, 0, 0, .15); overflow: hidden;
  transition: transform .7s cubic-bezier(.4, .1, .2, 1); padding: 4px; text-align: center;
}
.caixinha .lado b { font-size: .82rem; line-height: 1.1; word-break: break-word; }
.caixinha .lado small { font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.caixinha .faixa-cx { position: absolute; left: 0; right: 0; top: 0; height: 8px; }
.caixinha .frente { background: #fff; color: #7A2E8E; border: 2px solid #C9A3D6; }
.caixinha .frente .faixa-cx { background: linear-gradient(90deg, #C9A3D6, #F2B8C6); }
.caixinha .verso { background: var(--verde); color: #fff; border: 2px solid var(--verde-escuro); transform: rotateY(180deg); }
.caixinha .verso .faixa-cx { background: var(--amarelo); }
.caixinha .frente { animation: vira-frente .7s cubic-bezier(.4, .1, .2, 1) .9s forwards; }
.caixinha .verso { animation: vira-verso .7s cubic-bezier(.4, .1, .2, 1) .9s forwards; }
@keyframes vira-frente { to { transform: rotateY(-180deg); } }
@keyframes vira-verso { to { transform: rotateY(0deg); } }
@keyframes marca-entra { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes marca-brilha { 0% { box-shadow: 0 0 0 0 rgba(0, 156, 59, .55); } 100% { box-shadow: 0 0 0 12px rgba(0, 156, 59, 0); } }
@media (prefers-reduced-motion: reduce) {
  .marca-aviso { animation: none; }
  .caixinha .frente { animation: none; transform: rotateY(-180deg); }
  .caixinha .verso { animation: none; transform: none; }
}

.sug-end .dica-sug { cursor: default; color: var(--cinza); font-size: .88rem; }
.sug-end .dica-sug:hover { background: none; }
.sug-end li.dica-sug { display: block; }
.sug-end .dica-sug i { font-weight: 400; color: var(--cinza); }

/* rota da receita */
.rota-receita { margin: 10px 0 2px; padding: 10px 12px; background: var(--papel); border: 2px solid var(--azul); border-radius: 8px; }
.rota-receita .rota-titulo { margin: 0 0 6px; font-weight: 700; color: var(--azul); }
.rota-receita ol { list-style: none; margin: 0 0 8px; padding: 0; }
.rota-receita li { display: flex; flex-direction: column; padding: 4px 0 4px 12px; border-left: 3px solid var(--amarelo); margin-bottom: 4px; font-size: .88rem; }
.rota-receita li span { color: var(--cinza); font-size: .8rem; }
.rota-receita .rota-falta { margin: 0 0 8px; font-size: .8rem; color: var(--alerta); }
.botao-rota { display: inline-flex; gap: 6px; padding: 8px 14px; border-radius: 4px; background: var(--azul); color: #fff; font-weight: 700; text-decoration: none; }

/* ---------- dado antigo ---------- */
.faixa-velho { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 4px; padding: 10px 12px;
  background: #FFF4C2; border: 2px solid #E0B400; border-left-width: 6px; border-radius: 6px; font-size: .9rem; line-height: 1.35; color: #4A3A00; }
.faixa-velho[hidden] { display: none; }
.faixa-velho .icone-velho { font-size: 1.3rem; line-height: 1; color: #A8430B; }
.acoes a.ligar-antes { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--verde); color: #fff !important; font-weight: 700; text-decoration: none; }
.acoes a.ligar-antes:hover { filter: brightness(1.08); }

/* ---------- quantidade grande não invade o nome ---------- */
.posto { grid-template-columns: minmax(84px, max-content) minmax(0, 1fr); }
.qtd { min-width: 0; }
.qtd .num { white-space: nowrap; }
.qtd .num.longo { font-size: 1.7rem; }
.qtd .num.muito-longo { font-size: 1.3rem; }
@media (max-width: 760px) {
  .posto { grid-template-columns: minmax(70px, max-content) minmax(0, 1fr); }
  .qtd .num.longo { font-size: 1.5rem; }
  .qtd .num.muito-longo { font-size: 1.15rem; }
}