*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:'DM Sans',sans-serif;background:#f8fafc;overflow:hidden}
.app-wrap{height:100%;width:100%;display:flex;overflow:hidden}
.sidebar{width:250px;min-width:250px;height:100%;background:linear-gradient(180deg,#0e4a54 0%,#15636f 50%,#1a7a88 100%);display:flex;flex-direction:column;overflow-y:auto;transition:transform .3s}
.main-area{flex:1;height:100%;overflow-y:auto;overflow-x:hidden}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 20px;color:rgba(255,255,255,.7);cursor:pointer;transition:all .2s;border-radius:8px;margin:2px 12px;font-size:14px;font-weight:500}
.nav-item:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-item.active{background:rgba(255,255,255,.15);color:#fff;font-weight:600}
.nav-item i{width:20px;height:20px}
.nav-group{
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:0;
  overflow:hidden;
}
.nav-group-toggle{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 20px;
  background:transparent;
  border:none;
  color:inherit;
  cursor:pointer;
  text-align:left;
  font:inherit;
}
.nav-group-toggle:focus-visible,
.nav-subitem:focus-visible{
  outline:2px solid rgba(255,255,255,.35);
  outline-offset:-2px;
}
.nav-group.active > .nav-group-toggle{
  background:rgba(255,255,255,.15);
  color:#fff;
}
.nav-group-chevron{
  margin-left:auto;
  transition:transform .18s ease;
}
.nav-group.open .nav-group-chevron{
  transform:rotate(180deg);
}
.nav-submenu{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:0 0 8px 0;
  margin:0 0 4px 0;
}
.nav-subitem{
  margin:0 12px 0 24px;
  padding:8px 16px;
  min-height:38px;
  border-radius:10px;
  font-size:13px;
  color:rgba(255,255,255,.68);
  background:rgba(255,255,255,.04);
}
.nav-subitem:hover{
  background:rgba(255,255,255,.1);
  color:#fff;
}
.nav-subitem.active{
  background:rgba(255,255,255,.18);
  color:#fff;
}
.nav-subitem i{
  width:18px;
  height:18px;
}
.nav-group .nav-subitem{
  display:none;
}
.nav-group.open .nav-subitem{
  display:flex;
}
.kpi-card{background:#fff;border-radius:16px;padding:24px;border:1px solid #e2e8f0;transition:all .3s;position:relative;overflow:hidden}
.kpi-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.08)}
.kpi-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.kpi-card.c1::after{background:linear-gradient(90deg,#15636f,#1e88c7)}
.kpi-card.c2::after{background:linear-gradient(90deg,#1e88c7,#38bdf8)}
.kpi-card.c3::after{background:linear-gradient(90deg,#10b981,#34d399)}
.kpi-card.c4::after{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.kpi-card.c5::after{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}
.kpi-card.c6::after{background:linear-gradient(90deg,#ef4444,#f87171)}
.chart-box{background:#fff;border-radius:16px;padding:24px;border:1px solid #e2e8f0}
.kanban-col,.kanban-column{flex:0 0 248px;min-width:230px;max-width:260px;width:248px;background:#f1f5f9;border-radius:12px;padding:12px;height:fit-content;max-height:100%;overflow:hidden;transition:width .2s ease,min-width .2s ease,max-width .2s ease,padding .2s ease,flex-basis .2s ease}
.kanban-coluna-titulo{display:flex;align-items:center;gap:8px;min-width:0;line-height:1.2}
.kanban-column-header,.crm-stage-header,.dept-stage-header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.kanban-stage-actions,.crm-stage-actions,.dept-stage-actions,.projetos-kanban-stage-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:0 0 auto;min-width:0}
.kanban-icon-btn{width:30px;height:30px;min-width:30px;min-height:30px;border-radius:10px;border:1px solid #e2e8f0;background:#fff;color:#64748b;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s ease;flex:0 0 auto}
.kanban-icon-btn:hover{background:#f8fafc;color:#15636f;border-color:#cbd5e1}
.kanban-icon-btn.danger{border-color:#fee2e2;color:#ef4444}
.kanban-icon-btn.danger:hover{background:#fef2f2;color:#dc2626;border-color:#fecaca}
.kanban-icon-btn.warn{border-color:#fde68a;color:#d97706}
.kanban-icon-btn.warn:hover{background:#fffbeb;color:#b45309;border-color:#fcd34d}
.kanban-card{background:#fff;border-radius:14px;padding:10px 12px;border:1px solid #e2e8f0;cursor:pointer;transition:all .2s;margin-bottom:8px;display:flex;flex-direction:column;gap:8px;min-width:0;box-shadow:0 2px 8px rgba(15,23,42,.04)}
.kanban-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-1px)}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;line-height:1.2}
.kanban-card .badge,.dept-stage-card .badge{font-size:10px;padding:2px 8px}
.opera-card-meta-list{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.opera-card-meta-item{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;padding:3px 8px;border-radius:999px;border:1px solid #e2e8f0;background:#f8fafc;color:#475569;font-size:10px;line-height:1.2}
.opera-card-meta-item strong{font-weight:800;color:#334155}
.opera-card-meta-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-dot{width:10px;height:10px;border-radius:50%;border:2px solid #15636f;background:#fff;position:absolute;left:-5px;top:6px}
.tl-item{position:relative;padding-left:24px;padding-bottom:20px;border-left:2px solid #e2e8f0;margin-left:4px}
.tl-item:last-child{border-left:none}
.inbox-container{display:grid;grid-template-columns:280px 1fr 320px;gap:12px;height:calc(100% - 180px);overflow:hidden}
.inbox-list{background:#fff;border-radius:16px;border:1px solid #e2e8f0;display:flex;flex-direction:column;overflow:hidden}
.inbox-chat{background:#fff;border-radius:16px;border:1px solid #e2e8f0;display:flex;flex-direction:column;overflow:hidden}
.inbox-sidebar{background:#fff;border-radius:16px;border:1px solid #e2e8f0;display:flex;flex-direction:column;overflow:hidden}
.conv-item{padding:12px;border-bottom:1px solid #e2e8f0;cursor:pointer;transition:all .2s;display:flex;gap:10px;align-items:flex-start}
.conv-item:hover{background:#f8fafc}
.conv-item.active{background:#f0f4f8;border-left:3px solid #15636f}
.conv-avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px}
.conv-content{flex:1;min-width:0}
.conv-name{font-weight:600;font-size:13px;color:#1e293b}
.conv-client{font-size:11px;color:#64748b}
.conv-msg{font-size:12px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}
.conv-time{font-size:10px;color:#cbd5e1;text-align:right}
.conv-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:600;white-space:nowrap}
.msg-group{margin-bottom:16px}
.msg-bubble{padding:10px 14px;border-radius:12px;max-width:70%;word-wrap:break-word;font-size:13px;line-height:1.4}
.msg-user{background:#15636f;color:#fff;margin-left:auto;border-radius:12px 2px 12px 12px}
.msg-client{background:#f1f5f9;color:#1e293b;margin-right:auto;border-radius:2px 12px 12px 12px}
.msg-info{font-size:11px;color:#64748b;margin-top:4px;text-align:right}
.msg-internal{background:#fef3c7;color:#92400e;border-left:3px solid #f59e0b;padding:10px 14px;border-radius:4px;margin:12px 0;font-size:12px}
.chat-input{border-top:1px solid #e2e8f0;padding:12px;display:flex;gap:8px;align-items:flex-end}
.quick-action{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#f1f5f9;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;color:#1e293b;border:1px solid #cbd5e1}
.quick-action:hover{background:#e2e8f0;border-color:#94a3b8}
.sidebar-section{padding:12px;border-bottom:1px solid #e2e8f0;font-size:11px}
.sidebar-label{font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.sidebar-item{padding:8px;background:#f8fafc;border-radius:8px;margin-bottom:6px;font-size:12px;color:#1e293b}
.sla-indicator{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600}
.typing-indicator{display:flex;gap:4px;align-items:center}
.dot{width:6px;height:6px;border-radius:50%;background:#cbd5e1;animation:bounce .6s infinite}
.dot:nth-child(1){animation-delay:0s}
.dot:nth-child(2){animation-delay:.2s}
.dot:nth-child(3){animation-delay:.4s}
@keyframes bounce{0%,60%,100%{opacity:.5;transform:translateY(0)}30%{opacity:1;transform:translateY(-6px)}}
@media(max-width:1280px){.inbox-container{grid-template-columns:240px 1fr 280px}}
@media(max-width:1024px){.inbox-container{grid-template-columns:1fr;height:auto}.inbox-sidebar{display:none}}
.tab-btn{padding:8px 20px;font-size:13px;font-weight:500;border-radius:8px;cursor:pointer;transition:all .2s;color:#64748b;background:transparent;border:none}
.tab-btn.active{background:#15636f;color:#fff}
.tab-btn:hover:not(.active){background:#e2e8f0}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modal-bg.show{display:flex !important}
.modal-box{position:relative;z-index:10000;background:#fff;border-radius:20px;max-width:600px;width:90%;max-height:80%;overflow-y:auto;padding:32px;animation:modalIn .3s}
#crmLeadDetailModal .modal-box{
  max-width:480px !important;
  width:calc(100vw - 32px) !important;
  max-height:85vh !important;
  border-radius:16px !important;
  padding:0 !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
}
#crmLeadDetailModal .crm-lead-detail-shell{
  display:flex;
  flex-direction:column;
  min-height:0;
  max-height:85vh;
  width:100%;
}
#crmLeadDetailModal .crm-lead-detail-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:18px 18px 14px;
  border-bottom:1px solid #e2e8f0;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  flex-shrink:0;
}
#crmLeadDetailModal .crm-lead-detail-avatar{
  width:42px;
  height:42px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  background:linear-gradient(135deg,#15636f 0%,#1e88c7 100%);
  box-shadow:0 10px 24px rgba(21,99,111,.18);
}
#crmLeadDetailModal .crm-lead-detail-close{
  width:32px;
  height:32px;
  min-width:32px;
  border-radius:10px;
  border:1px solid #e2e8f0;
  background:#fff;
  color:#64748b;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
#crmLeadDetailModal .crm-lead-detail-close:hover{
  background:#f8fafc;
  color:#15636f;
}
#crmLeadDetailModal .crm-lead-detail-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:16px 18px;
  background:linear-gradient(180deg,#f8fafc 0%,#ffffff 18%);
}
#crmLeadDetailModal .crm-lead-detail-footer{
  display:flex;
  gap:10px;
  padding:14px 18px 18px;
  border-top:1px solid #e2e8f0;
  background:#fff;
  flex-shrink:0;
}
#crmLeadDetailModal .crm-lead-detail-action{
  min-height:42px;
  border-radius:12px;
  font-size:13px;
  font-weight:800;
  transition:all .18s ease;
}
#crmLeadDetailModal .crm-lead-detail-action.primary{
  flex:1.4;
  background:#0f6e56;
  color:#fff;
  border:1px solid #0f6e56;
}
#crmLeadDetailModal .crm-lead-detail-action.primary:hover{
  background:#0d5c49;
  border-color:#0d5c49;
}
#crmLeadDetailModal .crm-lead-detail-action.secondary{
  flex:1;
  background:#fff;
  color:#334155;
  border:1px solid #dbe4ef;
}
#crmLeadDetailModal .crm-lead-detail-action.secondary:hover{
  background:#f8fafc;
  border-color:#cbd5e1;
}
#crmLeadDetailModal .crm-lead-detail-action:focus-visible,
#crmLeadDetailModal .crm-lead-detail-close:focus-visible{
  outline:2px solid #1e88c7;
  outline-offset:2px;
}
#crmLeadDetailModal .crm-lead-detail-body section{
  scroll-margin-top:12px;
}
@keyframes modalIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.progress-bar{height:6px;border-radius:3px;background:#e2e8f0;overflow:hidden}
.progress-fill{height:100%;border-radius:3px;transition:width .5s}
.sla-ring{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.table-row{transition:background .15s}
.table-row:hover{background:#f8fafc}
.mobile-toggle{display:none}
@media(max-width:1024px){.sidebar{position:fixed;z-index:50;transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.mobile-toggle{display:flex}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp .4s ease both}
.fade-up-1{animation-delay:.05s}.fade-up-2{animation-delay:.1s}.fade-up-3{animation-delay:.15s}.fade-up-4{animation-delay:.2s}.fade-up-5{animation-delay:.25s}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}

@media print{
  .sidebar,.topbar,.mobile-toggle,.modal-bg,.modal-backdrop{display:none!important}
}

.dept-stage-board{display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;padding-bottom:4px}
.dept-stage-column{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:14px;padding:12px;min-height:210px;min-width:230px;max-width:260px;width:248px;transition:width .2s ease,min-width .2s ease,max-width .2s ease,padding .2s ease}
.dept-stage-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dept-stage-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:9px 11px 10px;margin-bottom:10px;cursor:pointer;transition:.2s;display:flex;flex-direction:column;gap:6px;min-width:0;box-shadow:0 2px 8px rgba(15,23,42,.04)}
.dept-stage-card:hover{box-shadow:0 10px 24px rgba(15,23,42,.08);transform:translateY(-1px)}
.dept-stage-card.is-dragging{opacity:.6;pointer-events:none}
.dept-stage-card{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:9px 11px 10px;
  min-height:58px;
}
.dept-card-main{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
  width:100%;
  flex:1 1 auto;
  margin-bottom:0;
}
.dept-card-content{
  min-width:0;
  flex:1 1 auto;
  max-width:none;
  display:flex;
  flex-direction:column;
}
.dept-card-heading{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  max-width:100%;
  width:100%;
  flex-wrap:nowrap;
}
.dept-stage-card .kanban-card-avatar,
.dept-stage-card .opera-card-avatar{
  width:26px;
  height:26px;
  min-width:26px;
  min-height:26px;
  font-size:11px;
  line-height:1;
  flex:0 0 26px;
}
.dept-stage-card .kanban-card-title,
.dept-stage-card .opera-card-title{
  display:block;
  min-width:0;
  max-width:none;
  flex:1 1 auto;
  font-size:14px;
  line-height:1.2;
  font-weight:800;
  color:#1e293b;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:0 1 auto;
}
.dept-stage-card .opera-card-meta-list{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-width:0;
  gap:4px;
  width:100%;
  padding-left:0;
  margin-bottom:0;
  overflow:hidden;
  font-size:12px;
  color:var(--text-secondary,#6b6b68);
}
.dept-stage-card .opera-card-meta-item{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
  max-width:100%;
  padding:0;
  border:0;
  background:transparent;
  border-radius:0;
  font-size:13px;
  line-height:1.25;
  overflow:hidden;
  white-space:nowrap;
  flex:1 1 auto;
  flex-shrink:1;
}
.dept-stage-card .dept-card-meta-primary{
  width:100%;
}
.dept-stage-card .dept-card-meta-secondary{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  width:100%;
}
.dept-stage-card .dept-card-meta-secondary .opera-card-meta-item{
  flex:1 1 0;
  min-width:0;
}
.dept-stage-card .opera-card-meta-item strong{
  flex:0 0 auto;
  white-space:nowrap;
  font-size:12px;
}
.dept-stage-card .opera-card-meta-value{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1 1 auto;
}
.dept-stage-card .dept-card-meta-sla .badge{
  margin-top:-1px;
}
.dept-stage-card .kanban-card-actions,
.dept-stage-card .opera-card-actions,
.dept-stage-card .dept-card-actions{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  flex-wrap:nowrap;
  margin-top:0;
  padding:0;
  position:static;
}
.dept-stage-card .kanban-card-actions .kanban-icon-btn,
.dept-stage-card .opera-card-actions .kanban-icon-btn,
.dept-stage-card .dept-card-actions .kanban-icon-btn,
.dept-stage-card .kanban-card-actions .dept-card-action-btn,
.dept-stage-card .opera-card-actions .dept-card-action-btn,
.dept-stage-card .dept-card-actions .dept-card-action-btn{
  width:20px;
  height:20px;
  min-width:20px;
  min-height:20px;
  border:none;
  background:transparent;
  border-radius:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted,#8a8a86);
  transition:color .15s ease;
  box-shadow:none;
}
.dept-stage-card .kanban-card-actions .kanban-icon-btn:hover,
.dept-stage-card .opera-card-actions .kanban-icon-btn:hover,
.dept-stage-card .dept-card-actions .kanban-icon-btn:hover,
.dept-stage-card .kanban-card-actions .dept-card-action-btn:hover,
.dept-stage-card .opera-card-actions .dept-card-action-btn:hover,
.dept-stage-card .dept-card-actions .dept-card-action-btn:hover{
  color:var(--text-primary,#2c2c2a);
}
.dept-stage-card .dept-card-action-btn svg,
.dept-stage-card .kanban-icon-btn svg{
  width:13px;
  height:13px;
  border:none;
  border-radius:0;
}
.dept-stage-card .kanban-card-footer,
.dept-stage-card .opera-card-footer{
  margin-top:6px;
  padding-top:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:nowrap;
}
.dept-stage-card .kanban-card-footer .dept-card-actions,
.dept-stage-card .opera-card-footer .dept-card-actions{
  margin-top:0;
}
.dept-stage-card .kanban-card-footer .badge,
.dept-stage-card .opera-card-footer .badge{
  display:none;
}
.dept-stage-card .badge{
  flex:0 0 auto;
  white-space:nowrap;
}
#departamentosKanbanEtapas .dept-stage-card{
  padding:10px;
}
#departamentosKanbanEtapas .dept-card-main{
  gap:9px;
}
#departamentosKanbanEtapas .dept-card-content{
  min-height:88px;
}
#departamentosKanbanEtapas .dept-card-heading{
  align-items:flex-start;
}
#departamentosKanbanEtapas .dept-stage-card .kanban-card-avatar,
#departamentosKanbanEtapas .dept-stage-card .opera-card-avatar{
  margin-top:1px;
  background:#15636f;
}
#departamentosKanbanEtapas .dept-stage-card .kanban-card-title,
#departamentosKanbanEtapas .dept-stage-card .opera-card-title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  white-space:normal;
  line-height:1.18;
  min-height:33px;
}
#departamentosKanbanEtapas .dept-priority-indicator{
  width:7px;
  min-width:7px;
  height:7px;
  margin-top:5px;
  border-radius:999px;
  box-shadow:0 0 0 2px #fff,0 0 0 3px #e2e8f0;
}
#departamentosKanbanEtapas .dept-priority-urgente{background:#dc2626}
#departamentosKanbanEtapas .dept-priority-alta{background:#f97316}
#departamentosKanbanEtapas .dept-priority-media{background:#eab308}
#departamentosKanbanEtapas .dept-priority-baixa{background:#64748b}
#departamentosKanbanEtapas .dept-stage-card .dept-card-meta-primary{
  display:flex;
  width:100%;
}
#departamentosKanbanEtapas .dept-stage-card .dept-card-meta-secondary{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:6px;
}
#departamentosKanbanEtapas .dept-stage-card .dept-card-meta-secondary .opera-card-meta-item{
  min-width:0;
}
#departamentosKanbanEtapas .dept-sla-value{
  font-weight:800;
}
#departamentosKanbanEtapas .dept-sla-atrasado{color:#dc2626}
#departamentosKanbanEtapas .dept-sla-vence-breve{color:#ea580c}
#departamentosKanbanEtapas .dept-sla-ate-3-dias{color:#ca8a04}
#departamentosKanbanEtapas .dept-sla-neutro{color:#047857}
#departamentosKanbanEtapas .dept-sla-sem-sla{color:#64748b}
#departamentosKanbanEtapas .dept-stage-card .kanban-card-footer,
#departamentosKanbanEtapas .dept-stage-card .opera-card-footer{
  margin-top:auto;
  justify-content:flex-end;
  padding-top:6px;
}
#departamentosKanbanEtapas .dept-stage-card .dept-card-actions{
  justify-content:flex-end;
  width:100%;
}
#departamentosKanbanEtapas .dept-card-action-btn.talk{color:#0f766e}
#departamentosKanbanEtapas .dept-card-action-btn.talk:hover{color:#0d9488}
#departamentosKanbanEtapas .dept-card-action-btn.copy{color:#475569}
#departamentosKanbanEtapas .dept-card-action-btn.copy:hover{color:#0f172a}
@media (max-width:640px){
  #departamentosKanbanEtapas .dept-stage-card .dept-card-meta-secondary{
    grid-template-columns:1fr;
  }
}

.dept-summary-card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:11px 12px 10px;
  cursor:pointer;
  transition:all .18s ease;
  box-shadow:0 2px 8px rgba(15,23,42,.04);
  min-width:0;
}
.dept-summary-card:hover{
  border-color:#cbd5e1;
  box-shadow:0 8px 20px rgba(15,23,42,.07);
}
.dept-summary-card .dept-summary-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.dept-summary-card .dept-summary-main{
  min-width:0;
  flex:1 1 auto;
}
.dept-summary-card .dept-summary-title{
  font-size:14px;
  line-height:1.2;
  font-weight:800;
  color:#1e293b;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:normal;
  overflow-wrap:normal;
  min-width:0;
}
.dept-summary-card .dept-summary-stats{
  font-size:12px;
  line-height:1.3;
  color:#64748b;
  margin-top:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.dept-summary-card .dept-summary-desc{
  margin-top:8px;
  font-size:12px;
  line-height:1.35;
  color:#64748b;
  min-width:0;
  word-break:normal;
  overflow-wrap:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.dept-summary-card .dept-summary-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid #e2e8f0;
}
.dept-summary-card .badge{
  flex:0 0 auto;
  white-space:nowrap;
}

.dept-card-actions{display:flex;align-items:center;gap:5px;flex-shrink:0;flex-wrap:nowrap}
.dept-card-action-btn{width:26px;height:26px;min-width:26px;border-radius:9px;border:1px solid #e2e8f0;background:#fff;color:#64748b;display:flex;align-items:center;justify-content:center;transition:.18s ease;box-shadow:none}
.dept-card-action-btn:hover{background:#f8fafc;color:#15636f}
.dept-card-action-btn.warn{border-color:#e2e8f0;color:#d97706}
.dept-card-action-btn.warn:hover{background:#fff7ed;color:#b45309}
.dept-custom-field{font-size:11px;color:#64748b;margin-top:6px;display:flex;gap:4px;min-width:0}
.dept-custom-field b{color:#475569;white-space:nowrap}
.dept-custom-field span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dept-config-row{display:grid;grid-template-columns:34px 1.2fr 170px 130px 90px;gap:10px;align-items:center;padding:10px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}
.dept-config-row input,.dept-config-row select{width:100%;border:1px solid #e2e8f0;border-radius:10px;padding:8px 10px;font-size:13px;outline:none;background:#fff}
@media(max-width:900px){.dept-config-row{grid-template-columns:1fr}}

.dept-card-action-btn.info{border-color:#bfdbfe;color:#1e88c7}
.dept-card-action-btn.info:hover{background:#eff6ff;color:#1670a8}
.dept-card-action-btn.file{border-color:#dbeafe;color:#6366f1}
.dept-card-action-btn.file:hover{background:#eef2ff;color:#4f46e5}
.dept-upload-config{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;margin:0 0 18px 0}
.dept-upload-config label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:#334155}
.dept-file-list{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.dept-file-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;color:#475569;background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;padding:4px 8px}



.projeto-row{background:#fff;border:1px solid #e2e8f0;border-radius:14px;margin-bottom:10px;overflow:hidden;transition:all .2s}
.projeto-row:hover{box-shadow:0 4px 14px rgba(15,23,42,.06);border-color:#cbd5e1}
.projeto-row-main{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;cursor:pointer;min-width:0}
.projeto-row-details{display:none;border-top:1px solid #e2e8f0;background:#f8fafc;padding:16px 18px}
.projeto-row.open .projeto-row-details{display:block}
.projeto-row.open .expand-icon{transform:rotate(180deg)}
.expand-icon{transition:transform .2s}
@media(max-width:1100px){.projeto-row-main{flex-direction:column;align-items:stretch;gap:10px}.projeto-row-main>div{text-align:left!important}}


/* ===== DUAL CHAT: CLIENTE + INTERNO ===== */
.dual-chat-wrapper{display:flex;flex-direction:column;overflow:hidden}
.dual-chat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1;min-height:0;padding:12px}
.dual-chat-panel{background:#fff;border:1px solid #e2e8f0;border-radius:14px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.dual-chat-header{padding:12px 14px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;background:#f8fafc}
.dual-chat-title{font-size:13px;font-weight:700;color:#1e293b}
.dual-chat-subtitle{font-size:11px;color:#94a3b8;margin-top:2px}
.dual-chat-messages{flex:1;overflow-y:auto;padding:14px;background:#f8fafc;min-height:280px}
.dual-chat-input{border-top:1px solid #e2e8f0;padding:10px;display:flex;gap:8px;background:#fff}
.internal-card{background:#fff;border:1px solid #e2e8f0;border-left:3px solid #f59e0b;border-radius:10px;padding:10px;margin-bottom:10px;font-size:12px}
.internal-card-user{font-weight:700;color:#1e293b;margin-bottom:4px}
.internal-card-text{color:#475569;line-height:1.35}
.internal-card-time{font-size:10px;color:#94a3b8;margin-top:6px}
@media(max-width:1280px){.dual-chat-grid{grid-template-columns:1fr}.dual-chat-messages{min-height:220px}}





/* =========================
   FIX SEGURO DE LAYOUT GLOBAL
   Corrige tela cortada sem sobrepor a sidebar
========================= */
html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: #f4f7fb;
}

.app-shell,
.app-layout,
.flex.h-screen {
  width: 100%;
  min-height: 100vh;
}

/* Mantém a sidebar no fluxo original do layout */
.sidebar,
aside {
  flex: 0 0 280px;
  max-width: 280px;
  min-width: 280px;
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 30;
}

/* Área principal nunca fica por baixo da sidebar */
.main,
.main-content,
.content-area,
main {
  flex: 1 1 auto;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  min-width: 0;
  min-height: 100vh;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Topbar e páginas respeitam largura disponível */
.topbar,
.header,
main > header {
  width: 100%;
  box-sizing: border-box;
}

.page-content {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 24px !important;
  box-sizing: border-box;
  overflow-x: hidden;
}

.page-content.hidden {
  display: none !important;
}

.page-content:not(.hidden) {
  display: block;
}

/* Evita cards e grids ultrapassarem a tela */
.chart-box,
.content-box,
.info-box,
.kpi-card,
.modal-box {
  box-sizing: border-box;
  max-width: 100%;
}

.grid,
.flex {
  min-width: 0;
}

/* Grids padronizados */
.config-grid-fixed {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 24px;
  align-items: start;
  width: 100%;
}

.portal-grid-fixed {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 24px;
  align-items: start;
  width: 100%;
}

#configEquipesDepartamentos,
#configEquipesLista,
#configEquipesPessoas {
  min-height: 360px;
}

/* Kanbans com rolagem interna, sem cortar a tela */
.dept-stage-board,
.kanban-board,
#departamentosKanbanEtapas,
#departamentoKanban,
#projectKanban,
#kanbanDemandas {
  display:flex;
  flex-wrap:nowrap;
  gap:14px;
  align-items:stretch;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 8px;
}

/* Tabelas com rolagem interna */
.table-wrapper,
.overflow-x-auto {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

/* Responsivo */
@media (max-width: 1200px) {
  .config-grid-fixed,
  .portal-grid-fixed {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .sidebar,
  aside {
    flex-basis: 86px;
    min-width: 86px;
    max-width: 86px;
  }

  .page-content {
    padding: 16px !important;
  }
}


/* =========================
   FIX BOTÃO EXPANDIR / MENU
========================= */
.sidebar.sidebar-collapsed,
aside.sidebar-collapsed {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  overflow: hidden;
}

.sidebar.sidebar-collapsed .sidebar-label,
.sidebar.sidebar-collapsed .nav-label,
.sidebar.sidebar-collapsed span:not(.badge),
aside.sidebar-collapsed .sidebar-label,
aside.sidebar-collapsed .nav-label,
aside.sidebar-collapsed span:not(.badge) {
  opacity: 0;
  pointer-events: none;
}

.sidebar.sidebar-collapsed .menu-text,
aside.sidebar-collapsed .menu-text {
  display: none !important;
}

.main-content.main-expanded,
.content-area.main-expanded,
main.main-expanded {
  width: calc(100% - 76px) !important;
  max-width: calc(100% - 76px) !important;
}

@media (min-width: 901px) {
  .sidebar.sidebar-collapsed + .main-content,
  .sidebar.sidebar-collapsed + .content-area,
  aside.sidebar-collapsed + main {
    width: calc(100% - 76px) !important;
  }
}


/* =========================
   SIDEBAR RECOLHIDA: SOMENTE ÍCONES
========================= */
.sidebar.sidebar-collapsed,
aside.sidebar-collapsed {
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  overflow: hidden !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Esconde textos, subtítulos, labels e usuário quando recolhido */
.sidebar.sidebar-collapsed h1,
.sidebar.sidebar-collapsed h2,
.sidebar.sidebar-collapsed h3,
.sidebar.sidebar-collapsed p,
.sidebar.sidebar-collapsed span:not(.icon-only):not(.badge),
.sidebar.sidebar-collapsed .text-xs,
.sidebar.sidebar-collapsed .text-sm,
.sidebar.sidebar-collapsed .font-semibold:not(.keep-icon),
.sidebar.sidebar-collapsed .sidebar-text,
.sidebar.sidebar-collapsed .nav-text,
.sidebar.sidebar-collapsed .menu-text,
.sidebar.sidebar-collapsed .user-info,
.sidebar.sidebar-collapsed .logo-text,
.sidebar.sidebar-collapsed .section-title,
aside.sidebar-collapsed h1,
aside.sidebar-collapsed h2,
aside.sidebar-collapsed h3,
aside.sidebar-collapsed p,
aside.sidebar-collapsed span:not(.icon-only):not(.badge),
aside.sidebar-collapsed .text-xs,
aside.sidebar-collapsed .text-sm,
aside.sidebar-collapsed .font-semibold:not(.keep-icon),
aside.sidebar-collapsed .sidebar-text,
aside.sidebar-collapsed .nav-text,
aside.sidebar-collapsed .menu-text,
aside.sidebar-collapsed .user-info,
aside.sidebar-collapsed .logo-text,
aside.sidebar-collapsed .section-title {
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Mantém botões centralizados */
.sidebar.sidebar-collapsed a,
.sidebar.sidebar-collapsed button,
.sidebar.sidebar-collapsed .nav-item,
.sidebar.sidebar-collapsed [onclick*="showPage"],
aside.sidebar-collapsed a,
aside.sidebar-collapsed button,
aside.sidebar-collapsed .nav-item,
aside.sidebar-collapsed [onclick*="showPage"] {
  justify-content: center !important;
  align-items: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: 0 !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ícones sempre visíveis e centralizados */
.sidebar.sidebar-collapsed i,
.sidebar.sidebar-collapsed svg,
aside.sidebar-collapsed i,
aside.sidebar-collapsed svg {
  display: block !important;
  opacity: 1 !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  margin: 0 auto !important;
}

/* Logo recolhida: mostra apenas o ícone */
.sidebar.sidebar-collapsed .logo,
.sidebar.sidebar-collapsed .brand,
aside.sidebar-collapsed .logo,
aside.sidebar-collapsed .brand {
  justify-content: center !important;
}

/* Card do usuário recolhido: só avatar */
.sidebar.sidebar-collapsed .user-card,
.sidebar.sidebar-collapsed .profile-card,
aside.sidebar-collapsed .user-card,
aside.sidebar-collapsed .profile-card {
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Ajusta conteúdo quando recolhe */
.main-content.main-expanded,
.content-area.main-expanded,
main.main-expanded {
  margin-left: 0 !important;
  width: auto !important;
  max-width: none !important;
}


/* FIX MENU SEM ESPAÇO VAZIO */
.nav-item:empty,
nav div:empty,
nav button:empty,
nav a:empty{
display:none!important;
height:0!important;
padding:0!important;
margin:0!important;
}


/* INBOX PROJETOS */
.inbox-tab.active{background:#f1f5f9;font-weight:700;color:#1e293b}
.inbox-project-item{padding:14px 16px;border-bottom:1px solid #f1f5f9;cursor:pointer;transition:.18s}
.inbox-project-item:hover{background:#f8fafc}
.inbox-project-item.active{background:#ecfeff;border-left:4px solid #15636f}
.project-pill{font-size:10px;border-radius:999px;padding:3px 8px;background:#e8f3f5;color:#15636f;font-weight:700}
.quick-btn{border:1px solid #e2e8f0;border-radius:10px;padding:10px 8px;font-size:12px;font-weight:700;color:#334155;background:#f8fafc;display:flex;align-items:center;justify-content:center;gap:6px}
.quick-btn:hover{background:#f1f5f9}


/* FIX MODAL NOVA EQUIPE */
#novaEquipeModalFull .modal-box,
#equipeModal .modal-box {
  max-width: 760px !important;
  width: 94% !important;
}
#novaEquipePessoasChecks label {
  width: 100%;
}


/* FIX LISTA DE PROJETOS NO INBOX */
.inbox-tab.active{background:#f1f5f9;font-weight:700;color:#1e293b}
.inbox-project-item{padding:14px 16px;border-bottom:1px solid #eef2f7;cursor:pointer;transition:.18s ease}
.inbox-project-item:hover{background:#f8fafc}
.inbox-project-item.active{background:#ecfeff;border-left:4px solid #15636f}
.project-pill{font-size:10px;border-radius:999px;padding:3px 8px;background:#e8f3f5;color:#15636f;font-weight:700}
.quick-btn{border:1px solid #e2e8f0;border-radius:10px;padding:10px 8px;font-size:12px;font-weight:700;color:#334155;background:#f8fafc;display:flex;align-items:center;justify-content:center;gap:6px}
.quick-btn:hover{background:#f1f5f9}


/* AUTOCOMPLETE @ PESSOAS NO INBOX */
.mention-box {
  position: fixed;
  z-index: 99999;
  width: 280px;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
  padding: 6px;
  display: none;
}
.mention-item {
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mention-item:hover {
  background: #f1f5f9;
}
.mention-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #15636f;
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mention-meta {
  font-size: 11px;
  color: #94a3b8;
}


/* KANBAN: NOME DO PROJETO NO CARD */
.dept-stage-card .text-slate800,
.kanban-card .text-slate800 {
  letter-spacing: -0.01em;
}


/* UPLOAD DE ARQUIVO/IMAGEM NO INBOX */
.upload-preview-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px;
  font-size: 13px;
  color: #334155;
}
.upload-preview-card img {
  max-width: 220px;
  max-height: 160px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  display: block;
  margin-top: 8px;
}
.upload-file-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}






/* ===== LAYOUT FINAL: BOTAO HAMBURGUER + PROPORCAO ===== */
:root{
  --sidebar-open: 280px;
  --sidebar-closed: 82px;
  --topbar-height: 76px;
  --page-padding: 32px;
}

/* Sidebar */
#sidebar,
aside#sidebar,
aside.sidebar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: var(--sidebar-open) !important;
  min-width: var(--sidebar-open) !important;
  max-width: var(--sidebar-open) !important;
  z-index: 50 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  transition: width .22s ease, min-width .22s ease, max-width .22s ease !important;
}

body.sidebar-collapsed #sidebar,
body.sidebar-collapsed aside#sidebar,
body.sidebar-collapsed aside.sidebar{
  width: var(--sidebar-closed) !important;
  min-width: var(--sidebar-closed) !important;
  max-width: var(--sidebar-closed) !important;
}

/* Main */
#mainContent,
main#mainContent,
main.main-content{
  margin-left: var(--sidebar-open) !important;
  width: calc(100vw - var(--sidebar-open)) !important;
  max-width: calc(100vw - var(--sidebar-open)) !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  padding-top: var(--topbar-height) !important;
  overflow-x: hidden !important;
  transition: margin-left .22s ease, width .22s ease, max-width .22s ease !important;
  box-sizing: border-box !important;
}

body.sidebar-collapsed #mainContent,
body.sidebar-collapsed main#mainContent,
body.sidebar-collapsed main.main-content{
  margin-left: var(--sidebar-closed) !important;
  width: calc(100vw - var(--sidebar-closed)) !important;
  max-width: calc(100vw - var(--sidebar-closed)) !important;
}

/* Header/topbar */
#mainContent > header,
main#mainContent > header,
main.main-content > header,
.topbar{
  position: fixed !important;
  top: 0 !important;
  left: var(--sidebar-open) !important;
  right: 0 !important;
  width: auto !important;
  height: var(--topbar-height) !important;
  z-index: 45 !important;
  background: #fff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  transition: left .22s ease !important;
  box-sizing: border-box !important;
}

body.sidebar-collapsed #mainContent > header,
body.sidebar-collapsed main#mainContent > header,
body.sidebar-collapsed main.main-content > header,
body.sidebar-collapsed .topbar{
  left: var(--sidebar-closed) !important;
}

/* Botao hamburger da topbar */
#sidebarTopToggle{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 12px !important;
  border: 1px solid #dbe4ef !important;
  background: #fff !important;
  color: #334155 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

#sidebarTopToggle:hover{
  background:#f8fafc !important;
}

/* Remove botao flutuante antigo */
#sidebarToggleFixed{
  display:none !important;
}

/* Sidebar recolhida: apenas icones */
body.sidebar-collapsed #sidebar h1,
body.sidebar-collapsed #sidebar h2,
body.sidebar-collapsed #sidebar p,
body.sidebar-collapsed #sidebar span,
body.sidebar-collapsed #sidebar .brand-text,
body.sidebar-collapsed #sidebar .sidebar-text,
body.sidebar-collapsed #sidebar .nav-text,
body.sidebar-collapsed #sidebar .menu-text,
body.sidebar-collapsed #sidebar .sidebar-section-label,
body.sidebar-collapsed #sidebar .user-info{
  display:none !important;
}

body.sidebar-collapsed #sidebar nav a,
body.sidebar-collapsed #sidebar .nav-item,
body.sidebar-collapsed #sidebar .sidebar-link{
  width: 56px !important;
  height: 54px !important;
  margin: 4px auto !important;
  padding: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
}

body.sidebar-collapsed #sidebar nav a *,
body.sidebar-collapsed #sidebar .nav-item *,
body.sidebar-collapsed #sidebar .sidebar-link *{
  font-size: 0 !important;
  line-height: 0 !important;
}

body.sidebar-collapsed #sidebar nav a svg,
body.sidebar-collapsed #sidebar nav a i,
body.sidebar-collapsed #sidebar .nav-item svg,
body.sidebar-collapsed #sidebar .nav-item i,
body.sidebar-collapsed #sidebar .sidebar-link svg,
body.sidebar-collapsed #sidebar .sidebar-link i{
  display:block !important;
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  margin:0 auto !important;
  font-size:24px !important;
  line-height:1 !important;
}

body.sidebar-collapsed #sidebar .user-card{
  width:56px !important;
  height:56px !important;
  padding:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  justify-content:center !important;
  overflow:hidden !important;
}

/* Paginas */
#mainContent > section,
main#mainContent > section,
main.main-content > section,
.page,
.content-page,
[id^="page-"]{
  width: 100% !important;
  max-width: 100% !important;
  padding: var(--page-padding) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
}

/* Grades gerais */
.grid,
.dashboard-grid{
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* Dashboard proporcional */
#page-dashboard .grid:first-of-type,
#page-dashboard .dashboard-grid{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 20px !important;
}

#page-dashboard .grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Inbox proporcional */
#page-inbox{
  height: calc(100vh - var(--topbar-height)) !important;
  overflow: hidden !important;
}

#page-inbox .inbox-layout{
  display:grid !important;
  grid-template-columns: 320px minmax(620px, 1fr) 300px !important;
  gap:18px !important;
  width:100% !important;
  max-width:100% !important;
  height: calc(100vh - var(--topbar-height) - 130px) !important;
  min-height:620px !important;
  overflow:hidden !important;
  align-items:stretch !important;
}

#page-inbox .inbox-layout > *{
  min-width:0 !important;
  max-width:100% !important;
  height:100% !important;
}

#page-inbox .inbox-main-chat{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:14px !important;
  height:calc(100% - 84px) !important;
  overflow:hidden !important;
}

#page-inbox .inbox-chat-column{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  height:100% !important;
  overflow:hidden !important;
}

#page-inbox .inbox-messages{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
}

#page-inbox .inbox-input-row{
  display:flex !important;
  gap:8px !important;
  padding:10px !important;
  flex-shrink:0 !important;
}

#page-inbox .inbox-input-row input{
  min-width:0 !important;
  flex:1 !important;
}

/* Responsivo */
@media(max-width:1500px){
  :root{ --page-padding:24px; }
  #page-inbox .inbox-layout{
    grid-template-columns: 290px minmax(560px,1fr) 280px !important;
    gap:14px !important;
  }
}

@media(max-width:1200px){
  #page-inbox{
    height:auto !important;
    overflow:auto !important;
  }
  #page-inbox .inbox-layout{
    grid-template-columns:1fr !important;
    height:auto !important;
    overflow:visible !important;
  }
  #page-inbox .inbox-main-chat{
    grid-template-columns:1fr !important;
    height:auto !important;
  }
  #page-dashboard .grid-cols-2{
    grid-template-columns:1fr !important;
  }
}



/* WORKFLOWS IA */
.workflow-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px;transition:.2s;cursor:pointer}
.workflow-card:hover{box-shadow:0 8px 22px rgba(15,23,42,.08);transform:translateY(-1px)}
.workflow-card.active{border-color:#15636f;background:#ecfeff}
.workflow-dot{width:10px;height:10px;border-radius:999px;background:#10b981;box-shadow:0 0 0 4px rgba(16,185,129,.12)}
.workflow-dot.off{background:#94a3b8;box-shadow:0 0 0 4px rgba(148,163,184,.15)}
.agent-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:16px}
.agent-avatar{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#15636f,#1e88c7);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.workflow-log-row{display:grid;grid-template-columns:140px 1fr 120px 100px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #f1f5f9;font-size:13px}
.workflow-builder-grid{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:18px}
@media(max-width:1200px){.workflow-builder-grid{grid-template-columns:1fr}.workflow-log-row{grid-template-columns:1fr;gap:4px}}


body { box-sizing: border-box; }

/* =====================================================
   HOTFIX FINAL 14/05 - LAYOUT 100% + HAMBURGUER VISIVEL
   Mantem tudo validado e corrige apenas dimensoes globais
===================================================== */
:root{
  --opera-sidebar-open: 280px;
  --opera-sidebar-closed: 86px;
  --opera-topbar-height: 76px;
  --opera-page-padding: 28px;
}

html, body{
  width:100% !important;
  min-width:0 !important;
  height:100% !important;
  overflow:hidden !important;
}

#app.app-wrap{
  width:100vw !important;
  height:100vh !important;
  min-width:0 !important;
  display:block !important;
  overflow:hidden !important;
  background:#f4f7fb !important;
}

#app.app-wrap,
#mainArea.main-area,
#pagesContainer,
.page-content{
  max-width:100vw !important;
  overflow-x:hidden !important;
}

/* Sidebar fixa e previsivel */
#sidebar.sidebar{
  position:fixed !important;
  inset:0 auto 0 0 !important;
  width:var(--opera-sidebar-open) !important;
  min-width:var(--opera-sidebar-open) !important;
  max-width:var(--opera-sidebar-open) !important;
  height:100vh !important;
  z-index:80 !important;
  transform:none !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  transition:width .22s ease, min-width .22s ease, max-width .22s ease !important;
}

body.sidebar-collapsed #sidebar.sidebar{
  width:var(--opera-sidebar-closed) !important;
  min-width:var(--opera-sidebar-closed) !important;
  max-width:var(--opera-sidebar-closed) !important;
}

/* Area principal: ocupa exatamente o restante da tela */
#mainArea.main-area{
  position:relative !important;
  margin-left:var(--opera-sidebar-open) !important;
  width:calc(100vw - var(--opera-sidebar-open)) !important;
  max-width:calc(100vw - var(--opera-sidebar-open)) !important;
  height:100vh !important;
  min-width:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  transition:margin-left .22s ease, width .22s ease, max-width .22s ease !important;
  background:#f4f7fb !important;
  box-sizing:border-box !important;
}

body.sidebar-collapsed #mainArea.main-area{
  margin-left:var(--opera-sidebar-closed) !important;
  width:calc(100vw - var(--opera-sidebar-closed)) !important;
  max-width:calc(100vw - var(--opera-sidebar-closed)) !important;
}

/* Topbar dentro da area principal */
#mainArea > header{
  position:sticky !important;
  top:0 !important;
  left:auto !important;
  right:auto !important;
  width:100% !important;
  height:var(--opera-topbar-height) !important;
  min-height:var(--opera-topbar-height) !important;
  z-index:70 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(12px) !important;
  border-bottom:1px solid #e2e8f0 !important;
  box-sizing:border-box !important;
}

/* Botao hamburguer sempre presente na topbar */
#sidebarTopToggle{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  align-items:center !important;
  justify-content:center !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  border-radius:12px !important;
  border:1px solid #dbe4ef !important;
  background:#ffffff !important;
  color:#334155 !important;
  cursor:pointer !important;
  position:relative !important;
  z-index:100 !important;
}

#sidebarTopToggle svg,
#sidebarTopToggle i{
  display:block !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  color:#334155 !important;
  stroke:currentColor !important;
}

/* Container das paginas */
#pagesContainer{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  padding:var(--opera-page-padding) !important;
  box-sizing:border-box !important;
  overflow-x:hidden !important;
}

.page-content{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  overflow-x:hidden !important;
}

.page-content.hidden{
  display:none !important;
}

/* Dashboard: corrige cards gigantes/metade da tela */
#page-dashboard > .grid:first-of-type{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap:18px !important;
  width:100% !important;
}

#page-dashboard .portal-grid-fixed{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:18px !important;
  width:100% !important;
}

/* Todos os blocos respeitam o container */
.chart-box,
.kpi-card,
.projeto-row,
.modal-box,
.inbox-layout,
.dept-stage-board,
table{
  max-width:100% !important;
  box-sizing:border-box !important;
}

.grid,
.flex,
.chart-box,
.kpi-card{
  min-width:0 !important;
}

/* Inbox proporcional */
#page-inbox .inbox-layout{
  display:grid !important;
  grid-template-columns:300px minmax(0, 1fr) 300px !important;
  gap:16px !important;
  width:100% !important;
  max-width:100% !important;
  height:calc(100vh - var(--opera-topbar-height) - 150px) !important;
  min-height:600px !important;
  overflow:hidden !important;
}

#page-inbox .inbox-layout > *{
  min-width:0 !important;
  max-width:100% !important;
  height:100% !important;
  overflow:hidden !important;
}

#page-inbox .grid.grid-cols-2{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}

/* Sidebar recolhida: centraliza icones sem quebrar */
body.sidebar-collapsed #sidebar .nav-item{
  width:58px !important;
  height:54px !important;
  margin:4px auto !important;
  padding:0 !important;
  justify-content:center !important;
  gap:0 !important;
  font-size:0 !important;
}
body.sidebar-collapsed #sidebar .nav-group{
  padding:0 !important;
}
body.sidebar-collapsed #sidebar .nav-group .nav-group-toggle{
  padding:0 !important;
  justify-content:center !important;
}
body.sidebar-collapsed #sidebar .nav-group .nav-submenu{
  display:none !important;
}
body.sidebar-collapsed #sidebar .nav-group-chevron{
  display:none !important;
}

body.sidebar-collapsed #sidebar .nav-item svg,
body.sidebar-collapsed #sidebar .nav-item i{
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  margin:0 auto !important;
}

body.sidebar-collapsed #sidebar #brandName,
body.sidebar-collapsed #sidebar #brandTag,
body.sidebar-collapsed #sidebar .text-\[10px\],
body.sidebar-collapsed #sidebar .mt-auto .text-white,
body.sidebar-collapsed #sidebar .mt-auto .text-white\/50{
  display:none !important;
}

body.sidebar-collapsed #sidebar .p-5 .flex{
  justify-content:center !important;
}

body.sidebar-collapsed #sidebar .mt-auto{
  width:58px !important;
  height:58px !important;
  padding:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

body.sidebar-collapsed #sidebar .mt-auto > .flex{
  justify-content:center !important;
  gap:0 !important;
}

/* Responsivo real */
@media(max-width:1200px){
  :root{ --opera-page-padding:20px; }
  #page-inbox .inbox-layout{
    grid-template-columns:1fr !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  #page-inbox .inbox-layout > *{
    height:auto !important;
    min-height:360px !important;
  }
  #page-inbox .grid.grid-cols-2{
    grid-template-columns:1fr !important;
  }
  #page-dashboard .portal-grid-fixed{
    grid-template-columns:1fr !important;
  }
}

@media(min-width:761px) and (max-width:1024px){
  :root{
    --opera-page-padding:18px;
  }
  #sidebar.sidebar{
    width:var(--opera-sidebar-closed) !important;
    min-width:var(--opera-sidebar-closed) !important;
    max-width:var(--opera-sidebar-closed) !important;
    transform:none !important;
  }
  #mainArea.main-area,
  body.sidebar-collapsed #mainArea.main-area{
    margin-left:var(--opera-sidebar-closed) !important;
    width:calc(100vw - var(--opera-sidebar-closed)) !important;
    max-width:calc(100vw - var(--opera-sidebar-closed)) !important;
  }
  #sidebar .nav-item{
    width:58px !important;
    height:54px !important;
    margin:4px auto !important;
    padding:0 !important;
    justify-content:center !important;
    gap:0 !important;
    font-size:0 !important;
  }
  #sidebar .nav-group{
    padding:0 !important;
  }
  #sidebar .nav-group .nav-group-toggle{
    padding:0 !important;
    justify-content:center !important;
  }
  #sidebar .nav-group .nav-submenu,
  #sidebar .nav-group-chevron,
  #sidebar #brandName,
  #sidebar #brandTag,
  #sidebar .text-\[10px\],
  #sidebar .mt-auto .text-white,
  #sidebar .mt-auto .text-white\/50{
    display:none !important;
  }
  #sidebar .nav-item svg,
  #sidebar .nav-item i{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    margin:0 auto !important;
  }
  #sidebar .p-5 .flex,
  #sidebar .mt-auto > .flex{
    justify-content:center !important;
    gap:0 !important;
  }
  #mainArea > header{
    padding-left:18px !important;
    padding-right:18px !important;
    gap:12px !important;
  }
  #mainArea > header input{
    width:min(220px, 32vw) !important;
  }
  body.sidebar-tablet-open #sidebar.sidebar{
    width:var(--opera-sidebar-open) !important;
    min-width:var(--opera-sidebar-open) !important;
    max-width:var(--opera-sidebar-open) !important;
    z-index:90 !important;
    box-shadow:0 20px 70px rgba(15,23,42,.22) !important;
  }
  body.sidebar-tablet-open #sidebar .nav-item{
    width:auto !important;
    height:auto !important;
    margin:2px 12px !important;
    padding:10px 20px !important;
    justify-content:flex-start !important;
    gap:12px !important;
    font-size:14px !important;
  }
  body.sidebar-tablet-open #sidebar .nav-group .nav-group-toggle{
    padding:10px 20px !important;
    justify-content:flex-start !important;
  }
  body.sidebar-tablet-open #sidebar .nav-group.open .nav-submenu{
    display:flex !important;
  }
  body.sidebar-tablet-open #sidebar .nav-group-chevron,
  body.sidebar-tablet-open #sidebar #brandName,
  body.sidebar-tablet-open #sidebar #brandTag,
  body.sidebar-tablet-open #sidebar .text-\[10px\],
  body.sidebar-tablet-open #sidebar .mt-auto .text-white,
  body.sidebar-tablet-open #sidebar .mt-auto .text-white\/50{
    display:block !important;
  }
  body.sidebar-tablet-open #sidebar .nav-item svg,
  body.sidebar-tablet-open #sidebar .nav-item i{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    margin:0 !important;
  }
}

