/* Guia Médico Círculo Saúde — identidade da operadora, rigor de produto. */

:root {
  /* Marca, em OKLCH. Origem: circulosaude.com.br
     #01369b azul · #fb4b00 laranja · #122250 navy */
  --azul:        oklch(0.383 0.176 264.5);
  --azul-claro:  oklch(0.522 0.168 264.5);
  --azul-fundo:  oklch(0.955 0.018 264.5);
  --navy:        oklch(0.254 0.104 268);
  --navy-fundo:  oklch(0.185 0.062 268);
  --laranja:     oklch(0.652 0.221 42);
  --laranja-esc: oklch(0.548 0.191 42);

  /* Neutros puxados 0.008 para o azul da marca — nunca para o creme. */
  --fundo:       oklch(0.985 0.004 264.5);
  --superficie:  oklch(1 0 0);
  --painel:      oklch(0.968 0.008 264.5);
  --linha:       oklch(0.905 0.011 264.5);
  --linha-forte: oklch(0.842 0.016 264.5);

  --tinta:       oklch(0.235 0.021 264.5);   /* 13.9:1 sobre --fundo */
  --tinta-media: oklch(0.448 0.019 264.5);   /*  6.4:1 — rótulos e apoio */
  --tinta-fraca: oklch(0.556 0.017 264.5);   /*  4.6:1 — mínimo legível */

  --ok:      oklch(0.545 0.132 155);
  --alerta:  oklch(0.588 0.163 65);
  --erro:    oklch(0.554 0.201 26);

  --r-p: 8px;  --r-m: 12px;  --r-g: 18px;
  --sombra-1: 0 1px 2px oklch(0.254 0.104 268 / 0.06),
              0 1px 3px oklch(0.254 0.104 268 / 0.05);
  --sombra-2: 0 4px 12px oklch(0.254 0.104 268 / 0.08),
              0 2px 4px oklch(0.254 0.104 268 / 0.05);
  --sombra-3: 0 18px 48px oklch(0.254 0.104 268 / 0.18),
              0 4px 12px oklch(0.254 0.104 268 / 0.10);

  /* Escala fixa (produto não usa tipografia fluida), razão ~1.18 */
  --t-xs: 0.75rem; --t-sm: 0.8125rem; --t-md: 0.9375rem;
  --t-lg: 1.0625rem; --t-xl: 1.3125rem; --t-2xl: 1.75rem; --t-3xl: 2.25rem;

  --saida: cubic-bezier(0.16, 1, 0.3, 1);      /* ease-out-expo */
  --rapido: 160ms; --normal: 220ms; --lento: 340ms;

  --z-mapa: 1; --z-conteudo: 10; --z-fixo: 20;
  --z-fundo-ficha: 30; --z-ficha: 40; --z-aviso: 50;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1, "ss01" 1;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }

:focus-visible {
  outline: 2.5px solid var(--laranja);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3 { margin: 0; text-wrap: balance; line-height: 1.2; font-weight: 640; }

.oculto { display: none !important; }

.so-leitor {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ══════════════════════════════════ ENTRADA ══════════════════════════════ */

#entrada {
  position: fixed; inset: 0; z-index: var(--z-aviso);
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 90% at 50% 0%,
      oklch(0.32 0.14 264.5) 0%, var(--navy-fundo) 62%);
  color: oklch(0.97 0.008 264.5);
}

#entrada.saindo {
  opacity: 0;
  transition: opacity var(--lento) var(--saida);
  pointer-events: none;
}

.entrada-caixa { width: 100%; max-width: 340px; text-align: center; }

.marca {
  display: flex; align-items: center; justify-content: center;
  gap: 11px; margin-bottom: 30px;
}
.marca-anel {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3.5px solid var(--laranja);
  position: relative;
}
.marca-anel::after {
  content: ""; position: absolute; inset: 5.5px;
  border-radius: 50%; background: oklch(0.97 0.008 264.5);
}
.marca-nome { font-size: var(--t-xl); font-weight: 620; letter-spacing: -0.02em; }
.marca-nome b { font-weight: 400; opacity: 0.72; }

.entrada-titulo {
  font-size: var(--t-lg); font-weight: 500;
  color: oklch(0.88 0.02 264.5); margin-bottom: 20px;
}

