/* Greves Hoje — "estado da linha". Cada greve tem uma barra de cor como uma linha de metro. */
:root{
  --papel:#EEF1F5;--superficie:#FFFFFF;--tinta:#13203A;--suave:#56627A;--linha:#D8DEE8;
  --sinal:#E0301E;--ambar:#E9A400;--ambar-t:#8A5B00;--verde:#14946A;--neutro:#7D879A;
  --din:Bahnschrift,"DIN Alternate","DIN Next","Barlow Condensed","Roboto Condensed","sans-serif-condensed","Arial Narrow",sans-serif;
  --texto:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --raio:14px;color-scheme:light;
}
/* Modo escuro: escolhido no botão (data-tema) ou, sem escolha, pelo sistema */
:root[data-tema="escuro"]{
  --papel:#0D1524;--superficie:#16213A;--tinta:#E8EDF5;--suave:#9BA7BD;--linha:#26334F;
  --ambar-t:#F2C14E;--neutro:#6F7B92;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-tema]){
  --papel:#0D1524;--superficie:#16213A;--tinta:#E8EDF5;--suave:#9BA7BD;--linha:#26334F;
  --ambar-t:#F2C14E;--neutro:#6F7B92;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:16px/1.55 var(--texto)}
a{color:inherit}
:focus-visible{outline:3px solid var(--ambar);outline-offset:2px;border-radius:4px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.saltar{position:absolute;left:-999px}.saltar:focus{left:1rem;top:1rem;z-index:9;background:var(--superficie);padding:.5rem 1rem}

/* Topo */
header.topo{background:#13203A;color:#fff;position:sticky;top:0;z-index:5}
:root[data-tema="escuro"] header.topo{background:#08101E;border-bottom:1px solid var(--linha)}
.faixa{max-width:52rem;margin:0 auto;padding:.7rem 1rem;display:flex;align-items:center;gap:.5rem}
.marca{display:flex;align-items:center;gap:.55rem;font:700 1.3rem/1 var(--din);letter-spacing:.01em;text-decoration:none;color:#fff;white-space:nowrap;margin-right:auto}
.marca i{width:22px;height:22px;border-radius:6px;background:
  linear-gradient(90deg,transparent 4px,var(--sinal) 4px 9px,transparent 9px 13px,var(--ambar) 13px 18px,transparent 18px),#22355C}
header nav{display:flex;gap:.1rem;white-space:nowrap}
header nav a{font:600 .95rem/1 var(--din);color:#C9D3E4;text-decoration:none;padding:.5rem .65rem;border-radius:8px}
header nav a:hover{color:#fff;background:#22355C}
.tema{flex:none;width:38px;height:38px;border-radius:10px;border:1px solid #2E436B;background:transparent;color:#C9D3E4;cursor:pointer;display:grid;place-items:center;padding:0}
.tema:hover{color:#fff;background:#22355C}
.tema svg{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.tema .lua{stroke:none}.tema .sol{display:none}.tema .sol circle{stroke:none}
:root[data-tema="escuro"] .tema .lua{display:none}:root[data-tema="escuro"] .tema .sol{display:inline}
nav.setores{max-width:52rem;margin:0 auto;padding:0 1rem .6rem;display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none}
nav.setores::-webkit-scrollbar{display:none}
nav.setores a{flex:none;font-size:.85rem;color:#C9D3E4;text-decoration:none;border:1px solid #2E436B;border-radius:99px;padding:.25rem .75rem}
nav.setores a:hover{border-color:#C9D3E4;color:#fff}

main,.alertas,footer{max-width:52rem;margin:0 auto;padding:0 1rem}
main{padding-top:1.4rem}

/* Herói */
.heroi{padding:2.2rem 0 1.2rem}
.hoje{margin:0;font:600 1rem/1 var(--din);color:var(--suave)}
h1{font:700 clamp(2.1rem,7vw,3.6rem)/1.02 var(--din);letter-spacing:-.01em;margin:.45rem 0 .6rem;text-wrap:balance}
.resumo{margin:0;font-size:1.1rem;color:var(--suave);max-width:34em}

h2{font:700 1.35rem/1.2 var(--din);margin:2.2rem 0 .8rem}
h2 small{font:600 .9rem var(--din);color:var(--suave);background:var(--superficie);border:1px solid var(--linha);border-radius:99px;padding:.05rem .55rem;margin-left:.4rem;vertical-align:3px}

/* Cores por nível de impacto (uma só fonte de verdade) */
.n-parado{--cor:var(--sinal)}.n-perturbado{--cor:var(--ambar)}.n-marcada{--cor:var(--neutro)}
.n-normal{--cor:var(--verde)}.n-cancelada{--cor:var(--linha)}

/* Painel de transportes — o elemento principal */
.painel{background:var(--superficie);border-radius:var(--raio);padding:1.1rem 1.1rem .9rem;
  box-shadow:0 1px 0 var(--linha),0 18px 40px -28px rgba(19,32,58,.45)}
.painel h2{margin:0 0 .6rem;font-size:1.1rem;color:var(--suave)}
.painel ul{list-style:none;margin:0;padding:0}
.painel li{display:grid;grid-template-columns:11rem 1fr;gap:.15rem 1rem;padding:.75rem 0 .75rem 1.1rem;position:relative;border-top:1px solid var(--linha)}
.painel li:first-child{border-top:0}
.painel li.n-normal{padding-top:.55rem;padding-bottom:.55rem}
.painel li::before{content:"";position:absolute;left:0;top:.7rem;bottom:.7rem;width:6px;border-radius:6px;background:var(--cor)}
.op{font:700 1.1rem/1.25 var(--din)}
.n-normal .op,.n-normal .agora b{font-size:.98rem}
.op a{text-decoration:none}.op a:hover{text-decoration:underline}
.agora{display:flex;flex-direction:column}
.agora b{font:700 1rem/1.3 var(--din);color:var(--cor)}
.n-normal .agora b{color:var(--verde)}.n-perturbado .agora b{color:var(--ambar-t)}.n-marcada .agora b{color:var(--tinta)}
.agora span{font-size:.92rem;color:var(--suave)}
.prox{grid-column:2;font-size:.85rem;color:var(--suave)}
.n-normal .agora span{display:none}
.legenda{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin:.7rem 0 0;padding-top:.7rem;border-top:1px solid var(--linha);font-size:.8rem;color:var(--suave)}
.legenda span{white-space:nowrap}
.legenda i{display:inline-block;width:14px;height:6px;border-radius:3px;background:var(--cor);margin-right:.35rem;vertical-align:2px}
@media (max-width:560px){.painel li{grid-template-columns:1fr}.prox{grid-column:1}}

/* Listas de greves */
.lista{background:var(--superficie);border-radius:var(--raio);overflow:hidden;border:1px solid var(--linha)}
.greve{position:relative;padding:1rem 1.1rem 1rem 1.6rem;border-top:1px solid var(--linha)}
.greve:first-child{border-top:0}
.greve::before{content:"";position:absolute;left:.65rem;top:1rem;bottom:1rem;width:5px;border-radius:5px;background:var(--cor)}
.etiquetas{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .35rem;font-size:.8rem}
.etiquetas span{border-radius:99px;padding:.1rem .6rem;background:var(--papel);color:var(--suave)}
.etiquetas .estado{color:var(--tinta);font-weight:600}
.greve h3{font:700 1.2rem/1.25 var(--din);margin:0 0 .35rem}
.greve h3 a{text-decoration:none}.greve h3 a:hover{text-decoration:underline}
.impacto{margin:0 0 .4rem;font-weight:600}
.n-parado .impacto{color:var(--sinal)}.n-perturbado .impacto{color:var(--ambar-t)}
.n-cancelada h3{text-decoration:line-through;text-decoration-thickness:1px;color:var(--suave)}
.meta{margin:0 0 .5rem;font-size:.93rem;color:var(--suave)}
.fonte{margin:0;font-size:.82rem;color:var(--suave);display:flex;flex-wrap:wrap;gap:.2rem .8rem}
.fonte a{font-weight:600;color:var(--tinta)}
.ok{color:var(--verde);font-weight:600}
.vazio{margin:0;padding:1rem 1.1rem;border-radius:var(--raio);border:1px dashed var(--linha);color:var(--suave)}

/* Próximos dias: data em bloco */
.separador{margin-top:2.8rem}
h2.dia{display:flex;align-items:center;gap:.7rem;margin:1.6rem 0 .6rem}
h2.dia .num{font:700 2.3rem/1 var(--din);min-width:2.6rem;text-align:center;background:var(--tinta);color:var(--papel);border-radius:10px;padding:.35rem .4rem}
h2.dia .txt{display:flex;flex-direction:column;font-size:1.15rem;line-height:1.15}
h2.dia small{font:500 .95rem var(--texto);color:var(--suave);background:none;border:0;padding:0;margin:0;vertical-align:0}

details.longas{margin:2rem 0;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio)}
details.longas summary{cursor:pointer;padding:1rem 1.1rem;font:700 1.1rem/1.3 var(--din)}
details.longas summary small{font:600 .85rem var(--din);color:var(--suave);margin-left:.3rem}
details.longas summary span{display:block;font:400 .88rem var(--texto);color:var(--suave)}
details.longas .greve{border-top:1px solid var(--linha)}

.pub:empty{display:none} /* espaço para anúncios: só aparece quando houver um anúncio */
.pub{margin:1rem 0;min-height:100px}

/* Alertas */
.alertas{margin-top:3rem;padding-top:1.4rem;padding-bottom:1.4rem;background:#13203A;color:#fff;border-radius:var(--raio)}
:root[data-tema="escuro"] .alertas{background:var(--superficie)}
.alertas>*{max-width:40rem}
@media (min-width:54rem){.alertas{padding-left:1.6rem;padding-right:1.6rem}}
.alertas h2{margin:0 0 .3rem;color:#fff}
.alertas p{margin:0 0 1rem;color:#C9D3E4}
.alertas form{display:flex;flex-wrap:wrap;gap:.5rem}
.alertas input{flex:1 1 14rem;padding:.75rem .9rem;border-radius:10px;border:0;font:inherit;background:#fff;color:#13203A}
.alertas button{padding:.75rem 1.1rem;border:0;border-radius:10px;font:700 1rem var(--din);background:var(--ambar);color:#13203A;opacity:.75;cursor:not-allowed}

footer{margin-top:2rem;padding-bottom:3rem;font-size:.86rem;color:var(--suave)}
footer p:last-child{display:flex;gap:1.2rem}

/* Página de cada greve */
.migalhas{margin:1.6rem 0 .8rem;font-size:.88rem;color:var(--suave)}
.migalhas a{text-decoration:none}.migalhas a:hover{text-decoration:underline}
.ficha .greve{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:1.4rem 1.3rem 1.3rem 2rem}
.ficha .greve::before{left:.9rem;top:1.3rem;bottom:1.3rem;width:6px}
.ficha h3{font-size:clamp(1.6rem,5vw,2.2rem);line-height:1.1}
.ficha .impacto{font-size:1.1rem}
ol.passos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
ol.passos li{font:600 .95rem var(--din);padding:.45rem .8rem;border-radius:99px;border:1px solid var(--linha);color:var(--suave);background:var(--superficie)}
ol.passos li.feito{color:var(--tinta)}
ol.passos li.atual{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
blockquote{margin:0;padding:1rem 1.2rem;background:var(--superficie);border-radius:var(--raio);border:1px solid var(--linha);color:var(--suave);font-size:.95rem}
.nota{font-size:.85rem;color:var(--suave)}
.botao{display:inline-block;font:700 1rem var(--din);background:var(--tinta);color:var(--papel);text-decoration:none;padding:.7rem 1.1rem;border-radius:10px}
ul.fontes{list-style:none;padding:0;margin:0;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio)}
ul.fontes li{padding:.75rem 1.1rem;border-top:1px solid var(--linha);display:flex;flex-direction:column}
ul.fontes li:first-child{border-top:0}
ul.fontes a{font-weight:600}ul.fontes span{font-size:.85rem;color:var(--suave)}
main>ul{padding-left:1.2rem}main>p{max-width:40em}

@media (max-width:420px){
  header nav a{padding:.45rem .45rem;font-size:.9rem}header nav a[href="#alertas"],header nav a[href*="esta-semana"]{display:none}
  .painel{padding:.9rem .9rem .8rem}
}
@media (prefers-reduced-motion:no-preference){
  .painel li::before{transform-origin:top;animation:linha .6s cubic-bezier(.2,.7,.2,1) both}
  .painel li:nth-child(2)::before{animation-delay:.05s}.painel li:nth-child(3)::before{animation-delay:.1s}
  .painel li:nth-child(4)::before{animation-delay:.15s}.painel li:nth-child(5)::before{animation-delay:.2s}
  .painel li:nth-child(n+6)::before{animation-delay:.25s}
  @keyframes linha{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}

/* Cores por setor (etiquetas e atalhos do topo) */
.s-transportes{--sc:#0E8A96}.s-aviacao{--sc:#3478C6}.s-escolas{--sc:#8250DF}.s-saude{--sc:#D6336C}
.s-funcao-publica{--sc:#C2410C}.s-justica{--sc:#8D6E3F}.s-outros{--sc:#64748B}
.etiquetas .setor{background:color-mix(in srgb,var(--sc) 14%,transparent);color:color-mix(in srgb,var(--sc) 80%,var(--tinta));font-weight:600}
nav.setores a{border-color:color-mix(in srgb,var(--sc) 70%,transparent)}
nav.setores a::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--sc);margin-right:.4rem;vertical-align:1px}
nav.setores a:hover{background:color-mix(in srgb,var(--sc) 30%,transparent);border-color:var(--sc)}

/* Cores por estado da greve */
.est-convocada{--ec:#2F6FDB;--et:#fff}.est-servicos_minimos{--ec:#E9A400;--et:#13203A}
.est-confirmada{--ec:#14946A;--et:#fff}.est-desconvocada{--ec:#7D879A;--et:#fff}
.etiquetas .estado{background:var(--ec);color:var(--et);font-weight:700}