/* assets/css/componentes.css
   Botões, badges, campos, chips e elementos reutilizáveis. */

.btn-login{
  width:100%;padding:14px;
  background:linear-gradient(135deg,var(--gold),#B8901F);
  border:none;border-radius:var(--r-sm);
  color:#0a0800;font-size:15px;font-weight:700;
  cursor:pointer;margin-top:var(--sp-2);
  letter-spacing:.4px;
  box-shadow:0 4px 16px rgba(201,162,39,.35);
  transform:translateY(0);
}
.btn-login:hover{
  background:linear-gradient(135deg,var(--gold-light),#C9A227);
  box-shadow:0 6px 24px rgba(201,162,39,.45);
  transform:translateY(-1px);
}
.btn-login:active{transform:translateY(0)}
#loginErr{color:var(--red);font-size:13px;margin-top:var(--sp-3);min-height:18px}

/* ═══════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════ */
#sidebar{
  width:var(--sidebar-w);
  min-height:100vh;
  background:var(--surface-1);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;
  position:relative;z-index:10;
  box-shadow:2px 0 20px rgba(0,0,0,.15);
  transition:width var(--ease);
}
#app.sidebar-collapsed #sidebar{width:var(--sidebar-w-collapsed)}
#app.sidebar-collapsed .sb-logo-text,
#app.sidebar-collapsed .sb-user-info,
#app.sidebar-collapsed .nav-group,
#app.sidebar-collapsed .nav-item span:not(.nav-icon),
#app.sidebar-collapsed .sb-actions .btn-sm span,
#app.sidebar-collapsed .btn-logout{display:none}
#app.sidebar-collapsed .sb-logo{padding:14px 10px;justify-content:center}
#app.sidebar-collapsed .sb-logo-mark{margin:0 auto}
#app.sidebar-collapsed .sb-user{justify-content:center;padding:10px}
#app.sidebar-collapsed .nav-item{justify-content:center;padding:10px;margin:1px 4px}
#app.sidebar-collapsed .sb-bottom{padding:8px}
.sb-logo{
  padding:20px 18px 16px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
}
.sb-logo-mark{flex-shrink:0;width:38px;height:38px;display:flex;align-items:center;justify-content:center}
.sb-official-logo{
  width:36px;height:36px;display:block;object-fit:cover;border-radius:50%;
  border:1px solid rgba(240,208,96,.42);box-shadow:0 3px 12px rgba(0,0,0,.35);
}
.sb-logo-text{}
.sb-logo-title{font-size:14px;font-weight:700;color:var(--text);letter-spacing:.2px}
.sb-logo-sub{font-size:10px;color:var(--text-muted);letter-spacing:.5px;margin-top:1px}

.sb-user{
  padding:10px 16px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:8px;
}
.sb-user-avatar{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),#8B6914);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;flex-shrink:0;
}
.sb-user-info{font-size:12px}
.sb-user-name{font-weight:600;color:var(--text)}
.sb-user-role{font-size:10px;color:var(--text-muted)}

nav{flex:1;padding:8px 0;overflow-y:auto;overflow-x:hidden}
nav::-webkit-scrollbar{width:3px}
nav::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}

.nav-group{
  font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:1.5px;color:var(--text-muted);
  padding:14px 18px 4px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;cursor:pointer;
  color:var(--text-secondary);font-size:13px;font-weight:500;
  border-radius:var(--r-sm);margin:1px 8px;
  border:1px solid transparent;
  position:relative;
}
.nav-item:hover{
  color:var(--text);
  background:var(--surface-glass-hover);
  border-color:var(--border);
}
.nav-item.active{
  color:var(--gold);
  background:var(--gold-dim);
  border-color:var(--gold-border);
  font-weight:600;
}
.nav-item .nav-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0}

.sb-bottom{
  padding:12px 16px;
  border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:6px;
}
.sb-actions{display:flex;gap:6px}
.btn-sm{
  padding:7px 12px;border-radius:var(--r-sm);
  border:1px solid var(--border);
  cursor:pointer;font-size:12px;font-weight:600;
  background:var(--surface-glass);color:var(--text-secondary);
  flex:1;text-align:center;
}
.btn-sm:hover{background:var(--surface-glass-hover);color:var(--text)}
.btn-export{background:var(--gold-dim);border-color:var(--gold-border);color:var(--gold)}
.btn-export:hover{background:rgba(201,162,39,.25);color:var(--gold-light)}
.btn-logout{
  background:transparent;border:none;
  color:var(--text-muted);font-size:12px;cursor:pointer;
  text-align:left;padding:4px 2px;font-family:var(--font);
}
.btn-logout:hover{color:var(--red)}

/* ═══════════════════════════════════════════════
   HEADER / THEME TOGGLE
═══════════════════════════════════════════════ */
#appHeader{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px 0;gap:10px;
}
.header-actions{display:flex;align-items:center;gap:8px}
.screen-export{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-sm);border:1px solid var(--gold-border);background:var(--gold-dim);color:var(--gold);cursor:pointer;font:600 12px var(--font)}
.screen-export:hover{background:rgba(201,162,39,.24)}