/* ============================================================================
   KTG HUB — CHROME COMPARTILHADO (hub + admin) · Design System v1
   Carregado depois de tokens.css e antes de styles.css / admin.css.
   Base, login, topo (logo, busca, conta) e botão-ícone. Só tokens semânticos.
   ============================================================================ */

/* ---- base ---- */
*{ box-sizing:border-box; }
*::selection{ background:var(--color-accent-selected); color:var(--color-text); }
html,body{ height:100%; }
body{ margin:0; background:var(--color-bg); color:var(--color-text);
  font:var(--weight-regular) var(--text-md)/var(--lh-md) var(--font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
[hidden]{ display:none !important; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button, input, select, textarea{ font-family:inherit; }
/* foco visível e igual em tudo; campos usam o próprio anel (ver .gfield/.field) */
:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; border-radius:var(--radius-md); }
input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:none; }

/* ============================================================================
   LOGIN / DEFINIR SENHA / ACESSO NEGADO (mesmo desenho no hub e no admin)
   Fundo escuro da marca, cartão branco. Sem halo girando nem grão: movimento
   decorativo contínuo distrai e pesa em celular fraco.
   ============================================================================ */
.gate{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:var(--space-6) var(--space-4); overflow:auto;
  background:linear-gradient(135deg, var(--ktg-gray-950) 0%, var(--ktg-gray-900) 55%, var(--ktg-orange-700) 140%); }
.box{ position:relative; width:min(400px,100%); padding:var(--space-8) var(--space-8) var(--space-6); text-align:center;
  background:var(--color-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  animation:rise .5s var(--ease-out) forwards; }
@keyframes rise{ from{ transform:translateY(16px); } }   /* sem opacity: nunca fica invisível se travar */
.box .glogo{ display:flex; justify-content:center; margin-bottom:var(--space-6); }
.box .glogo svg{ height:32px; width:auto; }
.box h1{ margin:0; font:var(--weight-bold) var(--text-xl)/var(--lh-xl) var(--font); color:var(--color-text); }
.box .sub{ margin:var(--space-1) 0 var(--space-6); font-size:var(--text-md); line-height:var(--lh-md); color:var(--color-text-muted); }

.gfield{ position:relative; margin-bottom:var(--space-4); text-align:left; }
.gfield label{ display:block; margin:0 0 var(--space-2); font:var(--weight-medium) var(--text-sm)/var(--lh-sm) var(--font); color:var(--color-text); }
.gfield input{ width:100%; height:48px; padding:0 var(--space-4); border:0; border-radius:var(--radius-md);
  background:var(--color-surface-muted); box-shadow:inset 0 0 0 1px var(--color-border);
  font-size:var(--text-md); color:var(--color-text); transition:box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.gfield input::placeholder{ color:var(--color-text-subtle); }
.gfield input:focus{ outline:none; background:var(--color-surface);
  box-shadow:inset 0 0 0 1px var(--color-accent), 0 0 0 3px var(--color-accent-selected); }
.gfield.has-eye input{ padding-right:52px; }
.eye{ position:absolute; right:var(--space-1); bottom:2px; width:44px; height:44px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; background:transparent; color:var(--color-text-muted); }
.eye:hover{ background:var(--color-bg); color:var(--color-text); }
.eye svg{ width:20px; height:20px; }

/* "Manter conectado" — decide se a sessão vai pro localStorage ou sessionStorage */
.gcheck{ display:flex; align-items:center; gap:var(--space-3); min-height:var(--control-h); margin:0 0 var(--space-2); text-align:left;
  font-size:var(--text-sm); line-height:var(--lh-sm); color:var(--color-text); cursor:pointer; user-select:none; }
.gcheck input{ width:20px; height:20px; margin:0; flex:none; accent-color:var(--color-accent); cursor:pointer; }

.err{ min-height:var(--lh-sm); margin:0 0 var(--space-3); text-align:left;
  font:var(--weight-medium) var(--text-sm)/var(--lh-sm) var(--font); color:var(--color-danger);
  opacity:0; transition:opacity var(--dur-fast) var(--ease); }
.err:not(:empty){ opacity:1; }
/* resposta neutra do "esqueci a senha" reusa o slot do erro, em verde */
.err.neutra{ color:var(--color-success); }

/* botão principal das telas de acesso = .btn--primary do sistema, largura total */
#lbtn, #spwBtn, #sairDenied{ width:100%; min-height:48px; padding:0 var(--space-6); border:0; border-radius:var(--radius-pill); cursor:pointer;
  background:var(--color-accent); color:var(--color-text-inverse); font:var(--weight-bold) var(--text-md)/1 var(--font);
  transition:background var(--dur-fast) var(--ease); }
#lbtn:hover, #spwBtn:hover, #sairDenied:hover{ background:var(--color-accent-hover); }
#lbtn:focus-visible, #spwBtn:focus-visible, #sairDenied:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
#lbtn:disabled, #spwBtn:disabled{ opacity:.6; cursor:default; }

/* "Esqueci minha senha": link em cinza (laranja em texto pequeno reprova contraste) */
.lforgot{ display:block; min-height:var(--control-h); margin:var(--space-2) auto 0; padding:0 var(--space-3);
  border:0; background:none; cursor:pointer; border-radius:var(--radius-md);
  font:var(--weight-medium) var(--text-sm)/1 var(--font); color:var(--color-text-muted);
  text-decoration:underline; text-underline-offset:3px; }
.lforgot:hover{ color:var(--color-text); }
.lforgot:disabled{ opacity:.45; cursor:default; text-decoration:none; }
.gfoot{ margin-top:var(--space-4); font-size:var(--text-xs); line-height:var(--lh-xs); color:var(--color-text-subtle); }

/* tela "Defina sua senha" */
#setpw .glogo svg{ height:30px; width:auto; }
.who{ display:inline-flex; align-items:center; gap:var(--space-2); max-width:100%; margin:0 0 var(--space-4); padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border-radius:var(--radius-pill); background:var(--color-surface-muted); box-shadow:inset 0 0 0 1px var(--color-border);
  font:var(--weight-medium) var(--text-sm)/var(--lh-sm) var(--font); color:var(--color-text); }
.who span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.who-ava{ width:28px; height:28px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  background:var(--color-accent); color:var(--color-text-inverse); font:var(--weight-bold) var(--text-xs)/1 var(--font); }
.spw-hint{ margin:calc(-1 * var(--space-2)) 0 var(--space-3); text-align:left; font-size:var(--text-sm); line-height:var(--lh-sm); color:var(--color-text-muted); }

/* spinner do splash de carregamento (evita piscar o login no reload) */
.spinner{ width:40px; height:40px; border-radius:50%; border:3px solid rgba(255,255,255,.2); border-top-color:var(--color-accent); animation:spin360 .7s linear infinite; }
@keyframes spin360{ to{ transform:rotate(360deg); } }

@media (max-width:430px){ .box{ padding:var(--space-6) var(--space-4) var(--space-4); } }

/* ============================================================================
   TOPO
   ============================================================================ */
/* botão de ícone redondo */
.icon-btn{ width:var(--control-h); height:var(--control-h); flex:0 0 auto; display:grid; place-items:center;
  border:0; border-radius:50%; cursor:pointer; background:var(--color-surface); color:var(--color-text);
  box-shadow:inset 0 0 0 1px var(--color-border); transition:background var(--dur-fast) var(--ease); }
.icon-btn:hover{ background:var(--color-surface-muted); }
.icon-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
/* botão do menu: só aparece quando a barra lateral vira gaveta */
.menu-btn{ display:none; }

/* marca */
.tb-logo{ display:flex; align-items:center; gap:var(--space-3); flex:0 0 auto; text-decoration:none; }
/* o logo virou <img> (assets/img/logo-ktg-hub.svg): sem esta regra a imagem entra no
   tamanho natural do arquivo (662px) e estoura a topbar */
.tb-logo img, .tb-logo svg{ height:26px; width:auto; display:block; }
.tb-badge{ padding:2px var(--space-2); border-radius:var(--radius-md); background:var(--color-accent-soft); color:var(--color-accent-text);
  font:var(--weight-bold) var(--text-xs)/var(--lh-xs) var(--font); letter-spacing:var(--tracking-caps); text-transform:uppercase; }

/* busca */
.search{ position:relative; flex:1; max-width:640px; }
.search-ico{ position:absolute; left:var(--space-4); top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--color-text-muted); pointer-events:none; }
#q{ width:100%; height:var(--control-h); padding:0 var(--space-12) 0 var(--space-12); border:0; border-radius:var(--radius-pill);
  background:var(--color-bg); box-shadow:inset 0 0 0 1px var(--color-border);
  font-size:var(--text-md); color:var(--color-text); transition:background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
#q::placeholder{ color:var(--color-text-muted); }
#q::-webkit-search-cancel-button{ display:none; }
#q:hover{ background:var(--color-surface); }
#q:focus{ outline:none; background:var(--color-surface); box-shadow:inset 0 0 0 1px var(--color-accent), 0 0 0 3px var(--color-accent-selected); }
.q-clear{ position:absolute; right:var(--space-1); top:50%; transform:translateY(-50%); width:36px; height:36px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; background:transparent; color:var(--color-text-muted); font-size:var(--text-xl); line-height:1; }
.q-clear:hover{ background:var(--color-surface-muted); color:var(--color-text); }

/* ações à direita */
.tb-actions{ display:flex; align-items:center; gap:var(--space-2); flex:0 0 auto; margin-left:auto; }

/* chip de conta + menu */
.acct{ position:relative; flex:0 0 auto; }
.acct-btn{ display:flex; align-items:center; gap:var(--space-2); height:var(--control-h); padding:0 var(--space-3) 0 var(--space-1);
  border:0; border-radius:var(--radius-pill); cursor:pointer; background:var(--color-surface); color:var(--color-text);
  box-shadow:inset 0 0 0 1px var(--color-border); transition:background var(--dur-fast) var(--ease); }
.acct-btn:hover{ background:var(--color-surface-muted); }
.acct-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.acct-ava{ width:36px; height:36px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  background:var(--color-accent); color:var(--color-text-inverse); font:var(--weight-bold) var(--text-xs)/1 var(--font); }
.acct-name{ max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:var(--weight-medium) var(--text-sm)/var(--lh-sm) var(--font); }
.acct-chev{ width:16px; height:16px; flex:0 0 auto; color:var(--color-text-muted); }
.acct-menu{ position:absolute; top:calc(100% + var(--space-2)); right:0; z-index:200; min-width:240px; padding:var(--space-2);
  border-radius:var(--radius-md); background:var(--color-surface); box-shadow:var(--shadow-lg);
  animation:acct-in var(--dur-fast) var(--ease-out) forwards; }
@keyframes acct-in{ from{ transform:translateY(-4px); } }
.acct-email{ display:block; padding:var(--space-2) var(--space-3) var(--space-3); border-bottom:1px solid var(--color-divider);
  font-size:var(--text-sm); line-height:var(--lh-sm); color:var(--color-text-muted); word-break:break-all; }
.acct-sair{ display:flex; align-items:center; gap:var(--space-3); width:100%; min-height:var(--control-h); margin-top:var(--space-2); padding:0 var(--space-3);
  border:0; border-radius:var(--radius-md); background:transparent; cursor:pointer; text-align:left;
  font:var(--weight-medium) var(--text-md)/1 var(--font); color:var(--color-danger); }
.acct-sair:hover, .acct-sair:focus-visible{ background:var(--color-danger-soft); outline:none; }
.acct-sair svg{ width:18px; height:18px; flex:0 0 auto; }

@media (max-width:560px){
  .acct-name, .acct-chev{ display:none; }
  .acct-btn{ width:var(--control-h); padding:0; justify-content:center; }
}