/* ==========================================================================
   PRIOMAX SALES ENGINE — BIBLIOTECA DE COMPONENTES
   Toda a UI reutilizável do sistema vive aqui. Nenhuma página deve declarar
   estilo próprio para estes componentes.
   ========================================================================== */

/* ---- Sidebar nav ---- */
.pm-brand{ font-weight:800; font-size:1.02rem; margin-bottom:2px; padding:0 10px; }
.pm-brand .max{ color: var(--pm-vermelho) !important; }
.pm-brand-sub{ font-size:.66rem; opacity:.7; padding:0 10px; margin-bottom:18px; }
.pm-nav-label{ font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; opacity:.5; padding:14px 10px 6px; font-weight:700; }
.pm-nav-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; font-size:.83rem; font-weight:600; margin-bottom:2px; }
.pm-nav-item:hover{ background: rgba(255,255,255,.08); }
.pm-nav-item.pm-active{ background: var(--pm-azul); }
.pm-nav-item svg{ width:17px; height:17px; flex-shrink:0; }
.pm-nav-item .pm-nav-dot{ margin-left:auto; width:7px; height:7px; border-radius:50%; background:var(--pm-vermelho) !important; display:none; }
.pm-nav-item.pm-has-alert .pm-nav-dot{ display:block; }