.campo { text-align: left; margin-bottom: 12px; }
.campo label {
  display: block; font-size: var(--t-sm); font-weight: 500;
  color: oklch(0.83 0.022 264.5); margin-bottom: 5px;
}
.campo input {
  width: 100%; padding: 12px 14px;
  background: oklch(1 0 0 / 0.09);
  border: 1px solid oklch(1 0 0 / 0.19);
  border-radius: var(--r-p);
  color: oklch(0.98 0 0);
  transition: border-color var(--rapido), background var(--rapido);
}
.campo input:hover { background: oklch(1 0 0 / 0.13); }
.campo input:focus { border-color: var(--laranja); background: oklch(1 0 0 / 0.15); }

.btn-entrar {
  width: 100%; margin-top: 8px; padding: 13px;
  background: var(--laranja); color: oklch(0.99 0 0);
  border-radius: var(--r-p); font-weight: 600;
  transition: background var(--rapido), transform var(--rapido) var(--saida);
}
.btn-entrar:hover { background: var(--laranja-esc); }
.btn-entrar:active { transform: scale(0.985); }

.ou {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px; color: oklch(0.72 0.02 264.5); font-size: var(--t-sm);
}
.ou::before, .ou::after {
  content: ""; flex: 1; height: 1px; background: oklch(1 0 0 / 0.16);
}

.btn-visitante {
  width: 100%; padding: 12px;
  border: 1px solid oklch(1 0 0 / 0.3); border-radius: var(--r-p);
  color: oklch(0.95 0.01 264.5); font-weight: 500;
  transition: background var(--rapido), border-color var(--rapido);
}
.btn-visitante:hover { background: oklch(1 0 0 / 0.09); border-color: oklch(1 0 0 / 0.45); }

.entrada-nota {
  margin-top: 22px; font-size: var(--t-xs);
  color: oklch(0.7 0.018 264.5); line-height: 1.55;
}

/* ══════════════════════════════════ APP ═════════════════════════════════ */

#app { display: flex; flex-direction: column; min-height: 100dvh; }

.topo {
  position: sticky; top: 0; z-index: var(--z-fixo);
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  background: var(--azul); color: oklch(0.98 0.006 264.5);
}
.topo .marca-anel { width: 24px; height: 24px; border-width: 2.5px; }
.topo .marca-anel::after { inset: 3.5px; background: oklch(0.98 0.006 264.5); }
.topo .marca-nome { font-size: var(--t-md); }

.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 4px; }

.aba {
  padding: 7px 13px; border-radius: 100px;
  font-size: var(--t-sm); font-weight: 500;
  color: oklch(0.9 0.02 264.5);
  transition: background var(--rapido), color var(--rapido);
}
.aba:hover { background: oklch(1 0 0 / 0.13); color: oklch(0.99 0 0); }
.aba[aria-selected="true"] { background: oklch(1 0 0 / 0.19); color: oklch(1 0 0); }

/* ─────────────────────────────── mapa ─────────────────────────────── */

.palco {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  flex: 1;
}
/* o canvas tem largura intrínseca (o atributo width em pixels) e, sem isto,
   empurra a coluna do grid para além da tela — rolagem horizontal no celular */
.palco > * { min-width: 0; }
#mapa { max-width: 100%; }

#mapa-caixa {
  position: relative;
  z-index: var(--z-mapa);
  height: 38dvh; min-height: 220px;
  background:
    radial-gradient(130% 100% at 70% 10%,
      oklch(0.30 0.13 264.5) 0%, var(--navy-fundo) 70%);
  overflow: hidden;
}
/* absoluto, e não height:100%: o pai muda de altura fixa para automática entre
   os dois layouts, e uma altura em porcentagem colapsa para zero no segundo. */
#mapa {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  cursor: grab;
  touch-action: none;   /* a pinça e o arraste são nossos, não da página */
}
#mapa:active { cursor: grabbing; }

.mapa-ajuda {
  position: absolute; right: 12px; top: 12px;
  display: flex; gap: 7px; align-items: center;
}
.btn-mapa {
  padding: 7px 12px; border-radius: 100px;
  background: oklch(0.185 0.062 268 / 0.62);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid oklch(1 0 0 / 0.18);
  color: oklch(0.96 0.01 264.5); font-size: var(--t-xs); font-weight: 560;
  transition: background var(--rapido), border-color var(--rapido);
}
.btn-mapa:hover { background: oklch(0.185 0.062 268 / 0.85); border-color: oklch(1 0 0 / 0.34); }
.dica-mapa {
  position: absolute; left: 14px; top: 14px;
  color: oklch(0.86 0.02 264.5); font-size: var(--t-xs);
  text-shadow: 0 1px 6px oklch(0.18 0.06 268 / 0.8);
  pointer-events: none;
  transition: opacity var(--lento) var(--saida);
}
.dica-mapa.some { opacity: 0; }

