/* UBRAFE News · piloto. Paleta inspirada nas cores globais do site ubrafe.org.br:
   azul-noite #011126, azul #009FE3, verde #009640, amarelo #FFED00; família Roboto / Roboto Slab. */
:root{
  --noite:#011126; --azul:#009FE3; --azul-escuro:#0072A6; --verde:#009640; --amarelo:#FFED00;
  --fundo:#F3F6F9; --papel:#FFFFFF; --tinta:#0E1A2B; --cinza:#5B6878; --linha:#DCE3EA; --suave:#E8EFF5;
  --alerta:#B3261E;
  --titulo:'Roboto Slab', Georgia, serif; --texto:'Roboto', 'Helvetica Neue', Arial, sans-serif; --mono:'Roboto Mono', ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark){:root{
  --fundo:#07111E; --papel:#0E1C2E; --tinta:#E7EEF6; --cinza:#9DB0C4; --linha:#21344B; --suave:#15263B; --azul-escuro:#5CC4F2; --alerta:#F08A80; color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--fundo);color:var(--tinta);font:15px/1.55 var(--texto)}
a{color:var(--azul-escuro)}
.wrap{max-width:1200px;margin:0 auto;padding-inline:20px}
.mono{font-family:var(--mono);font-size:12.5px}
/* topo */
.topo{background:var(--noite);color:#fff;position:sticky;top:0;z-index:10}
.faixa{display:flex;height:4px}.faixa span{flex:1}.bf-azul{background:var(--azul)}.bf-verde{background:var(--verde)}.bf-amarelo{background:var(--amarelo)}
.topo-in{display:flex;align-items:center;gap:18px;padding-block:12px;flex-wrap:wrap}
.marca{color:#fff;text-decoration:none;font:700 22px var(--titulo);display:flex;align-items:baseline;gap:6px}
.marca b{color:var(--amarelo)}
.marca small{font:500 11px var(--texto);letter-spacing:.08em;text-transform:uppercase;color:#9FB3C8;margin-left:6px}
.menu{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.menu a{color:#C9D6E3;text-decoration:none;font-weight:500;padding:6px 10px;border-radius:4px}
.menu a:hover{color:#fff;background:rgba(255,255,255,.08)}
.menu a.on{color:var(--noite);background:var(--amarelo)}
.busca input{font:14px var(--texto);border:0;border-radius:4px;padding:8px 12px;width:240px;max-width:100%;background:#fff;color:#0E1A2B}
@media (max-width:760px){.topo{position:static}.busca{width:100%}.busca input{width:100%}}
/* layout */
main{padding-block:28px 60px;display:flex;flex-direction:column;gap:26px;outline:none}
h1{font:700 clamp(28px,4vw,42px)/1.1 var(--titulo);margin:0;text-wrap:balance}
h2{font:700 22px/1.2 var(--titulo);margin:0 0 12px;text-wrap:balance}
h3{font:700 16px/1.3 var(--texto);margin:0}
.lede{color:var(--cinza);max-width:70ch;margin:6px 0 0}
.chapeu{font:700 11.5px var(--texto);letter-spacing:.1em;text-transform:uppercase;color:var(--verde)}
.grade{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:22px}
@media (max-width:900px){.grade{grid-template-columns:1fr}}
.caixa{background:var(--papel);border:1px solid var(--linha);border-radius:6px;padding:18px;min-width:0}
.caixa.noite{background:var(--noite);color:#fff;border:0}
.caixa.noite .cinza{color:#9FB3C8}
.cinza{color:var(--cinza)}
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.num{background:var(--papel);border:1px solid var(--linha);border-top:4px solid var(--azul);border-radius:6px;padding:12px 14px}
.num:nth-child(2){border-top-color:var(--verde)}.num:nth-child(3){border-top-color:var(--amarelo)}.num:nth-child(4){border-top-color:var(--noite)}
.num b{display:block;font:700 30px/1.1 var(--titulo);font-variant-numeric:tabular-nums}
.num span{font-size:13px;color:var(--cinza)}
/* notícias */
.lista{display:flex;flex-direction:column}
.nota{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--linha)}
.nota:first-child{border-top:0;padding-top:0}
.nota .quando{font:500 12px var(--mono);color:var(--cinza)}
.nota a.tit{font:700 16px/1.35 var(--texto);color:var(--tinta);text-decoration:none}
.nota a.tit:hover{color:var(--azul-escuro);text-decoration:underline}
.nota .meta{font-size:12.5px;color:var(--cinza);margin-top:4px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.nota.nova .quando::after{content:"nova";display:block;margin-top:4px;width:max-content;font:700 10px var(--texto);text-transform:uppercase;letter-spacing:.08em;background:var(--amarelo);color:#011126;padding:1px 6px;border-radius:3px}
.tag{display:inline-block;font:500 12px var(--texto);padding:2px 8px;border-radius:3px;background:var(--suave);color:var(--tinta);text-decoration:none;white-space:nowrap}
a.tag:hover{background:var(--azul);color:#fff}
/* calendário */
.filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filtros select,.filtros input{font:14px var(--texto);color:var(--tinta);background:var(--papel);border:1px solid var(--linha);border-radius:4px;padding:8px 10px;min-width:0}
.mes{margin-top:8px}
.mes h3{font:700 13px var(--texto);letter-spacing:.08em;text-transform:uppercase;color:var(--cinza);padding:8px 0;border-bottom:2px solid var(--noite)}
.ev{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--linha);text-decoration:none;color:var(--tinta)}
.ev:hover .ev-nome{color:var(--azul-escuro);text-decoration:underline}
.ev .data{font:700 13px var(--mono);line-height:1.25}
.ev .data small{display:block;font-weight:400;color:var(--cinza)}
.ev-nome{font-weight:700}
.ev .sub{font-size:13px;color:var(--cinza)}
@media (max-width:620px){.ev{grid-template-columns:72px minmax(0,1fr)}.ev .st{grid-column:2}}
.st{font:700 11px var(--texto);text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:3px;white-space:nowrap}
.st.agora{background:var(--verde);color:#fff}
.st.prox{background:var(--azul);color:#fff}
.st.conf{background:var(--suave);color:var(--tinta)}
.st.adiv{border:1px solid var(--alerta);color:var(--alerta)}
.st.cand{background:var(--amarelo);color:#011126}
/* fichas */
.ficha-top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
dl.kv{display:grid;grid-template-columns:170px minmax(0,1fr);gap:8px 16px;margin:0}
dl.kv dt{color:var(--cinza);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;padding-top:2px}
dl.kv dd{margin:0;overflow-wrap:anywhere}
@media (max-width:560px){dl.kv{grid-template-columns:1fr}}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.card{background:var(--papel);border:1px solid var(--linha);border-radius:6px;padding:14px;text-decoration:none;color:var(--tinta);display:flex;flex-direction:column;gap:6px}
.card:hover{border-color:var(--azul)}
.card .n{font:500 12.5px var(--mono);color:var(--cinza)}
/* painel */
.barras{display:flex;flex-direction:column;gap:7px}
.barra{display:grid;grid-template-columns:minmax(110px,36%) 1fr 48px;gap:10px;align-items:center;font-size:13px;color:var(--tinta);text-decoration:none}
.barra .trilho{height:14px;background:var(--suave);border-radius:2px;overflow:hidden}
.barra .enche{display:block;height:100%;background:var(--azul)}
.barra .v{font:500 12.5px var(--mono);text-align:right}
.barra .r{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vazio{color:var(--cinza);font-style:italic}
.rodape{background:var(--noite);color:#C9D6E3;font-size:13px}
.rodape-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:18px}
.carregando{color:var(--cinza)}
a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--azul);outline-offset:2px}