/* ============================================================
   Canal de Denúncias IMECA — tema alinhado ao site (teal petról)
   ============================================================ */
:root{
  --brand:        #194C5E;   /* teal petról (cabeçalho, hero, rodapé) */
  --brand-2:      #143f4e;
  --card-dark:    #12303A;   /* card escuro do formulário */
  --field-dark:   #0d2731;   /* inputs no card escuro */
  --primary:      #2E7C9C;   /* botões / destaques */
  --primary-dark: #266b87;
  --accent:       #E24A4A;   /* obrigatório / prioridade alta */
  --ok:           #2f9e63;
  --warn:         #c99a2e;
  --panel-gray:   #dadddf;   /* painel de contato do rodapé */
  --bg:           #eef1f4;
  --card:         #ffffff;
  --text:         #1c2530;
  --muted:        #6b7684;
  --border:       #e2e6ec;
  --radius:       14px;
  --shadow:       0 6px 24px rgba(16,32,56,.10);
  --maxw:         1140px;
  --formw:        820px;
  --font:         'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6}
img{max-width:100%}
a{color:var(--primary)}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
h1,h2,h3{font-weight:600;line-height:1.25}

/* ---------- Cabeçalho estilo site ---------- */
.site-header__top{background:var(--brand)}
.site-header__top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:44px;gap:12px}
.social{display:flex;gap:14px;align-items:center}
.social a{color:#fff;opacity:.9;display:inline-flex}
.social a:hover{opacity:1}
.social svg{width:18px;height:18px;fill:currentColor}
.btn-rep{display:inline-block;background:var(--primary);color:#fff;text-decoration:none;
  font-size:.78rem;font-weight:600;letter-spacing:.5px;padding:8px 16px;border-radius:22px}
.btn-rep:hover{background:var(--primary-dark)}

.site-header__nav{background:var(--brand)}
.site-header__nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:74px;gap:16px;flex-wrap:wrap}
.brand img{display:block;height:46px;width:auto}
.mainnav{display:flex;gap:26px;flex-wrap:wrap}
.mainnav a{color:#fff;text-decoration:none;font-size:.95rem;font-weight:500;opacity:.92}
.mainnav a:hover{opacity:1;color:#bfe0ec}

/* Rodapé simples */
.footer-simples{background:var(--brand);color:#cdd9de;text-align:center;padding:28px 20px;font-size:.9rem;border-top:1px solid rgba(255,255,255,.08)}
.footer-simples p{margin:4px 0}
.footer-simples a{color:#bfe0ec;text-decoration:none}
.footer-simples a:hover{text-decoration:underline}
.fs-muted{color:#9fb3bb}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,#1c5568 0%,var(--brand) 100%);color:#fff;text-align:center;
  padding:64px 20px 90px}
.hero h1{font-size:2.5rem;margin:0;letter-spacing:.5px}

/* ---------- Conteúdo ---------- */
.main{max-width:var(--formw);margin:-56px auto 40px;padding:0 20px 20px}

/* Cartões */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px;margin-bottom:22px}

/* Cartão escuro (formulário/intro) — igual ao site */
.card--dark{background:var(--card-dark);color:#fff;border:0;box-shadow:0 12px 40px rgba(9,25,32,.35)}
.card--dark h1,.card--dark h2,.card--dark h3,.card--dark legend,.card--dark label{color:#fff}
.card--dark p{color:#d5e0e4}
.card--dark a{color:#8fd0e6}
.intro__nota{color:#a9bcc4 !important;font-size:.92rem}
.contatos-rh{list-style:none;padding:0;margin:12px 0}
.contatos-rh li{display:flex;align-items:center;gap:10px;padding:5px 0;color:#e7eef1}
.contatos-rh li svg{width:18px;height:18px;fill:var(--primary);flex:none}
.contatos-rh a{color:#e7eef1;text-decoration:none}
.contatos-rh a:hover{text-decoration:underline}

/* Campos */
.campo{margin-bottom:18px}
.campo label,.grupo legend{display:block;font-weight:600;margin-bottom:7px}
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{
  width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:9px;
  font-size:1rem;font-family:inherit;background:#fff;color:var(--text)}
.card--dark input[type=text],.card--dark input[type=email],.card--dark input[type=password],
.card--dark select,.card--dark textarea{
  background:var(--field-dark);border:1px solid rgba(255,255,255,.18);color:#fff}
.card--dark input::placeholder,.card--dark textarea::placeholder{color:#89a0a9}
.card--dark select option{color:#111}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)}
textarea{resize:vertical}
.req{color:var(--accent)}
.ajuda,small.ajuda{color:var(--muted);font-size:.85rem}
.card--dark .ajuda{color:#9fb3bb}
.erro{display:block;color:#ffb4b4;font-size:.85rem;margin-top:5px}

.grupo{border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:14px 16px;margin-bottom:18px}
.card .grupo{border-color:var(--border)}
.grupo legend{padding:0 6px}
.grupo--inline{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.grupo--inline legend{width:100%}
.radio,.check{display:flex;align-items:flex-start;gap:10px;font-weight:400;margin:7px 0;cursor:pointer}
.card--dark .radio,.card--dark .check{color:#e7eef1}
.radio input,.check input{margin-top:3px;flex:none}
.grupo--inline .radio{margin:0}
.consentimento .check{font-weight:500}

/* Botões */
.btn{display:inline-block;border:0;border-radius:9px;padding:13px 22px;font-size:1rem;
  font-weight:600;cursor:pointer;text-decoration:none;text-align:center}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{background:var(--primary-dark)}
.btn--ghost{background:#eef1f5;color:var(--text)}
.btn--ghost:hover{background:#e2e7ee}
.btn--full{width:100%}
.btn--sm{padding:8px 14px;font-size:.9rem}
.card--dark .btn--ghost{background:rgba(255,255,255,.12);color:#fff}
.privacidade{color:#a9bcc4;font-size:.85rem;margin-top:16px}
.card .privacidade{color:var(--muted)}

/* Alertas */
.alerta{padding:13px 16px;border-radius:10px;margin-bottom:18px;font-size:.95rem}
.alerta--erro{background:#fdecea;color:#8a1c13;border:1px solid #f5c6c0}
.alerta--ok{background:#e7f6ec;color:#12633b;border:1px solid #b7e2c6}
.alerta--aviso{background:#fdf6e3;color:#7a5a12;border:1px solid #f0dfa6}

/* Sucesso / protocolo */
.sucesso{text-align:center}
.sucesso__icone{width:60px;height:60px;border-radius:50%;background:var(--ok);color:#fff;
  font-size:2rem;line-height:60px;margin:0 auto 12px}
.protocolo-box{background:#f4f7fb;border:1px dashed var(--primary);border-radius:10px;padding:18px;margin:18px 0;text-align:left}
.protocolo-linha{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.protocolo-linha:last-child{border-bottom:0}
.protocolo-label{color:var(--muted);font-size:.9rem}
.protocolo-valor{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.15rem;font-weight:700;letter-spacing:1px}
.protocolo-valor--token{font-size:.95rem;word-break:break-all}

/* Acompanhamento / chat */
.dados{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin:0}
.dados div{padding:6px 0;border-bottom:1px solid var(--border)}
.dados dt{color:var(--muted);font-size:.82rem;margin:0}
.dados dd{margin:2px 0 0;font-weight:500}
.relato{white-space:pre-wrap;background:#f9fbfd;border:1px solid var(--border);border-radius:8px;padding:14px}
.chat{list-style:none;padding:0;margin:0}
.chat__item{border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:10px;background:#fff}
.chat__item--comite{border-left:4px solid var(--primary)}
.chat__item--voce{border-left:4px solid var(--muted)}
.chat__item--interna{background:#fffdf3;border-left:4px solid var(--warn)}
.chat__autor{font-weight:600;font-size:.9rem}
.chat__data{color:var(--muted);font-size:.8rem;margin-left:8px}
.chat__item p{margin:6px 0 0;white-space:pre-wrap}
.det-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.muted{color:var(--muted)}

/* ---------- Rodapé estilo site ---------- */
.site-footer__cols{background:var(--brand);color:#fff;padding:44px 0}
.site-footer__cols .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:stretch}
.foot-left{display:flex;flex-direction:column;gap:16px}
.foot-left .brand img{height:64px}
.foot-social{display:flex;gap:14px}
.foot-social a{color:#fff;opacity:.9}
.foot-social svg{width:20px;height:20px;fill:currentColor}
.sitemap{list-style:none;padding:0;margin:0;text-align:center}
.sitemap li{margin:9px 0}
.sitemap a{color:#fff;text-decoration:none;opacity:.92}
.sitemap a:hover{opacity:1;text-decoration:underline}
.sitemap-title{font-size:1.3rem;font-weight:600;margin-bottom:14px}
.foot-contato{background:var(--panel-gray);color:#1c2530;border-radius:12px;padding:24px}
.foot-contato h3{color:var(--brand);font-size:1.3rem;margin:0 0 14px;text-align:center}
.foot-contato ul{list-style:none;padding:0;margin:0}
.foot-contato li{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:.95rem}
.foot-contato li svg{width:18px;height:18px;fill:var(--brand);flex:none;margin-top:2px}
.foot-contato a{color:#1c2530;text-decoration:none}
.foot-contato a:hover{text-decoration:underline}
.site-footer__bottom{background:var(--brand-2);color:#cdd9de;font-size:.85rem}
.site-footer__bottom .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 20px}
.site-footer__bottom a{color:#cdd9de;text-decoration:none}
.site-footer__bottom a:hover{text-decoration:underline}

/* ===================== PAINEL (interno) ===================== */
.tela-login{background:var(--brand);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{background:#fff;border-radius:14px;padding:30px;width:100%;max-width:400px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.login-logo{margin-bottom:10px}
.login-box h1{font-size:1.3rem;margin:.2em 0}
.login-sub{color:var(--muted);margin-top:0;margin-bottom:18px}
.login-box form{text-align:left}

.painel{background:var(--bg)}
.painel-top{background:var(--brand);color:#fff}
.painel-top__inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.painel-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:600}
.painel-user{display:flex;align-items:center;gap:14px;font-size:.9rem}
.inline{display:inline}
.painel-main{max-width:1180px;margin:0 auto;padding:22px 20px 50px}
.painel-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.cards-resumo{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:#fff;border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-size:.85rem}
.chip--nova{border-color:var(--primary);color:var(--primary)}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;background:#fff;padding:12px;border:1px solid var(--border);border-radius:10px}
.filtros input,.filtros select{width:auto;min-width:150px;flex:1}
.tabela-wrap{overflow-x:auto;background:#fff;border:1px solid var(--border);border-radius:10px}
.tabela{width:100%;border-collapse:collapse;font-size:.92rem}
.tabela th,.tabela td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border)}
.tabela thead th{background:#f7f9fc;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.4px}
.tabela tbody tr{cursor:pointer}
.tabela tbody tr:hover{background:#f5f8fd}
.tabela .vazio{text-align:center;color:var(--muted);padding:26px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.78rem;font-weight:600}
.badge--nova{background:#e7f0ff;color:#1857c0}
.badge--em_analise{background:#fff4e0;color:#96590f}
.badge--em_apuracao{background:#eae6ff;color:#5b3fb0}
.badge--concluida{background:#e7f6ec;color:#12633b}
.badge--arquivada{background:#eceff3;color:#5a6472}
.prio--alta{color:var(--accent);font-weight:700}
.prio--media{color:var(--warn)}
.prio--baixa{color:var(--muted)}
.tag{background:#eceff3;border-radius:6px;padding:2px 8px;font-size:.78rem}
.tag--id{background:#e7f0ff;color:#1857c0}
.voltar{display:inline-block;margin-bottom:12px;text-decoration:none}
.det-topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.det-grid{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.det-side .card{padding:16px}
.det-side label{display:block;font-weight:600;margin-bottom:12px}
.det-side select{margin-top:5px}
.anexos{list-style:none;padding:0;margin:0}
.anexos li{padding:6px 0;display:flex;gap:10px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}

@media (max-width:820px){
  .hero h1{font-size:1.9rem}
  .dados{grid-template-columns:1fr}
  .det-grid{grid-template-columns:1fr}
  .site-footer__cols .wrap{grid-template-columns:1fr}
  .mainnav{gap:16px}
}