/* ---- Topbar ---- */
.pm-topbar-title{ font-size:.95rem; font-weight:700; margin:0; }
.pm-topbar-path{ font-size:.7rem; color:var(--pm-texto-suave); }
.pm-topbar-actions{ display:flex; align-items:center; gap:10px; }
.pm-icon-btn{ width:38px; height:38px; border-radius:10px; border:1px solid var(--pm-linha); background:#fff; display:flex; align-items:center; justify-content:center; position:relative; }
.pm-icon-btn:hover{ background: var(--pm-fundo); }
.pm-icon-btn svg{ width:18px; height:18px; }
.pm-icon-btn .pm-dot{ position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:var(--pm-vermelho); border:2px solid #fff; }
.pm-avatar{ width:38px; height:38px; border-radius:50%; background:var(--pm-azul-fundo); color:#fff !important; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.82rem; }

/* ---- Card ---- */
.pm-card{ background:#fff; border:1px solid var(--pm-linha); border-radius: var(--pm-raio); padding:20px 22px; margin-bottom:16px; }
.pm-card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:10px; }
.pm-card-head h3{ font-size:1rem; font-weight:700; margin:0; }
.pm-card p{ font-size:.88rem; line-height:1.6; margin:0 0 8px; }
.pm-card ul{ padding-left:18px; }
.pm-card li{ font-size:.86rem; margin-bottom:6px; line-height:1.55; }

/* ---- Badge ---- */
.pm-badge{ display:inline-flex; align-items:center; gap:4px; background:var(--pm-fundo); border:1px solid var(--pm-linha); color:var(--pm-texto-suave); font-size:.68rem; font-weight:700; padding:3px 10px; border-radius:999px; }
.pm-badge-blue{ background:var(--pm-azul); color:#fff !important; border-color:var(--pm-azul); }
.pm-badge-yellow{ background:var(--pm-amarelo); color:var(--pm-texto) !important; border-color:var(--pm-amarelo); }
.pm-badge-red{ background:var(--pm-erro-bg); color:var(--pm-erro) !important; border-color:#FFC6CE; }
.pm-badge-green{ background:var(--pm-sucesso-bg); color:var(--pm-sucesso) !important; border-color:#BEEBD6; }

/* ---- Buttons ---- */
.pm-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:10px; font-size:.84rem; font-weight:600; border:1px solid transparent; background:#fff; }
.pm-btn-primary{ background:var(--pm-azul); color:#fff !important; }
.pm-btn-primary:hover{ background:#0518d4; }
.pm-btn-outline{ border-color:var(--pm-linha); color:var(--pm-texto); }
.pm-btn-outline:hover{ background:var(--pm-fundo); }
.pm-btn-ghost{ color:var(--pm-azul); }
.pm-btn[disabled]{ opacity:.5; pointer-events:none; }
.pm-btn-sm{ padding:6px 12px; font-size:.76rem; }

/* ---- Rule / callout ---- */
.pm-rule{ display:flex; gap:10px; background:var(--pm-alerta-bg); border:1px solid var(--pm-alerta-linha); border-radius:12px; padding:12px 14px; font-size:.85rem; margin-bottom:16px; }
.pm-rule-icon{ font-weight:800; color:var(--pm-alerta); flex-shrink:0; }
.pm-rule-blue{ background:#EAF0FF; border-color:#C7D6FF; }
.pm-rule-blue .pm-rule-icon{ color:var(--pm-azul); }

/* ---- Stat tile ---- */
.pm-stat{ background:var(--pm-azul-fundo); border-radius:12px; padding:14px 18px; min-width:140px; flex:1; }
.pm-stat, .pm-stat *{ color:#fff !important; }
.pm-stat .pm-num{ font-size:1.5rem; font-weight:800; color:var(--pm-amarelo) !important; line-height:1.2; }
.pm-stat .pm-lbl{ font-size:.7rem; opacity:.85; }
.pm-stat.pm-light{ background:#fff; border:1px solid var(--pm-linha); }
.pm-stat.pm-light, .pm-stat.pm-light *{ color:var(--pm-texto) !important; }
.pm-stat.pm-light .pm-num{ color:var(--pm-azul) !important; }

/* ---- Progress bar ---- */
.pm-progress{ height:8px; border-radius:999px; background:var(--pm-linha); overflow:hidden; }
.pm-progress-fill{ height:100%; background:var(--pm-azul); border-radius:999px; transition:width .3s ease; }
.pm-progress-fill.pm-full{ background: var(--pm-sucesso); }

/* ---- Checklist ---- */
.pm-checklist-item{ display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--pm-linha); font-size:.86rem; }
.pm-checklist-item:last-child{ border-bottom:none; }
.pm-checklist-item input{ width:17px; height:17px; accent-color:var(--pm-azul); }
.pm-checklist-item.pm-done label{ text-decoration:line-through; color:var(--pm-texto-suave); }

/* ---- Empty state ---- */
.pm-empty{ text-align:center; padding:40px 20px; color:var(--pm-texto-suave); }
.pm-empty svg{ width:36px; height:36px; margin:0 auto 10px; opacity:.5; }
.pm-empty .pm-empty-title{ font-weight:700; color:var(--pm-texto); margin-bottom:4px; }

/* ---- Modal ---- */
.pm-modal-overlay{ position:fixed; inset:0; background:rgba(3,0,133,.35); display:flex; align-items:center; justify-content:center; z-index:var(--pm-z-modal); padding:20px; }
.pm-modal{ background:#fff; border-radius:16px; max-width:560px; width:100%; max-height:86vh; overflow-y:auto; padding:24px 26px; box-shadow:var(--pm-sombra-lg); }
.pm-modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.pm-modal-close{ width:30px; height:30px; border-radius:8px; border:1px solid var(--pm-linha); background:#fff; }

/* ---- Toast ---- */
.pm-toast-wrap{ position:fixed; bottom:22px; right:22px; z-index:var(--pm-z-toast); display:flex; flex-direction:column; gap:8px; }
.pm-toast{ background:var(--pm-azul-fundo); color:#fff !important; padding:12px 18px; border-radius:10px; font-size:.84rem; box-shadow:var(--pm-sombra-lg); min-width:220px; animation: pm-toast-in .18s ease; }
.pm-toast.pm-toast-error{ background:var(--pm-vermelho); }
.pm-toast.pm-toast-success{ background:var(--pm-sucesso); }
@keyframes pm-toast-in{ from{ opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

/* ---- Kanban ---- */
.pm-kanban{ display:flex; gap:14px; overflow-x:auto; padding-bottom:12px; }
.pm-kanban-col{ min-width:230px; background:var(--pm-fundo); border-radius:12px; padding:10px; flex-shrink:0; }
.pm-kanban-col-head{ display:flex; justify-content:space-between; align-items:center; padding:4px 6px 10px; }
.pm-kanban-col-head h4{ font-size:.76rem; font-weight:700; color:var(--pm-texto-suave); text-transform:uppercase; letter-spacing:.03em; }
.pm-kanban-card{ background:#fff; border:1px solid var(--pm-linha); border-radius:10px; padding:10px 12px; margin-bottom:8px; font-size:.82rem; cursor:grab; }
.pm-kanban-card:active{ cursor:grabbing; }
.pm-kanban-card.pm-dragging{ opacity:.4; }
.pm-kanban-card .pm-kc-name{ font-weight:700; margin-bottom:3px; }
.pm-kanban-card .pm-kc-meta{ color:var(--pm-texto-suave); font-size:.72rem; }
.pm-kanban-col.pm-drop-hover{ outline:2px dashed var(--pm-azul); outline-offset:-2px; }

/* ---- Table ---- */
.pm-table{ width:100%; border-collapse:collapse; font-size:.84rem; }
.pm-table th{ background:var(--pm-azul-fundo); color:#fff !important; text-align:left; padding:9px 12px; font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; }
.pm-table th:first-child{ border-top-left-radius:8px; } .pm-table th:last-child{ border-top-right-radius:8px; }
.pm-table td{ padding:10px 12px; border-bottom:1px solid var(--pm-linha); }
.pm-table tr:hover td{ background: var(--pm-fundo); }

/* ---- Tabs ---- */
.pm-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.pm-tab{ padding:8px 16px; border-radius:999px; border:1px solid var(--pm-linha); background:#fff; font-size:.8rem; font-weight:600; }
.pm-tab.pm-active{ background:var(--pm-azul); color:#fff !important; border-color:var(--pm-azul); }

/* ---- Iframe embed ---- */
.pm-frame-wrap{ border:1px solid var(--pm-linha); border-radius:var(--pm-raio); overflow:hidden; background:#fff; }
.pm-frame-bar{ background:var(--pm-azul-fundo); color:#fff !important; padding:10px 16px; font-size:.78rem; font-weight:600; display:flex; justify-content:space-between; align-items:center; }
.pm-frame-bar a{ color:#fff !important; opacity:.85; }
.pm-frame-bar a:hover{ opacity:1; }
.pm-frame{ width:100%; height:78vh; border:none; display:block; }

/* ---- Chat widget ---- */
.pm-chat{ display:flex; flex-direction:column; height:520px; border:1px solid var(--pm-linha); border-radius:var(--pm-raio); background:#fff; overflow:hidden; }
.pm-chat-log{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:12px; }
.pm-chat-msg{ max-width:80%; padding:10px 14px; border-radius:12px; font-size:.86rem; line-height:1.55; white-space:pre-wrap; }
.pm-chat-msg.pm-user{ align-self:flex-end; background:var(--pm-azul); color:#fff !important; border-bottom-right-radius:2px; }
.pm-chat-msg.pm-ai{ align-self:flex-start; background:var(--pm-fundo); border-bottom-left-radius:2px; }
.pm-chat-input-row{ border-top:1px solid var(--pm-linha); padding:12px; display:flex; gap:8px; }
.pm-chat-input-row input{ flex:1; border:1px solid var(--pm-linha); border-radius:10px; padding:10px 14px; font-size:.86rem; }
.pm-chat-suggestions{ display:flex; gap:8px; flex-wrap:wrap; padding:0 18px 14px; }
.pm-chip{ background:var(--pm-fundo); border:1px solid var(--pm-linha); border-radius:999px; padding:6px 12px; font-size:.75rem; font-weight:600; }
.pm-chip:hover{ background:#EAF0FF; border-color:#C7D6FF; }

/* ---- Form fields ---- */
.pm-field{ margin-bottom:14px; }
.pm-field label{ display:block; font-size:.78rem; font-weight:600; margin-bottom:5px; color:var(--pm-texto-suave); }
.pm-field input, .pm-field select, .pm-field textarea{ width:100%; padding:10px 12px; border:1px solid var(--pm-linha); border-radius:10px; font-size:.86rem; background:#fff; }
.pm-field input:focus, .pm-field select:focus, .pm-field textarea:focus{ outline:none; border-color:var(--pm-azul); }

/* ---- Leaderboard ---- */
.pm-rank-row{ display:flex; align-items:center; gap:12px; padding:10px 6px; border-bottom:1px solid var(--pm-linha); }
.pm-rank-pos{ width:26px; text-align:center; font-weight:800; color:var(--pm-texto-suave); }
.pm-rank-row.pm-top .pm-rank-pos{ color:var(--pm-amarelo-txt,#B8860B); }
.pm-rank-name{ flex:1; font-weight:600; font-size:.86rem; }
.pm-rank-pts{ font-weight:700; color:var(--pm-azul); font-size:.86rem; }

/* ---- Missão (GPS do Motor de Vendas) ---- */
.pm-mission-wrap{ max-width:640px; margin:0 auto; }
.pm-mission-phases{ display:flex; justify-content:space-between; gap:4px; margin-bottom:22px; position:relative; }
.pm-mission-phases::before{ content:''; position:absolute; top:9px; left:5%; right:5%; height:2px; background:var(--pm-linha); z-index:0; }
.pm-mission-phase{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; }
.pm-mission-phase-dot{ width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid var(--pm-linha); display:flex; align-items:center; justify-content:center; color:#fff; }
.pm-mission-phase-label{ font-size:.62rem; font-weight:700; color:var(--pm-texto-suave); text-align:center; letter-spacing:.02em; }
.pm-mission-phase.pm-active .pm-mission-phase-dot{ background:var(--pm-azul); border-color:var(--pm-azul); box-shadow:0 0 0 4px rgba(6,34,253,.15); }
.pm-mission-phase.pm-active .pm-mission-phase-label{ color:var(--pm-azul); }
.pm-mission-phase.pm-done .pm-mission-phase-dot{ background:var(--pm-sucesso); border-color:var(--pm-sucesso); }
.pm-mission-phase.pm-done .pm-mission-phase-dot svg{ width:11px; height:11px; }

.pm-mission-card{
  background: linear-gradient(145deg, var(--pm-azul-fundo) 0%, var(--pm-azul) 100%);
  border-radius: var(--pm-raio-lg);
  padding: 30px 32px;
  box-shadow: var(--pm-sombra-lg);
  margin-bottom: 16px;
}
.pm-mission-card, .pm-mission-card p{ color:#fff !important; }
.pm-mission-tag{ display:inline-block; background:rgba(255,255,255,.14); color:var(--pm-amarelo) !important; font-size:.68rem; font-weight:800; letter-spacing:.05em; padding:5px 12px; border-radius:999px; margin-bottom:14px; }
.pm-mission-title{ font-size:1.5rem; font-weight:800; margin:0 0 4px; }
.pm-mission-sub{ font-size:.82rem; opacity:.8; margin-bottom:20px; }
.pm-mission-obj{ font-size:.92rem; line-height:1.6; margin:0 0 18px; opacity:.95; }
.pm-mission-tools{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.pm-mission-tools .pm-btn{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff !important; }
.pm-mission-tools .pm-btn-primary{ background:var(--pm-amarelo); color:var(--pm-texto) !important; border-color:var(--pm-amarelo); font-weight:700; }
.pm-mission-tools .pm-btn:hover{ background:rgba(255,255,255,.2); }
.pm-mission-tools .pm-btn-primary:hover{ background:#dbe600; }
.pm-mission-tools .pm-btn svg{ width:16px; height:16px; }
.pm-mission-question{ border-top:1px solid rgba(255,255,255,.2); padding-top:18px; }
.pm-mission-question p{ font-weight:700; margin:0 0 12px; }
.pm-mission-options{ display:flex; flex-wrap:wrap; gap:10px; }
.pm-mission-option{
  flex:1; min-width:120px; padding:12px 16px; border-radius:12px; border:1.5px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.06); color:#fff !important; font-weight:700; font-size:.86rem;
}
.pm-mission-option:hover{ background:#fff; color:var(--pm-azul-fundo) !important; border-color:#fff; }
.pm-mission-card .pm-checklist-item{ border-bottom-color:rgba(255,255,255,.2); }
.pm-mission-card .pm-checklist-item label{ color:#fff !important; }
.pm-mission-card .pm-checklist-item.pm-done label{ color:rgba(255,255,255,.6) !important; }
.pm-mission-manual-link{ display:block; text-align:center; font-size:.8rem; color:var(--pm-texto-suave); margin-top:6px; }
.pm-mission-manual-link:hover{ color:var(--pm-azul); }
@media (max-width:560px){
  .pm-mission-card{ padding:22px 20px; }
  .pm-mission-phase-label{ font-size:.56rem; }
}