@media(max-width:760px){
  :root{
    --opera-sidebar-open: 260px;
    --opera-page-padding: 16px;
  }
  #sidebar.sidebar{
    width:var(--opera-sidebar-open) !important;
    min-width:var(--opera-sidebar-open) !important;
    max-width:var(--opera-sidebar-open) !important;
    transform:translateX(-100%) !important;
    box-shadow:0 20px 70px rgba(15,23,42,.24) !important;
  }
  body.sidebar-mobile-open #sidebar.sidebar{
    transform:translateX(0) !important;
  }
  #mainArea.main-area,
  body.sidebar-collapsed #mainArea.main-area{
    margin-left:0 !important;
    width:100vw !important;
    max-width:100vw !important;
  }
  #mainArea > header{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  #mainArea > header input{
    width:160px !important;
  }
  #page-dashboard > .grid:first-of-type{
    grid-template-columns:1fr !important;
  }
  #mainArea > header{
    gap:10px !important;
    overflow-x:hidden !important;
  }
  #mainArea > header > .flex:first-child,
  #mainArea > header > .flex:last-child{
    min-width:0 !important;
  }
  #mainArea > header > .flex:last-child{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    justify-content:flex-start !important;
    max-width:52vw !important;
  }
}



/* =========================
   HOTFIX 14/05 - ABAS VISIVEIS
   Garante que o conteudo da aba ativa apareca
========================= */
#mainArea{
  display:block !important;
}
#pagesContainer{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  min-height:calc(100vh - var(--opera-topbar-height, 76px)) !important;
}
.page-content{
  position:relative !important;
  visibility:visible !important;
  opacity:1 !important;
}
.page-content.hidden{
  display:none !important;
}
.page-content:not(.hidden){
  display:block !important;
}
#pagesContainer > .page-content:not(.hidden){
  display:block !important;
}


/* =========================
   HOTFIX DASHBOARD 15/05
   Cards compactos em uma unica linha no desktop
========================= */
#page-dashboard .dashboard-kpi-grid{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(145px, 1fr)) !important;
  gap:14px !important;
  width:100% !important;
  max-width:100% !important;
  margin:18px 0 22px 0 !important;
  align-items:stretch !important;
}

#page-dashboard > .grid:first-of-type{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(145px, 1fr)) !important;
  gap:14px !important;
  width:100% !important;
  max-width:100% !important;
}

#page-dashboard .dashboard-kpi-grid .kpi-card,
#page-dashboard > .grid:first-of-type .kpi-card{
  height:148px !important;
  min-height:148px !important;
  max-height:148px !important;
  padding:16px 18px !important;
  border-radius:18px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
}

#page-dashboard .dashboard-kpi-grid .kpi-card::after,
#page-dashboard > .grid:first-of-type .kpi-card::after{
  height:3px !important;
}

#page-dashboard .dashboard-kpi-grid .kpi-card > .flex,
#page-dashboard > .grid:first-of-type .kpi-card > .flex{
  margin-bottom:10px !important;
}

#page-dashboard .dashboard-kpi-grid .kpi-card .w-10,
#page-dashboard > .grid:first-of-type .kpi-card .w-10{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  border-radius:14px !important;
}

#page-dashboard .dashboard-kpi-grid .kpi-card svg,
#page-dashboard > .grid:first-of-type .kpi-card svg{
  width:20px !important;
  height:20px !important;
}

#page-dashboard .dashboard-kpi-grid .kpi-card [id^="kpi"],
#page-dashboard > .grid:first-of-type .kpi-card [id^="kpi"]{
  font-size:28px !important;
  line-height:1 !important;
  margin:2px 0 6px 0 !important;
  font-weight:800 !important;
}

#page-dashboard .dashboard-kpi-grid .kpi-card .text-xs,
#page-dashboard > .grid:first-of-type .kpi-card .text-xs{
  font-size:12px !important;
  line-height:1.15 !important;
}

#page-dashboard .dashboard-kpi-grid .kpi-card .mt-1,
#page-dashboard > .grid:first-of-type .kpi-card .mt-1{
  margin-top:0 !important;
}

#page-dashboard .dashboard-kpi-grid .kpi-card .mt-2,
#page-dashboard > .grid:first-of-type .kpi-card .mt-2{
  margin-top:8px !important;
}

@media(max-width:1500px){
  #page-dashboard .dashboard-kpi-grid,
  #page-dashboard > .grid:first-of-type{
    grid-template-columns:repeat(5, minmax(120px, 1fr)) !important;
    gap:12px !important;
  }
  #page-dashboard .dashboard-kpi-grid .kpi-card,
  #page-dashboard > .grid:first-of-type .kpi-card{
    height:140px !important;
    min-height:140px !important;
    max-height:140px !important;
    padding:14px 16px !important;
  }
}

@media(max-width:1100px){
  #page-dashboard .dashboard-kpi-grid,
  #page-dashboard > .grid:first-of-type{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }
}

@media(max-width:760px){
  #page-dashboard .dashboard-kpi-grid,
  #page-dashboard > .grid:first-of-type{
    grid-template-columns:1fr !important;
  }
}




