/* ============================================================
   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); position:sticky; top:0; z-index:30; }
.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; }

/* ---------- Grade de 2 colunas (ex.: estatisticas) ---------- */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:22px; }

/* ---------- 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; }
  .grid-2 { grid-template-columns:1fr; gap:18px; }
}
@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; } }

/* ---------- Timeline de acompanhamento ---------- */
.timeline { list-style:none; padding-left:18px; border-left:3px solid #1351b4; margin:12px 0; }
.timeline li { position:relative; margin:0 0 16px; padding-left:14px; }
.timeline li::before { content:''; position:absolute; left:-25px; top:3px; width:12px; height:12px; border-radius:50%; background:#1351b4; }
.timeline .tl-data { display:block; font-size:12px; color:#555; }
.timeline .tl-titulo { display:block; }
.timeline .tl-desc { display:block; font-size:14px; color:#333; }

/* ---------- Impressao ---------- */
@media print { .no-print, .masthead, .site-footer, .crumbs { display:none !important; } .container { max-width:100%; } }
.folha-impressao { background:#fff; }

/* ---------- Badge de situacao ---------- */
.badge { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700;
  padding:4px 11px; border-radius:999px; line-height:1.3; white-space:nowrap; }
.badge .badge-dot { width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.badge--info { background:var(--blue-100); color:var(--blue-700); }
.badge--andamento { background:#FFF4D6; color:var(--amber); }
.badge--prorrogada { background:#FBE7C6; color:#9A5B00; }
.badge--ok { background:var(--green-bg); color:var(--green); }
.badge--negada { background:#FDECEA; color:var(--red); }
.badge--neutro { background:#EEF1F5; color:#5A6B7B; }

/* Fase do ciclo de vida (agrupa situacoes): Em andamento x Concluida */
.fase { display:inline-block; margin-left:6px; font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-soft); }
.fase::before { content:"• "; }
.fase--concluida { color:var(--green); }

/* ---------- Ficha de dados (dl) ---------- */
.ficha { margin:0; display:grid; gap:14px; }
.ficha > div { display:grid; gap:3px; }
.ficha dt { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; margin:0; }
.ficha dd { margin:0; font-size:14.5px; color:var(--ink); font-weight:600; }

/* ---------- Layout de detalhe (2 colunas) ---------- */
.detalhe-grid { display:grid; grid-template-columns:1fr 330px; gap:24px; align-items:start; margin-top:8px; }
.detalhe-main { display:grid; gap:20px; min-width:0; }
.detalhe-side { display:grid; gap:20px; }
@media (max-width:940px){ .detalhe-grid { grid-template-columns:1fr; } }

/* ---------- Card de bloco com titulo ---------- */
.card-bloco { padding:22px 24px; position:relative; overflow:hidden; }
.card-bloco > h2 { font-size:17px; margin-bottom:12px; padding-left:12px; position:relative; }
.card-bloco > h2::before { content:""; position:absolute; left:0; top:2px; bottom:2px; width:4px; border-radius:3px;
  background:linear-gradient(var(--blue-700), var(--blue-600)); }
.card-bloco p { color:var(--ink); margin:0; }

/* ---------- Abas de acao (CSS puro) ---------- */
.acoes-tabs > input[type=radio] { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.acoes-tabs .tab-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.acoes-tabs .tab-btn { display:inline-flex; align-items:center; cursor:pointer; font-size:13px; font-weight:700;
  padding:8px 15px; border-radius:999px; border:1px solid var(--line); color:var(--blue-700); background:var(--surface); transition:.15s; }
.acoes-tabs .tab-btn:hover { background:var(--blue-050); }
.acoes-tabs .tab-panel { display:none; }
#tab-receber:checked  ~ .panel-receber,
#tab-responder:checked ~ .panel-responder,
#tab-prorrogar:checked ~ .panel-prorrogar,
#tab-negar:checked     ~ .panel-negar,
#tab-tramitar:checked  ~ .panel-tramitar { display:block; }
#tab-receber:checked  ~ .tab-bar label[for=tab-receber],
#tab-responder:checked ~ .tab-bar label[for=tab-responder],
#tab-prorrogar:checked ~ .tab-bar label[for=tab-prorrogar],
#tab-negar:checked     ~ .tab-bar label[for=tab-negar],
#tab-tramitar:checked  ~ .tab-bar label[for=tab-tramitar] { background:var(--blue-700); color:#fff; border-color:var(--blue-700); }

/* ---------- Toolbar / linha de botoes ---------- */
.btn-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:6px 0 18px; }
.btn-row label { margin:0; }
.btn-row .spacer { margin-left:auto; }

/* ---------- Estado vazio ---------- */
.vazio { text-align:center; padding:40px 24px; color:var(--ink-soft); }
.vazio p { margin:0 0 16px; }

/* ---------- Lista de anexos (botoes) ---------- */
.anexos-lista { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.anexos-lista a { width:100%; justify-content:flex-start; }

/* ---------- Data de inclusao do anexo ---------- */
.anexo-data { display:block; font-size:12px; color:var(--ink-soft); margin-top:3px; }

/* ---------- Origem do anexo (cidadao x resposta do orgao) ---------- */
.anexo-origem { display:inline-block; font-size:11px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-top:3px; }

/* ---------- Aviso/feedback (flash) ---------- */
.aviso { padding:10px 14px; border-radius:8px; font-size:14px; margin:0 0 16px; }
.aviso--ok { background:#e6f4ea; color:#1e7a3c; border:1px solid #bfe3c9; }
.aviso--erro { background:#fdecec; color:#b3261e; border:1px solid #f5c2c0; }

/* ---------- Caixa de anexos (progressive enhancement) ---------- */
.anexo-box { margin:4px 0 14px; }
.anexo-oculto { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
.anexo-add { margin-top:0; }
.anexo-add::before { content:"+"; font-size:16px; line-height:1; margin-right:4px; }
.anexo-contador { font-size:13px; color:var(--ink-soft); font-weight:600; }
.anexo-erro { font-size:13px; color:var(--red); margin:8px 0 0; }
.anexo-itens { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; }
.anexo-item { display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:9px 12px; box-shadow:var(--shadow-sm); }
.anexo-item-nome { font-size:13.5px; font-weight:600; color:var(--ink); word-break:break-all; }
.anexo-item-tam { font-size:12px; color:var(--ink-soft); margin-left:auto; white-space:nowrap; }
.anexo-remover { flex:none; width:26px; height:26px; padding:0; margin:0; border-radius:50%;
  background:#FDECEA; color:var(--red); border:1px solid #F6C9C2; font-size:16px; line-height:1; font-weight:700; }
.anexo-remover:hover { background:var(--red); color:#fff; border-color:var(--red); }

/* ---------- Telas de autenticacao (card centralizado) ---------- */
body.auth-page { display:flex; flex-direction:column; min-height:100vh; }
.auth-wrap { flex:1; display:flex; align-items:center; justify-content:center; padding:32px 18px;
  background:var(--header-grad); position:relative; overflow:hidden; }
.auth-wrap::after { content:""; position:absolute; inset:0; background:
  radial-gradient(900px 400px at 85% -10%, rgba(255,255,255,.12), transparent 60%); pointer-events:none; }
.auth-card { position:relative; z-index:1; width:100%; max-width:420px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 18px 50px rgba(7,29,65,.28); padding:30px 30px 26px; }
.auth-card--larga { max-width:520px; }
.auth-brand { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; margin-bottom:18px; }
.auth-brand .brasao, .auth-brand .brand-logo { margin:0; }
.auth-brand .auth-nome { font-size:18px; font-weight:800; color:var(--blue-900); letter-spacing:-.01em; }
.auth-brand .auth-sub { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; }
.auth-card h1 { font-size:21px; text-align:center; margin:0 0 16px; }
.auth-card form button[type=submit], .auth-card form input[type=submit] { width:100%; margin-top:8px; }
.auth-card label { margin-top:12px; }
.auth-card label:first-of-type { margin-top:0; }
.auth-card input { max-width:none; }
.auth-links { margin:18px 0 0; text-align:center; font-size:13.5px; color:var(--ink-soft); }
.auth-links a { font-weight:600; }

/* ---------- Pesquisa de satisfacao ---------- */
.satisfacao-opcoes { display:flex; flex-wrap:wrap; gap:8px 18px; margin:6px 0 4px; }
.satisfacao-opcoes label { display:inline-flex; align-items:center; gap:7px; margin:0; font-weight:600; color:var(--ink); }
.satisfacao-opcoes input[type=radio] { width:auto; display:inline-block; margin:0; }
.satisfacao-dist { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px; }
.satisfacao-dist li { display:grid; grid-template-columns:130px 1fr 44px; align-items:center; gap:10px; font-size:13.5px; }
.satisfacao-dist .barra { height:10px; border-radius:999px; background:var(--blue-100); overflow:hidden; }
.satisfacao-dist .barra span { display:block; height:100%; background:var(--blue-600); }
.satisfacao-media { font-size:30px; font-weight:800; color:var(--blue-800); line-height:1; }

/* ---------- Tipos e listas (admin) ---------- */
.tipos-secao { margin-bottom:30px; }
.tipos-secao .col-acoes { width:1%; white-space:nowrap; text-align:right; }
.tipos-secao .td-vazio { color:var(--ink-soft); text-align:center; padding:22px 18px; }
.tipos-add input[name=nome] { width:240px; margin-top:0; }
.tipos-add select { width:auto; min-width:150px; margin-top:0; }

/* ============================================================
   Mobile / telas pequenas — POR ULTIMO no arquivo para que os
   overrides vencam as definicoes-base (mesma especificidade).
   ============================================================ */
@media (max-width:640px) {
  /* mais area util */
  .container, main.container { padding-left:16px; padding-right:16px; }
  .wrap { padding-left:16px; padding-right:16px; }
  main { padding:22px 0 40px; }
  main.container { padding-top:22px; padding-bottom:40px; }

  /* masthead compacto */
  .mast-wrap { min-height:0; padding:14px 16px; gap:12px; }
  .masthead .brand-txt strong { font-size:17px; }
  .masthead .mast-actions { gap:8px; }
  .btn-pill { padding:8px 13px; font-size:13px; }

  /* tabelas: rolagem horizontal em vez de estourar a pagina */
  main table { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  thead th, tbody td { padding:10px 12px; }

  /* cartoes e blocos com menos respiro lateral */
  .lai-card { padding:22px 18px; }
  .card-bloco { padding:18px 16px; }
  .detalhe-grid { gap:16px; }

  /* navegacao do backoffice em linha rolavel (nao empilha alto demais) */
  .admin-nav { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:6px 10px; }
  .admin-nav a { white-space:nowrap; }

  /* satisfacao: rotulo nao espreme demais */
  .satisfacao-dist li { grid-template-columns:96px 1fr 36px; gap:8px; }

  /* ---- Telas de login/autenticacao ---- */
  .auth-wrap { padding:20px 14px; }
  .auth-card, .auth-card--larga { max-width:100%; padding:24px 20px 22px; }
  .auth-card h1 { font-size:20px; }
  .auth-brand { gap:8px; margin-bottom:14px; }
  .auth-brand .brasao { width:46px; height:46px; font-size:16px; }
  .auth-brand .brand-logo { max-height:48px; }
}

@media (max-width:380px) {
  .auth-wrap { padding:14px 10px; }
  .auth-card, .auth-card--larga { padding:20px 16px 18px; }
}