/* ══════════════════════════════════════════════════════════════
   VAREDUX v12 — LAYOUT (PROFISSIONAL)
   App Shell: Sidebar, Topbar, Main Wrap, Responsive
   CORREÇÃO: Banner Premium escondido em telas públicas
══════════════════════════════════════════════════════════════ */

/* ── APP LAYOUT ── */
.app-shell { display:flex; height:100vh; overflow:hidden; }

/* ── SIDEBAR ── */
.sidebar {
  width: 230px;
  min-width: 230px;
  background: var(--bg2);
  border-right: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
  transition: transform .25s ease;
  z-index: 100;
}
.sb-logo { padding:.85rem 1rem; border-bottom:1px solid var(--bd); display:flex; align-items:center; gap:.55rem; flex-shrink:0; }
.sb-mark { width:30px; height:30px; background:var(--g); border-radius:8px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:.95rem; color:#040E18; flex-shrink:0; }
.sb-name { font-size:.92rem; font-weight:800; color:var(--t1); }
.sb-name em { color:var(--g); font-style:normal; }
.sb-tag { font-size:.58rem; color:var(--t3); margin-top:.05rem; }
.sb-nav { flex:1; padding:.55rem .5rem; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.sb-sec { font-size:.58rem; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:.6px; padding:.7rem .6rem .25rem; margin-top:.2rem; }

/* ── SIDEBAR NAV ITEMS ── */
.nav-it {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .65rem;
  border-radius: 8px;
  cursor: pointer;
  color: var(--t2);
  font-size: .82rem;
  font-weight: 500;
  transition: all .15s;
  user-select: none;
}
.nav-it:hover {
  background: var(--bg3);
  color: var(--t1);
}
.nav-it.active {
  background: var(--gs);
  color: var(--g);
  font-weight: 600;
}
.nav-it .ni { font-size:.92rem; width:20px; text-align:center; flex-shrink:0; }
.nav-badge { margin-left:auto; background:var(--red); color:#fff; font-size:.57rem; font-weight:700; padding:1px 5px; border-radius:10px; }

/* ── SIDEBAR FOOTER ── */
.sb-foot { padding:.65rem .6rem; border-top:1px solid var(--bd); flex-shrink:0; }
.user-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .48rem .55rem;
  background: var(--bg3);
  border: 1px solid var(--bd);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
}
.user-chip:hover { border-color:var(--bd2); background:var(--bg4); }
.user-av {
  width: 28px; height: 28px;
  background: var(--gs);
  border: 1.5px solid var(--g);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: var(--g);
  flex-shrink: 0;
}
.user-info .un { font-size:.78rem; font-weight:600; color:var(--t1); line-height:1.2; }
.user-info .up { font-size:.6rem; color:var(--t3); text-transform:capitalize; }

/* ── SIDEBAR FOOTER BUTTONS (tema, portal, logout) ── */
.sb-foot-btns {
  display: flex;
  gap: .35rem;
  margin-top: .5rem;
}
.sb-foot-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .38rem .4rem;
  font-size: .72rem;
  border-radius: 7px;
  cursor: pointer;
  transition: all .15s;
}

/* ── MAIN WRAP ── */
.main-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ── TOPBAR ── */
.topbar {
  background: var(--bg2);
  border-bottom: 1px solid var(--bd);
  padding: .55rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  position: sticky;
  top: 0;
  z-index: 40;
  min-height: 50px;
}
.tb-left { display:flex; align-items:center; gap:.6rem; }
.tb-right { display:flex; align-items:center; gap:.4rem; }
.topbar-title { font-size:.95rem; font-weight:800; color:var(--t1); }
.topbar-sub { font-size:.7rem; color:var(--t3); margin-top:.05rem; }

/* ── TOPBAR HAMBURGER ── */
.topbar-menu {
  display: none;
  background: none;
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: .35rem .55rem;
  color: var(--t2);
  cursor: pointer;
  font-size: 1.1rem;
  transition: all .15s;
  line-height: 1;
}
.topbar-menu:hover { border-color:var(--g); color:var(--g); background:var(--gs); }

/* ── TOPBAR WELCOME + BUTTONS ── */
.tb-welcome {
  font-size: .78rem;
  color: var(--t2);
  font-weight: 500;
  margin-right: .25rem;
}
.tb-btn {
  background: var(--bg3);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: .3rem .5rem;
  cursor: pointer;
  font-size: .85rem;
  color: var(--t2);
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.tb-btn:hover { border-color:var(--g); color:var(--g); background:var(--gs); }
.tb-btn-logout:hover { border-color:var(--red); color:var(--red); background:rgba(255,80,80,.08); }

/* ── PAGE CONTENT ── */
.page-content { padding:1.2rem 1.3rem; }
.page-content.no-pad { padding:0; }

/* ── SCREENS ── */
.screen { display:none; }
.screen.active { display:block; animation:fadeIn .18s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

/* ── FULL PAGE SCREENS (login, cadastro, portal) ── */
.full-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--bg);
}
.auth-box   { width:100%; max-width:420px; }
.auth-card  { background:var(--bg2); border:1px solid var(--bd); border-radius:var(--r); padding:1.55rem; box-shadow:var(--shadow); }
.auth-logo  { text-align:center; margin-bottom:1.6rem; }
.auth-mark  { width:48px; height:48px; background:var(--g); border-radius:13px; display:inline-flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:900; color:#040E18; margin-bottom:.55rem; }
.auth-title { font-size:1.5rem; font-weight:900; color:var(--t1); }
.auth-title em { color:var(--g); font-style:normal; }
.auth-sub   { font-size:.82rem; color:var(--t2); margin-top:.2rem; }

/* ── GOOGLE BUTTON ── */
.btn-google {
  width:100%; padding:.57rem 1rem; background:var(--bg3);
  border:1px solid var(--bd); border-radius:var(--r2);
  display:flex; align-items:center; justify-content:center;
  gap:.55rem; cursor:pointer; font-size:.84rem; font-weight:600;
  color:var(--t1); transition:var(--tr); font-family:'DM Sans',sans-serif;
  margin-bottom:.75rem;
}
.btn-google:hover { border-color:var(--bd2); background:var(--bg4); }

/* ── OVERLAY (sidebar backdrop mobile) ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 99;
  backdrop-filter: blur(2px);
}
.sidebar-overlay.show { display:block; }

/* ── BREADCRUMB ── */
.breadcrumb { font-size:.78rem; color:var(--t2); }
.breadcrumb a { color:var(--g); cursor:pointer; }
.breadcrumb a:hover { text-decoration:underline; }

/* ══════════════════════════════════════════════════════════════
   UPGRADE BANNER (plano free → premium)
══════════════════════════════════════════════════════════════ */
.upgrade-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem 1.2rem;
  background: linear-gradient(90deg, var(--gs), var(--bg2));
  border-bottom: 1px solid var(--bd);
  flex-wrap: wrap;
}
.ub-text { font-size:.8rem; color:var(--t2); }
.ub-text strong { color:var(--g); }
.ub-btn {
  background: var(--g);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .4rem .9rem;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
[data-theme="dark"] .ub-btn { color:#07101C; }
.ub-btn:hover { background:var(--gd); transform:translateY(-1px); }

/* Esconder banner em telas públicas */
.screen#s-login.active ~ .upgrade-banner,
.screen#s-cadastro.active ~ .upgrade-banner,
.screen#s-verify-email.active ~ .upgrade-banner,
.screen#s-reset-password.active ~ .upgrade-banner,
.screen#s-portal.active ~ .upgrade-banner,
.screen#s-termos.active ~ .upgrade-banner,
.screen#s-privacidade.active ~ .upgrade-banner {
  display: none !important;
}

/* Garantir que os ícones de tema sejam sempre visíveis e clicáveis */
.theme-icon {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
[onclick="toggleTheme()"]:hover .theme-icon { transform: rotate(15deg); }
[onclick="toggleTheme()"] { cursor: pointer; user-select: none; }

/* Modais customizados */
.modal .modal-body { padding: 1rem 1.5rem; }
.modal .modal-foot {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--bd);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* Botão vermelho para ações destrutivas */
.btn-red {
  background: var(--reddim);
  color: var(--red);
  border: 1px solid rgba(255,79,90,.22);
  transition: all 0.2s ease;
}
.btn-red:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  transform: translateY(-1px);
}
.btn-red:active { transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    transform: translateX(-100%);
    box-shadow: none;
    z-index: 100;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
  }
  .topbar-menu { display:flex; }
  .full-page { padding:1rem; }
  .auth-card { padding:1.2rem; }
  .page-content { padding:.8rem .9rem; }
  .tb-welcome { display:none; }
  .upgrade-banner { padding:.5rem .8rem; }
  .ub-text { font-size:.72rem; }
}

@media (max-width: 600px) {
  .topbar { padding:.45rem .8rem; }
  .topbar-title { font-size:.85rem; }
  .page-content { padding:.6rem .7rem; }
}