/* NOTIFICAÇÕES - AJUSTE ISOLADO */
.notification-wrapper{position:relative}
.notifications-panel{
  position:absolute;
  top:46px;
  right:0;
  width:360px;
  max-width:calc(100vw - 32px);
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:18px;
  box-shadow:0 22px 55px rgba(15,23,42,.18);
  z-index:120;
  overflow:hidden;
}
.notifications-panel.hidden{display:none!important}
.notifications-header{
  padding:16px;
  border-bottom:1px solid #f1f5f9;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  background:#ffffff;
}
.notifications-title{font-size:15px;font-weight:800;color:#1e293b}
.notifications-subtitle{font-size:11px;color:#94a3b8;margin-top:2px}
.notifications-clear-btn{
  font-size:11px;
  font-weight:700;
  color:#15636f;
  background:#ecfeff;
  border:1px solid #cffafe;
  border-radius:999px;
  padding:6px 10px;
  white-space:nowrap;
}
.notifications-list{max-height:360px;overflow-y:auto;background:#fff}
.notification-item{
  display:flex;
  gap:12px;
  padding:13px 16px;
  border-bottom:1px solid #f1f5f9;
  cursor:pointer;
  transition:.18s ease;
}
.notification-item:hover{background:#f8fafc}
.notification-item.unread{background:#f8fcff}
.notification-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.notification-icon.critical{background:#fee2e2;color:#dc2626}
.notification-icon.warning{background:#fef3c7;color:#d97706}
.notification-icon.info{background:#dbeafe;color:#1e88c7}
.notification-icon.success{background:#dcfce7;color:#16a34a}
.notification-content{min-width:0;flex:1}
.notification-title{font-size:13px;font-weight:700;color:#1e293b;line-height:1.25}
.notification-text{font-size:12px;color:#64748b;margin-top:3px;line-height:1.35}
.notification-meta{font-size:10px;color:#94a3b8;margin-top:6px}
.notification-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#1e88c7;
  margin-top:7px;
  flex-shrink:0;
}
.notification-empty{
  padding:28px 18px;
  text-align:center;
  color:#94a3b8;
  font-size:13px;
}
.notifications-footer{
  padding:12px 16px;
  background:#f8fafc;
  border-top:1px solid #f1f5f9;
}
.notifications-footer button{
  width:100%;
  font-size:12px;
  font-weight:700;
  color:#334155;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:9px 12px;
}
@media(max-width:760px){
  .notifications-panel{right:-48px;width:calc(100vw - 24px)}
}



/* STATUS DE CONEXÃO - OPENAI */
.ai-connection-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid #e2e8f0;
  background:#f8fafc;
  color:#64748b;
}
.ai-connection-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#94a3b8;
  box-shadow:0 0 0 4px rgba(148,163,184,.14);
}
.ai-connection-badge.connected{background:#ecfdf5;border-color:#bbf7d0;color:#15803d}
.ai-connection-badge.connected .ai-connection-dot{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18),0 0 12px rgba(34,197,94,.45)}
.ai-connection-badge.testing{background:#fffbeb;border-color:#fde68a;color:#b45309}
.ai-connection-badge.testing .ai-connection-dot{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.18);animation:aiPulse 1s infinite}
.ai-connection-badge.error{background:#fef2f2;border-color:#fecaca;color:#dc2626}
.ai-connection-badge.error .ai-connection-dot{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.16),0 0 12px rgba(239,68,68,.35)}
.ai-connection-badge.empty{background:#f8fafc;border-color:#e2e8f0;color:#64748b}
@keyframes aiPulse{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}




/* BOT DE ATENDIMENTO - JORNADA ANTES DO HUMANO */
.bot-status-pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;border:1px solid #e2e8f0;background:#fff;color:#334155}
.bot-status-dot{width:10px;height:10px;border-radius:999px;background:#94a3b8;box-shadow:0 0 0 4px rgba(148,163,184,.15)}
.bot-status-pill.on .bot-status-dot{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.bot-status-pill.off .bot-status-dot{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.16)}
.bot-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:18px;transition:.2s}
.bot-card:hover{box-shadow:0 10px 28px rgba(15,23,42,.07);transform:translateY(-1px)}
.bot-journey-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:16px;cursor:pointer;transition:.2s}
.bot-journey-card.active{border-color:#15636f;background:#ecfeff}
.bot-step-row{display:grid;grid-template-columns:42px 1fr 170px 170px 110px;gap:12px;align-items:start;padding:14px;border:1px solid #e2e8f0;border-radius:16px;background:#fff;margin-bottom:10px}
.bot-step-index{width:34px;height:34px;border-radius:12px;background:#15636f;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px}
.bot-flow-line{height:16px;width:2px;background:#cbd5e1;margin:0 0 0 31px}
@media(max-width:1200px){.bot-step-row{grid-template-columns:1fr}.bot-step-index{display:none}}
.bot-ai-panel-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:14px}
.bot-ai-kpi-label{font-size:11px;color:#94a3b8;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.bot-ai-kpi-value{font-size:14px;color:#1e293b;font-weight:800;margin-top:4px}
.bot-decision-card{border:1px solid #e2e8f0;border-radius:14px;padding:14px;background:#fff}
.bot-decision-json{background:#0f172a;color:#e2e8f0;border-radius:12px;padding:12px;font-size:11px;overflow:auto;white-space:pre-wrap}
.bot-action-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 10px;font-size:11px;font-weight:800}




/* =====================================================
   CRM COMERCIAL - KANBAN VISUAL
   Ajuste somente visual/estrutura de tela. Não altera APIs.
===================================================== */
#page-crm{
  height:calc(100vh - var(--opera-topbar-height, 76px) - 56px) !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}
#page-crm.hidden{display:none !important;}
#page-crm > .crm-page-header,
#page-crm > .flex.items-center.justify-between{
  flex:0 0 auto !important;
  margin-bottom:14px !important;
  gap:16px !important;
  min-width:0 !important;
  max-width:100% !important;
}
#page-crm .crm-page-header > div:first-child{
  min-width:0 !important;
}
#page-crm .crm-page-header h1,
#page-crm .crm-page-header p{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#page-crm .crm-page-actions{
  min-width:0 !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  flex-wrap:nowrap !important;
  justify-content:flex-end !important;
  padding-bottom:4px !important;
  -webkit-overflow-scrolling:touch !important;
}
#page-crm .crm-page-actions > *{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
#page-crm .crm-commercial-board,
#kanbanBoard.crm-commercial-board{
  flex:1 1 auto !important;
  min-height:0 !important;
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:14px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:2px 2px 10px 2px !important;
  align-items:flex-start !important;
}
#page-crm .kanban-col{
  min-width:230px !important;
  max-width:260px !important;
  width:248px !important;
  height:100% !important;
  max-height:none !important;
  display:flex !important;
  flex-direction:column !important;
  background:#f8fafc !important;
  border:1px solid #e2e8f0 !important;
  border-radius:18px !important;
  padding:12px !important;
  overflow:hidden !important;
}
#page-crm .kanban-col.kanban-fase-vazia,
#page-crm .kanban-col.kanban-fase-recolhida,
#page-crm .kanban-column.kanban-fase-vazia,
#page-crm .kanban-column.kanban-fase-recolhida,
#departamentoKanban .kanban-col.kanban-fase-vazia,
#departamentoKanban .kanban-col.kanban-fase-recolhida,
#departamentoKanban .kanban-column.kanban-fase-vazia,
#departamentoKanban .kanban-column.kanban-fase-recolhida,
#departamentosKanbanEtapas .dept-stage-column.kanban-fase-vazia,
#departamentosKanbanEtapas .dept-stage-column.kanban-fase-recolhida,
#projectKanban .kanban-column.kanban-fase-vazia,
#projectKanban .kanban-column.kanban-fase-recolhida,
#kanbanDemandas .kanban-column.kanban-fase-vazia,
#kanbanDemandas .kanban-column.kanban-fase-recolhida,
#kanbanDepartamentos .kanban-column.kanban-fase-vazia,
#kanbanDepartamentos .kanban-column.kanban-fase-recolhida{
  flex:0 0 44px !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  padding:10px 6px !important;
  overflow:hidden !important;
}
#page-crm .kanban-col,
#page-crm .kanban-column{
  overflow:hidden !important;
}
#page-crm .crm-stage-header{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:8px !important;
  padding:4px 4px 12px 4px !important;
  border-bottom:1px solid #e2e8f0 !important;
  margin-bottom:10px !important;
  flex-shrink:0 !important;
  position:sticky !important;
  top:0 !important;
  z-index:2 !important;
  background:#f8fafc !important;
  overflow:visible !important;
}
#page-crm .crm-stage-header-top{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-width:0 !important;
}
#page-crm .crm-stage-header-bottom{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:6px !important;
  min-width:0 !important;
}
#page-crm .crm-stage-title{
  display:flex !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  align-items:center !important;
  gap:8px !important;
  font-size:13px !important;
  font-weight:800 !important;
  color:#1e293b !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#page-crm .crm-stage-title-text{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#page-crm .crm-stage-actions{
  flex:0 0 auto !important;
  margin-left:auto !important;
  flex-wrap:nowrap !important;
  gap:6px !important;
  overflow:visible !important;
}
#page-crm .crm-stage-header > .crm-stage-meta{
  flex:0 0 auto !important;
  margin-left:4px !important;
}
#page-crm .crm-stage-header > .crm-kanban-toggle-fase{
  flex:0 0 32px !important;
  margin-left:4px !important;
}
#departamentoKanban .demandas-kanban-stage-header,
#departamentosKanbanEtapas .departamentos-kanban-stage-header,
#projectKanban .projetos-kanban-stage-header,
#kanbanDemandas .projetos-kanban-stage-header,
#kanbanDepartamentos .projetos-kanban-stage-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  margin-bottom:12px !important;
}
#departamentoKanban .demandas-kanban-stage-actions,
#departamentosKanbanEtapas .departamentos-kanban-stage-actions,
#projectKanban .projetos-kanban-stage-actions,
#kanbanDemandas .projetos-kanban-stage-actions,
#kanbanDepartamentos .projetos-kanban-stage-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  flex:0 0 auto !important;
}
#page-crm .kanban-fase-recolhida,
#departamentoKanban .kanban-fase-recolhida,
#departamentosKanbanEtapas .dept-stage-column.kanban-fase-recolhida,
#projectKanban .kanban-column.kanban-fase-recolhida,
#kanbanDemandas .kanban-column.kanban-fase-recolhida,
#kanbanDepartamentos .kanban-column.kanban-fase-recolhida,
.dept-stage-column.kanban-fase-vazia,
.kanban-col.kanban-fase-vazia,
.kanban-column.kanban-fase-vazia{
  flex:0 0 44px !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  padding:10px 6px !important;
}
#page-crm .kanban-col:not(.kanban-fase-vazia):not(.kanban-fase-recolhida),
#page-crm .kanban-column:not(.kanban-fase-vazia):not(.kanban-fase-recolhida),
#departamentoKanban .kanban-col:not(.kanban-fase-vazia):not(.kanban-fase-recolhida),
#departamentoKanban .kanban-column:not(.kanban-fase-vazia):not(.kanban-fase-recolhida),
#departamentosKanbanEtapas .dept-stage-column:not(.kanban-fase-vazia):not(.kanban-fase-recolhida),
#projectKanban .kanban-column:not(.kanban-fase-vazia):not(.kanban-fase-recolhida),
#kanbanDemandas .kanban-column:not(.kanban-fase-vazia):not(.kanban-fase-recolhida),
#kanbanDepartamentos .kanban-column:not(.kanban-fase-vazia):not(.kanban-fase-recolhida){
  width:248px !important;
  min-width:230px !important;
  max-width:260px !important;
  flex:0 0 248px !important;
}
#page-crm .kanban-fase-recolhida .crm-stage-header,
#departamentoKanban .kanban-fase-recolhida .dept-stage-header,
#departamentosKanbanEtapas .dept-stage-column.kanban-fase-recolhida .dept-stage-header,
#projectKanban .kanban-column.kanban-fase-recolhida .kanban-column-header,
#kanbanDemandas .kanban-column.kanban-fase-recolhida .kanban-column-header,
#kanbanDepartamentos .kanban-column.kanban-fase-recolhida .kanban-column-header,
.dept-stage-column.kanban-fase-vazia .dept-stage-header,
.kanban-col.kanban-fase-vazia .crm-stage-header,
.kanban-column.kanban-fase-vazia .crm-stage-header,
.kanban-col.kanban-fase-vazia .dept-stage-header,
.kanban-column.kanban-fase-vazia .dept-stage-header,
.dept-stage-column.kanban-fase-vazia .dept-stage-header,
.kanban-col.kanban-fase-vazia .kanban-column-header,
.kanban-column.kanban-fase-vazia .kanban-column-header{
  flex-direction:column !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-bottom:0 !important;
  padding:2px 0 0 0 !important;
}
#page-crm .kanban-fase-recolhida .crm-stage-title,
#departamentoKanban .kanban-fase-recolhida .kanban-coluna-titulo,
#departamentosKanbanEtapas .dept-stage-column.kanban-fase-recolhida .kanban-coluna-titulo,
#projectKanban .kanban-column.kanban-fase-recolhida .kanban-coluna-titulo,
#kanbanDemandas .kanban-column.kanban-fase-recolhida .kanban-coluna-titulo,
#kanbanDepartamentos .kanban-column.kanban-fase-recolhida .kanban-coluna-titulo,
.dept-stage-column.kanban-fase-vazia .kanban-coluna-titulo,
.kanban-col.kanban-fase-vazia .kanban-coluna-titulo,
.kanban-column.kanban-fase-vazia .kanban-coluna-titulo{
  writing-mode:vertical-rl !important;
  transform:rotate(180deg) !important;
  text-orientation:mixed !important;
  white-space:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  min-height:160px !important;
}
#page-crm .kanban-fase-recolhida .kanban-coluna-titulo > span:first-child,
#departamentoKanban .kanban-fase-recolhida .kanban-coluna-titulo > span:first-child,
#departamentosKanbanEtapas .dept-stage-column.kanban-fase-recolhida .kanban-coluna-titulo > span:first-child,
#projectKanban .kanban-column.kanban-fase-recolhida .kanban-coluna-titulo > span:first-child,
#kanbanDemandas .kanban-column.kanban-fase-recolhida .kanban-coluna-titulo > span:first-child,
#kanbanDepartamentos .kanban-column.kanban-fase-recolhida .kanban-coluna-titulo > span:first-child,
.dept-stage-column.kanban-fase-vazia .kanban-coluna-titulo > span:first-child,
.kanban-col.kanban-fase-vazia .kanban-coluna-titulo > span:first-child,
.kanban-column.kanban-fase-vazia .kanban-coluna-titulo > span:first-child{
  display:none !important;
}
#page-crm .kanban-fase-recolhida .crm-stage-body,
#departamentoKanban .kanban-fase-recolhida .kanban-column-body,
#departamentosKanbanEtapas .dept-stage-column.kanban-fase-recolhida .dept-stage-body,
#projectKanban .kanban-column.kanban-fase-recolhida .kanban-column-body,
#kanbanDemandas .kanban-column.kanban-fase-recolhida .kanban-column-body,
#kanbanDepartamentos .kanban-column.kanban-fase-recolhida .kanban-column-body,
.dept-stage-column.kanban-fase-vazia .dept-stage-body,
.kanban-col.kanban-fase-vazia .kanban-column-body,
.kanban-column.kanban-fase-vazia .kanban-column-body,
.kanban-col.kanban-fase-vazia .crm-stage-body,
.kanban-column.kanban-fase-vazia .crm-stage-body,
.kanban-col.kanban-fase-vazia .dept-stage-body,
.kanban-column.kanban-fase-vazia .dept-stage-body{
  display:none !important;
}
#page-crm .kanban-fase-recolhida .crm-stage-actions,
#departamentoKanban .kanban-fase-recolhida .dept-stage-actions,
#departamentosKanbanEtapas .dept-stage-column.kanban-fase-recolhida .dept-stage-actions,
#projectKanban .kanban-column.kanban-fase-recolhida .projetos-kanban-stage-actions,
#kanbanDemandas .kanban-column.kanban-fase-recolhida .projetos-kanban-stage-actions,
#kanbanDepartamentos .kanban-column.kanban-fase-recolhida .projetos-kanban-stage-actions,
.dept-stage-column.kanban-fase-vazia .dept-stage-actions,
.kanban-col.kanban-fase-vazia .crm-stage-actions,
.kanban-column.kanban-fase-vazia .crm-stage-actions,
.kanban-col.kanban-fase-vazia .dept-stage-actions,
.kanban-column.kanban-fase-vazia .dept-stage-actions,
.kanban-col.kanban-fase-vazia .projetos-kanban-stage-actions,
.kanban-column.kanban-fase-vazia .projetos-kanban-stage-actions{
  flex-direction:column !important;
  align-items:center !important;
}
#page-crm .kanban-fase-recolhida .crm-stage-actions .crm-stage-add-btn:not(.kanban-toggle-fase),
#page-crm .kanban-fase-recolhida .crm-stage-actions .crm-card-edit-btn,
#page-crm .kanban-fase-recolhida .crm-stage-actions .crm-card-delete-btn,
#departamentosKanbanEtapas .dept-stage-column.kanban-fase-recolhida .dept-stage-edit-btn,
#departamentosKanbanEtapas .dept-stage-column.kanban-fase-recolhida .dept-stage-new-btn,
.dept-stage-column.kanban-fase-vazia .dept-stage-edit-btn,
.dept-stage-column.kanban-fase-vazia .dept-stage-new-btn,
.kanban-col.kanban-fase-vazia .kanban-stage-actions,
.kanban-column.kanban-fase-vazia .kanban-stage-actions,
.kanban-col.kanban-fase-vazia .crm-stage-actions > *,
.kanban-column.kanban-fase-vazia .crm-stage-actions > *,
.kanban-col.kanban-fase-vazia .dept-stage-actions > *,
.kanban-column.kanban-fase-vazia .dept-stage-actions > *{
  display:none !important;
}

#page-crm #crmKanbanView{
  min-height:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}

#page-crm #kanbanBoard.crm-commercial-board{
  min-height:320px !important;
  max-height:calc(100vh - 140px) !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-gutter:stable !important;
}

#page-crm #kanbanBoard.crm-commercial-board > .kanban-col:not(.kanban-fase-vazia):not(.kanban-fase-recolhida),
#page-crm #kanbanBoard.crm-commercial-board > .kanban-column:not(.kanban-fase-vazia):not(.kanban-fase-recolhida),
#page-crm #kanbanBoard.crm-commercial-board > .crm-stage:not(.kanban-fase-vazia):not(.kanban-fase-recolhida){
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  max-height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
}

#page-crm #kanbanBoard.crm-commercial-board > .kanban-fase-vazia,
#page-crm #kanbanBoard.crm-commercial-board > .kanban-fase-recolhida{
  height:auto !important;
  max-height:none !important;
  align-self:flex-start !important;
}

#page-crm #kanbanBoard.crm-commercial-board .crm-stage-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior-y:contain !important;
  scrollbar-gutter:stable !important;
  padding-right:2px !important;
}

#page-crm #kanbanBoard.crm-commercial-board .kanban-fase-vazia .crm-stage-body,
#page-crm #kanbanBoard.crm-commercial-board .kanban-fase-recolhida .crm-stage-body{
  overflow:hidden !important;
}

#page-crm #kanbanBoard.crm-commercial-board .crm-card:last-child,
#page-crm #kanbanBoard.crm-commercial-board .kanban-card:last-child{
  margin-bottom:0 !important;
}

#departamentosKanbanEtapas.dept-stage-board{
  min-height:0 !important;
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:flex-start !important;
  gap:14px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:2px 2px 10px 2px !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-gutter:stable !important;
}

#departamentosKanbanEtapas.dept-stage-board > .dept-stage-column:not(.kanban-fase-vazia):not(.kanban-fase-recolhida){
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  max-height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
}

#departamentosKanbanEtapas.dept-stage-board > .dept-stage-column.kanban-fase-vazia,
#departamentosKanbanEtapas.dept-stage-board > .dept-stage-column.kanban-fase-recolhida{
  height:auto !important;
  max-height:none !important;
  align-self:flex-start !important;
  overflow:hidden !important;
}

#departamentosKanbanEtapas.dept-stage-board .dept-stage-header{
  flex:0 0 auto !important;
  position:sticky !important;
  top:0 !important;
  z-index:2 !important;
  background:#f1f5f9 !important;
}

#departamentosKanbanEtapas.dept-stage-board .dept-stage-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior-y:contain !important;
  scrollbar-gutter:stable !important;
  padding-right:2px !important;
}

#departamentosKanbanEtapas.dept-stage-board .kanban-fase-vazia .dept-stage-body,
#departamentosKanbanEtapas.dept-stage-board .kanban-fase-recolhida .dept-stage-body{
  overflow:hidden !important;
}

#departamentosKanbanEtapas.dept-stage-board .dept-stage-card:last-child{
  margin-bottom:0 !important;
}
#departamentoKanban .demandas-kanban-stage-toggle,
#departamentosKanbanEtapas .departamentos-kanban-stage-toggle,
#projectKanban .projetos-kanban-stage-toggle,
#kanbanDemandas .projetos-kanban-stage-toggle,
#kanbanDepartamentos .projetos-kanban-stage-toggle,
#page-crm .crm-kanban-toggle-fase{
  min-height:24px !important;
  padding:0 8px !important;
  border-radius:999px !important;
  border:1px solid #dbe4ef !important;
  background:#fff !important;
  color:#15636f !important;
  font-size:11px !important;
  font-weight:900 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  white-space:nowrap !important;
}
#page-crm .crm-kanban-toggle-fase{
  width:32px !important;
  min-width:32px !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 !important;
  flex:0 0 32px !important;
  position:static !important;
  border-radius:12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid #dbe5f0 !important;
  background:#ffffff !important;
  color:#475569 !important;
  font-size:16px !important;
  font-weight:800 !important;
  line-height:1 !important;
  cursor:pointer !important;
  overflow:visible !important;
}
#page-crm .kanban-fase-recolhida .crm-kanban-toggle-fase{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  width:32px !important;
  min-width:32px !important;
  height:32px !important;
  flex:0 0 32px !important;
}
#page-crm .crm-kanban-toggle-fase:hover,
#departamentoKanban .demandas-kanban-stage-toggle:hover,
#departamentosKanbanEtapas .departamentos-kanban-stage-toggle:hover,
#projectKanban .projetos-kanban-stage-toggle:hover,
#kanbanDemandas .projetos-kanban-stage-toggle:hover,
#kanbanDepartamentos .projetos-kanban-stage-toggle:hover{
  background:#ecfeff !important;
  border-color:#99f6e4 !important;
}
#page-crm .kanban-coluna-contagem,
#departamentoKanban .kanban-coluna-contagem,
#departamentosKanbanEtapas .dept-stage-column .kanban-coluna-contagem,
#projectKanban .kanban-column .kanban-coluna-contagem,
#kanbanDemandas .kanban-column .kanban-coluna-contagem,
#kanbanDepartamentos .kanban-column .kanban-coluna-contagem{
  min-width:28px !important;
  height:24px !important;
  padding:0 8px !important;
  border-radius:999px !important;
  background:#e8f3f5 !important;
  color:#15636f !important;
  font-size:12px !important;
  font-weight:900 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#page-crm .crm-stage-meta{
  min-width:28px !important;
  height:24px !important;
  padding:0 8px !important;
  border-radius:999px !important;
  background:#e8f3f5 !important;
  color:#15636f !important;
  font-size:12px !important;
  font-weight:900 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#page-crm .crm-stage-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  padding-right:2px !important;
}
#page-crm .crm-view-tab{
  min-height:32px !important;
  padding:0 14px !important;
  border-radius:10px !important;
  border:none !important;
  background:transparent !important;
  color:#64748b !important;
  font-size:12px !important;
  font-weight:800 !important;
  transition:all .18s ease !important;
}
#page-crm .crm-view-tab.active{
  background:#15636f !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(21,99,111,.14) !important;
}
#page-crm .crm-view-tab:not(.active):hover{
  background:#f8fafc !important;
  color:#1e293b !important;
}
#page-crm #btnCrmGerenciarEtapas{
  position:relative !important;
  z-index:20 !important;
  pointer-events:auto !important;
}
#navProcessoTemplate{
  position:relative !important;
  z-index:20 !important;
  pointer-events:auto !important;
}
#crmManageEtapasModal{
  z-index:10050 !important;
}
#crmManageEtapasModal .modal-box{
  max-height:88vh !important;
}
#processoTemplatesModal{
  z-index:10040 !important;
}
#crmManageEtapasBodyModal,
#processoTemplatesBodyModal{
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.42);
}
#processoTemplateFormBodyModal{
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.42);
}
.crm-body-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.42);
}
.crm-body-modal-panel{
  position:relative;
  width:min(1040px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  overflow:auto;
  background:#fff;
  border-radius:24px;
  box-shadow:0 24px 80px rgba(15,23,42,.28);
  padding:24px;
  z-index:1;
}
.crm-body-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.crm-body-modal-header h2{
  margin:0;
  font-size:24px;
  font-weight:800;
  color:#1f2937;
}
.crm-body-modal-header p{
  margin:4px 0 0;
  color:#64748b;
}
.crm-body-modal-close{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid #dbe4f0;
  background:#f8fafc;
  font-size:24px;
  cursor:pointer;
}
.crm-body-modal-actions{
  display:flex;
  justify-content:flex-end;
  margin-bottom:16px;
}
.crm-body-modal-primary{
  border:0;
  border-radius:14px;
  background:#126b76;
  color:#fff;
  padding:12px 18px;
  font-weight:700;
  cursor:pointer;
}
.crm-body-modal-content{
  min-height:120px;
}
.processo-template-form-panel{
  width:min(920px,calc(100vw - 32px));
}
.processo-template-form-actions{
  margin-top:4px;
}
.template-body-form{
  display:grid;
  gap:18px;
}
.template-form-grid{
  display:grid;
  grid-template-columns:1fr 180px;
  gap:14px;
}
.template-form-grid-wide{
  grid-template-columns:1fr 1fr;
}
.template-body-form label{
  display:grid;
  gap:8px;
  font-weight:700;
  color:#334155;
}
.template-body-form input,
.template-body-form select,
.template-body-form textarea{
  width:100%;
  border:1px solid #dbe4f0;
  border-radius:14px;
  padding:12px 14px;
  font:inherit;
  background:#fff;
}
.template-body-form .template-body-inline-check{
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
}
.template-body-form .template-body-inline-check input{
  width:auto;
}
.template-form-section{
  border:1px solid #e5edf5;
  border-radius:18px;
  padding:16px;
  background:#f8fafc;
}
.template-form-section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.template-form-section-header h3{
  font-size:16px;
  font-weight:800;
  color:#1f2937;
}
.template-form-section-header button{
  border:0;
  border-radius:12px;
  background:#126b76;
  color:#fff;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
}
.template-etapa-row{
  display:grid;
  grid-template-columns:1fr 140px auto;
  gap:10px;
  margin-bottom:10px;
}
.template-etapa-row button{
  border:1px solid #fecaca;
  background:#fff;
  color:#dc2626;
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
}
.crm-body-modal-table{
  width:100%;
  border-collapse:collapse;
}
.crm-body-modal-table th,
.crm-body-modal-table td{
  padding:12px;
  border-bottom:1px solid #e5edf5;
  text-align:left;
}
.crm-body-modal-empty,
.crm-body-modal-error{
  border:1px dashed #cbd5e1;
  border-radius:18px;
  background:#f8fafc;
  color:#475569;
  padding:18px;
  font-size:14px;
}
@media(max-width:768px){
  .template-form-grid{
    grid-template-columns:1fr;
  }
  .template-etapa-row{
    grid-template-columns:1fr;
  }
}
body.crm-modal-open{
  overflow:hidden;
}
#page-crm .crm-dashboard-kpis{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}
#page-crm .crm-dashboard-kpis > article{
  min-width:0 !important;
  overflow:hidden !important;
}
#page-crm .crm-dashboard-kpis p,
#page-crm .crm-dashboard-kpis div{
  min-width:0 !important;
  overflow-wrap:anywhere !important;
}
#page-crm .crm-dashboard-kpis .text-2xl{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
@media (max-width: 1199px) and (min-width: 768px){
  #page-crm .crm-dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width: 767px){
  #page-crm .crm-dashboard-kpis{grid-template-columns:1fr !important;}
}
#page-crm .crm-dashboard-panels{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}
#page-crm .crm-dashboard-panel{
  min-height:0 !important;
  min-width:0 !important;
  overflow:hidden !important;
}
#page-crm .crm-dashboard-panels > section{
  grid-column:auto !important;
}
#page-crm .crm-dashboard-panel-wide{
  grid-column:auto !important;
}
@media (max-width: 1023px){
  #page-crm .crm-dashboard-panels{grid-template-columns:1fr !important;}
}
@media (max-width: 767px){
  #page-crm{
    height:auto !important;
    min-height:calc(100vh - var(--opera-topbar-height, 76px) - 32px) !important;
    overflow:visible !important;
  }
  #page-crm > .crm-page-header,
  #page-crm > .flex.items-center.justify-between{
    align-items:flex-start !important;
    flex-direction:column !important;
  }
  #page-crm .crm-page-actions{
    width:100% !important;
    justify-content:flex-start !important;
  }
  #page-crm .crm-page-actions button{
    padding-left:12px !important;
    padding-right:12px !important;
  }
}
#page-crm .crm-dashboard-chart-frame{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  height:280px !important;
  min-width:0 !important;
}
#page-crm .crm-dashboard-chart-frame-line{
  height:240px !important;
}
#page-crm .crm-dashboard-chart-frame canvas{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:100% !important;
}
#page-crm .crm-dashboard-empty{
  border:1px dashed #cbd5e1 !important;
  background:#f8fafc !important;
  color:#64748b !important;
}
#page-crm .kanban-card{
  background:#ffffff !important;
  border:1px solid #e2e8f0 !important;
  border-radius:12px !important;
  padding:8px 9px !important;
  margin-bottom:7px !important;
  box-shadow:0 2px 8px rgba(15,23,42,.04) !important;
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  overflow-x:clip !important;
  gap:7px !important;
}
#page-crm .kanban-card *,
#page-crm .kanban-card *::before,
#page-crm .kanban-card *::after{
  box-sizing:border-box !important;
  max-width:100% !important;
}
#page-crm .kanban-card:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.08) !important;
  border-color:#cbd5e1 !important;
}
#page-crm .crm-card-top{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:7px !important;
  margin-bottom:0 !important;
  min-width:0 !important;
  max-width:100% !important;
}
#page-crm .crm-card-identity{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}
#page-crm .crm-card-avatar{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.7) !important;
  color:#fff !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:900 !important;
  box-shadow:0 1px 4px rgba(15,23,42,.12) !important;
}
#page-crm .crm-card-title-wrap{
  min-width:0 !important;
  flex:1 1 auto !important;
}
#page-crm .crm-card-title,
#page-crm .crm-card-subtitle,
#page-crm .crm-card-compact-fields,
#page-crm .crm-card-fields,
#page-crm .crm-card-footer{
  min-width:0 !important;
  max-width:100% !important;
}
#page-crm .crm-card-title{
  font-size:12.5px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
  color:#1e293b !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#page-crm .crm-card-subtitle{
  font-size:10px !important;
  color:#94a3b8 !important;
  margin-top:1px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#page-crm .crm-card-edit-btn{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  max-width:30px !important;
  flex:0 0 30px !important;
  border-radius:10px !important;
  border:1px solid #e2e8f0 !important;
  background:#fff !important;
  color:#64748b !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#page-crm .crm-card-edit-btn:hover{background:#f1f5f9 !important;color:#15636f !important;}
