/* Login, cadastro e Admin: só tokens, sem estilo inline (CSP). */
.caixa { max-width: 400px; margin: 12vh auto 0; padding: 0 24px; }
.caixa__titulo, .pag__titulo { font: 700 clamp(2rem, 4vw, 3rem)/1 var(--disp); text-transform: uppercase; margin-bottom: 24px; }
.pag { max-width: 1100px; margin: 0 auto; padding: 32px 32px 80px; }
.form { display: grid; gap: 8px; }
.form--larga { margin-top: 24px; padding: 24px; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 8px; }
.rot { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tx2); margin-top: 8px; }
.campo { width: 100%; background: var(--s2); color: var(--tx); border: 1px solid var(--line2); border-radius: var(--r-md); padding: 12px 14px; font: inherit; }
.campo:focus-visible { outline-offset: 1px; }
.bt { background: var(--acc); color: var(--on-acc); font-weight: 600; padding: 12px 20px; border-radius: var(--r-pill); margin-top: 12px; justify-self: start; }
.bt:hover { background: var(--acc-forte); }
.bt--peq { padding: 7px 14px; font-size: 13px; margin: 0 0 0 6px; }
.bt--vazio { background: transparent; color: var(--tx); border: 1px solid var(--line2); }
.bt--vazio:hover { background: var(--s3); }
.lnk { color: var(--acc-forte); text-decoration: underline; text-underline-offset: 3px; }
.rodape { margin-top: 20px; color: var(--tx2); font-size: 14px; }
.aviso { padding: 12px 14px; border-radius: var(--r-md); margin-bottom: 16px; font-size: 14px; border: 1px solid var(--line2); }
.aviso--erro { border-color: var(--acc); background: var(--acc-luz); }
.aviso--ok { background: var(--s2); }
.sec { font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tx2); margin: 36px 0 12px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 22px; display: grid; gap: 6px; }
.card b { font: 700 2rem/1 var(--disp); }
.card span { color: var(--tx2); font-size: 13px; }
.tab { overflow-x: auto; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
th { text-align: left; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tx2); padding: 14px 16px; }
td { padding: 12px 16px; border-top: 1px solid var(--line); }
.acts { text-align: right; white-space: nowrap; }
.acts form { display: inline; }
.vazio { color: var(--tx3); padding: 16px 0; }

.card, .tab, .form--larga { background: var(--grad-card); }

.erro-pilha { max-width: 640px; max-height: 260px; overflow: auto; margin-top: 8px; padding: 10px; border-radius: var(--r-md); background: var(--s2); font: 400 11px/1.5 var(--mono); white-space: pre-wrap; color: var(--tx2); }