/* Guia Médico Círculo Saúde
   TODOS os valores deste arquivo foram medidos no protótipo renderizado em
   390x844 (design_handoff_guia_medico/app-beneficiario.dc.html), elemento por
   elemento, com `node medir.mjs proto`. Nada aqui vem do README: onde os dois
   divergiam, venceu a tela do protótipo. A tabela das medidas está em
   MEDIDAS-PROTOTIPO.md. */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --azul:        #01369b;   /* marca, ações, links */
  --azul-escuro: #012a7c;   /* texto sobre laranja claro */
  --navy:        #122250;   /* títulos e texto forte */
  --laranja:     #fb4b00;   /* rede no mapa, pílula ativa, alerta — nunca decorativo */
  --laranja-txt: #a83200;   /* laranja como texto: ~6:1 sobre #fff2ec */
  --laranja-fundo: #7a2f08; /* texto de apoio dentro do bloco laranja claro */

  --tinta-2:     #45557a;   /* texto secundário */
  --tinta-3:     #3f6c8c;   /* metadados */

  --fundo:       #eef2fa;
  --superficie:  #ffffff;
  --pilula:      #eaf0fc;
  --pilula-2:    #e2eafa;
  --pilula-3:    #e4eaf8;   /* selo de origem dentro do cartão de canais */
  --pilula-lar:  #fff2ec;
  --divisor:     #eef2fa;
  --divisor-2:   #e2e9f8;
  --estrela-off: #d9e0f0;
  --campo:       #f1f4fc;   /* fundo de campo e botão secundário */
  --campo-2:     #f6f8fd;   /* fundo de linha e de canal */
  --laranja-btn: #c33a00;   /* botão primário e aba ativa */
  /* a superfície do mapa é a que o componente do design pinta, não a do
     contêiner: #eef1f8 é o padrão do network-map.js, #f5f6fa é o que a ficha
     passa no atributo background */
  --mapa-fundo:  #eef1f8;   /* mapa da busca e mapa em tela cheia */
  --mapa-ficha:  #f5f6fa;   /* mapa dentro do cartão de lugar */
  --navy-claro:  #a8bce6;   /* rótulo sobre navy */
  --navy-texto:  #c3cfe9;   /* corpo de texto sobre navy */
  --navy-selo:   #1c2f60;   /* selo de origem sobre navy */

  --r-g: 24px; --r-m: 20px; --r-p: 18px; --r-pill: 999px;
  --sombra-cartao: 0 12px 30px -22px rgba(18, 34, 80, .5);
  --sombra-plana:  0 1px 2px rgba(18, 34, 80, .05);
  --sombra-vinculo:0 14px 32px -16px rgba(18, 34, 80, .7);
  --sombra-rota:   0 10px 22px -12px rgba(1, 54, 155, .8);
  --sombra-errado: 0 1px 3px rgba(18, 34, 80, .07);
  --sombra-ficha:  0 -20px 50px -24px rgba(18, 34, 80, .55);

  --toque: 48px;
  --saida: cubic-bezier(.22, 1, .36, 1);
  --rapido: 160ms; --normal: 240ms; --lento: 360ms;

  --z-mapa: 1; --z-conteudo: 10; --z-barra: 20;
  --z-fundo-ficha: 30; --z-ficha: 40;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* line-height NÃO é declarado aqui de propósito: o protótipo deixa "normal" no
   corpo e declara a entrelinha só onde precisa. Fixar 1.45 no corpo mudava a
   altura de quase todo texto da tela. */
body {
  margin: 0;
  background: var(--fundo);
  color: var(--navy);
  font-family: Manrope, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--azul); text-decoration: none; }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 8px; }

h1, h2, h3, h4 { margin: 0; font-size: inherit; font-weight: inherit; text-wrap: balance; }

/* fonte de ícone do protótipo: sem a ligadura, "star_half" apareceria escrito */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal;
  display: inline-block; white-space: nowrap; direction: ltr;
  letter-spacing: normal; text-transform: none; word-wrap: normal;
  font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

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

/* ═════════════════════════════════ ENTRADA ═══════════════════════════════
   alto 390x270 · mapa 390x250 · folha 390x350 = 844 */

/* A entrada é uma PÁGINA de verdade, não uma caixa presa: quem rola é o
   documento. É isso que devolve a inércia, o repique e a barra do navegador
   que some ao descer — com a caixa fixa, o dedo parecia bater numa parede. */