#page-crm .crm-card-menu-btn{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  max-width:30px !important;
  flex:0 0 30px !important;
  border-radius:9px !important;
  border:1px solid #e2e8f0 !important;
  background:#ffffff !important;
  color:#475569 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:18px !important;
  line-height:1 !important;
  font-weight:900 !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
}
#page-crm .crm-card-menu-btn:hover,
#page-crm .crm-card-menu-btn[aria-expanded="true"]{
  background:#f8fafc !important;
  border-color:#cbd5e1 !important;
  color:#15636f !important;
}
#page-crm .crm-card-menu-btn:focus-visible,
#page-crm .crm-card-action-menu-item:focus-visible{
  outline:2px solid #1e88c7 !important;
  outline-offset:2px !important;
}
#page-crm .crm-card-action-menu[hidden]{
  display:none !important;
}
#page-crm .crm-card-action-menu{
  position:fixed !important;
  z-index:10020 !important;
  width:176px !important;
  padding:5px !important;
  border:1px solid #dbe4ef !important;
  border-radius:10px !important;
  background:#ffffff !important;
  box-shadow:0 18px 38px rgba(15,23,42,.18) !important;
}
#page-crm .crm-card-action-menu-item{
  width:100% !important;
  min-height:34px !important;
  padding:7px 9px !important;
  border:0 !important;
  border-radius:7px !important;
  background:transparent !important;
  color:#334155 !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  text-align:left !important;
  cursor:pointer !important;
}
#page-crm .crm-card-action-menu-item:hover{
  background:#f1f5f9 !important;
  color:#15636f !important;
}
#page-crm .crm-card-action-menu-item.danger{
  color:#dc2626 !important;
}
#page-crm .crm-card-action-menu-item.danger:hover{
  background:#fef2f2 !important;
  color:#b91c1c !important;
}
#page-crm .crm-card-action-menu-separator{
  height:1px !important;
  margin:5px 3px !important;
  background:#e2e8f0 !important;
}
#page-crm .crm-stage-actions{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  position:relative !important;
  z-index:3 !important;
  overflow:visible !important;
  min-height:34px !important;
}
#page-crm .crm-stage-add-btn{
  height:24px !important;
  min-width:24px !important;
  padding:0 8px !important;
  border-radius:9px !important;
  border:1px solid #dbe4ef !important;
  background:#ffffff !important;
  color:#15636f !important;
  font-size:11px !important;
  font-weight:900 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
}
#page-crm .crm-stage-add-btn:hover{background:#ecfeff !important;border-color:#99f6e4 !important;}
#page-crm .crm-card-actions{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  flex-shrink:0 !important;
  max-width:max-content !important;
  position:relative !important;
}
#page-crm .crm-card-delete-btn{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  max-width:28px !important;
  flex:0 0 28px !important;
  border-radius:10px !important;
  border:1px solid #fee2e2 !important;
  background:#fff !important;
  color:#ef4444 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#page-crm .crm-card-delete-btn:hover{background:#fef2f2 !important;color:#dc2626 !important;}
#page-crm .crm-card-action-btn{height:28px !important;min-width:28px !important;max-width:28px !important;flex:0 0 28px !important;padding:0 !important;border-radius:10px !important;border:1px solid #e2e8f0 !important;background:#fff !important;color:#64748b !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:5px !important;font-size:11px !important;font-weight:800 !important;}
#page-crm .crm-card-action-btn:hover{background:#ecfeff !important;color:#15636f !important;border-color:#99f6e4 !important;}
#page-crm .crm-card-action-btn.warn:hover{background:#fff7ed !important;color:#c2410c !important;border-color:#fed7aa !important;}
#page-crm .crm-manage-etapas-modal{
  max-width:1120px !important;
  width:min(96vw, 1120px) !important;
}
#page-crm .crm-manage-etapas-modal table{
  border-collapse:separate !important;
  border-spacing:0 !important;
}
#page-crm .crm-manage-etapas-modal tbody tr:last-child td{
  border-bottom:none !important;
}
#page-crm .crm-manage-etapas-modal button[disabled]{
  pointer-events:none !important;
}
.crm-rule-row{display:grid;grid-template-columns:1.1fr 1.1fr 1fr 1fr 90px;gap:10px;align-items:end;padding:12px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;}
.crm-rule-row select,.crm-rule-row input{width:100%;border:1px solid #e2e8f0;border-radius:10px;padding:9px 10px;font-size:13px;outline:none;background:#fff;}
.crm-rule-row label{display:block;font-size:11px;font-weight:800;color:#64748b;margin-bottom:4px;text-transform:uppercase;letter-spacing:.02em;}
@media(max-width:900px){.crm-rule-row{grid-template-columns:1fr;}}

#page-crm .crm-card-field{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  font-size:10px !important;
  color:#64748b !important;
  min-width:0 !important;
}
#page-crm .crm-card-field span{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#page-crm .crm-card-fields{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:5px !important;
  width:100% !important;
  overflow-x:clip !important;
}
#page-crm .crm-card-field-pill{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  min-width:0 !important;
  width:fit-content !important;
  max-width:100% !important;
  padding:3px 8px !important;
  border-radius:999px !important;
  border:1px solid #e2e8f0 !important;
  background:#f8fafc !important;
  color:#475569 !important;
  font-size:10px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}
#page-crm .crm-card-field-pill > i,
#page-crm .crm-card-field-pill > svg{
  flex:0 0 12px !important;
}
#page-crm .crm-card-field-pill .crm-card-field-label{
  flex-shrink:0 !important;
  min-width:auto !important;
  font-weight:800 !important;
  color:#475569 !important;
}
#page-crm .crm-card-field-pill .crm-card-field-value{
  display:block !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#page-crm .crm-prob-bar{
  height:3px !important;
  border-radius:999px !important;
  background:#e2e8f0 !important;
  overflow:hidden !important;
  margin:4px 0 0 0 !important;
  max-width:100% !important;
}
#page-crm .crm-prob-fill{
  height:100% !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#15636f,#1e88c7) !important;
}
#page-crm .crm-prob-fill.crm-prob-fill-success{
  background:#10b981 !important;
}
#page-crm .crm-prob-fill.crm-prob-fill-loss{
  background:#ef4444 !important;
}
#page-crm .crm-card-footer{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:6px !important;
  flex-wrap:nowrap !important;
  overflow-x:clip !important;
  min-height:14px !important;
}
#page-crm .crm-card-footer-value,
#page-crm .crm-card-footer-note,
#page-crm .crm-card-footer-badges,
#page-crm .crm-card-footer .badge{
  min-width:0 !important;
  max-width:100% !important;
}
#page-crm .crm-card-footer-value,
#page-crm .crm-card-footer-note,
#page-crm .crm-card-footer .badge{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#page-crm .crm-card-compact-fields{
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  width:100% !important;
}
#page-crm .crm-card-compact-line{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  min-width:0 !important;
  width:100% !important;
  color:#64748b !important;
  font-size:10px !important;
  line-height:1.25 !important;
}
#page-crm .crm-card-compact-line > i,
#page-crm .crm-card-compact-line > svg{
  width:12px !important;
  height:12px !important;
  min-width:12px !important;
  color:#94a3b8 !important;
}
#page-crm .crm-card-compact-label{
  flex:0 0 auto !important;
  color:#475569 !important;
  font-weight:800 !important;
}
#page-crm .crm-card-compact-value{
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#page-crm .crm-card-probability{
  width:100% !important;
  min-width:0 !important;
}
#page-crm .crm-card-probability-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  min-width:0 !important;
  color:#64748b !important;
  font-size:10px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}
#page-crm .crm-card-probability-head strong{
  flex:0 0 auto !important;
  color:#1e293b !important;
  font-size:11px !important;
  font-weight:900 !important;
}
#page-crm .crm-card-footer-value{
  flex:0 1 auto !important;
  color:#15636f !important;
  font-size:10px !important;
  font-weight:800 !important;
}
#page-crm .crm-card-footer-note{
  flex:1 1 auto !important;
  color:#94a3b8 !important;
  font-size:10px !important;
  font-weight:700 !important;
}
#page-crm .crm-card-id-pill{
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#page-crm .crm-card-id-pill > i,
#page-crm .crm-card-id-pill > svg{
  flex:0 0 12px !important;
}
#page-crm .crm-card-id-pill > span{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#page-crm .crm-empty-stage{
  border:1px dashed #cbd5e1 !important;
  background:#ffffff !important;
  color:#94a3b8 !important;
  border-radius:14px !important;
  padding:18px 12px !important;
  text-align:center !important;
  font-size:12px !important;
  line-height:1.35 !important;
}

#crmFieldConfigRows .crm-field-config-row{
  display:grid;
  grid-template-columns: 34px 1.2fr 180px 130px 130px 110px 82px;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#fff;
}
#crmFieldConfigRows .crm-field-config-row input[type="text"],
#crmFieldConfigRows .crm-field-config-row select{
  width:100%;
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:8px 10px;
  font-size:13px;
  outline:none;
}
#crmFieldConfigRows .crm-field-config-row input[type="text"]:focus,
#crmFieldConfigRows .crm-field-config-row select:focus{border-color:#1e88c7;}
.crm-field-row-actions{display:flex;align-items:center;justify-content:center;gap:6px;}
.crm-field-action-btn{width:34px;height:34px;border-radius:10px;border:1px solid #e2e8f0;background:#fff;color:#64748b;display:flex;align-items:center;justify-content:center;transition:.18s ease;}
.crm-field-action-btn:hover{background:#f8fafc;color:#1e293b;}
.crm-field-action-btn.danger{border-color:#fecaca;color:#ef4444;}
.crm-field-action-btn.danger:hover{background:#fef2f2;color:#dc2626;}
.crm-field-add-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #cfe8ed;background:#ecfeff;color:#15636f;border-radius:12px;padding:10px 14px;font-size:13px;font-weight:800;transition:.18s ease;}
.crm-field-add-btn:hover{background:#cffafe;}
.crm-custom-fields-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.crm-custom-field-row label{display:block;font-size:13px;font-weight:700;color:#475569;margin-bottom:4px;}
.crm-custom-field-row input,.crm-custom-field-row textarea{width:100%;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;font-size:13px;outline:none;}
.crm-custom-field-row input:focus,.crm-custom-field-row textarea:focus{border-color:#1e88c7;box-shadow:0 0 0 3px rgba(30,136,199,.10);}
@media(max-width:900px){.crm-custom-fields-grid{grid-template-columns:1fr;}}
.crm-card-field-label{font-weight:800;color:#475569;margin-right:3px;}
.crm-card-id-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:#f1f5f9;color:#64748b;font-size:10px;font-weight:900;margin-top:6px;border:1px solid #e2e8f0;}
.crm-stage-config-select{width:100%;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;font-size:14px;outline:none;background:#fff;color:#1e293b;font-weight:700;}
.crm-stage-config-select:focus{border-color:#1e88c7;box-shadow:0 0 0 3px rgba(30,136,199,.12);}
@media(max-width:760px){#crmFieldConfigRows .crm-field-config-row{grid-template-columns:1fr}.crm-field-config-row .text-center{text-align:left!important}}

@media(max-width:1200px){
  #page-crm{height:auto !important;overflow:visible !important;}
  #page-crm .crm-commercial-board,#kanbanBoard.crm-commercial-board{
    display:flex !important;
    overflow-x:auto !important;
    min-height:260px !important;
  }
  #page-crm .kanban-col{min-width:230px !important;max-width:260px !important;width:248px !important;}
}



/* WHATSAPP INSTANCIAS - STATUS ONLINE/OFFLINE */
.wa-instance-status-dot{
  width:10px;
  height:10px;
  min-width:10px;
  border-radius:999px;
  display:inline-block;
  box-shadow:0 0 0 3px rgba(148,163,184,.14);
}
.wa-instance-status-dot.online{
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.14),0 0 10px rgba(34,197,94,.65);
}
.wa-instance-status-dot.offline{
  background:#ef4444;
  box-shadow:0 0 0 3px rgba(239,68,68,.12),0 0 10px rgba(239,68,68,.45);
}
.wa-instance-status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}
.wa-instance-status-pill.online{
  background:#dcfce7;
  color:#15803d;
}
.wa-instance-status-pill.offline{
  background:#fee2e2;
  color:#b91c1c;
}



.atendimento-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:800;border:1px solid #cbd5e1;background:#f8fafc;color:#334155;white-space:nowrap}
.atendimento-pill.aberto{background:#ecfeff;border-color:#a5f3fc;color:#15636f}
.atendimento-pill.em-atendimento{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.atendimento-pill.aguardando-cliente{background:#fffbeb;border-color:#fde68a;color:#b45309}
.atendimento-pill.transferido{background:#f5f3ff;border-color:#ddd6fe;color:#6d28d9}
.atendimento-pill.fechado{background:#f1f5f9;border-color:#cbd5e1;color:#64748b}
.atendimento-mini{font-size:10px;color:#64748b;margin-top:3px;display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.opera-v19-action-danger{border-color:#fecaca!important;background:#fff!important;color:#dc2626!important}
.opera-v19-action-danger:hover{background:#fef2f2!important}
.opera-v19-sidebar-line{display:flex;align-items:center;justify-content:space-between;gap:8px}
.opera-v19-sidebar-muted{font-size:11px;color:#94a3b8;margin-top:4px;line-height:1.3}



:root{
  --opera-inbox-left-width: 268px;
  --opera-inbox-right-width: 288px;
  --opera-inbox-collapsed-width: 58px;
}
#page-inbox .inbox-layout{
  grid-template-columns: var(--opera-inbox-left-width) minmax(0, 1fr) var(--opera-inbox-right-width) !important;
  gap: 14px !important;
}

#page-inbox.opera-inbox-internal-direct .inbox-layout{
  grid-template-columns: var(--opera-inbox-left-width) minmax(0, 1fr) !important;
}

body.opera-inbox-left-collapsed.opera-inbox-internal-direct #page-inbox .inbox-layout{
  grid-template-columns: var(--opera-inbox-collapsed-width) minmax(0, 1fr) !important;
}

#page-inbox.opera-inbox-internal-direct #clientInfoPanel{
  display:none !important;
}

#page-inbox.opera-inbox-internal-direct #inboxChatPanels{
  grid-template-columns: minmax(0, 1fr) !important;
}

#page-inbox.opera-inbox-internal-direct #internalChatPanel{
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  align-self: stretch !important;
}
#page-inbox .opera-panel-toggle{
  width:30px;height:30px;border:1px solid #dbe4ef;border-radius:10px;background:#fff;color:#64748b;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;flex:0 0 auto
}
#page-inbox .opera-panel-toggle:hover{background:#f8fafc;color:#15636f;border-color:#cbd5e1}
#page-inbox .opera-panel-header-compact{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid #e2e8f0;background:#fff}
#page-inbox .opera-collapsed-label{display:none;writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;font-weight:800;color:#64748b;letter-spacing:.4px;margin:auto;padding:12px 0;text-transform:uppercase}
body.opera-inbox-left-collapsed #page-inbox .inbox-layout{grid-template-columns:var(--opera-inbox-collapsed-width) minmax(0,1fr) var(--opera-inbox-right-width)!important}
body.opera-inbox-right-collapsed #page-inbox .inbox-layout{grid-template-columns:var(--opera-inbox-left-width) minmax(0,1fr) var(--opera-inbox-collapsed-width)!important}
body.opera-inbox-left-collapsed.opera-inbox-right-collapsed #page-inbox .inbox-layout{grid-template-columns:var(--opera-inbox-collapsed-width) minmax(0,1fr) var(--opera-inbox-collapsed-width)!important}
body.opera-inbox-left-collapsed #operaInboxLeftPanel > :not(.opera-panel-header-compact),
body.opera-inbox-right-collapsed #operaInboxRightPanel > :not(.opera-panel-header-compact){display:none!important}
body.opera-inbox-left-collapsed #operaInboxLeftPanel .opera-collapsed-label,
body.opera-inbox-right-collapsed #operaInboxRightPanel .opera-collapsed-label{display:block!important}
body.opera-inbox-left-collapsed #operaInboxLeftPanel,
body.opera-inbox-right-collapsed #operaInboxRightPanel{padding:0!important;overflow:hidden!important}
#operaInboxInternalPanel.opera-internal-collapsed{max-width:58px!important;min-width:58px!important;flex:0 0 58px!important}
body.opera-inbox-internal-collapsed #page-inbox .grid.grid-cols-2{grid-template-columns:minmax(0,1fr) var(--opera-inbox-collapsed-width)!important}
body.opera-inbox-internal-collapsed #operaInboxInternalPanel > :not(.opera-panel-header-compact){display:none!important}
body.opera-inbox-internal-collapsed #operaInboxInternalPanel .opera-collapsed-label{display:block!important}
body.opera-inbox-internal-collapsed #operaInboxInternalPanel{padding:0!important;background:#fff!important}
body.opera-inbox-internal-collapsed #operaInboxInternalPanel .opera-panel-header-compact{height:100%;flex-direction:column;justify-content:flex-start;border-bottom:0}
#page-inbox .quick-action{min-height:34px;justify-content:center;font-size:11px;padding:7px 10px;white-space:nowrap}
#page-inbox #quickActions{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
@media(max-width:1500px){
  :root{--opera-inbox-left-width:270px;--opera-inbox-right-width:280px}
  #page-inbox #quickActions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:1180px){
  #page-inbox .inbox-layout{grid-template-columns:1fr!important;height:auto!important;overflow:visible!important}
  body.opera-inbox-left-collapsed #page-inbox .inbox-layout,
  body.opera-inbox-right-collapsed #page-inbox .inbox-layout,
  body.opera-inbox-left-collapsed.opera-inbox-right-collapsed #page-inbox .inbox-layout{grid-template-columns:1fr!important}
}
#page-inbox .atendimento-mini,#page-inbox #sidebarAtendimentoBox,#page-inbox #sidebarAtendimentoStatus{transition:none!important;animation:none!important}
#page-inbox .conv-item{min-height:82px}
#page-inbox .conv-item .atendimento-mini{min-height:20px}
#page-inbox #clientMessages,#page-inbox #internalMessages{scroll-behavior:auto!important}



/*
  Ajuste exclusivamente visual.
  Nao altera rotas, fetchs, Evolution, endpoints, webhooks ou scripts funcionais.
  Objetivo: reduzir o titulo da aba Inbox e dar mais area util ao painel de chat.
*/
#page-inbox{
  height:calc(100vh - var(--opera-topbar-height, 76px)) !important;
  overflow:hidden !important;
}

#page-inbox .opera-inbox-page-header{
  margin-bottom:10px !important;
  min-height:38px !important;
}

#page-inbox .opera-inbox-page-header h1{
  font-size:20px !important;
  line-height:1.05 !important;
  letter-spacing:-.02em !important;
}

#page-inbox .opera-inbox-page-header p{
  display:none !important;
}

#page-inbox #inboxSearch{
  height:38px !important;
}

#page-inbox .inbox-layout{
  height:calc(100vh - var(--opera-topbar-height, 76px) - 92px) !important;
  min-height:0 !important;
  gap:14px !important;
}

#page-inbox .chart-box{
  border-radius:14px !important;
}

#page-inbox .chart-box.p-0{
  padding:0 !important;
}

#page-inbox #internalChatPanel > .px-4.py-3.border-b.border-slate200.bg-white{
  display:none !important;
}

#page-inbox #conversationList{
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

#page-inbox #conversationList > *{
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#page-inbox #conversationList .space-y-2,
#page-inbox #conversationList .space-y-3{
  min-width: 0 !important;
  max-width: 100% !important;
}

#page-inbox .px-5.py-4.border-b.border-slate100{
  padding:12px 16px !important;
}

#page-inbox #chatAvatar{
  width:38px !important;
  height:38px !important;
}

#page-inbox #chatTitle{
  font-size:16px !important;
  line-height:1.15 !important;
}

#page-inbox #chatSubtitle{
  font-size:12px !important;
  line-height:1.15 !important;
  margin-top:2px !important;
}

#page-inbox .grid.grid-cols-2.gap-3.flex-1.p-4.min-h-0{
  padding:12px !important;
  gap:12px !important;
}

#page-inbox .px-4.py-3.border-b.border-slate200.bg-white{
  padding:10px 12px !important;
}

#page-inbox .p-3.border-t.border-slate200.bg-white{
  padding:10px !important;
}

#page-inbox #clientMessages,
#page-inbox #internalMessages{
  padding:14px 14px 14px !important;
}

#page-inbox .conv-item{
  padding:8px 10px !important;
  min-height:64px !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

#page-inbox .conv-avatar{
  width:30px !important;
  height:30px !important;
}

#page-inbox .conv-item > div,
#page-inbox .conv-item .min-w-0{
  min-width:0 !important;
  max-width:100% !important;
}

#page-inbox .sidebar-section{
  padding:10px 12px !important;
}

#page-inbox .sidebar-item{
  padding:7px 9px !important;
  margin-bottom:6px !important;
}

#page-inbox .border-t.border-slate100.p-3.bg-white{
  padding:10px !important;
}

@media(max-width:1180px){
  #page-inbox{
    height:auto !important;
    overflow:auto !important;
  }
  #page-inbox .inbox-layout{
    height:auto !important;
  }
}



/* Mais area para conversa: remove botoes grandes de acao da base */
#page-inbox #quickActions{display:none!important}
#page-inbox #quickActions.closest-hidden{display:none!important}
#page-inbox .chart-box:has(#quickActions) > .border-t{display:none!important}
#page-inbox #operaInboxCenterPanel > .border-t{display:none!important}
#page-inbox .inbox-layout{grid-template-columns:268px minmax(0,1fr) 288px!important;gap:12px!important}
#page-inbox .grid.grid-cols-2.gap-3.flex-1{height:auto!important;min-height:0!important}
#page-inbox #clientMessages,#page-inbox #internalMessages{min-height:0!important}
body.opera-inbox-internal-collapsed #page-inbox .grid.grid-cols-2.gap-3.flex-1{grid-template-columns:minmax(0,1fr) 58px!important}
body.opera-inbox-right-collapsed #page-inbox .inbox-layout{grid-template-columns:268px minmax(0,1fr) 58px!important}
body.opera-inbox-left-collapsed #page-inbox .inbox-layout{grid-template-columns:58px minmax(0,1fr) 288px!important}
body.opera-inbox-left-collapsed.opera-inbox-right-collapsed #page-inbox .inbox-layout{grid-template-columns:58px minmax(0,1fr) 58px!important}
#page-inbox.opera-inbox-internal-direct .inbox-layout{grid-template-columns:var(--opera-inbox-left-width) minmax(0,1fr)!important}
body.opera-inbox-left-collapsed.opera-inbox-internal-direct #page-inbox .inbox-layout{grid-template-columns:var(--opera-inbox-collapsed-width) minmax(0,1fr)!important}
#page-inbox.opera-inbox-internal-direct #clientInfoPanel{display:none!important}
#page-inbox.opera-inbox-internal-direct #inboxChatPanels{grid-template-columns:minmax(0,1fr)!important}
#page-inbox.opera-inbox-internal-direct #internalChatPanel{grid-column:1 / -1!important;width:100%!important;max-width:none!important;min-width:0!important;align-self:stretch!important}
#operaInboxActionWrap{position:relative;display:inline-flex;align-items:center}
#operaInboxActionBtn{width:34px;height:34px;border-radius:10px;border:1px solid transparent;display:flex;align-items:center;justify-content:center;color:#64748b;background:#fff;cursor:pointer}
#operaInboxActionBtn:hover{background:#f8fafc;border-color:#dbe4ef;color:#0f6773}
#operaInboxActionMenu{position:absolute;right:0;top:42px;width:250px;background:#fff;border:1px solid #dbe4ef;border-radius:14px;box-shadow:0 20px 45px rgba(15,23,42,.16);padding:8px;z-index:9999;display:none}
#operaInboxActionMenu.open{display:block}
#operaInboxActionMenu button{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:10px 11px;border:0;background:transparent;border-radius:10px;font-weight:700;font-size:13px;color:#1e293b;cursor:pointer}
#operaInboxActionMenu button:hover{background:#f1f5f9}
#operaInboxActionMenu button.danger{color:#ef4444}
#operaInboxActionMenu .divider{height:1px;background:#e2e8f0;margin:6px 2px}
#operaInboxCurrentAtd{font-size:12px;color:#64748b;margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#operaInboxCurrentAtd .atd-id{font-weight:800;color:#0f6773}
.atendimento-pill{display:inline-flex;align-items:center;border:1px solid #67e8f9;background:#ecfeff;color:#0e7490;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:800;line-height:1.3}
.atendimento-pill.fechado{border-color:#fecaca;background:#fef2f2;color:#dc2626}
.atendimento-pill.em-atendimento{border-color:#bfdbfe;background:#eff6ff;color:#2563eb}
.atendimento-pill.aguardando-cliente{border-color:#fde68a;background:#fffbeb;color:#b45309}
#page-inbox .conv-item{transition:none!important;animation:none!important}
#page-inbox .msg-group{transition:none!important;animation:none!important}
@media(max-width:1350px){#page-inbox .inbox-layout{grid-template-columns:240px minmax(0,1fr) 260px!important}#page-inbox .grid.grid-cols-2.gap-3.flex-1{height:auto!important;min-height:0!important}}



  .opera-v23-table{width:100%;border-collapse:separate;border-spacing:0}
  .opera-v23-table th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#94a3b8;text-align:left;padding:12px 14px;border-bottom:1px solid #e2e8f0;font-weight:800;background:#f8fafc}
  .opera-v23-table td{font-size:13px;color:#334155;padding:13px 14px;border-bottom:1px solid #f1f5f9;vertical-align:top}
  .opera-v23-table tr:hover td{background:#f8fafc}
  .opera-v23-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:800;border:1px solid #e2e8f0;background:#f8fafc;color:#475569;white-space:nowrap}
  .opera-v23-pill.aberto,.opera-v23-pill.ativo{background:#ecfdf5;border-color:#bbf7d0;color:#15803d}
  .opera-v23-pill.fechado{background:#f1f5f9;border-color:#cbd5e1;color:#475569}
  .opera-v23-pill.cancelado{background:#fef2f2;border-color:#fecaca;color:#dc2626}
  .opera-v23-actions{display:flex;gap:8px;flex-wrap:wrap}
  .opera-v23-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #e2e8f0;background:#fff;color:#334155;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:800;cursor:pointer;transition:.18s}
  .opera-v23-btn:hover{background:#f8fafc;border-color:#cbd5e1}
  .opera-v23-btn.primary{background:#15636f;color:#fff;border-color:#15636f}
  .opera-v23-btn.primary:hover{background:#0e4a54}
  .opera-v23-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:18px;box-shadow:0 1px 0 rgba(15,23,42,.02)}
  .opera-v23-kpi{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:18px;position:relative;overflow:hidden}
  .opera-v23-kpi:before{content:'';position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,#15636f,#1e88c7)}
  .opera-v23-muted{color:#94a3b8;font-size:12px}
  .opera-v23-drawer{position:fixed;right:20px;top:90px;width:460px;max-width:calc(100vw - 40px);max-height:calc(100vh - 120px);background:#fff;border:1px solid #e2e8f0;border-radius:20px;box-shadow:0 24px 70px rgba(15,23,42,.22);z-index:300;display:none;overflow:hidden}
  .opera-v23-drawer.open{display:flex;flex-direction:column}
  .opera-v23-drawer-head{padding:18px;border-bottom:1px solid #f1f5f9;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .opera-v23-drawer-body{padding:18px;overflow:auto}
  .opera-v23-hidden-row{display:none!important}
  #page-contatos-omni,#page-historico-atendimentos{min-height:calc(100vh - 140px)}
  .opera-v23-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .opera-v23-form-grid.full{grid-template-columns:1fr}
  .opera-v23-label{display:block;font-size:12px;font-weight:800;color:#475569;margin-bottom:6px}
  .opera-v23-input,.opera-v23-select{width:100%;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;font-size:13px;outline:none;background:#fff}
  .opera-v23-input:focus,.opera-v23-select:focus{border-color:#1e88c7;box-shadow:0 0 0 3px rgba(30,136,199,.12)}
  @media(max-width:760px){.opera-v23-form-grid{grid-template-columns:1fr}}



  #page-inbox #clientMessages{transition:none!important;}
  #page-inbox .opera-v25-transient-hidden{display:none!important;}

/* Status publico de implantacao do cliente */
.implant-public-page {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(21, 99, 111, 0.08), transparent 32%),
    linear-gradient(180deg, #f5f7fb 0%, #eef2f7 100%);
  color: #182235;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.implant-public-shell {
  width: min(980px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 32px 0;
}

.implant-public-card {
  background: #f2f4f7;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 28px;
  padding: 34px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.implant-public-card-compact {
  padding: 22px;
  border-radius: 22px;
  box-shadow: none;
}

.implant-public-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  margin-bottom: 22px;
}

.implant-public-header h1,
.implant-public-header h2 {
  margin: 0;
  color: #111827;
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.implant-public-header h1 {
  font-size: clamp(30px, 5vw, 48px);
}

.implant-public-header h2 {
  font-size: clamp(22px, 4vw, 32px);
}

.implant-public-header p {
  margin: 10px 0 0;
  color: #64748b;
  font-size: 16px;
}

.implant-project-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  white-space: nowrap;
}

.implant-project-pill span {
  color: #334155;
  font-weight: 800;
}

.implant-project-pill strong {
  color: #111827;
  font-weight: 700;
}

.implant-message {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  color: #475569;
  line-height: 1.55;
}

.implant-summary-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.implant-summary-row > div {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 13px 15px;
}

.implant-summary-row span {
  display: block;
  color: #94a3b8;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.implant-summary-row strong {
  color: #1e293b;
  font-size: 14px;
  font-weight: 800;
}

.implant-progress {
  height: 10px;
  background: #dbe3ef;
  border-radius: 999px;
  overflow: hidden;
  margin: 12px 0 22px;
}

.implant-progress > div {
  height: 100%;
  background: linear-gradient(90deg, #16a34a, #15636f);
  border-radius: inherit;
  transition: width 0.3s ease;
}

.implant-timeline {
  background: #ffffff;
  border-radius: 24px;
  padding: 14px 22px;
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.implant-step {
  position: relative;
  display: grid;
  grid-template-columns: 42px 58px 1fr minmax(150px, auto);
  gap: 14px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #eef2f7;
}

.implant-step:last-child {
  border-bottom: none;
}

.implant-step::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 52px;
  bottom: -18px;
  width: 4px;
  border-radius: 999px;
  background: #d1d5db;
}

.implant-step:last-child::before {
  display: none;
}

.implant-step-concluido::before {
  background: #16a34a;
}

.implant-step-em_andamento::before {
  background: #2563eb;
}

.implant-step-replanejamento::before {
  background: #f97316;
}

.implant-step-marker {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  font-weight: 900;
  background: #8a929e;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

.implant-step-concluido .implant-step-marker {
  background: #16a34a;
}

.implant-step-em_andamento .implant-step-marker {
  background: #2563eb;
}

.implant-step-replanejamento .implant-step-marker {
  background: #f97316;
}

.implant-step-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  color: #15636f;
}

.implant-step-icon svg {
  width: 34px;
  height: 34px;
  stroke-width: 1.8;
}

.implant-step-body h3 {
  margin: 0;
  color: #111827;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 900;
}

.implant-step-body p {
  margin: 5px 0 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.42;
}

.implant-step-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}

.implant-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.implant-badge svg {
  width: 15px;
  height: 15px;
}

.implant-badge-concluido {
  background: #dcfce7;
  color: #15803d;
}

.implant-badge-em_andamento {
  background: #dbeafe;
  color: #1d4ed8;
}

.implant-badge-pendente {
  background: #f1f5f9;
  color: #64748b;
}

.implant-badge-replanejamento {
  background: #ffedd5;
  color: #c2410c;
}

.implant-step-side small {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
}

.implant-step-side small svg {
  width: 14px;
  height: 14px;
}

.implant-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
  color: #475569;
  font-size: 13px;
}

.implant-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.implant-legend svg {
  width: 16px;
  height: 16px;
}

.implant-empty,
.implant-public-loading,
.implant-public-error {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  color: #64748b;
}

.implant-public-error h1 {
  margin: 0 0 8px;
  color: #111827;
  font-size: 24px;
}

.implant-public-error p {
  margin: 0;
}

.implant-public-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 220px;
}

.implant-loading-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #15636f;
  box-shadow: 0 0 0 8px rgba(21, 99, 111, 0.12);
}

.implant-public-brand {
  margin-top: 18px;
  text-align: center;
  color: #94a3b8;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.client-status-preview {
  max-height: 620px;
  overflow: auto;
}

@media (max-width: 820px) {
  .implant-public-card {
    padding: 22px;
    border-radius: 22px;
  }

  .implant-public-header {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .implant-project-pill {
    justify-content: center;
    white-space: normal;
  }

  .implant-summary-row {
    grid-template-columns: 1fr 1fr;
  }

  .implant-step {
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: start;
  }

  .implant-step-icon {
    display: none;
  }

  .implant-step-body {
    grid-column: 2;
  }

  .implant-step-side {
    grid-column: 2;
    align-items: flex-start;
    text-align: left;
    margin-top: 8px;
  }

  .implant-step::before {
    left: 18px;
  }
}

@media (max-width: 520px) {
  .implant-public-shell {
    width: min(100vw - 18px, 980px);
    padding: 14px 0;
  }

  .implant-summary-row {
    grid-template-columns: 1fr;
  }

  .implant-timeline {
    padding: 10px 14px;
  }
}

/* =====================================================
   CRM COMERCIAL - RESPONSIVIDADE REAL POR AREA UTIL
   Camada final: vence hotfixes anteriores sem remover regras legadas.
===================================================== */
:root{
  --opera-sidebar-open:248px !important;
  --opera-sidebar-closed:72px !important;
  --opera-page-padding:clamp(16px,1.45vw,24px) !important;
}

#app.app-wrap,
#mainArea.main-area,
#pagesContainer,
.page-content,
#page-crm,
#crmDashboardView{
  min-width:0 !important;
  max-width:100% !important;
  overflow-x:hidden !important;
  box-sizing:border-box !important;
}

#sidebar.sidebar{
  width:var(--opera-sidebar-open) !important;
  min-width:var(--opera-sidebar-open) !important;
  max-width:var(--opera-sidebar-open) !important;
}

#mainArea.main-area,
body.sidebar-collapsed #mainArea.main-area{
  margin-left:var(--opera-sidebar-open) !important;
  width:calc(100vw - var(--opera-sidebar-open)) !important;
  max-width:calc(100vw - var(--opera-sidebar-open)) !important;
}

#pagesContainer{
  padding:var(--opera-page-padding) !important;
}

@media(min-width:901px) and (max-width:1440px){
  #sidebar.sidebar,
  body.sidebar-collapsed #sidebar.sidebar{
    width:var(--opera-sidebar-closed) !important;
    min-width:var(--opera-sidebar-closed) !important;
    max-width:var(--opera-sidebar-closed) !important;
    transform:none !important;
  }
  #mainArea.main-area,
  body.sidebar-collapsed #mainArea.main-area{
    margin-left:var(--opera-sidebar-closed) !important;
    width:calc(100vw - var(--opera-sidebar-closed)) !important;
    max-width:calc(100vw - var(--opera-sidebar-closed)) !important;
  }
  #sidebar .nav-item{
    width:52px !important;
    min-height:48px !important;
    margin:4px auto !important;
    padding:0 !important;
    justify-content:center !important;
    gap:0 !important;
    font-size:0 !important;
  }
  #sidebar .nav-group .nav-group-toggle{
    min-height:48px !important;
    padding:0 !important;
    justify-content:center !important;
  }
  #sidebar .nav-submenu,
  #sidebar .nav-group-chevron,
  #sidebar #brandName,
  #sidebar #brandTag,
  #sidebar .text-\[10px\],
  #sidebar .mt-auto .text-white,
  #sidebar .mt-auto .text-white\/50{
    display:none !important;
  }
  #sidebar .nav-item svg,
  #sidebar .nav-item i,
  #sidebar .nav-group-toggle svg,
  #sidebar .nav-group-toggle i{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    margin:0 auto !important;
  }
  body.sidebar-tablet-open #sidebar.sidebar{
    width:var(--opera-sidebar-open) !important;
    min-width:var(--opera-sidebar-open) !important;
    max-width:var(--opera-sidebar-open) !important;
    z-index:95 !important;
    box-shadow:0 22px 70px rgba(15,23,42,.24) !important;
  }
  body.sidebar-tablet-open #sidebar .nav-item{
    width:auto !important;
    min-height:42px !important;
    margin:2px 12px !important;
    padding:10px 18px !important;
    justify-content:flex-start !important;
    gap:12px !important;
    font-size:14px !important;
  }
  body.sidebar-tablet-open #sidebar .nav-group .nav-group-toggle{
    min-height:42px !important;
    padding:10px 18px !important;
    justify-content:flex-start !important;
  }
  body.sidebar-tablet-open #sidebar .nav-group.open .nav-submenu{
    display:flex !important;
  }
  body.sidebar-tablet-open #sidebar .nav-group-chevron,
  body.sidebar-tablet-open #sidebar #brandName,
  body.sidebar-tablet-open #sidebar #brandTag,
  body.sidebar-tablet-open #sidebar .text-\[10px\],
  body.sidebar-tablet-open #sidebar .mt-auto .text-white,
  body.sidebar-tablet-open #sidebar .mt-auto .text-white\/50{
    display:block !important;
  }
}

@media(max-width:900px){
  :root{
    --opera-sidebar-open:248px !important;
    --opera-page-padding:clamp(14px,4vw,18px) !important;
  }
  #sidebar.sidebar,
  body.sidebar-collapsed #sidebar.sidebar{
    width:var(--opera-sidebar-open) !important;
    min-width:var(--opera-sidebar-open) !important;
    max-width:var(--opera-sidebar-open) !important;
    transform:translateX(-100%) !important;
    box-shadow:0 20px 70px rgba(15,23,42,.24) !important;
  }
  body.sidebar-mobile-open #sidebar.sidebar{
    transform:translateX(0) !important;
  }
  #mainArea.main-area,
  body.sidebar-collapsed #mainArea.main-area{
    margin-left:0 !important;
    width:100vw !important;
    max-width:100vw !important;
  }
  #mainArea > header{
    padding-left:var(--opera-page-padding) !important;
    padding-right:var(--opera-page-padding) !important;
  }

  body.sidebar-mobile-open #sidebar .nav-item{
    width:auto !important;
    height:auto !important;
    min-height:42px !important;
    margin:2px 12px !important;
    padding:10px 18px !important;
    justify-content:flex-start !important;
    gap:12px !important;
    font-size:14px !important;
  }

  body.sidebar-mobile-open #sidebar .nav-group .nav-group-toggle{
    min-height:42px !important;
    padding:10px 18px !important;
    justify-content:flex-start !important;
    gap:12px !important;
  }

  body.sidebar-mobile-open #sidebar .nav-group.open .nav-submenu{
    display:flex !important;
  }

  body.sidebar-mobile-open #sidebar .nav-group-chevron,
  body.sidebar-mobile-open #sidebar #brandName,
  body.sidebar-mobile-open #sidebar #brandTag,
  body.sidebar-mobile-open #sidebar .text-\[10px\],
  body.sidebar-mobile-open #sidebar .mt-auto .text-white,
  body.sidebar-mobile-open #sidebar .mt-auto .text-white\/50{
    display:block !important;
  }

  body.sidebar-mobile-open #sidebar .nav-item svg,
  body.sidebar-mobile-open #sidebar .nav-item i,
  body.sidebar-mobile-open #sidebar .nav-group-toggle svg,
  body.sidebar-mobile-open #sidebar .nav-group-toggle i{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    margin:0 !important;
  }
}

