/* SERVIÇOS AO CIDADÃO — a linguagem visual das telas públicas.
 *
 * POR QUE UM ARQUIVO SÓ: eram quatro HTML com o mesmo CSS copiado. Quatro cópias de uma
 * paleta divergem na primeira mudança, e o cidadão passa a ver duas casas diferentes no
 * mesmo endereço. Aqui muda num lugar.
 *
 * O QUE ESTAS TELAS SÃO: a única parte do SIGSP feita para quem NÃO é funcionário. Quem
 * chega está de pé, no celular, muitas vezes sem familiaridade com sistema, e às vezes
 * ansioso — é um resultado de exame. Por isso alvo de toque grande, tipografia generosa e
 * hierarquia óbvia. "Profissional" aqui é parecer serviço público sério, não parecer app.
 *
 * A FONTE vem do Google como no resto do produto (login.html, index.html), com pilha de
 * sistema atrás: se a rede do posto não trouxer a Inter, a página abre igual, só com outra
 * letra. É a única requisição externa, e ela é opcional por construção.
 */

:root{
  /* PALETA DO MANUAL (IDENTIDADE/MARCA - HTML), com os nomes e os USOS que ele define.
   *
   * A área do cidadão é VERDE-LIDERADA por decisão do Bruno: o manual chama a secundária de
   * "Verde saúde" e o azul institucional é a cara do sistema clínico. Separar as duas ajuda
   * quem chega — o cidadão vê um serviço de saúde, não a intranet da prefeitura.
   * Cada tom abaixo está no papel que o manual manda; nada foi escolhido por gosto. */
  --azul-sigsp:#1a56db;      /* ação principal, links, botões */
  --azul-profundo:#1e3a8a;   /* sidebar, cabeçalhos, hover */
  --azul-noturno:#172554;    /* fundos escuros, rodapé, gradiente */
  --azul-claro:#e8f0fe;      /* tints, fundos de destaque, badges */

  --verde-saude:#0e7c5b;     /* sucesso, confirmações, indicadores positivos */
  --verde-vital:#10b981;     /* acento da marca e nós do símbolo */
  --verde-claro:#34d399;     /* gradiente verde, realces sobre escuro */
  --verde-tint:#d1fae5;      /* fundos de status sucesso */

  --atencao:#b7791f; --erro:#c53030;                    /* funcionais do manual */
  --atencao-tint:#fef3c7; --erro-tint:#fdecec;          /* tints derivados: o manual não os dá */

  --n900:#0f172a;            /* texto */
  --n600:#475569;            /* texto suave */
  --n200:#e2e8f0;            /* borda */
  --n50:#f8fafc;             /* fundo */
  --n800:#1e293b; --n700:#334155; --n500:#64748b; --n400:#94a3b8;
  --n300:#cbd5e1; --n100:#f1f5f9;

  --raio:14px; --raio-g:18px;
  --sombra:0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.07);
  --sombra-alta:0 2px 4px rgba(15,23,42,.05), 0 18px 40px rgba(15,23,42,.13);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--n50); color:var(--n900); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;
}

/* ============ CABEÇALHO ============ */
.topo{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(150deg,#075440 0%,var(--verde-saude) 55%,#0b9b6f 100%);
  /* NÃO ENCOLHER — e esta linha é um conserto, não um enfeite.
   *
   * O `body` é `display:flex; flex-direction:column` com `height:100%` vindo de
   * `html,body{height:100%}`: altura DEFINIDA, não apenas mínima. Num contêiner assim, todo
   * filho encolhe por padrão (`flex-shrink:1`) quando a soma do conteúdo passa da altura da
   * janela — e o cabeçalho, que tem `overflow:hidden`, encolhia calado. No hub, ele ia de
   * 208px para ~74px, a faixa verde acabava antes do título e os cartões (que sobem 38px de
   * propósito, ver `.servicos`) passavam por cima de "Serviços ao cidadão".
   *
   * O sintoma dependia da altura da janela — por isso passou: numa janela alta a soma não
   * estoura e nada encolhe. Achado em 10/08/2026, medindo as caixas na página em produção.
   * O mesmo vale para o rodapé, logo abaixo. */
  flex-shrink:0;
}
/* o mesmo brilho radial do painel do login: dá profundidade sem custar imagem */
.topo::before{
  content:""; position:absolute; right:-140px; top:-160px; width:480px; height:480px;
  background:radial-gradient(circle,rgba(52,211,153,.26),transparent 65%); pointer-events:none;
}
/* faixa de acento no rodapé do cabeçalho — a assinatura de cor da marca */
.topo::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--verde-claro),var(--verde-vital) 55%,transparent);
}
.topo-interno{position:relative; z-index:1; width:100%; max-width:820px; margin:0 auto; padding:20px}

