/* =========================================================
   NORCOMDESK UI 1.4 - visual consolidado
   ========================================================= */

:root{
  --nd-navy:#0b2f57;
  --nd-navy-2:#0e3d70;
  --nd-blue:#1677ff;
  --nd-blue-2:#0c63db;
  --nd-cyan:#0ea5e9;
  --nd-green:#08a98f;
  --nd-green-soft:#e6f8f3;
  --nd-bg:#e8eef5;
  --nd-bg-2:#f1f4f8;
  --nd-surface:#ffffff;
  --nd-surface-2:#f8fafc;
  --nd-text:#142033;
  --nd-muted:#64748b;
  --nd-line:#9eacbc;
  --nd-line-soft:#c3ccd8;
  --nd-danger:#e5484d;
  --nd-warning:#f59e0b;
  --nd-purple:#7c5ce6;
  --nd-shadow-sm:0 4px 16px rgba(15,35,60,.06);
  --nd-shadow-md:0 14px 34px rgba(15,35,60,.10);
  --nd-radius:14px;
}

html,body{
  background:var(--nd-bg)!important;
  color:var(--nd-text);
}

body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;
}

button,input,select,textarea{
  font-family:inherit!important;
}

/* ---------- LOADER ---------- */
.nd-loader{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 35%,rgba(35,121,230,.18),transparent 300px),
    linear-gradient(145deg,#071a31,#0b2f57 58%,#0b385f);
  opacity:1;
  visibility:visible;
  transition:opacity .28s ease,visibility .28s ease;
}

.nd-loader.nd-loader-hide{
  opacity:0;
  visibility:hidden;
}

.nd-loader-card{
  width:min(360px,88vw);
  text-align:center;
}

.nd-loader-logo{
  width:260px;
  max-width:80vw;
  display:block;
  margin:0 auto;
}

.nd-loader-spinner{
  width:38px;
  height:38px;
  margin:28px auto 0;
  border:3px solid rgba(255,255,255,.16);
  border-top-color:#3ce0be;
  border-radius:50%;
  animation:ndspin .78s linear infinite;
}

.nd-loader-copy{
  margin-top:14px;
  color:#c7d3e1;
  font-size:12px;
  font-weight:600;
  letter-spacing:.03em;
}

@keyframes ndspin{to{transform:rotate(360deg)}}

/* ---------- LOGIN ---------- */
.login-page{
  min-height:100dvh!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr)!important;
  background:#fff!important;
}

.login-brand{
  position:relative;
  overflow:hidden;
  display:flex!important;
  flex-direction:column;
  justify-content:center!important;
  padding:clamp(48px,7vw,92px)!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 18% 16%,rgba(49,139,255,.35),transparent 300px),
    radial-gradient(circle at 80% 78%,rgba(8,184,162,.20),transparent 290px),
    linear-gradient(145deg,#071a31,#0b2f57 56%,#0c3a62)!important;
}

.login-brand::before{
  content:"";
  position:absolute;
  width:460px;
  height:460px;
  right:-180px;
  top:-180px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018);
}

.login-brand-inner,.login-brand-footer{position:relative;z-index:1}

.login-logo{
  width:min(360px,76%);
  display:block;
  margin-bottom:24px;
}

.login-kicker{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#c7d7e7;
  font-size:11px;
  font-weight:700;
  letter-spacing:.045em;
  text-transform:uppercase;
}

.login-brand h1{
  max-width:640px!important;
  margin:28px 0 16px!important;
  color:#fff!important;
  font-size:clamp(34px,4vw,58px)!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
}

.login-brand p{
  max-width:590px!important;
  color:#c8d5e4!important;
  font-size:15px!important;
  line-height:1.7!important;
}

.login-feature-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin-top:30px;
  color:#d8e3ed;
  font-size:12px;
  font-weight:600;
}