#page-crm{
  container-type:inline-size;
  height:auto !important;
  min-height:calc(100vh - var(--opera-topbar-height,76px) - (var(--opera-page-padding) * 2)) !important;
  overflow:visible !important;
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
}

#page-crm.hidden{
  display:none !important;
}

#page-crm > .crm-page-header{
  display:grid !important;
  grid-template-columns:minmax(220px,max-content) minmax(0,1fr) !important;
  align-items:start !important;
  gap:14px 18px !important;
  margin-bottom:0 !important;
}

#page-crm .crm-page-header h1,
#page-crm .crm-page-header p{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:break-word !important;
}

#page-crm .crm-page-actions{
  min-width:0 !important;
  max-width:100% !important;
  width:100% !important;
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:8px !important;
  overflow:visible !important;
  padding-bottom:0 !important;
}

#page-crm .crm-page-actions > *{
  flex:0 1 auto !important;
  max-width:100% !important;
  white-space:normal !important;
}

#page-crm .crm-page-actions button{
  min-height:38px !important;
  min-width:0 !important;
  max-width:100% !important;
  line-height:1.15 !important;
}

#crmDashboardView{
  width:100% !important;
}

#page-crm .crm-dashboard-kpis{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
  width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
}

#page-crm .crm-dashboard-kpis > article{
  min-width:0 !important;
  max-width:100% !important;
}

#page-crm .crm-dashboard-kpis .text-2xl{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
}

#page-crm .crm-dashboard-panels{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
  width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
}

#page-crm .crm-dashboard-panels > section,
#page-crm .crm-dashboard-panel,
#page-crm .crm-dashboard-panel-wide{
  grid-column:auto !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}

#page-crm .crm-dashboard-chart-frame{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:clamp(220px,28cqw,300px) !important;
}

#page-crm .crm-dashboard-chart-frame-line{
  height:clamp(210px,24cqw,270px) !important;
}

#page-crm .crm-dashboard-chart-frame canvas{
  width:100% !important;
  max-width:100% !important;
}

@container (min-width: 700px){
  #page-crm .crm-dashboard-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@container (min-width: 1024px){
  #page-crm .crm-dashboard-panels{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@container (min-width: 1180px){
  #page-crm .crm-dashboard-kpis{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

@container (max-width: 980px){
  #page-crm > .crm-page-header{
    grid-template-columns:1fr !important;
  }
  #page-crm .crm-page-actions{
    justify-content:flex-start !important;
  }
}

@container (max-width: 520px){
  #page-crm .crm-page-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  #page-crm .crm-page-actions > *,
  #page-crm .crm-page-actions button{
    width:100% !important;
    justify-content:center !important;
  }
  #page-crm .crm-page-actions .inline-flex{
    grid-column:1 / -1 !important;
  }
  #page-crm .crm-dashboard-panel{
    padding:18px !important;
  }
}

/* Sidebar restaurada: sem modo intermediario automatico somente com icones. */
@media(min-width:901px){
  #sidebar.sidebar,
  body.sidebar-tablet-open #sidebar.sidebar{
    width:var(--opera-sidebar-open) !important;
    min-width:var(--opera-sidebar-open) !important;
    max-width:var(--opera-sidebar-open) !important;
    transform:none !important;
    box-shadow:none !important;
  }

  #mainArea.main-area,
  body.sidebar-tablet-open #mainArea.main-area{
    margin-left:var(--opera-sidebar-open) !important;
    width:calc(100vw - var(--opera-sidebar-open)) !important;
    max-width:calc(100vw - var(--opera-sidebar-open)) !important;
  }

  #sidebar .nav-item,
  body.sidebar-tablet-open #sidebar .nav-item{
    width:auto !important;
    height:auto !important;
    min-height:42px !important;
    margin:2px 12px !important;
    padding:10px 18px !important;
    justify-content:flex-start !important;
    gap:12px !important;
    font-size:14px !important;
  }

  #sidebar .nav-group,
  body.sidebar-collapsed #sidebar .nav-group{
    padding:0 !important;
  }

  #sidebar .nav-group .nav-group-toggle,
  body.sidebar-tablet-open #sidebar .nav-group .nav-group-toggle{
    min-height:42px !important;
    padding:10px 18px !important;
    justify-content:flex-start !important;
    gap:12px !important;
  }

  #sidebar .nav-group.open .nav-submenu,
  body.sidebar-tablet-open #sidebar .nav-group.open .nav-submenu{
    display:flex !important;
  }

  #sidebar .nav-group-chevron,
  #sidebar #brandName,
  #sidebar #brandTag,
  #sidebar .text-\[10px\],
  #sidebar .mt-auto .text-white,
  #sidebar .mt-auto .text-white\/50,
  body.sidebar-tablet-open #sidebar .nav-group-chevron,
  body.sidebar-tablet-open #sidebar #brandName,
  body.sidebar-tablet-open #sidebar #brandTag,
  body.sidebar-tablet-open #sidebar .text-\[10px\],
  body.sidebar-tablet-open #sidebar .mt-auto .text-white,
  body.sidebar-tablet-open #sidebar .mt-auto .text-white\/50{
    display:block !important;
  }

  #sidebar .nav-item svg,
  #sidebar .nav-item i,
  #sidebar .nav-group-toggle svg,
  #sidebar .nav-group-toggle i,
  body.sidebar-tablet-open #sidebar .nav-item svg,
  body.sidebar-tablet-open #sidebar .nav-item i,
  body.sidebar-tablet-open #sidebar .nav-group-toggle svg,
  body.sidebar-tablet-open #sidebar .nav-group-toggle i{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    margin:0 !important;
  }

  body.sidebar-collapsed #sidebar.sidebar{
    width:var(--opera-sidebar-closed) !important;
    min-width:var(--opera-sidebar-closed) !important;
    max-width:var(--opera-sidebar-closed) !important;
    transform:none !important;
    box-shadow:none !important;
  }

  body.sidebar-collapsed #mainArea.main-area{
    margin-left:var(--opera-sidebar-closed) !important;
    width:calc(100vw - var(--opera-sidebar-closed)) !important;
    max-width:calc(100vw - var(--opera-sidebar-closed)) !important;
  }

  body.sidebar-collapsed #sidebar .nav-item{
    width:52px !important;
    height:48px !important;
    min-height:48px !important;
    margin:4px auto !important;
    padding:0 !important;
    justify-content:center !important;
    gap:0 !important;
    font-size:0 !important;
  }

  body.sidebar-collapsed #sidebar .nav-group .nav-group-toggle{
    min-height:48px !important;
    padding:0 !important;
    justify-content:center !important;
    gap:0 !important;
  }

  body.sidebar-collapsed #sidebar .nav-group.open .nav-submenu{
    display:none !important;
  }

  body.sidebar-collapsed #sidebar .nav-group-chevron,
  body.sidebar-collapsed #sidebar #brandName,
  body.sidebar-collapsed #sidebar #brandTag,
  body.sidebar-collapsed #sidebar .text-\[10px\],
  body.sidebar-collapsed #sidebar .mt-auto .text-white,
  body.sidebar-collapsed #sidebar .mt-auto .text-white\/50{
    display:none !important;
  }

  body.sidebar-collapsed #sidebar .nav-item svg,
  body.sidebar-collapsed #sidebar .nav-item i,
  body.sidebar-collapsed #sidebar .nav-group-toggle svg,
  body.sidebar-collapsed #sidebar .nav-group-toggle i{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    margin:0 auto !important;
  }

  body.sidebar-collapsed #sidebar .p-5 .flex,
  body.sidebar-collapsed #sidebar .mt-auto > .flex{
    justify-content:center !important;
    gap:0 !important;
  }

  body.sidebar-collapsed #sidebar .mt-auto{
    width:52px !important;
    height:52px !important;
    padding:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

/* ==========================================================
   OPERA LOGIN ANIMADO - INICIO
   Fundo visual exclusivo do #loginScreen.
   ========================================================== */

#loginScreen {
  position: fixed;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(
      1200px 800px at 50% 45%,
      #123234 0%,
      #0c2224 72%
    ) !important;
}

/*
 * Todo o conteúdo funcional original permanece acima da animação.
 */
#loginScreen > *:not(#operaLoginNetwork):not(.opera-login-traveler) {
  position: relative;
  z-index: 3;
}

#operaLoginNetwork {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.opera-login-traveler {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(207, 228, 229, 0.16);
  background: rgba(45, 90, 95, 0.14);
  clip-path: polygon(
    25% 3%,
    75% 3%,
    100% 50%,
    75% 97%,
    25% 97%,
    0% 50%
  );
  will-change: left, transform;
}

.opera-login-traveler--1 {
  top: 12%;
  left: -170px;
  width: 140px;
  height: 160px;
  animation:
    operaLoginTravelRight 26s linear infinite;
}

.opera-login-traveler--2 {
  top: 55%;
  left: 110%;
  width: 90px;
  height: 104px;
  border-color: rgba(217, 143, 78, 0.22);
  background: rgba(217, 143, 78, 0.1);
  animation:
    operaLoginTravelLeft 19s linear infinite;
}

.opera-login-traveler--3 {
  top: 78%;
  left: -170px;
  width: 60px;
  height: 70px;
  animation:
    operaLoginTravelRight 32s linear -8s infinite;
}

.opera-login-traveler--4 {
  top: 30%;
  left: 110%;
  width: 110px;
  height: 126px;
  animation:
    operaLoginTravelLeft 24s linear -5s infinite;
}

@keyframes operaLoginTravelRight {
  from {
    left: -170px;
    transform: rotate(0deg);
  }

  to {
    left: calc(100% + 170px);
    transform: rotate(180deg);
  }
}

@keyframes operaLoginTravelLeft {
  from {
    left: calc(100% + 170px);
    transform: rotate(0deg);
  }

  to {
    left: -170px;
    transform: rotate(-180deg);
  }
}

@media (max-width: 640px) {
  .opera-login-traveler--1 {
    width: 105px;
    height: 120px;
  }

  .opera-login-traveler--2 {
    width: 70px;
    height: 81px;
  }

  .opera-login-traveler--4 {
    width: 85px;
    height: 98px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .opera-login-traveler {
    animation: none !important;
  }

  .opera-login-traveler--1 {
    left: 5%;
  }

  .opera-login-traveler--2 {
    right: 4%;
    left: auto;
  }

  .opera-login-traveler--3 {
    left: 18%;
  }

  .opera-login-traveler--4 {
    right: 15%;
    left: auto;
  }
}

/* OPERA LOGIN ANIMADO - FIM */

/* Timeline operacional de demandas vinculadas ao cronograma */
.implant-operational-timeline {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 620px;
  margin-top: 18px;
  overflow-x: auto;
  padding: 4px 2px 8px;
}

.implant-operational-node {
  position: relative;
  display: flex;
  flex: 1 0 100px;
  min-width: 100px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.implant-operational-circle {
  position: relative;
  z-index: 2;
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 2px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}

.implant-operational-label {
  margin-top: 7px;
  max-width: 92px;
  color: #94a3b8;
  font-size: 11px;
  line-height: 1.2;
}

.implant-operational-line {
  position: absolute;
  top: 14px;
  z-index: 1;
  height: 2px;
  width: 50%;
  background: #dbe4ef;
}

.implant-operational-line-before {
  left: 0;
}

.implant-operational-line-after {
  right: 0;
}

.implant-operational-node:first-child .implant-operational-line-before,
.implant-operational-node:last-child .implant-operational-line-after {
  display: none;
}

.implant-operational-node.is-complete .implant-operational-circle {
  border-color: #146b75;
  background: #146b75;
  color: #fff;
}

.implant-operational-node.is-complete .implant-operational-line {
  background: #146b75;
}

.implant-operational-node.is-current .implant-operational-circle {
  border-color: #2493ce;
  background: #2493ce;
  color: #fff;
  box-shadow: 0 0 0 5px rgba(36, 147, 206, 0.14);
}

.implant-operational-node.is-current .implant-operational-label {
  color: #147eb8;
  font-weight: 800;
}

.implant-operational-node.is-current .implant-operational-line-before {
  background: #146b75;
}

@media (max-width: 768px) {
  .implant-operational-timeline {
    max-width: calc(100vw - 72px);
  }

  .implant-operational-node {
    flex-basis: 88px;
    min-width: 88px;
  }
}

/* =========================================================
   OPERA — CARTÃO DO USUÁRIO DA SIDEBAR
   ========================================================= */

#sidebar .user-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.07)
    );
  box-shadow:
    0 18px 42px rgba(0, 28, 38, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#sidebar .user-card::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -60px;
  width: 170px;
  height: 170px;
  pointer-events: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  filter: blur(4px);
}

#sidebar .user-card > .flex,
#sidebar .user-card .user-info {
  position: relative;
  z-index: 1;
}

#sidebar .user-card .user-info {
  min-width: 0;
  flex: 1;
}

#sidebar .user-card .user-info > div:first-child,
#sidebar .user-card .user-info .font-semibold,
#sidebar .user-card .user-info .font-bold {
  display: block;
  overflow: hidden;
  max-width: 100%;
  color: #ffffff;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sidebar .user-card .user-info > div:last-child,
#sidebar .user-card .user-info .text-xs {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sidebar .user-card .rounded-full {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(
      145deg,
      #2298df 0%,
      #0875c6 100%
    );
  box-shadow:
    0 9px 22px rgba(2, 67, 107, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

#sidebar .opera-user-logout {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  min-height: 50px;
  margin-top: 16px;
  padding: 7px 11px;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 15px;
  color: rgba(255, 255, 255, 0.92);
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.11),
      rgba(255, 255, 255, 0.06)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

#sidebar .opera-user-logout:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.24);
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.17),
      rgba(255, 255, 255, 0.09)
    );
  box-shadow:
    0 10px 24px rgba(0, 31, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
}

#sidebar .opera-user-logout:active {
  transform: translateY(0);
}

#sidebar .opera-user-logout:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.88);
  outline-offset: 3px;
}

#sidebar .opera-user-logout-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.11);
}

#sidebar .opera-user-logout-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

#sidebar .opera-user-logout-label {
  flex: 1;
  text-align: left;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

#sidebar .opera-user-logout-chevron {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  opacity: 0.45;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

#sidebar .opera-user-logout:hover .opera-user-logout-chevron {
  transform: translateX(2px);
  opacity: 0.82;
}

/* Sidebar recolhida: mantém apenas avatar e ação compacta */
body.sidebar-collapsed #sidebar .user-card,
#sidebar.sidebar-collapsed .user-card,
aside.sidebar-collapsed .user-card {
  padding: 10px;
  border-radius: 17px;
}

body.sidebar-collapsed #sidebar .opera-user-logout,
#sidebar.sidebar-collapsed .opera-user-logout,
aside.sidebar-collapsed .opera-user-logout {
  min-height: 42px;
  padding: 4px;
  justify-content: center;
  border-radius: 13px;
}

body.sidebar-collapsed #sidebar .opera-user-logout-label,
body.sidebar-collapsed #sidebar .opera-user-logout-chevron,
#sidebar.sidebar-collapsed .opera-user-logout-label,
#sidebar.sidebar-collapsed .opera-user-logout-chevron,
aside.sidebar-collapsed .opera-user-logout-label,
aside.sidebar-collapsed .opera-user-logout-chevron {
  display: none;
}

body.sidebar-collapsed #sidebar .opera-user-logout-icon,
#sidebar.sidebar-collapsed .opera-user-logout-icon,
aside.sidebar-collapsed .opera-user-logout-icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  background: transparent;
}

@media (max-width: 768px) {
  #sidebar .user-card {
    padding: 15px;
    border-radius: 19px;
  }

  #sidebar .opera-user-logout {
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sidebar .opera-user-logout,
  #sidebar .opera-user-logout-chevron {
    transition: none;
  }
}


/* =========================================================
   Status da Implantacao - layout compacto
   Escopo exclusivo do modal interno
   ========================================================= */

#projetoStatusModal .modal-box {
  max-width: 1180px !important;
  width: 96% !important;
  padding: 18px 22px !important;
}

/* cabecalho */
#projetoStatusModal .modal-box > .flex.items-start.justify-between.mb-6 {
  margin-bottom: 14px !important;
}

#projetoStatusModal #statusProjetoTitulo {
  font-size: 18px !important;
  line-height: 1.25 !important;
}

#projetoStatusModal #statusProjetoCliente {
  margin-top: 3px !important;
  font-size: 12px !important;
}

#projetoStatusModal #statusProjetoCliente + .flex {
  margin-top: 8px !important;
  gap: 6px !important;
}

#projetoStatusModal #statusProjetoCliente + .flex button {
  padding: 6px 10px !important;
  min-height: 30px !important;
  border-radius: 8px !important;
}

/* KPIs superiores */
#projetoStatusModal #statusProjetoKpis {
  gap: 8px !important;
  margin-bottom: 12px !important;
}

#projetoStatusModal #statusProjetoKpis > * {
  padding: 10px 12px !important;
  min-height: auto !important;
  border-radius: 12px !important;
}

/* envolvidos + timeline */
#projetoStatusModal .grid.xl\:grid-cols-3 {
  gap: 10px !important;
}

#projetoStatusModal .chart-box {
  border-radius: 14px !important;
}

#projetoStatusModal .chart-box.p-4 {
  padding: 11px 13px !important;
}

#projetoStatusModal .chart-box .mb-3 {
  margin-bottom: 8px !important;
}

#projetoStatusModal .chart-box h3 {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

/* tabela envolvidos */
#projetoStatusModal #statusProjetoEnvolvidos {
  font-size: 12px !important;
}

#projetoStatusModal table th {
  padding: 6px 8px !important;
  font-size: 10px !important;
}

#projetoStatusModal table td {
  padding: 6px 8px !important;
}

/* comunicacao */
#projetoStatusModal #statusProjetoComunicacaoSection {
  margin-top: 10px !important;
  padding: 12px !important;
}

#projetoStatusModal #statusProjetoMensagens {
  padding: 8px !important;
  gap: 6px !important;
  max-height: 220px !important;
}

#projetoStatusModal #statusProjetoComposer {
  margin-top: 8px !important;
}

/* bloco Status para Cliente */
#projetoStatusModal [data-status-cliente-root],
#projetoStatusModal .status-cliente-card {
  padding: 10px !important;
  border-radius: 14px !important;
}

/* botoes do status cliente */
#projetoStatusModal [data-status-cliente-action] {
  padding: 6px 10px !important;
  min-height: 30px !important;
  border-radius: 8px !important;
}

/* painel visual de implantacao */
#projetoStatusModal .implant-page,
#projetoStatusModal .implant-shell,
#projetoStatusModal .implant-panel,
#projetoStatusModal .implant-card {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* titulo do cronograma */
#projetoStatusModal .implant-hero {
  padding: 16px 18px !important;
}

#projetoStatusModal .implant-hero h1,
#projetoStatusModal .implant-hero h2 {
  font-size: 26px !important;
  line-height: 1.1 !important;
  margin-bottom: 5px !important;
}

#projetoStatusModal .implant-hero p {
  font-size: 14px !important;
  margin-top: 2px !important;
}

/* cards cliente / progresso / periodo / etapas */
#projetoStatusModal .implant-summary {
  gap: 8px !important;
  margin-top: 12px !important;
}

#projetoStatusModal .implant-summary > * {
  padding: 10px 12px !important;
  min-height: 64px !important;
  border-radius: 12px !important;
}

#projetoStatusModal .implant-summary span,
#projetoStatusModal .implant-summary small {
  font-size: 10px !important;
}

#projetoStatusModal .implant-summary strong {
  font-size: 14px !important;
}

/* barra de progresso */
#projetoStatusModal .implant-progress {
  margin-top: 10px !important;
  margin-bottom: 12px !important;
}

/* lista principal de etapas */
#projetoStatusModal .implant-timeline {
  gap: 8px !important;
  margin-top: 12px !important;
}

/* cada balao grande de etapa */
#projetoStatusModal .implant-stage,
#projetoStatusModal .implant-step,
#projetoStatusModal .implant-timeline-item,
#projetoStatusModal .implant-item {
  padding: 12px 16px !important;
  min-height: auto !important;
  border-radius: 14px !important;
}

/* timeline interna: Backlog / Em andamento / Validacao / Concluido */
#projetoStatusModal .implant-operational-timeline {
  margin-top: 8px !important;
  margin-bottom: 4px !important;
  min-height: auto !important;
}

#projetoStatusModal .implant-operational-timeline > * {
  min-height: auto !important;
}

/* textos das etapas */
#projetoStatusModal .implant-timeline h3,
#projetoStatusModal .implant-timeline h4 {
  font-size: 14px !important;
  line-height: 1.2 !important;
  margin-bottom: 5px !important;
}

#projetoStatusModal .implant-timeline p,
#projetoStatusModal .implant-timeline span {
  line-height: 1.25 !important;
}

/* badges */
#projetoStatusModal .badge {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

/* reduz espacos Tailwind usados dentro do cronograma */
#projetoStatusModal .implant-timeline .mt-6 {
  margin-top: 10px !important;
}

#projetoStatusModal .implant-timeline .mt-4 {
  margin-top: 8px !important;
}

#projetoStatusModal .implant-timeline .mb-6 {
  margin-bottom: 10px !important;
}

#projetoStatusModal .implant-timeline .mb-4 {
  margin-bottom: 8px !important;
}

