/* =========================================================
   Portal do PARCEIRO (revendedor) — PLACEHOLDER (Fase 3)
   Tela de portal (sem sidebar do cliente final). Tokens alinhados
   ao hi-fi do login/gestão (azul #2563EB, fundo #EEF2F9).
   ========================================================= */

[v-cloak] { display: none !important; }

/* Ocupa toda a largura do wrapper .ia-app (que aqui não tem sidebar). */
.pp-portal {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #EEF2F9;
    color: #0F172A;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: auto;
    z-index: 1000;
}

/* Experiência Unificada — EMBED na sidebar do cliente (rotas estrutura/consumo/
   clientes). Aqui o elemento NÃO recebe a classe .pp-portal (sem full-screen fixo):
   flui como conteúdo normal DENTRO do #v-conteudo (ao lado da sidebar), mantendo o
   visual dos cards/tabelas do portal. A sidebar (menu.php) nunca é coberta. */
.pp-embed {
    display: block;
    min-height: 100%;
    background: #EEF2F9;
    color: #0F172A;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
}
/* No embed, o .pp-main não precisa de flex (o pai não é flex): centraliza e respira. */
.pp-embed .pp-main { flex: none; }

/* ---------------- topbar ---------------- */
.pp-topbar {
    flex-shrink: 0;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px;
    background: linear-gradient(135deg, #0B1220, #122142);
    color: #fff;
}
.pp-brand { display: flex; align-items: center; gap: 12px; }
.pp-brand-mark { width: 34px; height: 34px; line-height: 0; display: block; }
.pp-brand-text { line-height: 1.05; }
.pp-brand-word { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -.4px; color: #CBD5E1; }
.pp-brand-word b { color: #93C5FD; }
.pp-brand-sub { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; color: rgba(203,213,225,.6); margin-top: 2px; }

.pp-user { display: flex; align-items: center; gap: 14px; }
.pp-user-name { font-size: 14px; font-weight: 600; color: #E2E8F0; }
.pp-btn-ghost {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06);
    color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background .16s ease;
}
.pp-btn-ghost:hover { background: rgba(255,255,255,.14); }

/* ---------------- main ---------------- */
.pp-main { flex: 1; padding: 28px 26px 48px; width: 100%; margin: 0 auto; }
.pp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.pp-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.6px; margin: 0 0 4px; color: #0F172A; }
.pp-lead { font-size: 14px; color: #64748B; margin: 0; max-width: 640px; }

.pp-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border: none; border-radius: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700; color: #fff;
    background: linear-gradient(120deg, #2563EB, #4F46E5);
    box-shadow: 0 12px 26px -12px rgba(37,99,235,.6);
    cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
    white-space: nowrap;
}
.pp-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 16px 34px -14px rgba(37,99,235,.7); }

/* ---------------- card / tabela ---------------- */
.pp-card {
    background: #fff;
    border: 1px solid rgba(15,23,42,.07);
    border-radius: 16px;
    padding: 14px 18px 6px;
    box-shadow: 0 10px 30px -18px rgba(15,23,42,.25);
}
.pp-table { font-size: 14px; }
.pp-table thead th {
    border-top: none; border-bottom: 1.5px solid rgba(15,23,42,.08);
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #64748B;
}
.pp-table td { vertical-align: middle; color: #334155; }
.pp-table code { background: #F1F5F9; color: #1E40AF; padding: 2px 7px; border-radius: 6px; font-size: 12.5px; }
.pp-col-acoes { text-align: right; white-space: nowrap; }
.pp-muted { color: #94A3B8; }

/* badges */
.pp-badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.pp-badge--on  { background: rgba(22,163,74,.12); color: #15803D; }
.pp-badge--off { background: rgba(100,116,139,.14); color: #475569; }
.pp-badge--adm { background: rgba(37,99,235,.1); color: #1E40AF; margin-left: 6px; font-size: 10.5px; padding: 2px 8px; }

/* botões de ação da linha */
.pp-acoes { display: inline-flex; gap: 4px; justify-content: flex-end; }
.pp-icon-btn {
    width: 32px; height: 32px; border-radius: 9px;
    border: 1px solid rgba(15,23,42,.1); background: #F8FAFC; color: #475569;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.pp-icon-btn:hover { background: #EEF2F9; color: #2563EB; border-color: rgba(37,99,235,.3); }
.pp-icon-btn--danger:hover { color: #DC2626; border-color: rgba(220,38,38,.3); background: rgba(220,38,38,.06); }

/* Remove o contorno/anel preto de foco padrão ao clicar nos botões do portal
   (o feedback fica no hover/estado ativo). */
.pp-btn-primary:focus, .pp-icon-btn:focus, .pp-cli-btn:focus, .pp-cli-search-clear:focus,
.pp-nc-modo:focus, .pp-nc-senha-toggle:focus, .pp-um-add-btn:focus, .pp-um-voltar:focus,
.pp-um-cancel-btn:focus, .pp-um-salvar:focus, .pp-um-aplicar:focus, .pp-consumo-stub:focus,
.pp-um-header .close:focus, .pp-tab:focus, .pp-btn-ghost:focus {
    outline: none; box-shadow: none;
}
#modal-usuarios .btn:focus, #modal-cliente .btn:focus, #modal-consumo-usuario .btn:focus,
#modal-usuarios button:focus, #modal-cliente button:focus {
    outline: none; box-shadow: none;
}

/* ============================================================
   CLIENTES — grade de cards (substitui a tabela/DataTables)
   ============================================================ */
.pp-cli-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
}
.pp-cli-search {
    position: relative; display: flex; align-items: center; flex: 1; min-width: 240px; max-width: 420px;
}
.pp-cli-search > i.fas {
    position: absolute; left: 14px; color: #94A3B8; font-size: 13px; pointer-events: none;
}
.pp-cli-search input {
    width: 100%; height: 44px; padding: 0 38px 0 38px;
    border-radius: 12px; border: 1px solid rgba(15,23,42,.12);
    background: #fff; color: #0F172A; font-size: 14px; font-family: inherit; outline: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.pp-cli-search input:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.pp-cli-search-clear {
    position: absolute; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 7px;
    background: transparent; color: #94A3B8; cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; font-size: 12px; transition: background .14s, color .14s;
}
.pp-cli-search-clear:hover { background: #EEF2F9; color: #475569; }
.pp-cli-count { font-size: 13px; color: #64748B; font-weight: 600; white-space: nowrap; }

.pp-cli-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.pp-cli-card {
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 16px;
    padding: 18px 18px 14px;
    box-shadow: 0 10px 30px -20px rgba(15,23,42,.28);
    display: flex; flex-direction: column; gap: 14px;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pp-cli-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -22px rgba(15,23,42,.4);
    border-color: rgba(37,99,235,.25);
}
.pp-cli-card--off { opacity: .72; }
.pp-cli-card--off:hover { opacity: 1; }

.pp-cli-card-top { display: flex; align-items: center; gap: 12px; }
.pp-cli-avatar {
    width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 20px;
    box-shadow: 0 6px 16px -8px rgba(15,23,42,.5);
}
.pp-cli-ident { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pp-cli-nome {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -.2px;
    color: #0F172A; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-cli-ident .pp-badge { align-self: flex-start; }

.pp-cli-meta {
    margin: 0; display: flex; flex-direction: column; gap: 9px;
    padding: 12px 0; border-top: 1px solid rgba(15,23,42,.06); border-bottom: 1px solid rgba(15,23,42,.06);
}
.pp-cli-meta-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pp-cli-meta-item dt {
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #94A3B8; margin: 0;
}
.pp-cli-meta-item dd {
    margin: 0; font-size: 13.5px; color: #334155; text-align: right; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pp-cli-meta-item code { background: #F1F5F9; color: #1E40AF; padding: 2px 7px; border-radius: 6px; font-size: 12.5px; }

.pp-cli-modo { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; }
.pp-cli-modo i { font-size: 11px; }
.pp-cli-modo--integrado { color: #1E40AF; }
.pp-cli-modo--direto { color: #9333EA; }

.pp-cli-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pp-cli-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 10px;
    border: 1px solid rgba(37,99,235,.22); background: rgba(37,99,235,.06); color: #1E40AF;
    font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
    transition: background .14s ease, border-color .14s ease;
}
.pp-cli-btn:hover { background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.4); }
.pp-cli-actions-icons { display: inline-flex; gap: 4px; }

/* estado vazio (sem resultado de busca ou sem clientes) */
.pp-cli-empty {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 56px 20px; text-align: center;
    background: #fff; border: 1px dashed rgba(15,23,42,.14); border-radius: 16px;
}
.pp-cli-empty-ico {
    width: 60px; height: 60px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(37,99,235,.08); color: #2563EB; font-size: 24px;
}
.pp-cli-empty p { margin: 0; color: #64748B; font-size: 14.5px; }

/* ============================================================
   NOVO/EDITAR CLIENTE — modal redesenhado (moderno, intuitivo)
   Teleportado ao <body> → estilos GLOBAIS (não sob .pp-embed).
   ============================================================ */
/* Modal mais largo — o padrão do Bootstrap (500px) comprime demais os cards
   de modo e a seção de primeiro acesso, empurrando tudo para o scroll. */
#modal-cliente .modal-dialog { max-width: 680px; }

.pp-nc-form { padding: 22px 26px 8px; display: flex; flex-direction: column; gap: 16px; }
#modal-cliente .modal-title { font-size: 17px; }
.pp-nc-section { display: flex; flex-direction: column; gap: 11px; }
.pp-nc-section-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 700; color: #0F172A; }
.pp-nc-section-lead { margin: 3px 0 0; font-size: 11.5px; color: #64748B; line-height: 1.45; }

.pp-nc-field { display: flex; flex-direction: column; gap: 5px; }
.pp-nc-field label { margin: 0; font-size: 12px; font-weight: 600; color: #334155; }
.pp-nc-form .form-control {
    height: 42px; border-radius: 11px; border: 1px solid rgba(15,23,42,.14);
    font-size: 13px; color: #0F172A; transition: border-color .16s ease, box-shadow .16s ease;
}
.pp-nc-form .form-control:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.pp-nc-help { font-size: 11px; color: #94A3B8; line-height: 1.4; }
.pp-opt {
    display: inline-block; margin-left: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: #94A3B8; background: #F1F5F9; padding: 2px 7px; border-radius: 99px; vertical-align: middle;
}

/* cards de modo de acesso (substituem o <select>) */
.pp-nc-modos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pp-nc-modo {
    position: relative; text-align: left; cursor: pointer; font-family: inherit;
    display: flex; flex-direction: column; gap: 5px; padding: 14px;
    border-radius: 13px; border: 1.5px solid rgba(15,23,42,.12); background: #fff;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.pp-nc-modo:hover { border-color: rgba(37,99,235,.4); background: #F8FAFF; }
.pp-nc-modo--on { border-color: #2563EB; background: rgba(37,99,235,.06); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.pp-nc-modo-ico {
    width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: #EEF2F9; color: #475569; font-size: 15px; transition: background .16s ease, color .16s ease;
}
.pp-nc-modo--on .pp-nc-modo-ico { background: #2563EB; color: #fff; }
.pp-nc-modo-nome { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14.5px; color: #0F172A; }
.pp-nc-modo-desc { font-size: 12px; color: #64748B; line-height: 1.4; }
.pp-nc-modo-check { position: absolute; top: 10px; right: 11px; color: #2563EB; font-size: 15px; opacity: 0; transition: opacity .16s ease; }
.pp-nc-modo--on .pp-nc-modo-check { opacity: 1; }

/* bloco destacado "primeiro acesso" (DIRETO, na criação) */
.pp-nc-primeiro {
    display: flex; flex-direction: column; gap: 12px; padding: 16px;
    border-radius: 14px; border: 1px solid rgba(37,99,235,.2); background: rgba(37,99,235,.045);
}
.pp-nc-primeiro-head { display: flex; align-items: flex-start; gap: 11px; }
.pp-nc-primeiro-ico {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px;
    display: flex; align-items: center; justify-content: center; background: #2563EB; color: #fff; font-size: 15px;
}

/* senha com botão mostrar/ocultar */
.pp-nc-senha { position: relative; display: flex; align-items: center; }
.pp-nc-senha .form-control { padding-right: 44px; width: 100%; }
.pp-nc-senha-toggle {
    position: absolute; right: 6px; width: 32px; height: 32px; border: 0; border-radius: 8px;
    background: transparent; color: #64748B; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; transition: background .14s ease, color .14s ease;
}
.pp-nc-senha-toggle:hover { background: #EEF2F9; color: #2563EB; }
.pp-nc-switch { padding-top: 2px; }

@media (max-width: 480px) { .pp-nc-modos { grid-template-columns: 1fr; } }

/* ============================================================
   MODAL USUÁRIOS DO CLIENTE — redesenhado (moderno)
   Teleportado ao <body> → estilos GLOBAIS.
   ============================================================ */
/* cantos mais suaves nos dois modais do portal */
#modal-usuarios .modal-content, #modal-cliente .modal-content { border: none; border-radius: 18px; overflow: hidden; }

/* cabeçalho refinado (sem footer — o X fecha) */
.pp-um-header { align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid rgba(15,23,42,.07); }
.pp-um-header-text { display: flex; flex-direction: row; align-items: baseline; gap: 9px; margin-right: auto; min-width: 0; }
.pp-um-header .modal-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #64748B; flex-shrink: 0; }
.pp-um-header-sep { color: #CBD5E1; font-weight: 400; flex-shrink: 0; }
.pp-um-header-cliente { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 800; letter-spacing: -.2px; color: #0F172A; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-um-header-mode {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 700;
}
.pp-um-header-mode i { font-size: 10px; }
.pp-um-header-mode--integrado { background: rgba(37,99,235,.1); color: #1E40AF; }
.pp-um-header-mode--direto { background: rgba(147,51,234,.1); color: #7E22CE; }
/* .modal-header .close do Bootstrap traz margin-left:auto — sem sobrepor com a
   MESMA especificidade, a pill do modo era empurrada para o meio do cabeçalho. */
.pp-um-header .close { margin: 0; padding: 4px; opacity: .5; font-size: 24px; font-weight: 400; transition: opacity .14s ease; }
.pp-um-header .close:hover { opacity: .9; }

.pp-um-body { padding: 20px 24px 22px; display: flex; flex-direction: column; gap: 16px; }

/* nota de contexto (muda com o modo do cliente) */
.pp-um-note {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.45;
}
.pp-um-note i { margin-top: 2px; }
.pp-um-note--integrado { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E3A8A; }
.pp-um-note--integrado i { color: #2563EB; }
.pp-um-note--direto { background: rgba(147,51,234,.06); border: 1px solid rgba(147,51,234,.22); color: #6B21A8; }
.pp-um-note--direto i { color: #9333EA; }

/* lista de usuários (cards com avatar) */
.pp-um-list { display: flex; flex-direction: column; gap: 8px; }
.pp-um-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    padding: 42px 20px; text-align: center;
    border: 1px solid rgba(15,23,42,.08); border-radius: 14px; background: #F8FAFC;
}
.pp-um-empty > i {
    width: 54px; height: 54px; border-radius: 16px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #EEF2F9; color: #94A3B8; font-size: 22px;
}
/* o spinner não deve girar dentro do badge — mostra limpo */
.pp-um-empty > i.fa-spin { width: auto; height: auto; background: transparent; color: #2563EB; font-size: 26px; }
.pp-um-empty-text { display: flex; flex-direction: column; gap: 3px; }
.pp-um-empty-text strong { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14.5px; font-weight: 700; color: #334155; }
.pp-um-empty-text span { font-size: 12.5px; color: #94A3B8; }
.pp-um-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border: 1px solid rgba(15,23,42,.08); border-radius: 12px; background: #fff;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.pp-um-item:hover { border-color: rgba(37,99,235,.28); box-shadow: 0 8px 22px -16px rgba(15,23,42,.4); }
.pp-um-item--off { opacity: .64; }
.pp-um-item--off:hover { opacity: 1; }
.pp-um-avatar {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: #94A3B8; color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 15px;
    box-shadow: 0 5px 14px -7px rgba(15,23,42,.5);
}
.pp-um-item--off .pp-um-avatar { filter: grayscale(.6); }
.pp-um-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pp-um-nome { font-size: 14px; font-weight: 600; color: #0F172A; display: inline-flex; align-items: center; }
.pp-um-meta { font-size: 12.5px; color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-um-meta code { font-family: inherit; background: transparent; color: #475569; padding: 0; font-size: 12.5px; font-weight: 500; }
.pp-um-meta-sec { color: #94A3B8; }

/* medidor de cota mensal de chamadas (uso/limite) */
.pp-um-cota { display: inline-flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 11.5px; font-weight: 600; color: #64748B; }
.pp-um-cota-bar { position: relative; width: 92px; height: 6px; border-radius: 99px; background: rgba(15,23,42,.08); overflow: hidden; }
.pp-um-cota-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: #2563EB; transition: width .4s ease; }
.pp-um-cota-txt { white-space: nowrap; }
.pp-um-cota--warn { color: #B45309; }
.pp-um-cota--warn .pp-um-cota-fill { background: #D97706; }
.pp-um-cota--full { color: #B91C1C; }
.pp-um-cota--full .pp-um-cota-fill { background: #DC2626; }
.pp-um-tags { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pp-um-actions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* badge de atenção (âmbar) — "sem senha" pede ação, não é só "inativo" */
.pp-badge--warn { background: rgba(217,119,6,.12); color: #B45309; }

/* toolbar (contagem + botão adicionar) */
.pp-um-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pp-um-count { font-size: 13px; font-weight: 600; color: #64748B; }
.pp-um-add-btn {
    display: inline-flex; align-items: center; gap: 8px; font-family: inherit;
    padding: 9px 15px; border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(37,99,235,.28); background: rgba(37,99,235,.06); color: #1E40AF;
    font-size: 13px; font-weight: 700; transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.pp-um-add-btn:hover { background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.45); }
.pp-um-add-btn--on { background: #EEF2F9; border-color: rgba(15,23,42,.14); color: #475569; }

/* painel inline adicionar/editar (card destacado) */
.pp-um-form {
    display: flex; flex-direction: column; gap: 13px; padding: 16px;
    border-radius: 14px; border: 1px solid rgba(37,99,235,.2); background: rgba(37,99,235,.04);
}
.pp-um-form-head .pp-nc-section-title { display: inline-flex; align-items: center; gap: 8px; }
.pp-um-form-head .pp-nc-section-title i { color: #2563EB; font-size: 13px; }
.pp-um-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pp-um-field-full { grid-column: 1 / -1; }
.pp-um-body .form-control {
    height: 42px; border-radius: 11px; border: 1px solid rgba(15,23,42,.14); background: #fff;
    font-size: 13px; color: #0F172A; transition: border-color .16s ease, box-shadow .16s ease;
}
.pp-um-body .form-control:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.pp-um-switches { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pp-um-form-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.pp-um-cancel-btn { border: 0; background: transparent; color: #64748B; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 8px; }
.pp-um-cancel-btn:hover { color: #2563EB; text-decoration: underline; }
.pp-um-salvar { border-radius: 10px; font-weight: 700; font-size: 13.5px; padding: 8px 18px; }

/* linha da lista = item + accordion de senha empilhados */
.pp-um-row { display: flex; flex-direction: column; gap: 8px; }
/* botão de chave "ativo" quando o accordion de senha daquele usuário está aberto */
.pp-icon-btn--on, .pp-icon-btn--on:hover { background: #2563EB; color: #fff; border-color: #2563EB; }

/* accordion de senha (desce sob a linha; substitui o modal antigo) */
.pp-um-senha {
    display: flex; flex-direction: column; gap: 12px; padding: 14px 16px;
    border-radius: 12px; border: 1px solid rgba(37,99,235,.22); background: rgba(37,99,235,.05);
}
.pp-um-senha-head { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: #1E3A8A; line-height: 1.45; }
.pp-um-senha-head i { margin-top: 2px; color: #2563EB; }
.pp-um-senha-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pp-um-senha-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

/* transição slide+fade dos painéis inline (form e senha) */
.pp-um-slide-enter-active, .pp-um-slide-leave-active { transition: opacity .18s ease, transform .18s ease; }
.pp-um-slide-enter-from, .pp-um-slide-leave-to { opacity: 0; transform: translateY(-6px); }

/* "Consumo por usuário" — card sólido que levanta no hover (era tracejado) */
.pp-um-body .pp-consumo-stub {
    margin-top: 2px; border-style: solid; border-color: rgba(37,99,235,.16); background: #fff;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.pp-um-body .pp-consumo-stub:hover {
    border-color: rgba(37,99,235,.4); background: #fff;
    box-shadow: 0 12px 28px -18px rgba(15,23,42,.4); transform: translateY(-1px);
}

/* ---- Visão de consumo por usuário (mesmo modal) ---- */
.pp-um-view, .pp-um-consumo { display: flex; flex-direction: column; gap: 16px; }

/* cabeçalho da visão: botão voltar redondo + título/subtítulo */
.pp-um-consumo-top { display: flex; align-items: flex-start; gap: 12px; }
.pp-um-voltar {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; margin-top: 1px;
    border: 1px solid rgba(15,23,42,.1); background: #fff; color: #475569; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.pp-um-voltar:hover { background: #EEF2F9; color: #2563EB; border-color: rgba(37,99,235,.3); }
.pp-um-consumo-head { display: flex; flex-direction: column; gap: 2px; }
.pp-um-consumo-head .pp-nc-section-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.pp-um-consumo-head .pp-nc-section-title i { color: #2563EB; }

/* filtros num painel contido (control panel) */
.pp-um-filtros {
    display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
    padding: 14px 16px; border-radius: 12px; background: #F8FAFC; border: 1px solid rgba(15,23,42,.07);
}
.pp-um-filtro { min-width: 132px; }
.pp-um-filtro label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #64748B; }
/* campos de data compactos (o padrão de 42px ficava grande demais aqui) */
.pp-um-filtros .form-control { height: 38px; font-size: 12.5px; padding: 6px 10px; }
.pp-um-aplicar { align-self: flex-end; height: 38px; padding: 7px 16px; font-size: 13px; }

/* KPIs de totais */
.pp-um-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pp-um-kpi {
    display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
    border-radius: 12px; border: 1px solid rgba(15,23,42,.08); background: #F8FAFC;
}
.pp-um-kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94A3B8; }
.pp-um-kpi-val { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 800; color: #0F172A; font-variant-numeric: tabular-nums; }
.pp-um-kpi--money { background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.18); }
.pp-um-kpi--money .pp-um-kpi-val { color: #1E40AF; }

/* tabela de consumo */
.pp-um-tablewrap { overflow-x: auto; border: 1px solid rgba(15,23,42,.08); border-radius: 12px; }
.pp-um-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pp-um-table thead th {
    text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #94A3B8;
    padding: 10px 14px; background: #F8FAFC; border-bottom: 1px solid rgba(15,23,42,.08); white-space: nowrap;
}
.pp-um-table thead th.pp-num { text-align: right; }
.pp-um-table tbody td { padding: 11px 14px; border-bottom: 1px solid rgba(15,23,42,.05); color: #334155; vertical-align: middle; }
.pp-um-table tbody tr:last-child td { border-bottom: 0; }
.pp-um-table tbody tr:hover { background: rgba(37,99,235,.03); }
.pp-um-table-user strong { display: block; color: #0F172A; font-weight: 600; }
.pp-um-table-sub { display: block; font-size: 11.5px; color: #94A3B8; margin-top: 1px; }
.pp-um-table-money { font-weight: 700; color: #1E40AF; }

/* botão voltar no cabeçalho (ao lado do X, só na visão consumo) */
.pp-um-headbtn {
    width: 34px; height: 34px; border-radius: 10px; margin-right: 2px;
    border: 1px solid rgba(15,23,42,.1); background: #fff; color: #475569; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.pp-um-headbtn:hover { background: #EEF2F9; color: #2563EB; border-color: rgba(37,99,235,.3); }

/* lista de configuração de cota por usuário (visão consumo) */
.pp-um-cfg-list { display: flex; flex-direction: column; gap: 8px; }
.pp-um-cfg-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border: 1px solid rgba(15,23,42,.08); border-radius: 12px; background: #fff;
}
.pp-um-cfg-row--full { border-color: rgba(220,38,38,.3); background: rgba(220,38,38,.03); }
.pp-um-cfg-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-um-cfg-nome { font-size: 14px; font-weight: 600; color: #0F172A; display: inline-flex; align-items: center; }
.pp-um-cfg-sub { font-size: 12px; color: #64748B; }
.pp-um-cfg-sub strong { color: #334155; }
.pp-um-cfg-cota { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pp-um-cfg-cota .form-control { width: 110px; height: 38px; text-align: center; }
.pp-um-cfg-unid { font-size: 12px; color: #94A3B8; font-weight: 600; white-space: nowrap; }
.pp-um-cfg-salvar { height: 38px; border-radius: 10px; font-weight: 700; font-size: 12.5px; padding: 6px 14px; }

/* barra de progresso de tokens do mês dentro da linha de config */
.pp-um-cfg-meter { display: flex; align-items: center; gap: 9px; margin-top: 3px; }
.pp-um-cfg-meter-bar { position: relative; flex: 1; max-width: 240px; height: 7px; border-radius: 99px; background: rgba(15,23,42,.08); overflow: hidden; }
.pp-um-cfg-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: #2563EB; transition: width .4s ease; }
.pp-um-cfg-meter-txt { font-size: 11.5px; font-weight: 600; color: #64748B; white-space: nowrap; }
.pp-um-cfg-meter.pp-um-cota--warn .pp-um-cfg-meter-fill { background: #D97706; }
.pp-um-cfg-meter.pp-um-cota--warn .pp-um-cfg-meter-txt { color: #B45309; }
.pp-um-cfg-meter.pp-um-cota--full .pp-um-cfg-meter-fill { background: #DC2626; }
.pp-um-cfg-meter.pp-um-cota--full .pp-um-cfg-meter-txt { color: #B91C1C; }
.pp-um-cfg-sub--periodo { color: #94A3B8; }

@media (max-width: 560px) {
    .pp-um-cfg-row { flex-wrap: wrap; }
    .pp-um-cfg-cota { width: 100%; justify-content: flex-end; }
}

@media (max-width: 560px) { .pp-um-kpis { grid-template-columns: 1fr 1fr; } }

@media (max-width: 560px) {
    .pp-um-grid, .pp-um-senha-grid { grid-template-columns: 1fr; }
    .pp-um-form-actions { margin-left: 0; width: 100%; justify-content: flex-end; }
    .pp-um-switches { gap: 14px; }
}

/* ---------------- formulários / modais ---------------- */
.pp-req { color: #DC2626; }
.pp-mb-3 { margin-bottom: 1rem; }
.pp-switches { display: flex; align-items: center; gap: 22px; padding-top: 30px; }
.pp-form-sub { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #64748B; margin-bottom: 10px; }
.pp-form-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }

/* ---------------- lista de usuários ---------------- */
.pp-users-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.pp-empty { color: #94A3B8; font-size: 13.5px; padding: 10px 2px; }
.pp-user-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border: 1px solid rgba(15,23,42,.08); border-radius: 11px; background: #F8FAFC;
}
.pp-user-info { display: flex; flex-direction: column; gap: 2px; }
.pp-user-nome { font-size: 14px; font-weight: 600; color: #0F172A; display: inline-flex; align-items: center; }
.pp-user-meta { font-size: 12.5px; color: #64748B; }
.pp-user-meta code { background: #EEF2F9; color: #1E40AF; padding: 1px 6px; border-radius: 5px; font-size: 11.5px; }
.pp-user-actions { display: flex; align-items: center; gap: 8px; }

/* stub de consumo (Fase 5) */
.pp-consumo-stub {
    display: flex; align-items: center; gap: 12px; margin-top: 18px;
    padding: 12px 14px; border: 1px dashed rgba(37,99,235,.35); border-radius: 12px;
    background: rgba(37,99,235,.04);
}
.pp-consumo-ico {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #2563EB; background: rgba(37,99,235,.1);
}
.pp-consumo-stub strong { display: block; font-size: 13.5px; color: #1E3A8A; }
.pp-consumo-stub span { font-size: 12.5px; color: #64748B; }

/* ---------------- abas (Clientes | Consumo) ---------------- */
.pp-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.pp-tab {
    border: 0; background: transparent; cursor: pointer;
    padding: 9px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 700;
    color: #64748B; transition: background .12s, color .12s;
}
.pp-tab:hover { background: rgba(37,99,235,.06); color: #1E3A8A; }
.pp-tab--on { background: #2563EB; color: #fff; }
.pp-tab--on:hover { background: #2563EB; color: #fff; }

/* ---------------- filtro de período (consumo) ---------------- */
.pp-filtros { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.pp-filtro-campo { display: flex; flex-direction: column; gap: 4px; }
.pp-filtro-campo label { font-size: 11.5px; font-weight: 700; color: #64748B; margin: 0; }
.pp-filtro-campo .form-control { min-width: 160px; }

/* ---------------- tabela de consumo ---------------- */
.pp-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pp-total td { border-top: 2px solid #CBD5E1; background: #F8FAFC; }

/* linha de cliente clicável (drill-down por usuário — Fase 5b) */
.pp-row-clic { cursor: pointer; transition: background .12s; }
.pp-row-clic:hover { background: rgba(37,99,235,.05); }
.pp-link-cliente {
    border: 0; background: transparent; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; color: #1E3A8A;
}
.pp-chevron { font-size: 10px; color: #94A3B8; }
.pp-row-clic:hover .pp-chevron { color: #2563EB; }

/* stub de consumo por usuário vira ação (abre o drill-down) */
.pp-consumo-stub--acao { cursor: pointer; justify-content: space-between; }
.pp-consumo-stub--acao:hover { background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.55); }

/* filtro de período dentro do modal */
.pp-filtros--modal { margin-bottom: 14px; }

/* tabela larga DENTRO de modal — container de rolagem genérico.
   `width:100%` na tabela não vence o min-content das células: com 4 colunas
   `.pp-num` (nowrap) e um e-mail longo na 1ª, a largura mínima passa do
   modal-lg. Sem isto o excedente era pintado FORA do card, sobre o backdrop. */
.pp-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pp-tablewrap .pp-table { margin-bottom: 0; }

#modal-consumo-usuario .modal-content { overflow: hidden; border-radius: 18px; }
#modal-consumo-usuario .modal-body { overflow-x: hidden; }

/* Larguras da tabela de drill-down.
   ⚠️ `overflow-wrap: anywhere` na CÉLULA inteira zera o min-content dela: a
   coluna colapsava e o NOME saía quebrado letra a letra ("Vascon / celos").
   A quebra agressiva vale só para o e-mail (palavra única e longa), e a
   coluna ganha um piso próprio — as 4 colunas de número são `nowrap` e, sem
   piso, tomam todo o espaço da coluna de texto. */
#modal-consumo-usuario .pp-table th:first-child,
#modal-consumo-usuario .pp-table td:first-child { min-width: 210px; }
#modal-consumo-usuario .pp-user-meta { overflow-wrap: anywhere; }
/* rótulo curto não deve quebrar em duas linhas por causa do uppercase */
#modal-consumo-usuario .pp-table th:nth-child(2),
#modal-consumo-usuario .pp-table td:nth-child(2) { min-width: 130px; }
/* alivia o uppercase + letter-spacing só aqui (cabeçalhos longos:
   "IDENTIFICADOR EXTERNO", "CUSTO ESTIMADO (USD)") */
#modal-consumo-usuario .pp-table thead th { letter-spacing: .2px; }
#modal-consumo-usuario .pp-table thead th.pp-num { min-width: 108px; }

/* ---------------- aba Agentes (padrão) — Fase 4c ---------------- */
/* Aviso de que a edição da árvore default reflete em todos os clientes.
   O org-chart/drawer em si reusa as classes ia-org-* /ia-ag-* do
   module/agentes/index.css (carregado junto pela rota /admin/parceiro). */
.pp-aviso-reflete {
    display: flex; align-items: flex-start; gap: 10px;
    background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E3A8A;
    border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
    font-size: 13px; line-height: 1.45;
}
.pp-aviso-reflete i { margin-top: 2px; color: #2563EB; }

/* ============================================================
   Gráfico de consumo por cliente — barras horizontais (SVG/CSS puro,
   sem biblioteca). Melhor forma de comparar uma métrica entre clientes.
   ============================================================ */
.pp-card.pp-grafico { padding: 18px 20px 20px; margin-bottom: 18px; }
/* vence o re-skin do embed (.pp-embed .pp-card usa padding menor) */
.pp-embed .pp-card.pp-grafico { padding: 18px 20px 20px; }
.pp-grafico-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pp-grafico-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 800; letter-spacing: -.2px; color: #0F172A; margin: 0 0 2px; }
.pp-grafico-sub { font-size: 12.5px; color: #64748B; }

/* seletor de métrica (segmented control) */
.pp-metricas { display: inline-flex; background: #EEF2F9; border-radius: 10px; padding: 3px; gap: 2px; }
.pp-metrica { border: 0; background: transparent; cursor: pointer; padding: 6px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 700; color: #64748B; font-family: inherit; transition: background .14s ease, color .14s ease; }
.pp-metrica:hover { color: #1E3A8A; }
.pp-metrica--on { background: #fff; color: #1E40AF; box-shadow: 0 2px 6px -2px rgba(15,23,42,.28); }

/* ---- Régua de indicadores (KPIs) do período ---- */
.pp-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px; margin-bottom: 18px;
}
.pp-kpi {
    background: #fff; border: 1px solid rgba(15,23,42,.07); border-radius: 16px;
    padding: 15px 16px; display: flex; flex-direction: column; gap: 3px;
    box-shadow: 0 10px 26px -22px rgba(15,23,42,.55);
}
.pp-kpi-lbl { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #94A3B8; }
/* Figuras proporcionais (não tabulares) — número grande com tabular-nums fica
   frouxo. tabular-nums fica só nas colunas da tabela. */
.pp-kpi-val { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.8px; color: #0F172A; line-height: 1.1; }
.pp-kpi-sub { font-size: 11.5px; color: #94A3B8; }
.pp-kpi--destaque { border-color: rgba(42,120,214,.28); background: linear-gradient(180deg, rgba(42,120,214,.06), #fff 60%); }
.pp-kpi--destaque .pp-kpi-val { color: #1c5cab; }

/* ---- Barras (ranking por métrica) ----
   UMA cor para todas: o que se compara aqui é grandeza, e o comprimento já
   diz isso. Cor por cliente entra só na barra de participação, onde ela
   carrega identidade. */
.pp-bars { display: flex; flex-direction: column; gap: 10px; }
.pp-bar-row { display: grid; grid-template-columns: 170px 1fr auto; align-items: center; gap: 14px; }
.pp-bar-nome { font-size: 13px; font-weight: 600; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-bar-track { position: relative; height: 18px; background: #EEF2F7; border-radius: 5px; }
.pp-bar-fill {
    position: absolute; left: 0; top: 0; bottom: 0; min-width: 3px;
    /* ponta arredondada, base quadrada (a barra nasce da linha de base) */
    border-radius: 0 4px 4px 0; background: #2a78d6;
    transition: width .55s cubic-bezier(.4, 0, .2, 1);
}
.pp-bar-row:hover .pp-bar-fill { background: #1c5cab; }
.pp-bar-val {
    font-size: 13px; font-weight: 700; color: #0F172A; font-variant-numeric: tabular-nums;
    white-space: nowrap; text-align: right; min-width: 108px;
    display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 7px;
}
.pp-bar-share { font-size: 11.5px; font-weight: 600; color: #94A3B8; }

/* ---- Participação no total (barra 100% empilhada) ---- */
.pp-share { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(15,23,42,.07); }
.pp-share-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.pp-share-titulo { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #94A3B8; }
.pp-share-total { font-size: 12.5px; font-weight: 700; color: #475569; font-variant-numeric: tabular-nums; }
/* O separador entre segmentos é uma FRESTA da superfície (2px), não um traço
   desenhado em volta de cada fatia. */
.pp-share-bar {
    display: flex; height: 22px; border-radius: 6px; overflow: hidden;
    background: #EEF2F7; gap: 2px;
}
.pp-share-seg { display: block; min-width: 2px; transition: width .55s cubic-bezier(.4, 0, .2, 1), filter .14s; }
.pp-share-seg:hover { filter: brightness(1.08); }
.pp-share-legend {
    list-style: none; margin: 12px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px 20px;
}
.pp-share-leg { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; min-width: 0; }
.pp-share-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pp-share-leg-nome { font-weight: 600; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.pp-share-leg-val { font-weight: 700; color: #0F172A; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .pp-bar-row { grid-template-columns: 96px 1fr auto; gap: 8px; }
    .pp-bar-nome { font-size: 12px; }
    .pp-bar-val { min-width: 86px; font-size: 12px; }
    .pp-kpi-val { font-size: 22px; }
}

/* ---- Atalhos de período na barra de filtros ---- */
.pp-presets { display: inline-flex; gap: 6px; margin-left: auto; align-self: flex-end; padding-bottom: 1px; }
.pp-preset {
    cursor: pointer; padding: 8px 13px; border-radius: 10px;
    border: 1px solid rgba(15,23,42,.1); background: #fff;
    font-family: inherit; font-size: 12.5px; font-weight: 600; color: #64748B;
    transition: background .14s, color .14s, border-color .14s;
}
.pp-preset:hover { background: #EEF2F9; color: #1E40AF; border-color: rgba(37,99,235,.3); }

@media (max-width: 640px) {
    .pp-presets { margin-left: 0; width: 100%; }
    .pp-preset { flex: 1; }
}

/* ============================================================
   Aba Agentes padrão — onboarding (hero) + nota-conceito.
   Um único destaque contextual no lugar de dois banners iguais.
   ============================================================ */
.pp-ag-hero {
    display: flex; align-items: stretch; gap: 20px;
    padding: 22px 24px; margin-bottom: 18px;
    border: 1px solid rgba(37,99,235,.16); border-radius: 18px;
    background: linear-gradient(135deg, #EFF4FF 0%, #F5F8FF 100%);
}
.pp-ag-hero-ico {
    width: 54px; height: 54px; flex-shrink: 0; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2563EB, #4F46E5); color: #fff; font-size: 23px;
    box-shadow: 0 12px 26px -12px rgba(37,99,235,.55);
}
.pp-ag-hero-body { flex: 1 1 340px; min-width: 0; }
.pp-ag-hero-body h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -.3px; color: #0F172A; margin: 2px 0 6px; }
.pp-ag-hero-body p { font-size: 13.5px; color: #475569; line-height: 1.55; margin: 0; max-width: 620px; }
.pp-ag-hero-steps {
    display: flex; flex-direction: column; justify-content: center; gap: 11px; flex-shrink: 0;
    padding-left: 20px; border-left: 1px solid rgba(37,99,235,.15);
}
.pp-ag-step { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: #334155; }
.pp-ag-step-n {
    width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: #2563EB; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 12px;
    box-shadow: 0 2px 6px -2px rgba(15,23,42,.3);
}

.pp-ag-nota {
    display: flex; align-items: flex-start; gap: 13px;
    padding: 14px 16px; margin-bottom: 18px;
    border: 1px solid rgba(37,99,235,.16); border-radius: 14px;
    background: linear-gradient(180deg, rgba(37,99,235,.05), rgba(37,99,235,.015));
}
.pp-ag-nota-ico {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #2563EB; color: #fff; font-size: 15px;
}
.pp-ag-nota strong { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13.5px; font-weight: 700; color: #0F172A; margin-bottom: 2px; }
.pp-ag-nota > div span { font-size: 12.5px; color: #475569; line-height: 1.5; }

@media (max-width: 720px) {
    .pp-ag-hero { flex-wrap: wrap; }
    .pp-ag-hero-steps { padding-left: 0; border-left: 0; border-top: 1px solid rgba(37,99,235,.15); padding-top: 14px; width: 100%; }
}

/* ---------------- responsivo ---------------- */
@media (max-width: 640px) {
    .pp-portal { position: absolute; }
    .pp-main { padding: 20px 14px 40px; }
    .pp-user-name { display: none; }
    .pp-switches { padding-top: 8px; }
    .pp-filtros { gap: 10px; }
}

/* =========================================================
   EMBED (sidebar) — re-skin para o tema IA "glass" (Experiência Unificada)
   As telas Consumo / Clientes / Estrutura ficam VISUALMENTE iguais às telas
   nativas do usuário (histórico/chat): mesmo respiro (.ia-screen), títulos
   (.ia-h1), cards de vidro e tabelas. Só vale no modo embed (.pp-embed) — o
   portal antigo (não-embed) continua com o visual próprio.
   Usa os tokens de ia.css (:root --ia-*).
   ========================================================= */
.pp-embed { background: var(--ia-bg); color: var(--ia-text); }

/* Área principal com o mesmo respiro das telas nativas (.ia-screen), não centralizada */
.pp-embed .pp-main { max-width: none; width: auto; margin: 0; padding: 42px 48px 56px; }

/* Cabeçalho / títulos no padrão .ia-h1 */
.pp-embed .pp-head  { margin-bottom: 24px; align-items: flex-end; }
.pp-embed .pp-title { font-size: 30px; letter-spacing: -.6px; color: var(--ia-text); }
.pp-embed .pp-lead  { font-size: 15px; color: var(--ia-text-3); }

/* Cards de vidro (igual .ia-hist-list) */
.pp-embed .pp-card {
    background: var(--ia-glass);
    border: 1px solid var(--ia-border);
    border-radius: 18px;
    box-shadow: 0 10px 30px -20px rgba(15, 23, 42, .25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 6px 20px 2px;
}
.pp-embed .pp-card.pp-filtros { padding: 18px 20px; }

/* Tabelas — divisórias leves + hover suave (padrão IA) */
.pp-embed .pp-table td { border-color: rgba(15, 23, 42, .05); }
.pp-embed .pp-table tbody tr { transition: background .14s ease; }
.pp-embed .pp-table tbody tr:hover { background: rgba(37, 99, 235, .04); }
.pp-embed .pp-total td { background: rgba(37, 99, 235, .04); border-top-color: rgba(15, 23, 42, .12); }

/* Inputs dos filtros no padrão IA (data/select) */
.pp-embed .pp-filtro-campo label { color: var(--ia-text-3); font-size: 12px; }
.pp-embed .pp-filtro-campo .form-control {
    height: 43px; border-radius: 12px; border: 1px solid var(--ia-border-2);
    background: rgba(255, 255, 255, .8); color: var(--ia-text); font-family: var(--ia-font-ui);
}
.pp-embed .pp-filtro-campo .form-control:focus {
    border-color: var(--ia-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* DataTables (tela Clientes) no tema IA — busca, seletor e paginação */
.pp-embed .dataTables_wrapper .dataTables_filter input,
.pp-embed .dataTables_wrapper .dataTables_length select {
    border-radius: 10px; border: 1px solid var(--ia-border-2);
    background: rgba(255, 255, 255, .8); padding: 6px 12px; outline: none;
    font-family: var(--ia-font-ui); color: var(--ia-text);
}
.pp-embed .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--ia-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.pp-embed .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 8px; }
.pp-embed .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.pp-embed .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--ia-primary) !important; border: 1px solid var(--ia-primary) !important; color: #fff !important;
}
.pp-embed .dataTables_wrapper .dataTables_info,
.pp-embed .dataTables_wrapper .dataTables_length,
.pp-embed .dataTables_wrapper .dataTables_filter { color: var(--ia-text-3); font-size: 13px; }

/* Cards de cliente no tema IA "glass" (embed na sidebar) */
.pp-embed .pp-cli-search input {
    background: rgba(255, 255, 255, .8); border: 1px solid var(--ia-border-2);
    color: var(--ia-text); border-radius: 12px;
}
.pp-embed .pp-cli-search input:focus { border-color: var(--ia-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.pp-embed .pp-cli-count { color: var(--ia-text-3); }
.pp-embed .pp-cli-card {
    background: var(--ia-glass);
    border: 1px solid var(--ia-border);
    box-shadow: 0 10px 30px -20px rgba(15, 23, 42, .25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.pp-embed .pp-cli-card:hover { border-color: rgba(37, 99, 235, .3); }
.pp-embed .pp-cli-nome { color: var(--ia-text); }
.pp-embed .pp-cli-meta-item dd { color: var(--ia-text-2, #334155); }
.pp-embed .pp-cli-empty {
    background: var(--ia-glass); border: 1px dashed var(--ia-border-2);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

/* =========================================================
   CREDENCIAIS DE SERVIÇO DO ERP (Vendedor-IA) — modal do cliente
   Os TRÊS estados de alerta têm cores próprias de propósito:
     amarelo = divergência de carteira (AVISA, não bloqueia)
     vermelho = revogada no ERP (parou de funcionar)
     cinza   = último erro registrado (informativo)
   Achatar num "erro" genérico apagaria a diferença que a tela existe
   para mostrar.
   ========================================================= */

/* Dois botões no rodapé do card de cliente (Usuários + Integração ERP) */
.pp-cli-btns { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp-cli-btn--erp { border-color: rgba(15,23,42,.12); background: #F8FAFC; color: #475569; }
.pp-cli-btn--erp:hover { background: #EEF2F9; border-color: rgba(37,99,235,.3); color: #1E40AF; }

.pp-badge--erro { background: rgba(220,38,38,.12); color: #B91C1C; }

/* ---- linha da credencial ---- */
.pp-cred-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 12px;
    border: 1px solid rgba(15,23,42,.09); background: #fff;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.pp-cred-item:hover { border-color: rgba(37,99,235,.28); box-shadow: 0 8px 22px -16px rgba(15,23,42,.4); }
.pp-cred-item--off { opacity: .64; }
.pp-cred-item--off:hover { opacity: 1; }
.pp-cred-item--revogada { border-color: rgba(220,38,38,.35); background: rgba(220,38,38,.03); }

.pp-cred-ico {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(37,99,235,.1); color: #1E40AF; font-size: 14px;
}
.pp-cred-ico--diverg { background: rgba(217,119,6,.12); color: #B45309; }
.pp-cred-ico--revogada { background: rgba(220,38,38,.12); color: #B91C1C; }

.pp-cred-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pp-cred-nome { font-size: 14px; font-weight: 600; color: #0F172A; display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pp-cred-meta { font-size: 12.5px; color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-cred-meta code { background: #F1F5F9; color: #1E40AF; padding: 1px 7px; border-radius: 6px; font-size: 12px; }
.pp-cred-meta i { font-size: 10.5px; margin-right: 3px; }
.pp-cred-meta--sec { font-size: 11.5px; color: #94A3B8; }
.pp-cred-meta--sec strong { color: #64748B; }
.pp-cred-sep { color: #CBD5E1; margin: 0 6px; }
/* Sem vínculo é um estado que pode PARAR o atendimento — não é um "—" qualquer. */
.pp-cred-semvinculo { color: #B45309; font-weight: 600; }

/* ---- cartões de estado ---- */
.pp-cred-alerta {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 13px; border-radius: 11px; font-size: 12.5px; line-height: 1.45;
}
.pp-cred-alerta > i { margin-top: 2px; font-size: 13px; flex-shrink: 0; }
.pp-cred-alerta > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-cred-alerta strong { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 700; }
.pp-cred-alerta-sub { opacity: .85; font-size: 11.5px; }
.pp-cred-alerta--topo { margin-bottom: 2px; }

.pp-cred-alerta--amarelo { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }
.pp-cred-alerta--amarelo > i { color: #D97706; }
.pp-cred-alerta--vermelho { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.pp-cred-alerta--vermelho > i { color: #DC2626; }
.pp-cred-alerta--cinza { background: #F8FAFC; border: 1px solid rgba(15,23,42,.1); color: #475569; }
.pp-cred-alerta--cinza > i { color: #94A3B8; }

/* ---- chips de vendedores ---- */
.pp-cred-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp-cred-chips--ro { margin-top: 4px; }
.pp-cred-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 6px 4px 10px; border-radius: 99px;
    background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.2);
    color: #1E40AF; font-size: 12px; font-weight: 600;
}
.pp-cred-chip button {
    border: 0; background: transparent; color: #1E40AF; opacity: .6;
    cursor: pointer; padding: 0 3px; font-size: 10px; line-height: 1;
}
.pp-cred-chip button:hover { opacity: 1; color: #DC2626; }
.pp-cred-chip--ro { padding: 4px 10px; background: #F1F5F9; border-color: rgba(15,23,42,.1); color: #475569; }
.pp-cred-chip--on { background: rgba(22,163,74,.1); border-color: rgba(22,163,74,.25); color: #15803D; }
.pp-cred-chip--ro i { font-size: 9.5px; }
.pp-cred-chip-input { max-width: 220px; height: 34px; font-size: 12.5px; }
.pp-cred-chip-add {
    width: 34px; height: 34px; border-radius: 9px;
    border: 1px solid rgba(37,99,235,.22); background: rgba(37,99,235,.06); color: #1E40AF;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.pp-cred-chip-add:hover { background: rgba(37,99,235,.12); }

/* O vínculo não é um campo opcional qualquer: é ele que evita o assistente
   operar a carteira de outro vendedor. Destacado no formulário. */
.pp-cred-vinculo {
    padding: 11px 13px; border-radius: 12px;
    background: rgba(37,99,235,.05); border: 1px solid rgba(37,99,235,.2);
}
.pp-cred-vinculo > label { color: #1E40AF; display: inline-flex; align-items: center; gap: 7px; }

/* ---- diagnóstico (após "Testar") ---- */
.pp-cred-diag {
    padding: 12px 14px; border-radius: 12px;
    background: #F8FAFC; border: 1px solid rgba(15,23,42,.09);
    display: flex; flex-direction: column; gap: 12px;
}
.pp-cred-diag-head { display: inline-flex; align-items: center; gap: 8px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 700; color: #334155; }
.pp-cred-diag-head i { color: #2563EB; }
.pp-cred-diag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pp-cred-diag-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #94A3B8; }
.pp-cred-diag-val { font-size: 12.5px; color: #475569; margin-top: 5px; }

#modal-credenciais .btn:focus, #modal-credenciais button:focus { outline: none; box-shadow: none; }

/* Mobile: mesmo respiro reduzido das telas nativas (.ia-screen) */
@media (max-width: 767.98px) {
    .pp-embed .pp-main { padding: 24px 18px 40px; }
    .pp-embed .pp-title { font-size: 24px; }
    .pp-cli-grid { grid-template-columns: 1fr; }
    .pp-cli-toolbar { flex-direction: column; align-items: stretch; }
    .pp-cli-search { max-width: none; }
    .pp-cli-actions { flex-direction: column; align-items: stretch; gap: 8px; }
    .pp-cli-btns { width: 100%; }
    .pp-cli-btns .pp-cli-btn { flex: 1; justify-content: center; }
    .pp-cred-item { flex-wrap: wrap; }
    .pp-cred-diag-grid { grid-template-columns: 1fr; }
    .pp-cred-chip-input { max-width: none; flex: 1; }
}