/* ============================================================
   Página do Lugar — experiência mobile do cidadão
   ============================================================ */

body {
  background:
    radial-gradient(900px 400px at 50% -8%, rgba(18, 104, 195, .18), transparent 60%),
    var(--pagina);
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

.tela {
  width: min(430px, 100%);
  min-height: 100vh;
  background: var(--pagina);
  box-shadow: 0 0 0 1px var(--borda), 0 20px 60px rgba(5, 36, 64, .18);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---------- Barra superior ---------- */
.barra {
  background: linear-gradient(150deg, var(--azul-700), var(--azul-950) 80%);
  color: #fff;
  padding: 14px 18px 74px;
  position: relative;
  overflow: hidden;
}
.barra::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 194, 14, .25), transparent 70%);
}
.barra-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.marca {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 14px;
}
.marca .logo {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--amarelo);
  color: var(--azul-950);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.marca small { display: block; font-size: 10.5px; font-weight: 500; opacity: .75; }
.voltar {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.14);
  padding: 7px 13px;
  border-radius: 999px;
  transition: background .12s ease;
}
.voltar:hover { background: rgba(255,255,255,.24); }

/* ---------- Cartão de identidade do lugar ---------- */
.conteudo {
  flex: 1;
  padding: 0 16px 30px;
  margin-top: -56px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cartao {
  background: var(--superficie);
  border-radius: var(--r-lg);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-1);
  padding: 18px;
  animation: surgir .45s ease both;
}

.identidade { text-align: center; padding-top: 22px; }
.identidade .emblema {
  width: 62px; height: 62px;
  margin: -49px auto 10px;
  border-radius: 20px;
  background: linear-gradient(150deg, var(--amarelo), #FFD75E);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 8px 20px rgba(224, 164, 0, .4);
  border: 3px solid #fff;
}
.identidade .voce-esta {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--azul-600);
}
.identidade h1 { font-size: 22px; margin-top: 5px; color: var(--azul-950); }
.identidade .endereco { margin-top: 5px; font-size: 13.5px; color: var(--tinta-2); }
.identidade .etiquetas {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
}

/* ---------- Ação primária ---------- */
.acao-primaria {
  width: 100%;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--azul-600), var(--azul-800));
  color: #fff;
  padding: 18px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 10px 26px rgba(14, 90, 167, .38);
  transition: transform .15s ease, box-shadow .15s ease;
  animation: surgir .45s ease .06s both;
}
.acao-primaria:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(14, 90, 167, .48); }
.acao-primaria .icone {
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
}
.acao-primaria .rotulo { font-size: 17px; font-weight: 700; }
.acao-primaria .detalhe { font-size: 12.5px; opacity: .82; margin-top: 3px; line-height: 1.35; }
.acao-primaria .seta { margin-left: auto; font-size: 20px; opacity: .8; }