#entrada {
  position: relative; z-index: 60;
  display: flex; flex-direction: column;
  min-height: 100dvh;
  background: var(--superficie);
}
#entrada.saindo { opacity: 0; pointer-events: none; transition: opacity var(--lento) var(--saida); }

.entrada-alto {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 18px;
  padding: 26px 26px 14px;
}
.logo { display: block; width: 154px; height: auto; mix-blend-mode: multiply; }

.entrada-texto { display: flex; flex-direction: column; gap: 8px; }
.entrada-titulo {
  font-size: 38px; font-weight: 800; line-height: 1.02; letter-spacing: -.045em;
  color: var(--navy);
}
.entrada-apoio {
  margin: 0; max-width: 312px;
  font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--tinta-2);
}

/* o mapa da entrada ocupa a largura inteira: não está dentro do bloco com
   margem de 26px — foi medido em 390x250, colado nas bordas */
.entrada-mapa {
  position: relative; flex: 1 1 auto; min-height: 250px;
  /* em tela baixa quem cede é o mapa, nunca o campo nem o botão */
  margin-top: 2px; overflow: hidden; background: var(--superficie);
}
.entrada-mapa canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.selo-rede {
  position: absolute; left: 26px; bottom: 12px; z-index: 1;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--pilula-lar); color: var(--laranja-txt);
  font-size: 13px; font-weight: 700; white-space: nowrap;
}

.entrada-folha {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px 26px calc(26px + env(safe-area-inset-bottom));
  background: var(--superficie);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -18px 40px -26px rgba(18, 34, 80, .5);
}
.entrada-campos { display: flex; flex-direction: column; gap: 10px; }
.entrada-campos label { display: flex; flex-direction: column; gap: 7px; }
.rotulo { font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.entrada-folha input {
  width: 100%; height: 56px; padding: 0 18px;
  border: 0; border-radius: var(--r-pill);
  background: var(--campo); color: var(--navy);
  font-size: 17px; font-weight: 500;
}
/* A senha só mostra bolinhas, e no celular elas pesavam mais que o CPF ao lado.
   O peso já era 400: o que engordava eram os 17px do campo e o navy cheio.
   Duas passadas: 17px/navy cheio → 15px/tinta secundária ainda ficou forte no
   celular dele → 13px e navy a 42%. Continua legível como "campo preenchido"
   sem competir com o CPF, que é o dado que a pessoa confere. */
.entrada-folha input[type="password"] {
  font-weight: 400; letter-spacing: .2em;
  font-size: 13px; color: rgba(18, 34, 80, .42);
}

.entrada-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-entrar, .btn-visitante {
  min-height: 58px; border-radius: var(--r-pill);
  font-size: 16px; font-weight: 700;
  transition: filter var(--rapido), transform var(--rapido) var(--saida);
}
.btn-entrar { background: var(--laranja-btn); color: #fff; }
.btn-visitante { background: var(--campo); color: var(--azul); }
.btn-entrar:hover, .btn-visitante:hover { filter: brightness(.97); }
.btn-entrar:active, .btn-visitante:active { transform: scale(.98); }

.entrada-nota {
  margin: 0;
  font-size: 13px; font-weight: 400; line-height: 1.55; color: var(--tinta-2);
}

/* ═══════════════════════════════════ APP ═════════════════════════════════
   casca fixa: a página inteira NUNCA rola. Só a lista e as saídas rolam, cada
   uma por dentro. scrollHeight tem de ser 844 nas quatro telas. */

#app {
  position: relative;
  display: flex; flex-direction: column;
  height: 100dvh; overflow: hidden;
  background: var(--fundo);
}
#app[hidden] { display: none; }

.topo {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 18px 8px; background: var(--fundo);
}
.topo img { width: 112px; height: auto; mix-blend-mode: multiply; }

/* ─────────────────────── busca: campo → contador → mapa ─────────────────── */

.busca-area { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* o bloco do campo + contador: 390x110 na busca, padding 8/16/12 */
.busca-topo { flex: 0 0 auto; padding: 8px 16px 12px; background: var(--fundo); }

.busca-linha {
  position: relative; display: flex; align-items: center;
  height: 60px;
  background: var(--superficie); border-radius: var(--r-pill);
  box-shadow: 0 1px 2px rgba(18, 34, 80, .05), 0 12px 26px -18px rgba(18, 34, 80, .5);
}
.busca-linha:focus-within {
  box-shadow: 0 0 0 2px var(--azul), 0 12px 26px -18px rgba(18, 34, 80, .5);
}

#busca {
  flex: 1; min-width: 0; height: 100%; padding: 0 52px 0 20px;
  border: 0; background: none; font-size: 17px; font-weight: 500;
}
/* sem regra de cor para o texto-fantasma: o protótipo também não tem, e quem
   define é o padrão do navegador. Escrever uma cor aqui já deixou o campo
   diferente do desenho. */
#busca:focus { outline: none; }

.btn-limpar {
  position: absolute; right: 7px; top: 7px;
  width: 46px; height: 46px; border-radius: var(--r-pill);
  background: var(--campo); color: var(--tinta-2);
  font-size: 19px;
}
.btn-limpar:hover { background: var(--pilula-lar); color: var(--laranja); }

.linha-conta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 6px 0;
}
.contagem { margin: 0; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.sugestoes { display: none; }

.btn-perto {
  flex: 0 0 auto; min-height: 48px; padding: 0 16px; border-radius: var(--r-pill);
  background: var(--superficie); color: var(--azul);
  font-size: 14px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(18, 34, 80, .06);
}

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

/* 34% do que sobra — 265px na tela de busca, 548px no mapa em tela cheia */
#mapa-caixa {
  position: relative; z-index: var(--z-mapa);
  flex: 0 0 34%; min-height: 0; margin: 0 14px;
  border-radius: 24px; overflow: hidden;
  background: var(--mapa-fundo);
  /* sem anel interno: no protótipo o canvas opaco cobre esse traço, e no app,
     com o canvas transparente, ele apareceria como uma borda de 1px */
  transition: flex-basis 300ms ease;
}
#mapa {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: 100%; display: block;
  touch-action: none;   /* a pinça é do mapa, não da página */
}