/* Só o mapa: no celular a busca ocupa dois terços da tela, e o mapa fica pequeno
   demais para ser explorado. Este modo devolve a tela inteira ao mapa. */
body.so-mapa .busca-area { display: none; }
body.so-mapa #mapa-caixa { height: calc(100dvh - 47px); }
body.so-mapa .palco { grid-template-columns: 1fr; }
body.so-mapa #mapa-caixa { grid-column: 1 / -1; }

.mapa-legenda {
  position: absolute; left: 14px; bottom: 12px;
  display: flex; align-items: baseline; gap: 7px;
  color: oklch(0.93 0.015 264.5);
  pointer-events: none;
  text-shadow: 0 1px 6px oklch(0.18 0.06 268 / 0.75);
}
.mapa-legenda strong {
  font-size: var(--t-xl); font-weight: 640;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.mapa-legenda span { font-size: var(--t-sm); color: oklch(0.84 0.02 264.5); }

/* ────────────────────────────── busca ────────────────────────────── */

.busca-area {
  position: relative; z-index: var(--z-conteudo);
  background: var(--fundo);
  border-radius: var(--r-g) var(--r-g) 0 0;
  margin-top: -18px;
  padding: 16px 16px 0;
  box-shadow: 0 -8px 24px oklch(0.18 0.06 268 / 0.16);
  flex: 1;
  display: flex; flex-direction: column;
}

.busca-linha {
  position: relative;
  display: flex; align-items: center; flex: none;
  background: var(--superficie);
  border: 1.5px solid var(--linha-forte);
  border-radius: var(--r-m);
  box-shadow: var(--sombra-1);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.busca-linha:focus-within {
  border-color: var(--azul);
  box-shadow: 0 0 0 3.5px oklch(0.383 0.176 264.5 / 0.13), var(--sombra-1);
}
.busca-linha svg { flex: none; margin-left: 13px; color: var(--tinta-fraca); }

#busca {
  flex: 1; min-width: 0;
  padding: 14px 12px; border: 0; background: none;
  font-size: var(--t-lg);
}
#busca::placeholder { color: var(--tinta-fraca); }
#busca:focus { outline: none; }

.btn-limpar {
  flex: none; margin-right: 8px; padding: 7px;
  border-radius: 50%; color: var(--tinta-media); line-height: 0;
  transition: background var(--rapido), color var(--rapido);
}
.btn-limpar:hover { background: var(--painel); color: var(--tinta); }

.sugestoes {
  display: flex; gap: 7px; overflow-x: auto;
  padding: 12px 0 2px;
  scrollbar-width: none;
  flex: none;   /* num container flex-column, encolheria e cortaria os atalhos */
}
.sugestoes::-webkit-scrollbar { display: none; }
.sugestao {
  flex: none; padding: 7px 13px;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 100px; font-size: var(--t-sm); font-weight: 500;
  color: var(--tinta-media); white-space: nowrap;
  transition: border-color var(--rapido), color var(--rapido), background var(--rapido);
}
.sugestao:hover { border-color: var(--azul-claro); color: var(--azul); }
.sugestao[aria-pressed="true"] {
  background: var(--azul); border-color: var(--azul); color: oklch(0.99 0 0);
}

.contagem {
  display: flex; align-items: baseline; gap: 6px;
  padding: 15px 2px 9px;
  font-size: var(--t-sm); color: var(--tinta-media);
  font-variant-numeric: tabular-nums;
}
.contagem b { color: var(--tinta); font-weight: 620; }
.contagem .tempo { margin-left: auto; color: var(--tinta-fraca); font-size: var(--t-xs); }

/* ──────────────────────────── resultados ─────────────────────────── */

#lista { list-style: none; margin: 0; padding: 0 0 24px; }

.item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 14px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--linha);
  cursor: pointer;
  transition: background var(--rapido);
}
.item:hover { background: var(--azul-fundo); }
.item:first-child { border-top: 1px solid var(--linha); }

