/* Zelador — app cidadão (cívico, verde)
   ---------------------------------------------------------------------------
   PALETA EM DOIS GRUPOS (WCAG 2.1 AA / EN 301 549):

   - MARCA: cores para superfícies grandes e elementos decorativos. Mantêm-se
     como estavam — é a identidade do produto e a norma não exige contraste a
     áreas que não são texto nem controlo.
   - TEXTO/CONTROLO: versões escurecidas, para texto (4,5:1) e para os limites
     de componentes como campos de formulário (3:1).

   Medidos antes: 13 de 15 pares falhavam, incluindo o cinza --mut (2,99:1), o
   verde dos botões (4,36:1) e todas as etiquetas de estado. Os valores em
   comentário abaixo são os rácios verificados. */
:root{
  /* --- marca (superfícies, gradientes; não usar para texto pequeno) --- */
  --green:#17A673;--green2:#27B886;
  /* --- texto e controlos (verificados) --- */
  --green-deep:#0A7350;   /* 5,86 branco · 5,46 cream · 5,11 sand */
  --ink:#18342A;          /* 12,51 cream */
  --ink-soft:#4A5C53;     /* 7,13 branco */
  --mut:#5F7268;          /* 5,13 branco · 4,78 cream  (era #8A998F, 2,99) */
  --amber:#96580B;        /* 5,68 branco  (era #E8902B, 2,48) */
  --blue:#1A5FB4;         /* 6,29 branco  (era #2B7DE0, 4,11) */
  --red:#B3261E;          /* 6,54 branco  (era #D2544A, 4,11) */
  /* --- fundos e linhas --- */
  --cream:#F3F8F5;--sand:#E7F2EC;--card:#FFFFFF;
  --line:#DCEAE2;         /* separadores decorativos */
  --line-2:#748F80;       /* limite de campos/botões: 3:1  (era #C9DED3, 1,41) */
  --shadow:0 16px 38px -22px rgba(24,52,42,.35);
  --foco:#0A7350;         /* anel de foco */
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--cream);color:var(--ink);font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior-y:contain}
h1,h2,h3,h4,.pop{font-family:'Poppins','Inter',sans-serif;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{display:block;max-width:100%}
.hidden{display:none!important}

.app{max-width:560px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;position:relative}
.topbar{position:sticky;top:0;z-index:30;background:rgba(243,248,245,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:max(10px,env(safe-area-inset-top)) 16px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.topbar .brand{display:flex;align-items:center;gap:9px}
.topbar .brand img{height:28px}
.topbar .ent{font-family:'Poppins';font-weight:600;font-size:14px;line-height:1.1}
.topbar .ent small{display:block;font-family:'Inter';font-weight:400;font-size:11px;color:var(--mut)}
main{flex:1;padding:16px 16px 96px}
.view{display:none}.view.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;padding:6px 4px max(6px,env(safe-area-inset-bottom));max-width:560px;margin:0 auto}
.tabbar button{flex:1;background:none;border:none;color:var(--mut);font-size:10.5px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border-radius:12px}
.tabbar button .ic{font-size:20px;line-height:1}
.tabbar button.active{color:var(--green-deep)}

.vhead{margin-bottom:14px}
.vhead h2{font-size:22px;font-weight:800}
.vhead .sub{color:var(--mut);font-size:13.5px;margin-top:2px}
.kicker{font-family:'Poppins';font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep)}

.btn{font-family:'Poppins';font-weight:600;font-size:15px;padding:13px 18px;border-radius:13px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.18s}
.btn:active{transform:scale(.98)}
/* Botão sólido em vez de gradiente: o topo do gradiente antigo (#27B886) dava
   2,53:1 com o texto branco. */
.btn-green{background:var(--green-deep);color:#fff;box-shadow:0 12px 24px -14px rgba(10,115,80,.8)}
.btn-green:hover{background:#08633F}
.btn-ghost{background:#fff;border-color:var(--line-2);color:var(--ink)}
.btn-soft{background:var(--sand);color:var(--green-deep)}
.btn-block{width:100%}
.btn.lg{padding:17px;font-size:16px}
.btn:disabled{opacity:.5}

/* O gradiente do hero escureceu: tem texto branco de 14,5px por cima, que
   precisa de 4,5:1. Com o verde da marca (#27B886) dava 2,53:1. */
.hero-report{background:linear-gradient(150deg,var(--green-deep),#06563B);color:#fff;border-radius:22px;padding:24px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero-report h2{font-size:22px;font-weight:800;margin-bottom:6px}
.hero-report p{color:rgba(255,255,255,.92);font-size:14.5px;margin-bottom:16px;max-width:30ch}
.hero-report .btn-light{background:#fff;color:var(--green-deep);width:100%}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.section-t{font-family:'Poppins';font-weight:700;font-size:15px;margin:22px 2px 10px;display:flex;align-items:center;justify-content:space-between}
.section-t a{color:var(--green-deep);font-size:13px;font-weight:600}

/* report card / list item — é um <button> dentro de <li>, para funcionar com
   teclado e ser anunciado como controlo. As listas perdem os marcadores. */
.lista-limpa{list-style:none;margin:0;padding:0}
.rep{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px;width:100%;text-align:left;font:inherit;color:inherit}
button.rep{cursor:pointer}
button.rep:hover{border-color:var(--line-2);background:var(--cream)}
.rep .thumb{width:52px;height:52px;border-radius:12px;background:var(--sand);display:grid;place-items:center;font-size:24px;flex-shrink:0;overflow:hidden}
.rep .thumb img{width:100%;height:100%;object-fit:cover}
.rep .info{flex:1;min-width:0}
.rep .info .t{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep .info .s{font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Estado nunca só pela cor (WCAG 1.4.1). Além do texto ("Recebido", "Em
   análise", "Resolvido"), cada etiqueta ganha uma forma própria antes do texto
   e um contorno distinto — legível em monocromático e para daltónicos. */
.pill{font-family:'Poppins';font-size:11px;font-weight:700;padding:4px 10px;border-radius:99px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;border:1px solid currentColor}
.pill::before{content:"";width:8px;height:8px;flex:none;background:currentColor}
.pill.recebido{color:var(--amber);background:#FDF3E7}
.pill.recebido::before{border-radius:50%}                      /* círculo */
.pill.analise{color:var(--blue);background:#EAF1FC}
.pill.analise::before{border-radius:1px;transform:rotate(45deg)} /* losango */
.pill.resolvido{color:var(--green-deep);background:var(--sand)}
.pill.resolvido::before{clip-path:polygon(14% 47%,0 61%,43% 100%,100% 22%,86% 8%,40% 71%)} /* visto */
.empty{text-align:center;color:var(--mut);padding:38px 16px}.empty .e{font-size:40px;margin-bottom:8px}

/* map */
#homeMap,#repMap{width:100%;height:230px;border-radius:16px;border:1px solid var(--line);overflow:hidden;background:var(--sand)}
#repMap{height:260px}
.leaflet-container{font:inherit}

/* wizard */
.steps{display:flex;gap:6px;margin-bottom:16px}
.steps span{flex:1;height:5px;border-radius:99px;background:var(--line-2)}
.steps span.on{background:var(--green)}
.wlabel{font-family:'Poppins';font-weight:600;font-size:13px;color:var(--ink-soft);margin:14px 2px 8px}
.cats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cat{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:13px;text-align:left;font-weight:600;font-size:14px}
.cat .e{font-size:22px}
.cat.sel{background:var(--sand);border-color:var(--green);color:var(--green-deep)}
.photo-pick{border:2px dashed var(--line-2);border-radius:16px;padding:26px;text-align:center;color:var(--mut);background:#fff}
.photo-pick .e{font-size:34px;display:block;margin-bottom:6px}
.photo-prev{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.photo-prev img{width:100%;max-height:240px;object-fit:cover}
.photo-prev .x{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:50%;width:32px;height:32px;font-size:16px}
input,textarea{width:100%;background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:12px 13px;color:var(--ink);font-family:'Inter';font-size:15px;outline:none}
input:focus,textarea:focus{border-color:var(--green)}
textarea{resize:vertical;min-height:80px}
label.fld{display:block;margin-bottom:12px}
label.fld .l{font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;display:block}
.maphint{font-size:12.5px;color:var(--mut);margin-top:8px;text-align:center}
.wnav{display:flex;gap:10px;margin-top:18px}

/* detail timeline */
.detail .photo{width:100%;border-radius:16px;border:1px solid var(--line);margin-bottom:14px}
.tl{list-style:none;margin-top:8px}
.tl li{position:relative;padding:0 0 18px 28px;border-left:2px solid var(--line-2);margin-left:6px}
.tl li:last-child{border-left-color:transparent}
.tl li .dot{position:absolute;left:-9px;top:0;width:16px;height:16px;border-radius:50%;background:var(--line-2);border:3px solid var(--cream)}
.tl li.done .dot{background:var(--green)}
.tl li .st{font-family:'Poppins';font-weight:700;font-size:14px}
.tl li .nt{font-size:13px;color:var(--ink-soft)}
.tl li .dt{font-size:11.5px;color:var(--mut)}

/* sheet + toast */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(24,52,42,.45);display:none;align-items:flex-end;justify-content:center}
.scrim.open{display:flex}
.sheet{background:var(--cream);width:100%;max-width:560px;border-radius:22px 22px 0 0;max-height:92vh;overflow-y:auto;padding:8px 18px max(18px,env(safe-area-inset-bottom));animation:up .28s cubic-bezier(.16,.8,.2,1)}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet .grip{width:40px;height:4px;border-radius:2px;background:var(--line-2);margin:8px auto 12px}
.sheet h3{font-size:19px;font-weight:800;margin-bottom:4px}
.toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%) translateY(20px);z-index:80;background:var(--ink);color:#fff;font-weight:600;font-size:14px;padding:12px 18px;border-radius:12px;opacity:0;transition:.3s;pointer-events:none;max-width:90%;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.pitch{background:var(--ink);color:#fff;text-align:center;font-size:12px;padding:7px 12px}
.pitch b{color:#9be9c8}

/* ==========================================================================
   ACESSIBILIDADE (WCAG 2.1 AA / EN 301 549 — DL 83/2018)
   ========================================================================== */

/* --- Foco visível -------------------------------------------------------
   :focus-visible em vez de :focus — o anel aparece a quem navega por teclado
   e não a quem clica com o rato. Dois anéis (verde por dentro, branco por
   fora) para se ver tanto sobre fundo claro como sobre o verde dos botões. */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--foco);
  outline-offset:2px;
  border-radius:6px;
  box-shadow:0 0 0 5px #fff, 0 0 0 8px rgba(10,115,80,.28);
}
/* Sobre fundo escuro (hero, tabbar ativa) o anel inverte-se. */
.hero-report :focus-visible,.pitch :focus-visible{
  outline-color:#fff;
  box-shadow:0 0 0 5px rgba(0,0,0,.45);
}
/* Nunca remover o contorno sem pôr outro. */
:focus:not(:focus-visible){outline:none}

/* --- Saltar para o conteúdo ---------------------------------------------
   Primeiro elemento focável da página. Fica fora do ecrã até receber foco,
   para quem navega por teclado não ter de passar pela navegação toda. */
.skip-link{
  position:absolute;left:8px;top:-100px;z-index:200;
  background:var(--ink);color:#fff;font-weight:700;font-size:14px;
  padding:12px 18px;border-radius:0 0 12px 12px;
  transition:top .15s ease;
}
.skip-link:focus{top:0}

/* --- Só para leitores de ecrã -------------------------------------------
   Texto que não se vê mas é anunciado (ex.: o nome de um botão que no ecrã
   é só um ícone). Não usar display:none — isso esconde-o também deles. */
.sr-apenas{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --- Alvos de toque -----------------------------------------------------
   WCAG 2.5.5: mínimo 44x44 CSS px nos controlos. */
.tabbar button,.btn,.chip,.cat,.photo-prev .x{min-height:44px}
.tabbar button{min-width:44px}

/* --- Movimento reduzido -------------------------------------------------
   Quem pediu menos movimento no sistema não leva animações. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .view.active{animation:none}
  .sheet{animation:none}
  .btn:active{transform:none}
}

/* --- Erros de formulário ------------------------------------------------ */
.erro-campo{
  display:flex;align-items:flex-start;gap:6px;
  color:var(--red);font-size:13px;font-weight:600;margin-top:6px;
}
.erro-campo::before{content:"⚠";flex:none;font-size:14px;line-height:1.2}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{
  border-color:var(--red);border-width:2px;
}

/* --- Alternativa ao mapa ------------------------------------------------ */
.alt-mapa{
  border:1px solid var(--line-2);border-radius:14px;padding:14px;
  background:#fff;margin-top:10px;
}
.alt-mapa .t{font-family:'Poppins';font-weight:700;font-size:14px;margin-bottom:4px}
.alt-mapa .d{font-size:13px;color:var(--ink-soft);margin-bottom:10px}

/* O Leaflet põe os seus controlos com tabindex; garantir que se veem. */
.leaflet-container a:focus-visible,.leaflet-control a:focus-visible{
  outline:3px solid var(--foco);outline-offset:1px;
}

/* --- Formulários -------------------------------------------------------- */
fieldset.sem-moldura{border:0;padding:0;margin:0 0 18px}
fieldset.sem-moldura legend{padding:0}
.obrig{font-weight:400;color:var(--ink-soft);font-size:.9em}
.ajuda{font-size:12.5px;color:var(--ink-soft);margin-top:5px;line-height:1.45}
.estado-loc{font-size:13px;color:var(--green-deep);font-weight:600;margin-top:10px}
.fld{display:block;margin-bottom:14px}
.fld .l{font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;display:block}

/* O mapa passou a ser opcional, dentro de um <details> — nativo, acessível
   por teclado e anunciado como "expandir/contrair". */
.det-mapa{margin-top:14px;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:#fff}
.det-mapa>summary{padding:13px 15px;font-family:'Poppins';font-weight:600;font-size:14px;cursor:pointer;min-height:44px;display:flex;align-items:center}
.det-mapa>summary:hover{background:var(--cream)}
.det-mapa[open]>summary{border-bottom:1px solid var(--line)}
.det-mapa>div,.det-mapa>p{margin:12px}

/* --- Contador nos separadores ------------------------------------------- */
.tabbar button{position:relative}
.tabbar .badge{
  position:absolute;top:2px;left:calc(50% + 8px);
  background:var(--red);color:#fff;font-size:10px;font-weight:700;
  min-width:17px;height:17px;border-radius:99px;padding:0 5px;
  display:grid;place-items:center;line-height:1;
}

/* --- Consentimento (RGPD) ----------------------------------------------- */
.consent{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:13px}
.consent input[type=checkbox]{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--green-deep)}
.consent label{font-size:14px;line-height:1.45;cursor:pointer}
.consent a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px;font-weight:600}
.consent:has(input[aria-invalid="true"]){border-color:var(--red);border-width:2px}
.foto-guardada{font-size:13px;color:var(--ink-soft);background:var(--sand);border-radius:10px;padding:10px 12px;margin-bottom:12px}

/* --- Rodapé legal ------------------------------------------------------- */
.rodape{
  display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:center;
  padding:16px 16px calc(96px + env(safe-area-inset-bottom));
  font-size:12.5px;color:var(--mut);text-align:center;
}
.rodape a{color:var(--green-deep);text-decoration:underline;text-underline-offset:2px}
.rodape .marca{flex-basis:100%}
/* No painel não há tabbar fixa a tapar o fundo. */
body:has(.ph-head) .rodape{padding-bottom:24px}

/* --- Cabeçalhos gerados por JS ------------------------------------------ */
.vhead h1{font-size:22px;font-weight:800}
h2.section-t{font-family:'Poppins';font-weight:700;font-size:15px}
.sheet h2{font-size:19px;font-weight:800;margin-bottom:4px}
.sheet h3.section-t{font-size:15px}

/* ==========================================================================
   FASE 6 — painel: estatísticas, auditoria, avisos
   ========================================================================== */
.barras{display:flex;flex-direction:column;gap:8px}
.barra-linha{display:grid;grid-template-columns:1fr 2fr auto;gap:10px;align-items:center;font-size:13px}
.barra-linha .rot{color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra-linha .barra{background:var(--sand);border-radius:99px;height:12px;overflow:hidden}
.barra-linha .barra>span{display:block;height:100%;background:var(--green-deep);border-radius:99px}
.barra-linha .num{font-weight:700;font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}

.aud{display:grid;gap:2px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.aud .q{font-weight:700}
.aud .o{color:var(--ink-soft)}
.aud .nt{color:var(--ink-soft);font-style:italic}
.aud .dt{color:var(--mut);font-size:12px}

/* Aviso de participações por enviar (fila offline). Amarelo, não verde: não
   está feito, está à espera — e o cidadão tem de perceber a diferença. */
.aviso-pendente{
  display:block;background:#FDF3E7;border:1px solid var(--amber);color:#6B3F08;
  border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:13.5px;line-height:1.45;
}