/* ── controles do mapa real ───────────────────────────────────────────────
   O MapLibre traz botões e atribuição com visual próprio. Aqui eles vestem a
   roupa do app: cantos arredondados, sombra leve e a letra miúda da marca. */
#mapa .maplibregl-ctrl-group {
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(18, 34, 80, 0.16);
  border: 1px solid rgba(18, 34, 80, 0.08);
}
#mapa .maplibregl-ctrl-group button { width: 32px; height: 32px; }
#mapa .maplibregl-ctrl-top-right { top: 10px; right: 10px; }

/* A atribuição do MapTiler e do OpenStreetMap é obrigatória por contrato.
   Fica discreta, no canto, sem roubar a tela. */
#mapa .maplibregl-ctrl-attrib {
  background: rgba(255, 255, 255, 0.78);
  border-radius: 10px 0 0 0; font-size: 10px;
}
#mapa .maplibregl-ctrl-attrib a { color: #4a5680; }

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

#lista {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  /* inércia e repique: sem isto a rolagem no celular parece travada */
  -webkit-overflow-scrolling: touch; overscroll-behavior-y: auto;
  list-style: none; margin: 0; padding: 12px 14px 92px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--fundo);
}

.item {
  display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 6px;
  width: 100%; min-height: 84px;
  padding: 18px; background: var(--superficie); border-radius: 20px;
  text-align: left; cursor: pointer;
  box-shadow: 0 1px 2px rgba(18, 34, 80, .05), 0 12px 26px -20px rgba(18, 34, 80, .45);
  transition: box-shadow 180ms, transform 120ms var(--saida);
}
.item:hover { box-shadow: 0 2px 4px rgba(18, 34, 80, .07), 0 18px 34px -18px rgba(18, 34, 80, .5); }
.item:active { transform: scale(.99); }

.item-alto {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
}
/* sem realce do termo buscado: no protótipo o título é texto puro */
.item-nome { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--navy); }
.item-esp { font-size: 15px; font-weight: 400; color: var(--tinta-2); }

/* terceira linha: a nota é um bloco de gap 6; a meta é irmã dela, gap 10 */
.item-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: 12px; font-weight: 500; color: var(--tinta-3);
}
.item-nota { display: flex; align-items: center; gap: 6px; }
.item-nota b { font-size: 15px; font-weight: 800; color: var(--navy); }
.item-nota i { display: inline-flex; align-items: center; gap: 1px; }
.item-nota em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--tinta-3); }

.selo {
  flex: none; padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--pilula); color: var(--azul);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}