/* mobile */
@media (max-width: 768px) {
  #projetoStatusModal .modal-box {
    width: 98% !important;
    padding: 14px !important;
  }

  #projetoStatusModal .implant-hero h1,
  #projetoStatusModal .implant-hero h2 {
    font-size: 21px !important;
  }
}


/* =========================================================
   Status da Implantacao - compactacao v2
   ========================================================= */

/* reduz espaco geral antes do status cliente */
#projetoStatusModal #statusProjetoComunicacaoSection {
  padding-top: 9px !important;
}

/* cabecalho do Status para Cliente */
#projetoStatusModal #statusProjetoComunicacaoSection > div:first-child {
  margin-bottom: 6px !important;
}

#projetoStatusModal [data-status-cliente-root] {
  padding: 8px !important;
}

/* painel cinza principal */
#projetoStatusModal .implant-shell,
#projetoStatusModal .implant-panel {
  padding: 10px 14px !important;
  border-radius: 14px !important;
}

/* hero mais baixo */
#projetoStatusModal .implant-hero {
  padding: 10px 14px !important;
  min-height: 0 !important;
}

#projetoStatusModal .implant-hero h1,
#projetoStatusModal .implant-hero h2 {
  font-size: 22px !important;
  line-height: 1.05 !important;
  margin: 0 0 4px !important;
}

#projetoStatusModal .implant-hero p {
  font-size: 13px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* caixa Projeto */
#projetoStatusModal .implant-hero > div:last-child,
#projetoStatusModal .implant-project {
  padding: 9px 12px !important;
  min-height: auto !important;
  border-radius: 10px !important;
}

/* resumo: Cliente / Progresso / Periodo / Etapas */
#projetoStatusModal .implant-summary {
  gap: 7px !important;
  margin-top: 9px !important;
}

#projetoStatusModal .implant-summary > * {
  padding: 8px 10px !important;
  min-height: 52px !important;
  border-radius: 10px !important;
}

#projetoStatusModal .implant-summary strong {
  font-size: 13px !important;
  line-height: 1.15 !important;
}

#projetoStatusModal .implant-summary span,
#projetoStatusModal .implant-summary small {
  font-size: 9px !important;
  line-height: 1.1 !important;
}

/* barra */
#projetoStatusModal .implant-progress {
  height: 7px !important;
  margin: 8px 0 10px !important;
}

/* container das etapas */
#projetoStatusModal .implant-timeline {
  padding: 10px 12px !important;
  margin-top: 8px !important;
  gap: 0 !important;
  border-radius: 12px !important;
}

/* cada linha/etapa */
#projetoStatusModal .implant-timeline > * {
  min-height: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* nomes das etapas */
#projetoStatusModal .implant-timeline h3,
#projetoStatusModal .implant-timeline h4 {
  font-size: 13px !important;
  line-height: 1.1 !important;
  margin: 0 0 4px !important;
}

/* linha operacional */
#projetoStatusModal .implant-operational-timeline {
  margin: 2px 0 0 !important;
  padding: 0 !important;
}

/* circulos da timeline interna */
#projetoStatusModal .implant-operational-timeline .implant-operational-node,
#projetoStatusModal .implant-operational-timeline [class*="node"] {
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
}

/* textos Backlog / Em andamento / Validacao / Concluido */
#projetoStatusModal .implant-operational-timeline span,
#projetoStatusModal .implant-operational-timeline small {
  font-size: 10px !important;
  line-height: 1.05 !important;
}

/* status pendente */
#projetoStatusModal .implant-timeline .badge {
  padding: 4px 9px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

/* icones laterais */
#projetoStatusModal .implant-timeline svg {
  max-width: 18px !important;
  max-height: 18px !important;
}

/* legenda inferior */
#projetoStatusModal .implant-legend {
  padding-top: 7px !important;
  margin-top: 5px !important;
  gap: 14px !important;
  font-size: 11px !important;
}

/* tira qualquer altura minima herdada */
#projetoStatusModal .implant-timeline,
#projetoStatusModal .implant-timeline > *,
#projetoStatusModal .implant-operational-timeline,
#projetoStatusModal .implant-operational-timeline > * {
  min-height: 0 !important;
}

/* composer menor */
#projetoStatusModal #statusProjetoComposer textarea {
  min-height: 54px !important;
  height: 54px !important;
}

#projetoStatusModal #statusProjetoComposer .mt-4 {
  margin-top: 6px !important;
}


/* =========================================================
   CRM MVP - CORES DE URGENCIA DOS CARDS
   ========================================================= */

.kanban-card[class*="crm-card-urgency-"] {
  position: relative;
  overflow: hidden;
}

.kanban-card[class*="crm-card-urgency-"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  border-radius: 12px 0 0 12px;
}

.kanban-card.crm-card-urgency-baixa {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.kanban-card.crm-card-urgency-baixa::before {
  background: #22c55e;
}

.kanban-card.crm-card-urgency-media {
  background: #fffbeb;
  border-color: #fde68a;
}

.kanban-card.crm-card-urgency-media::before {
  background: #eab308;
}

.kanban-card.crm-card-urgency-alta {
  background: #fff7ed;
  border-color: #fdba74;
}

.kanban-card.crm-card-urgency-alta::before {
  background: #f97316;
}

.kanban-card.crm-card-urgency-urgente {
  background: #fef2f2;
  border-color: #fca5a5;
}

.kanban-card.crm-card-urgency-urgente::before {
  background: #ef4444;
}

.kanban-card.crm-card-urgency-baixa .crm-card-avatar,
.kanban-card.crm-card-urgency-media .crm-card-avatar,
.kanban-card.crm-card-urgency-alta .crm-card-avatar,
.kanban-card.crm-card-urgency-urgente .crm-card-avatar {
  margin-left: 4px;
}


/* =========================================================
   CRM KANBAN - EXPANSAO MANUAL DAS ETAPAS
   Etapa vazia nao deve ser obrigada a permanecer recolhida.
   ========================================================= */

#page-crm #kanbanBoard.crm-commercial-board
  > .kanban-col.kanban-fase-vazia:not(.kanban-fase-recolhida),
#page-crm #kanbanBoard.crm-commercial-board
  > .kanban-column.kanban-fase-vazia:not(.kanban-fase-recolhida) {
  flex: 0 0 248px !important;
  width: 248px !important;
  min-width: 230px !important;
  max-width: 260px !important;
  padding: 12px !important;
  overflow: hidden;
}

#page-crm #kanbanBoard
  .kanban-fase-vazia:not(.kanban-fase-recolhida)
  .crm-stage-body {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#page-crm #kanbanBoard
  .kanban-fase-vazia:not(.kanban-fase-recolhida)
  .crm-stage-actions {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#page-crm #kanbanBoard
  .kanban-fase-vazia:not(.kanban-fase-recolhida)
  .crm-stage-title,
#page-crm #kanbanBoard
  .kanban-fase-vazia:not(.kanban-fase-recolhida)
  .crm-stage-meta {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#page-crm .crm-stage-header {
  cursor: pointer;
  user-select: none;
}

#page-crm .crm-stage-header:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

#page-crm .crm-stage-actions button {
  cursor: pointer;
}

#page-crm .crm-kanban-global-actions {
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  #page-crm .crm-kanban-global-toggle span {
    display: none;
  }

  #page-crm .crm-kanban-global-toggle {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* =========================================================
   CRM - PROXIMA ATIVIDADE NO CARD
   ========================================================= */

#page-crm .crm-card-activity{
  margin-top:8px;
  padding:7px 8px;
  border:1px solid #e2e8f0;
  border-radius:9px;
  background:#f8fafc;
  min-width:0;
}

#page-crm .crm-card-activity-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  min-width:0;
}

#page-crm .crm-card-activity-status{
  display:flex;
  align-items:center;
  gap:4px;
  flex:0 0 auto;
  font-size:10px;
  line-height:1;
  white-space:nowrap;
}

#page-crm .crm-card-activity-date{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  font-weight:700;
  color:#64748b;
}

#page-crm .crm-card-activity-text{
  margin-top:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  line-height:1.25;
  font-weight:600;
  color:#475569;
}

#page-crm .crm-card-activity-overdue{
  background:#fef2f2;
  border-color:#fecaca;
}

#page-crm .crm-card-activity-overdue
.crm-card-activity-status{
  color:#b91c1c;
}

#page-crm .crm-card-activity-today{
  background:#fffbeb;
  border-color:#fde68a;
}

#page-crm .crm-card-activity-today
.crm-card-activity-status{
  color:#b45309;
}

#page-crm .crm-card-activity-scheduled{
  background:#eff6ff;
  border-color:#bfdbfe;
}

#page-crm .crm-card-activity-scheduled
.crm-card-activity-status{
  color:#1d4ed8;
}

#page-crm .crm-card-activity-none{
  background:#f8fafc;
  border-color:#e2e8f0;
}

#page-crm .crm-card-activity-none
.crm-card-activity-status{
  color:#64748b;
}

/* =========================================================
   CRM DASHBOARD - KPIs COMPACTOS
========================================================= */

#crmDashboardKpis {
  gap: 12px !important;
}

#crmDashboardKpis .crm-dashboard-kpi-card {
  padding: 14px 16px !important;
  min-height: 0 !important;
}

#crmDashboardKpis .crm-dashboard-kpi-card > div {
  min-height: 72px !important;
}

#crmDashboardKpis .crm-dashboard-kpi-label {
  line-height: 1.2 !important;
}

#crmDashboardKpis .crm-dashboard-kpi-value {
  line-height: 1.15 !important;
}

#crmDashboardKpis .crm-dashboard-kpi-hint {
  max-width: 92% !important;
}

#crmDashboardKpis .crm-dashboard-kpi-icon {
  margin-top: 0 !important;
}

@media (min-width: 1200px) {
  #crmDashboardKpis {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1600px) {
  #crmDashboardKpis {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}


/* =========================================================
   CRM RESPONSIVO - TABLET / CELULAR
   ========================================================= */

/*
 * Tablet
 */
@media (max-width: 1024px) {

  #page-crm {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #page-crm #crmViewSwitcher {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  #page-crm .crm-kanban-global-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /*
   * Kanban horizontal.
   */
  #page-crm #kanbanBoard.crm-commercial-board {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 4px 4px 14px !important;

    scroll-snap-type: x proximity;
    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  #page-crm #kanbanBoard.crm-commercial-board
  > .kanban-col,
  #page-crm #kanbanBoard.crm-commercial-board
  > .kanban-column,
  #page-crm #kanbanBoard.crm-commercial-board
  > .crm-stage {

    flex: 0 0 360px !important;

    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;

    scroll-snap-align: start;
  }

  /*
   * Dashboard.
   */
  #page-crm .crm-dashboard-panels {
    grid-template-columns: 1fr !important;
  }

  #page-crm .crm-dashboard-kpis {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
  }

  #page-crm .crm-dashboard-chart-frame,
  #page-crm .crm-dashboard-chart-frame-line {
    min-height: 240px !important;
    height: 260px !important;
  }
}


/*
 * Celular
 */
@media (max-width: 640px) {

  /*
   * Área geral.
   */
  #page-crm {
    width: 100% !important;
    max-width: 100% !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    overflow-x: hidden !important;
  }

  /*
   * Cabeçalho / seletor Kanban-Dashboard.
   */
  #page-crm #crmViewSwitcher {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    gap: 6px !important;
  }

  #page-crm #crmViewSwitcher
  [data-crm-view] {
    width: 100% !important;
    justify-content: center !important;

    min-height: 42px !important;
    padding: 9px 10px !important;
  }

  /*
   * Ações globais.
   */
  #page-crm .crm-kanban-global-actions {
    width: 100% !important;

    display: grid !important;
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap: 7px !important;
  }

  #page-crm .crm-kanban-global-toggle {
    width: 100% !important;

    min-height: 40px !important;

    justify-content: center !important;

    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  #page-crm #crmNewOpportunityBtn {
    width: 100% !important;

    min-height: 44px !important;

    justify-content: center !important;

    margin-top: 4px !important;
  }

  /*
   * Kanban mobile.
   *
   * Uma etapa por vez, mas deixando um pequeno pedaço
   * da próxima visível para indicar que existe scroll.
   */
  #page-crm #crmKanbanView {
    width: 100% !important;
    max-width: 100% !important;

    overflow: hidden !important;
  }

  #page-crm #kanbanBoard.crm-commercial-board {
    display: flex !important;
    flex-wrap: nowrap !important;

    gap: 10px !important;

    width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding:
      4px
      10px
      16px !important;

    scroll-snap-type: x mandatory;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
  }

  #page-crm #kanbanBoard.crm-commercial-board
  > .kanban-col,
  #page-crm #kanbanBoard.crm-commercial-board
  > .kanban-column,
  #page-crm #kanbanBoard.crm-commercial-board
  > .crm-stage {

    flex:
      0 0
      calc(88vw - 8px)
      !important;

    width:
      calc(88vw - 8px)
      !important;

    min-width:
      calc(88vw - 8px)
      !important;

    max-width:
      calc(88vw - 8px)
      !important;

    scroll-snap-align: start;

    border-radius: 14px !important;

    padding: 10px !important;
  }

  /*
   * Fase recolhida:
   * continua compacta.
   */
  #page-crm #kanbanBoard.crm-commercial-board
  > .kanban-fase-recolhida {

    flex: 0 0 54px !important;

    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
  }

  /*
   * Cabeçalho da coluna.
   */
  #page-crm .crm-stage-header {
    min-height: 46px !important;
  }

  #page-crm .crm-stage-title-text {
    font-size: 13px !important;

    max-width: 100% !important;

    white-space: normal !important;

    line-height: 1.25 !important;
  }

  #page-crm .crm-stage-actions button,
  #page-crm .crm-kanban-toggle-fase {
    min-width: 34px !important;
    width: 34px !important;
    height: 34px !important;
  }

  /*
   * Corpo da etapa.
   */
  #page-crm .crm-stage-body {
    max-height:
      calc(
        100dvh - 270px
      ) !important;

    overflow-y: auto !important;

    overscroll-behavior: contain;

    padding-right: 2px !important;
  }

  /*
   * Cards.
   */
  #page-crm .kanban-card,
  #page-crm .crm-card {

    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #page-crm .crm-card-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  #page-crm .crm-card-subtitle,
  #page-crm .crm-card-compact-line,
  #page-crm .crm-card-activity-text {
    font-size: 12px !important;
  }

  /*
   * Touch targets.
   */
  #page-crm button,
  #page-crm select,
  #page-crm input,
  #page-crm textarea {

    touch-action: manipulation;
  }

  /*
   * Dashboard.
   */
  #page-crm #crmDashboardView {
    width: 100% !important;
    max-width: 100% !important;
  }

  #page-crm .crm-dashboard-kpis {
    grid-template-columns:
      1fr !important;

    gap: 9px !important;
  }

  #page-crm .crm-dashboard-kpi-card {
    padding: 12px 14px !important;
  }

  #page-crm .crm-dashboard-kpi-card > div {
    min-height: 60px !important;
  }

  #page-crm .crm-dashboard-kpi-value {
    font-size: 20px !important;
  }

  #page-crm .crm-dashboard-panels,
  #page-crm .crm-dashboard-panel,
  #page-crm .crm-dashboard-panel-wide {

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;
  }

  #page-crm .crm-dashboard-chart-frame,
  #page-crm .crm-dashboard-chart-frame-line {

    height: 230px !important;
    min-height: 230px !important;
  }

  #crmDashboardResponsibleList {
    overflow-x: auto !important;
  }

  /*
   * =======================================================
   * NOVA OPORTUNIDADE - FULLSCREEN MOBILE
   * =======================================================
   */

  #crmOpportunityModal {
    align-items: stretch !important;
    justify-content: stretch !important;

    padding: 0 !important;
  }

  #crmOpportunityModal > .modal-box,
  #crmOpportunityModal .modal-box {

    width: 100vw !important;
    max-width: 100vw !important;

    height: 100dvh !important;
    max-height: 100dvh !important;

    min-height: 100dvh !important;

    margin: 0 !important;

    border-radius: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
  }

  #crmOpportunityForm {
    flex: 1 1 auto !important;

    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;
  }

  #crmOpportunityFormBody {
    flex: 1 1 auto !important;

    min-height: 0 !important;

    overflow-y: auto !important;

    padding:
      16px
      14px
      110px
      !important;

    -webkit-overflow-scrolling: touch;
  }

  #crmOpportunityFormBody
  .grid {
    grid-template-columns:
      1fr !important;
  }

  #crmOpportunityFormBody input,
  #crmOpportunityFormBody select,
  #crmOpportunityFormBody textarea {

    min-height: 44px !important;

    font-size: 16px !important;
  }

  #crmOpportunityFormBody textarea {
    min-height: 100px !important;
  }

  /*
   * Rodapé do formulário.
   */
  #crmOpportunityModal
  button {

    min-height: 44px;
  }

  #crmOpportunitySubmitBtn {
    min-height: 46px !important;
  }

  /*
   * =======================================================
   * EDITAR LEAD - FULLSCREEN MOBILE
   * =======================================================
   */

  #crmLeadDetailModal {
    align-items: stretch !important;
    justify-content: stretch !important;

    padding: 0 !important;
  }

  #crmLeadDetailModal .modal-box,
  #crmLeadDetailModal .crm-lead-detail-modal {

    width: 100vw !important;
    max-width: 100vw !important;

    height: 100dvh !important;
    max-height: 100dvh !important;

    min-height: 100dvh !important;

    margin: 0 !important;

    border-radius: 0 !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }

  #crmLeadDetailModal
  .grid {

    grid-template-columns:
      1fr !important;
  }

  #crmLeadDetailModal
  input,
  #crmLeadDetailModal
  select,
  #crmLeadDetailModal
  textarea {

    min-height: 44px !important;
    font-size: 16px !important;
  }

  #crmLeadDetailModal
  textarea {

    min-height: 96px !important;
  }

  /*
   * =======================================================
   * PAINEL DA ETAPA / TIMELINE
   * =======================================================
   */

  #crmCardStagePanelModal {
    align-items: stretch !important;
    justify-content: stretch !important;

    padding: 0 !important;
  }

  #crmCardStagePanelModal
  .modal-box {

    width: 100vw !important;
    max-width: 100vw !important;

    height: 100dvh !important;
    max-height: 100dvh !important;

    margin: 0 !important;

    border-radius: 0 !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;
  }

  #crmCardStagePanelModal
  input,
  #crmCardStagePanelModal
  select,
  #crmCardStagePanelModal
  textarea,
  #crmCardStagePanelModal
  button {

    min-height: 42px;
  }

  #crmCardStagePanelModal
  .grid {

    grid-template-columns:
      1fr !important;
  }

  /*
   * Evita que menus de ação saiam da viewport.
   */
  #page-crm .crm-card-action-menu {
    max-width:
      calc(
        100vw - 28px
      ) !important;

    right: 0 !important;
    left: auto !important;
  }

}


/*
 * Celulares muito estreitos
 */
@media (max-width: 390px) {

  #page-crm #kanbanBoard.crm-commercial-board
  > .kanban-col,
  #page-crm #kanbanBoard.crm-commercial-board
  > .kanban-column,
  #page-crm #kanbanBoard.crm-commercial-board
  > .crm-stage {

    flex:
      0 0
      calc(92vw - 12px)
      !important;

    width:
      calc(92vw - 12px)
      !important;

    min-width:
      calc(92vw - 12px)
      !important;

    max-width:
      calc(92vw - 12px)
      !important;
  }

  #page-crm .crm-kanban-global-actions {
    grid-template-columns:
      1fr 1fr !important;
  }

  #page-crm .crm-kanban-global-toggle {
    font-size: 11px !important;
  }

}


/* =========================================================
   OPERA PWA / MOBILE SAFE AREA
   ========================================================= */

html {
  min-height: 100%;
  background: #f8fafc;
}

body {
  min-height: 100%;
  min-height: 100dvh;
}

@media (max-width: 760px) {

  /*
   * iPhone com notch / Dynamic Island.
   */
  body {
    padding-left:
      env(
        safe-area-inset-left,
        0px
      );

    padding-right:
      env(
        safe-area-inset-right,
        0px
      );
  }

  #mainArea,
  main.main-content {
    min-height:
      100dvh !important;
  }

  /*
   * Área inferior segura para telas
   * com indicador Home.
   */
  .modal-box,
  .modal-panel,
  .crm-body-modal-panel {
    padding-bottom:
      env(
        safe-area-inset-bottom,
        0px
      );
  }

  input,
  select,
  textarea {
    /*
     * Evita zoom automático do Safari
     * ao focar campos pequenos.
     */
    font-size:
      max(
        16px,
        1em
      );
  }

  button,
  a,
  input,
  select,
  textarea {
    touch-action:
      manipulation;
  }

}

@media (
  display-mode: standalone
) {

  body {
    overscroll-behavior-y:
      none;
  }

}

/* =========================================================
   OPERA MOBILE GLOBAL / PWA
   ========================================================= */

.opera-mobile-sidebar-backdrop{
  display:none;
}


/*
 * Tablet + celular
 */
@media (max-width:900px){

  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  #app.app-wrap{
    width:100% !important;
    max-width:100% !important;
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
  }

  /*
   * Área principal sempre ocupa toda a viewport.
   */
  #mainArea.main-area,
  body.sidebar-collapsed #mainArea.main-area{
    margin-left:0 !important;

    width:100% !important;
    max-width:100% !important;

    height:100dvh !important;
    min-height:100dvh !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  /*
   * Drawer.
   */
  #sidebar.sidebar,
  body.sidebar-collapsed #sidebar.sidebar{
    position:fixed !important;

    top:0 !important;
    bottom:0 !important;
    left:0 !important;

    z-index:1200 !important;

    width:min(
      82vw,
      320px
    ) !important;

    min-width:min(
      82vw,
      320px
    ) !important;

    max-width:min(
      82vw,
      320px
    ) !important;

    height:100dvh !important;
    max-height:100dvh !important;

    transform:
      translate3d(
        -105%,
        0,
        0
      ) !important;

    transition:
      transform .22s ease
      !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    padding-top:
      env(
        safe-area-inset-top,
        0px
      ) !important;

    padding-bottom:
      env(
        safe-area-inset-bottom,
        0px
      ) !important;

    box-shadow:
      0
      24px
      80px
      rgba(
        15,
        23,
        42,
        .32
      ) !important;

    -webkit-overflow-scrolling:
      touch;
  }

  body.sidebar-mobile-open
  #sidebar.sidebar{
    transform:
      translate3d(
        0,
        0,
        0
      ) !important;
  }

  /*
   * Overlay atrás do menu.
   */
  .opera-mobile-sidebar-backdrop{
    position:fixed;

    inset:0;

    z-index:1190;

    display:block;

    background:
      rgba(
        15,
        23,
        42,
        .46
      );

    backdrop-filter:
      blur(2px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
      opacity .2s ease,
      visibility .2s ease;
  }

  body.sidebar-mobile-open
  .opera-mobile-sidebar-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  /*
   * Menu touch friendly.
   */
  body.sidebar-mobile-open
  #sidebar .nav-item{
    min-height:46px !important;

    margin:
      2px
      10px !important;

    padding:
      11px
      14px !important;

    border-radius:
      11px !important;

    font-size:
      14px !important;
  }

  body.sidebar-mobile-open
  #sidebar .nav-group-toggle{
    min-height:
      46px !important;
  }

  /*
   * Topbar.
   */
  #mainArea > header{
    top:0 !important;

    min-height:
      64px !important;

    height:auto !important;

    padding-top:
      calc(
        8px +
        env(
          safe-area-inset-top,
          0px
        )
      ) !important;

    padding-right:
      12px !important;

    padding-bottom:
      8px !important;

    padding-left:
      12px !important;

    gap:
      8px !important;
  }

  #sidebarTopToggle{
    flex:
      0 0
      42px !important;

    width:
      42px !important;

    height:
      42px !important;

    min-width:
      42px !important;

    min-height:
      42px !important;
  }

  /*
   * Container principal.
   */
  #pagesContainer{
    width:100% !important;
    max-width:100% !important;

    padding:
      clamp(
        12px,
        3.5vw,
        18px
      ) !important;

    padding-bottom:
      calc(
        18px +
        env(
          safe-area-inset-bottom,
          0px
        )
      ) !important;

    overflow-x:
      hidden !important;
  }

  .page-content{
    width:100% !important;
    max-width:100% !important;

    min-width:0 !important;

    overflow-x:
      hidden !important;
  }

  /*
   * Remove efeito desktop de sidebar recolhida
   * no mobile.
   */
  body.sidebar-collapsed
  #sidebar .nav-item,
  body.sidebar-collapsed
  #sidebar .nav-group-toggle{
    width:auto !important;

    justify-content:
      flex-start !important;
  }

}


/*
 * Celular
 */
@media (max-width:640px){

  :root{
    --opera-page-padding:
      12px !important;
  }

  /*
   * Busca ocupa o espaço possível,
   * sem forçar largura desktop.
   */
  #mainArea > header
  > .flex:first-child{
    flex:
      1 1 auto !important;

    min-width:
      0 !important;
  }

  #mainArea > header
  #globalSearch{
    width:
      min(
        46vw,
        180px
      ) !important;

    min-width:
      0 !important;

    height:
      42px !important;

    font-size:
      16px !important;
  }

  /*
   * Área direita compacta.
   */
  #mainArea > header
  > .flex:last-child{
    flex:
      0 0 auto !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    overflow:
      visible !important;

    gap:
      6px !important;
  }

  /*
   * Empresa não pode ocupar 240px no celular.
   */
  #empresaContextoHeader{
    min-width:
      0 !important;

    max-width:
      130px !important;
  }

  #empresaContextoHeader
  select{
    width:
      100% !important;

    max-width:
      130px !important;

    min-height:
      42px !important;

    font-size:
      13px !important;
  }

  #notificationBellBtn,
  #mainArea > header
  > .flex:last-child
  > button{
    width:
      42px !important;

    min-width:
      42px !important;

    height:
      42px !important;

    min-height:
      42px !important;
  }

  /*
   * Painel de notificações dentro da viewport.
   */
  #notificationsPanel{
    position:
      fixed !important;

    top:
      calc(
        64px +
        env(
          safe-area-inset-top,
          0px
        )
      ) !important;

    right:
      10px !important;

    left:
      10px !important;

    width:
      auto !important;

    max-width:
      none !important;

    max-height:
      calc(
        100dvh -
        90px -
        env(
          safe-area-inset-top,
          0px
        ) -
        env(
          safe-area-inset-bottom,
          0px
        )
      ) !important;

    overflow-y:
      auto !important;
  }

  /*
   * Tela de login.
   */
  #loginScreen{
    padding:
      calc(
        12px +
        env(
          safe-area-inset-top,
          0px
        )
      )
      12px
      calc(
        12px +
        env(
          safe-area-inset-bottom,
          0px
        )
      ) !important;
  }

  #loginScreen
  > div:not(
    #operaLoginNetwork
  ){
    max-width:
      100% !important;
  }

}


/*
 * PWA instalada.
 */
@media (
  display-mode:standalone
){

  @media (max-width:900px){

    #mainArea > header{
      padding-top:
        calc(
          8px +
          env(
            safe-area-inset-top,
            0px
          )
        ) !important;
    }

  }

}

/* =========================================================
   OPERA MOBILE - APP SHELL
   ========================================================= */

.opera-mobile-bottom-nav{
  display:none;
}

@media(max-width:640px){

  :root{
    --opera-mobile-topbar-height:58px;
    --opera-mobile-bottom-nav-height:68px;
  }

  html,
  body{
    background:#f4f7fb !important;
  }

  /*
   * TOPBAR DE APP
   */
  #mainArea > header{
    position:sticky !important;

    top:0 !important;

    z-index:900 !important;

    width:100% !important;

    min-height:
      calc(
        var(--opera-mobile-topbar-height) +
        env(safe-area-inset-top,0px)
      ) !important;

    padding:
      calc(
        8px +
        env(safe-area-inset-top,0px)
      )
      14px
      8px
      14px
      !important;

    background:
      rgba(255,255,255,.96)
      !important;

    backdrop-filter:
      blur(16px)
      !important;

    box-shadow:
      0
      1px
      0
      rgba(15,23,42,.07)
      !important;
  }

  /*
   * Esconder elementos desktop.
   */
  #mainArea > header
  #globalSearch,
  #mainArea > header
  #globalSearch + *,
  #empresaContextoHeader,
  #mainArea > header
  > .flex:last-child
  > button:not(
    #notificationBellBtn
  ){
    display:none !important;
  }

  /*
   * Primeira área da topbar.
   */
  #mainArea > header
  > .flex:first-child{
    display:flex !important;

    flex:
      1 1 auto !important;

    width:auto !important;

    min-width:0 !important;

    gap:10px !important;
  }

  /*
   * Esconde wrapper da busca.
   */
  #mainArea > header
  > .flex:first-child
  > .relative{
    display:none !important;
  }

  /*
   * Marca OPERA no topo.
   */
  #mainArea > header
  > .flex:first-child::after{
    content:"OPERA";

    display:flex;

    align-items:center;

    height:42px;

    color:#0f172a;

    font-size:18px;

    line-height:1;

    font-weight:800;

    letter-spacing:-.02em;
  }

  #sidebarTopToggle{
    display:flex !important;

    width:42px !important;
    height:42px !important;

    min-width:42px !important;

    border:
      1px solid
      #e2e8f0
      !important;

    border-radius:
      13px !important;

    background:#fff !important;

    box-shadow:
      0
      1px
      2px
      rgba(15,23,42,.04)
      !important;
  }

  #mainArea > header
  > .flex:last-child{
    display:flex !important;

    flex:
      0 0 auto !important;

    align-items:center !important;

    overflow:visible !important;

    max-width:none !important;
  }

  #notificationBellBtn{
    display:flex !important;

    width:42px !important;
    height:42px !important;

    min-width:42px !important;

    border-radius:
      13px !important;
  }

  /*
   * CONTEÚDO
   */
  #pagesContainer{
    padding:
      16px
      14px
      calc(
        var(--opera-mobile-bottom-nav-height) +
        env(safe-area-inset-bottom,0px) +
        20px
      )
      !important;
  }

  .page-content{
    min-height:
      calc(
        100dvh -
        var(--opera-mobile-topbar-height) -
        var(--opera-mobile-bottom-nav-height)
      ) !important;
  }

  /*
   * BARRA INFERIOR
   */
  .opera-mobile-bottom-nav{
    position:fixed;

    z-index:1100;

    right:0;
    bottom:0;
    left:0;

    display:grid;

    grid-template-columns:
      repeat(
        5,
        minmax(0,1fr)
      );

    min-height:
      calc(
        var(--opera-mobile-bottom-nav-height) +
        env(safe-area-inset-bottom,0px)
      );

    padding:
      7px
      6px
      calc(
        6px +
        env(safe-area-inset-bottom,0px)
      );

    background:
      rgba(
        255,
        255,
        255,
        .97
      );

    backdrop-filter:
      blur(18px);

    border-top:
      1px solid
      #e2e8f0;

    box-shadow:
      0
      -6px
      24px
      rgba(
        15,
        23,
        42,
        .06
      );
  }

  .opera-mobile-bottom-nav
  button{
    appearance:none;

    border:0;

    background:
      transparent;

    color:
      #64748b;

    display:flex;

    flex-direction:
      column;

    align-items:center;

    justify-content:center;

    gap:3px;

    min-width:0;

    min-height:50px;

    padding:
      3px
      2px;

    border-radius:
      12px;

    font-family:
      inherit;

    font-size:
      10px;

    font-weight:
      700;

    line-height:1;
  }

  .opera-mobile-bottom-nav
  button svg,
  .opera-mobile-bottom-nav
  button i{
    width:21px !important;
    height:21px !important;
  }

  .opera-mobile-bottom-nav
  button.active{
    color:
      #15636f;
  }

  .opera-mobile-bottom-nav
  button.active::before{
    content:"";

    position:absolute;

    margin-top:
      -47px;

    width:22px;

    height:3px;

    border-radius:
      999px;

    background:
      #15636f;
  }

  /*
   * TÍTULOS MAIS PRÓXIMOS DE APP
   */
  .page-content h1{
    font-size:
      clamp(
        24px,
        7vw,
        30px
      ) !important;

    line-height:
      1.08 !important;

    letter-spacing:
      -.025em !important;
  }

  /*
   * Cards gerais.
   */
  .page-content
  .chart-box,
  .page-content
  .kpi-card{
    border-radius:
      18px !important;
  }

  /*
   * CRM:
   * no celular não usamos a aparência vertical
   * de fase recolhida como visual principal.
   */
  #page-crm
  #kanbanBoard.crm-commercial-board
  > .kanban-fase-recolhida{
    flex:
      0 0
      48px !important;

    width:
      48px !important;

    min-width:
      48px !important;

    max-width:
      48px !important;
  }

}


