/* ============================================================
   e-SIC Moderno — Identidade institucional (Padrão Digital gov.br)
   Folha única, compartilhada por todas as telas (portal + backoffice).
   Fonte Raleway auto-hospedada (CSP-safe). Sem dependências externas.
   ============================================================ */

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400 800;            /* arquivo variável: cobre 400–800 */
  font-display: swap;
  src: url('/assets/fonts/raleway.woff2') format('woff2');
}

:root {
  /* Paleta gov.br */
  --blue-900:#071D41; --blue-800:#0C326F; --blue-700:#1351B4; --blue-600:#155BCB;
  --blue-200:#C5D4EB; --blue-100:#E8EEF7; --blue-050:#F4F7FB;
  --yellow:#FFCD07; --green:#168821; --green-bg:#E3F5E1; --red:#E52207; --amber:#C98B00;
  --ink:#1B2733; --ink-soft:#45586C; --line:#DCE3EC; --line-soft:#EAEFF5;
  --surface:#FFFFFF; --bg:#F0F4F9;
  --radius:14px; --radius-sm:9px;
  --shadow-sm:0 1px 2px rgba(7,29,65,.06), 0 2px 6px rgba(7,29,65,.05);
  --shadow-md:0 4px 14px rgba(7,29,65,.08), 0 10px 30px rgba(7,29,65,.06);
  --shadow-lg:0 10px 40px rgba(7,29,65,.12);
  --maxw:1180px;
  --header-grad:linear-gradient(120deg, #0C326F 0%, #1351B4 60%, #155BCB 100%);
  --font:'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--font); color:var(--ink); line-height:1.55;
  background:radial-gradient(1200px 500px at 85% -10%, #E8EEF7 0%, transparent 60%), var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4 { line-height:1.2; margin:0; letter-spacing:-.01em; color:var(--blue-900); }
a { color:var(--blue-700); text-decoration:none; }
a:hover { text-decoration:underline; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Layout ---------- */
.wrap, .container { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
main { padding:34px 0 56px; }
main.container { padding:34px 24px 56px; }
main > h1, main > h2 { margin-bottom:10px; }
main > h1:first-child { font-size:27px; font-weight:800; margin-bottom:14px; }
main > p { color:var(--ink-soft); max-width:860px; }

/* ---------- Masthead institucional ---------- */
.masthead { background:var(--header-grad); color:#fff; position:relative; overflow:hidden; }
.masthead::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(700px 300px at 100% 0%, rgba(255,255,255,.10), transparent 70%),
             linear-gradient(180deg, transparent 60%, rgba(7,29,65,.25));
}
.mast-wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; min-height:92px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap; position:relative; z-index:1; }
.masthead .brand { display:flex; align-items:center; gap:15px; }
.masthead .brand-logo { max-height:56px; max-width:230px; background:#fff; border-radius:10px; padding:5px 9px; box-shadow:var(--shadow-sm); }
.masthead .brasao {
  width:52px; height:52px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-weight:800; font-size:18px; letter-spacing:.02em; color:var(--blue-800);
  background:radial-gradient(circle at 32% 30%, #fff 0 16%, #FFE89A 17% 42%, var(--yellow) 43% 100%);
  box-shadow:0 0 0 4px rgba(255,255,255,.18), var(--shadow-md);
}
.masthead .brand-txt small { display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#BFD2F0; font-weight:600; }
.masthead .brand-txt strong { display:block; font-size:20px; font-weight:800; letter-spacing:-.01em; }
.masthead .mast-actions { margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; }
.btn-pill {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:9px 16px; font-size:13.5px; font-weight:600; transition:.18s;
}
.btn-pill:hover { background:#fff; color:var(--blue-800); text-decoration:none; border-color:#fff; transform:translateY(-1px); }
.btn-pill.solid { background:var(--yellow); color:var(--blue-900); border-color:var(--yellow); font-weight:700; }
.btn-pill.solid:hover { background:#FFD83A; color:var(--blue-900); }

/* ---------- Breadcrumb (opcional) ---------- */
.crumbs { background:var(--surface); border-bottom:1px solid var(--line); }
.crumbs .wrap { display:flex; align-items:center; gap:9px; min-height:46px; font-size:13px; color:var(--ink-soft); flex-wrap:wrap; }
.crumbs a { color:var(--ink-soft); } .crumbs .sep { color:var(--blue-200); } .crumbs .here { color:var(--ink); font-weight:600; }

/* ---------- Navegação do backoffice ---------- */
.admin-nav { background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm); }
.admin-nav { display:flex; flex-wrap:wrap; gap:2px; max-width:var(--maxw); margin:0 auto; padding:6px 16px; }
.admin-nav a { color:var(--ink-soft); font-size:13.5px; font-weight:600; padding:9px 14px; border-radius:8px; }
.admin-nav a:hover { background:var(--blue-050); color:var(--blue-700); text-decoration:none; }

/* ---------- Cartões ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.lai-card { padding:28px 32px; margin-bottom:28px; position:relative; overflow:hidden; }
.lai-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(var(--blue-700), var(--blue-600)); }
.lai-card h2 { font-size:19px; margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.lai-card .tag { font-size:11px; background:var(--green-bg); color:var(--green); padding:3px 9px; border-radius:999px; font-weight:700; }
.lai-card p { color:var(--ink-soft); margin:0 0 12px; max-width:880px; } .lai-card p:last-child { margin-bottom:0; }

/* ---------- Cards de ação ---------- */
.actions { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin:8px 0 6px; }
.action {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 24px 24px; text-align:center; box-shadow:var(--shadow-sm);
  transition:.22s cubic-bezier(.2,.7,.3,1); position:relative; overflow:hidden; display:block; color:inherit;
}
.action::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg, var(--blue-700), var(--blue-600)); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.action:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--blue-200); text-decoration:none; }
.action:hover::after { transform:scaleX(1); }
.action .ring { width:74px; height:74px; border-radius:50%; margin:0 auto 16px; background:var(--blue-050);
  display:grid; place-items:center; color:var(--blue-700); box-shadow:inset 0 0 0 1px var(--blue-100); transition:.22s; font-size:30px; }
.action:hover .ring { background:var(--blue-700); color:#fff; transform:scale(1.06); }
.action h3 { font-size:16px; font-weight:800; letter-spacing:.02em; }
.action p { font-size:13px; color:var(--ink-soft); margin:8px 0 0; }

/* ---------- Totalizadores ---------- */
.totais { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px; margin-bottom:26px; }
.total { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow-sm); display:flex; gap:16px; align-items:center; }
.total .num { font-size:30px; font-weight:800; color:var(--blue-900); line-height:1; }
.total .cap { font-size:13px; color:var(--ink-soft); margin-top:4px; font-weight:600; }

/* ---------- Tabelas ---------- */
table { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); margin:8px 0 18px; }
thead th { text-align:left; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft);
  font-weight:700; padding:12px 18px; background:#FBFCFE; border-bottom:1px solid var(--line-soft); }
tbody td { padding:12px 18px; font-size:13.5px; border-bottom:1px solid var(--line-soft); color:var(--ink); vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; } tbody tr:hover { background:var(--blue-050); }

/* ---------- Formulários ---------- */
form { margin:0; }
label { display:block; font-size:13.5px; font-weight:600; color:var(--ink-soft); margin:14px 0 5px; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel],
input[type=number], input[type=date], input:not([type]), select, textarea {
  display:block; width:100%; max-width:480px; font-family:inherit; font-size:14.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 13px; transition:.15s;
}
textarea { max-width:680px; min-height:120px; resize:vertical; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(21,91,203,.18); }
input[type=file] { font-size:13.5px; }
fieldset { border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 18px; margin:16px 0; }
fieldset legend { font-weight:700; color:var(--blue-900); padding:0 6px; }
fieldset label { display:flex; align-items:center; gap:8px; font-weight:500; color:var(--ink); margin:6px 0; }
fieldset input[type=checkbox] { width:auto; display:inline-block; }

/* ---------- Botões ---------- */
button, input[type=submit], .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:700; line-height:1; padding:11px 20px; margin-top:4px;
  background:var(--blue-700); color:#fff; border:1px solid var(--blue-700); border-radius:999px; transition:.16s;
}
button:hover, input[type=submit]:hover, .btn:hover { background:var(--blue-800); border-color:var(--blue-800); }
.btn.secondary, button.secondary { background:transparent; color:var(--blue-700); }
.btn.secondary:hover, button.secondary:hover { background:var(--blue-050); color:var(--blue-800); }
/* botões compactos dentro de linhas de tabela */
td form { display:inline; }
td button, td .btn { padding:6px 12px; font-size:12.5px; font-weight:600; }
a.btn { color:#fff; } a.btn:hover { text-decoration:none; }

/* ---------- Alertas ---------- */
[role=alert] { padding:11px 15px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; margin:14px 0; }
[role=alert] { background:#FDECEA; color:var(--red); border:1px solid #F6C9C2; }
.alert-ok[role=alert], [role=alert].ok { background:var(--green-bg); color:var(--green); border-color:#BBE3BD; }

/* ---------- Rodapé ---------- */
footer.site-footer { margin-top:48px; background:linear-gradient(180deg, var(--blue-800), var(--blue-900)); color:#C7D4EA; }
.foot-wrap { max-width:var(--maxw); margin:0 auto; padding:40px 24px 30px; display:grid; grid-template-columns:1.3fr auto; gap:32px; align-items:start; }
footer.site-footer h4 { color:#fff; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; }
footer.site-footer strong { color:#fff; font-size:16px; display:block; margin-bottom:6px; }
footer.site-footer ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
footer.site-footer a { color:#C7D4EA; font-size:13.5px; } footer.site-footer a:hover { color:#fff; }
.foot-brasao { text-align:center; } .foot-brasao .brasao { margin:0 auto 10px; }
.subfoot { border-top:1px solid rgba(255,255,255,.1); }
.subfoot .wrap { display:flex; align-items:center; justify-content:space-between; min-height:54px; font-size:12.5px; color:#8FA6C6; flex-wrap:wrap; gap:10px; }

/* ---------- Responsivo ---------- */
@media (max-width:940px) {
  .actions { grid-template-columns:1fr; }
  .foot-wrap { grid-template-columns:1fr; gap:26px; }
  .foot-brasao { text-align:left; } .foot-brasao .brasao { margin:0 0 10px; }
  .masthead .mast-actions { width:100%; margin-left:0; }
}
@media (max-width:560px) { main > h1:first-child { font-size:22px; } .mast-wrap { padding:14px 20px; } }

/* ---------- Menu de usuario na masthead ---------- */
.mast-user { display:inline-flex; align-items:center; gap:7px; color:#fff; font-weight:700; font-size:14px; padding:8px 4px; }
.mast-logout { display:inline; margin:0; }
.mast-logout button.btn-pill { margin-top:0; }

/* ---------- Shell do painel super-admin ---------- */
.painel-top { display:flex; justify-content:space-between; align-items:center; background:#1351b4; color:#fff; padding:10px 18px; }
.painel-brand { font-weight:800; }
.painel-top-right { display:inline-flex; align-items:center; gap:10px; font-size:14px; }
.painel-logout { display:inline; margin:0; }
.painel-shell { display:flex; min-height:calc(100vh - 48px); }
.painel-side { width:210px; background:#0f1b2d; padding:16px 0; }
.painel-side a { display:block; color:#cdd8ea; text-decoration:none; padding:11px 20px; font-weight:600; }
.painel-side a:hover { background:#16263f; color:#fff; }
.painel-side a.ativo { background:#1351b4; color:#fff; }
.painel-main { flex:1; padding:24px 28px; }
@media (max-width:640px){ .painel-shell{ flex-direction:column; } .painel-side{ width:100%; display:flex; flex-wrap:wrap; } }