.item-nome {
  grid-column: 1; font-size: var(--t-lg); font-weight: 570;
  letter-spacing: -0.011em; line-height: 1.28;
}
.item-nome mark {
  background: oklch(0.652 0.221 42 / 0.22);
  color: inherit; border-radius: 3px; padding: 0 1px;
}
.item-esp { grid-column: 1; font-size: var(--t-md); color: var(--azul); font-weight: 500; }
.item-loc { grid-column: 1; font-size: var(--t-sm); color: var(--tinta-media); }
.item-dir {
  grid-column: 2; grid-row: 1 / span 3;
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: center; gap: 5px;
}

.selo {
  padding: 3px 9px; border-radius: 100px;
  font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
}
.selo-plano { background: oklch(0.545 0.132 155 / 0.14); color: oklch(0.40 0.11 155); }
.selo-ql    { background: oklch(0.383 0.176 264.5 / 0.11); color: var(--azul); }
.selo-fora  { background: oklch(0.554 0.201 26 / 0.13); color: oklch(0.44 0.17 26); }
.dist { font-size: var(--t-xs); color: var(--tinta-fraca); font-variant-numeric: tabular-nums; }

.vazio { padding: 44px 16px; text-align: center; color: var(--tinta-media); }
.vazio h3 { font-size: var(--t-lg); margin-bottom: 7px; color: var(--tinta); }
.vazio p { margin: 0; font-size: var(--t-md); max-width: 42ch; margin-inline: auto; }

/* esqueleto de carga — nunca um círculo girando no meio do conteúdo */
.esqueleto { padding: 14px 2px; border-bottom: 1px solid var(--linha); }
.esq-barra {
  height: 11px; border-radius: 5px;
  background: linear-gradient(90deg, var(--painel) 25%,
              oklch(0.94 0.008 264.5) 37%, var(--painel) 63%);
  background-size: 300% 100%;
  animation: brilho 1.3s ease-in-out infinite;
}
@keyframes brilho { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* ═════════════════════════════ FICHA ══════════════════════════════ */

#fundo-ficha {
  position: fixed; inset: 0; z-index: var(--z-fundo-ficha);
  background: oklch(0.185 0.062 268 / 0.42);
  backdrop-filter: blur(7px) saturate(0.85);
  -webkit-backdrop-filter: blur(7px) saturate(0.85);
  opacity: 0; pointer-events: none;
  transition: opacity var(--normal) var(--saida);
}
#fundo-ficha.aberto { opacity: 1; pointer-events: auto; }

/* A ficha cresce a partir do lugar tocado — o ponto no mapa ou o cartão na
   lista — em vez de substituir a tela. As variáveis --ox/--oy/--raio são
   escritas pelo programa no momento do toque. */
#ficha {
  position: fixed; z-index: var(--z-ficha);
  left: 0; right: 0; bottom: 0;
  max-height: 92dvh; overflow-y: auto;
  background: var(--superficie);
  border-radius: var(--r-g) var(--r-g) 0 0;
  box-shadow: var(--sombra-3);
  --ox: 50%; --oy: 0px; --raio: 120%;
  clip-path: circle(0px at var(--ox) var(--oy));
  transform: translateY(14px);
  transition: clip-path var(--lento) var(--saida),
              transform var(--lento) var(--saida);
  overscroll-behavior: contain;
}
#ficha.aberto {
  clip-path: circle(var(--raio) at var(--ox) var(--oy));
  transform: none;
}

.ficha-pega {
  position: sticky; top: 0; z-index: 2;
  padding: 9px 0 4px; background: var(--superficie);
  display: grid; place-items: center;
}
.ficha-pega i {
  width: 38px; height: 4px; border-radius: 2px;
  background: var(--linha-forte); display: block;
}

