/* Civitar · identidade visual da Prefeitura de Maringá (kit SECOM "Trabalhando por você").
   Mosaico de pictogramas sobre o azul institucional, faixa de pictogramas azul e verde no rodapé,
   logos oficiais em branco. Arquivos em /img/marca, extraídos dos PDFs oficiais do kit. */
:root{
  --sec-azul:#224E8F; --sec-azul-esc:#183A6E; --sec-azul-fundo:#1C447F;
  --sec-azul-med:#3C86C6; --sec-azul-cla:#4AA8E0;
  --sec-verde:#30B67C; --sec-verde-txt:#1B7F52;
  --sec-tinta:#16325C;
  --sec-mosaico:url('/img/marca/mosaico-azul.png');
  --sec-faixa:url('/img/marca/faixa-pictogramas.png');
}

/* faixa de pictogramas (rodapé dos banners oficiais): repete sem emenda na horizontal */
.sec-faixa{ height:var(--sec-faixa-h, 58px); background:var(--sec-azul) var(--sec-faixa) repeat-x left bottom / auto 100%; }

/* cabeçalho no formato do "Banner de Site" da SECOM */
.sec-topo{ background:var(--sec-azul) var(--sec-mosaico) repeat left top / 760px auto; color:#fff; }
.sec-topo-in{ max-width:1080px; margin:0 auto; padding:30px 20px 28px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.sec-logo-pref{ height:var(--sec-logo-h, 64px); width:auto; display:block; }
.sec-topo .sec-topo-prog, .sec-topo .sec-topo-prog:hover{ color:#fff; }
.sec-topo-prog{ text-align:right; line-height:1.15; font-family:'Archivo', system-ui, sans-serif; color:#fff; text-decoration:none; }
.sec-topo-prog span{ display:block; font-weight:400; font-size:15px; letter-spacing:.01em; }
.sec-topo-prog b{ display:block; font-weight:800; font-size:22px; letter-spacing:.02em; }
.sec-topo-prog small{ display:block; font-weight:500; font-size:12px; opacity:.85; margin-top:2px; }
@media (max-width:560px){ .sec-topo-in{ padding:18px 16px 16px; } .sec-logo-pref{ height:44px; } .sec-topo-prog span{ font-size:12px; } .sec-topo-prog b{ font-size:17px; } .sec-topo-prog small{ display:none; } }

/* rodapé: faixa de pictogramas + bloco azul com os logos oficiais */
.sec-rodape{ margin-top:auto; color:#DCE7F5; font-family:'Archivo', system-ui, sans-serif; }
.sec-rodape-in{ background:var(--sec-azul-esc); }
.sec-rodape-grade{ max-width:1080px; margin:0 auto; padding:26px 20px 30px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 30px; }
.sec-rodape-logos{ display:flex; align-items:center; gap:22px; }
.sec-rodape-logos img.pref{ height:46px; width:auto; }
.sec-rodape-logos img.amitech{ height:30px; width:auto; }
.sec-rodape-logos .div{ width:1px; align-self:stretch; background:rgba(255,255,255,.35); }
.sec-rodape-links{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14px; }
.sec-rodape .sec-rodape-links a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:1px; }
.sec-rodape .sec-rodape-links a:hover{ border-bottom-color:var(--sec-verde); }
.sec-rodape-nota{ width:100%; font-size:12.5px; color:#A9BEDB; }
@media (max-width:560px){ .sec-rodape-logos img.pref{ height:38px; } .sec-rodape-logos img.amitech{ height:24px; } }

/* telas do servidor (portal, minha área, perguntas do dia, rankings): fundo institucional */
body.sec-portal{ background:linear-gradient(180deg, rgba(24,58,110,.18), rgba(20,48,94,.55)), var(--sec-mosaico) repeat left top / 760px auto, var(--sec-azul-fundo); color:#fff; min-height:100vh; display:flex; flex-direction:column; }
body.sec-portal .card-p, body.sec-portal .rk{ background:rgba(19,45,88,.94); border-color:rgba(255,255,255,.14); }
body.sec-portal .sec-conteudo{ flex:1; }
/* participante e votação ao vivo: só o fundo, sem cabeçalho nem rodapé */
body.sec-fundo{ background:linear-gradient(180deg, rgba(24,58,110,.30), rgba(16,40,80,.70)), var(--sec-mosaico) repeat left top / 760px auto, var(--sec-azul-fundo); color:#fff; min-height:100vh; }

/* título da barra superior nas telas do servidor (a marca fica no cabeçalho institucional) */
.topo-tit{ font-family:"Archivo", system-ui, sans-serif; font-weight:800; font-size:22px; color:#fff; margin:0; text-decoration:none; }
a.topo-tit{ font-size:16px; font-weight:600; }
a.topo-tit:hover{ color:#fff; text-decoration:underline; }

/* nas telas do servidor o destaque é o verde da Prefeitura (no lugar do dourado do telão);
   texto azul-escuro sobre o verde para manter contraste de leitura */
body.sec-portal{ --civ-ouro:#30B67C; --civ-ouro-claro:#8FE3BC; --ouro:#30B67C; --ouro-c:#5CCB97; }
body.sec-portal .btn-ouro{ background:var(--sec-verde); color:#0E2A52; }
body.sec-portal .btn-ouro:hover{ background:#46C58C; color:#0E2A52; }
body.sec-portal .liga-chip{ color:#8FE3BC; border-color:rgba(48,182,124,.6); background:rgba(48,182,124,.12); }
body.sec-portal .btn-escuro.ouro{ color:#8FE3BC; border-color:rgba(48,182,124,.6); }
body.sec-portal .btn-escuro.ouro:hover{ background:rgba(48,182,124,.16); color:#B5F0D3; border-color:#30B67C; }