/*
 * Quando instalado como PWA,
 * elimina comportamentos de navegador.
 */
@media(
  display-mode:standalone
){

  @media(max-width:640px){

    html,
    body{
      overscroll-behavior:
        none;
    }

    #app.app-wrap{
      height:
        100dvh !important;
    }

  }

}

/* =========================================================
   MOBILE - REMOVER CABECALHOS GRANDES DOS MODULOS
   ========================================================= */

@media (max-width:640px){

  /*
   * CRM
   */
  #page-crm > .crm-page-header > div:first-child{
    display:none !important;
  }

  #page-crm > .crm-page-header{
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin:0 !important;
  }

  #page-crm .crm-page-actions{
    margin-top:0 !important;
  }

  /*
   * Clientes
   * Remove bloco de título/subtítulo,
   * mantendo as ações.
   */
  #page-clientes > .flex.items-center.justify-between.mb-6 > div:first-child{
    display:none !important;
  }

  #page-clientes > .flex.items-center.justify-between.mb-6{
    justify-content:flex-end !important;
    margin-bottom:12px !important;
  }

  /*
   * Inbox
   */
  #page-inbox .opera-inbox-page-header > div:first-child{
    display:none !important;
  }

  #page-inbox .opera-inbox-page-header{
    justify-content:flex-end !important;
    margin-bottom:8px !important;
  }

  /*
   * Dashboard principal
   */
  #page-dashboard > .flex.items-center.justify-between.mb-6 > div:first-child{
    display:none !important;
  }

  #page-dashboard > .flex.items-center.justify-between.mb-6{
    justify-content:flex-end !important;
    margin-bottom:12px !important;
  }

  /*
   * Projetos
   */
  #page-projetos > .flex.items-center.justify-between.mb-6 > div:first-child{
    display:none !important;
  }

  #page-projetos > .flex.items-center.justify-between.mb-6{
    justify-content:flex-end !important;
    margin-bottom:12px !important;
  }

  /*
   * Chamados
   */
  #page-chamados > .flex.items-center.justify-between.mb-6 > div:first-child{
    display:none !important;
  }

  #page-chamados > .flex.items-center.justify-between.mb-6{
    justify-content:flex-end !important;
    margin-bottom:12px !important;
  }

  /*
   * Menos espaço no topo das páginas.
   */
  #pagesContainer{
    padding-top:10px !important;
  }

}

/* =========================================================
   OPERA MOBILE INBOX
   Somente Chat Interno
   ========================================================= */

@media(max-width:640px){

  /*
   * O chat flutuante não é necessário no celular.
   * Inbox inferior já é o acesso ao chat.
   */
  .opera-floating-chat{
    display:none !important;
  }

  #page-inbox{
    height:
      calc(
        100dvh -
        var(--opera-mobile-topbar-height,58px) -
        var(--opera-mobile-bottom-nav-height,68px) -
        env(safe-area-inset-top,0px) -
        env(safe-area-inset-bottom,0px)
      ) !important;

    min-height:0 !important;

    overflow:hidden !important;

    background:#fff !important;
  }

  /*
   * Título + busca.
   */
  #page-inbox
  .opera-inbox-page-header{
    display:grid !important;

    grid-template-columns:
      1fr !important;

    gap:12px !important;

    width:100% !important;

    margin:0 !important;

    padding:
      8px
      4px
      12px !important;
  }

  #page-inbox
  .opera-inbox-page-header
  > div:first-child{
    display:block !important;
  }

  #page-inbox
  .opera-inbox-page-header h1{
    display:block !important;

    margin:0 !important;

    font-size:30px !important;

    line-height:1.1 !important;

    font-weight:800 !important;

    letter-spacing:-.035em !important;

    color:#0f172a !important;
  }

  #page-inbox
  .opera-inbox-page-header
  > .flex:last-child{
    display:block !important;

    width:100% !important;
  }

  #page-inbox
  #inboxSearch{
    display:block !important;

    width:100% !important;

    height:46px !important;

    padding-left:42px !important;

    border:0 !important;

    border-radius:15px !important;

    background-color:#f1f5f9 !important;

    font-size:16px !important;

    color:#0f172a !important;

    box-shadow:none !important;
  }

  #page-inbox
  .opera-inbox-page-header
  > .flex:last-child
  > button{
    display:none !important;
  }

  /*
   * Layout desktop deixa de existir.
   */
  #page-inbox
  .inbox-layout{
    display:block !important;

    width:100% !important;

    height:
      calc(
        100% -
        112px
      ) !important;

    min-height:0 !important;

    overflow:hidden !important;
  }

  /*
   * LISTA
   */
  #page-inbox
  #inboxLeftPanel{
    display:flex !important;

    width:100% !important;

    height:100% !important;

    min-height:0 !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    background:#fff !important;
  }

  /*
   * Não precisamos de Conversas / Projetos.
   * No celular é exclusivamente chat interno.
   */
  #page-inbox
  #inboxLeftPanel
  > .border-b:first-child{
    display:none !important;
  }

  #page-inbox
  #inboxProjetosPanel{
    display:none !important;
  }

  #page-inbox
  #inboxConversasPanel{
    display:block !important;

    height:100% !important;

    overflow-y:auto !important;

    background:#fff !important;

    -webkit-overflow-scrolling:
      touch;
  }

  /*
   * Remove Todos / Suporte / Interno etc.
   */
  #page-inbox
  #inboxConversasPanel
  > .flex.border-b{
    display:none !important;
  }

  #page-inbox
  #conversationList{
    width:100% !important;

    padding:0 !important;

    background:#fff !important;
  }

  /*
   * Cada conversa vira uma linha como WhatsApp.
   */
  #page-inbox
  #conversationList
  .conv-item{
    position:relative !important;

    width:100% !important;

    min-height:78px !important;

    margin:0 !important;

    padding:
      12px
      8px !important;

    border:0 !important;

    border-bottom:
      1px solid
      #eef2f7 !important;

    border-radius:0 !important;

    background:#fff !important;

    box-shadow:none !important;
  }

  #page-inbox
  #conversationList
  .conv-item:active{
    background:#f8fafc !important;
  }

  #page-inbox
  #conversationList
  .conv-avatar{
    width:52px !important;

    min-width:52px !important;

    height:52px !important;

    border-radius:999px !important;

    font-size:16px !important;
  }

  #page-inbox
  #conversationList
  .font-semibold{
    font-size:16px !important;

    line-height:1.2 !important;

    color:#111827 !important;
  }

  #page-inbox
  #conversationList
  .text-xs,
  #page-inbox
  #conversationList
  .text-sm{
    font-size:13px !important;

    line-height:1.3 !important;
  }

  /*
   * Centro/chat.
   */
  #page-inbox
  #operaMobileInboxCenterPanel{
    display:none !important;

    width:100% !important;

    height:100% !important;

    min-height:0 !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    background:#fff !important;
  }

  /*
   * Painel Cliente desaparece completamente.
   */
  #page-inbox
  #clientInfoPanel{
    display:none !important;
  }

  /*
   * Cabeçalho desktop do atendimento.
   */
  #page-inbox
  #operaMobileInboxCenterPanel
  > .px-5.py-4{
    display:none !important;
  }

  #page-inbox
  #operaMobileInboxCenterPanel
  > .border-t{
    display:none !important;
  }

  #page-inbox
  #inboxChatPanels{
    display:block !important;

    width:100% !important;

    height:100% !important;

    min-height:0 !important;

    padding:0 !important;

    margin:0 !important;

    overflow:hidden !important;
  }

  /*
   * Chat externo não existe na versão mobile.
   */
  #page-inbox
  #clientChatPanel{
    display:none !important;
  }

  /*
   * CHAT INTERNO
   */
  #page-inbox
  #internalChatPanel{
    display:flex !important;

    flex-direction:column !important;

    width:100% !important;

    max-width:100% !important;

    height:100% !important;

    min-height:0 !important;

    border:0 !important;

    border-radius:0 !important;

    background:#fff !important;

    overflow:hidden !important;
  }

  /*
   * Header do chat.
   */
  #page-inbox
  #internalChatPanel
  > .px-4.py-3{
    display:flex !important;

    min-height:58px !important;

    padding:
      8px
      10px !important;

    gap:8px !important;

    background:#fff !important;

    border-bottom:
      1px solid
      #e5e7eb !important;

    align-items:center !important;
  }

  #page-inbox
  .opera-mobile-inbox-back{
    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    flex:0 0 40px !important;

    width:40px !important;

    height:40px !important;

    border:0 !important;

    border-radius:999px !important;

    background:transparent !important;

    color:#334155 !important;
  }

  #page-inbox
  .opera-mobile-inbox-back
  svg{
    width:24px !important;
    height:24px !important;
  }

  #page-inbox
  #internalChatPanel
  .inbox-panel-title-wrap{
    flex:1 1 auto !important;

    min-width:0 !important;
  }

  #page-inbox
  #internalChatPanel
  .inbox-panel-title-wrap
  .font-semibold{
    font-size:16px !important;

    font-weight:700 !important;

    color:#111827 !important;
  }

  #page-inbox
  #internalChatHint{
    display:none !important;
  }

  /*
   * Badge "Interno" e recolher não precisam
   * aparecer no app.
   */
  #page-inbox
  #internalChatPanel
  > .px-4.py-3
  > .flex:last-child{
    display:none !important;
  }

  /*
   * Área de mensagens.
   */
  #page-inbox
  #internalChatBody{
    display:flex !important;

    flex-direction:column !important;

    flex:1 1 auto !important;

    min-height:0 !important;

    overflow:hidden !important;
  }

  #page-inbox
  #internalMessages{
    flex:1 1 auto !important;

    min-height:0 !important;

    overflow-y:auto !important;

    padding:
      16px
      12px
      18px !important;

    background:
      #f3f5f2 !important;

    -webkit-overflow-scrolling:
      touch;
  }

  /*
   * Mensagens mais próximas do WhatsApp.
   */
  #page-inbox
  #internalMessages
  .msg-group{
    max-width:86% !important;

    margin-bottom:7px !important;
  }

  #page-inbox
  #internalMessages
  [class*="rounded-"]{
    max-width:100% !important;
  }

  /*
   * Composer.
   */
  #page-inbox
  #internalChatBody
  > .p-3.border-t{
    display:flex !important;

    flex:0 0 auto !important;

    align-items:center !important;

    width:100% !important;

    min-height:62px !important;

    padding:
      8px
      10px !important;

    gap:7px !important;

    border-top:
      1px solid
      #e5e7eb !important;

    background:#fff !important;
  }

  #page-inbox
  #internalMessageInput{
    flex:1 1 auto !important;

    width:auto !important;

    min-width:0 !important;

    height:44px !important;

    padding:
      0
      15px !important;

    border:
      1px solid
      #e2e8f0 !important;

    border-radius:
      999px !important;

    background:
      #f8fafc !important;

    font-size:
      16px !important;
  }

  #page-inbox
  #internalChatBody
  > .p-3.border-t
  button{
    flex:
      0 0
      44px !important;

    width:
      44px !important;

    height:
      44px !important;

    min-width:
      44px !important;

    border-radius:
      999px !important;
  }

  #page-inbox
  #internalChatBody
  > .p-3.border-t
  button:last-child{
    background:
      #15636f !important;

    color:#fff !important;

    border-color:
      #15636f !important;
  }

  /*
   * ESTADOS
   */
  body.opera-mobile-inbox-list-open
  #page-inbox
  #inboxLeftPanel{
    display:flex !important;
  }

  body.opera-mobile-inbox-list-open
  #page-inbox
  #operaMobileInboxCenterPanel{
    display:none !important;
  }

  /*
   * No chat escondemos título/busca e lista,
   * liberando a altura inteira.
   */
  body.opera-mobile-inbox-chat-open
  #page-inbox
  .opera-inbox-page-header{
    display:none !important;
  }

  body.opera-mobile-inbox-chat-open
  #page-inbox
  .inbox-layout{
    height:100% !important;
  }

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #inboxLeftPanel{
    display:none !important;
  }

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #operaMobileInboxCenterPanel{
    display:flex !important;

    flex-direction:column !important;
  }

}

/* =========================================================
   OPERA MOBILE INBOX - @ PESSOAS
   ========================================================= */

@media(max-width:640px){

  #page-inbox
  .opera-inbox-page-header{
    position:relative !important;
  }

  #operaMobilePeopleButton{
    position:absolute !important;

    top:4px !important;
    right:4px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:44px !important;
    height:44px !important;

    border:0 !important;

    border-radius:999px !important;

    background:#15636f !important;

    color:#fff !important;

    font-size:24px !important;
    font-weight:700 !important;

    box-shadow:
      0 8px 20px
      rgba(21,99,111,.20)
      !important;

    z-index:10 !important;
  }

  #page-inbox
  .opera-inbox-page-header h1{
    padding-right:58px !important;
  }

  .opera-mobile-people-modal{
    position:fixed;

    inset:0;

    z-index:5000;

    display:none;

    background:#fff;
  }

  .opera-mobile-people-modal.is-open{
    display:block;
  }

  .opera-mobile-people-sheet{
    display:flex;

    flex-direction:column;

    width:100%;

    height:100dvh;

    padding-top:
      env(
        safe-area-inset-top,
        0px
      );

    padding-bottom:
      env(
        safe-area-inset-bottom,
        0px
      );

    background:#fff;
  }

  .opera-mobile-people-header{
    display:flex;

    align-items:center;

    gap:10px;

    min-height:64px;

    padding:
      10px
      14px;

    border-bottom:
      1px solid
      #e5e7eb;
  }

  .opera-mobile-people-header
  > div{
    min-width:0;
  }

  .opera-mobile-people-header
  strong{
    display:block;

    font-size:20px;

    line-height:1.15;

    color:#111827;
  }

  .opera-mobile-people-header
  span{
    display:block;

    margin-top:2px;

    font-size:12px;

    color:#64748b;
  }

  .opera-mobile-people-close{
    display:flex;

    align-items:center;
    justify-content:center;

    flex:0 0 42px;

    width:42px;
    height:42px;

    border:0;

    border-radius:999px;

    background:transparent;

    color:#334155;
  }

  .opera-mobile-people-close
  svg{
    width:24px;
    height:24px;
  }

  .opera-mobile-people-search{
    position:relative;

    padding:
      10px
      14px;
  }

  .opera-mobile-people-search
  > svg{
    position:absolute;

    left:28px;
    top:50%;

    width:18px;
    height:18px;

    color:#94a3b8;

    transform:
      translateY(-50%);

    pointer-events:none;
  }

  #operaMobilePeopleSearch{
    width:100%;

    height:46px;

    padding:
      0
      14px
      0
      42px;

    border:0;

    border-radius:15px;

    outline:none;

    background:#f1f5f9;

    color:#0f172a;

    font-size:16px;
  }

  .opera-mobile-people-list{
    flex:1 1 auto;

    min-height:0;

    overflow-y:auto;

    padding:
      0
      14px
      20px;

    -webkit-overflow-scrolling:
      touch;
  }

  .opera-mobile-person-row{
    display:flex;

    align-items:center;

    gap:12px;

    width:100%;

    min-height:72px;

    padding:
      10px
      4px;

    border:0;

    border-bottom:
      1px solid
      #eef2f7;

    background:#fff;

    text-align:left;
  }

  .opera-mobile-person-row:active{
    background:#f8fafc;
  }

  .opera-mobile-person-avatar{
    display:flex;

    align-items:center;
    justify-content:center;

    flex:0 0 50px;

    width:50px;
    height:50px;

    border-radius:999px;

    background:#e7f4f5;

    color:#15636f;

    font-size:15px;
    font-weight:800;
  }

  .opera-mobile-person-copy{
    flex:1 1 auto;

    min-width:0;
  }

  .opera-mobile-person-copy
  strong{
    display:block;

    overflow:hidden;

    font-size:16px;

    color:#111827;

    white-space:nowrap;

    text-overflow:ellipsis;
  }

  .opera-mobile-person-copy
  small{
    display:block;

    margin-top:3px;

    overflow:hidden;

    color:#64748b;

    font-size:12px;

    white-space:nowrap;

    text-overflow:ellipsis;
  }

  .opera-mobile-person-arrow{
    flex:0 0 auto;

    color:#cbd5e1;
  }

  .opera-mobile-person-arrow
  svg{
    width:20px;
    height:20px;
  }

  .opera-mobile-people-empty{
    padding:
      40px
      20px;

    color:#64748b;

    font-size:14px;

    text-align:center;
  }

  .opera-mobile-people-empty.is-error{
    color:#dc2626;
  }

  body.opera-mobile-people-open{
    overflow:hidden !important;
  }

}

/* =========================================================
   OPERA MOBILE INBOX V2
   Lista e conversa estilo aplicativo
   ========================================================= */

@media(max-width:640px){

  /*
   * Página Inbox realmente usa toda a largura.
   */
  #page-inbox{
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    padding:0 !important;

    background:#fff !important;

    overflow:hidden !important;
  }

  /*
   * Remove qualquer resíduo das 3 colunas desktop.
   */
  #page-inbox .inbox-layout{
    width:100% !important;
    max-width:100% !important;

    grid-template-columns:
      1fr !important;

    gap:0 !important;

    margin:0 !important;

    padding:0 !important;

    border:0 !important;
  }

  #page-inbox #clientInfoPanel{
    display:none !important;
  }

  #page-inbox #clientChatPanel{
    display:none !important;
  }

  /*
   * =======================================================
   * TELA: CONVERSAS
   * =======================================================
   */

  body.opera-mobile-inbox-list-open
  #page-inbox
  .opera-inbox-page-header{
    display:grid !important;

    grid-template-columns:
      1fr
      auto !important;

    align-items:center !important;

    gap:10px !important;

    padding:
      8px
      2px
      12px !important;

    background:#fff !important;
  }

  body.opera-mobile-inbox-list-open
  #page-inbox
  .opera-inbox-page-header
  > div:first-child{
    display:block !important;
  }

  body.opera-mobile-inbox-list-open
  #page-inbox
  .opera-inbox-page-header h1{
    display:block !important;

    padding:0 !important;
    margin:0 !important;

    font-size:30px !important;

    line-height:1 !important;

    font-weight:800 !important;

    color:#0f172a !important;
  }

  /*
   * Busca fica na linha de baixo.
   */
  body.opera-mobile-inbox-list-open
  #page-inbox
  .opera-inbox-page-header
  > .flex{
    grid-column:
      1 / -1 !important;

    width:100% !important;

    display:block !important;

    margin:0 !important;
  }

  #page-inbox #inboxSearch{
    width:100% !important;

    height:46px !important;

    border:0 !important;

    border-radius:14px !important;

    background-color:
      #f1f5f9 !important;

    font-size:16px !important;
  }

  /*
   * @ fica no topo ao lado de Conversas.
   */
  #operaMobilePeopleButton{
    position:static !important;

    grid-column:2 !important;
    grid-row:1 !important;

    width:44px !important;
    height:44px !important;

    min-width:44px !important;

    margin:0 !important;

    border-radius:999px !important;

    font-size:25px !important;
  }

  /*
   * Painel esquerdo deixa de parecer card.
   */
  #page-inbox
  #inboxLeftPanel{
    width:100% !important;

    max-width:100% !important;

    height:100% !important;

    margin:0 !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    background:#fff !important;
  }

  #page-inbox
  #inboxLeftBody{
    width:100% !important;
  }

  #page-inbox
  #inboxConversasPanel{
    width:100% !important;

    padding:0 !important;

    background:#fff !important;
  }

  /*
   * Conversas/Projetos e Todos/Suporte/Interno
   * são elementos desktop e somem no mobile.
   */
  #page-inbox
  #inboxLeftPanel
  > div:first-child,

  #page-inbox
  #inboxConversasPanel
  > .flex:first-child{
    display:none !important;
  }

  #page-inbox
  #conversationList{
    width:100% !important;

    margin:0 !important;

    padding:0 !important;

    overflow-x:hidden !important;

    background:#fff !important;
  }

  /*
   * Normaliza qualquer tipo de linha que
   * o renderer oficial gerar.
   */
  #page-inbox
  #conversationList
  > *{
    width:100% !important;

    max-width:100% !important;

    margin:0 !important;

    box-sizing:border-box !important;
  }

  #page-inbox
  #conversationList button,
  #page-inbox
  #conversationList .conv-item,
  #page-inbox
  #conversationList [data-conversation-id],
  #page-inbox
  #conversationList [data-internal-conversation-id]{

    width:100% !important;

    min-height:74px !important;

    margin:0 !important;

    padding:
      11px
      8px !important;

    border:0 !important;

    border-bottom:
      1px solid
      #edf0f4 !important;

    border-radius:0 !important;

    background:#fff !important;

    box-shadow:none !important;
  }

  /*
   * Avatar.
   */
  #page-inbox
  #conversationList
  [class*="avatar"]{
    flex:
      0 0
      52px !important;

    width:52px !important;
    height:52px !important;

    min-width:52px !important;

    border-radius:
      999px !important;
  }

  /*
   * Nome.
   */
  #page-inbox
  #conversationList
  .font-semibold,
  #page-inbox
  #conversationList
  strong{
    font-size:
      16px !important;

    line-height:
      1.2 !important;

    color:
      #111827 !important;
  }

  /*
   * Preview.
   */
  #page-inbox
  #conversationList
  .text-xs,
  #page-inbox
  #conversationList
  .text-sm,
  #page-inbox
  #conversationList
  small{
    font-size:
      13px !important;

    color:
      #64748b !important;
  }

  /*
   * =======================================================
   * TELA: CHAT
   * =======================================================
   */

  body.opera-mobile-inbox-chat-open
  #page-inbox{
    height:
      calc(
        100dvh -
        var(
          --opera-mobile-topbar-height,
          58px
        ) -
        var(
          --opera-mobile-bottom-nav-height,
          68px
        ) -
        env(
          safe-area-inset-bottom,
          0px
        )
      ) !important;
  }

  body.opera-mobile-inbox-chat-open
  #page-inbox
  .opera-inbox-page-header{
    display:none !important;
  }

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #inboxLeftPanel{
    display:none !important;
  }

  body.opera-mobile-inbox-chat-open
  #page-inbox
  #operaMobileInboxCenterPanel{
    display:flex !important;

    flex-direction:column !important;

    width:100% !important;
    max-width:100% !important;

    height:100% !important;

    margin:0 !important;

    padding:0 !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    background:#fff !important;
  }

  #page-inbox
  #inboxChatPanels{
    display:block !important;

    flex:1 1 auto !important;

    width:100% !important;

    height:100% !important;

    min-height:0 !important;

    padding:0 !important;

    margin:0 !important;
  }

  #page-inbox
  #internalChatPanel{
    display:flex !important;

    flex-direction:
      column !important;

    width:100% !important;

    height:100% !important;

    border:0 !important;

    border-radius:0 !important;

    background:#fff !important;
  }

  /*
   * Cabeçalho do chat.
   */
  #page-inbox
  #internalChatPanel
  > div:first-child{
    position:sticky !important;

    top:0 !important;

    z-index:40 !important;

    display:flex !important;

    align-items:center !important;

    min-height:60px !important;

    padding:
      8px
      10px !important;

    gap:6px !important;

    background:
      rgba(
        255,
        255,
        255,
        .97
      ) !important;

    border-bottom:
      1px solid
      #e5e7eb !important;

    backdrop-filter:
      blur(12px);
  }

  /*
   * Botão visível:
   * ‹ Conversas
   */
  #operaMobileInboxBackV2{
    display:inline-flex !important;

    align-items:center !important;

    justify-content:flex-start !important;

    gap:1px !important;

    flex:
      0 0 auto !important;

    width:auto !important;

    height:42px !important;

    min-width:auto !important;

    padding:
      0
      6px
      0
      0 !important;

    border:0 !important;

    background:
      transparent !important;

    color:
      #15636f !important;

    font-size:
      14px !important;

    font-weight:
      700 !important;
  }

  #operaMobileInboxBackV2
  svg{
    width:25px !important;
    height:25px !important;
  }

  /*
   * Título do chat usa o restante.
   */
  #page-inbox
  #internalChatPanel
  .inbox-panel-title-wrap{
    flex:
      1 1 auto !important;

    min-width:
      0 !important;
  }

  #page-inbox
  #internalChatPanel
  .inbox-panel-title-wrap
  .font-semibold{
    overflow:hidden !important;

    white-space:nowrap !important;

    text-overflow:ellipsis !important;

    font-size:
      16px !important;

    font-weight:
      700 !important;
  }

  #page-inbox
  #internalChatHint{
    display:none !important;
  }

  /*
   * Esconde badge Interno e botão recolher.
   */
  #page-inbox
  #internalChatPanel
  > div:first-child
  > .flex:last-child{
    display:none !important;
  }

  /*
   * Mensagens.
   */
  #page-inbox
  #internalMessages{
    flex:
      1 1 auto !important;

    min-height:
      0 !important;

    width:
      100% !important;

    padding:
      14px
      10px
      20px !important;

    overflow-y:
      auto !important;

    background:
      #f3f5f2 !important;

    -webkit-overflow-scrolling:
      touch;
  }

  /*
   * Campo de mensagem fica acima
   * da barra inferior.
   */
  #page-inbox
  #internalChatBody
  > .p-3.border-t{
    position:sticky !important;

    bottom:0 !important;

    z-index:45 !important;

    display:flex !important;

    width:100% !important;

    min-height:
      60px !important;

    padding:
      7px
      9px !important;

    gap:
      7px !important;

    background:
      rgba(
        255,
        255,
        255,
        .98
      ) !important;

    border-top:
      1px solid
      #e5e7eb !important;
  }

  #page-inbox
  #internalMessageInput{
    flex:
      1 1 auto !important;

    min-width:
      0 !important;

    height:
      44px !important;

    border-radius:
      999px !important;

    font-size:
      16px !important;
  }

}

/* =========================================================
   MOBILE INBOX FINAL
   ========================================================= */