/* ---------- Seções ---------- */
.secao-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.secao-cabecalho h2 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tinta-3);
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Estado e memória */
.protocolo-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
}
.protocolo-item + .protocolo-item { border-top: 1px dashed var(--borda); }
.protocolo-item .ponto {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.ponto--aberto   { background: var(--alerta-100); }
.ponto--agendado { background: var(--azul-100); }
.ponto--resolvido{ background: var(--ok-100); }
.protocolo-item .info { flex: 1; min-width: 0; }
.protocolo-item .categoria { font-size: 14px; font-weight: 700; color: var(--azul-950); }
.protocolo-item .detalhe { font-size: 12.5px; color: var(--tinta-2); margin-top: 2px; line-height: 1.4; }
.protocolo-item .meta { font-size: 11.5px; color: var(--tinta-3); margin-top: 4px; }
.memoria-vazia {
  text-align: center;
  padding: 8px 0 4px;
  font-size: 13.5px;
  color: var(--tinta-2);
  line-height: 1.5;
}

/* ---------- Blocos dinâmicos ---------- */
.bloco { animation: surgir .45s ease both; }
.bloco .fonte-bloco {
  font-size: 10.5px;
  color: var(--tinta-3);
  text-align: right;
  margin-top: 10px;
}

/* Alerta prioritário */
.bloco--alerta {
  background: linear-gradient(140deg, #B32B2B, #7E1D1D);
  color: #fff;
  border: none;
  box-shadow: 0 10px 24px rgba(179, 43, 43, .4);
}
.bloco--alerta .alerta-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.bloco--alerta .alerta-topo .pisca { animation: pulsar 1.6s infinite; }
.bloco--alerta h3 { margin-top: 8px; font-size: 16.5px; }
.bloco--alerta p { margin-top: 6px; font-size: 13px; line-height: 1.5; opacity: .92; }
.bloco--alerta .btn {
  margin-top: 12px;
  background: #fff;
  color: #7E1D1D;
  width: 100%;
  padding: 11px;
  font-size: 14px;
}

/* Banner de campanha */
.bloco--banner {
  background: linear-gradient(140deg, var(--azul-800), var(--azul-950));
  color: #fff;
  border: none;
  position: relative;
  overflow: hidden;
}
.bloco--banner::after {
  content: "💉";
  position: absolute;
  right: -8px; bottom: -14px;
  font-size: 84px;
  opacity: .16;
  transform: rotate(-12deg);
}
.bloco--banner .chip { background: var(--amarelo); color: var(--azul-950); }
.bloco--banner h3 { margin-top: 10px; font-size: 17px; }
.bloco--banner p { margin-top: 6px; font-size: 13px; line-height: 1.5; opacity: .88; max-width: 85%; }
.bloco--banner .btn {
  margin-top: 14px;
  background: var(--amarelo);
  color: var(--azul-950);
  padding: 11px 18px;
  font-size: 14px;
}

/* Lista de ônibus */
.onibus-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
}
.onibus-item + .onibus-item { border-top: 1px solid var(--grade); }
.onibus-item .linha {
  background: var(--azul-950);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  padding: 7px 11px;
  border-radius: 9px;
  min-width: 52px;
  text-align: center;
}
.onibus-item .destino { flex: 1; min-width: 0; }
.onibus-item .destino b { display: block; font-size: 14px; color: var(--azul-950); }
.onibus-item .destino span { font-size: 12px; color: var(--tinta-2); }
.onibus-item .chegada { text-align: right; }
.onibus-item .chegada b {
  font-size: 19px;
  color: var(--azul-700);
  font-variant-numeric: tabular-nums;
}
.onibus-item .chegada span { display: block; font-size: 10.5px; color: var(--tinta-3); }
.onibus-item .chegada.agora b { color: var(--ok-escuro); }
.aviso-desvio {
  background: var(--alerta-100);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #6B4A00;
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

/* Filas da USF */
.fila-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
}
.fila-item + .fila-item { border-top: 1px solid var(--grade); }
.fila-item .servico { flex: 1; font-size: 14px; font-weight: 600; color: var(--azul-950); }
.fila-item .servico small { display: block; font-weight: 500; font-size: 11.5px; color: var(--tinta-3); margin-top: 1px; }

/* Enquete */
.enquete-opcao {
  display: block;
  width: 100%;
  text-align: left;
  border: 1.5px solid var(--borda-forte);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--azul-950);
  margin-top: 8px;
  transition: border-color .12s ease, background .12s ease;
}
.enquete-opcao:hover { border-color: var(--azul-500); background: var(--azul-50); }
.enquete-resultado { margin-top: 10px; }
.enquete-barra { margin-top: 9px; }
.enquete-barra .rotulo {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  margin-bottom: 4px;
}
.enquete-barra .rotulo b { color: var(--azul-950); }
.enquete-barra .rotulo span { color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.enquete-barra .trilha {
  height: 10px;
  border-radius: 6px;
  background: var(--azul-100);
  overflow: hidden;
}
.enquete-barra .preenchimento {
  height: 100%;
  border-radius: 6px;
  background: var(--azul-500);
  transition: width .6s cubic-bezier(.2, .8, .2, 1);
}
.enquete-barra.vencedora .preenchimento { background: var(--azul-700); }

/* Avaliação por estrelas */
.estrelas { display: flex; gap: 6px; justify-content: center; padding: 6px 0 2px; }
.estrelas button {
  font-size: 30px;
  filter: grayscale(1) opacity(.45);
  transition: filter .1s ease, transform .1s ease;
}
.estrelas button:hover { transform: scale(1.15); }
.estrelas button.ativa { filter: none; }
.avaliacao-media {
  text-align: center;
  font-size: 12.5px;
  color: var(--tinta-2);
  margin-top: 8px;
}
.avaliacao-media b { color: var(--azul-950); font-size: 15px; }

/* Agenda */
.evento-item { display: flex; gap: 12px; padding: 10px 0; }
.evento-item + .evento-item { border-top: 1px solid var(--grade); }
.evento-item .data {
  flex-shrink: 0;
  width: 46px;
  border-radius: var(--r-sm);
  background: var(--azul-50);
  border: 1px solid var(--azul-100);
  text-align: center;
  padding: 6px 0;
}
.evento-item .data b { display: block; font-size: 17px; color: var(--azul-700); }
.evento-item .data span { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--tinta-3); }
.evento-item .info b { display: block; font-size: 13.5px; color: var(--azul-950); }
.evento-item .info span { font-size: 12px; color: var(--tinta-2); }

/* Lista simples (merenda, remédios, serviços) */
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: 13.5px;
  color: var(--tinta);
}
.lista-simples li + li { border-top: 1px solid var(--grade); }
.lista-simples .esq { flex: 1; }
.lista-simples small { color: var(--tinta-3); }