/* busca sem termo: cartão branco com o convite e as cidades */
.vazio {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px; background: var(--superficie); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(18, 34, 80, .05), 0 16px 32px -22px rgba(18, 34, 80, .4);
}
.vazio p { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--tinta-2); }
.cidades { display: flex; flex-direction: column; gap: 6px; }
.cidade {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; padding: 0 14px; border-radius: var(--r-pill);
  background: var(--campo-2); text-align: left;
}
.cidade:hover { background: var(--pilula); }
.cidade b { font-size: 16px; font-weight: 600; color: var(--navy); }
.cidade span { font-size: 13px; font-weight: 600; color: var(--tinta-3); }

/* busca que não achou nada: o texto literal do protótipo e três pílulas */
.vazio-q {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px; background: var(--superficie); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(18, 34, 80, .05);
}
.vazio-q p { margin: 0; font-size: 16px; font-weight: 400; color: var(--navy); }
.vazio-q strong { font-weight: 700; }
.vazio-pilulas { display: flex; flex-wrap: wrap; gap: 8px; }
.pilula-sug {
  min-height: 48px; padding: 0 16px; border-radius: var(--r-pill);
  background: var(--campo); color: var(--azul);
  font-size: 14px; font-weight: 600;
}
.pilula-sug:hover { background: var(--divisor-2); }

.esqueleto { height: 144px; border-radius: 20px;
  background: linear-gradient(90deg, #fff 25%, #f4f7fd 37%, #fff 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; } }

/* ─────────────────────────── barra de navegação ────────────────────────── */

/* faixa opaca de 82px que impede a lista de aparecer ao redor da barra */
.mascara-rodape {
  position: absolute; left: 0; right: 0; bottom: 0; height: 82px; z-index: 4;
  background: var(--fundo); pointer-events: none;
}

.barra {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  z-index: var(--z-barra);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 5px;
  background: var(--superficie); border-radius: var(--r-pill);
  box-shadow: 0 2px 4px rgba(18, 34, 80, .06), 0 18px 34px -16px rgba(18, 34, 80, .45);
}
.aba {
  min-height: 48px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--tinta-2);
  transition: background var(--rapido), color var(--rapido);
}
.aba[aria-selected="true"] { background: var(--laranja-btn); color: #fff; }

/* ═══════════════════════════════════ FICHA ═══════════════════════════════
   topo branco de 83px que NÃO rola, e o conteúdo rolando por dentro. */

#fundo-ficha {
  position: absolute; inset: 0; z-index: var(--z-fundo-ficha);
  background: rgba(18, 34, 80, .34);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--normal) var(--saida), visibility var(--normal);
}
#fundo-ficha.aberto { opacity: 1; visibility: visible; pointer-events: auto; }

#ficha {
  position: absolute; left: 0; right: 0; top: 10px; bottom: 0; z-index: var(--z-ficha);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--superficie);
  border-radius: 28px 28px 0 0;
  box-shadow: var(--sombra-ficha);
  --ox: 50%; --oy: 0px; --raio: 120%;
  clip-path: circle(0px at var(--ox) var(--oy));
  transform: translateY(12px);
  transition: clip-path var(--lento) var(--saida), transform var(--lento) var(--saida);
}
#ficha[hidden] { display: none; }
#ficha.aberto { clip-path: circle(var(--raio) at var(--ox) var(--oy)); transform: none; }
.ficha-pega { display: none; }

.ficha-topo {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 16px 18px 14px;
  background: var(--superficie);
}
.ficha-id { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* o foco vai para o título ao abrir a ficha, para quem usa leitor de tela; o
   anel de foco não pode aparecer — no protótipo não existe */
.ficha-nome { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--navy); }
.ficha-nome:focus, .ficha-nome:focus-visible { outline: none; }
/* o registro do conselho e o tempo de rede ficam na MESMA linha */
.ficha-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ficha-cr { font-size: 13px; font-weight: 600; color: var(--tinta-3); }
.desde {
  padding: 5px 10px; border-radius: var(--r-pill); background: var(--pilula);
  font-size: 11px; font-weight: 700; color: var(--azul); white-space: nowrap;
}
/* o botão de fechar do protótipo é o caractere "×" em 20px, não um ícone */
.ficha-fechar {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--r-pill);
  background: var(--campo); color: var(--tinta-2); font-size: 20px;
}
.ficha-fechar:hover { background: var(--pilula-lar); color: var(--laranja); }

