:root{--bg-page:#f7f7f6;--bg-card:#fff;--bg-alt:#f1f1ef;--text:#18181b;--text-2:#6c6c72;--border:#e3e3e6;--accent:#ff5a1f;--accent-ink:#1f1006;--accent-soft:#ffe8db;--success:#1e7e34;--success-bg:#e6f4ea;--warn:#8a6404;--warn-bg:#fdf3dc;--danger:#b3261e;--error-bg:#fbeceb;--shadow:0 4px 20px rgba(0,0,0,.06);color-scheme:light}
:root[data-theme=dark]{--bg-page:#0e0e11;--bg-card:#18181c;--bg-alt:#212126;--text:#f4f4f5;--text-2:#97979f;--border:#2b2b31;--accent-ink:#17100b;--accent-soft:#341c10;--success:#7fd196;--success-bg:#1e3324;--warn:#e0b34d;--warn-bg:#33290f;--danger:#e0938d;--error-bg:#341b19;--shadow:0 4px 20px rgba(0,0,0,.35);color-scheme:dark}
@media(prefers-color-scheme:dark){:root:not([data-theme]){--bg-page:#0e0e11;--bg-card:#18181c;--bg-alt:#212126;--text:#f4f4f5;--text-2:#97979f;--border:#2b2b31;--accent-ink:#17100b;--accent-soft:#341c10;--success:#7fd196;--success-bg:#1e3324;--warn:#e0b34d;--warn-bg:#33290f;--danger:#e0938d;--error-bg:#341b19;--shadow:0 4px 20px rgba(0,0,0,.35);color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg-page);color:var(--text);font:15px/1.5 system-ui,sans-serif}
a{color:var(--accent)}
h1{margin:0 0 12px;font-size:22px}

/* moldura */
.shell{max-width:none;margin:0;padding:16px 38px} /* usa a tela toda, com borda de ~1 cm (38 px) em cada lado */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--text);text-decoration:none}
.brand-mark{width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:800}
.brand small{display:block;font-weight:400;color:var(--text-2);font-size:12px;line-height:1}
.top-right{display:flex;align-items:center;gap:8px}
.top-right form{margin:0}
.quem{color:var(--text-2);font-size:14px}
.layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:16px;align-items:start}
nav.lateral{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:8px;position:sticky;top:16px;display:flex;flex-direction:column;gap:2px}
nav.lateral a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;color:var(--text-2);text-decoration:none;font-size:13.5px;font-weight:600}
nav.lateral a:hover{color:var(--text);background:var(--bg-alt)}
nav.lateral a[aria-current=page]{background:var(--bg-alt);color:var(--text);font-weight:700;box-shadow:inset 3px 0 0 var(--accent)}
main{min-width:0}
.sub-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.sub-nav a{padding:6px 12px;border:1px solid var(--border);border-radius:999px;font-size:13px;color:var(--text-2);text-decoration:none;background:var(--bg-card)}
.sub-nav a[aria-current=page]{background:var(--accent-soft);color:var(--text);border-color:var(--accent);font-weight:600}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cartao{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow);margin-bottom:14px}
.inicio{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.inicio h2{margin:0 0 8px;font-size:16px}
.inicio ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.entrar{max-width:360px;margin:12vh auto 0;padding:0 16px}

/* link com cara de botão (alvo de toque de 44 px) e a página "não existe" */
a.botao{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--border);border-radius:8px;background:var(--bg-card);color:var(--text);text-decoration:none}
a.botao.principal{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.nao-encontrado{max-width:560px}
.codigo-erro{margin:0 0 6px;font-size:44px;font-weight:800;line-height:1;color:var(--accent)}

/* componentes usados pelas peças */
input,button,select,textarea{font:inherit;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg-alt);color:var(--text)}
button{cursor:pointer;background:var(--bg-card)}
button.principal{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.erro{color:var(--danger)}
.rolagem{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--border);vertical-align:top}
th{color:var(--text-2);font-weight:600;font-size:14px}
.selo{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--border);font-size:13px}
.suave{color:var(--text-2)}
.chave{font-family:ui-monospace,monospace;font-size:13px;word-break:break-all}
.aviso{padding:10px 12px;border:1px solid var(--border);border-radius:8px;margin:12px 0}
.aviso.ok{border-color:var(--success);background:var(--success-bg)}
.aviso.alerta{border-color:var(--warn);background:var(--warn-bg)}
.aviso.erro{border-color:var(--danger);background:var(--error-bg);color:var(--text)}
.orientacao{color:var(--text-2);font-size:14px;margin:4px 0 0}
details>summary{cursor:pointer;color:var(--accent)}
.acoes{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.acoes form{margin:0;display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
label.campo{display:block;margin:10px 0 4px;color:var(--text-2);font-size:14px}
.linha-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

@media(max-width:800px){
.shell{padding:16px}
.layout{display:block}
nav.lateral{position:static;flex-direction:row;flex-wrap:wrap;margin-bottom:12px;padding:5px} /* o menu pula de linha, sem barra de rolagem */
nav.lateral a{white-space:nowrap;padding:8px 12px;font-size:12.5px}
nav.lateral a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--accent)}
table.empilhar thead{display:none}
table.empilhar tr{display:block;padding:10px 0;border-bottom:1px solid var(--border)}
table.empilhar td{display:block;border:0;padding:3px 0}
table.empilhar td[data-rotulo]::before{content:attr(data-rotulo) ": ";color:var(--text-2);font-size:13px}
}

/* Regras de tamanho de tela da espinha (14/10/2026): valem para TODA tela que usa a moldura; peça nova herda sem fazer nada.
   O teste test/responsivo.test.js percorre as telas do menu em 7 larguras e falha se alguma estourar ou tiver alvo de toque pequeno. */
input,select,textarea,button,img,video,canvas,iframe{max-width:100%}
input[type=file]{width:100%}
@media(max-width:800px),(pointer:coarse){
form:not(.linha-form) :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]){width:100%}
.linha-form :is(select,input:not([type=checkbox]):not([type=radio])){flex:1 1 150px;min-width:0}
button,select,summary,input:not([type=checkbox]):not([type=radio]):not([type=hidden]){min-height:44px}
nav a,td a,li a,.sub-nav a,.brand{display:inline-flex;align-items:center;min-height:44px}
/* link dentro de frase ganha área de toque de 44 px sem mudar o espaçamento (padding compensado por margem negativa) */
p a{display:inline-block;padding:13px 4px;margin:-13px -4px}
input[type=checkbox],input[type=radio]{width:22px;height:22px}
}