/* urgenciasagora.pt
   Direção editorial-clínica. Porcelana quente, serif Fraunces para os números
   e nomes, acento ameixa, e a banda de triagem como assinatura. Nada de
   monospace, ponto "em directo", cruz genérica ou terracota — o Trânsito Agora
   é família, não gémeo. */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root{
  --paper:#EDEEE8; --paper-2:#E4E6DE;
  --card:#F9FAF5; --card-2:#F1F2EC; --well:#E8EAE2;
  --ink:#211F1A; --ink-2:#4C4842; --muted:#68625A; --faint:#767061;
  --line:#DBDCD2; --line-2:#E6E7DE;
  --accent:#7C3B62; --accent-2:#652E4F; --accent-wash:#F0E3EC;

  --vermelho:#C8362C; --laranja:#C56A12; --amarelo:#B98A00; --verde:#2C864B; --azul:#2A5FB0;
  --vermelho-w:#F6E2DF; --verde-w:#E0EFE4;

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --shadow:0 1px 1px rgb(33 31 26 / .03), 0 10px 30px -14px rgb(33 31 26 / .16);
  --shadow-lg:0 2px 4px rgb(33 31 26 / .04), 0 30px 60px -26px rgb(33 31 26 / .26);
  --ring:0 0 0 3px rgb(124 59 98 / .30);
  --grain:.03;

  --coluna:600px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#181319; --paper-2:#120E13;
  --card:#221B24; --card-2:#1B1420; --well:#2A2130;
  --ink:#F1EBE6; --ink-2:#CFC6C4; --muted:#A398A0; --faint:#8B8290;
  --line:#342A38; --line-2:#2A2230;
  --accent:#D98FB8; --accent-2:#E7A9C9; --accent-wash:#2C1E29;
  --vermelho:#F0776B; --laranja:#EA9A4A; --amarelo:#DCB646; --verde:#54C079; --azul:#6FA0EE;
  --vermelho-w:#2E1A19; --verde-w:#122619;
  --shadow:0 1px 2px rgb(0 0 0 / .4), 0 18px 46px -20px rgb(0 0 0 / .7);
  --shadow-lg:0 2px 6px rgb(0 0 0 / .5), 0 44px 90px -34px rgb(0 0 0 / .9);
  --ring:0 0 0 3px rgb(217 143 184 / .34);
  --grain:.05;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#181319; --paper-2:#120E13;
  --card:#221B24; --card-2:#1B1420; --well:#2A2130;
  --ink:#F1EBE6; --ink-2:#CFC6C4; --muted:#A398A0; --faint:#8B8290;
  --line:#342A38; --line-2:#2A2230;
  --accent:#D98FB8; --accent-2:#E7A9C9; --accent-wash:#2C1E29;
  --vermelho:#F0776B; --laranja:#EA9A4A; --amarelo:#DCB646; --verde:#54C079; --azul:#6FA0EE;
  --vermelho-w:#2E1A19; --verde-w:#122619;
  --shadow:0 1px 2px rgb(0 0 0 / .4), 0 18px 46px -20px rgb(0 0 0 / .7);
  --shadow-lg:0 2px 6px rgb(0 0 0 / .5), 0 44px 90px -34px rgb(0 0 0 / .9);
  --ring:0 0 0 3px rgb(217 143 184 / .34);
  --grain:.05;
}

/* ── Base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 16.5px/1.55 var(--sans);
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
  position:relative;
}
body::before{ /* grão de papel, táctil e não um brilho */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--accent-wash); color:var(--accent)}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0; list-style:none}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:10px}