.ficha-corpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  /* na ficha o "contain" fica: senão arrastar a folha arrasta a lista atrás */
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px;
  padding: 0 14px 22px; background: var(--fundo);
}

.ficha-esp { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px 2px; }
.tag {
  padding: 9px 15px; border-radius: var(--r-pill);
  background: var(--pilula-2); color: var(--azul);
  font-size: 14px; font-weight: 700;
}

/* cartão de lugar: um objeto só — mapa, endereço e nota dentro do mesmo cartão */
.lugar {
  flex: 0 0 auto; display: flex; flex-direction: column;
  border-radius: 24px; overflow: hidden; background: var(--superficie);
  box-shadow: var(--sombra-cartao);
}
.lugar-mapa { position: relative; flex: 0 0 184px; min-height: 184px; background: var(--mapa-ficha); }
.lugar-mapa canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.btn-rota {
  position: absolute; right: 12px; bottom: 12px;
  min-height: 48px; padding: 0 18px; border-radius: var(--r-pill);
  background: var(--azul); color: #fff; font-size: 15px; font-weight: 700;
  display: inline-flex; align-items: center;
  box-shadow: var(--sombra-rota);
}
.lugar-end { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 16px; }
.lugar-end b { font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; }
.lugar-end span { font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--tinta-2); }
/* no protótipo a linha da nota é um LINK inteiro para o Google, não uma caixa */
.lugar-nota {
  display: flex; align-items: center; gap: 12px; color: var(--azul);
  padding: 15px 20px; border-top: 1px solid var(--divisor);
}
.lugar-nota .nota-n { display: flex; align-items: baseline; gap: 4px; }
.lugar-nota b { font-size: 19px; font-weight: 800; color: var(--navy); }
.lugar-nota em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--tinta-2); }
.lugar-nota i { display: inline-flex; align-items: center; gap: 1px; }
.lugar-nota .nota-conta { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 600;
  color: var(--tinta-2); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* mesma faixa da nota, para os 40 lugares que têm ficha no Google e nota nenhuma */
.lugar-google { font-size: 14px; font-weight: 700; }

/* Que tipo de lugar é: hospital, consultório, laboratório. Vem antes do
   endereço porque é o que a pessoa quer saber primeiro — se vai a um hospital
   ou a uma sala de consultório.
   Escrito como `.lugar-end .lugar-tipo` de propósito: `.lugar-end span` pesa
   mais que uma classe sozinha e apagaria o tamanho e a cor daqui. */
.lugar-end .lugar-tipo {
  align-self: flex-start; margin-bottom: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--azul); background: var(--pilula);
  padding: 3px 9px; border-radius: var(--r-pill);
}

/* onde a pessoa atende pelo plano — o bloco que evita o erro caro */
.vinculo {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px; background: var(--navy); border-radius: 22px;
  box-shadow: var(--sombra-vinculo);
}
.vinculo small { font-size: 12px; font-weight: 700; color: var(--navy-claro); }
.vinculo b { font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.03em; color: #fff; }
.vinculo .btn-tel {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; border-radius: var(--r-pill);
  background: var(--superficie); color: var(--azul);
  font-size: 17px; font-weight: 700; white-space: nowrap;
}
.vinculo .fonte-dado {
  align-self: flex-start; margin: 0;
  background: var(--navy-selo); color: var(--navy-claro);
  font-size: 11px; font-weight: 600;
}
.vinculo p { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--navy-texto); }

/* corpo clínico: uma linha por especialidade, com contagem e +/− */
.corpo-clinico {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px; background: var(--superficie); border-radius: 20px;
}
.cc-cab { display: flex; flex-direction: column; gap: 3px; }
.cc-cab h3 { font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.cc-cab span { font-size: 15px; font-weight: 600; color: var(--navy); }
.cc-grupo { display: flex; flex-direction: column; gap: 2px; }
.cc-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 48px; padding: 0 16px; border-radius: var(--r-pill);
  background: var(--campo-2); text-align: left;
}
.cc-linha[aria-expanded="true"] { background: var(--pilula); }
.cc-linha > span:first-child { font-size: 15px; font-weight: 600; color: var(--navy); }
.cc-dir { display: flex; align-items: center; gap: 10px; }
.cc-dir em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--tinta-3); }
.cc-dir i { font-style: normal; font-size: 17px; font-weight: 700; color: var(--azul);
  width: 14px; text-align: center; }
