/* Complementos do sistema real (login, modal, formulários). Mesmo tema Ginga. */
body{overflow:auto}
#raiz{position:relative;z-index:1;min-height:100vh}
.app{height:100vh}
.login{display:grid;place-items:center;min-height:100vh;padding:20px}
.login .q{width:100%;max-width:420px;padding:30px}
.login h1{font-size:30px;margin:10px 0 4px}
.login img{width:54px;border-radius:12px}
.campo{display:block;margin-bottom:12px}
.campo>span{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-suave);margin-bottom:4px}
.campo input,.campo select,.campo textarea{width:100%;background:var(--entrada-fundo);border:1px solid var(--borda-forte);border-radius:10px;padding:10px 12px;color:var(--texto);font:inherit}
.campo textarea{min-height:80px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-color:var(--destaque-1)}
.campo.chk{display:flex;gap:10px;align-items:center}.campo.chk input{width:auto}
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 14px}
.fgrid .full{grid-column:1/-1}
.modal{position:fixed;inset:0;z-index:20;background:rgba(2,12,7,.72);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;overflow:auto}
.modal .q{width:100%;max-width:760px;max-height:92vh;overflow:auto}
.modal .fechar{position:absolute;right:16px;top:12px;background:none;border:0;font-size:26px;color:var(--texto-suave)}
.erro{background:var(--alerta-fundo);border:1px solid var(--alerta);border-radius:10px;padding:8px 12px;margin-bottom:10px;font-size:14px}
#aviso{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:30;display:grid;gap:8px}
#aviso div{background:var(--superficie-forte);border:1px solid var(--destaque-1);color:#fff;padding:12px 18px;border-radius:14px;box-shadow:var(--sombra)}
#aviso div.err{border-color:var(--alerta)}
.vazio{padding:30px;text-align:center;color:var(--texto-suave)}
.link{background:none;border:0;color:var(--destaque-texto);text-decoration:underline;padding:0}
.scroll-x{overflow:auto}
.m.c,.m.g,.m.h{white-space:pre-wrap}
.app{grid-template-columns:260px minmax(0,1fr)}
header{flex-wrap:wrap}
/* ---------- celular: menu vira barra inferior, uma coluna, nada de rolagem lateral ---------- */
@media(max-width:820px){
  .app{grid-template-columns:minmax(0,1fr);height:auto;min-height:100vh}
  .main{height:auto;min-height:100vh}
  nav{position:fixed;left:0;right:0;bottom:0;z-index:25;flex-direction:row;gap:2px;padding:6px 8px;height:64px;border-right:0;border-top:1px solid var(--borda);overflow-x:auto;overflow-y:hidden;align-items:center}
  nav .marca,nav small,nav .ggnav{display:none}
  nav a{flex:none;padding:10px 14px;min-height:44px}
  nav a span{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* só leitor de tela */
  nav a{position:relative}
  nav a.on{box-shadow:inset 0 -3px 0 var(--destaque-1)}
  #view{padding:16px 14px 96px}
  header{position:sticky;top:0;z-index:20;gap:8px;padding:10px 14px}
  header .sub{display:none}
  .cmd{flex:1;min-width:0}.cmd input{min-width:0;width:100%}
  .fgrid{grid-template-columns:1fr}
  table{display:block;overflow-x:auto;white-space:nowrap}
  .row{flex-wrap:wrap}
  .btn,.tabs button,input,select,textarea{min-height:44px}
  .btn.sm{min-height:40px}
  #aviso{left:12px;right:12px;transform:none}
  .kan{grid-template-columns:repeat(5,minmax(240px,80vw))}
}