.oculto{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.wrap{max-width:var(--coluna); margin:0 auto; padding:0 20px 80px; position:relative; z-index:1}


/* ── Saltar para o conteúdo ─────────────────────────────────────────── */
.pular{
  position:fixed; left:12px; top:-60px; z-index:100;
  background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:10px;
  font-weight:600; font-size:14px; text-decoration:none; transition:top .15s ease;
}
.pular:focus{top:12px; outline:none; box-shadow:var(--ring)}
#conteudo{display:block; height:0}

/* ── Masthead ───────────────────────────────────────────────────────── */
.mast{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 2px 18px; border-bottom:1px solid var(--line); margin-bottom:26px;
}
.wordmark{display:flex; align-items:center; gap:11px}
.wordmark svg{display:block; height:34px; width:auto; flex:none}
.wordmark .w{font-family:var(--serif); font-optical-sizing:auto; line-height:1; letter-spacing:-.01em; font-size:22px}
.wordmark .w .a{font-style:italic; font-weight:400}
.wordmark .w .b{font-weight:600}
.toggle{border:1px solid var(--line); background:var(--card); width:36px;height:36px;border-radius:10px; display:inline-grid; place-items:center; cursor:pointer; color:var(--muted)}
.toggle:hover{color:var(--ink)}
.toggle svg{width:17px;height:17px}
.toggle .sun{display:none}
:root[data-theme="dark"] .toggle .sun{display:block}
:root[data-theme="dark"] .toggle .moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .toggle .sun{display:block}
  :root:not([data-theme="light"]) .toggle .moon{display:none}
}

.eyebrow{font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.rotulo{font-size:12.5px; font-weight:500; color:var(--muted)}

main{display:flex; flex-direction:column; gap:34px}


/* ── Finder: procurar + perto de mim ────────────────────────────────── */
.finder{position:relative}
.busca{
  display:flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:6px 6px 6px 14px; box-shadow:var(--shadow);
}
.busca:focus-within{border-color:var(--accent); box-shadow:var(--shadow), var(--ring)}
.busca__ic{width:19px; height:19px; color:var(--muted); flex:none}
.busca__in{
  flex:1; min-width:0; border:0; background:transparent; color:var(--ink);
  font:500 16.5px var(--sans); padding:10px 0; outline:none;
}
.busca__in::placeholder{color:var(--faint); font-weight:400}
.busca__in::-webkit-search-cancel-button{-webkit-appearance:none}
.busca__perto{
  flex:none; width:42px; height:42px; border-radius:10px; cursor:pointer;
  border:1px solid var(--accent); background:var(--accent); color:#fff;
  display:inline-grid; place-items:center;
}
:root[data-theme="dark"] .busca__perto{color:#2A1420}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .busca__perto{color:#2A1420} }
.busca__perto svg{width:19px;height:19px}
.busca__perto[hidden]{display:none}
.busca__perto[disabled]{opacity:.55; cursor:default}

.busca__res{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:30;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-lg); padding:6px; max-height:min(60vh,420px); overflow:auto;
}
.busca__res[hidden]{display:none}
.busca__opt{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 12px;
  padding:11px 12px; border-radius:10px; cursor:pointer; text-decoration:none;
}
.busca__opt:hover,.busca__opt[aria-selected="true"]{background:var(--card-2)}
.busca__opt .n{font-weight:600; font-size:15px; letter-spacing:-.01em}
.busca__opt .d{grid-column:1; font-size:12.5px; color:var(--muted); font-weight:500}
.busca__opt .t{grid-row:1/span 2; grid-column:2; text-align:right; align-self:center}
.busca__opt .t .v{font-family:var(--serif); font-weight:500; font-size:18px; display:block; line-height:1}
.busca__opt .t .u{font:600 10px var(--sans); color:var(--faint); text-transform:uppercase; letter-spacing:.04em}
.busca__opt .t.rapida .v{color:var(--verde)}
.busca__opt .t--ausente .v{font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--faint)}
.busca__vazio{padding:16px 12px; color:var(--muted); font-size:14px}
.busca__link{margin:12px 2px 0; font-size:14px}
.busca__link a{color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in oklab,var(--accent) 40%, transparent)}

/* ── A ficha (herói) ────────────────────────────────────────────────── */
.ficha{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow-lg); overflow:hidden;
  display:grid; grid-template-columns:10px 1fr;
}
.banda{display:flex; flex-direction:column; min-height:100%}
.banda span{display:block; flex-grow:1; flex-basis:0}
.banda .b-vermelho{background:var(--vermelho)} .banda .b-laranja{background:var(--laranja)}
.banda .b-amarelo{background:var(--amarelo)} .banda .b-verde{background:var(--verde)} .banda .b-azul{background:var(--azul)}
.banda--vazia{background:var(--well)}

