/* Telas do projeto além do formulário: entrada, login, painel. Usa os tokens de base.css. */

.bloco-html > *:first-child{margin-top:0}
.intro p{color:var(--apagado);max-width:38em;margin:0 0 10px}
.intro p:last-child{margin-bottom:0}

/* fecho do formulário */
.fecho-form{display:grid;gap:8px;align-content:start}
.fecho-form label{font-size:13px;color:#cfe5e1;font-weight:600}
.fecho-form input{background:rgba(255,255,255,.95)}
.fecho-form .botao{margin-top:10px;justify-self:start}
.fecho .status{display:block;font-size:14px;margin-top:10px;color:#bfe9e1}
.enviado{display:grid;gap:6px;background:rgba(0,0,0,.18);border-radius:10px;padding:18px;color:#eef5f3}
.enviado b{font-size:18px;color:#fff}

/* entrada e login */
.porta{min-height:100%;display:grid;place-items:center;padding-block:48px}
.porta-caixa{width:100%;max-width:440px;display:grid;gap:22px}
.porta h1{font-size:clamp(28px,5vw,36px);line-height:1.15}
.porta p{color:var(--apagado)}
.cartao{background:var(--branco);border:1px solid var(--fio);border-radius:12px;padding:22px;display:grid;gap:12px}
.cartao label{font-weight:600}
.codigo-campo{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:20px;letter-spacing:.12em;text-transform:uppercase;text-align:center}
.botao-principal{font:inherit;font-weight:600;font-size:15px;background:var(--vexum);color:#fff;border:0;border-radius:6px;padding:12px 20px;cursor:pointer}
.botao-principal:hover{background:var(--vexum-escuro)}
.botao-secundario{font:inherit;font-size:14px;font-weight:500;background:var(--branco);color:var(--tinta);border:1px solid var(--fio-forte);border-radius:6px;padding:8px 14px;cursor:pointer;text-decoration:none;display:inline-block}
.botao-secundario:hover{border-color:var(--vexum)}
.botao-perigo{color:#9b3b1f}
.erro{background:#fbeee9;border:1px solid #e3b5a5;color:#7a2a12;border-radius:8px;padding:10px 14px;font-size:14px}
.ok{background:var(--vexum-claro);border:1px solid var(--vexum);color:var(--vexum-escuro);border-radius:8px;padding:10px 14px;font-size:14px}
.porta .outra{font-size:14px;color:var(--apagado);text-align:center}
.porta .outra a{color:var(--vexum);font-weight:600}

/* painel */
.painel-topo{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:22px;border-bottom:1px solid var(--fio)}
.painel-nav{display:flex;gap:6px;flex-wrap:wrap}
.painel-nav a{font-size:14px;color:var(--apagado);text-decoration:none;padding:6px 10px;border-radius:6px}
.painel-nav a.ativo,.painel-nav a:hover{color:var(--tinta);background:var(--vexum-claro)}
.painel-corpo{padding-block:32px 64px;display:grid;gap:22px}
.painel-cab{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.painel-cab h1{font-size:clamp(26px,3.6vw,34px)}
.painel-cab p{color:var(--apagado);margin-top:6px}
.filtros{display:flex;gap:6px;flex-wrap:wrap}
.filtros a{font-size:13.5px;text-decoration:none;color:var(--apagado);border:1px solid var(--fio);border-radius:999px;padding:5px 12px;background:var(--branco)}
.filtros a.ativo{border-color:var(--vexum);color:var(--vexum-escuro);background:var(--vexum-claro);font-weight:600}
.tabela-wrap{overflow-x:auto;background:var(--branco);border:1px solid var(--fio);border-radius:12px}
table.tabela{width:100%;border-collapse:collapse;font-size:14.5px}
.tabela th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--apagado);font-weight:600;padding:12px 16px;border-bottom:1px solid var(--fio);white-space:nowrap}
.tabela td{padding:12px 16px;border-bottom:1px solid var(--fio);vertical-align:top}
.tabela tr:last-child td{border-bottom:0}
.tabela a{color:var(--tinta);font-weight:600;text-decoration:none}
.tabela a:hover{color:var(--vexum)}
.mudo-num{color:var(--apagado);font-variant-numeric:tabular-nums;white-space:nowrap}
.selo{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:2px 10px;white-space:nowrap}
.selo.aberto{background:#eef3f8;color:#2d4f74}
.selo.enviado{background:var(--vexum-claro);color:var(--vexum-escuro)}
.selo.encerrado{background:#f1f1ef;color:#6b6b66}
.selo.expirado{background:#fbf1e1;color:#7a4d0c}
.vazio{padding:40px;text-align:center;color:var(--apagado)}
.duas-col{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
@media (max-width:900px){ .duas-col{grid-template-columns:1fr} }
.lado{display:grid;gap:12px}
.dados{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.dados dt{color:var(--apagado)}
.dados dd{margin:0}
.acoes{display:grid;gap:8px}
.acoes form{display:flex;gap:8px;align-items:center}
.acoes input[type=number]{width:80px}
.resp-secao{background:var(--branco);border:1px solid var(--fio);border-radius:12px;padding:18px 20px;display:grid;gap:10px}
.resp-secao h2{font-size:20px}
.resp-secao h2 span{color:var(--vexum);margin-right:8px}
.resp-linha{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:6px 18px;padding:8px 0;border-top:1px solid var(--fio);font-size:14.5px}
.resp-linha:first-of-type{border-top:0}
.resp-linha .r{color:var(--apagado)}
.resp-linha ul{margin:0;padding-left:18px;display:grid;gap:2px}
.resp-area{margin-bottom:6px}
.resp-area b{display:block}
@media (max-width:620px){ .resp-linha{grid-template-columns:1fr} }
.codigo-grande{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:clamp(28px,6vw,44px);letter-spacing:.1em;color:var(--vexum-escuro);background:var(--vexum-claro);border:1px dashed var(--vexum);border-radius:12px;padding:18px;text-align:center;user-select:all}
.form-linha{display:grid;gap:6px}
.form-linha label{font-weight:600}
select.campo{font:inherit;font-size:15.5px;width:100%;background:var(--branco);color:var(--tinta);border:1px solid var(--fio-forte);border-radius:6px;padding:10px 12px}
.registro{font-size:13px;color:var(--apagado);display:grid;gap:4px;max-height:260px;overflow:auto}

/* editor de formulários */
.editor textarea#definicao{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:13px;line-height:1.5;min-height:62vh;white-space:pre;tab-size:2}
.referencia dl{margin:0;display:grid;gap:6px;font-size:13.5px}
.referencia dt{font-weight:600;color:var(--vexum)}
.referencia dd{margin:0 0 4px;color:var(--apagado)}
.referencia code,.editor code{font-size:12.5px;background:var(--vexum-claro);padding:1px 4px;border-radius:4px}