.ficha-topo { padding: 6px 20px 16px; }
.ficha-nome {
  font-size: var(--t-2xl); letter-spacing: -0.022em; line-height: 1.16;
  margin-bottom: 5px;
}
.ficha-cr {
  display: inline-block; font-size: var(--t-sm); font-weight: 600;
  color: var(--tinta-media); font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.ficha-esp {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
}
.tag {
  padding: 5px 11px; border-radius: 100px;
  background: var(--azul-fundo); color: var(--azul);
  font-size: var(--t-sm); font-weight: 540;
}

.ficha-acoes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
  padding: 0 20px 18px;
}
.btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px; border-radius: var(--r-p);
  font-size: var(--t-md); font-weight: 570;
  text-decoration: none;   /* Ligar e Como chegar são links, não botões */
  transition: background var(--rapido), border-color var(--rapido), transform var(--rapido) var(--saida);
}
.btn:active { transform: scale(0.985); }
.btn-cheio { background: var(--azul); color: oklch(0.99 0 0); }
.btn-cheio:hover { background: oklch(0.335 0.166 264.5); }
.btn-vazio { border: 1.5px solid var(--linha-forte); color: var(--tinta); }
.btn-vazio:hover { border-color: var(--azul); color: var(--azul); background: var(--azul-fundo); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.bloco { padding: 16px 20px; border-top: 1px solid var(--linha); }
.bloco h3 {
  font-size: var(--t-sm); font-weight: 620; color: var(--tinta-media);
  margin-bottom: 10px;
}
.linha-dado { display: flex; gap: 11px; padding: 5px 0; font-size: var(--t-md); }
.linha-dado svg { flex: none; margin-top: 2px; color: var(--tinta-fraca); }
.linha-dado a { color: var(--azul); text-decoration: none; font-weight: 540; }
.linha-dado a:hover { text-decoration: underline; }

.equipe { display: flex; flex-wrap: wrap; gap: 6px; }
.equipe-nota { font-size: var(--t-xs); color: var(--tinta-fraca); margin-top: 9px; }

.planos-resumo {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--t-md);
}
.planos-barra {
  flex: 1; height: 7px; border-radius: 4px;
  background: var(--linha); overflow: hidden;
}
.planos-barra i {
  display: block; height: 100%; border-radius: 4px;
  background: var(--ok);
  transform-origin: left;
  animation: crescer var(--lento) var(--saida) both;
}
@keyframes crescer { from { transform: scaleX(0); } }

.conferido {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 20px 26px;
  font-size: var(--t-xs); color: var(--tinta-fraca);
}
.conferido button {
  margin-left: auto; color: var(--azul); font-weight: 600; font-size: var(--t-sm);
}
.conferido button:hover { text-decoration: underline; }

/* ═══════════════════════════ DESCREDENCIADOS ═══════════════════════ */

.aviso-saida {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 14px 0 4px; padding: 13px 15px;
  background: oklch(0.588 0.163 65 / 0.10);
  border: 1px solid oklch(0.588 0.163 65 / 0.28);
  border-radius: var(--r-m);
  font-size: var(--t-sm);
}
.aviso-saida strong { display: block; margin-bottom: 2px; font-size: var(--t-md); }

.tempo-linha {
  position: relative; margin: 14px 0 4px; padding-left: 21px;
}
.tempo-linha::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 2px; border-radius: 1px; background: var(--linha);
}
.marco { position: relative; padding: 6px 0; font-size: var(--t-md); }
.marco::before {
  content: ""; position: absolute; left: -20px; top: 12px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--linha-forte); box-shadow: 0 0 0 3px var(--superficie);
}
.marco.entrou::before { background: var(--ok); }
.marco.saiu::before   { background: var(--erro); }
.marco.futuro::before { background: var(--alerta); }
.marco time {
  display: block; font-size: var(--t-xs); color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════ RESPONSIVO ════════════════════════ */

@media (min-width: 900px) {
  /* No desktop a janela e o quadro: o topo fica fixo, a lista rola por dentro
     e o mapa ocupa a altura toda. Sem altura travada aqui, a lista empurra a
     pagina e leva a coluna do mapa junto — que foi o defeito original. */
  #app { height: 100dvh; min-height: 0; overflow: hidden; }
  .palco {
    grid-template-columns: minmax(420px, 5fr) 7fr;
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
  }
  .palco > * { min-height: 0; }
  #mapa-caixa { grid-column: 2; grid-row: 1; height: 100%; }
  .busca-area {
    grid-column: 1; grid-row: 1;
    margin: 0; border-radius: 0;
    box-shadow: none; border-right: 1px solid var(--linha);
    overflow-y: auto; padding: 20px 24px 0;
  }
  #ficha {
    left: auto; right: 0; top: 0; bottom: 0;
    width: min(460px, 46vw); max-height: none;
    border-radius: 0;
    transform: translateX(10px);
  }
  .ficha-pega { display: none; }
  .ficha-topo { padding-top: 22px; }
}

/* ═════════════════════════ MOVIMENTO REDUZIDO ══════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* sem movimento: a ficha aparece inteira, sem revelação nem deslocamento */
  #ficha { transition: opacity 0.01ms; clip-path: none !important; transform: none !important; }
  #ficha:not(.aberto) { opacity: 0; pointer-events: none; }
  #ficha.aberto { opacity: 1; }
}