/* ============================================================================
 * portal.css — tema do Controller inspirado no hotspot.abratel.com.br
 * Paleta teal + sidebar esquerda escura (slate) + header claro + login gradiente.
 * Carregado por index.html e pelas páginas do subnav.js (csat/typebot/campanhas/
 * kanban-config). A sidebar é renderizada: no index pelo próprio <nav id="subnav">
 * (classe .side-nav) e nas demais páginas pelo subnav.js. Um só CSS estiliza as
 * duas. Nos embeds do Chatwoot (?embedded=1 / iframe) a sidebar não aparece.
 * ========================================================================== */
:root {
  --pc: #0d9488; --pc-700: #0f766e; --pc-50: #ccfbf1;
  --side: #1e293b; --side-text: #cbd5e1; --side-muted: #94a3b8; --side-hover: #334155;
  --bg: #f1f5f9; --card: #fff; --border: #e2e8f0; --text: #0f172a; --muted: #64748b;
  --sbw: 256px;
}
body { background: var(--bg); color: var(--text); }

/* ===== Sidebar ======================================================== */
.side-nav {
  position: fixed; left: 0; top: 0; height: 100vh; width: var(--sbw);
  background: var(--side); color: var(--side-text);
  display: flex; flex-direction: column; z-index: 1200;
  box-shadow: 2px 0 14px rgba(0,0,0,.14); transition: transform .22s ease;
}
.side-logo { display: flex; align-items: center; gap: 11px; padding: 18px 16px 14px; }
.side-logo .sq { width: 40px; height: 40px; border-radius: 13px; background: var(--pc); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 19px; flex-shrink: 0; }
.side-logo .tt { line-height: 1.15; overflow: hidden; }
.side-logo .tt b { font-size: 15px; font-weight: 700; color: #fff; display: block; }
.side-logo .tt span { font-size: 11px; color: var(--side-muted); }
.side-items { flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; }
.side-items::-webkit-scrollbar { width: 8px; }
.side-items::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#2dd4bf,#0d9488 55%,#0f766e); border-radius: 6px; }
.side-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px;
  font: 500 13.5px/1.2 inherit; color: var(--side-text); text-decoration: none;
  background: none; border: none; cursor: pointer; width: 100%; text-align: left;
  white-space: nowrap; transition: background .14s, color .14s;
}
.side-item:hover { background: var(--side-hover); color: #fff; }
.side-item.active { background: var(--pc); color: #fff; font-weight: 600; }
.side-item .ic { width: 20px; text-align: center; font-size: 15px; flex-shrink: 0; }
.side-item.hidden { display: none; }
.side-sep { height: 1px; background: var(--side-hover); margin: 10px 8px; }
.side-group { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--side-muted); padding: 2px 12px 4px; }
.side-foot { border-top: 1px solid var(--side-hover); padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.side-user { display: flex; align-items: center; gap: 10px; background: rgba(148,163,184,.12); border-radius: 12px; padding: 9px 11px; font-size: 12.5px; }
.side-user .av { width: 30px; height: 30px; border-radius: 50%; background: var(--pc); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.side-user .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e2e8f0; }
.side-logout { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; border-radius: 10px; background: none; border: 1px solid var(--side-hover); color: var(--side-text); cursor: pointer; font: 600 13px/1 inherit; transition: all .14s; }
.side-logout:hover { background: var(--side-hover); color: #fff; }

/* conteúdo deslocado p/ a direita da sidebar */
body.has-side { padding-left: var(--sbw); }

/* ===== Header (ex-topbar verde → barra clara) ========================= */
body.has-side .topbar {
  background: #fff !important; color: var(--text) !important;
  border-bottom: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
body.has-side .topbar-brand { display: none !important; }
body.has-side .topbar-right { margin-left: auto; }
/* Atalhos agora moram na sidebar (seção Serviços) → removidos do topo */
body.has-side .topbar-right button[onclick*="openFrame"] { display: none !important; }
body.has-side .topbar-right #user-name,
body.has-side .topbar-right #user-name-display { color: var(--muted) !important; }
/* evita Sair duplicado: a sidebar já tem logout */
body.has-side .topbar-right > .btn-secondary[onclick*="ogout"] { display: none; }

/* Header unificado: a campanha usa .top (era teal) → mesmo visual claro das demais */
body.has-side .top { background: #fff !important; color: var(--text) !important; border-bottom: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
body.has-side .top h1 { color: var(--text) !important; }
body.has-side .top .num { background: var(--pc-50) !important; color: var(--pc-700) !important; }

/* ===== Hambúrguer / overlay (mobile) ================================== */
.side-burger { display: none; position: fixed; top: 9px; left: 12px; z-index: 1300; width: 40px; height: 40px; border-radius: 10px; background: var(--side); color: #fff; border: none; font-size: 19px; cursor: pointer; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
.side-ovl { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 1100; }

@media (max-width: 1024px) {
  body.has-side { padding-left: 0; }
  .side-nav { transform: translateX(-100%); }
  .side-nav.open { transform: translateX(0); }
  .side-burger { display: flex; }
  .side-ovl.open { display: block; }
  body.has-side .topbar { padding-left: 62px !important; }
}

/* ===== Login (gradiente + card arredondado) =========================== */
.login-wrap {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 16px; background: linear-gradient(135deg, #1e293b 0%, #134e4a 100%);
}
.login-card { border-radius: 24px !important; box-shadow: 0 20px 55px rgba(0,0,0,.38) !important; max-width: 400px !important; width: 100%; }
.login-logo { display: flex; flex-direction: column; align-items: center; margin-bottom: 22px; text-align: center; }
.login-logo .sq { width: 56px; height: 56px; border-radius: 16px; background: var(--pc); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; margin-bottom: 12px; }
.login-logo h2 { font-size: 20px; font-weight: 700; color: #1e293b; margin: 0; }
.login-logo p { font-size: 13px; color: #64748b; margin: 3px 0 0; }
.login-captcha { margin: 16px 0 6px; display: flex; justify-content: center; }