.marca{display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.4px;
  font-size:19px; color:#fff; text-decoration:none}
.marca svg{width:34px; height:34px; border-radius:8px; flex-shrink:0}
.marca .sp{color:var(--verde-claro)}

/* cabeçalho do hub: marca centralizada + título grande */
.topo.capa{text-align:center}
.topo.capa .topo-interno{padding:34px 20px 46px}
.topo.capa .marca{margin-bottom:22px}
.topo.capa h1{font-size:clamp(24px,5vw,31px); font-weight:800; letter-spacing:-.9px; line-height:1.15}
.topo.capa p{font-size:clamp(15px,2.6vw,17px); color:#c9efe1; margin-top:10px}

/* cabeçalho interno: voltar · título · marca */
.topo.barra .topo-interno{display:flex; align-items:center; gap:14px; padding:16px 20px}
.topo.barra h1{font-size:17px; font-weight:700; letter-spacing:-.3px; margin:0 auto}
.voltar{display:inline-flex; align-items:center; gap:6px; color:#c9efe1; text-decoration:none;
  font-size:14px; font-weight:500; padding:6px 10px; margin-left:-10px; border-radius:8px; white-space:nowrap}
.voltar:hover{color:#fff; background:rgba(255,255,255,.10)}
@media(max-width:560px){ .topo.barra h1{display:none} }

main{flex:1; width:100%; max-width:820px; margin:0 auto; padding:24px 18px 48px}

/* ============ CARTÕES DE SERVIÇO (hub) ============ */
.servicos{display:grid; grid-template-columns:1fr; gap:16px; margin-top:-38px}
@media(min-width:640px){ .servicos{grid-template-columns:1fr 1fr} }

.servico{
  position:relative; display:flex; align-items:flex-start; gap:16px; overflow:hidden;
  background:#fff; border:1px solid var(--n200); border-radius:var(--raio-g); padding:22px;
  text-decoration:none; color:inherit; box-shadow:var(--sombra);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.servico::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--cor,var(--verde-saude)); opacity:.9;
}
.servico:hover,.servico:focus-visible{
  transform:translateY(-3px); box-shadow:var(--sombra-alta);
  border-color:var(--cor,var(--verde-saude)); outline:none;
}
.servico .icone{
  width:60px; height:60px; border-radius:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--cor-fundo,var(--verde-tint));
}
.servico .icone svg{width:30px; height:30px; fill:none; stroke:var(--cor,var(--verde-saude));
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.servico h2{font-size:17.5px; font-weight:700; letter-spacing:-.3px; margin-bottom:3px}
.servico p{font-size:14.5px; color:var(--n600); line-height:1.5}
.servico .seta{margin-left:auto; align-self:center; color:var(--n300); flex-shrink:0}
.servico:hover .seta{color:var(--cor,var(--verde-saude))}
.servico .seta svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}

/* CORES POR SERVIÇO — todas do manual, e agora da secundária "Verde saúde".
 *
 * Cheguei a inventar um roxo e um ciano só para diferenciar os quatro cartões. Diferenciar é
 * legítimo; inventar cor não é. E, olhando de novo, a diferenciação não precisa ser de MATIZ:
 * o ícone e o título já dizem qual serviço é. Manter os quatro na família verde dá o que
 * cartão colorido não dava — a área do cidadão parecendo uma coisa só.
 *
 * Verde Saúde nos três primeiros (o manual: "indicadores positivos") e Verde Vital no de
 * vacina, que é o acento da marca. Fundo do ícone em Verde Tint, que o manual reserva para
 * fundo de status positivo. */
.s-alvara{--cor:var(--verde-saude); --cor-fundo:var(--verde-tint)}
.s-exame{--cor:var(--verde-saude); --cor-fundo:var(--verde-tint)}
.s-consulta{--cor:var(--verde-saude); --cor-fundo:var(--verde-tint)}
.s-vacina{--cor:var(--verde-vital); --cor-fundo:var(--verde-tint)}              /* verde vivo da marca */
.s-unidade{--cor:var(--verde-saude); --cor-fundo:var(--verde-tint)}

/* ============ CARTÃO / FORMULÁRIO ============ */
.painel{background:#fff; border:1px solid var(--n200); border-radius:var(--raio-g);
  padding:26px; box-shadow:var(--sombra)}
.painel h2{font-size:19px; font-weight:700; letter-spacing:-.3px; margin-bottom:6px}
.painel .ajuda{font-size:14.5px; color:var(--n600); margin-bottom:22px}

label{display:block; font-size:14px; font-weight:600; color:var(--n700); margin-bottom:7px}
input{width:100%; padding:14px 15px; border:1.5px solid var(--n300); border-radius:11px;
  font-family:inherit; font-size:16.5px; color:var(--n900); background:#fff;
  transition:border-color .12s, box-shadow .12s}
input:focus{outline:none; border-color:var(--verde-saude); box-shadow:0 0 0 4px var(--verde-tint)}
input::placeholder{color:var(--n400)}
.campo{margin-bottom:18px}
.dica{font-size:12.5px; color:var(--n600); margin-top:6px}

.botao{width:100%; padding:16px; border:none; border-radius:11px; cursor:pointer;
  background:linear-gradient(180deg,#12946c,var(--verde-saude));
  color:#fff; font-family:inherit; font-size:16.5px; font-weight:700; letter-spacing:-.2px;
  box-shadow:0 2px 6px rgba(14,124,91,.30); transition:filter .12s, transform .06s}
.botao:hover{filter:brightness(1.07)}
.botao:active{transform:translateY(1px)}
.botao:disabled{opacity:.6; cursor:progress; filter:none}

.erro{display:none; background:var(--erro-tint); color:var(--erro); border:1px solid #f2b8b8;
  border-radius:11px; padding:14px 16px; font-size:14.5px; margin-bottom:18px}
.erro.ver{display:flex; gap:10px; align-items:flex-start}

.rodape-nota{margin-top:18px; font-size:13.5px; color:var(--n600); line-height:1.6}

/* ============ RESULTADO ============ */
.faixa{border-radius:var(--raio-g); padding:20px 22px; margin-bottom:16px; border:1.5px solid}
.faixa .titulo{font-size:clamp(19px,4vw,25px); font-weight:800; letter-spacing:-.6px; line-height:1.2}
.faixa .sub{font-size:14.5px; color:var(--n700); margin-top:6px; font-weight:500}
.faixa.ok{background:var(--verde-tint); border-color:#8fdcc0}
.faixa.ok .titulo{color:var(--verde-saude)}
.faixa.atencao{background:var(--atencao-tint); border-color:#fde68a}
.faixa.atencao .titulo{color:var(--atencao)}

.bloco{background:#fff; border:1px solid var(--n200); border-radius:var(--raio-g);
  padding:6px 22px; margin-bottom:14px; box-shadow:var(--sombra)}
.bloco.texto{padding:20px 22px}
.bloco h3{font-size:11.5px; text-transform:uppercase; letter-spacing:1.1px;
  color:var(--n600); font-weight:700; margin-bottom:9px}
.bloco p{font-size:16px; white-space:pre-wrap; line-height:1.6}
.linha{display:flex; justify-content:space-between; gap:16px; padding:13px 0;
  border-bottom:1px solid var(--n100); font-size:15.5px}
.linha:last-child{border-bottom:none}
.linha .r{color:var(--n600); flex-shrink:0}
.linha .v{font-weight:700; text-align:right; color:var(--n900)}
.assina{text-align:right; font-size:14px; color:var(--n700); margin-top:10px;
  padding-top:12px; border-top:1px solid var(--n100)}

.acoes{display:flex; gap:12px; margin-top:6px}
.acoes button{flex:1; padding:14px; border-radius:11px; cursor:pointer;
  background:#fff; color:var(--verde-saude); border:1.5px solid var(--n300);
  font-family:inherit; font-size:15.5px; font-weight:700}
.acoes button:hover{background:var(--n50); border-color:var(--verde-saude)}

.aviso-caixa{margin-top:26px; background:#fff; border:1px solid var(--n200);
  border-left:4px solid var(--verde-vital); border-radius:12px;
  padding:16px 18px; font-size:14px; color:var(--n700); line-height:1.6; box-shadow:var(--sombra)}

.vazio{background:#fff; border:1px dashed var(--n300); border-radius:var(--raio-g);
  padding:30px 22px; text-align:center; color:var(--n600); line-height:1.7}

/* ============ UNIDADES E HORÁRIOS ============ */
/* A única tela do cidadão que LISTA (as outras respondem a um código). Por isso ela tem
 * coisas que nenhuma das outras precisou: escolha de município, filtro e um selo de estado
 * que muda ao longo do dia. */

/* escolha do município — alvo grande, um por linha: é lido de pé, no celular */
.mun-lista{display:grid; gap:10px; margin-top:16px}
.mun{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--n200);
  border-radius:12px; padding:16px 18px; text-decoration:none; color:inherit;
  box-shadow:var(--sombra); transition:border-color .12s, transform .12s}
.mun:hover{border-color:var(--verde-saude); transform:translateY(-2px)}
.mun b{font-size:16px; font-weight:700}
.mun .uf{font-size:12px; font-weight:700; color:var(--verde-saude); background:var(--verde-tint);
  border-radius:6px; padding:2px 7px}
.mun .qtd{margin-left:auto; font-size:13px; color:var(--n600)}

.filtro{margin:18px 0 14px}
.filtro input{padding:13px 15px; font-size:15.5px}

/* cartão da unidade */
.unidade{background:#fff; border:1px solid var(--n200); border-radius:var(--raio-g);
  padding:20px 22px; margin-bottom:14px; box-shadow:var(--sombra)}
.unidade .cabeca{display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap}
.unidade h2{font-size:17.5px; font-weight:700; letter-spacing:-.3px; line-height:1.3}
.unidade .tipo{font-size:12px; font-weight:600; color:var(--n600); text-transform:uppercase;
  letter-spacing:.6px; margin-top:2px}

/* O SELO DE ESTADO. Verde e âmbar do manual, mas a cor NÃO é a única marca: o texto diz
 * "Aberto agora" ou "Fechado" por extenso, porque daltonismo é comum e a informação é a
 * razão de a pessoa estar na página. */
.selo{margin-left:auto; flex-shrink:0; font-size:13px; font-weight:700; border-radius:999px;
  padding:6px 13px; border:1px solid; white-space:nowrap}
.selo.aberto{background:var(--verde-tint); color:var(--verde-saude); border-color:#8fdcc0}
.selo.fechado{background:var(--atencao-tint); color:var(--atencao); border-color:#fde68a}
.selo.mudo{background:var(--n100); color:var(--n600); border-color:var(--n200)}

.unidade .dados{margin-top:14px; display:grid; gap:8px; font-size:15px; color:var(--n700)}
.unidade .dados div{display:flex; gap:9px; align-items:flex-start}
.unidade .dados svg{width:17px; height:17px; flex-shrink:0; margin-top:3px; fill:none;
  stroke:var(--n500); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.unidade .dados a{color:var(--azul-sigsp); text-decoration:none; font-weight:600}
.unidade .dados a:hover{text-decoration:underline}

/* A semana fica dentro de <details>: fechada, o cartão responde "está aberto?" numa olhada;
 * aberta, responde "e amanhã?". Sem o recolhimento, sete linhas por unidade empurrariam a
 * terceira UBS para fora da tela num município de rede grande. */
.unidade details{margin-top:14px; border-top:1px solid var(--n100); padding-top:12px}
.unidade summary{cursor:pointer; font-size:14px; font-weight:600; color:var(--verde-saude);
  list-style:none; display:flex; align-items:center; gap:7px}
.unidade summary::-webkit-details-marker{display:none}
.unidade summary::after{content:""; width:7px; height:7px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-3px; transition:transform .15s}
.unidade details[open] summary::after{transform:rotate(-135deg); margin-top:2px}
.semana{margin-top:12px; display:grid; gap:0}
.semana .dia{display:flex; justify-content:space-between; gap:14px; padding:8px 0;
  border-bottom:1px solid var(--n100); font-size:14.5px}
.semana .dia:last-child{border-bottom:none}
.semana .dia.hoje{font-weight:700}
.semana .dia.hoje .r::after{content:" · hoje"; color:var(--verde-saude); font-weight:600}
.semana .dia .r{color:var(--n600)}
.semana .dia.hoje .r{color:var(--n900)}
.semana .fechado{color:var(--n500)}
.obs{margin-top:12px; background:var(--n50); border-radius:10px; padding:11px 13px;
  font-size:14px; color:var(--n700); line-height:1.55}

@media print{
  .filtro,.unidade details summary{display:none!important}
  .unidade details[open] .semana,.unidade details{display:block}
  .unidade{break-inside:avoid; box-shadow:none}
}

/* ============ RESULTADO DE LABORATÓRIO ============ */
/* Uma linha por analito, e NÃO uma <table>: no celular, tabela de quatro colunas ou estoura
 * a largura ou encolhe a fonte até o ilegível. Aqui cada analito é um bloco que empilha —
 * nome em cima, valor grande, referência embaixo — e continua legível na largura de um
 * telefone segurado com uma mão. */
.analitos{background:#fff; border:1px solid var(--n200); border-radius:var(--raio-g);
  box-shadow:var(--sombra); overflow:hidden; margin-bottom:16px}
.analito{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:14px 18px; border-bottom:1px solid var(--n100)}
.analito:last-child{border-bottom:none}
.analito .nome{font-size:15px; color:var(--n700); flex:1; min-width:120px}
.analito .valor{font-size:17px; font-weight:700; color:var(--n900); white-space:nowrap}
.analito .ref{width:100%; font-size:13px; color:var(--n500)}

/* A MARCAÇÃO DE FORA DA FAIXA NÃO É SÓ COR. Vem a palavra ("alto"/"baixo") e a seta, pelo
 * mesmo motivo do selo de aberto/fechado: daltonismo é comum, e esta é justamente a linha
 * que a pessoa vai procurar. O destaque é de conferência, não diagnóstico — o aviso do
 * rodapé diz isso por extenso. */
.analito .marca-sit{font-size:12px; font-weight:700; border-radius:999px; padding:3px 9px;
  border:1px solid; white-space:nowrap}
.analito .marca-sit.alto{background:var(--atencao-tint); color:var(--atencao); border-color:#fde68a}
.analito .marca-sit.baixo{background:var(--atencao-tint); color:var(--atencao); border-color:#fde68a}
.analito.fora .valor{color:var(--atencao)}

/* ============ RODAPÉ ============ */
/* flex-shrink:0 pelo mesmo motivo do .topo: sem ele, o rodapé é achatado quando a página
 * passa da altura da janela, e a linha de baixo fica cortada ao meio. */
.rodape{background:#fff; border-top:1px solid var(--n200); padding:22px 18px; text-align:center;
  flex-shrink:0}
.rodape .linha1{font-size:13.5px; color:var(--n600); font-weight:600}
.rodape .linha2{font-size:12.5px; color:var(--n500); margin-top:4px}

/* ============ IMPRESSÃO ============ */
@media print{
  .topo,.rodape,.acoes,.rodape-nota,.aviso-caixa,#form-card{display:none!important}
  body{background:#fff}
  .bloco,.faixa,.painel{box-shadow:none; border-color:#cbd5e1; break-inside:avoid}
  main{padding:0; max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .servico:hover{transform:none}
}