@media(max-width:640px){

  /*
   * LISTA
   */
  .opera-mobile-conversation-list{
    width:100%;
    margin:0;
    padding:0;
    background:#fff;
  }

  .opera-mobile-conversation-row{
    appearance:none;

    display:flex;

    align-items:center;

    gap:12px;

    width:100%;

    min-height:76px;

    margin:0;

    padding:
      10px
      2px;

    border:0;

    border-bottom:
      1px solid
      #edf1f5;

    border-radius:0;

    background:#fff;

    color:inherit;

    text-align:left;

    font:inherit;
  }

  .opera-mobile-conversation-row:active,
  .opera-mobile-conversation-row.is-active{
    background:#f8fafc;
  }

  /*
   * Balão/avatar.
   */
  .opera-mobile-conversation-avatar{
    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;

    flex:
      0 0
      52px;

    width:52px;
    height:52px;

    border-radius:999px;

    background:
      linear-gradient(
        135deg,
        #dff1f2,
        #edf7f7
      );

    color:#15636f;

    font-size:16px;
    font-weight:800;

    letter-spacing:-.02em;
  }

  .opera-mobile-conversation-online{
    position:absolute;

    right:1px;
    bottom:1px;

    width:12px;
    height:12px;

    border:
      2px solid
      #fff;

    border-radius:999px;

    background:#22c55e;
  }

  .opera-mobile-conversation-online.is-unread{
    background:#f59e0b;
  }

  .opera-mobile-conversation-content{
    display:block;

    flex:
      1 1 auto;

    min-width:0;
  }

  .opera-mobile-conversation-top,
  .opera-mobile-conversation-bottom{
    display:flex;

    align-items:center;

    gap:8px;

    width:100%;

    min-width:0;
  }

  .opera-mobile-conversation-top
  strong{
    flex:
      1 1 auto;

    min-width:0;

    overflow:hidden;

    color:#111827;

    font-size:16px;
    font-weight:700;

    line-height:1.3;

    white-space:nowrap;

    text-overflow:ellipsis;
  }

  .opera-mobile-conversation-top
  time{
    flex:
      0 0 auto;

    color:#64748b;

    font-size:11px;
    font-weight:600;
  }

  .opera-mobile-conversation-bottom{
    margin-top:4px;
  }

  .opera-mobile-conversation-preview{
    flex:
      1 1 auto;

    min-width:0;

    overflow:hidden;

    color:#64748b;

    font-size:13px;

    line-height:1.3;

    white-space:nowrap;

    text-overflow:ellipsis;
  }

  .opera-mobile-conversation-unread{
    display:flex;

    align-items:center;
    justify-content:center;

    flex:
      0 0 auto;

    min-width:20px;
    height:20px;

    padding:
      0
      6px;

    border-radius:999px;

    background:#15636f;

    color:#fff;

    font-size:10px;
    font-weight:800;
  }

  .opera-mobile-conversation-state{
    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    min-height:220px;

    padding:30px;

    color:#64748b;

    text-align:center;
  }

  .opera-mobile-conversation-state
  strong{
    color:#334155;

    font-size:16px;
  }

  .opera-mobile-conversation-state
  span{
    margin-top:5px;

    font-size:13px;
  }

  /*
   * VOLTAR
   */
  #operaMobileInboxBackV2{
    flex:
      0 0 auto !important;

    display:flex !important;

    align-items:center !important;

    gap:0 !important;

    min-width:auto !important;

    height:44px !important;

    padding:
      0
      5px
      0
      0 !important;

    border:0 !important;

    background:
      transparent !important;

    color:#15636f !important;

    font-size:13px !important;
    font-weight:800 !important;
  }

  #operaMobileInboxBackV2::before{
    content:"";

    position:absolute;

    inset:
      7px auto
      7px 4px;

    width:92px;

    border-radius:12px;

    background:#edf7f7;

    z-index:-1;
  }

  #operaMobileInboxBackV2
  svg{
    width:24px !important;
    height:24px !important;
  }

  /*
   * Pessoa no cabeçalho.
   */
  .opera-mobile-conversation-identity{
    display:flex;

    align-items:center;

    gap:8px;

    flex:
      1 1 auto;

    min-width:0;
  }

  .opera-mobile-chat-avatar{
    display:flex;

    align-items:center;
    justify-content:center;

    flex:
      0 0
      38px;

    width:38px;
    height:38px;

    border-radius:999px;

    background:#dff1f2;

    color:#15636f;

    font-size:12px;
    font-weight:800;
  }

  .opera-mobile-chat-person{
    display:block;

    min-width:0;
  }

  .opera-mobile-chat-person
  strong{
    display:block;

    overflow:hidden;

    color:#111827;

    font-size:15px;
    font-weight:800;

    line-height:1.2;

    white-space:nowrap;

    text-overflow:ellipsis;
  }

  .opera-mobile-chat-person
  small{
    display:block;

    margin-top:2px;

    color:#22a06b;

    font-size:10px;
    font-weight:600;
  }

}

/* =========================================================
   OPERA MOBILE INBOX STABLE
   ========================================================= */

@media(max-width:640px){

  /*
   * ======================================================
   * LISTA
   * ======================================================
   */

  body.opera-mobile-inbox-list-open
  #page-inbox
  .opera-inbox-page-header{
    display:grid !important;

    grid-template-columns:
      1fr auto !important;

    width:100% !important;

    padding:
      12px 4px
      10px !important;

    gap:10px !important;
  }

  body.opera-mobile-inbox-list-open
  #page-inbox
  .opera-inbox-page-header
  > div:first-child{
    display:block !important;
  }

  body.opera-mobile-inbox-list-open
  #page-inbox
  .opera-inbox-page-header
  h1{
    display:block !important;

    margin:0 !important;
    padding:0 !important;

    font-size:29px !important;
    line-height:44px !important;

    font-weight:800 !important;

    color:#0f172a !important;
  }

  #operaMobilePeopleButton{
    position:static !important;

    grid-column:2 !important;
    grid-row:1 !important;

    width:46px !important;
    height:46px !important;

    min-width:46px !important;

    margin:0 !important;
  }

  body.opera-mobile-inbox-list-open
  #page-inbox
  .opera-inbox-page-header
  > .flex{
    display:block !important;

    grid-column:
      1 / -1 !important;

    width:100% !important;
  }

  #page-inbox
  #inboxSearch{
    display:block !important;

    width:100% !important;
    height:46px !important;

    border:0 !important;

    border-radius:16px !important;

    background-color:
      #f1f5f9 !important;

    font-size:16px !important;
  }

  #page-inbox
  .opera-inbox-page-header
  > .flex
  > button{
    display:none !important;
  }

  /*
   * Desktop esquerdo fica escondido.
   */
  body.opera-mobile-inbox-list-open
  #inboxLeftPanel{
    display:block !important;

    width:100% !important;

    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    background:#fff !important;

    overflow-y:auto !important;
  }

  body.opera-mobile-inbox-list-open
  #inboxLeftPanel
  > *:not(
    #operaMobileInternalList
  ){
    display:none !important;
  }

  #operaMobileInternalList{
    display:block;

    width:100%;

    min-height:100%;

    background:#fff;
  }

  .opera-mobile-chat-row{
    appearance:none;

    display:flex;

    align-items:center;

    gap:12px;

    width:100%;

    min-height:78px;

    margin:0;

    padding:
      11px
      6px;

    border:0;

    border-bottom:
      1px solid
      #edf1f5;

    border-radius:0;

    background:#fff;

    color:inherit;

    font:inherit;

    text-align:left;
  }

  .opera-mobile-chat-row:active{
    background:#f8fafc;
  }

  .opera-mobile-chat-row-avatar{
    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;

    flex:
      0 0
      54px;

    width:54px;
    height:54px;

    border-radius:999px;

    background:
      linear-gradient(
        135deg,
        #dff1f2,
        #edf7f7
      );

    color:#15636f;

    font-size:16px;
    font-weight:800;
  }

  .opera-mobile-chat-row-avatar
  i{
    position:absolute;

    right:1px;
    bottom:1px;

    width:12px;
    height:12px;

    border:
      2px solid #fff;

    border-radius:999px;

    background:#22c55e;
  }

  .opera-mobile-chat-row-body{
    display:block;

    flex:
      1 1 auto;

    min-width:0;
  }

  .opera-mobile-chat-row-top,
  .opera-mobile-chat-row-bottom{
    display:flex;

    align-items:center;

    width:100%;

    min-width:0;

    gap:8px;
  }

  .opera-mobile-chat-row-top
  strong{
    flex:
      1 1 auto;

    min-width:0;

    overflow:hidden;

    color:#111827;

    font-size:16px;
    font-weight:750;

    line-height:1.25;

    white-space:nowrap;

    text-overflow:ellipsis;
  }

  .opera-mobile-chat-row-top
  time{
    flex:
      0 0 auto;

    color:#64748b;

    font-size:11px;
  }

  .opera-mobile-chat-row-bottom{
    margin-top:5px;
  }

  .opera-mobile-chat-row-bottom
  > span{
    flex:
      1 1 auto;

    min-width:0;

    overflow:hidden;

    color:#64748b;

    font-size:13px;

    white-space:nowrap;

    text-overflow:ellipsis;
  }

  .opera-mobile-chat-row-bottom
  b{
    display:flex;

    align-items:center;
    justify-content:center;

    min-width:20px;
    height:20px;

    padding:
      0 6px;

    border-radius:999px;

    background:#15636f;

    color:#fff;

    font-size:10px;
  }

  .opera-mobile-inbox-empty{
    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    min-height:260px;

    padding:30px;

    color:#64748b;

    text-align:center;
  }

  .opera-mobile-inbox-empty
  strong{
    color:#334155;

    font-size:17px;
  }

  .opera-mobile-inbox-empty
  span{
    margin-top:6px;

    font-size:13px;
  }

  /*
   * ======================================================
   * CHAT
   * ======================================================
   */

  body.opera-mobile-inbox-chat-open
  #page-inbox
  .opera-inbox-page-header,

  body.opera-mobile-inbox-chat-open
  #inboxLeftPanel,

  body.opera-mobile-inbox-chat-open
  #clientInfoPanel{
    display:none !important;
  }

  body.opera-mobile-inbox-chat-open
  #page-inbox
  .inbox-layout{
    display:block !important;

    height:100% !important;

    padding:0 !important;

    margin:0 !important;
  }

  body.opera-mobile-inbox-chat-open
  #operaMobileInboxCenterPanel{
    display:flex !important;

    flex-direction:column !important;

    width:100% !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    background:#fff !important;
  }

  /*
   * Cabeçalho desktop desaparece.
   */
  body.opera-mobile-inbox-chat-open
  #operaMobileInboxCenterPanel
  > .px-5.py-4{
    display:none !important;
  }

  /*
   * Cabeçalho mobile único.
   */
  #operaMobileStableChatHeader{
    display:none;
  }

  body.opera-mobile-inbox-chat-open
  #operaMobileStableChatHeader{
    display:flex;

    align-items:center;

    flex:
      0 0
      62px;

    width:100%;

    min-height:62px;

    padding:
      8px
      8px;

    gap:7px;

    border-bottom:
      1px solid
      #e5e7eb;

    background:#fff;

    z-index:50;
  }

  .opera-mobile-inbox-back-button{
    appearance:none;

    display:flex;

    align-items:center;

    gap:0;

    flex:
      0 0 auto;

    height:42px;

    padding:
      0 7px 0 0;

    border:0;

    border-radius:12px;

    background:#edf7f7;

    color:#15636f;

    font-size:12px;
    font-weight:800;
  }

  .opera-mobile-inbox-back-button
  svg{
    width:23px;
    height:23px;
  }

  .opera-mobile-chat-header-avatar{
    display:flex;

    align-items:center;
    justify-content:center;

    flex:
      0 0
      40px;

    width:40px;
    height:40px;

    border-radius:999px;

    background:#dff1f2;

    color:#15636f;

    font-size:12px;
    font-weight:800;
  }

  .opera-mobile-chat-header-copy{
    display:block;

    flex:
      1 1 auto;

    min-width:0;
  }

  .opera-mobile-chat-header-copy
  strong{
    display:block;

    overflow:hidden;

    color:#111827;

    font-size:15px;
    font-weight:800;

    white-space:nowrap;

    text-overflow:ellipsis;
  }

  .opera-mobile-chat-header-copy
  small{
    display:block;

    margin-top:2px;

    color:#22a06b;

    font-size:10px;
    font-weight:600;
  }

  /*
   * Esconde o cabeçalho interno antigo.
   */
  body.opera-mobile-inbox-chat-open
  #internalChatPanel
  > div:first-child{
    display:none !important;
  }

  body.opera-mobile-inbox-chat-open
  #inboxChatPanels{
    display:block !important;

    flex:
      1 1 auto !important;

    width:100% !important;

    height:auto !important;

    min-height:0 !important;

    padding:0 !important;

    margin:0 !important;
  }

  body.opera-mobile-inbox-chat-open
  #clientChatPanel{
    display:none !important;
  }

  body.opera-mobile-inbox-chat-open
  #internalChatPanel{
    display:flex !important;

    flex-direction:column !important;

    width:100% !important;

    height:100% !important;

    border:0 !important;

    border-radius:0 !important;

    overflow:hidden !important;

    background:#fff !important;
  }

  body.opera-mobile-inbox-chat-open
  #internalChatBody{
    display:flex !important;

    flex-direction:column !important;

    flex:
      1 1 auto !important;

    min-height:0 !important;
  }

  body.opera-mobile-inbox-chat-open
  #internalMessages{
    flex:
      1 1 auto !important;

    min-height:0 !important;

    overflow-y:auto !important;

    padding:
      12px
      12px
      18px !important;

    background:#f4f6f3 !important;
  }

  /*
   * Composer.
   */
  body.opera-mobile-inbox-chat-open
  #internalChatBody
  > .p-3.border-t{
    display:flex !important;

    flex:
      0 0 auto !important;

    align-items:center !important;

    gap:6px !important;

    width:100% !important;

    min-height:62px !important;

    padding:
      7px
      8px !important;

    background:#fff !important;

    border-top:
      1px solid
      #e5e7eb !important;
  }

  body.opera-mobile-inbox-chat-open
  #internalMessageInput{
    flex:
      1 1 auto !important;

    width:auto !important;

    min-width:0 !important;

    height:44px !important;

    min-height:44px !important;

    padding:
      0 14px !important;

    border-radius:999px !important;

    font-size:15px !important;

    white-space:nowrap !important;

    overflow:hidden !important;
  }

}

/* =========================================================
   OPERA MOBILE - CENTRAL DE NOTIFICACOES
   ========================================================= */

.opera-mobile-notifications-backdrop{
  display:none;
}

@media(max-width:640px){

  /*
   * Fundo.
   */
  .opera-mobile-notifications-backdrop{
    position:fixed;

    inset:0;

    z-index:4990;

    display:block;

    background:
      rgba(
        15,
        23,
        42,
        .38
      );

    backdrop-filter:
      blur(3px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
      opacity .18s ease,
      visibility .18s ease;
  }

  body.opera-mobile-notifications-open
  .opera-mobile-notifications-backdrop{
    opacity:1;

    visibility:visible;

    pointer-events:auto;
  }

  /*
   * Painel vira uma tela de app.
   */
  body.opera-mobile-notifications-open
  #notificationsPanel{
    position:fixed !important;

    top:
      calc(
        env(
          safe-area-inset-top,
          0px
        ) +
        10px
      ) !important;

    right:10px !important;

    bottom:
      calc(
        var(
          --opera-mobile-bottom-nav-height,
          68px
        ) +
        env(
          safe-area-inset-bottom,
          0px
        ) +
        10px
      ) !important;

    left:10px !important;

    z-index:5000 !important;

    display:flex !important;

    flex-direction:column !important;

    width:auto !important;

    max-width:none !important;

    height:auto !important;

    max-height:none !important;

    margin:0 !important;

    padding:0 !important;

    overflow:hidden !important;

    border:
      1px solid
      #e2e8f0 !important;

    border-radius:
      22px !important;

    background:#fff !important;

    box-shadow:
      0
      24px
      80px
      rgba(
        15,
        23,
        42,
        .28
      ) !important;
  }

  /*
   * A classe hidden continua mandando quando
   * o painel estiver fechado.
   */
  body:not(
    .opera-mobile-notifications-open
  )
  #notificationsPanel.hidden{
    display:none !important;
  }

  #notificationsPanel
  .notifications-header{
    position:relative;

    flex:
      0 0 auto;

    display:flex;

    align-items:center;

    min-height:70px;

    padding:
      14px
      58px
      14px
      18px !important;

    border-bottom:
      1px solid
      #e5e7eb;

    background:
      rgba(
        255,
        255,
        255,
        .98
      );
  }

  #notificationsPanel
  .notifications-title{
    color:#0f172a;

    font-size:20px !important;

    font-weight:800 !important;
  }

  #notificationsPanel
  .notifications-subtitle{
    margin-top:3px;

    color:#64748b;

    font-size:12px !important;
  }

  #notificationsPanel
  .notifications-clear-btn{
    margin-left:auto;

    margin-right:2px;

    font-size:11px !important;
  }

  #operaMobileNotificationsClose{
    position:absolute;

    top:13px;
    right:12px;

    display:flex;

    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    border:0;

    border-radius:999px;

    background:#f1f5f9;

    color:#475569;
  }

  #operaMobileNotificationsClose
  svg{
    width:21px;
    height:21px;
  }

  /*
   * Lista ocupa o corpo.
   */
  #notificationsPanel
  .notifications-list{
    flex:
      1 1 auto !important;

    min-height:0 !important;

    max-height:none !important;

    overflow-y:auto !important;

    padding:
      6px
      0 !important;

    -webkit-overflow-scrolling:
      touch;
  }

  #notificationsPanel
  .notification-item{
    width:100%;

    min-height:72px;

    margin:0 !important;

    padding:
      13px
      16px !important;

    border-radius:0 !important;

    border-bottom:
      1px solid
      #eef2f7;

    background:#fff;
  }

  #notificationsPanel
  .notification-item.unread{
    background:#f3fafa !important;
  }

  #notificationsPanel
  .notification-title{
    font-size:14px !important;

    font-weight:750 !important;

    color:#0f172a !important;
  }

  #notificationsPanel
  .notification-text{
    margin-top:3px;

    font-size:13px !important;

    line-height:1.35;
  }

  #notificationsPanel
  .notification-meta{
    margin-top:5px;

    font-size:10px !important;
  }

  /*
   * Rodapé.
   */
  #notificationsPanel
  .notifications-footer{
    flex:
      0 0 auto;

    padding:
      10px
      14px
      calc(
        10px +
        env(
          safe-area-inset-bottom,
          0px
        )
      ) !important;

    border-top:
      1px solid
      #e5e7eb;

    background:#fff;
  }

  #notificationsPanel
  .notifications-footer
  button{
    width:100%;

    min-height:44px;

    border-radius:12px;

    font-size:13px;
    font-weight:700;
  }

}

/* =========================================================
   NOTIFICACOES - CAMADA ESTAVEL DESKTOP
   ========================================================= */

#notificationsPanel{
  z-index:9999 !important;
  pointer-events:auto !important;
}

.notification-wrapper{
  z-index:9998;
}

#notificationBellBtn{
  pointer-events:auto !important;
  cursor:pointer;
}

/* =========================================================
   NOTIFICACOES - DESKTOP FINAL
   ========================================================= */

@media (min-width:641px){

  .notification-wrapper{
    position:relative !important;
    z-index:9998 !important;
  }

  #notificationBellBtn{
    position:relative !important;
    z-index:10001 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
  }

  #notificationsPanel{
    position:absolute !important;
    top:46px !important;
    right:0 !important;
    left:auto !important;

    width:360px !important;
    max-width:calc(100vw - 32px) !important;

    z-index:10000 !important;

    visibility:visible;
    opacity:1;

    pointer-events:auto !important;
  }

  #notificationsPanel.hidden{
    display:none !important;
  }

}

/* =========================================================
   OPERA INBOX - DESKTOP WHATSAPP WEB
   2026-08-28
   Somente desktop.
   Mobile permanece com regras existentes.
   ========================================================= */

@media (min-width: 641px) {

  #page-inbox{
    --opera-wa-list-width: 350px;
    background:#f0f2f5 !important;
  }

  /* Página ocupa praticamente toda a área útil */
  #page-inbox .opera-inbox-page-header{
    margin-bottom:8px !important;
  }

  #page-inbox .opera-inbox-page-header h1{
    font-size:18px !important;
    font-weight:800 !important;
  }

  /* Busca mais próxima do WhatsApp */
  #page-inbox #inboxSearch{
    width:320px !important;
    height:40px !important;
    border:0 !important;
    border-radius:10px !important;
    background-color:#f0f2f5 !important;
    box-shadow:none !important;
  }

  /* Estrutura principal */
  #page-inbox .inbox-layout{
    grid-template-columns:
      var(--opera-wa-list-width)
      minmax(0,1fr)
      300px !important;

    gap:0 !important;
    border:1px solid #dfe3e7 !important;
    border-radius:12px !important;
    overflow:hidden !important;
    background:#fff !important;
  }

  /* Remove aparência de cards separados */
  #page-inbox .inbox-layout > .chart-box{
    border-radius:0 !important;
    border:0 !important;
    box-shadow:none !important;
    background:#fff !important;
  }

  #page-inbox #inboxLeftPanel{
    border-right:1px solid #e2e8f0 !important;
  }

  #page-inbox #clientInfoPanel{
    border-left:1px solid #e2e8f0 !important;
  }

  /* =====================================================
     ABAS SUPERIORES
     ===================================================== */

  #page-inbox #inboxLeftPanel > .border-b:first-child{
    min-height:52px !important;
    padding:7px 8px !important;
    border-bottom:1px solid #e5e7eb !important;
    background:#f7f8fa !important;
  }

  #page-inbox #operaInboxMainTabs{
    gap:5px !important;
    padding:0 !important;
    overflow:visible !important;
  }

  #page-inbox #operaInboxMainTabs .inbox-tab{
    flex:0 1 auto !important;
    min-width:0 !important;
    padding:7px 11px !important;
    border:1px solid #d8dde3 !important;
    border-radius:999px !important;
    background:#fff !important;
    color:#475569 !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    transition:
      background .15s ease,
      border-color .15s ease,
      color .15s ease !important;
  }

  #page-inbox #operaInboxMainTabs .inbox-tab:hover{
    background:#f1f5f9 !important;
  }

  #page-inbox #operaInboxMainTabs .inbox-tab.active{
    background:#e7f6f3 !important;
    border-color:#b7ded7 !important;
    color:#0f675f !important;
  }

  /* Esconde faixa antiga Todos/Suporte/etc */
  #page-inbox .opera-inbox-secondary-filters{
    display:none !important;
  }

  /* Botão recolher fica discreto */
  #page-inbox #btnToggleInboxLeftPanel{
    width:30px !important;
    height:30px !important;
    margin:0 0 0 6px !important;
    border-color:transparent !important;
    background:transparent !important;
  }

  #page-inbox #btnToggleInboxLeftPanel:hover{
    background:#e9edef !important;
  }

  /* =====================================================
     LISTA DE CONVERSAS
     ===================================================== */

  #page-inbox #inboxConversasPanel,
  #page-inbox #inboxProjetosPanel{
    background:#fff !important;
  }

  #page-inbox #conversationList,
  #page-inbox #inboxProjectList{
    background:#fff !important;
  }

  #page-inbox #conversationList .conv-item,
  #page-inbox .inbox-project-item{
    position:relative !important;
    min-height:72px !important;
    padding:10px 12px !important;
    margin:0 !important;
    border:0 !important;
    border-bottom:1px solid #f0f2f5 !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  #page-inbox #conversationList .conv-item:hover,
  #page-inbox .inbox-project-item:hover{
    background:#f5f6f6 !important;
  }

  #page-inbox #conversationList .conv-item.active,
  #page-inbox .inbox-project-item.active{
    background:#f0f2f5 !important;
    border-left:0 !important;
  }

  #page-inbox .conv-avatar{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    border-radius:50% !important;
  }

  /* =====================================================
     CABEÇALHO DA CONVERSA
     ===================================================== */

  #page-inbox .inbox-layout > .chart-box:nth-child(2)
  > .px-5.py-4.border-b.border-slate100{
    min-height:59px !important;
    padding:8px 14px !important;
    background:#f0f2f5 !important;
    border-bottom:1px solid #dfe3e7 !important;
  }

  #page-inbox #chatAvatar{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    border-radius:50% !important;
  }

  #page-inbox #chatTitle{
    font-size:15px !important;
    font-weight:700 !important;
  }

  #page-inbox #chatSubtitle{
    font-size:11px !important;
    color:#667781 !important;
  }

  /* Ícones do topo maiores e clicáveis visualmente */
  #page-inbox .inbox-layout > .chart-box:nth-child(2)
  > .px-5.py-4.border-b.border-slate100
  > .ml-auto{
    gap:18px !important;
  }

  #page-inbox .inbox-layout > .chart-box:nth-child(2)
  > .px-5.py-4.border-b.border-slate100
  > .ml-auto > svg{
    width:19px !important;
    height:19px !important;
  }

  /* =====================================================
     ÁREA DE CHAT
     ===================================================== */

  #page-inbox #inboxChatPanels{
    padding:0 !important;
    gap:0 !important;
    background:#efeae2 !important;
  }

  #page-inbox #clientChatPanel,
  #page-inbox #internalChatPanel{
    border:0 !important;
    border-radius:0 !important;
    background:#efeae2 !important;
  }

  #page-inbox #clientChatPanel{
    border-right:1px solid rgba(15,23,42,.08) !important;
  }

  #page-inbox #clientMessages,
  #page-inbox #internalMessages{
    background-color:#efeae2 !important;
    padding:18px 22px !important;
  }

  /* Composer */
  #page-inbox #clientChatBody > .p-3.border-t,
  #page-inbox #internalChatBody > .p-3.border-t{
    min-height:58px !important;
    padding:9px 12px !important;
    align-items:center !important;
    border-top:1px solid #dfe3e7 !important;
    background:#f0f2f5 !important;
  }

  #page-inbox #clientMessageInput,
  #page-inbox #internalMessageInput{
    height:40px !important;
    border:0 !important;
    border-radius:9px !important;
    background:#fff !important;
    box-shadow:none !important;
  }

  /* =====================================================
     PROJETOS
     ===================================================== */

  #page-inbox #inboxProjetosPanel > .p-3{
    padding:10px 12px !important;
    background:#fff !important;
  }

  #page-inbox #inboxProjetosPanel > .p-3 .font-semibold{
    font-size:13px !important;
  }

  #page-inbox #inboxProjetosPanel > .p-3 .text-xs{
    font-size:11px !important;
  }

  /* =====================================================
     PAINEL DIREITO
     ===================================================== */

  #page-inbox #clientInfoPanel{
    background:#fff !important;
  }

  #page-inbox #clientInfoPanel > .px-3.py-2{
    min-height:52px !important;
    background:#f0f2f5 !important;
  }

  /* Interno continua usando modo direto já existente */
  #page-inbox.opera-inbox-internal-direct .inbox-layout{
    grid-template-columns:
      var(--opera-wa-list-width)
      minmax(0,1fr) !important;
  }

  /* Mantém comportamento dos painéis recolhíveis */
  body.opera-inbox-left-collapsed #page-inbox .inbox-layout{
    grid-template-columns:
      58px
      minmax(0,1fr)
      300px !important;
  }

  body.opera-inbox-right-collapsed #page-inbox .inbox-layout{
    grid-template-columns:
      var(--opera-wa-list-width)
      minmax(0,1fr)
      58px !important;
  }

  body.opera-inbox-left-collapsed.opera-inbox-right-collapsed
  #page-inbox .inbox-layout{
    grid-template-columns:
      58px
      minmax(0,1fr)
      58px !important;
  }

  body.opera-inbox-left-collapsed
  #page-inbox.opera-inbox-internal-direct
  .inbox-layout{
    grid-template-columns:
      58px
      minmax(0,1fr) !important;
  }
}

@media (min-width:641px) and (max-width:1350px){
  #page-inbox{
    --opera-wa-list-width:300px;
  }

  #page-inbox .inbox-layout{
    grid-template-columns:
      var(--opera-wa-list-width)
      minmax(0,1fr)
      250px !important;
  }
}


/* =========================================================
   OPERA - CHAT FLUTUANTE
   Oculta somente enquanto o Inbox estiver visivel
   ========================================================= */

body:has(#page-inbox:not(.hidden)) .opera-floating-chat{
  display:none !important;
}


/* =========================================================
   OPERA INBOX - ABA TUDO
   Lista unica: Conversas + Projetos + Interno
   ========================================================= */

@media (min-width:641px){

  #page-inbox .opera-inbox-all-list{
    display:flex;
    flex-direction:column;
    width:100%;
    min-width:0;
    background:#fff;
  }

  #page-inbox .opera-inbox-all-item{
    display:flex !important;
    align-items:center !important;
    gap:11px !important;
    width:100% !important;
    min-width:0 !important;
    min-height:72px !important;
    padding:10px 12px !important;
    margin:0 !important;
    border:0 !important;
    border-bottom:1px solid #f0f2f5 !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:none !important;
    cursor:pointer !important;
  }

  #page-inbox .opera-inbox-all-item:hover{
    background:#f5f6f6 !important;
  }

  #page-inbox .opera-inbox-all-avatar{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    min-width:44px;
    border-radius:50%;
    font-size:13px;
    font-weight:800;
  }

  #page-inbox .opera-inbox-all-avatar-client{
    background:#e2e8f0;
    color:#334155;
  }

  #page-inbox .opera-inbox-all-avatar-project{
    background:#dff4f1;
    color:#0f675f;
  }

  #page-inbox .opera-inbox-all-avatar-internal{
    background:#e8eefc;
    color:#3b5c9a;
  }

  #page-inbox .opera-inbox-all-copy{
    min-width:0;
    flex:1 1 auto;
  }

  #page-inbox .opera-inbox-all-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-width:0;
  }

  #page-inbox .opera-inbox-all-top strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px;
    color:#1e293b;
  }

  #page-inbox .opera-inbox-all-top time{
    flex:0 0 auto;
    font-size:10px;
    color:#94a3b8;
    white-space:nowrap;
  }

  #page-inbox .opera-inbox-all-kind{
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px;
    font-weight:700;
    color:#94a3b8;
  }

  #page-inbox .opera-inbox-all-preview{
    margin-top:4px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
    color:#64748b;
  }

  #page-inbox .opera-inbox-all-time-wrap{
    display:flex;
    align-items:center;
    gap:5px;
    flex:0 0 auto;
  }

  #page-inbox .opera-inbox-all-unread{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:#0f766e;
    color:#fff;
    font-size:9px;
    line-height:1;
  }

  #page-inbox .opera-inbox-all-empty{
    padding:28px 18px;
    text-align:center;
    font-size:13px;
    color:#94a3b8;
  }

  /* quatro filtros ainda cabem sem quebrar */
  #page-inbox #operaInboxMainTabs{
    gap:4px !important;
  }

  #page-inbox #operaInboxMainTabs .inbox-tab{
    padding-left:9px !important;
    padding-right:9px !important;
  }

}

/*
 * Mobile continua exclusivo para chat interno.
 * A aba Tudo nao altera a experiencia mobile existente.
 */
@media (max-width:640px){
  #page-inbox [data-inbox-tab="tudo"]{
    display:none !important;
  }
}