.cc-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 52px; padding: 0 16px 0 22px; text-align: left;
}
.cc-item b { font-size: 16px; font-weight: 600; color: var(--navy); }
.cc-item span { font-size: 12px; font-weight: 600; color: var(--tinta-3); white-space: nowrap; }
.cc-mais {
  min-height: 48px; padding: 0 16px; border-radius: var(--r-pill);
  background: var(--campo); color: var(--azul); font-size: 14px; font-weight: 700;
}

/* canais de contato: "Agendar" no topo e uma linha por canal, com origem */
.canais {
  display: flex; flex-direction: column;
  padding: 8px 6px; background: var(--superficie); border-radius: 24px;
  box-shadow: var(--sombra-cartao);
}
.btn-agendar {
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; margin: 2px 2px 8px; border-radius: var(--r-pill);
  background: var(--azul); color: #fff; font-size: 17px; font-weight: 700;
}
.canal {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 0 16px;
  background: var(--campo-2); border-radius: 18px; color: var(--navy);
}
.canal:hover { background: var(--pilula); }
.canal-ico {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--superficie); color: var(--azul);
}
.canal-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.canal-txt b { font-size: 15px; font-weight: 700; color: var(--navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* rótulo e selo de origem numa linha só, sem quebrar */
.canal-linha { display: flex; align-items: center; gap: 7px; min-width: 0; }
.canal-copiar {
  flex: 0 0 auto; padding: 8px 12px; border-radius: var(--r-pill);
  background: var(--pilula); color: var(--azul); font-size: 12px; font-weight: 700;
}
.canal-linha > span { font-size: 12px; font-weight: 600; color: var(--tinta-2); white-space: nowrap; }

.fonte-dado {
  padding: 3px 8px; border-radius: var(--r-pill); background: var(--pilula-3);
  font-size: 10px; font-weight: 700; color: var(--tinta-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* planos */
.bloco {
  display: flex; flex-direction: column; gap: 11px;
  padding: 18px; background: var(--superficie); border-radius: 20px;
}
.bloco h3 { font-size: 13px; font-weight: 700; color: var(--tinta-2); }
.planos-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.planos-txt { margin: 0; min-width: 0; font-size: 16px; font-weight: 700; color: var(--navy); }
.btn-planos {
  display: flex; align-items: center; min-height: 48px; padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--pilula-lar); color: var(--laranja-txt); font-size: 13px; font-weight: 700;
}
.planos-lista { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.plano {
  height: 34px; display: inline-flex; align-items: center; padding: 0 12px;
  border-radius: var(--r-pill); background: var(--campo); color: var(--azul);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.planos-lista .equipe-nota { width: 100%; margin: 0; font-size: 13px; color: var(--tinta-3); }

.selo-qualis {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 18px; border-radius: 20px; background: var(--pilula-lar);
  color: var(--navy); font-size: 15px; font-weight: 600;
}
.selo-qualis::before {
  content: ""; flex: none; width: 10px; height: 10px;
  border-radius: 50%; background: var(--laranja);
}

.ficha-rodape { display: flex; flex-direction: column; gap: 13px; padding: 2px 0 6px; }
.btn-errado {
  align-self: center;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 20px; border-radius: var(--r-pill);
  background: var(--superficie); color: var(--tinta-3); font-size: 14px; font-weight: 700;
  box-shadow: var(--sombra-errado);
}
.btn-errado:hover { color: var(--azul); box-shadow: 0 4px 14px rgba(18, 34, 80, .12); }
.btn-errado .material-symbols-rounded { font-size: 19px; line-height: 1; }

/* painel de correção — os três estados do protótipo */
.corr-painel {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px; background: var(--superficie); border-radius: 22px;
}
.corr-titulo { font-size: 15px; color: var(--navy); }
.corr-motivos { display: flex; flex-wrap: wrap; gap: 8px; }
.corr-motivo {
  min-height: 48px; padding: 0 16px; border-radius: var(--r-pill);
  background: var(--superficie); color: var(--tinta-2);
  font-size: 14px; font-weight: 600;
}
.corr-motivo.escolhido { background: var(--laranja-btn); color: #fff; }
.corr-acoes { display: flex; gap: 8px; }
.corr-enviar {
  flex: 1 1 auto; min-height: 52px; border-radius: var(--r-pill);
  background: var(--azul); color: #fff; font-size: 15px; font-weight: 700;
}
.corr-enviar:disabled { background: #e9edf7; color: #7d89a8; cursor: not-allowed; }
.corr-cancelar {
  min-height: 52px; padding: 0 18px; border-radius: var(--r-pill);
  background: var(--superficie); color: var(--tinta-2); font-size: 15px; font-weight: 600;
}
.corr-cancelar:hover { background: var(--fundo); }
.corr-feito {
  padding: 16px; border-radius: 18px; background: var(--pilula);
  font-size: 14px; line-height: 1.55; color: var(--navy);
}

/* blocos usados só na ficha de quem saiu da rede */
.linha-dado { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0;
  font-size: 15px; line-height: 1.45; }
.linha-dado svg { flex: none; margin-top: 2px; color: var(--tinta-3); }

/* Horário de atendimento. Fechado mostra só hoje; aberto, os sete dias.
   Dia à esquerda e hora à direita, alinhados em colunas — sete linhas de texto
   corrido não se leem, os números precisam cair um embaixo do outro. */
.horarios .linha-dado { padding: 2px 0; font-size: 14px; }
.hora-lista { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hora-dia { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hora-nome { color: var(--tinta-2); }
.hora-valor { font-weight: 600; color: var(--navy); white-space: nowrap; }
.hora-dia.hoje .hora-nome, .hora-dia.hoje .hora-valor { color: var(--azul); font-weight: 700; }
.horario-nota { margin: 0; font-size: 12px; line-height: 1.4; color: var(--tinta-3); }
.tempo-linha { display: flex; flex-direction: column; gap: 8px; }
.marco { font-size: 15px; font-weight: 600; }
.marco time { display: block; font-size: 13px; font-weight: 500; color: var(--tinta-3); }
.conferido {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px;
  font-size: 12px; color: var(--tinta-3);
}
.equipe-nota { margin: 0; font-size: 12px; color: var(--tinta-3); }

/* ═══════════════════════════════ SAÍDAS DA REDE ══════════════════════════ */

#saidas {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 4px 14px 92px; background: var(--fundo);
}

.saidas-cab { display: flex; flex-direction: column; gap: 7px; padding: 4px 6px 8px; }
.saidas-titulo { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--navy); }
.saidas-apoio { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--tinta-2); }
.saidas-selo {
  align-self: flex-start; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--divisor-2); color: var(--azul); font-size: 12px; font-weight: 600;
}
.saidas-rodape { padding: 8px 6px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }

.saida {
  display: flex; flex: 0 0 auto; flex-direction: column; gap: 11px;
  padding: 18px; background: var(--superficie); border-radius: 20px;
  box-shadow: var(--sombra-plana); cursor: pointer;
}
.saida-alto { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.saida-nome { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--navy); }
.saida-esp { font-size: 14px; font-weight: 400; color: var(--tinta-2); }

.barra-tempo { position: relative; height: 8px; border-radius: var(--r-pill);
  background: var(--fundo); overflow: hidden; }
.barra-tempo i { position: absolute; top: 0; bottom: 0;
  border-radius: var(--r-pill); background: #5685a5; }

.saida-tempos { display: flex; flex-direction: column; gap: 3px; }
.saida-datas { display: flex; justify-content: space-between; gap: 8px;
  font-size: 12px; font-weight: 500; color: var(--tinta-2); }
.saida-tempo { font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; }

/* para onde ir: o bloco que resolve o problema de quem descobre que o médico saiu */
.para-onde {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 4px; padding: 16px; background: var(--navy); border-radius: 18px;
}
.po-cab { display: flex; flex-direction: column; gap: 3px; }
.po-cab h4 { font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.po-cab span { font-size: 12px; font-weight: 600; color: var(--navy-claro); }
.po-mais { font-size: 12px; font-weight: 600; color: var(--navy-claro); }
.substituto {
  display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 5px;
  width: 100%; min-height: 64px; padding: 14px 16px;
  background: var(--superficie); border-radius: 16px; text-align: left;
}
.substituto:hover { background: var(--pilula); }
.substituto b { font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--navy); }
.substituto span { font-size: 13px; font-weight: 400; color: var(--tinta-2); }
.substituto em { font-style: normal; font-size: 14px; font-weight: 700; color: var(--azul); }

.sem-substituto {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px; padding: 16px; background: var(--pilula-lar); border-radius: 18px;
}
.sem-substituto b { font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--laranja-txt); }
.sem-substituto span { font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--laranja-fundo); }

/* saída ainda por acontecer: quem continua atendendo não pode aparecer como "saiu" */
.aviso-saida {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px; background: var(--pilula-lar); border-radius: 18px;
}
.aviso-saida svg { flex: none; margin-top: 2px; color: var(--laranja-txt); }
.aviso-saida strong { display: block; margin-bottom: 3px;
  font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--laranja-txt); }
.aviso-saida span { font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--laranja-fundo); }

/* ═══════════════════════════ MAPA EM TELA CHEIA ══════════════════════════
   o protótipo mantém logo, campo, contador, "Perto de mim" e a barra de abas —
   só a lista sai e o mapa cresce até 362x548. */

body.so-mapa #lista { display: none; }
body.so-mapa #mapa-caixa { flex: 1 1 auto; margin: 0 14px 90px; }

/* Descredenciados: sem mapa e sem campo de busca, como no protótipo */
body.em-saidas #mapa-caixa, body.em-saidas .busca-topo { display: none; }

/* ═════════════════════════════════ TELA GRANDE ═══════════════════════════ */

/* celular baixo: o mapa encolhe para o formulário caber inteiro */
@media (max-height: 760px) {
  .entrada-mapa { min-height: 150px; }
  .entrada-alto { padding: 20px 26px 10px; gap: 12px; }
  .entrada-titulo { font-size: 32px; }
}

/* No computador o app vira uma coluna do tamanho de um celular, centralizada.
   A ENTRADA estava fora desta regra e esticava na tela inteira: o título de
   38px sozinho no alto de uma tela de 1.400px, o mapa achatado numa faixa e os
   campos de CPF com a largura de uma mesa. */
@media (min-width: 900px) {
  #app, #entrada {
    max-width: 480px; margin: 0 auto;
    box-shadow: 0 30px 80px -24px rgba(18, 34, 80, .5);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #ficha { transition: opacity .01ms; clip-path: none !important; transform: none !important; }
  #ficha:not(.aberto) { opacity: 0; pointer-events: none; }
  #ficha.aberto { opacity: 1; }
}




/* ── foto do profissional, do registro no conselho ──────────────────────────
   Três tamanhos para escolher, alternados pelo endereço: ?foto=a, b ou c.
   Sem escolha, vale o C. Quem não tem foto não mostra nada — silhueta genérica
   só destacaria a ausência. */
.ficha-foto { background: var(--superficie); object-fit: cover; object-position: center top; }

/* A — círculo de 96px ao lado do nome */
body.foto-a .ficha-foto { width:96px; height:96px; flex:0 0 96px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 2px 10px rgba(16,32,64,.14); margin-right:15px; }
@media (max-width:480px){ body.foto-a .ficha-foto{ width:78px;height:78px;flex-basis:78px;margin-right:12px } }

/* B — retrato de 132px centralizado acima do nome */
body.foto-b .ficha-topo { flex-direction:column; align-items:center; text-align:center;
  padding:22px 18px 16px; position:relative; }
body.foto-b .ficha-id { align-items:center; }
body.foto-b .ficha-foto { width:132px; height:132px; flex:0 0 132px; border-radius:50%;
  border:3px solid #fff; box-shadow:0 4px 18px rgba(16,32,64,.18); margin:0 0 12px; }
body.foto-b .ficha-fechar { position:absolute; top:14px; right:14px; }
@media (max-width:480px){ body.foto-b .ficha-foto{ width:112px;height:112px;flex-basis:112px } }

/* C — retrato quadrado de 112px à esquerda (padrão) */
body.foto-c .ficha-topo { align-items:center; padding:18px; }
body.foto-c .ficha-foto { width:112px; height:112px; flex:0 0 112px; border-radius:16px;
  box-shadow:0 3px 14px rgba(16,32,64,.16); margin-right:16px; }
@media (max-width:480px){ body.foto-c .ficha-foto{ width:92px;height:92px;flex-basis:92px;border-radius:14px } }

/* seletor flutuante, só neste protótipo */
.seletor-foto { position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:9999;
  display:flex; gap:0; background:rgba(12,22,44,.9); border-radius:999px; padding:4px;
  box-shadow:0 6px 22px rgba(0,0,0,.28); backdrop-filter:blur(8px); }
.seletor-foto a { color:#cbd5e6; text-decoration:none; font:600 12px/1 system-ui,sans-serif;
  padding:9px 15px; border-radius:999px; white-space:nowrap; }
.seletor-foto a.on { background:#fff; color:#0e2a5c; }