/* Rodapé de canais */
.canais-rodape {
  text-align: center;
  padding: 6px 0 2px;
}
.canais-rodape .titulo {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tinta-3);
}
.canais-rodape .opcoes {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}
.canal {
  flex: 1;
  max-width: 116px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  padding: 12px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta-2);
  transition: border-color .12s ease, transform .12s ease;
}
.canal:hover { border-color: var(--azul-400); transform: translateY(-2px); }
.canal .emoji { display: block; font-size: 21px; margin-bottom: 5px; }
.lgpd {
  margin-top: 16px;
  font-size: 11px;
  color: var(--tinta-3);
  line-height: 1.6;
}

/* ---------- Fluxo de reporte (folha modal) ---------- */
.veu {
  position: fixed;
  inset: 0;
  background: rgba(5, 36, 64, .55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.veu.aberto { opacity: 1; pointer-events: auto; }
.folha {
  width: min(430px, 100%);
  background: var(--superficie);
  border-radius: 24px 24px 0 0;
  padding: 14px 20px 26px;
  max-height: 88vh;
  overflow-y: auto;
  transform: translateY(40px);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.veu.aberto .folha { transform: translateY(0); }
.folha .alca {
  width: 44px; height: 5px;
  border-radius: 3px;
  background: var(--borda-forte);
  margin: 0 auto 16px;
}
.folha h2 { font-size: 19px; color: var(--azul-950); }
.folha .sub { font-size: 13px; color: var(--tinta-2); margin-top: 5px; line-height: 1.5; }
.folha .passo-indicador {
  display: flex;
  gap: 6px;
  margin: 16px 0;
}
.folha .passo-indicador span {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--grade);
}
.folha .passo-indicador span.feito { background: var(--azul-500); }

.grade-categorias {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.opcao-categoria {
  border: 1.5px solid var(--borda-forte);
  border-radius: var(--r-md);
  padding: 15px 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--azul-950);
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.opcao-categoria:hover { border-color: var(--azul-500); background: var(--azul-50); transform: translateY(-2px); }
.opcao-categoria .emoji { display: block; font-size: 26px; margin-bottom: 7px; }

.campo-foto {
  margin-top: 14px;
  border: 2px dashed var(--borda-forte);
  border-radius: var(--r-md);
  padding: 22px;
  text-align: center;
  font-size: 13px;
  color: var(--tinta-2);
  width: 100%;
  transition: border-color .12s ease, background .12s ease;
}
.campo-foto:hover { border-color: var(--azul-500); background: var(--azul-50); }
.campo-foto.com-foto { border-style: solid; border-color: var(--ok); background: var(--ok-100); color: var(--ok-escuro); font-weight: 600; }
.campo-foto .emoji { display: block; font-size: 26px; margin-bottom: 6px; }
.folha textarea {
  width: 100%;
  margin-top: 12px;
  border: 1.5px solid var(--borda-forte);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: 14px;
  resize: none;
  min-height: 74px;
}
.folha textarea:focus { outline: none; border-color: var(--azul-500); }
.folha .acoes {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.folha .acoes .btn { flex: 1; }

/* Confirmação */
.confirmacao { text-align: center; padding-top: 6px; }
.confirmacao .selo-ok {
  width: 74px; height: 74px;
  margin: 4px auto 14px;
  border-radius: 50%;
  background: var(--ok-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  animation: surgir .4s ease both;
}
.confirmacao .num-protocolo {
  margin: 14px auto 0;
  background: var(--azul-50);
  border: 1.5px dashed var(--azul-200);
  border-radius: var(--r-md);
  padding: 12px;
  max-width: 280px;
}
.confirmacao .num-protocolo small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tinta-3);
}
.confirmacao .num-protocolo b {
  font-size: 21px;
  color: var(--azul-700);
  letter-spacing: .03em;
}
.zap-optin {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #E9F9EE;
  border: 1px solid #C4EED2;
  border-radius: var(--r-md);
  padding: 13px 15px;
  text-align: left;
}
.zap-optin .texto { flex: 1; font-size: 12.5px; line-height: 1.45; color: #14532D; }
.zap-optin .texto b { display: block; font-size: 13.5px; }
.interruptor {
  position: relative;
  width: 46px; height: 26px;
  border-radius: 999px;
  background: var(--borda-forte);
  transition: background .15s ease;
  flex-shrink: 0;
}
.interruptor::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: left .15s ease;
}
.interruptor.ligado { background: #1FAF4B; }
.interruptor.ligado::after { left: 23px; }

/* Notificação estilo WhatsApp */
.notif-zap {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translate(-50%, -120%);
  width: min(400px, calc(100vw - 32px));
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--sombra-3);
  padding: 13px 15px;
  display: flex;
  gap: 11px;
  z-index: 200;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  border: 1px solid var(--borda);
}
.notif-zap.visivel { transform: translate(-50%, 0); }
.notif-zap .avatar {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #1FAF4B;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.notif-zap .corpo { flex: 1; min-width: 0; }
.notif-zap .corpo b { font-size: 13.5px; color: #111; }
.notif-zap .corpo p { font-size: 12.5px; color: #444; line-height: 1.45; margin-top: 2px; }
.notif-zap .hora { font-size: 10.5px; color: var(--tinta-3); flex-shrink: 0; }