.ficha__corpo{padding:24px 24px 22px; min-width:0}

.ficha__topo{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.ficha__nome{font-family:var(--serif); font-optical-sizing:auto; font-weight:560; font-size:28px; line-height:1.07; letter-spacing:-.015em; text-wrap:balance; margin-top:7px}
.ficha__onde{color:var(--muted); font-size:14px; font-weight:500; margin-top:7px}
.ficha__onde .place{color:var(--ink-2); font-weight:600}

.espera{display:flex; align-items:baseline; gap:12px; margin:22px 0 0; flex-wrap:wrap}
.espera__n{font-family:var(--serif); font-optical-sizing:auto; font-weight:340; font-size:clamp(66px,20vw,104px); line-height:.82; letter-spacing:-.02em}
.espera__u{font-family:var(--serif); font-weight:400; font-style:italic; font-size:26px; color:var(--muted)}
.espera__nota{font-size:14.5px; color:var(--ink-2); font-weight:500; margin-top:13px}
.espera__nota b{font-weight:700; color:var(--ink)}

.sem-tempos{font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.3; color:var(--ink-2); margin-top:20px; max-width:26ch}

.factos{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:12px; color:var(--muted); font-size:13.5px; font-weight:500}
.factos b{color:var(--ink-2); font-weight:700}

.aviso-velho{
  margin-top:16px; padding:12px 14px; border-radius:11px; font-size:13.5px; line-height:1.5;
  color:var(--ink-2); background:var(--card-2); border:1px solid var(--line); border-left:3px solid var(--faint);
}

/* composição por prioridade — a assinatura */
.compo{margin-top:22px; padding-top:20px; border-top:1px solid var(--line)}
.compo__h{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.compo__grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.pri{position:relative; background:var(--card); padding:13px 8px 12px; display:flex; flex-direction:column; gap:6px; min-width:0; box-shadow:inset 0 3px 0 var(--pc,var(--line))}
.pri--dom{background:var(--accent-wash)}
.pri__lvl{font-size:11px; font-weight:600; color:var(--muted); white-space:nowrap}
.pri--vermelho{--pc:var(--vermelho)} .pri--laranja{--pc:var(--laranja)} .pri--amarelo{--pc:var(--amarelo)}
.pri--verde{--pc:var(--verde)} .pri--azul{--pc:var(--azul)}
.pri__cnt{font-family:var(--serif); font-weight:500; font-size:23px; line-height:1; letter-spacing:-.01em}
.pri__w{font-size:11px; color:var(--faint); font-weight:500; white-space:nowrap}
.sw-vermelho{background:var(--vermelho)} .sw-laranja{background:var(--laranja)} .sw-amarelo{background:var(--amarelo)}
.sw-verde{background:var(--verde)} .sw-azul{background:var(--azul)}

.accoes{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap}
.botao{
  flex:1 1 auto; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 16px; border-radius:11px; font-weight:600; font-size:15px; cursor:pointer;
  border:1px solid var(--line); background:var(--card-2); color:var(--ink);
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.botao:hover{transform:translateY(-1px)}
.botao svg{width:16px;height:16px}
.botao--fill{background:var(--accent); border-color:var(--accent); color:#fff}
:root[data-theme="dark"] .botao--fill{color:#2A1420}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .botao--fill{color:#2A1420} }
.botao[hidden]{display:none}
.ligacao[hidden]{display:none}
.botao[disabled]{opacity:.55; cursor:default}

.mais{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:14.5px}
.mais a{color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:color-mix(in oklab,var(--accent) 40%, transparent)}
.perto-nota{flex-basis:100%; margin:6px 0 0; font-size:13.5px; line-height:1.45; font-weight:500; color:var(--ink-2)}
.perto-nota--erro{color:var(--accent-2); background:var(--accent-wash); border-radius:10px; padding:10px 12px}
:root[data-theme="dark"] .perto-nota--erro{color:var(--accent)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .perto-nota--erro{color:var(--accent)} }

/* ── Secções ────────────────────────────────────────────────────────── */
.seccao > .cabeca{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 2px 14px}
.seccao > .cabeca h2{font-family:var(--serif); font-optical-sizing:auto; font-weight:540; font-size:21px; letter-spacing:-.01em}
.seccao > .cabeca .hint{font-size:12.5px; color:var(--muted); font-weight:500}
.seccao > .cabeca .hint--link{color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in oklab,var(--accent) 40%, transparent)}
.painel{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:20px}

/* tipologias secundárias */
.tipos{padding:6px 20px}
.tipo{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-top:1px solid var(--line-2)}
.tipo:first-child{border-top:0}
.tipo__l{display:flex; align-items:center; gap:11px; font-weight:600; font-size:15px}
.tipo__ic{width:32px;height:32px;border-radius:9px; background:var(--card-2); border:1px solid var(--line-2); display:grid; place-items:center; color:var(--accent); flex:none}
.tipo__ic svg{width:17px;height:17px}
.tipo__w{font-family:var(--serif); font-weight:500; font-size:19px; letter-spacing:-.01em; white-space:nowrap}
.tipo__w.fraca{font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--muted)}

/* ficha secundária (página do hospital) */
.espera--menor .espera__n{font-size:clamp(48px,14vw,64px)}

/* por especialidade */
.filas{margin-top:6px}
.fila{display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:6px 14px; padding:11px 0; border-top:1px solid var(--line-2); font-size:14.5px}
.fila:first-child{border-top:0}
.fila dt{font-weight:500}
.fila dd{font-family:var(--serif); font-weight:500; font-size:16px; white-space:nowrap}
.fila .fila__p{font-family:var(--sans); font-size:12.5px; color:var(--faint); font-weight:500}
.fila .fraca{font-family:var(--sans); font-size:13px; color:var(--faint); font-weight:500}

/* ── Hoje ───────────────────────────────────────────────────────────── */
.hoje__svg{display:block; width:100%; height:120px; overflow:visible}
.hoje__area{fill:url(#hojefill)}
.hoje__traco{fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.hoje__fio{stroke:var(--faint); stroke-width:1; stroke-dasharray:2 3}
.hoje__base{stroke:var(--line); stroke-width:1}
.hoje__ponto{fill:var(--card); stroke:var(--accent); stroke-width:2.4}
.hoje__eixo{font:500 11px var(--sans); fill:var(--faint)}
.hoje__cap{display:flex; justify-content:space-between; margin-top:9px; font-size:11.5px; color:var(--faint); font-weight:500}

/* ── Padrão (heatmap) ───────────────────────────────────────────────── */
.padrao{display:grid; grid-template-columns:28px 1fr; gap:7px 8px; align-items:center}
.padrao__cols{grid-column:2; display:grid; grid-template-columns:repeat(24,1fr); font:600 10px var(--sans); color:var(--faint)}
.padrao__cols span{text-align:center}
.padrao__dia{font:600 11.5px var(--sans); color:var(--muted)}
.padrao__linha{grid-column:2; display:grid; grid-template-columns:repeat(24,1fr); gap:3px}
.padrao__celula{aspect-ratio:1; border-radius:2px; background:color-mix(in oklab, var(--ink) calc(var(--d)*84%), var(--well))}
.padrao__celula--vazia{background:transparent; box-shadow:inset 0 0 0 1px var(--line-2)}
.padrao__celula--agora{box-shadow:0 0 0 2px var(--accent); position:relative; z-index:2}
.padrao__pe{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; flex-wrap:wrap}
.padrao__escala{display:flex; align-items:center; gap:5px; font:500 11.5px var(--sans); color:var(--faint)}
.padrao__escala i{width:15px;height:9px;border-radius:2px; background:color-mix(in oklab, var(--ink) calc(var(--d)*84%), var(--well))}
.padrao__escala .vazia{background:transparent; box-shadow:inset 0 0 0 1px var(--line-2)}
.padrao__frase{font-size:14px; line-height:1.55; color:var(--ink-2); margin-top:15px; font-weight:500}
.padrao__frase b{color:var(--ink); font-weight:600}
.padrao__frase em{font-style:italic; font-family:var(--serif); font-weight:500; color:var(--accent)}

/* ── Lista de outros hospitais ──────────────────────────────────────── */
.lista{display:flex; flex-direction:column}
.lista__item{border-top:1px solid var(--line-2)}
.lista__item:first-child{border-top:0}
.lista__lig{display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 14px; padding:15px 12px; border-radius:13px; transition:background .14s ease}
.lista__lig:hover{background:var(--card-2)}
.lista__nome{font-weight:600; font-size:15.5px; letter-spacing:-.01em}
.lista__onde{grid-column:1; font-size:12.5px; color:var(--muted); font-weight:500; margin-top:3px; display:flex; align-items:center; gap:9px}
.lista__pontos{display:flex; gap:3px}
.lista__pontos i{width:6px;height:6px;border-radius:2px}
.lista__tempo{grid-row:1/span 2; grid-column:2; text-align:right; align-self:center}
.lista__tempo .v{font-family:var(--serif); font-weight:500; font-size:22px; letter-spacing:-.01em; display:block; line-height:1}
.lista__tempo .u{font:600 10.5px var(--sans); color:var(--faint); letter-spacing:.04em; text-transform:uppercase}
.lista__tempo.rapida .v{color:var(--verde)}
.lista__tempo--ausente .v{font-family:var(--sans); font-size:13px; font-weight:600; color:var(--faint); max-width:13ch}

.atalhos{display:flex; flex-wrap:wrap; gap:8px 14px; margin:0 2px 16px; font-size:13.5px}
.atalhos a{color:var(--muted); font-weight:600}
.atalhos a:hover{color:var(--accent)}
.seccao[id]{scroll-margin-top:14px}
.painel--lista{padding:6px}


/* ── Página de escolha: cabeçalho + filtros ─────────────────────────── */
.controlos{display:flex; flex-direction:column; gap:18px}
.pagina-cabeca{}
.pagina-titulo{font-family:var(--serif); font-optical-sizing:auto; font-weight:560; font-size:32px; letter-spacing:-.02em; line-height:1.05}
.pagina-cabeca .rotulo{margin-top:8px}
.accoes--topo{margin:0}
.accoes--topo .botao{flex:0 1 auto}

.filtros{display:flex; flex-wrap:wrap; gap:8px; margin:0}
.filtros[hidden]{display:none}
.chip{
  appearance:none; border:1px solid var(--line); background:var(--card); color:var(--ink-2);
  padding:8px 15px; border-radius:999px; font-weight:600; font-size:14px; cursor:pointer;
  transition:background .14s ease, border-color .14s ease, color .14s ease, transform .12s ease;
}
.chip:hover{transform:translateY(-1px); color:var(--ink)}
.chip--on{background:var(--accent); border-color:var(--accent); color:#fff}
:root[data-theme="dark"] .chip--on{color:#2A1420}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .chip--on{color:#2A1420} }
.filtros-vazio{color:var(--muted); font-size:14.5px; padding:20px 2px}


/* ── Comparar ───────────────────────────────────────────────────────── */
.cmp-add{position:relative}
.cmp-vazio{color:var(--muted); font-size:15px}
.cmp-vazio-painel{text-align:center; padding:28px 20px}
.cmp-scroll{overflow-x:auto; margin:0 -2px; padding:2px; -webkit-overflow-scrolling:touch}
.cmp-cols{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(158px,1fr); gap:12px; min-width:min-content}
.cmp-col{
  background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  padding:16px 15px; display:flex; flex-direction:column; gap:10px;
}
.cmp-col--melhor{border-color:color-mix(in oklab,var(--verde) 45%, var(--line)); box-shadow:var(--shadow), 0 0 0 1px color-mix(in oklab,var(--verde) 30%, transparent)}
.cmp-col__top{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
.cmp-col__nome{font-family:var(--serif); font-weight:560; font-size:17px; line-height:1.12; letter-spacing:-.01em; text-decoration:none; text-wrap:balance}
.cmp-col__nome:hover{text-decoration:underline; text-underline-offset:3px}
.cmp-col__x{flex:none; width:24px;height:24px;border-radius:7px; border:1px solid var(--line); background:var(--card-2); color:var(--muted); cursor:pointer; font-size:16px; line-height:1; display:grid; place-items:center}
.cmp-col__x:hover{color:var(--vermelho); border-color:var(--vermelho)}
.cmp-col__onde{font-size:12.5px; color:var(--muted); font-weight:500; margin-top:-4px}
.cmp-cel{display:flex; flex-direction:column; gap:3px; padding-top:9px; border-top:1px solid var(--line-2)}
.cmp-lbl{font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}
.cmp-espera{font-family:var(--serif); font-weight:500; font-size:26px; letter-spacing:-.01em; line-height:1}
.cmp-espera.rapida{color:var(--verde)}
.cmp-espera.aus{font-family:var(--sans); font-size:14px; font-weight:600; color:var(--muted)}
.cmp-tag{font-size:11px; font-weight:600; color:var(--verde); margin-top:2px}
.cmp-pes{font-family:var(--serif); font-weight:500; font-size:20px}
.cmp-dist{font-family:var(--serif); font-weight:500; font-size:18px}
.cmp-bar{display:flex; gap:2px; height:12px; border-radius:6px; overflow:hidden; margin-top:2px}
.cmp-bar span{display:block; min-width:2px; border-radius:2px}
.cmp-bar--vazia{background:var(--well); box-shadow:inset 0 0 0 1px var(--line-2)}
.cmp-acoes{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.cmp-acoes .botao{flex:0 1 auto}
[data-cmp-nota]{margin-top:12px}

/* ── Morada e mapa ──────────────────────────────────────────────────── */
.morada-painel{padding:0; overflow:hidden}
.mapa{display:block; height:160px; position:relative; overflow:hidden; background:var(--well)}
.mapa__mosaico{position:absolute; left:50%; top:50%; width:768px; height:768px; display:grid; grid-template-columns:repeat(3,256px); grid-template-rows:repeat(3,256px); transform:translate(calc(-1 * var(--mx)), calc(-1 * var(--my)))}
.mapa img{display:block; width:256px; height:256px; filter:grayscale(1) contrast(.9) brightness(1.02) opacity(.9)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .mapa img{filter:grayscale(1) invert(1) contrast(.82) brightness(.9)} }
:root[data-theme="dark"] .mapa img{filter:grayscale(1) invert(1) contrast(.82) brightness(.9)}
.mapa__pino{position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-22px 0 0 -11px; color:var(--accent)}
.mapa__pino svg{width:22px;height:22px; filter:drop-shadow(0 4px 6px rgb(0 0 0 / .25))}
.morada__corpo{padding:19px 22px 22px}
.morada{font-style:normal}
.morada__op{font-size:13px; color:var(--muted); font-weight:500}
.morada__linha{color:var(--ink-2); font-weight:500; margin-top:2px}
.morada__linha a{text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--line)}
.contactos{display:flex; gap:9px; margin-top:15px; flex-wrap:wrap}
.contactos a{display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border-radius:10px; background:var(--card-2); border:1px solid var(--line); font-weight:600; font-size:13.5px}
.contactos a svg{width:15px;height:15px; color:var(--accent)}
.creditos{padding:0 22px 16px; font-size:11.5px; color:var(--faint)}



/* ── Distrito: resumo da região ─────────────────────────────────────── */
.regiao-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:440px){ .regiao-grid{grid-template-columns:1fr} }
.regiao-card{display:flex; flex-direction:column; gap:6px; padding:18px 20px; text-decoration:none}
.regiao-card--link{transition:transform .12s ease, border-color .15s ease}
.regiao-card--link:hover{transform:translateY(-1px); border-color:var(--accent)}
.regiao-card__lbl{font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.regiao-card__v{font-family:var(--serif); font-optical-sizing:auto; font-weight:400; font-size:40px; line-height:1; letter-spacing:-.02em; margin-top:2px}
.regiao-card__v.rapida{color:var(--verde)}
.regiao-card__n{font-size:13.5px; color:var(--ink-2); font-weight:600; line-height:1.35}
.regiao-card--link .regiao-card__n{color:var(--accent)}

/* ── Como funciona ──────────────────────────────────────────────────── */
.cf-p{font-size:15.5px; line-height:1.6; color:var(--ink-2)}
.cf-p + .cf-p{margin-top:12px}
.cf-p b{color:var(--ink); font-weight:700}
.cf-p em{font-style:italic; font-family:var(--serif); color:var(--accent)}
.cf-lista{margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px}
.cf-lista li{position:relative; padding-left:20px; font-size:15px; line-height:1.55; color:var(--ink-2)}
.cf-lista li::before{content:""; position:absolute; left:2px; top:9px; width:7px; height:7px; border-radius:2px; background:var(--accent)}
.cf-lista b{color:var(--ink); font-weight:700}
.cf-niveis{margin:16px 0 4px; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.cf-nivel{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:13px 14px; border-top:1px solid var(--line-2); font-size:14.5px}
.cf-nivel:first-child{border-top:0}
.cf-nivel__sw{width:14px; height:14px; border-radius:4px}
.cf-nivel b{font-weight:700}
.cf-nivel__t{font-family:var(--serif); font-weight:500; font-size:15px; color:var(--ink-2); white-space:nowrap}
.cf-nota{margin-top:14px; font-size:13.5px; color:var(--muted); line-height:1.55}
.espera__link{color:var(--muted); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--line); font-weight:500}
.espera__link:hover{color:var(--accent)}
.rodape__nav{display:flex; gap:16px; justify-content:center; margin-bottom:12px; flex-wrap:wrap}
.rodape__nav a{color:var(--ink-2); font-weight:600; font-size:13px; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line)}
.rodape__nav a:hover{color:var(--accent)}


/* ── Página inicial: lede, overview, FAQ ────────────────────────────── */
.lede{margin-bottom:2px}
.lede__h{font-family:var(--serif); font-optical-sizing:auto; font-weight:560; font-size:clamp(26px,7vw,34px); line-height:1.08; letter-spacing:-.02em; text-wrap:balance}
.lede__p{margin-top:10px; color:var(--ink-2); font-size:15.5px; line-height:1.6; max-width:60ch}
.lede__p strong{color:var(--ink); font-weight:700}

.overview__grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.overview__d{display:flex; flex-direction:column; gap:3px; padding:14px 15px; background:var(--card); text-decoration:none; transition:background .14s ease}
.overview__d:hover{background:var(--card-2)}
.overview__nome{font-weight:600; font-size:15px; letter-spacing:-.01em}
.overview__meta{font-size:12.5px; color:var(--muted); font-weight:500}

.faq__lista{padding:4px 20px}
.faq__item{border-top:1px solid var(--line-2)}
.faq__item:first-child{border-top:0}
.faq__q{cursor:pointer; list-style:none; padding:16px 28px 16px 0; font-weight:600; font-size:15.5px; position:relative; color:var(--ink)}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"+"; position:absolute; right:2px; top:14px; font-size:20px; color:var(--muted); font-weight:400; transition:transform .2s ease}
.faq__item[open] .faq__q::after{content:"\2212"}
.faq__a{padding:0 0 18px; color:var(--ink-2); font-size:15px; line-height:1.6; max-width:64ch}
.faq__a a{color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-color:color-mix(in oklab,var(--accent) 40%, transparent); font-weight:600}
.faq__a strong{color:var(--ink); font-weight:700}

/* ── Emergência + rodapé ────────────────────────────────────────────── */
.emergencia{
  display:flex; align-items:center; gap:15px; padding:17px 20px; border-radius:15px;
  background:var(--vermelho-w); border:1px solid color-mix(in oklab, var(--vermelho) 28%, transparent);
}
.emergencia .n{font-family:var(--serif); font-weight:600; font-size:26px; color:var(--vermelho); letter-spacing:-.01em}
.emergencia .t{font-weight:500; font-size:14.5px; color:var(--ink-2)}

.rodape{text-align:center; color:var(--faint); font-size:12.5px; line-height:1.65; padding:0 10px}
.rodape p + p{margin-top:6px}

.cookies{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px; justify-content:space-between;
  padding:16px 18px; border-radius:14px; background:var(--card-2); border:1px solid var(--line);
  font-size:13.5px; color:var(--ink-2);
}
.cookies p{max-width:52ch; margin:0}
.cookies[hidden]{display:none}

/* ── Movimento ──────────────────────────────────────────────────────── */
[data-fragmento]{transition:opacity 180ms linear}
.a-mudar{opacity:0}
.reveal{opacity:0; transform:translateY(12px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0s!important; animation-delay:0s!important; transition-duration:0s!important}
  .reveal{opacity:1; transform:none}
}



/* ── Pulso nacional (só desktop, canto superior direito) ────────────── */
.pulso{display:none}
.pulso__n{margin-top:10px}
.pulso__v{font-family:var(--serif); font-optical-sizing:auto; font-weight:400; font-size:52px; line-height:.9; letter-spacing:-.02em}
.pulso__lab{color:var(--muted); font-size:13px; font-weight:500; margin-top:6px}
.pulso__factos{margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-2)}
.pulso__factos b{color:var(--ink); font-weight:700}
.pulso__calmo{display:flex; flex-direction:column; gap:3px; margin-top:14px; padding:12px 14px; border-radius:12px; background:var(--card-2); border:1px solid var(--line-2); text-decoration:none}
.pulso__calmo:hover{border-color:var(--accent)}
.pulso__calmo .rotulo{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase}
.pulso__calmo-v{font-weight:600; font-size:15px; color:var(--accent)}

/* ── Desktop: usar a largura (colunas) ──────────────────────────────── */
@media (min-width:940px){
  .wrap{ max-width:1120px; padding:0 32px 96px; }

  /* páginas de leitura / listas ficam centradas e legíveis */
  .main--doc{ max-width:720px; margin-inline:auto; }
  .main--lista{ max-width:900px; margin-inline:auto; }

  /* homepage e página de hospital: conteúdo principal + coluna lateral */
  .main--inicio, .main--hosp{
    display:grid;
    grid-template-columns:minmax(0,1.62fr) minmax(320px,1fr);
    column-gap:40px; row-gap:34px;
    align-items:start;
  }
  .main--inicio > *, .main--hosp > *{ grid-column:1; min-width:0; }

  /* homepage: pulso no topo-direito; vizinhos ao lado do herói */
  .main--inicio .pulso{ display:block; grid-column:2; grid-row:1 / 3; align-self:start; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:20px 22px; }
  .main--inicio [data-fragmento="vizinhos"]{ grid-column:2; grid-row:3; align-self:start; }
  .main--inicio .overview, .main--inicio .faq, .main--inicio .emergencia{ grid-column:1 / -1; }

  /* página de hospital: vizinhos como coluna lateral pegajosa ao longo do detalhe */
  .main--hosp [data-fragmento="vizinhos"]{ grid-column:2; grid-row:1 / 999; align-self:start; position:sticky; top:24px; }
  .main--hosp .emergencia{ grid-column:1; }

  /* o herói respira mais em ecrã largo */
  .main--inicio .lede__h, .main--hosp .ficha__nome{ }
  .espera__n{ font-size:clamp(66px,8vw,112px); }
}

/* ecrãs muito largos: não deixar a coluna esticar demais */
@media (min-width:1240px){ .wrap{ max-width:1180px; } }

/* ── 360px ──────────────────────────────────────────────────────────── */
@media (max-width:380px){
  .ficha__corpo{padding:20px 18px}
  .compo__grid{grid-template-columns:repeat(5,1fr)}
  .pri{padding:10px 5px 11px}
  .pri__lvl{font-size:10px}
  .pri__cnt{font-size:20px}
  .padrao{grid-template-columns:24px 1fr}
}