.login-feature-row span{display:inline-flex;align-items:center;gap:7px}
.login-feature-row b{width:7px;height:7px;border-radius:50%;background:#3ce0be;box-shadow:0 0 0 4px rgba(60,224,190,.09)}
.login-brand-footer{position:absolute;left:clamp(48px,7vw,92px);bottom:30px;color:#8198b0;font-size:11px}

.login-area{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:40px!important;
  background:
    radial-gradient(circle at 70% 20%,rgba(22,119,255,.05),transparent 260px),
    #f7f9fc!important;
}

.login-card{
  width:100%!important;
  max-width:430px!important;
  padding:36px!important;
  border:1px solid #c8d2de;
  border-radius:22px;
  background:#fff;
  box-shadow:0 22px 54px rgba(15,35,60,.10);
}

.login-mobile-brand{display:none;text-align:center;margin-bottom:20px}
.login-mobile-brand img{width:210px;max-width:75%}
.login-eyebrow{margin-bottom:8px;color:var(--nd-blue);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.login-card h2{margin:0!important;font-size:28px!important;letter-spacing:-.035em!important;color:var(--nd-text)!important}
.login-subtitle{margin:8px 0 26px!important;color:var(--nd-muted)!important;font-size:13px!important}
.login-card .form-group{margin-bottom:16px}
.login-card label{display:block;margin-bottom:7px;color:#344256;font-size:12px;font-weight:700}

.nd-input-wrap{position:relative}
.nd-input-wrap input{
  min-height:50px!important;
  width:100%!important;
  padding:0 46px!important;
  border:1px solid #afbdcc!important;
  border-radius:12px!important;
  background:#fbfcfe!important;
  color:var(--nd-text)!important;
  outline:none!important;
  transition:.16s ease!important;
}
.nd-input-wrap input:focus{border-color:#5a9dff!important;box-shadow:0 0 0 4px rgba(22,119,255,.10)!important;background:#fff!important}
.nd-input-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:18px;color:#8190a3;font-size:12px;font-weight:800;pointer-events:none}
.nd-password-toggle{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:34px;height:34px;padding:0;border:0;border-radius:9px;background:transparent;color:#64748b;cursor:pointer}
.nd-password-toggle:hover{background:#edf3f9}
.login-submit{width:100%!important;min-height:50px!important;margin-top:4px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;border:0!important;border-radius:12px!important;background:linear-gradient(135deg,#1677ff,#0d68e4)!important;box-shadow:0 11px 24px rgba(22,119,255,.22)!important;font-weight:800!important}
.login-secure-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:20px;color:#7b8797;font-size:11px}
.login-secure-note span{color:#08a98f;font-size:10px}

/* ---------- APP BASE ---------- */
.app{background:var(--nd-bg)!important}
.sidebar{
  width:224px!important;
  padding:14px 12px!important;
  background:linear-gradient(180deg,#0a2a4e 0%,#0c3562 100%)!important;
  border-right:1px solid rgba(255,255,255,.05)!important;
  box-shadow:8px 0 28px rgba(15,35,60,.08);
}

.nd-sidebar-brand{
  min-height:68px;
  display:flex!important;
  align-items:center;
  gap:10px;
  padding:8px 8px 14px!important;
  margin-bottom:8px!important;
}
.nd-sidebar-brand img{width:168px;max-width:calc(100% - 35px);display:block}
.nd-sidebar-version{margin-left:auto;padding:3px 6px;border:1px solid rgba(255,255,255,.12);border-radius:6px;color:#8fa7c1;font-size:9px;font-weight:800}
.sidebar .nav-item{margin:3px 0!important;padding:10px 12px!important;border-radius:10px!important;color:#d5dfeb!important;font-size:13px!important;font-weight:600!important;transition:.16s ease!important}
.sidebar .nav-item:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}
.sidebar .nav-item.active{background:linear-gradient(135deg,rgba(38,116,208,.68),rgba(40,101,168,.46))!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)!important}

.main{margin-left:224px!important;padding:18px 22px!important;background:linear-gradient(180deg,#edf2f7,#e7edf4)!important;min-height:100dvh}
.topbar{min-height:58px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-bottom:14px!important;padding:0 2px 12px!important;border-bottom:1px solid #afbcc9!important}
#pageTitle{font-size:20px!important;letter-spacing:-.025em!important}
#pageSubtitle{font-size:11px!important;color:var(--nd-muted)!important}
.topbar>.btn,.topbar .btn{min-height:38px!important;padding:0 14px!important;border:1px solid #b8c5d2!important;border-radius:10px!important;background:#fff!important;color:#243448!important;font-size:12px!important;font-weight:700!important}
.desk-presence{margin-left:auto!important;background:#fff!important;border:1px solid #b8c5d2!important;border-radius:999px!important;padding:8px 11px!important;font-size:11px!important;box-shadow:var(--nd-shadow-sm)!important}

/* generic surfaces */
.panel,.card,.modal-card,.wa-status-card,.wa-qr-card{
  border-color:var(--nd-line)!important;
  box-shadow:var(--nd-shadow-sm)!important;
}
.panel{background:rgba(255,255,255,.96)!important}
.cards{gap:12px!important}
.card{padding:16px!important;border:1px solid #b7c4d1!important;border-radius:14px!important;background:#fff!important}
.card-label{font-size:11px!important;color:var(--nd-muted)!important}
.card-value{font-size:24px!important;color:var(--nd-text)!important}

.btn{border-radius:10px!important;font-size:12px!important;font-weight:700!important;transition:.15s ease!important}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,#1677ff,#0d68e4)!important;border-color:#0f6ee8!important;color:#fff!important}
.btn-secondary{background:#fff!important;border-color:#b8c5d2!important;color:#334155!important}
.btn-danger{background:#fff4f3!important;border-color:#f3b4b1!important;color:#c9362b!important}

input,select,textarea{border-color:#adbcca!important;border-radius:10px!important;background:#fff!important;font-size:13px!important}
input:focus,select:focus,textarea:focus{border-color:#6ba7f7!important;box-shadow:0 0 0 3px rgba(22,119,255,.08)!important;outline:none!important}

/* ---------- ATENDIMENTOS ---------- */
#page-conversations{gap:12px!important}
#page-conversations>.desk-toolbar{padding:11px 12px!important;border:1px solid #aab8c7!important;border-radius:14px!important;background:rgba(255,255,255,.96)!important;box-shadow:var(--nd-shadow-sm)!important}
.desk-toolbar .btn-primary{box-shadow:none!important}
.desk-filters{gap:7px!important}
.desk-filters .btn{padding:8px 12px!important}

.desk-shell{height:calc(100dvh - 145px)!important;min-height:560px!important;gap:10px!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}
.desk-queue,.desk-chat,.desk-client{min-width:0!important;background:#fff!important;border:1px solid #9cabb9!important;border-radius:14px!important;box-shadow:var(--nd-shadow-sm)!important;overflow:hidden!important}
.desk-queue{overflow-y:auto!important}
.desk-queue-head,.desk-chat-header,.desk-client-top{background:linear-gradient(180deg,#fff,#f7f9fc)!important;border-color:#aebbc8!important}
.desk-queue-head{padding:13px 14px!important;font-size:13px!important}
.desk-conversation{padding:12px 13px!important;border-color:#c6d0da!important}
.desk-conversation-name{font-size:13px!important}
.desk-preview{font-size:11px!important;margin-top:4px!important}
.desk-time{font-size:10px!important}
.desk-badge{font-size:9px!important;padding:3px 6px!important}
.desk-conversation.selected{background:#eaf4ff!important;border-left-color:#1677ff!important}

.desk-chat-header{padding:12px 14px!important}
.desk-chat-title{font-size:14px!important}
.desk-chat-subtitle{font-size:10px!important}
.desk-actions{gap:6px!important}
.desk-actions .btn{padding:7px 9px!important;font-size:10px!important;border:0!important;color:#fff!important;box-shadow:none!important}
#deskAssignSelfBtn{background:#2563eb!important}
#deskTransferBtn{background:#f59e0b!important}
#deskAssignUserBtn{background:#0f8a75!important}
#deskPriorityBtn{background:#d7a900!important;color:#1f2937!important}
#deskTagsBtn{background:#7c5ce6!important}
#deskQuickRepliesBtn{background:#0891b2!important}
#deskCloseBtn{background:#e5484d!important;color:#fff!important}

.desk-messages{padding:16px!important;background:radial-gradient(circle at 18% 5%,rgba(22,119,255,.04),transparent 230px),#f1f5f9!important}
.desk-message{font-size:12px!important}
.desk-bubble{border-color:#b9c5d1!important;box-shadow:0 2px 8px rgba(15,35,60,.05)!important}
.desk-composer{padding:12px!important;gap:8px!important;border-color:#aebbc8!important;background:#fff!important}
.desk-composer select{font-size:12px!important}
.desk-composer textarea{min-height:48px!important;font-size:13px!important}
.desk-composer .btn-primary{min-height:48px!important;padding-inline:16px!important}
.desk-simulation{display:none!important}

.desk-client{padding:12px!important}
.desk-client-top{min-height:42px!important;padding-bottom:10px!important;margin-bottom:8px!important}
.desk-panel-title{font-size:12px!important}
.desk-avatar{width:48px!important;height:48px!important;font-size:18px!important}
.desk-client h3{font-size:14px!important}
.desk-detail{padding:8px 0!important;border-color:#c6d0da!important}
.desk-detail label{font-size:10px!important}
.desk-detail span,.desk-detail strong,.desk-detail div{font-size:11px!important}
.desk-collapse-btn{border-color:#aebbc8!important;background:#fff!important}

/* collapsed rails */
.desk-shell.desk-queue-collapsed{grid-template-columns:64px minmax(0,1fr) 270px!important}
.desk-shell.desk-info-collapsed{grid-template-columns:290px minmax(0,1fr) 62px!important}
.desk-shell.desk-queue-collapsed.desk-info-collapsed{grid-template-columns:64px minmax(0,1fr) 62px!important}
.desk-shell.desk-queue-collapsed .desk-conversation::before{width:36px!important;height:36px!important;font-size:12px!important}
.desk-client-mini button{border-color:#adbcca!important;background:#fff!important}

/* WhatsApp */
#page-whatsapp .panel{padding:18px!important}
.wa-grid{grid-template-columns:minmax(250px,330px) minmax(0,1fr)!important;gap:12px!important}
.wa-status-card,.wa-qr-card{border:1px solid #aab8c7!important;border-radius:14px!important;background:#fff!important}
.wa-status-card{padding:18px!important}
.wa-qr-card{padding:18px!important;min-height:390px!important}
.wa-qr{width:280px!important}
.wa-indicator.connected{background:#0aa47f!important}

/* tables/forms */
table{border:1px solid #b8c5d2;border-radius:12px;overflow:hidden}
th{background:#eef3f7!important;color:#5b697b!important;font-size:11px!important;border-color:#c3ccd8!important}
td{font-size:12px!important;border-color:#cbd4de!important}
.modal{background:rgba(7,21,38,.45)!important;backdrop-filter:blur(3px)}
.modal-card{border:1px solid #aab8c7!important;border-radius:16px!important}

/* ---------- PWA / MOBILE ---------- */
.nd-install-btn{display:none;align-items:center;gap:7px;min-height:36px;padding:0 12px;border:1px solid #b8c5d2;border-radius:10px;background:#fff;color:#0b2f57;font-size:11px;font-weight:800;cursor:pointer}
.nd-install-btn.show{display:inline-flex}
.nd-mobile-menu,.nd-mobile-bottom-nav,.nd-mobile-backdrop{display:none}

@media(max-width:1180px){
  .sidebar{width:200px!important}
  .main{margin-left:200px!important;padding:16px!important}
  .desk-shell{grid-template-columns:260px minmax(0,1fr) 245px!important}
  .desk-shell.desk-queue-collapsed{grid-template-columns:62px minmax(0,1fr) 245px!important}
  .desk-shell.desk-info-collapsed{grid-template-columns:260px minmax(0,1fr) 62px!important}
  .desk-shell.desk-queue-collapsed.desk-info-collapsed{grid-template-columns:62px minmax(0,1fr) 62px!important}
  .desk-actions .btn{padding:6px 7px!important;font-size:9px!important}
}

@media(max-width:820px){
  html,body{width:100%;overflow-x:hidden}
  body.nd-mobile-sidebar-open{overflow:hidden}
  .sidebar{position:fixed!important;z-index:10020!important;left:0!important;top:0!important;bottom:0!important;width:260px!important;transform:translateX(-105%);transition:transform .22s ease!important;box-shadow:18px 0 40px rgba(7,21,38,.30)!important}
  body.nd-mobile-sidebar-open .sidebar{transform:translateX(0)}
  .main{margin-left:0!important;width:100%!important;min-height:100dvh!important;padding:68px 10px 88px!important}
  .topbar{position:relative!important;min-height:54px!important;margin-bottom:10px!important;padding:0 0 10px 50px!important}
  #pageTitle{font-size:17px!important}
  #pageSubtitle{font-size:10px!important}
  .topbar>.btn,.topbar .btn{min-height:34px!important;padding:0 9px!important;font-size:10px!important}
  .desk-presence{padding:6px 8px!important;font-size:9px!important}

  .nd-mobile-backdrop{position:fixed;inset:0;z-index:10010;background:rgba(5,18,33,.48);backdrop-filter:blur(2px)}
  body.nd-mobile-sidebar-open .nd-mobile-backdrop{display:block}
  .nd-mobile-menu{position:fixed;left:12px;top:12px;z-index:10030;width:42px;height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;border:1px solid #b7c3d0;border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(15,35,60,.12)}
  .nd-mobile-menu span{width:18px;height:2px;border-radius:9px;background:#0b2f57}

  .nd-mobile-bottom-nav{position:fixed;z-index:10000;left:10px;right:10px;bottom:max(8px,env(safe-area-inset-bottom));height:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:5px;border:1px solid rgba(150,165,181,.72);border-radius:18px;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);box-shadow:0 14px 34px rgba(15,35,60,.18)}
  .nd-mobile-bottom-nav button{border:0;border-radius:12px;background:transparent;color:#697789;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:9px;font-weight:800}
  .nd-mobile-bottom-nav button.active{background:#e9f3ff;color:#1677ff}
  .nd-mobile-bottom-nav svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

  #page-conversations>.desk-toolbar{padding:9px!important}
  .desk-toolbar{align-items:stretch!important;gap:8px!important}
  .desk-toolbar>.btn-primary{width:100%!important}
  .desk-filters{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;gap:6px!important}
  .desk-filters .btn{width:100%!important;padding:8px 4px!important;font-size:10px!important}

  .desk-shell,.desk-shell.desk-queue-collapsed,.desk-shell.desk-info-collapsed,.desk-shell.desk-queue-collapsed.desk-info-collapsed{height:auto!important;min-height:0!important;display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .desk-queue{max-height:200px!important;min-height:0!important}
  .desk-shell.desk-queue-collapsed .desk-queue{max-height:64px!important}
  .desk-chat{min-height:calc(100dvh - 210px)!important}
  .desk-client{min-height:0!important}
  .desk-shell.desk-info-collapsed .desk-client{min-height:62px!important}
  .desk-chat-header{flex-direction:column!important;align-items:stretch!important;gap:9px!important}
  .desk-actions{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:5px!important}
  .desk-actions .btn{width:100%!important;padding:7px 3px!important;font-size:9px!important}
  .desk-messages{min-height:330px!important;max-height:calc(100dvh - 360px)!important}
  .desk-composer{display:grid!important;grid-template-columns:1fr auto!important;padding:9px!important}
  .desk-composer select{grid-column:1/-1!important}
  .desk-composer textarea{min-width:0!important}
  .desk-composer .btn-primary{min-width:74px!important}
  .wa-grid{grid-template-columns:1fr!important}
  .wa-qr{width:min(280px,82vw)!important}
  .cards{grid-template-columns:1fr 1fr!important}
  .panel{padding:14px!important}
  .modal{padding:10px!important}
  .modal-card{width:calc(100vw - 20px)!important;max-height:92dvh!important;overflow:auto!important}
  table{display:block;overflow-x:auto;white-space:nowrap}
  input,select,textarea{font-size:16px!important}
}

@media(max-width:720px){
  .login-page{grid-template-columns:1fr!important;background:#f3f6fa!important}
  .login-brand{display:none!important}
  .login-area{min-height:100dvh!important;padding:22px!important;background:radial-gradient(circle at 50% 0,rgba(22,119,255,.11),transparent 290px),#f2f6fa!important}
  .login-card{max-width:420px!important;padding:28px 22px!important}
  .login-mobile-brand{display:block}
}

@media(max-width:520px){
  .cards{grid-template-columns:1fr!important}
  .main{padding-left:8px!important;padding-right:8px!important}
  .login-card{border-radius:18px!important}
}

@media(display-mode:standalone){
  .nd-install-btn{display:none!important}
  body{overscroll-behavior:none}
}

/* Esconde a navegação do aplicativo enquanto a tela de login estiver ativa. */
#app.hidden ~ .nd-mobile-menu,
#app.hidden ~ .nd-mobile-bottom-nav,
#app.hidden ~ .nd-mobile-backdrop{
  display:none!important;
}



/* =========================================================

   FIX LOGIN - hidden precisa sempre vencer

   ========================================================= */



.hidden,

[hidden],

#loginScreen.hidden,

#loginPage.hidden,

.login-screen.hidden,

.login-page.hidden,

.nd-login-screen.hidden,

.nd-login-page.hidden {

  display:none !important;

  visibility:hidden !important;

  opacity:0 !important;

  pointer-events:none !important;

}








/* =========================================================

   NORCOMDESK - FIX DEFINITIVO DE VISIBILIDADE

   ========================================================= */



.hidden {

  display: none !important;

}



#loginPage.hidden {

  display: none !important;

  visibility: hidden !important;

  opacity: 0 !important;

  pointer-events: none !important;

}



#app.hidden {

  display: none !important;

  visibility: hidden !important;

  opacity: 0 !important;

  pointer-events: none !important;

}



#loginPage:not(.hidden) {

  visibility: visible !important;

  opacity: 1 !important;

}



#app:not(.hidden) {

  visibility: visible !important;

  opacity: 1 !important;

}