/* ===================================================================
   VeyronERP — estilos específicos de cada tela. Cada etapa acrescenta
   a sua seção; o que é compartilhado fica em base.css.
   =================================================================== */

/* ===== login ===== */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--e-4)}
.login-caixa{width:min(400px,100%);background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r-3);padding:var(--e-6) var(--e-5);box-shadow:var(--sombra);display:flex;flex-direction:column;gap:var(--e-3)}
.login-caixa .mv{width:150px;margin:0 auto var(--e-2)}
.login-img{display:flex;justify-content:center}
.login-img .img-tile{background:transparent}
.login-caixa h1{text-align:center}
.login-caixa p{text-align:center;margin:0}
.login-demo{border-top:1px dashed var(--borda);padding-top:var(--e-3);margin-top:var(--e-2);display:flex;flex-direction:column;gap:6px}
.login-demo .linha{gap:6px}

/* ===== cadastros ===== */
.cadastro .filtros{margin-top:4px}
.tabela td.col-img,.tabela th.col-img{width:48px;padding:4px 8px}
.tabela tr.inativa td{opacity:.5;text-decoration:line-through}
.tabela tr.inativa td.col-img{text-decoration:none}
.ok-ico{color:var(--ok)}
.gold-ico{color:var(--gold)}
.ico.virado{transform:rotate(180deg)}
.secao-form{margin:8px 0 -4px;padding-top:8px;border-top:1px dashed var(--borda)}
.secao-form:first-child{border-top:0;padding-top:0;margin-top:0}
.campo-imagem{display:flex;align-items:center;gap:10px}
.galeria-img{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;max-height:52vh;overflow:auto}
.img-opcao{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:1px solid var(--borda);border-radius:var(--r-2);background:var(--cartao-2);cursor:pointer;color:var(--mudo);font:inherit;font-size:var(--fs-1);text-align:center}
.img-opcao:hover{border-color:var(--gold-dark);color:var(--texto)}
.img-opcao.atual{border-color:var(--gold);color:var(--gold-2)}
.img-opcao span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.campo.pequeno{min-height:32px;padding:4px 8px;font-size:var(--fs-2)}
.matriz td .campo{width:90px;margin-left:auto}
.alinhar-topo{align-items:start}
.abas-caixa .pagina{padding:8px 0 0}
.abas-caixa .pagina > .cabeca h1{font-size:var(--fs-4)}
.arvore .no-grupo{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-2)}
.arvore .no-grupo:hover{background:var(--cartao-hover)}
.arvore .no-grupo.nivel-1{margin-left:36px}
.arvore .no-grupo.nivel-2{margin-left:72px}
.arvore .no-grupo.nivel-1::before,.arvore .no-grupo.nivel-2::before{content:'└';color:var(--apagado);margin-right:-4px}
.extras-ficha .separador{margin:16px 0 8px}

/* ===== relatórios ===== */
.rel-corpo{display:grid;grid-template-columns:260px 1fr;gap:var(--e-4);align-items:start}
.rel-menu{position:sticky;top:calc(var(--topo-altura) + 12px);display:flex;flex-direction:column;gap:2px;background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r-2);padding:8px}
.rel-menu h3{padding:8px 8px 4px}
.rel-item{text-align:left;padding:7px 10px;border:0;border-radius:6px;background:none;color:var(--mudo);font:inherit;font-size:var(--fs-2);cursor:pointer}
.rel-item:hover{background:var(--cartao-hover);color:var(--texto)}
.rel-item.ativo{background:var(--cartao-hover);color:var(--gold-2);box-shadow:inset 3px 0 0 var(--gold)}
.rel-filtros{margin-bottom:12px}
.rel-titulo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.tabela.rel tfoot td{background:var(--cartao-2);border-top:2px solid var(--borda-forte)}
.rel-print{color:#111;font-family:var(--sans);font-size:11px}
.rel-print table{width:100%;border-collapse:collapse}
.rel-print th,.rel-print td{border-bottom:1px solid #999;padding:3px 6px;text-align:left}
.rel-print td.num{text-align:right}
@media (max-width:900px){.rel-corpo{grid-template-columns:1fr}.rel-menu{position:static}}

/* ===== teclado numérico ===== */
.teclado-num{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-2)}
.teclado-num .btn{font-size:var(--fs-5);font-family:var(--mono)}
/* A.1: Gestao -> Aparelhos do garcom — o QR e o codigo grande */
.aparelho-codigo{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:14px}
.aparelho-codigo > div:last-child{display:flex;flex-direction:column;gap:4px}
.codigo-grande{font-size:2rem;letter-spacing:.12em;color:var(--gold-texto)}
.aparelho-codigo.vencido{opacity:.45}