/*
 * Portal do representante (E08) — identidade da casa fora do painel
 * Filament: Inter, primária Amber, cinzas Slate, raio 0.5rem, borda
 * slate-200/80, alvo de toque ≥ 44px e corpo ≥ 15px (claude/
 * padrao-visual.md §1 e §9). Dark mode por prefers-color-scheme.
 */

:root {
    --vjp-fundo: #f8fafc;            /* slate-50 */
    --vjp-cartao: #ffffff;
    --vjp-texto: #0f172a;            /* slate-900 */
    --vjp-texto-suave: #475569;      /* slate-600 */
    --vjp-texto-mudo: #64748b;       /* slate-500 */
    --vjp-borda: rgba(226, 232, 240, 0.8);  /* slate-200/80 */
    --vjp-primaria: #d97706;         /* amber-600 */
    --vjp-primaria-forte: #b45309;   /* amber-700 */
    --vjp-primaria-suave: #fffbeb;   /* amber-50 */
    --vjp-primaria-texto: #92400e;   /* amber-800 */
    --vjp-sucesso: #059669;          /* emerald-600 */
    --vjp-sucesso-suave: #ecfdf5;    /* emerald-50 */
    --vjp-perigo: #e11d48;           /* rose-600 */
    --vjp-perigo-suave: #fff1f2;     /* rose-50 */
    --vjp-info: #0284c7;             /* sky-600 */
    --vjp-info-suave: #f0f9ff;       /* sky-50 */
    --vjp-neutro-suave: #f1f5f9;     /* slate-100 */
    --vjp-veu: rgba(15, 23, 42, 0.45);  /* PC05: fundo da gaveta da mesa (slate-900/45) */
    --vjp-nota-fundo: #f5f3ff;       /* PC06: nota do representante (violet-50) */
    --vjp-nota-borda: #c4b5fd;       /* PC06: violet-300 */
    --vjp-nota-icone: #7c3aed;       /* PC06: violet-600 */
    --vjp-raio: 0.5rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --vjp-fundo: #0f172a;        /* slate-900 */
        --vjp-cartao: #1e293b;       /* slate-800 */
        --vjp-texto: #f1f5f9;        /* slate-100 */
        --vjp-texto-suave: #cbd5e1;  /* slate-300 */
        --vjp-texto-mudo: #94a3b8;   /* slate-400 */
        --vjp-borda: rgba(51, 65, 85, 0.8);   /* slate-700/80 */
        --vjp-primaria: #f59e0b;     /* amber-500 */
        --vjp-primaria-forte: #d97706;
        --vjp-primaria-suave: rgba(245, 158, 11, 0.12);
        --vjp-primaria-texto: #fcd34d; /* amber-300 */
        --vjp-sucesso-suave: rgba(5, 150, 105, 0.15);
        --vjp-sucesso: #34d399;      /* emerald-400 */
        --vjp-perigo: #fb7185;       /* rose-400 */
        --vjp-perigo-suave: rgba(225, 29, 72, 0.15);
        --vjp-info: #38bdf8;         /* sky-400 */
        --vjp-info-suave: rgba(2, 132, 199, 0.15);
        --vjp-neutro-suave: #334155; /* slate-700 */
        --vjp-veu: rgba(2, 6, 23, 0.65);     /* PC05: slate-950/65 */
        --vjp-nota-fundo: rgba(139, 92, 246, 0.14);  /* PC06: violet-500/14 */
        --vjp-nota-borda: rgba(167, 139, 250, 0.45); /* PC06: violet-400/45 */
        --vjp-nota-icone: #a78bfa;                   /* PC06: violet-400 */
    }
}

* { box-sizing: border-box; }

html { background: var(--vjp-fundo); }

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--vjp-texto);
    background: var(--vjp-fundo);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--vjp-primaria-forte); }

.vjp-topo {
    background: var(--vjp-cartao);
    border-bottom: 1px solid var(--vjp-borda);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.vjp-marca {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    font-size: 1rem;
}

.vjp-marca-simbolo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--vjp-raio);
    background: var(--vjp-primaria);
    color: #ffffff;
    font-weight: 700;
}

.vjp-topo-usuario {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--vjp-texto-suave);
    font-size: 15px;
}

.vjp-nav {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem 0;
    max-width: 60rem;
    margin: 0 auto;
    width: 100%;
}

.vjp-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    border-radius: var(--vjp-raio);
    text-decoration: none;
    color: var(--vjp-texto-suave);
    font-weight: 500;
    border: 1px solid transparent;
}

.vjp-nav a.ativa {
    background: var(--vjp-cartao);
    border-color: var(--vjp-borda);
    color: var(--vjp-texto);
}

.vjp-conteudo {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1rem;
    width: 100%;
}

.vjp-cartao {
    background: var(--vjp-cartao);
    border: 1px solid var(--vjp-borda);
    border-radius: var(--vjp-raio);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.vjp-cartao h1,
.vjp-cartao h2 {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
}

.vjp-descricao {
    margin: 0 0 1rem;
    color: var(--vjp-texto-mudo);
    font-size: 15px;
}

/* Lista de itens (disponíveis, envios) */
.vjp-lista { list-style: none; margin: 0; padding: 0; }

.vjp-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.25rem;
    border-top: 1px solid var(--vjp-borda);
    flex-wrap: wrap;
}

.vjp-item:first-child { border-top: 0; }

.vjp-item-titulo { font-weight: 600; }

.vjp-item-sub { color: var(--vjp-texto-mudo); font-size: 15px; }

.vjp-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }

.vjp-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.vjp-badge-vip { background: var(--vjp-primaria-suave); color: var(--vjp-primaria-texto); }
.vjp-badge-sucesso { background: var(--vjp-sucesso-suave); color: var(--vjp-sucesso); }
.vjp-badge-perigo { background: var(--vjp-perigo-suave); color: var(--vjp-perigo); }
.vjp-badge-info { background: var(--vjp-info-suave); color: var(--vjp-info); }
.vjp-badge-neutro { background: var(--vjp-neutro-suave); color: var(--vjp-texto-suave); }

/* Estados vazios */
.vjp-vazio {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--vjp-texto-mudo);
}

.vjp-vazio strong { display: block; color: var(--vjp-texto); margin-bottom: 0.25rem; }

/* Formulários */
.vjp-campo { margin-bottom: 1rem; }

.vjp-campo label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.35rem;
}

.vjp-campo input {
    width: 100%;
    min-height: 44px;
    padding: 0 0.75rem;
    font-size: 15px;
    font-family: inherit;
    color: var(--vjp-texto);
    background: var(--vjp-cartao);
    border: 1px solid var(--vjp-borda);
    border-radius: var(--vjp-raio);
}

.vjp-campo input:focus {
    outline: 2px solid var(--vjp-primaria);
    outline-offset: 1px;
    border-color: var(--vjp-primaria);
}

.vjp-erro { color: var(--vjp-perigo); font-size: 15px; margin-top: 0.35rem; }

.vjp-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 1.25rem;
    border: 0;
    border-radius: var(--vjp-raio);
    background: var(--vjp-primaria);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.vjp-botao:hover { background: var(--vjp-primaria-forte); }

.vjp-botao-discreto {
    background: transparent;
    color: var(--vjp-texto-suave);
    border: 1px solid var(--vjp-borda);
}

.vjp-botao-discreto:hover { background: var(--vjp-neutro-suave); color: var(--vjp-texto); }

/* PR02 — portões: página neutra de bloqueio, faixa e página do modo restrito. */
.vjp-bloqueio h1 { margin-top: 0; }

.vjp-botao-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
    margin-top: 0.5rem;
}

.vjp-faixa-restrita {
    background: var(--vjp-info-suave);
    color: var(--vjp-texto);
    border-bottom: 1px solid var(--vjp-borda);
    padding: 0.75rem 1.5rem;
    font-size: 15px;
    line-height: 1.5;
}

.vjp-faixa-restrita a {
    color: var(--vjp-info);
    font-weight: 600;
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    margin-left: 0.5rem;
}

.vjp-restrito-colunas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.vjp-lista-simples {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.vjp-lista-simples li { min-height: 44px; display: flex; align-items: center; font-size: 15px; }
.vjp-lista-simples li::before { content: '•'; margin-right: 0.5rem; color: var(--vjp-texto-mudo); }
.vjp-lista-simples a { color: var(--vjp-primaria-texto); font-weight: 600; margin-right: 0.35rem; }

/* Login centralizado */
.vjp-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.vjp-login .vjp-cartao { width: 100%; max-width: 24rem; }

.vjp-login-marca { margin: 0 0 1rem; }

.vjp-botao-cheio { width: 100%; }

.vjp-rodape {
    text-align: center;
    color: var(--vjp-texto-mudo);
    font-size: 0.85rem;
    padding: 1rem;
}

@media (max-width: 480px) {
    .vjp-item { flex-direction: column; align-items: flex-start; }
}


/* RT03 — avatar de perfil no portal (a própria foto ou iniciais). */
.vj-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: #E2E8F0;
    color: #1E293B;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}

.vj-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vj-avatar--mini {
    width: 1.75rem;
    height: 1.75rem;
}

.vj-avatar--lg {
    width: 6rem;
    height: 6rem;
    font-size: 1.75rem;
}

.vj-avatar--c0 { background: #FDE68A; }
.vj-avatar--c1 { background: #BFDBFE; }
.vj-avatar--c2 { background: #BBF7D0; }
.vj-avatar--c3 { background: #FBCFE8; }
.vj-avatar--c4 { background: #DDD6FE; }
.vj-avatar--c5 { background: #FED7AA; }
.vj-avatar--c6 { background: #A5F3FC; }
.vj-avatar--c7 { background: #E2E8F0; }

.vjp-topo-avatar {
    display: inline-flex;
    text-decoration: none;
}

.vjp-perfil {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.vjp-perfil-dados {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.vjp-perfil-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.vjp-aviso {
    padding: 0.5rem 0.75rem;
    border-radius: var(--vjp-raio);
    font-size: 15px;
}

.vjp-aviso-ok {
    background: #DCFCE7;
    color: #14532D;
}

.vjp-aviso-erro {
    background: #FEE2E2;
    color: #7F1D1D;
}

/* RT16 (P165) — Avisos do portal: contador no menu, item lido/não lido, detalhe do rateio. */
.vjp-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    margin-left: 0.4rem;
    border-radius: 999px;
    background: var(--vjp-primaria);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.vjp-avisos-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.vjp-aviso-corpo { flex: 1 1 260px; min-width: 0; }

/* PR03/AW01 — porta do portal (código de acesso pelo WhatsApp) e "Meu aparelho" */
.vjp-porta { max-width: 26rem; }
.vjp-porta h1 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.vjp-porta h2, .vjp-cartao h2 { font-size: 1rem; margin: 1.25rem 0 0.5rem; color: var(--vjp-texto-suave); }
.vjp-porta-sair { margin-top: 1rem; text-align: center; }
.vjp-qr { display: flex; justify-content: center; margin: 0.75rem 0; }
.vjp-qr img { width: 200px; height: 200px; background: #ffffff; padding: 0.5rem; border-radius: var(--vjp-raio); border: 1px solid var(--vjp-borda); }
.vjp-codigo-campo {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.5rem;
    letter-spacing: 0.4em;
    text-align: center;
}
.vjp-codigo-reenviar { margin-top: 0.75rem; text-align: center; }
.vjp-codigo-reenviar .vjp-botao { width: 100%; }
.vjp-codigo-ajuda { margin-top: 0.75rem; text-align: center; }
.vjp-marcar { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 15px; margin: 0 0 1rem; line-height: 1.4; min-height: 44px; }
.vjp-marcar input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--vjp-primaria); flex: none; }
.vjp-botao-secundario { background: var(--vjp-neutro-suave); color: var(--vjp-texto); }
.vjp-descricao-mini { font-size: 0.875rem; color: var(--vjp-texto-mudo); }
.vjp-item form { margin-top: 0.35rem; }
.vjp-aviso a { color: inherit; font-weight: 600; margin-left: 0.35rem; }

/* ------------------------------------------------------------------ */
/* PR04 — layout base: menu lateral, cabeçalho, sino, marca d'água,    */
/* componentes base (tabela, número, faixa, vazio) e "Em breve".        */
/* ------------------------------------------------------------------ */
.vjp-marca { text-decoration: none; color: var(--vjp-texto); }
.vjp-topo-nome { font-weight: 500; color: var(--vjp-texto); }
.vjp-icone { width: 1.25rem; height: 1.25rem; flex: none; }

.vjp-estado-praca {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 32px;
    padding: 0 0.7rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}
.vjp-estado-praca::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: currentColor; }
.vjp-estado-aberta { background: var(--vjp-sucesso-suave); color: var(--vjp-sucesso); }
.vjp-estado-fechada { background: var(--vjp-info-suave); color: var(--vjp-info); }

.vjp-sino {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--vjp-raio);
    color: var(--vjp-texto-suave);
}
.vjp-sino:hover { background: var(--vjp-neutro-suave); color: var(--vjp-texto); }
.vjp-sino .vjp-icone { width: 1.5rem; height: 1.5rem; }
.vjp-sino .vjp-contador { position: absolute; top: 2px; right: 2px; margin: 0; }

.vjp-corpo {
    display: flex;
    gap: 1rem;
    max-width: 76rem;
    margin: 0 auto;
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
}
.vjp-lateral { flex: 0 0 15rem; }
.vjp-lateral-nav {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: var(--vjp-cartao);
    border: 1px solid var(--vjp-borda);
    border-radius: var(--vjp-raio);
    padding: 0.5rem;
}
.vjp-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0 0.75rem;
    border-radius: var(--vjp-raio);
    text-decoration: none;
    color: var(--vjp-texto-suave);
    font-weight: 500;
    font-size: 15px;
    border: 1px solid transparent;
}
.vjp-menu-item:hover { background: var(--vjp-neutro-suave); color: var(--vjp-texto); }
.vjp-menu-item.ativa { background: var(--vjp-primaria-suave); border-color: var(--vjp-borda); color: var(--vjp-primaria-texto); }
.vjp-menu-item.destaque { color: var(--vjp-texto); }
.vjp-menu-item > span { flex: 1 1 auto; }
.vjp-menu-item .vjp-contador { margin-left: auto; }
.vjp-menu-futuro { color: var(--vjp-texto-mudo); cursor: default; }
.vjp-menu-futuro:hover { background: transparent; color: var(--vjp-texto-mudo); }
.vjp-menu-futuro small { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }

.vjp-corpo .vjp-conteudo { flex: 1 1 auto; min-width: 0; padding: 0; max-width: none; margin: 0; }

/* Marca d'água (PR04-1): nome + hora, repetida em diagonal, sem interação. */
.vjp-marca-dagua {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-content: space-around;
    justify-items: center;
    gap: 3rem;
    transform: rotate(-24deg) scale(1.3);
    opacity: 0.08;
    color: var(--vjp-texto);
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
}

/* Filtro em pílulas (abas da ficha e afins; a central de notificações tem o seu, no bloco <npv>) */
.vjp-filtros { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1rem; }
.vjp-filtros a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--vjp-borda);
    color: var(--vjp-texto-suave);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}
.vjp-filtros a.ativa { background: var(--vjp-primaria-suave); color: var(--vjp-primaria-texto); border-color: var(--vjp-primaria); }
.vjp-item-sub .vjp-badge { margin-right: 0.4rem; }

/* Componentes base */
.vjp-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.vjp-numero {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: var(--vjp-cartao);
    border: 1px solid var(--vjp-borda);
    border-radius: var(--vjp-raio);
    padding: 1rem 1.25rem;
}
.vjp-numero-rotulo { font-size: 0.875rem; color: var(--vjp-texto-mudo); font-weight: 500; }
.vjp-numero-valor { font-size: 1.75rem; font-weight: 700; color: var(--vjp-texto); line-height: 1.2; }
.vjp-numero-sub { font-size: 15px; color: var(--vjp-texto-suave); }
.vjp-numero-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.vjp-faixa {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: var(--vjp-primaria-suave);
    border: 1px solid var(--vjp-borda);
    border-radius: var(--vjp-raio);
    padding: 1rem 1.25rem;
}
.vjp-faixa-rotulo { font-size: 0.875rem; color: var(--vjp-primaria-texto); font-weight: 600; }
.vjp-faixa-valores { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; font-size: 1.35rem; font-weight: 700; color: var(--vjp-texto); }
.vjp-faixa-ate-rotulo { font-size: 15px; font-weight: 500; color: var(--vjp-texto-mudo); }
.vjp-faixa-sub { font-size: 15px; color: var(--vjp-texto-suave); }
/* PR10 — previsão do ciclo: três faixas lado a lado (no 390 empilham). */
.vjp-faixas { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-bottom: 0.75rem; }
.vjp-previsao .vjp-faixa-valores { font-variant-numeric: tabular-nums; font-size: 1.15rem; }
.vjp-previsao .vjp-faixa-de, .vjp-previsao .vjp-faixa-ate { white-space: nowrap; }
.vjp-previsao-cega { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--vjp-borda); }

.vjp-tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vjp-tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.vjp-tabela caption { text-align: left; font-weight: 600; padding: 0 0 0.5rem; color: var(--vjp-texto-suave); }
.vjp-tabela th { text-align: left; font-weight: 600; font-size: 0.875rem; color: var(--vjp-texto-mudo); padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--vjp-borda); white-space: nowrap; }
.vjp-tabela td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--vjp-borda); min-height: 44px; }
.vjp-tabela tr:last-child td { border-bottom: 0; }
.vjp-vazio-historico { background: var(--vjp-neutro-suave); border-radius: var(--vjp-raio); }

.vjp-em-breve { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.vjp-em-breve li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem; border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); min-height: 44px; }
.vjp-em-breve .vjp-icone { color: var(--vjp-primaria); margin-top: 0.15rem; }

@media (max-width: 900px) {
    .vjp-corpo { flex-direction: column; padding: 0.75rem; }
    .vjp-lateral { flex: none; }
    .vjp-lateral-nav { position: static; flex-direction: row; overflow-x: auto; gap: 0.25rem; padding: 0.35rem; }
    .vjp-menu-item { flex: none; white-space: nowrap; }
    .vjp-menu-item .vjp-icone { display: none; }
    .vjp-topo-nome { display: none; }
    .vjp-estado-praca { font-size: 0.8rem; }
    .vjp-marca-dagua { grid-template-columns: repeat(2, 1fr); font-size: 0.8rem; }
}

@media (max-width: 480px) {
    /* PR04: em coluna, o flex-basis de 260px virava ALTURA fixa do corpo da notificação. */
    .vjp-aviso-corpo { flex-basis: auto; }
    .vjp-topo-usuario { flex-wrap: wrap; gap: 0.5rem; }
}

/* PR05 — carteira mascarada (P110): busca sem telefone, telefones por linha, revelar, limiar, motivo */
.vjp-oculto { display: none !important; }
.vjp-contador-dia { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; padding: 0 0.85rem; border-radius: 999px; border: 1px solid var(--vjp-borda); font-size: 15px; color: var(--vjp-texto-suave); white-space: nowrap; }
.vjp-contador-dia strong { color: var(--vjp-texto); }
.vjp-faixa-alerta { margin: 0 0 1rem; padding: 0.75rem 1rem; border-radius: var(--vjp-raio); background: var(--vjp-primaria-suave); color: var(--vjp-primaria-texto); border: 1px solid var(--vjp-primaria); font-size: 15px; }
.vjp-carteira-busca { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(9rem, 1fr) minmax(9rem, 1fr) auto auto; gap: 0.75rem; align-items: end; margin: 0 0 1rem; }
.vjp-carteira-busca .vjp-campo { margin: 0; }
.vjp-carteira-busca .vjp-campo span { display: block; font-size: 0.875rem; font-weight: 600; color: var(--vjp-texto-suave); margin-bottom: 0.3rem; }
.vjp-carteira-busca input, .vjp-carteira-busca select, .vjp-dialogo textarea {
    width: 100%;
    min-height: 44px;
    padding: 0.6rem 0.75rem;
    border-radius: var(--vjp-raio);
    border: 1px solid var(--vjp-borda);
    background: var(--vjp-cartao);
    color: var(--vjp-texto);
    font: inherit;
    font-size: 15px;
}
.vjp-carteira-busca input:focus, .vjp-carteira-busca select:focus, .vjp-dialogo textarea:focus { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; border-color: var(--vjp-primaria); }
.vjp-tabela-carteira td { vertical-align: top; padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--vjp-borda); font-size: 15px; }
.vjp-tabela-carteira .vjp-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vjp-telefones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.vjp-telefone { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; min-height: 44px; }
.vjp-telefone-rotulo { font-size: 0.8125rem; color: var(--vjp-texto-mudo); min-width: 5.5rem; }
.vjp-telefone-numero { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; white-space: nowrap; }
.vjp-telefone-numero[data-mascarado] { color: var(--vjp-texto-suave); }
.vjp-telefone-numero[data-revelado] a { font-weight: 600; color: var(--vjp-texto); text-decoration: none; border-bottom: 1px dashed var(--vjp-primaria); }
.vjp-revelar { min-height: 44px; padding: 0 0.85rem; }
.vjp-telefone-erro { flex-basis: 100%; font-size: 0.875rem; color: var(--vjp-perigo); }
.vjp-paginacao { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; }
.vjp-paginacao [aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.vjp-dialogo { border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); background: var(--vjp-cartao); color: var(--vjp-texto); padding: 1.25rem 1.5rem; width: min(32rem, calc(100vw - 2rem)); }
.vjp-dialogo::backdrop { background: rgba(15, 23, 42, 0.55); }
.vjp-dialogo h2 { margin: 0 0 0.5rem; font-size: 1.125rem; }
.vjp-dialogo .vjp-campo span { display: block; font-size: 0.875rem; font-weight: 600; color: var(--vjp-texto-suave); margin-bottom: 0.3rem; }
.vjp-dialogo-acoes { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; }
@media (max-width: 900px) {
    .vjp-carteira-busca { grid-template-columns: 1fr 1fr; }
    .vjp-carteira-busca .vjp-campo-busca { grid-column: 1 / -1; }
    .vjp-tabela-carteira thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .vjp-tabela-carteira tr { display: block; border-bottom: 1px solid var(--vjp-borda); padding: 0.5rem 0; }
    .vjp-tabela-carteira td { display: flex; gap: 0.75rem; border: 0; padding: 0.35rem 0; }
    .vjp-tabela-carteira td::before { content: attr(data-rotulo); flex: 0 0 7.5rem; font-size: 0.8125rem; color: var(--vjp-texto-mudo); padding-top: 0.15rem; }
    /* flex-basis em coluna vira ALTURA (PR04): o rótulo desta célula fica auto. */
    .vjp-tabela-carteira td[data-rotulo="Telefone"] { flex-direction: column; gap: 0.25rem; }
    .vjp-tabela-carteira td[data-rotulo="Telefone"]::before { flex: 0 0 auto; }
    .vjp-avisos-topo { flex-wrap: wrap; }
}

/* PR06 — ficha 360 da revendedora: abas, cadastro em duas colunas, alerta de queda */
.vjp-ficha-volta { margin: 0 0 0.5rem; font-size: 15px; }
.vjp-ficha-volta a { display: inline-flex; align-items: center; min-height: 44px; color: var(--vjp-primaria-texto); font-weight: 600; text-decoration: none; }
.vjp-ficha-topo .vjp-descricao { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.vjp-abas { margin: 0 0 1.25rem; }
.vjp-abas a { min-height: 44px; display: inline-flex; align-items: center; }
.vjp-ficha-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; }
.vjp-ficha-bloco h2 { margin: 0 0 0.6rem; font-size: 1.125rem; }
.vjp-ficha-dados { margin: 0; }
.vjp-ficha-dados > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.5rem; padding: 0.5rem 0; border-top: 1px solid var(--vjp-borda); min-height: 44px; align-items: start; }
.vjp-ficha-dados > div:first-child { border-top: 0; }
.vjp-ficha-dados dt { font-size: 0.875rem; font-weight: 600; color: var(--vjp-texto-suave); }
.vjp-ficha-dados dd { margin: 0; font-size: 15px; }
.vjp-ficha-queda strong { display: block; }
.vjp-tabela-ficha td { white-space: normal; }
@media (max-width: 480px) {
    .vjp-ficha-dados > div { grid-template-columns: 1fr; gap: 0.15rem; }
    .vjp-ficha-topo .vjp-contador-dia { white-space: normal; }
}
.vjp-ficha-link { color: var(--vjp-texto); text-decoration: none; border-bottom: 1px dashed var(--vjp-primaria); display: inline-flex; align-items: center; min-height: 44px; }

/* ─────────────────────────────────────────────────────────────────────
 * PR07 — "Minha praça": barra de progresso do mínimo, selo e as tabelas
 * do calendário/fechamentos. Nenhuma cor nova: tudo pelas variáveis
 * --vjp-* já definidas (padrao-visual.md §9).
 * ──────────────────────────────────────────────────────────────────── */

/* Valor em dinheiro do cartão do ciclo não quebra no meio ("R$" numa
   linha, o número noutra): fonte um ponto menor (ainda muito acima do
   corpo mínimo), tabular e sem quebra — os quatro cartões seguem numa
   linha só no 1440 e em coluna no 390. */
#vjp-ciclo .vjp-numero-valor {
    font-size: 1.5rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* A lista do selo é TEXTO CORRIDO, não linha de itens: a
   `.vjp-lista-simples` é flex e quebraria o nome do aparelho numa coluna
   estreita no 390. */
.vjp-selo-detalhes {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    line-height: 1.6;
}

.vjp-selo-detalhes li {
    font-size: 15px;
    padding: 0.35rem 0 0.35rem 1rem;
    color: var(--vjp-texto-suave);
    position: relative;
}

.vjp-selo-detalhes li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--vjp-texto-mudo);
}

.vjp-progresso {
    margin: 0.75rem 0 1rem;
}

.vjp-progresso-trilho {
    height: 0.75rem;
    border-radius: 999px;
    background: var(--vjp-neutro-suave);
    border: 1px solid var(--vjp-borda);
    overflow: hidden;
}

.vjp-progresso-feito {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--vjp-primaria);
    transition: width 0.2s ease-out;
}

.vjp-progresso .vjp-descricao-mini {
    margin-top: 0.4rem;
}

.vjp-selo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}

/* O calendário e os fechamentos herdam a tabela da carteira (no 390 viram
   cartões com rótulo por célula) e só ajustam a largura das colunas. */
.vjp-tabela-ciclo td .vjp-item-sub {
    display: block;
}

.vjp-linha-feriado td,
.vjp-linha-ajustada td {
    background: var(--vjp-primaria-suave);
}

@media (max-width: 900px) {
    .vjp-linha-feriado td,
    .vjp-linha-ajustada td {
        background: transparent;
    }

    .vjp-linha-feriado,
    .vjp-linha-ajustada {
        background: var(--vjp-primaria-suave);
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Observação tem badge + frase: em linha, o `flex-basis` do rótulo
       espreme os dois numa coluna estreita (mesma armadilha do Telefone,
       PR05). Em coluna, o rótulo volta a `auto`. */
    .vjp-tabela-ciclo td[data-rotulo="Observação"] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .vjp-tabela-ciclo td[data-rotulo="Observação"]::before {
        flex: 0 0 auto;
    }
}

/* PR08 — extrato por ciclo, PDF com hash, contestação e verificação pública */
.vjp-extrato-filtros { grid-template-columns: minmax(12rem, 2fr) minmax(10rem, 1.2fr) minmax(8rem, 1fr) minmax(8rem, 1fr) auto auto; }
.vjp-extrato-ciclo { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--vjp-borda); }
.vjp-extrato-ciclo:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.vjp-extrato-ciclo-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 0.75rem 1rem; margin: 0 0 0.75rem; }
.vjp-extrato-ciclo-topo h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0; }
.vjp-extrato-ciclo-topo h2 .vjp-item-sub { font-weight: 400; }
.vjp-extrato-pdf { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.vjp-hash { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; font-size: 0.8125rem; color: var(--vjp-texto-suave); }
.vjp-hash-rotulo { font-weight: 600; color: var(--vjp-texto-mudo); }
.vjp-hash code { font-size: 0.75rem; word-break: break-all; background: var(--vjp-neutro-suave); border-radius: 0.3rem; padding: 0.15rem 0.35rem; color: var(--vjp-texto); }
.vjp-hash a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--vjp-primaria-texto); }
.vjp-extrato-resumo { margin: 0 0 1rem; }
.vjp-extrato-resumo > div { grid-template-columns: 12rem 1fr; }
.vjp-extrato-resumo dd .vjp-item-sub { display: block; font-size: 0.8125rem; }
.vjp-extrato-repassar dd { font-size: 1.125rem; }
.vjp-extrato-repassar [data-cadeia-confere="0"] { color: var(--vjp-perigo); font-weight: 600; }
.vjp-tabela-extrato { table-layout: auto; }
.vjp-tabela-extrato td, .vjp-tabela-extrato th { padding-left: 0.5rem; padding-right: 0.5rem; }
.vjp-tabela-extrato td[data-rotulo="Lançamento"] { min-width: 10rem; font-size: 0.9375rem; }
.vjp-tabela-extrato .vjp-badge { font-size: 0.75rem; }
.vjp-tabela-extrato td[data-rotulo="Nº"] { padding-right: 0; }
.vjp-tabela-extrato .vjp-extrato-descricao { display: block; margin-top: 0.25rem; }
.vjp-tabela-extrato td[data-rotulo="Origem"] { min-width: 8.5rem; font-size: 0.9375rem; }
.vjp-tabela-extrato td[data-rotulo="Débito"], .vjp-tabela-extrato td[data-rotulo="Crédito"], .vjp-tabela-extrato td[data-rotulo="Saldo"] { text-align: right; }
.vjp-tabela-extrato th:nth-child(5), .vjp-tabela-extrato th:nth-child(6), .vjp-tabela-extrato th:nth-child(7) { text-align: right; }
.vjp-tabela-extrato .vjp-extrato-origem { font-weight: 600; display: block; }
.vjp-tabela-extrato td[data-rotulo="Origem"] .vjp-item-sub { display: block; font-size: 0.8125rem; }
.vjp-tabela-extrato td[data-rotulo="Ação"] { white-space: nowrap; }
.vjp-tabela-extrato .vjp-contestar { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 0.875rem; }
.vjp-contestacao-corpo { display: block; margin: 0.75rem 0; }
.vjp-contestacao-corpo span { display: block; font-size: 0.875rem; font-weight: 600; color: var(--vjp-texto-suave); margin-bottom: 0.3rem; }
.vjp-contestacao-corpo textarea { width: 100%; min-height: 12rem; padding: 0.6rem 0.75rem; border-radius: var(--vjp-raio); border: 1px solid var(--vjp-borda); background: var(--vjp-neutro-suave); color: var(--vjp-texto); font: inherit; font-size: 15px; resize: vertical; }
.vjp-contestacao-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0; }
.vjp-contestacao-acoes .vjp-botao[disabled] { opacity: 0.55; cursor: not-allowed; }
.vjp-verificar-form { display: grid; gap: 0.75rem; margin: 0 0 1rem; }
.vjp-verificar-form .vjp-campo span { display: block; font-size: 0.875rem; font-weight: 600; color: var(--vjp-texto-suave); margin-bottom: 0.3rem; }
.vjp-verificar-form input { width: 100%; min-height: 44px; padding: 0.6rem 0.75rem; border-radius: var(--vjp-raio); border: 1px solid var(--vjp-borda); background: var(--vjp-cartao); color: var(--vjp-texto); font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; }
.vjp-verificar-form input:focus { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; border-color: var(--vjp-primaria); }
.vjp-verificar-resultado { display: block; }
.vjp-verificar-resultado .vjp-ficha-dados { margin-top: 0.5rem; }
/* O aviso tem fundo claro nos dois temas: rótulos e nota herdam a cor do aviso, nunca a do tema. */
.vjp-verificar-resultado dt, .vjp-verificar-resultado dd, .vjp-verificar-resultado .vjp-descricao-mini { color: inherit; }
.vjp-verificar-resultado dt, .vjp-verificar-resultado .vjp-descricao-mini { opacity: 0.85; }
.vjp-verificar-resultado .vjp-ficha-dados > div { border-color: currentColor; opacity: 1; }
.vjp-verificar-resultado .vjp-ficha-dados > div { grid-template-columns: 7rem 1fr; }

@media (max-width: 900px) {
    .vjp-extrato-filtros { grid-template-columns: 1fr 1fr; }
    .vjp-extrato-filtros .vjp-campo:first-child { grid-column: 1 / -1; }
    .vjp-extrato-pdf { align-items: flex-start; }
    .vjp-extrato-resumo > div { grid-template-columns: 1fr; gap: 0.15rem; }
    /* Lançamento e Origem têm badge + frase: em coluna, o rótulo volta a `auto` (PR04/PR05). */
    .vjp-tabela-extrato td[data-rotulo="Lançamento"],
    .vjp-tabela-extrato td[data-rotulo="Origem"] { flex-direction: column; gap: 0.25rem; min-width: 0; }
    .vjp-tabela-extrato td[data-rotulo="Lançamento"]::before,
    .vjp-tabela-extrato td[data-rotulo="Origem"]::before { flex: 0 0 auto; }
    .vjp-tabela-extrato td[data-rotulo="Ação"]::before { content: ''; }
    /* Débito ou crédito vazio não vira linha "Débito —" no cartão. */
    .vjp-tabela-extrato td:empty { display: none; }
    .vjp-tabela-extrato td[data-rotulo="Débito"], .vjp-tabela-extrato td[data-rotulo="Crédito"], .vjp-tabela-extrato td[data-rotulo="Saldo"] { text-align: left; }
}

/* ---------------------------------------------------------------------
   PR09 — Suporte (tickets) e contestação
   --------------------------------------------------------------------- */
.vjp-tickets-lista .vjp-ticket-titulo { color: var(--vjp-texto); text-decoration: none; }
.vjp-tickets-lista .vjp-ticket-titulo:hover { text-decoration: underline; }
.vjp-ticket-item[data-status="aguardando"] { border-left: 4px solid var(--vjp-perigo); padding-left: 0.75rem; }
.vjp-ticket-form textarea, .vjp-ticket-form input[type="file"], .vjp-contestacao-corpo textarea {
    width: 100%;
    min-height: 44px;
    padding: 0.6rem 0.75rem;
    font-size: 15px;
    font-family: inherit;
    color: var(--vjp-texto);
    background: var(--vjp-superficie);
    border: 1px solid var(--vjp-borda);
    border-radius: 8px;
}
.vjp-ticket-form textarea:focus { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; border-color: var(--vjp-primaria); }
.vjp-filas { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; }
.vjp-filas legend { font-weight: 500; margin-bottom: 0.35rem; padding: 0; }
.vjp-fila-opcao {
    display: flex; gap: 0.75rem; align-items: flex-start;
    min-height: 44px; padding: 0.6rem 0.75rem;
    border: 1px solid var(--vjp-borda); border-radius: 8px; cursor: pointer;
}
.vjp-fila-opcao:has(input:checked) { border-color: var(--vjp-primaria); background: var(--vjp-info-suave); }
.vjp-fila-opcao input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; }
.vjp-fila-opcao strong { display: block; }
.vjp-ticket-sla { margin-bottom: 1rem; }
.vjp-mensagens { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.6rem; }
.vjp-mensagem { padding: 0.7rem 0.85rem; border-radius: 10px; border: 1px solid var(--vjp-borda); background: var(--vjp-superficie); }
.vjp-mensagem-rep { border-left: 4px solid var(--vjp-primaria); }
.vjp-mensagem-escritorio { border-left: 4px solid var(--vjp-sucesso); background: var(--vjp-neutro-suave); }
.vjp-mensagem-meta { display: block; font-size: 0.875rem; color: var(--vjp-texto-suave); margin-bottom: 0.25rem; }
.vjp-mensagem-texto { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.vjp-mensagem-anexo { display: inline-block; margin-top: 0.4rem; }
.vjp-contestacao-aberta { text-decoration: none; }
@media (max-width: 480px) {
    .vjp-ticket-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* ------------------------------------------------------------------ */
/* PR11 — Estoque em campo e conferência de kits em posse (P153)        */
/* ------------------------------------------------------------------ */
.vjp-estoque-filtros { grid-template-columns: minmax(12rem, 2fr) minmax(10rem, 1fr) minmax(10rem, 1fr) auto auto; }
.vjp-estoque-parados { background: var(--vjp-perigo-suave); border-color: var(--vjp-perigo); color: var(--vjp-texto); }
.vjp-estoque-parados strong { color: var(--vjp-perigo); }
.vjp-estoque-parados a { color: inherit; font-weight: 600; }
.vjp-estoque-parado { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vjp-tabela-estoque th, .vjp-tabela-estoque td { white-space: normal; }
.vjp-tabela-estoque .vjp-badge { margin-top: 0.25rem; }
.vjp-tabela-estoque .vjp-estoque-conferir { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.15rem; white-space: nowrap; font-weight: 600; }
.vjp-tabela-estoque .vjp-badge { white-space: normal; }
.vjp-linha-parada td { background: var(--vjp-perigo-suave); }
.vjp-oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.vjp-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.vjp-checklist-item { border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); padding: 0.85rem 1rem; background: var(--vjp-superficie); }
.vjp-checklist-item.vjp-linha-parada { background: var(--vjp-perigo-suave); }
.vjp-checklist-focado { border-color: var(--vjp-primaria); box-shadow: 0 0 0 3px var(--vjp-primaria-suave); }
.vjp-checklist-cabeca { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap; }
.vjp-checklist-cabeca .vjp-badge { margin-left: 0.4rem; vertical-align: middle; }
.vjp-checklist-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
.vjp-checklist-estado .vjp-badge { margin-left: 0; }
.vjp-conferencia-em-curso { margin: 0.6rem 0 0; }
.vjp-conferencia-form { margin-top: 0.75rem; display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(16rem, 2fr) auto; gap: 0.75rem; align-items: start; }
.vjp-conferencia-opcoes { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.vjp-conferencia-opcao { min-height: 44px; }
.vjp-conferencia-observacao { margin: 0; }
.vjp-conferencia-observacao textarea { width: 100%; min-height: 44px; border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); padding: 0.55rem 0.7rem; font: inherit; color: inherit; background: var(--vjp-cartao); resize: vertical; }
.vjp-conferencia-observacao textarea:focus { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; }
.vjp-conferencia-acoes { margin: 0; align-self: end; }
.vjp-conferencia-acoes .vjp-botao { min-height: 44px; }

@media (max-width: 900px) {
    .vjp-estoque-filtros { grid-template-columns: 1fr 1fr; }
    .vjp-estoque-filtros .vjp-campo:first-child { grid-column: 1 / -1; }
    .vjp-linha-parada td { background: transparent; }
    .vjp-linha-parada { background: var(--vjp-perigo-suave); padding-left: 0.5rem; padding-right: 0.5rem; }
    .vjp-tabela-estoque td[data-rotulo="Kit"],
    .vjp-tabela-estoque td[data-rotulo="Onde está"],
    .vjp-tabela-estoque td[data-rotulo="Idade"],
    .vjp-tabela-estoque td[data-rotulo="Última conferência"] { flex-direction: column; }
    .vjp-tabela-estoque td[data-rotulo="Kit"]::before,
    .vjp-tabela-estoque td[data-rotulo="Onde está"]::before,
    .vjp-tabela-estoque td[data-rotulo="Idade"]::before,
    .vjp-tabela-estoque td[data-rotulo="Última conferência"]::before { flex: 0 0 auto; }
    .vjp-conferencia-form { grid-template-columns: 1fr; }
    .vjp-checklist-estado { align-items: flex-start; }
}

/* ------------------------------------------------------------------ */
/* PR12 — Solicitações de remessa e devolução (P120)                   */
/* ------------------------------------------------------------------ */
.vjp-solicitacoes-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.vjp-solicitacoes-acoes .vjp-botao { min-height: 44px; }
.vjp-solicitacoes-restrito { align-self: center; }
.vjp-tabela-solicitacoes th, .vjp-tabela-solicitacoes td { white-space: normal; }
.vjp-tabela-solicitacoes .vjp-badge { margin-right: 0.35rem; vertical-align: middle; }
.vjp-tabela-solicitacoes .vjp-solicitacao-ver { min-height: 44px; margin-top: 0; padding: 0 0.75rem; font-weight: 600; white-space: nowrap; color: var(--vjp-primaria-texto); border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); }
.vjp-solicitacao-remessa { white-space: nowrap; }
.vjp-solicitacao h2, .vjp-solicitacao-form h2 { font-size: 1.05rem; margin: 1rem 0 0.5rem; }
.vjp-solicitacao .vjp-ficha-colunas { margin-top: 0.5rem; }
.vjp-solicitacao .vjp-ficha-dados dd .vjp-badge { margin-right: 0.3rem; margin-bottom: 0.3rem; }
.vjp-rastreio { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed var(--vjp-borda); }
.vjp-solicitacao-selects { grid-template-columns: 1fr 1fr; margin-bottom: 1rem; }
.vjp-solicitacao-form .vjp-campo input[type="number"] { max-width: 10rem; }
.vjp-devolucao-kits { margin-bottom: 1rem; }
.vjp-devolucao-kit .vjp-badge { margin-left: 0.35rem; vertical-align: middle; }
.vjp-devolucao-kit .vjp-item-sub { display: block; }
.vjp-devolucao-kit-pedido { opacity: 0.65; }
.vjp-devolucao-kit-pedido a { color: var(--vjp-primaria-texto); font-weight: 600; }

@media (max-width: 900px) {
    .vjp-solicitacao-selects { grid-template-columns: 1fr; }
    .vjp-tabela-solicitacoes td[data-rotulo="Pedido"],
    .vjp-tabela-solicitacoes td[data-rotulo="Situação"],
    .vjp-tabela-solicitacoes td[data-rotulo="Rastreio"] { flex-direction: column; }
    .vjp-tabela-solicitacoes td[data-rotulo="Pedido"]::before,
    .vjp-tabela-solicitacoes td[data-rotulo="Situação"]::before,
    .vjp-tabela-solicitacoes td[data-rotulo="Rastreio"]::before { flex: 0 0 auto; }
    .vjp-tabela-solicitacoes td[data-rotulo=""]::before { content: none; }
}

/* ------------------------------------------------------------------ */
/* PR13 — Indicações e pré-cadastro (P2 · ex-P16 · P78/P91)             */
/* ------------------------------------------------------------------ */
.vjp-indicacoes h2 { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; }
.vjp-indicacoes a.vjp-botao, .vjp-pre-cadastro a.vjp-botao { text-decoration: none; }
.vjp-tabela-indicacoes td[data-rotulo="Cliente"] { min-width: 11rem; }
.vjp-indicacoes .vjp-numeros { margin-top: 0.5rem; }
.vjp-indicacoes-busca { grid-template-columns: minmax(12rem, 1fr) auto; }
.vjp-indicacoes-busca .vjp-botao { min-height: 44px; }
.vjp-tabela-indicacoes th, .vjp-tabela-indicacoes td { white-space: normal; }
.vjp-tabela-indicacoes .vjp-badge { margin-right: 0.35rem; margin-bottom: 0.2rem; vertical-align: middle; }
.vjp-tabela-indicacoes .vjp-num { white-space: nowrap; }
.vjp-tabela-indicacoes .vjp-telefone-numero { font-variant-numeric: tabular-nums; }
.vjp-prazo-curto { color: var(--vjp-perigo); }
.vjp-indicacoes-aceitar-form { margin: 0; }
.vjp-indicacoes-aceitar { min-height: 44px; padding: 0 0.9rem; white-space: nowrap; }
.vjp-indicacoes-aceitar:disabled { opacity: 0.55; cursor: not-allowed; }
.vjp-indicacoes-devolver { min-height: 44px; margin-top: 0; padding: 0 0.75rem; font-weight: 600; white-space: nowrap; color: var(--vjp-primaria-texto); background: transparent; border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); cursor: pointer; font: inherit; font-weight: 600; }
.vjp-indicacoes-enviadas { margin-top: 0.5rem; }
.vjp-dialogo select { width: 100%; min-height: 44px; padding: 0 0.75rem; font-size: 15px; font-family: inherit; color: var(--vjp-texto); background: var(--vjp-cartao); border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); }
.vjp-dialogo select:focus { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; border-color: var(--vjp-primaria); }
.vjp-dialogo .vjp-campo small { font-weight: 400; }
.vjp-pre-cadastro-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
.vjp-pre-cadastro-grade .vjp-campo-largo { grid-column: 1 / -1; }
.vjp-pre-cadastro-grade label small { font-weight: 400; color: var(--vjp-texto-suave); }
.vjp-pre-cadastro-form .vjp-campo input[type="date"] { min-height: 44px; }
.vjp-pre-cadastro-termo { margin-top: 0.5rem; }
.vjp-termo { max-height: 12rem; overflow: auto; padding: 0.75rem 0.9rem; border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); background: var(--vjp-superficie); white-space: pre-wrap; font-size: 15px; line-height: 1.5; }
.vjp-termo:focus { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; }
.vjp-pre-cadastro-termo .vjp-fila-opcao .vjp-item-sub { display: block; }

@media (max-width: 900px) {
    .vjp-indicacoes-busca { grid-template-columns: 1fr; }
    .vjp-pre-cadastro-grade { grid-template-columns: 1fr; }
    .vjp-tabela-indicacoes td[data-rotulo="Cliente"],
    .vjp-tabela-indicacoes td[data-rotulo="Cidade · bairro"],
    .vjp-tabela-indicacoes td[data-rotulo="Telefone"],
    .vjp-tabela-indicacoes td[data-rotulo="Prazo"],
    .vjp-tabela-indicacoes td[data-rotulo="Situação"] { flex-direction: column; }
    .vjp-tabela-indicacoes td[data-rotulo="Cliente"]::before,
    .vjp-tabela-indicacoes td[data-rotulo="Cidade · bairro"]::before,
    .vjp-tabela-indicacoes td[data-rotulo="Telefone"]::before,
    .vjp-tabela-indicacoes td[data-rotulo="Prazo"]::before,
    .vjp-tabela-indicacoes td[data-rotulo="Situação"]::before { flex: 0 0 auto; }
    .vjp-tabela-indicacoes td[data-rotulo=""]::before { content: none; }
}

/* ------------------------------------------------------------------ */
/* PR14 — Rota do dia (P108 · P115–P117 · P149/P166)                     */
/* ------------------------------------------------------------------ */
.vjp-rota-filtros { grid-template-columns: minmax(10rem, 14rem) minmax(10rem, 14rem) auto; align-items: end; }
.vjp-rota-filtros .vjp-botao { min-height: 44px; }
.vjp-rota-filtros .vjp-campo select, .vjp-rota-filtros .vjp-campo input[type="date"] { width: 100%; min-height: 44px; padding: 0 0.75rem; font-size: 15px; font-family: inherit; color: var(--vjp-texto); background: var(--vjp-cartao); border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); }
.vjp-rota-filtros .vjp-campo select:focus, .vjp-rota-filtros .vjp-campo input[type="date"]:focus { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; border-color: var(--vjp-primaria); }
.vjp-rota-sem-ponto { background: var(--vjp-perigo-suave); color: var(--vjp-perigo); border-left: 3px solid var(--vjp-perigo); }
.vjp-rota-lista { counter-reset: parada; margin-top: 0.5rem; }
.vjp-rota-parada { transition: box-shadow 120ms ease; }
.vjp-rota-parada[draggable="true"] { cursor: grab; }
.vjp-rota-parada.vjp-rota-arrastando { opacity: 0.5; cursor: grabbing; }
.vjp-rota-parada-sem-ponto { border-style: dashed; }
.vjp-rota-parada-corpo { display: flex; gap: 0.75rem; align-items: flex-start; min-width: 0; flex: 1 1 18rem; }
.vjp-rota-numero { flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--vjp-primaria-suave); color: var(--vjp-primaria-texto); font-weight: 700; font-variant-numeric: tabular-nums; }
.vjp-rota-badges { margin-top: 0.4rem; }
.vjp-rota-badges .vjp-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vjp-rota-estado { align-items: flex-end; text-align: right; gap: 0.3rem; }
.vjp-rota-mover { display: inline-flex; gap: 0.25rem; margin-top: 0.25rem; }
.vjp-rota-mover .vjp-botao { min-width: 44px; min-height: 44px; padding: 0; font-size: 0.8rem; line-height: 1; }
.vjp-rota-mover .vjp-botao:disabled { opacity: 0.35; cursor: not-allowed; }
.vjp-rota-desfecho { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--vjp-borda); }
.vjp-rota-desfecho .vjp-botao { min-height: 44px; }
.vjp-rota-desfecho .vjp-aviso { flex: 1 1 100%; margin: 0; }
.vjp-rota-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.vjp-rota-acoes .vjp-botao { min-height: 44px; }
.vjp-rota-form-oculto { display: none; }
.vjp-visivel-so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vjp-dialogo textarea { width: 100%; min-height: 4.5rem; padding: 0.6rem 0.75rem; font-size: 15px; font-family: inherit; color: var(--vjp-texto); background: var(--vjp-cartao); border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); resize: vertical; }
.vjp-dialogo textarea:focus { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; border-color: var(--vjp-primaria); }

@media (max-width: 900px) {
    .vjp-rota-filtros { grid-template-columns: 1fr 1fr; }
    .vjp-rota-filtros .vjp-botao { grid-column: 1 / -1; }
    .vjp-rota-estado { align-items: flex-start; text-align: left; }
    .vjp-rota-parada .vjp-checklist-cabeca { flex-direction: column; }
    /* Em coluna, o flex-basis de 18rem viraria ALTURA (armadilha da PR05). */
    .vjp-rota-parada-corpo { flex-basis: auto; }
}

/* PR16 — "O que fazer hoje": cabeçalho do dia, grupos com contador, item com "Dispensar por hoje", dia limpo, em breve. */
.vjp-hoje-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vjp-hoje-topo h1 { margin-bottom: 0.25rem; }
.vjp-hoje-topo .vjp-descricao { margin: 0; }
a.vjp-hoje-roteiro { text-decoration: none; white-space: nowrap; }
.vjp-hoje-grupo-titulo { display: flex; align-items: center; gap: 0.5rem; }
.vjp-hoje-contador { position: static; }
.vjp-hoje-item { align-items: flex-start; border-left: 3px solid transparent; padding-left: 0.6rem; }
.vjp-hoje-item-corpo { flex: 1 1 18rem; min-width: 0; }
.vjp-hoje-item .vjp-item-sub { display: inline-block; margin-top: 0.15rem; }
.vjp-hoje-tom-atencao { border-left-color: var(--vjp-primaria); }
.vjp-hoje-tom-perigo { border-left-color: var(--vjp-perigo); }
.vjp-hoje-dispensar-form { margin: 0; flex: 0 0 auto; }
.vjp-hoje-dispensar { white-space: nowrap; }
.vjp-hoje-item-dispensado { opacity: 0.65; }
.vjp-hoje-limpo .vjp-vazio { margin: 0; }
.vjp-hoje-em-breve { margin: 0 0 1rem; display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 480px) {
    .vjp-hoje-item { flex-direction: column; align-items: stretch; }
    .vjp-hoje-item-corpo { flex-basis: auto; } /* em coluna, flex-basis vira altura (armadilha PR05) */
    .vjp-hoje-dispensar-form { width: 100%; }
    .vjp-hoje-dispensar { width: 100%; }
    a.vjp-hoje-roteiro { width: 100%; }
}

/* PR17 — Apoio: documentos com vencimento, Central de Apps, trilha dos 30 dias, saúde da carteira. */
.vjp-documentos-enviar select, .vjp-documentos-enviar input[type="date"], .vjp-documentos-enviar input[type="text"] { width: 100%; min-height: 44px; }
.vjp-tabela-documentos td[data-rotulo="Renovação"] .vjp-botao { white-space: nowrap; }
.vjp-apps-app h2 { margin-bottom: 0.5rem; }
.vjp-apps-changelog-titulo { font-size: 0.95rem; margin: 1rem 0 0.35rem; }
.vjp-apps-changelog { white-space: pre-line; margin: 0 0 0.5rem; }
.vjp-apps-baixar { margin: 0.75rem 0 0; }
.vjp-apps-baixar .vjp-botao { min-height: 44px; }
.vjp-trilha-passos { counter-reset: passo; }
.vjp-trilha-passo.vjp-trilha-concluido { border-left: 3px solid var(--vjp-sucesso, var(--vjp-primaria)); opacity: 0.85; }
.vjp-trilha-passo.vjp-trilha-atrasado { border-left: 3px solid var(--vjp-perigo); }
.vjp-trilha-passo.vjp-trilha-pendente { border-left: 3px solid var(--vjp-borda); }
.vjp-trilha-passo form { margin: 0; }
.vjp-trilha-passo .vjp-botao { min-height: 44px; white-space: nowrap; }
.vjp-saude { margin-top: 1.5rem; }
@media (max-width: 480px) {
    .vjp-apps-baixar .vjp-botao { width: 100%; }
    .vjp-trilha-passo .vjp-checklist-cabeca { flex-direction: column; }
    .vjp-trilha-passo .vjp-botao { width: 100%; }
}

/* PC01 — Conversas (espelho do app CRM): lista + linha do tempo + resposta. Só tokens --vjp-*. */
.vjp-conversas-lista .vjp-conversa-item { align-items: center; }
.vjp-conversa-nome { color: var(--vjp-texto); text-decoration: none; margin-right: 0.5rem; }
.vjp-conversa-nome:hover { text-decoration: underline; }
.vjp-conversa-nao-lida .vjp-conversa-nome { font-weight: 700; }
.vjp-conversa-telefone-lista { font-size: 0.875rem; }
/* Prévia em até DUAS linhas que quebram: `nowrap` forçava a largura mínima e empurrava o 390 para o lado. */
.vjp-conversa-item .vjp-aviso-corpo { max-width: 100%; }
.vjp-conversa-previa { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; margin: 0.15rem 0; }
.vjp-conversa-previa-autor { font-weight: 600; color: var(--vjp-texto-suave); }
.vjp-conversa-marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.vjp-conversa-cabeca { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; margin: 0.25rem 0 0; }
.vjp-conversa-telefone { margin: 0.5rem 0 0; }
.vjp-conversa-anteriores { margin: 0 0 0.75rem; }
.vjp-linha-do-tempo { max-width: 52rem; }
.vjp-conversa-msg { background: var(--vjp-cartao); }
.vjp-conversa-entrada { margin-right: 12%; border-left: 4px solid var(--vjp-info); }
.vjp-conversa-saida { margin-left: 12%; border-left: 4px solid var(--vjp-primaria); background: var(--vjp-primaria-suave); }
.vjp-conversa-saida.vjp-conversa-autor-escritorio { border-left-color: var(--vjp-sucesso); background: var(--vjp-neutro-suave); }
.vjp-conversa-saida.vjp-conversa-autor-vi,
.vjp-conversa-saida.vjp-conversa-autor-automatica { border-left-color: var(--vjp-texto-mudo); background: var(--vjp-neutro-suave); }
.vjp-conversa-midia { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; }
.vjp-conversa-status { font-weight: 600; }
.vjp-conversa-status[data-status="falhou"] { color: var(--vjp-perigo); }
.vjp-conversa-status[data-status="lida"] { color: var(--vjp-sucesso); }
.vjp-conversa-form { max-width: 52rem; margin-top: 1rem; }
.vjp-conversa-enviar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.vjp-conversa-enviar .vjp-botao { min-height: 44px; }
@media (max-width: 480px) {
    .vjp-conversas-lista .vjp-conversa-item { align-items: stretch; }
    .vjp-conversa-entrada, .vjp-conversa-saida { margin-left: 0; margin-right: 0; }
    .vjp-conversa-enviar { flex-direction: column; align-items: stretch; }
    .vjp-conversa-enviar .vjp-botao { width: 100%; }
}

/* PC02 — Meu número: sessão, saúde (C18) e o QR do repareamento. O quadro do QR reusa `.vjp-qr` (PR03: fundo branco nos dois temas — a câmera lê QR escuro sobre claro). */
.vjp-numero-canal + .vjp-numero-canal { border-top: 1px solid var(--vjp-borda); margin-top: 1.25rem; padding-top: 1.25rem; }
.vjp-numero-canal-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; }
.vjp-numero-canal-topo h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; margin: 0; font-size: 1.1rem; color: var(--vjp-texto); }
.vjp-numero-canal h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; color: var(--vjp-texto-suave); }
.vjp-pareamento { margin: 0.75rem 0; }
.vjp-pareamento .vjp-qr { justify-content: flex-start; }
.vjp-pareamento .vjp-qr img { width: 256px; height: 256px; max-width: 100%; }
.vjp-pareamento-mensagem { margin: 0.5rem 0 0.25rem; font-weight: 600; overflow-wrap: anywhere; }
.vjp-pareamento-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.vjp-pareamento-acoes .vjp-botao { min-height: 44px; }
.vjp-pareamento-acoes .vjp-botao:disabled { opacity: 0.55; cursor: not-allowed; }
.vjp-numero-eventos .vjp-item { gap: 0.25rem 1rem; }
@media (max-width: 480px) {
    .vjp-pareamento .vjp-qr { justify-content: center; }
    .vjp-pareamento-acoes { flex-direction: column; align-items: stretch; }
    .vjp-pareamento-acoes .vjp-botao { width: 100%; }
}

/* PR20 — Agenda: dia / semana / mês. Três camadas por dia — fato do sistema
   (derivado), praça (fechamento, abertura, próxima data) e pessoal —, mais
   feriado e ajuste pintados. Cor por camada na borda esquerda do evento. */
.vjp-agenda-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vjp-agenda-topo h1 { margin-bottom: 0.25rem; }
.vjp-agenda-topo .vjp-descricao { margin: 0; max-width: 46rem; }
.vjp-agenda-topo a.vjp-botao, .vjp-agenda-passos a.vjp-botao { text-decoration: none; }
.vjp-agenda-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.vjp-agenda-nav .vjp-filtros { margin: 0; }
.vjp-agenda-passos { display: flex; gap: 0.35rem; }
.vjp-agenda-passos .vjp-botao { padding: 0 0.9rem; text-decoration: none; }
.vjp-agenda-passo-off { opacity: 0.4; cursor: not-allowed; }
.vjp-agenda-titulo { margin: 0; font-size: 1.1rem; flex: 1 1 auto; text-align: right; }
.vjp-agenda-legenda { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; margin: 0 0 1rem; font-size: 0.875rem; color: var(--vjp-texto-suave); }
.vjp-agenda-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--vjp-neutro-suave); border-left: 4px solid var(--vjp-borda); }
.vjp-agenda-horizonte { margin-left: auto; color: var(--vjp-texto-mudo); }
.vjp-agenda-camada-derivado { border-left-color: var(--vjp-info); }
.vjp-agenda-camada-praca { border-left-color: var(--vjp-primaria); }
.vjp-agenda-camada-pessoal { border-left-color: var(--vjp-sucesso); }
.vjp-agenda-chip-feriado { background: var(--vjp-perigo-suave); color: var(--vjp-perigo); border-left-color: var(--vjp-perigo); }
.vjp-agenda-chip-ajuste { background: var(--vjp-primaria-suave); color: var(--vjp-primaria-texto); border-left-color: var(--vjp-primaria); }

.vjp-agenda-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.vjp-agenda-evento {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-height: 44px;
    justify-content: center;
    padding: 0.35rem 0.6rem;
    border-left: 4px solid var(--vjp-borda);
    border-radius: 0.35rem;
    background: var(--vjp-neutro-suave);
    overflow-wrap: break-word;
    hyphens: auto;
}
/* Cor da camada DEPOIS da borda do evento (mesma especificidade: a ordem decide). */
.vjp-agenda-evento.vjp-agenda-camada-derivado { border-left-color: var(--vjp-info); }
.vjp-agenda-evento.vjp-agenda-camada-praca { border-left-color: var(--vjp-primaria); }
.vjp-agenda-evento.vjp-agenda-camada-pessoal { border-left-color: var(--vjp-sucesso); }
.vjp-agenda-evento a { color: var(--vjp-texto); text-decoration: none; font-weight: 600; }
.vjp-agenda-evento a:hover { text-decoration: underline; }
.vjp-agenda-evento-titulo { font-size: 0.9375rem; line-height: 1.35; }
.vjp-agenda-evento-detalhe { font-size: 0.875rem; color: var(--vjp-texto-suave); }
.vjp-agenda-evento-origem { font-size: 0.875rem; color: var(--vjp-texto-mudo); }
.vjp-agenda-hora { font-size: 0.875rem; font-weight: 600; color: var(--vjp-sucesso); font-variant-numeric: tabular-nums; }
.vjp-agenda-tom-atencao { background: var(--vjp-primaria-suave); }
.vjp-agenda-tom-perigo { background: var(--vjp-perigo-suave); }
.vjp-agenda-dispensado { opacity: 0.6; }
.vjp-agenda-marca { display: block; margin: 0 0 0.4rem; padding: 0.2rem 0.5rem; border-radius: 0.35rem; border-left: 4px solid; font-size: 0.875rem; }
.vjp-agenda-vazio { margin: 0; color: var(--vjp-texto-mudo); font-size: 0.875rem; }

/* Semana: 7 colunas; dia: uma coluna larga. */
.vjp-agenda-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
.vjp-agenda-dia-unico { display: block; margin-bottom: 1rem; }
/* Coluna da semana no desktop tem ~95px úteis: padding curto e 14px (piso do padrão) para a palavra caber inteira. */
.vjp-agenda-semana { gap: 0.4rem; }
.vjp-agenda-semana .vjp-agenda-coluna { padding: 0.5rem; }
.vjp-agenda-semana .vjp-agenda-evento { padding: 0.3rem 0.4rem; border-left-width: 3px; }
.vjp-agenda-semana .vjp-agenda-evento-titulo { font-size: 0.875rem; }
.vjp-agenda-coluna { margin-bottom: 0; padding: 0.75rem; min-width: 0; }
.vjp-agenda-coluna-titulo { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 0.6rem; font-size: 0.9375rem; }
.vjp-agenda-coluna-titulo a { color: var(--vjp-texto); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.vjp-agenda-hoje { border-color: var(--vjp-primaria); box-shadow: inset 0 0 0 1px var(--vjp-primaria); }
.vjp-agenda-fora { opacity: 0.55; }
.vjp-agenda-feriado .vjp-agenda-coluna-titulo, .vjp-agenda-celula.vjp-agenda-feriado .vjp-agenda-numero { color: var(--vjp-perigo); }

/* Mês: grade de semanas inteiras. */
.vjp-agenda-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; padding: 0; overflow: hidden; background: var(--vjp-borda); }
.vjp-agenda-cabeca-semana { background: var(--vjp-cartao); padding: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--vjp-texto-mudo); text-align: center; }
.vjp-agenda-celula { background: var(--vjp-cartao); min-height: 7.5rem; padding: 0.35rem 0.4rem 0.5rem; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.vjp-agenda-celula .vjp-agenda-evento { min-height: 1.75rem; padding: 0.15rem 0.4rem; border-left-width: 3px; }
.vjp-agenda-celula .vjp-agenda-evento-titulo { font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vjp-agenda-celula .vjp-agenda-hora { font-size: 0.875rem; }
.vjp-agenda-celula .vjp-agenda-marca { margin: 0; padding: 0.1rem 0.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vjp-agenda-celula.vjp-agenda-hoje { box-shadow: inset 0 0 0 2px var(--vjp-primaria); }
.vjp-agenda-fora-do-mes { background: var(--vjp-fundo); }
.vjp-agenda-fora-do-mes .vjp-agenda-numero { color: var(--vjp-texto-mudo); }
.vjp-agenda-numero { align-self: flex-start; color: var(--vjp-texto); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2rem; }
.vjp-agenda-numero-mobile { display: none; }
.vjp-agenda-mais { font-size: 0.875rem; color: var(--vjp-primaria-forte); }
.vjp-agenda-rodape { margin-top: 0; }

/* Formulário do compromisso. */
.vjp-agenda-form-datas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.vjp-agenda-form textarea { width: 100%; min-height: 44px; padding: 0.6rem 0.75rem; border-radius: var(--vjp-raio); border: 1px solid var(--vjp-borda); background: var(--vjp-cartao); color: var(--vjp-texto); font: inherit; font-size: 15px; resize: vertical; }
.vjp-agenda-form textarea:focus { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; border-color: var(--vjp-primaria); }
.vjp-agenda-form input:disabled, .vjp-agenda-form textarea:disabled { opacity: 0.7; }
.vjp-agenda-excluir { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--vjp-borda); }

@media (max-width: 900px) {
    .vjp-agenda-semana { grid-template-columns: 1fr; }
    .vjp-agenda-semana .vjp-agenda-coluna { padding: 0.75rem; }
    .vjp-agenda-semana .vjp-agenda-evento { padding: 0.35rem 0.6rem; }
    .vjp-agenda-semana .vjp-agenda-evento-titulo { font-size: 0.9375rem; }
    .vjp-agenda-semana .vjp-agenda-coluna[data-vazio="1"]:not(.vjp-agenda-hoje) .vjp-agenda-vazio { display: none; }
    .vjp-agenda-semana .vjp-agenda-coluna[data-vazio="1"]:not(.vjp-agenda-hoje) .vjp-agenda-coluna-titulo { margin: 0; }
    .vjp-agenda-titulo { text-align: left; flex-basis: 100%; }
    /* Mês no celular: lista dos dias com algo (grade de 7 colunas não cabe em 390px). */
    .vjp-agenda-mes { display: block; background: var(--vjp-cartao); }
    .vjp-agenda-cabeca-semana { display: none; }
    .vjp-agenda-celula { min-height: 0; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--vjp-borda); }
    .vjp-agenda-celula[data-vazio="1"] { display: none; }
    .vjp-agenda-celula.vjp-agenda-fora-do-mes { display: none; }
    .vjp-agenda-celula .vjp-agenda-evento { min-height: 44px; padding: 0.35rem 0.6rem; }
    .vjp-agenda-celula .vjp-agenda-evento-titulo { white-space: normal; }
    .vjp-agenda-celula .vjp-agenda-marca { white-space: normal; }
    .vjp-agenda-numero { display: inline-flex; align-items: center; min-height: 44px; }
    .vjp-agenda-numero-mobile { display: inline; }
    .vjp-agenda-numero-grade { display: none; }
}
@media (max-width: 480px) {
    .vjp-agenda-topo .vjp-botao { width: 100%; }
    .vjp-agenda-nav { flex-direction: column; align-items: stretch; }
    .vjp-agenda-visoes a { flex: 1 1 auto; justify-content: center; }
    .vjp-agenda-passos .vjp-botao { flex: 1 1 auto; }
    .vjp-agenda-horizonte { margin-left: 0; flex-basis: 100%; }
    .vjp-agenda-form-datas { grid-template-columns: 1fr; }
}

/* PR21 (P152): tarefas — fechou pelo fato / pelo escritório / declarada (tracejada) */
.vjp-tarefa-marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-top: 0.4rem; }
.vjp-tarefa-marcas .vjp-badge { white-space: normal; }
.vjp-hoje-item.vjp-tarefa-fato { border-left-color: var(--vjp-sucesso); }
.vjp-hoje-item.vjp-tarefa-escritorio { border-left-color: var(--vjp-info); }
.vjp-hoje-item.vjp-tarefa-declaracao { border-left: 3px dashed var(--vjp-primaria); }
.vjp-tarefa-fato .vjp-item-titulo, .vjp-tarefa-escritorio .vjp-item-titulo, .vjp-tarefa-declaracao .vjp-item-titulo { opacity: 0.8; }
.vjp-tarefa-declarada { border: 1px dashed currentColor; }
.vjp-tarefa-declarar { white-space: nowrap; min-height: 44px; }
@media (max-width: 480px) {
    .vjp-tarefa-declarar { width: 100%; }
}

/* PR22 — a rota do dia sobre o mapa (Leaflet local, espec §5 / P147).
   Marcador exato = cheio; aproximado (CEP + número) = vazado e tracejado:
   a diferença é de FORMA, não só de cor. A atribuição fica sempre à vista. */
.vjp-mapa { margin: 1rem 0; }
.vjp-mapa-tela { position: relative; z-index: 0; height: 22rem; border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); background: var(--vjp-neutro-suave); overflow: hidden; }
.vjp-mapa-legenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--vjp-texto-suave); }
.vjp-mapa-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.vjp-mapa-fora { color: var(--vjp-texto-mudo); }
.vjp-mapa-atribuicao { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--vjp-texto-mudo); }
.vjp-mapa-atribuicao a { color: inherit; text-decoration: underline; }
/* o leaflet.css (carregado depois) põe `display: block` no marcador e descentraliza o número */
.vjp-pino, .leaflet-marker-pane .vjp-pino { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 28px; height: 28px; border-radius: 9999px; font-size: 0.875rem; font-weight: 700; line-height: 1; }
.vjp-pino-exato { background: var(--vjp-primaria-forte); color: #ffffff; border: 2px solid #ffffff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.45); }
.vjp-pino-aproximado { background: var(--vjp-cartao); color: var(--vjp-info); border: 2px dashed var(--vjp-info); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3); }
@media (max-width: 640px) { .vjp-mapa-tela { height: 18rem; } }

/* PR23 — trajeto no mapa (polilinha na ordem, tracejada) e o PLANEJAR SEMANA:
   dias em cartões, raias de período (manhã/tarde/noite) que recebem o
   arraste; o seletor de dia e período faz o mesmo no toque e no teclado. */
.leaflet-overlay-pane path.vjp-mapa-linha { stroke: var(--vjp-primaria-forte); stroke-opacity: 0.85; fill: none; }
.vjp-mapa-traco { display: inline-block; width: 1.75rem; border-top: 3px dashed var(--vjp-primaria-forte); }
.vjp-rota-distancia strong { color: var(--vjp-texto); }
.vjp-avisos-topo a.vjp-botao { text-decoration: none; white-space: nowrap; min-height: 44px; margin-bottom: 0.75rem; }
.vjp-semana-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 1rem; }
.vjp-semana-nav .vjp-botao { min-height: 44px; text-decoration: none; white-space: nowrap; }
.vjp-semana-nav strong { font-variant-numeric: tabular-nums; text-align: center; }
.vjp-semana-filtro { grid-template-columns: minmax(12rem, 20rem) auto; }
.vjp-semana-reserva { margin: 0 0 1.25rem; padding: 0.75rem; border: 1px dashed var(--vjp-borda); border-radius: var(--vjp-raio); background: var(--vjp-neutro-suave); }
.vjp-semana-reserva h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; margin: 0 0 0.25rem; }
.vjp-semana-escolha { margin: 0 0 1rem; }
.vjp-semana-dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
.vjp-semana-dia { min-width: 0; padding: 0.75rem; border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); background: var(--vjp-cartao); }
.vjp-semana-dia-hoje { border-color: var(--vjp-info); box-shadow: inset 0 3px 0 var(--vjp-info); }
.vjp-semana-dia-passado { opacity: 0.7; }
.vjp-semana-dia-topo h2 { font-size: 1.05rem; margin: 0 0 0.25rem; }
.vjp-semana-dia-topo .vjp-descricao-mini { margin: 0.35rem 0 0; }
a.vjp-semana-ver { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; font-weight: 600; }
.vjp-semana-periodo { margin-top: 0.5rem; }
.vjp-semana-periodo h3 { font-size: 0.875rem; font-weight: 600; color: var(--vjp-texto-suave); margin: 0 0 0.25rem; text-transform: uppercase; letter-spacing: 0.04em; }
.vjp-semana-raia { list-style: none; margin: 0; padding: 0.35rem; min-height: 3rem; display: flex; flex-direction: column; gap: 0.4rem; border: 1px dashed var(--vjp-borda); border-radius: var(--vjp-raio); }
.vjp-semana-raia:not(:has(li))::after { content: "Ninguém neste período"; align-self: center; padding: 0.6rem 0; font-size: 0.875rem; color: var(--vjp-texto-mudo); }
.vjp-semana-raia-reserva { flex-direction: row; flex-wrap: wrap; border: 0; padding: 0; }
.vjp-semana-raia-reserva:not(:has(li))::after { content: none; }
.vjp-semana-raia.vjp-semana-alvo { border-color: var(--vjp-primaria); background: var(--vjp-primaria-suave); }
.vjp-semana-parada { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem; border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); background: var(--vjp-cartao); min-width: 0; }
.vjp-semana-raia-reserva .vjp-semana-parada { flex: 1 1 18rem; }
.vjp-semana-parada[draggable="true"] { cursor: grab; }
.vjp-semana-parada-corpo { display: flex; flex-direction: column; min-width: 0; flex: 1 1 10rem; overflow-wrap: anywhere; }
.vjp-semana-numero { flex-basis: 2rem; width: 2rem; height: 2rem; font-size: 0.875rem; }
.vjp-semana-mexida .vjp-semana-numero { visibility: hidden; }
.vjp-semana-destino { flex: 1 1 100%; }
.vjp-semana-destino select { width: 100%; min-height: 44px; padding: 0 0.6rem; font-size: 15px; font-family: inherit; color: var(--vjp-texto); background: var(--vjp-cartao); border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); }
.vjp-semana-destino select:focus { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; border-color: var(--vjp-primaria); }
@media (max-width: 640px) {
    .vjp-semana-filtro { grid-template-columns: 1fr; }
    .vjp-semana-dias { grid-template-columns: 1fr; }
    /* a semana vai para a linha de cima; os dois botões dividem a de baixo */
    .vjp-semana-nav strong { order: -1; flex-basis: 100%; }
}

/* PR25 (P193) — métricas de rota: a linha do dia leva os três contrapesos e
   o R$ por hora juntos; no desktop, células mais justas para caberem sem
   rolagem (nada do contrapeso fica escondido atrás da barra). */
@media (min-width: 901px) {
    .vjp-tabela-metricas-rota th, .vjp-tabela-metricas-rota td { padding-left: 0.5rem; padding-right: 0.5rem; }
}
@media (max-width: 900px) {
    /* No 390 a célula vira flex (rótulo + valor): a nota de cada número
       desce para a própria linha, alinhada sob o valor, em vez de empurrar
       a célula para fora da tela. */
    .vjp-tabela-metricas-rota td { flex-wrap: wrap; overflow-wrap: anywhere; }
    .vjp-tabela-metricas-rota td .vjp-item-sub { flex: 0 0 100%; padding-left: 8.25rem; }
}

/* ---------------------------------------------------------------- PR26 (P150) — Jarbas do representante */
.vjp-jarbas-trocas { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.vjp-jarbas-troca { display: flex; flex-direction: column; gap: 0.5rem; }
.vjp-jarbas-pergunta { align-self: flex-end; max-width: 85%; margin: 0; padding: 0.6rem 0.9rem; border-radius: var(--vjp-raio); background: var(--vjp-primaria-suave); color: var(--vjp-texto); overflow-wrap: anywhere; }
.vjp-jarbas-resposta { align-self: flex-start; max-width: 85%; padding: 0.75rem 0.9rem; border-radius: var(--vjp-raio); border: 1px solid var(--vjp-borda); background: var(--vjp-neutro-suave); overflow-wrap: anywhere; }
.vjp-jarbas-resposta p { margin: 0.5rem 0 0; }
.vjp-jarbas-resposta .vjp-botao { margin-top: 0.25rem; }
.vjp-jarbas-fontes { font-size: 14px; }
.vjp-jarbas-form textarea { width: 100%; min-height: 5rem; padding: 0.6rem 0.75rem; border-radius: var(--vjp-raio); border: 1px solid var(--vjp-borda); background: var(--vjp-cartao); color: var(--vjp-texto); font: inherit; font-size: 15px; resize: vertical; }
.vjp-jarbas-form textarea:focus { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; border-color: var(--vjp-primaria); }
.vjp-jarbas-form h3 { margin: 0.75rem 0 0.5rem; font-size: 1.05rem; }
.vjp-jarbas-abas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.vjp-jarbas-abas .vjp-badge { text-decoration: none; padding: 0.45rem 0.75rem; min-height: 44px; display: inline-flex; align-items: center; }
.vjp-jarbas-simulacao { margin-top: 1.25rem; padding: 1rem; border-radius: var(--vjp-raio); border: 2px dashed var(--vjp-primaria); background: var(--vjp-primaria-suave); }
.vjp-jarbas-carimbo { margin: 0 0 0.5rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.875rem; color: var(--vjp-primaria-texto); }
.vjp-jarbas-resultado { margin: 0 0 0.5rem; font-size: 1.5rem; }
.vjp-jarbas-passos { margin: 0.5rem 0; padding-left: 1.25rem; font-size: 15px; }
@media (max-width: 640px) {
    .vjp-jarbas-pergunta, .vjp-jarbas-resposta { max-width: 100%; }
    .vjp-jarbas-abas .vjp-badge { flex: 1 1 100%; justify-content: center; }
}

/* ------------------------------------------------------------------ */
/* O1-10 — portal EXTERNO da transportadora (Blade puro, mesma casa).   */
/* Só a allow-list do envio; cartão por envio, lançamento embaixo.     */
/* ------------------------------------------------------------------ */
.vjp-transp-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.vjp-transp-topo h1 { font-size: 1.25rem; margin: 0; }
.vjp-transp-envio-cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.vjp-transp-dados {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    margin: 0 0 1rem;
}
.vjp-transp-dados dt { font-size: 0.875rem; color: var(--vjp-texto-mudo); }
.vjp-transp-dados dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.vjp-transp-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.vjp-transp-form .vjp-campo { margin-bottom: 0; }
.vjp-transp-aviso { margin-bottom: 1rem; }

@media (min-width: 48rem) {
    .vjp-transp-dados { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .vjp-transp-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) auto; align-items: end; }
}

/*
 * PC05 — a MESA de conversas (espec do CRM do representante §11): lista ·
 * conversa · contexto. Só tokens --vjp-*. Pontos de quebra: ≥ 1280 px três
 * colunas; 768–1279 px lista + conversa e o painel em gaveta à direita;
 * < 768 px uma coluna (lista OU conversa) e o painel em gaveta de tela
 * cheia. A página não rola: cada coluna rola sozinha (gancho
 * `@section('corpo_classe', 'vjp-pagina-mesa')` do layout).
 */
body.vjp-pagina-mesa { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
body.vjp-pagina-mesa .vjp-corpo { flex: 1 1 auto; min-height: 0; max-width: none; }
body.vjp-pagina-mesa .vjp-lateral-nav { max-height: 100%; overflow-y: auto; }
/* Na mesa, o menu lateral fica só com os ícones (o rótulo segue para leitor de tela e no `title`). */
@media (min-width: 901px) {
    body.vjp-pagina-mesa .vjp-lateral { flex: 0 0 3.75rem; }
    body.vjp-pagina-mesa .vjp-lateral-nav { padding: 0.35rem; align-items: center; }
    body.vjp-pagina-mesa .vjp-menu-item { justify-content: center; width: 44px; padding: 0; position: relative; }
    body.vjp-pagina-mesa .vjp-menu-item > span,
    body.vjp-pagina-mesa .vjp-menu-item > small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    body.vjp-pagina-mesa .vjp-menu-item > .vjp-contador { position: absolute; width: auto; height: 1.1rem; min-width: 1.1rem; padding: 0 0.25rem; margin: 0; clip: auto; overflow: visible; top: 0; right: -0.25rem; font-size: 0.7rem; }
}
body.vjp-pagina-mesa .vjp-conteudo { display: flex; flex-direction: column; min-height: 0; }
body.vjp-pagina-mesa .vjp-conteudo > .vjp-aviso { flex: none; }
body.vjp-pagina-mesa .vjp-rodape { display: none; }

.vjp-mesa {
    --vjp-mesa-col-lista: minmax(17rem, 20rem);
    --vjp-mesa-col-painel: minmax(18rem, 22rem);
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: var(--vjp-mesa-col-lista) minmax(0, 1fr) var(--vjp-mesa-col-painel);
    grid-template-rows: minmax(0, 1fr);
    gap: 0.75rem;
}
.vjp-mesa [hidden] { display: none !important; }
.vjp-mesa[data-restrito="1"] { grid-template-columns: minmax(0, 1fr) var(--vjp-mesa-col-painel); }
.vjp-mesa[data-lista="recolhida"] { --vjp-mesa-col-lista: 3.5rem; }
.vjp-mesa[data-painel="recolhido"] { grid-template-columns: var(--vjp-mesa-col-lista) minmax(0, 1fr); }
.vjp-mesa[data-restrito="1"][data-painel="recolhido"] { grid-template-columns: minmax(0, 1fr); }
.vjp-mesa[data-painel="recolhido"] .vjp-mesa-painel { display: none; }

.vjp-mesa-lista,
.vjp-mesa-conversa,
.vjp-mesa-painel {
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--vjp-cartao);
    border: 1px solid var(--vjp-borda);
    border-radius: var(--vjp-raio);
    overflow: hidden;
}

.vjp-mesa-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.5rem 0.5rem 1rem; border-bottom: 1px solid var(--vjp-borda); flex: none; }
.vjp-mesa-titulo { margin: 0; font-size: 1.05rem; font-weight: 600; }
.vjp-mesa-icone-botao {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: var(--vjp-raio);
    background: transparent; color: var(--vjp-texto-suave); cursor: pointer;
}
.vjp-mesa-icone-botao:hover { background: var(--vjp-neutro-suave); color: var(--vjp-texto); }
.vjp-mesa-icone-botao:focus-visible, .vjp-mesa-icone-botao:focus-within { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; }
.vjp-mesa-link-botao { border: 0; background: transparent; color: var(--vjp-primaria-forte); font: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 0.25rem; }

/* Coluna 1 — lista */
.vjp-mesa-busca { padding: 0.75rem 0.75rem 0.25rem; flex: none; }
.vjp-mesa-busca input {
    width: 100%; min-height: 44px; padding: 0 0.75rem; font-size: 15px; font-family: inherit;
    color: var(--vjp-texto); background: var(--vjp-fundo); border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio);
}
.vjp-mesa-busca input:focus { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; border-color: var(--vjp-primaria); }
.vjp-mesa-busca-aviso { margin: 0.25rem 0.75rem 0; padding: 0.5rem 0.75rem; border-radius: var(--vjp-raio); background: var(--vjp-primaria-suave); color: var(--vjp-primaria-texto); font-size: 0.875rem; flex: none; }
.vjp-mesa-filtros { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.5rem 0.75rem; flex: none; border-bottom: 1px solid var(--vjp-borda); }
.vjp-mesa-filtro {
    display: inline-flex; align-items: center; gap: 0.25rem; min-height: 44px; padding: 0 0.75rem; white-space: nowrap;
    border-radius: 999px; border: 1px solid var(--vjp-borda); color: var(--vjp-texto-suave); text-decoration: none; font-size: 0.9rem; font-weight: 500;
}
.vjp-mesa-filtro:hover { background: var(--vjp-neutro-suave); color: var(--vjp-texto); }
.vjp-mesa-filtro.ativa { background: var(--vjp-primaria-suave); border-color: var(--vjp-primaria); color: var(--vjp-primaria-texto); }
.vjp-mesa-filtro-conta { font-variant-numeric: tabular-nums; }
.vjp-mesa-cartoes { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.vjp-mesa-cartao { border-bottom: 1px solid var(--vjp-borda); }
.vjp-mesa-cartao-link { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.65rem 0.75rem; min-height: 44px; color: var(--vjp-texto); text-decoration: none; border-left: 3px solid transparent; }
.vjp-mesa-cartao-link:hover { background: var(--vjp-neutro-suave); }
.vjp-mesa-cartao-atual .vjp-mesa-cartao-link { background: var(--vjp-primaria-suave); border-left-color: var(--vjp-primaria); }
.vjp-mesa-iniciais {
    position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--vjp-primaria-suave); color: var(--vjp-primaria-texto);
    font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em;
}
.vjp-mesa-iniciais-grande { width: 3rem; height: 3rem; font-size: 1rem; }
.vjp-mesa-ponto { position: absolute; top: 0; right: 0; width: 0.7rem; height: 0.7rem; border-radius: 999px; background: var(--vjp-perigo); border: 2px solid var(--vjp-cartao); }
.vjp-mesa-cartao-corpo { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1 1 auto; }
.vjp-mesa-cartao-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.vjp-mesa-cartao-nome { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vjp-conversa-nao-lida .vjp-mesa-cartao-nome { font-weight: 700; }
.vjp-mesa-cartao-hora { flex: none; font-size: 0.8125rem; color: var(--vjp-texto-mudo); font-variant-numeric: tabular-nums; }
.vjp-conversa-nao-lida .vjp-mesa-cartao-hora { color: var(--vjp-primaria-texto); font-weight: 600; }
.vjp-mesa-cartao-telefone { font-size: 0.8125rem; }
.vjp-mesa-cartao-previa { font-size: 0.875rem; color: var(--vjp-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vjp-mesa-cartao-selos { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.15rem; }
.vjp-mesa-cartao-selos .vjp-badge { font-size: 0.75rem; padding: 0.1rem 0.5rem; }
.vjp-mesa-lista .vjp-vazio { flex: none; }
.vjp-mesa-mais { margin: 0; padding: 0.5rem 0.75rem; text-align: center; flex: none; border-top: 1px solid var(--vjp-borda); }
.vjp-mesa-mais .vjp-botao-link { margin-top: 0; }

/* Coluna 2 — conversa */
.vjp-mesa-escolha { margin: auto; max-width: 26rem; }
.vjp-mesa-cabeca { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--vjp-borda); flex: none; min-width: 0; }
.vjp-mesa-voltar { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 0.5rem; border-radius: var(--vjp-raio); color: var(--vjp-texto-suave); text-decoration: none; font-weight: 600; flex: none; }
.vjp-mesa-voltar:hover { background: var(--vjp-neutro-suave); color: var(--vjp-texto); }
.vjp-mesa-voltar-sempre { display: inline-flex; }
.vjp-mesa-quem { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.vjp-mesa-nome { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vjp-mesa-linha-2 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem; min-width: 0; }
.vjp-mesa-telefone { margin: 0; min-height: 0; gap: 0.25rem 0.5rem; font-size: 0.875rem; }
.vjp-mesa-telefone .vjp-revelar { min-height: 44px; padding: 0 0.75rem; }
.vjp-mesa-selos { display: flex; flex-wrap: wrap; gap: 0.25rem 0.35rem; margin: 0; min-width: 0; }
.vjp-mesa-selos .vjp-badge { font-size: 0.75rem; padding: 0.1rem 0.5rem; white-space: normal; }
.vjp-mesa-selos [data-canal-da-conversa] { white-space: nowrap; }
.vjp-mesa-acoes { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; flex: none; }
.vjp-mesa-acao { padding: 0 0.85rem; margin-top: 0; }
.vjp-mesa-contador { margin: 0.5rem 0.75rem 0; align-self: flex-start; min-height: 36px; font-size: 0.875rem; }
.vjp-mesa-faixa { margin: 0.5rem 0.75rem 0; flex: none; }
.vjp-mesa-aviso { margin: 0.5rem 0.75rem 0; flex: none; }
.vjp-mesa-linha-envoltorio { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.vjp-mesa-linha { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.75rem 1rem; }
.vjp-mesa-linha:focus-visible { outline: 2px solid var(--vjp-primaria); outline-offset: -2px; }
.vjp-mesa-linha .vjp-conversa-anteriores { text-align: center; }
.vjp-mesa-linha .vjp-conversa-anteriores .vjp-botao-link { margin-top: 0; }
.vjp-mesa-mensagens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; max-width: none; }
.vjp-mesa-dia { align-self: center; margin: 0.5rem 0 0.25rem; }
.vjp-mesa-dia span { display: inline-block; padding: 0.15rem 0.75rem; border-radius: 999px; background: var(--vjp-neutro-suave); color: var(--vjp-texto-suave); font-size: 0.8125rem; font-weight: 600; }
.vjp-mesa-mensagens .vjp-mesa-bolha { max-width: min(75%, 40rem); margin: 0; padding: 0.55rem 0.8rem; border: 1px solid var(--vjp-borda); border-left-width: 1px; border-radius: 0.85rem; }
.vjp-mesa-mensagens .vjp-conversa-entrada { align-self: flex-start; background: var(--vjp-cartao); border-bottom-left-radius: 0.25rem; }
.vjp-mesa-mensagens .vjp-conversa-saida { align-self: flex-end; background: var(--vjp-neutro-suave); border-bottom-right-radius: 0.25rem; }
.vjp-mesa-mensagens .vjp-conversa-saida.vjp-conversa-autor-voce { background: var(--vjp-primaria-suave); border-color: var(--vjp-primaria); }
.vjp-mesa-mensagens .vjp-conversa-saida.vjp-conversa-autor-escritorio,
.vjp-mesa-mensagens .vjp-conversa-saida.vjp-conversa-autor-vi,
.vjp-mesa-mensagens .vjp-conversa-saida.vjp-conversa-autor-automatica,
.vjp-mesa-mensagens .vjp-conversa-saida.vjp-conversa-autor-representante { background: var(--vjp-neutro-suave); border-color: var(--vjp-borda); }
.vjp-mesa-bolha[data-provisoria] { opacity: 0.7; }
.vjp-mesa-bolha .vjp-mensagem-meta { font-size: 0.8125rem; margin-bottom: 0.2rem; }
.vjp-mesa-bolha .vjp-mensagem-meta .vjp-badge { font-size: 0.7rem; padding: 0.05rem 0.45rem; }
.vjp-mesa-bolha .vjp-mensagem-texto { white-space: pre-wrap; }
.vjp-mesa-bolha .vjp-conversa-midia { margin-top: 0.25rem; }
.vjp-mesa-bolha .vjp-conversa-status[data-status="falhou"] { color: var(--vjp-perigo); }
.vjp-mesa-novas {
    position: absolute; left: 50%; bottom: 0.75rem; transform: translateX(-50%);
    min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--vjp-primaria);
    background: var(--vjp-cartao); color: var(--vjp-primaria-texto); font: inherit; font-weight: 600; cursor: pointer;
}
.vjp-mesa-novas[hidden] { display: none; }
.vjp-mesa-compositor { flex: none; margin: 0; max-width: none; padding: 0.6rem 0.75rem 0.5rem; border-top: 1px solid var(--vjp-borda); background: var(--vjp-cartao); }
.vjp-mesa-compositor-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.vjp-mesa-compositor textarea {
    flex: 1 1 100%; order: -1; min-width: 0; min-height: 44px; max-height: 9rem; resize: none; padding: 0.6rem 0.75rem;
    font-size: 15px; line-height: 1.5; font-family: inherit; color: var(--vjp-texto); background: var(--vjp-fundo);
    border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio);
}
.vjp-mesa-compositor textarea:focus { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; border-color: var(--vjp-primaria); }
.vjp-mesa-anexar { position: relative; }
.vjp-mesa-enviar { flex: none; margin-left: auto; }
.vjp-mesa-enviar:disabled { opacity: 0.6; cursor: wait; }
/* CRMV2-05 — microfone e barra de gravação (espec CRM-V2 §10.1, D-CRM-V2-07). Tokens --vjp-* (claro/escuro). */
.vjp-mesa-mic { margin-left: auto; border-radius: 999px; border-color: var(--vjp-borda); background: var(--vjp-cartao); color: var(--vjp-texto); }
.vjp-mesa-gravacao { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; min-width: 0; }
.vjp-mesa-gravacao-ponto { flex: none; width: 10px; height: 10px; border-radius: 999px; background: var(--vjp-perigo); animation: vjp-pulsar 1.2s ease-in-out infinite; }
@keyframes vjp-pulsar { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .vjp-mesa-gravacao-ponto { animation: none; } }
.vjp-mesa-gravacao-tempo { flex: none; min-width: 3.2em; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--vjp-texto); }
.vjp-mesa-gravacao-previa { flex: 1 1 0; width: 0; min-width: 0; height: 36px; }
.vjp-mesa-gravacao-status { flex: 1; min-width: 0; font-size: 0.875rem; color: var(--vjp-texto-suave); }
.vjp-mesa-gravacao[data-estado="pausado"] .vjp-mesa-gravacao-status,
.vjp-mesa-gravacao[data-estado="pronto"] .vjp-mesa-gravacao-status { display: none; }
.vjp-mesa-gravacao [data-crmv2="enviar-audio"] { margin-left: 0; border-color: var(--vjp-primaria); background: var(--vjp-primaria); color: #fff; }
.vjp-mesa-gravacao [data-crmv2="enviar-audio"]:hover { background: var(--vjp-primaria-forte); }
.vjp-mesa-gravacao button:disabled { opacity: 0.55; cursor: not-allowed; }
.vjp-mesa-gravacao-aviso { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--vjp-primaria-texto); }
.vjp-mesa-anexo-escolhido { display: flex; align-items: center; gap: 0.35rem; margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--vjp-texto-suave); }
.vjp-mesa-compositor .vjp-erro { margin: 0.35rem 0 0; }
.vjp-mesa-dica { margin: 0.35rem 0 0; font-size: 0.8125rem; }
.vjp-mesa-dica kbd { font-family: inherit; font-size: 0.75rem; padding: 0 0.3rem; border: 1px solid var(--vjp-borda); border-radius: 0.25rem; background: var(--vjp-neutro-suave); }
.vjp-mesa-sem-compositor { flex: none; margin: 0; padding: 0.75rem 1rem; border-top: 1px solid var(--vjp-borda); }
.vjp-mesa-sem-compositor.vjp-faixa-alerta { margin: 0.5rem 0.75rem 0.75rem; border-top-width: 1px; }

/* Coluna 3 — painel de contexto */
.vjp-mesa-abas { display: flex; gap: 0.25rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--vjp-borda); flex: none; }
.vjp-mesa-aba-botao {
    min-height: 44px; padding: 0 0.85rem; border-radius: var(--vjp-raio); border: 1px solid transparent;
    background: transparent; color: var(--vjp-texto-suave); font: inherit; font-weight: 600; cursor: pointer;
}
.vjp-mesa-aba-botao:hover { background: var(--vjp-neutro-suave); color: var(--vjp-texto); }
.vjp-mesa-aba-botao[aria-selected="true"] { background: var(--vjp-primaria-suave); border-color: var(--vjp-primaria); color: var(--vjp-primaria-texto); }
.vjp-mesa-aba { padding: 0.75rem 1rem 1rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.vjp-mesa-aba[hidden] { display: none; }
.vjp-mesa-quem-painel { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.vjp-mesa-quem-painel p { margin: 0; }
.vjp-mesa-painel-nome { font-weight: 600; overflow-wrap: anywhere; }
.vjp-mesa-painel-telefone { display: block; font-size: 0.875rem; }
.vjp-mesa-subtitulo { margin: 1rem 0 0.4rem; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vjp-texto-mudo); }
.vjp-mesa-dados { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.35rem 0.75rem; margin: 0.5rem 0 0; font-size: 0.9rem; }
.vjp-mesa-dados dt { color: var(--vjp-texto-mudo); }
.vjp-mesa-dados dd { margin: 0; overflow-wrap: anywhere; }
.vjp-mesa-tickets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; }
.vjp-mesa-tickets li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; min-height: 44px; }
.vjp-mesa-ficha { margin-top: 1rem; width: 100%; }
.vjp-mesa-saldo { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 1rem; border-radius: var(--vjp-raio); background: var(--vjp-primaria-suave); margin-bottom: 0.5rem; }
.vjp-mesa-saldo-rotulo { font-size: 0.875rem; color: var(--vjp-primaria-texto); font-weight: 600; }
.vjp-mesa-saldo-valor { font-size: 1.5rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vjp-mesa-movimentos { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; }
.vjp-mesa-movimento { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--vjp-borda); font-size: 0.875rem; }
.vjp-mesa-movimento-texto { display: flex; flex-direction: column; min-width: 0; }
.vjp-mesa-movimento-data { color: var(--vjp-texto-mudo); font-size: 0.8125rem; }
.vjp-mesa-movimento-valor { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.vjp-mesa-nota { margin: 1rem 0 0; font-size: 0.8125rem; border-top: 1px dashed var(--vjp-borda); padding-top: 0.5rem; }
.vjp-mesa-veu { display: none; }

/* PC06 — abas Notas e Arquivos (quatro abas quebram linha no painel de 22 rem) */
.vjp-mesa-abas { flex-wrap: wrap; }
.vjp-mesa-aba-botao { padding: 0 0.65rem; }
.vjp-mesa-aba-contagem {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem;
    margin-left: 0.25rem; padding: 0 0.35rem; border-radius: 999px; background: var(--vjp-neutro-suave);
    color: var(--vjp-texto-suave); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.vjp-mesa-aba-botao[aria-selected="true"] .vjp-mesa-aba-contagem { background: var(--vjp-cartao); color: var(--vjp-primaria-texto); }

/* PC06 — nota DELE na linha do tempo: fora de bolha, centrada, fundo próprio (--vjp-nota-*) */
.vjp-mesa-nota-linha { align-self: center; width: min(85%, 36rem); margin: 0.25rem 0; padding: 0.5rem 0.8rem; border: 1px dashed var(--vjp-nota-borda); border-radius: var(--vjp-raio); background: var(--vjp-nota-fundo); }
.vjp-mesa-nota-linha-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; font-size: 0.8125rem; color: var(--vjp-texto-suave); }
.vjp-mesa-nota-linha-meta .vjp-icone { width: 1rem; height: 1rem; color: var(--vjp-nota-icone); }
.vjp-mesa-nota-linha-meta .vjp-badge { font-size: 0.7rem; padding: 0.05rem 0.45rem; }
.vjp-mesa-nota-linha-texto { margin: 0.2rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* PC06 — aba Notas */
.vjp-mesa-nota-nova { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 1rem; }
.vjp-mesa-nota-nova .vjp-mesa-subtitulo { margin-top: 0; }
.vjp-mesa-nota-aviso { margin: 0; font-size: 0.875rem; }
.vjp-mesa-nota-nova textarea,
.vjp-mesa-nota-editar {
    width: 100%; min-height: 5rem; resize: vertical; padding: 0.6rem 0.75rem; font: inherit; font-size: 15px;
    color: var(--vjp-texto); background: var(--vjp-fundo); border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio);
}
.vjp-mesa-nota-nova textarea:focus,
.vjp-mesa-nota-editar:focus { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; border-color: var(--vjp-primaria); }
.vjp-mesa-nota-nova .vjp-erro { margin: 0; }
.vjp-mesa-nota-guardar { align-self: flex-end; }
.vjp-mesa-notas,
.vjp-mesa-arquivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.vjp-mesa-nota-item { padding: 0.6rem 0.75rem; border: 1px solid var(--vjp-nota-borda); border-radius: var(--vjp-raio); background: var(--vjp-nota-fundo); }
.vjp-mesa-nota-item-fixada { border-color: var(--vjp-primaria); border-left-width: 3px; }
.vjp-mesa-nota-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin: 0; font-size: 0.8125rem; color: var(--vjp-texto-mudo); }
.vjp-mesa-nota-item-meta .vjp-badge { font-size: 0.7rem; padding: 0.05rem 0.45rem; }
.vjp-mesa-nota-item-texto { margin: 0.3rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.vjp-mesa-nota-item-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; margin-top: 0.25rem; }
.vjp-mesa-nota-item-acoes .vjp-mesa-link-botao:first-child { padding-left: 0; }
.vjp-mesa-nota-item .vjp-mesa-nota-editar { margin-top: 0.35rem; }
.vjp-mesa-nota-item .vjp-erro { margin: 0.3rem 0 0; }
.vjp-mesa-nota-ate { font-size: 0.8125rem; }

/* PC06 — aba Arquivos e a bolha da mídia recebida */
.vjp-mesa-arquivo { padding: 0.6rem 0.75rem; border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); background: var(--vjp-cartao); }
.vjp-mesa-arquivo p { margin: 0 0 0.25rem; }
.vjp-mesa-arquivo-selos .vjp-badge { font-size: 0.75rem; white-space: normal; }
.vjp-mesa-arquivo-descricao { overflow-wrap: anywhere; }
.vjp-mesa-arquivo-abrir { margin-top: 0.25rem; }
.vjp-mesa-bolha .vjp-mesa-arquivo-salvo { display: inline-block; margin-top: 0.35rem; font-size: 0.75rem; padding: 0.1rem 0.5rem; }
.vjp-mesa-bolha .vjp-mesa-salvar-arquivo { display: block; padding-left: 0; }

/* PC06 — diálogo "Salvar arquivo": a pergunta "Para quem foi o Pix?" */
.vjp-mesa-pix { margin: 1.25rem 0 1rem; padding: 0.5rem 0.75rem 0.25rem; border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); }
.vjp-mesa-pix[hidden] { display: none; }
.vjp-mesa-pix legend { padding: 0 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--vjp-texto); }
.vjp-mesa-opcao { display: flex; align-items: flex-start; gap: 0.6rem; min-height: 44px; padding: 0.4rem 0; cursor: pointer; }
.vjp-mesa-opcao input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; accent-color: var(--vjp-primaria); }
.vjp-mesa-opcao span { display: flex; flex-direction: column; gap: 0.1rem; }
.vjp-mesa-opcao small { color: var(--vjp-texto-mudo); font-size: 0.8125rem; }
.vjp-dialogo .vjp-campo small { font-weight: 400; color: var(--vjp-texto-mudo); }
.vjp-botao-perigo { background: var(--vjp-perigo); }
.vjp-botao-perigo:hover { background: var(--vjp-perigo); filter: brightness(0.92); }

/* PC07 — aba Repertório (só o liberado pelo escritório) e o aviso de variável vazia no compositor */
.vjp-mesa-rep-rotulo { display: block; margin-top: 0; }
.vjp-mesa-rep-busca {
    width: 100%; min-height: 44px; padding: 0 0.75rem; font: inherit; font-size: 15px;
    color: var(--vjp-texto); background: var(--vjp-fundo); border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio);
}
.vjp-mesa-rep-busca:focus { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; border-color: var(--vjp-primaria); }
.vjp-mesa-rep-dica { margin: 0.35rem 0 0.75rem; font-size: 0.8125rem; }
.vjp-mesa-rep-dica kbd { font-family: inherit; font-size: 0.75rem; padding: 0 0.3rem; border: 1px solid var(--vjp-borda); border-radius: 0.25rem; background: var(--vjp-neutro-suave); }
.vjp-mesa-rep-lista { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.vjp-mesa-rep-item { padding: 0.6rem 0.75rem; border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); background: var(--vjp-cartao); }
.vjp-mesa-rep-titulo { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.vjp-mesa-rep-texto {
    margin: 0.3rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9rem; color: var(--vjp-texto-suave);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
.vjp-mesa-rep-texto[data-inteiro="1"] { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
.vjp-mesa-rep-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.35rem 0 0; }
.vjp-mesa-rep-tags .vjp-badge { font-size: 0.7rem; padding: 0.05rem 0.45rem; }
.vjp-mesa-rep-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.5rem; margin-top: 0.35rem; }
.vjp-mesa-rep-acoes .vjp-mesa-link-botao:first-child { padding-left: 0; }
.vjp-mesa-rep-usar { padding: 0 1rem; margin-left: auto; }
.vjp-mesa-rep-vazio { margin: 0.25rem 0 0.75rem; }
.vjp-mesa-aviso-repertorio {
    margin: 0 0 0.4rem; padding: 0.4rem 0.75rem; border-radius: var(--vjp-raio); font-size: 0.875rem;
    background: var(--vjp-primaria-suave); color: var(--vjp-primaria-texto); border: 1px solid var(--vjp-primaria);
}
.vjp-mesa-aviso-repertorio[hidden] { display: none; }

/* PC08 — IA da conversa (P209): rodapé fixo do painel, chat que ocupa o painel, cartão do resumo,
   "Sugerir resposta" no compositor e a faixa do rascunho. Só tokens (--vjp-info* para o que é da IA). */
.vjp-mesa-painel[data-ia="aberta"] > .vjp-mesa-abas,
.vjp-mesa-painel[data-ia="aberta"] > .vjp-mesa-aba,
.vjp-mesa-painel[data-ia="aberta"] > .vjp-mesa-ia-rodape { display: none !important; }
.vjp-mesa-ia { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.vjp-mesa-ia-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.5rem 0.35rem 1rem; border-bottom: 1px solid var(--vjp-borda); flex: none; }
.vjp-mesa-ia-titulo { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.95rem; font-weight: 600; }
.vjp-mesa-ia-titulo .vjp-icone, .vjp-mesa-ia-botao .vjp-icone, .vjp-mesa-ia-rascunho .vjp-icone { width: 1.1rem; height: 1.1rem; color: var(--vjp-info); }
.vjp-mesa-ia-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.75rem 1rem; }
.vjp-mesa-ia-aviso {
    margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--vjp-raio); font-size: 0.875rem;
    background: var(--vjp-info-suave); color: var(--vjp-texto); border: 1px solid var(--vjp-info);
}
.vjp-mesa-ia-historico { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.vjp-mesa-ia-item { display: flex; flex-direction: column; gap: 0.35rem; }
.vjp-mesa-ia-pedido { margin: 0; font-size: 0.875rem; color: var(--vjp-texto-suave); overflow-wrap: anywhere; }
.vjp-mesa-ia-pedido time { font-variant-numeric: tabular-nums; }
.vjp-mesa-ia-resposta, .vjp-mesa-ia-resumo {
    padding: 0.6rem 0.75rem; border-radius: var(--vjp-raio); border: 1px solid var(--vjp-borda); border-left: 3px solid var(--vjp-info);
    background: var(--vjp-cartao);
}
.vjp-mesa-ia-escritorio { border-left-color: var(--vjp-primaria); background: var(--vjp-primaria-suave); }
.vjp-mesa-ia-selos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.35rem; margin: 0 0 0.3rem; }
.vjp-mesa-ia-selos .vjp-badge { font-size: 0.7rem; padding: 0.05rem 0.45rem; }
.vjp-mesa-ia-selos time { font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.vjp-mesa-ia-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.vjp-mesa-ia-fonte { margin: 0.35rem 0 0; font-size: 0.8125rem; }
.vjp-mesa-ia-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.25rem 0.5rem; margin-top: 0.35rem; }
.vjp-mesa-ia-usar { padding: 0 1rem; margin-top: 0; }
.vjp-mesa-ia-vazio { margin: 0; }
.vjp-mesa-ia-form { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem 1rem; border-top: 1px solid var(--vjp-borda); flex: none; }
.vjp-mesa-ia-form textarea {
    width: 100%; min-height: 44px; max-height: 8rem; resize: vertical; padding: 0.5rem 0.75rem; font-size: 15px; line-height: 1.5;
    font-family: inherit; color: var(--vjp-texto); background: var(--vjp-fundo); border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio);
}
.vjp-mesa-ia-form textarea:focus { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; border-color: var(--vjp-primaria); }
.vjp-mesa-ia-form .vjp-erro { margin: 0; }
.vjp-mesa-ia-form .vjp-botao { align-self: flex-end; margin-top: 0; }
.vjp-mesa-ia-pe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; padding: 0 1rem 0.6rem; flex: none; font-size: 0.8125rem; }
.vjp-mesa-ia-pe p { margin: 0; }
.vjp-mesa-ia-pe a { display: inline-flex; align-items: center; min-height: 44px; color: var(--vjp-primaria-forte); }
.vjp-mesa-ia-resumos { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1rem; }
.vjp-mesa-ia-resumos .vjp-mesa-subtitulo { margin: 0; }
.vjp-mesa-ia-rotulo { margin: 0.5rem 0 0.15rem; font-size: 0.8125rem; font-weight: 600; color: var(--vjp-texto-mudo); }
.vjp-mesa-ia-lista { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; }
.vjp-mesa-ia-linha { margin: 0.4rem 0 0; font-size: 0.9rem; }
.vjp-mesa-ia-rodape { flex: none; padding: 0.5rem 0.75rem; border-top: 1px solid var(--vjp-borda); background: var(--vjp-cartao); }
.vjp-mesa-ia-botoes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.vjp-mesa-ia-botao { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 0; padding: 0 0.6rem; }
.vjp-mesa-ia-botao:disabled { opacity: 0.55; cursor: not-allowed; }
.vjp-mesa-ia-motivo { margin: 0.35rem 0 0; font-size: 0.8125rem; }
.vjp-mesa-ia-rodape .vjp-erro { margin: 0.35rem 0 0; }
.vjp-mesa-sugerir .vjp-icone { color: var(--vjp-info); }
.vjp-mesa-sugerir[aria-busy="true"] { opacity: 0.6; cursor: wait; }
.vjp-mesa-ia-rascunho {
    display: flex; align-items: center; gap: 0.35rem; margin: 0 0 0.4rem; padding: 0.35rem 0.75rem; border-radius: var(--vjp-raio);
    font-size: 0.875rem; font-weight: 600; background: var(--vjp-info-suave); color: var(--vjp-texto); border: 1px solid var(--vjp-info);
}
.vjp-mesa-ia-frase {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.5rem; margin: 0 0 0.4rem;
    padding: 0.35rem 0.75rem; border-radius: var(--vjp-raio); font-size: 0.875rem;
    background: var(--vjp-primaria-suave); color: var(--vjp-primaria-texto); border: 1px solid var(--vjp-primaria);
}
.vjp-mesa-ia-frase p { margin: 0; }
.vjp-mesa-ia-rascunho[hidden], .vjp-mesa-ia-frase[hidden] { display: none; }

/* Lista recolhida (só onde há colunas): faixa de 3,5 rem com iniciais e o ponto de não lida. */
@media (min-width: 768px) {
    .vjp-mesa[data-lista="recolhida"] .vjp-mesa-lista .vjp-mesa-titulo,
    .vjp-mesa[data-lista="recolhida"] .vjp-mesa-busca,
    .vjp-mesa[data-lista="recolhida"] .vjp-mesa-busca-aviso,
    .vjp-mesa[data-lista="recolhida"] .vjp-mesa-filtros,
    .vjp-mesa[data-lista="recolhida"] .vjp-mesa-cartao-corpo,
    .vjp-mesa[data-lista="recolhida"] .vjp-mesa-lista .vjp-vazio,
    .vjp-mesa[data-lista="recolhida"] .vjp-mesa-mais { display: none; }
    .vjp-mesa[data-lista="recolhida"] .vjp-mesa-lista .vjp-mesa-topo { justify-content: center; padding: 0.4rem 0; }
    .vjp-mesa[data-lista="recolhida"] .vjp-mesa-recolher-lista { transform: rotate(180deg); }
    .vjp-mesa[data-lista="recolhida"] .vjp-mesa-cartao-link { justify-content: center; padding: 0.5rem 0; border-left-width: 0; }
    .vjp-mesa[data-lista="recolhida"] .vjp-mesa-cartao-atual .vjp-mesa-iniciais { outline: 2px solid var(--vjp-primaria); outline-offset: 2px; }
}

/* 768–1279 px: lista + conversa; o painel vira GAVETA à direita com fundo escurecido. */
@media (max-width: 1279px) {
    .vjp-mesa,
    .vjp-mesa[data-painel="recolhido"] { grid-template-columns: var(--vjp-mesa-col-lista) minmax(0, 1fr); }
    .vjp-mesa[data-restrito="1"],
    .vjp-mesa[data-restrito="1"][data-painel="recolhido"] { grid-template-columns: minmax(0, 1fr); }
    .vjp-mesa-painel {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 30;
        width: min(22rem, 100vw); border-radius: 0; border-width: 0 0 0 1px;
    }
    .vjp-mesa[data-painel="aberto"] .vjp-mesa-veu { display: block; position: fixed; inset: 0; z-index: 25; background: var(--vjp-veu); }
}

/* < 768 px: uma coluna — sem conversa, a lista; com conversa, a conversa em tela cheia. */
@media (max-width: 767px) {
    .vjp-mesa,
    .vjp-mesa[data-painel="recolhido"],
    .vjp-mesa[data-restrito="1"] { grid-template-columns: minmax(0, 1fr); }
    .vjp-mesa[data-tem-conversa="1"] .vjp-mesa-lista { display: none; }
    .vjp-mesa[data-tem-conversa="0"] .vjp-mesa-conversa { display: none; }
    .vjp-mesa-voltar { display: inline-flex; }
    .vjp-mesa-recolher-lista { display: none; }
    .vjp-mesa-painel { width: 100vw; border-width: 0; }
    .vjp-mesa-cabeca { flex-wrap: wrap; padding: 0.4rem 0.5rem; gap: 0.25rem 0.5rem; }
    .vjp-mesa-quem { flex: 1 1 calc(100% - 7rem); }
    .vjp-mesa-acoes { flex: 1 1 100%; justify-content: flex-end; margin-left: 0; }
    .vjp-mesa-acao { padding: 0 0.6rem; }
    .vjp-mesa-linha { padding: 0.5rem 0.6rem; }
    .vjp-mesa-mensagens .vjp-mesa-bolha { max-width: 88%; }
    .vjp-mesa-compositor { padding: 0.5rem; }
    .vjp-mesa-enviar { flex: 1 1 auto; }
    .vjp-mesa-dica { display: none; }
}

/* <as> */
/* cascata AS — só acréscimo */
/* AS08 (D-AS11) + JPV01 — o Jarbas do representante em toda página do portal: botão "Jarbas" + GAVETA lateral de altura
   inteira, folha ⚡ "Assuntos" e tela cheia (§7 do padrão visual, "Balão do Jarbas no Portal"). Camada 20: acima da
   marca d'água (5), abaixo do véu (25) e da gaveta (30) da página de Conversas; folha e pano empilham pela ordem do DOM.
   Só tokens. */
.vjp-jarbas-flut [hidden] { display: none !important; }

.vjp-jarbas-flut-botao {
    position: fixed;
    right: 1rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 44px;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--vjp-primaria-forte);
    border-radius: 999px;
    background: var(--vjp-primaria);
    color: var(--vjp-cartao);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0.5rem 1.25rem var(--vjp-veu);
}
.vjp-jarbas-flut-botao:hover { background: var(--vjp-primaria-forte); }
.vjp-jarbas-flut-botao .vjp-icone { width: 1.25rem; height: 1.25rem; }
/* O botão some com a gaveta aberta. */
.vjp-jarbas-flut[data-jarbas-estado="aberto"] .vjp-jarbas-flut-botao { display: none; }
.vjp-jarbas-flut button:focus-visible,
.vjp-jarbas-flut a:focus-visible,
.vjp-jarbas-flut input:focus-visible { outline: 2px solid var(--vjp-primaria); outline-offset: 2px; }
.vjp-jarbas-flut-rolagem:focus { outline: none; }

/* A gaveta: do fim do topo do portal até o fundo. 69 px = o sino de 44 px + o respiro de 0.75rem em cima e embaixo do
   .vjp-topo + a borda (medido na captura). */
.vjp-jarbas-flut-painel {
    position: fixed;
    top: calc(44px + 1.5rem + 1px);
    right: 0;
    bottom: 0;
    z-index: 20;
    width: min(26rem, 100vw);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid var(--vjp-borda);
    background: var(--vjp-cartao);
    color: var(--vjp-texto);
    font-size: 15px;
    box-shadow: -0.25rem 0 1.25rem var(--vjp-veu);
}

/* Cabeçalho de uma linha: avatar, título, subtítulo e três botões só ícone. */
.vjp-jarbas-flut-topo { flex: none; display: flex; align-items: center; gap: 0.6rem; min-height: 56px; padding: 0.375rem 0.5rem 0.375rem 1rem; border-bottom: 1px solid var(--vjp-borda); }
.vjp-jarbas-flut-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--vjp-primaria); color: var(--vjp-cartao); font-size: 15px; font-weight: 700; }
.vjp-jarbas-flut-cabeca { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.vjp-jarbas-flut-titulo { font-size: 1rem; }
.vjp-jarbas-flut-subtitulo { font-size: 11px; color: var(--vjp-texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vjp-jarbas-flut-restam-topo { display: none; }
.vjp-jarbas-flut-acoes { flex: none; display: flex; gap: 0.125rem; }
.vjp-jarbas-flut-icone { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--vjp-raio); background: transparent; color: var(--vjp-texto-suave); cursor: pointer; }
.vjp-jarbas-flut-icone:hover { background: var(--vjp-neutro-suave); color: var(--vjp-texto); }
.vjp-jarbas-flut-icone:disabled { opacity: 0.5; cursor: default; }
.vjp-jarbas-flut-acoes .vjp-jarbas-flut-so-cheio { display: none; }

/* Corpo: só a conversa na gaveta; as colunas Assuntos e "Seus dados e manual" são da tela cheia. */
.vjp-jarbas-flut-grade { flex: 1 1 auto; min-height: 0; display: flex; }
.vjp-jarbas-flut-assuntos,
.vjp-jarbas-flut-dados { display: none; }
.vjp-jarbas-flut-conversa { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.vjp-jarbas-flut-rolagem { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; }

.vjp-jarbas-flut-vazio { display: flex; flex-direction: column; gap: 0.5rem; }
.vjp-jarbas-flut-ola { margin: 0; font-size: 1.125rem; font-weight: 600; }
.vjp-jarbas-flut-convite { margin: 0 0 0.5rem; color: var(--vjp-texto-suave); }
.vjp-jarbas-flut-atalhos,
.vjp-jarbas-flut-grupo { display: flex; flex-direction: column; gap: 0.5rem; }
.vjp-jarbas-flut-atalho { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0.5rem 0.875rem; border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); background: var(--vjp-cartao); color: var(--vjp-texto); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.vjp-jarbas-flut-atalho:hover { border-color: var(--vjp-primaria); background: var(--vjp-primaria-suave); }
.vjp-jarbas-flut-atalho:disabled { opacity: 0.55; cursor: default; border-color: var(--vjp-borda); background: var(--vjp-cartao); }

.vjp-jarbas-flut-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.vjp-jarbas-flut-troca { display: flex; flex-direction: column; gap: 0.5rem; }
.vjp-jarbas-flut-pergunta { align-self: flex-end; max-width: 85%; margin: 0; padding: 0.5rem 0.75rem; border-radius: 1rem 1rem 0.25rem 1rem; background: var(--vjp-primaria-suave); color: var(--vjp-texto); overflow-wrap: anywhere; white-space: pre-line; }
.vjp-jarbas-flut-resposta { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; border: 1px solid var(--vjp-borda); border-radius: 1rem 1rem 1rem 0.25rem; background: var(--vjp-neutro-suave); overflow-wrap: break-word; }
.vjp-jarbas-flut-selo { align-self: flex-start; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--vjp-info-suave); color: var(--vjp-texto); font-size: 0.8125rem; font-weight: 600; }
.vjp-jarbas-flut-texto { margin: 0; white-space: pre-line; }

/* Esperando: "Consultando" + três pontos (parados para quem pede menos movimento). */
.vjp-jarbas-flut-espera { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--vjp-texto-suave); }
.vjp-jarbas-flut-pontos { display: inline-flex; gap: 0.2rem; }
.vjp-jarbas-flut-pontos i { width: 0.375rem; height: 0.375rem; border-radius: 999px; background: currentColor; animation: vjp-jarbas-ponto 1.2s infinite ease-in-out; }
.vjp-jarbas-flut-pontos i:nth-child(2) { animation-delay: 0.2s; }
.vjp-jarbas-flut-pontos i:nth-child(3) { animation-delay: 0.4s; }
@keyframes vjp-jarbas-ponto { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .vjp-jarbas-flut-pontos i { animation: none; opacity: 0.6; }
}

/* O cartão "meus dados" DENTRO da resposta: números em grade (até 3 por linha) + linhas rótulo/valor + link. */
.vjp-jarbas-flut-cartao { display: flex; flex-direction: column; gap: 0.625rem; padding: 0.75rem; border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); background: var(--vjp-cartao); }
.vjp-jarbas-flut-cartao-titulo { margin: 0; font-weight: 600; }
.vjp-jarbas-flut-numeros { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.vjp-jarbas-flut-numero { min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; padding: 0.5rem 0.625rem; border-radius: var(--vjp-raio); background: var(--vjp-neutro-suave); }
.vjp-jarbas-flut-numero dt { font-size: 12px; line-height: 1.3; color: var(--vjp-texto-suave); hyphens: auto; }
.vjp-jarbas-flut-numero dd { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.vjp-jarbas-flut-linhas { margin: 0; display: flex; flex-direction: column; }
.vjp-jarbas-flut-linha { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.375rem 0; border-top: 1px solid var(--vjp-borda); }
.vjp-jarbas-flut-linha:first-child { border-top: 0; }
.vjp-jarbas-flut-linha dt { min-width: 0; color: var(--vjp-texto-suave); }
.vjp-jarbas-flut-linha dd { margin: 0; font-weight: 600; text-align: right; }
.vjp-jarbas-flut-link { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; color: var(--vjp-primaria-texto); font-weight: 600; }

/* Logo abaixo, na MESMA linha: "Fonte: …" e "Ajudou?" 👍/👎. */
.vjp-jarbas-flut-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; }
.vjp-jarbas-flut-fontes { flex: 1 1 9rem; min-width: 0; margin: 0; font-size: 12px; color: var(--vjp-texto-suave); }
.vjp-jarbas-flut-avaliar { flex: none; margin-left: auto; display: flex; align-items: center; gap: 0.125rem; font-size: 12px; color: var(--vjp-texto-suave); }
.vjp-jarbas-flut-avaliar > span { margin-right: 0.25rem; }
.vjp-jarbas-flut-nota { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--vjp-texto-suave); cursor: pointer; }
.vjp-jarbas-flut-nota:hover { background: var(--vjp-cartao); color: var(--vjp-texto); }
.vjp-jarbas-flut-nota[aria-pressed="true"] { border-color: var(--vjp-primaria); background: var(--vjp-primaria-suave); color: var(--vjp-primaria-texto); }

.vjp-jarbas-flut-aviso { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0.75rem 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--vjp-raio); background: var(--vjp-perigo-suave); color: var(--vjp-texto); }
.vjp-jarbas-flut-repetir { min-height: 44px; padding: 0 0.75rem; border: 1px solid var(--vjp-borda); border-radius: 999px; background: var(--vjp-cartao); color: var(--vjp-texto); font: inherit; font-size: 15px; cursor: pointer; }
.vjp-jarbas-flut-repetir:hover { background: var(--vjp-primaria-suave); }

/* Rodapé: só o campo numa caixa de raio 16 px (⚡ · textarea de 1 a 4 linhas · Enviar) e a dica de 12 px. A frase da
   porta (limite, desligado, sem permissão) entra na faixa, no lugar da caixa. */
.vjp-jarbas-flut-rodape { flex: none; padding: 0.5rem 0.75rem 0.75rem; border-top: 1px solid var(--vjp-borda); }
.vjp-jarbas-flut-caixa { display: flex; align-items: flex-end; gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--vjp-borda); border-radius: 16px; background: var(--vjp-fundo); }
.vjp-jarbas-flut-caixa:focus-within { border-color: var(--vjp-primaria); }
.vjp-jarbas-flut-caixa textarea { flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: calc(4 * 1.5em + 1.25rem); padding: 0.625rem 0.25rem; border: 0; background: transparent; color: var(--vjp-texto); font: inherit; font-size: 15px; line-height: 1.5; resize: none; field-sizing: content; }
.vjp-jarbas-flut-caixa textarea:focus { outline: none; }
.vjp-jarbas-flut-caixa textarea:disabled { opacity: 0.6; }
.vjp-jarbas-flut-enviar { border-radius: 999px; background: var(--vjp-primaria); color: var(--vjp-cartao); }
.vjp-jarbas-flut-enviar:hover { background: var(--vjp-primaria-forte); color: var(--vjp-cartao); }
.vjp-jarbas-flut-dica { margin: 0.375rem 0.25rem 0; font-size: 12px; color: var(--vjp-texto-suave); }
.vjp-jarbas-flut-faixa { margin: 0; padding: 0.75rem 1rem; border: 1px solid var(--vjp-primaria); border-radius: 16px; background: var(--vjp-primaria-suave); color: var(--vjp-primaria-texto); font-weight: 600; }

/* Folha ⚡ "Assuntos": sobe de baixo DENTRO da gaveta; o pano escurece só a gaveta. */
.vjp-jarbas-flut-pano { position: absolute; inset: 0; background: var(--vjp-veu); }
.vjp-jarbas-flut-folha { position: absolute; left: 0; right: 0; bottom: 0; max-height: 65%; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 1rem 1rem; border-radius: 16px 16px 0 0; background: var(--vjp-cartao); box-shadow: 0 -0.5rem 1.5rem var(--vjp-veu); }
.vjp-jarbas-flut-folha-topo { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.vjp-jarbas-flut-folha .vjp-jarbas-flut-atalhos { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.vjp-jarbas-flut-busca { flex: none; min-height: 44px; padding: 0 0.75rem; border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); background: var(--vjp-fundo); color: var(--vjp-texto); font: inherit; font-size: 15px; }
.vjp-jarbas-flut-busca-vazia { margin: 0; color: var(--vjp-texto-suave); }

/* Colunas da tela cheia. */
.vjp-jarbas-flut-coluna-titulo { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vjp-texto-suave); }
.vjp-jarbas-flut-nova-larga { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 48px; padding: 0 0.875rem; border: 1px solid var(--vjp-primaria); border-radius: var(--vjp-raio); background: var(--vjp-primaria-suave); color: var(--vjp-primaria-texto); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.vjp-jarbas-flut-dados-vazio { margin: 0.5rem 0 0; color: var(--vjp-texto-suave); }
.vjp-jarbas-flut-dados-cartao { margin-top: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); }
.vjp-jarbas-flut-dados-titulo { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; }
.vjp-jarbas-flut-tabela { width: 100%; border-collapse: collapse; }
.vjp-jarbas-flut-tabela th,
.vjp-jarbas-flut-tabela td { padding: 0.5rem 0; border-top: 1px solid var(--vjp-borda); vertical-align: top; overflow-wrap: break-word; }
.vjp-jarbas-flut-tabela tr:first-child > * { border-top: 0; }
.vjp-jarbas-flut-tabela th { padding-right: 0.75rem; font-weight: 400; text-align: left; color: var(--vjp-texto-suave); }
.vjp-jarbas-flut-tabela td { font-weight: 600; text-align: right; }
.vjp-jarbas-flut-dados-fontes { margin: 0.75rem 0 0; padding-left: 1.1rem; color: var(--vjp-texto-suave); }

/* Tela cheia: só a partir de 1024 px (abaixo, o botão some e a gaveta continua gaveta). Cobre a área abaixo do topo:
   cabeçalho de 64 px; grade Assuntos 280 px · conversa (máx. 640 px) · "Seus dados e manual" 440 px. */
@media (max-width: 1023px) {
    .vjp-jarbas-flut-acoes .vjp-jarbas-flut-ir-cheio { display: none; }
}
@media (min-width: 1024px) {
    .vjp-jarbas-flut[data-jarbas-modo="cheio"] .vjp-jarbas-flut-painel { left: 0; width: auto; border-left: 0; box-shadow: none; }
    .vjp-jarbas-flut[data-jarbas-modo="cheio"] .vjp-jarbas-flut-topo { height: 64px; min-height: 64px; padding: 0 0.75rem 0 1rem; }
    .vjp-jarbas-flut[data-jarbas-modo="cheio"] .vjp-jarbas-flut-cabeca { flex-direction: row; align-items: center; gap: 0.75rem; }
    .vjp-jarbas-flut[data-jarbas-modo="cheio"] .vjp-jarbas-flut-titulo { font-size: 1.125rem; }
    .vjp-jarbas-flut[data-jarbas-modo="cheio"] .vjp-jarbas-flut-subtitulo { padding: 0.125rem 0.625rem; border-radius: 999px; background: var(--vjp-primaria-suave); color: var(--vjp-primaria-texto); font-size: 12px; font-weight: 600; }
    .vjp-jarbas-flut[data-jarbas-modo="cheio"] .vjp-jarbas-flut-restam-topo { display: inline; flex: none; font-size: 12px; color: var(--vjp-texto-suave); }
    .vjp-jarbas-flut[data-jarbas-modo="cheio"] .vjp-jarbas-flut-acoes .vjp-jarbas-flut-so-cheio { display: inline-flex; }
    .vjp-jarbas-flut[data-jarbas-modo="cheio"] .vjp-jarbas-flut-acoes .vjp-jarbas-flut-so-lateral { display: none; }
    .vjp-jarbas-flut[data-jarbas-modo="cheio"] .vjp-jarbas-flut-grade { display: grid; grid-template-columns: 280px minmax(0, 1fr) 440px; }
    .vjp-jarbas-flut[data-jarbas-modo="cheio"] .vjp-jarbas-flut-assuntos { display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; overflow-y: auto; padding: 1rem; border-right: 1px solid var(--vjp-borda); }
    .vjp-jarbas-flut[data-jarbas-modo="cheio"] .vjp-jarbas-flut-dados { display: block; min-height: 0; overflow-y: auto; padding: 1rem 1.25rem; border-left: 1px solid var(--vjp-borda); }
    .vjp-jarbas-flut[data-jarbas-modo="cheio"] .vjp-jarbas-flut-conversa { width: 100%; max-width: 640px; justify-self: center; }
    .vjp-jarbas-flut[data-jarbas-modo="cheio"] .vjp-jarbas-flut-folha { left: 280px; right: 440px; }
}

/* Celular: a gaveta ocupa a tela inteira, sem raio; o botão continua no canto (e some com ela aberta). */
@media (max-width: 640px) {
    .vjp-jarbas-flut-painel { inset: 0; width: auto; border: 0; border-radius: 0; box-shadow: none; }
    .vjp-jarbas-flut-pergunta { max-width: 92%; }
}

/* Conversas (corpo travado, compositor no rodapé — D-JPV5, a Mesa não muda): escondido abaixo de 1280 px; acima, o
   botão sobe 9rem e a gaveta (e a tela cheia) termina ACIMA do compositor e do rodapé da IA — medido na captura. */
@media (max-width: 1279px) {
    body.vjp-pagina-mesa .vjp-jarbas-flut-botao,
    body.vjp-pagina-mesa .vjp-jarbas-flut-painel { display: none; }
}
@media (min-width: 1280px) {
    body.vjp-pagina-mesa .vjp-jarbas-flut-botao { bottom: 9rem; }
    body.vjp-pagina-mesa .vjp-jarbas-flut-painel { bottom: 11.5rem; border-bottom: 1px solid var(--vjp-borda); }
}
/* </as> */

/* <npv> */
/* NPV01 (09/10/2026, aprovado pelo Maicon) — Notificações do Portal (§7 do padrão visual, "Notificações do Portal"):
   cabeçalho de uma linha, filtros numa fileira que rola de lado, lista em dias com UMA linha por conversa e, a partir de
   1024 px, o painel ao lado (lista 460 px + painel no resto, a página não rola e cada coluna rola sozinha, como a Mesa);
   abaixo disso, só a lista — a conversa abre em tela inteira. Só tokens --vjp-*; camada 21 só para o painel de tela
   inteira do celular (acima do botão do Jarbas, 20; abaixo do véu da Mesa, 25). A variável --vjp-notif-acima (a
   altura da resposta rápida, medida pelo script) é a única que nasce aqui — posição, não cor. */
.vjp-notif [hidden] { display: none !important; }
/* O contador do sino e do menu (do layout) some quando a leitura zera. */
.vjp-sino .vjp-contador[hidden],
.vjp-menu-item .vjp-contador[hidden] { display: none; }
.vjp-notif { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }

.vjp-notif-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.vjp-notif-titulo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.75rem; min-width: 0; }
.vjp-notif-titulo h1 { margin: 0; font-size: 1.35rem; line-height: 1.3; }
.vjp-notif-selo {
    display: inline-flex; align-items: center; padding: 0.1rem 0.6rem; border-radius: 999px;
    background: var(--vjp-primaria-suave); color: var(--vjp-primaria-texto); border: 1px solid var(--vjp-primaria);
    font-size: 13px; font-weight: 600; white-space: nowrap;
}
.vjp-notif-frase { margin: 0; font-size: 13px; color: var(--vjp-texto-mudo); }
.vjp-notif-todas-form { margin: 0; flex: none; }
.vjp-notif-todas { gap: 0.4rem; min-height: 44px; white-space: nowrap; }
.vjp-notif-todas .vjp-icone { width: 1.25rem; height: 1.25rem; }

/* Os filtros numa fileira só: rola de lado (dentro dela), nunca quebra linha. */
.vjp-notif-filtros {
    display: flex; flex-wrap: nowrap; gap: 0.35rem; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: thin; padding-bottom: 0.25rem; flex: none;
}
.vjp-notif-filtro {
    display: inline-flex; align-items: center; gap: 0.4rem; flex: none; min-height: 44px; padding: 0 0.85rem;
    border-radius: 999px; border: 1px solid var(--vjp-borda); background: var(--vjp-cartao);
    color: var(--vjp-texto-suave); text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap;
}
.vjp-notif-filtro:hover { background: var(--vjp-neutro-suave); color: var(--vjp-texto); }
.vjp-notif-filtro[aria-current="page"] { background: var(--vjp-primaria-suave); color: var(--vjp-primaria-texto); border-color: var(--vjp-primaria); }
.vjp-notif-contagem {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem;
    border-radius: 999px; background: var(--vjp-primaria); color: var(--vjp-cartao); font-size: 12px; font-weight: 700;
}

.vjp-notif-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }
.vjp-notif-lista {
    position: relative; min-width: 0; background: var(--vjp-cartao); border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio);
    padding: 0.25rem 0.5rem 0.5rem;
}
.vjp-notif-lista .vjp-vazio { margin: 0.5rem 0; }
.vjp-notif-dia-titulo { margin: 0.75rem 0.5rem 0.25rem; font-size: 13px; font-weight: 600; color: var(--vjp-texto-mudo); }
.vjp-notif-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }

/* Uma linha: marca de 40 px (iniciais ou ícone do tipo) · texto · bolinha de não lida. A linha INTEIRA é o link. */
.vjp-notif-item {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 0.75rem; align-items: center; gap: 0.75rem;
    min-height: 44px; padding: 0.6rem 0.65rem; border-radius: var(--vjp-raio); border: 1px solid transparent;
    color: var(--vjp-texto); text-decoration: none;
}
.vjp-notif-item:hover { background: var(--vjp-neutro-suave); }
.vjp-notif-item:focus-visible { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; }
.vjp-notif-item[aria-current="true"] { background: var(--vjp-primaria-suave); border-color: var(--vjp-primaria); }
.vjp-notif-avatar,
.vjp-notif-icone {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px;
    font-size: 14px; font-weight: 700;
}
.vjp-notif-avatar { border-radius: 999px; background: var(--vjp-primaria-suave); color: var(--vjp-primaria-texto); border: 1px solid var(--vjp-borda); }
.vjp-notif-icone { border-radius: var(--vjp-raio); background: var(--vjp-neutro-suave); color: var(--vjp-texto-suave); }
.vjp-notif-icone .vjp-icone { width: 1.25rem; height: 1.25rem; }
.vjp-notif-icone-seguranca { background: var(--vjp-perigo-suave); color: var(--vjp-perigo); }
.vjp-notif-icone-ticket,
.vjp-notif-icone-documento { background: var(--vjp-info-suave); color: var(--vjp-info); }
.vjp-notif-icone-extrato,
.vjp-notif-icone-rateio_semanal { background: var(--vjp-sucesso-suave); color: var(--vjp-sucesso); }
.vjp-notif-icone-escritorio { background: var(--vjp-primaria-suave); color: var(--vjp-primaria-texto); }
.vjp-notif-texto { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.vjp-notif-linha1 { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.vjp-notif-nome { font-size: 15px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vjp-notif-nao-lida .vjp-notif-nome { font-weight: 700; }
.vjp-notif-hora { flex: none; font-size: 13px; color: var(--vjp-texto-mudo); font-variant-numeric: tabular-nums; }
.vjp-notif-previa { font-size: 13px; color: var(--vjp-texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vjp-notif-novas { font-size: 13px; font-weight: 600; color: var(--vjp-primaria-texto); }
.vjp-notif-ponto { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: var(--vjp-primaria); justify-self: end; }

/* O painel: vazio · conversa · outro tipo. */
.vjp-notif-painel {
    display: none; position: relative; container-type: inline-size; min-width: 0; min-height: 0; flex-direction: column;
    background: var(--vjp-cartao); border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); overflow: hidden;
}
.vjp-notif-painel-vazio { margin: auto; padding: 2rem 1rem; color: var(--vjp-texto-mudo); text-align: center; }
.vjp-notif-conversa,
.vjp-notif-outro { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.vjp-notif-cabeca {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--vjp-borda); flex: none;
}
/* Sem espaço para o nome e o "Abrir conversa completa" na mesma linha, o botão desce (o texto nunca quebra no meio). */
.vjp-notif-quem { flex: 1 1 14rem; min-width: 0; }
.vjp-notif-quem h2 { margin: 0; font-size: 1.05rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vjp-notif-quem p { margin: 0; font-size: 13px; color: var(--vjp-texto-mudo); overflow-wrap: anywhere; }
.vjp-notif-telefone { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vjp-notif-telefone:not(:empty)::before { content: '· '; }
.vjp-notif-completa { flex: none; margin-left: auto; min-height: 44px; white-space: nowrap; }
.vjp-notif-icone-botao {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; padding: 0;
    border: 1px solid transparent; border-radius: var(--vjp-raio); background: transparent; color: var(--vjp-texto-suave); cursor: pointer;
}
.vjp-notif-icone-botao:hover { background: var(--vjp-neutro-suave); color: var(--vjp-texto); }
.vjp-notif-icone-botao:focus-visible { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; }
.vjp-notif-icone-botao .vjp-icone { width: 1.35rem; height: 1.35rem; }
.vjp-notif-corpo { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.75rem; }
.vjp-notif-anteriores { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 0.25rem; font-size: 15px; font-weight: 600; }
.vjp-notif-mensagens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.vjp-notif-estado:empty { display: none; }
.vjp-notif-msg { display: flex; }
.vjp-notif-msg-saida { justify-content: flex-end; }
.vjp-notif-balao {
    max-width: 82%; padding: 0.5rem 0.75rem; border-radius: 0.85rem; border: 1px solid var(--vjp-borda);
    background: var(--vjp-fundo); min-width: 0;
}
.vjp-notif-msg-saida .vjp-notif-balao { background: var(--vjp-primaria-suave); border-color: var(--vjp-primaria); }
.vjp-notif-msg-texto { margin: 0; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.vjp-notif-midia { margin: 0 0 0.15rem; font-size: 15px; color: var(--vjp-texto-suave); }
.vjp-notif-msg-meta { margin: 0.2rem 0 0; font-size: 12px; color: var(--vjp-texto-mudo); }
.vjp-notif-divisor {
    display: flex; align-items: center; gap: 0.6rem; margin: 0.35rem 0; font-size: 13px; font-weight: 600; color: var(--vjp-primaria-texto);
}
.vjp-notif-divisor::before,
.vjp-notif-divisor::after { content: ''; flex: 1 1 auto; border-top: 1px solid var(--vjp-primaria); }
.vjp-notif-sem-resposta { margin: 0; padding: 0.75rem; border-top: 1px solid var(--vjp-borda); flex: none; }

/* Resposta rápida: repertório · campo · Enviar de 44 px; a frase em 12 px. */
.vjp-notif-resposta { flex: none; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.6rem 0.75rem 0.65rem; border-top: 1px solid var(--vjp-borda); }
.vjp-notif-caixa { display: flex; align-items: flex-end; gap: 0.4rem; }
.vjp-notif-caixa textarea {
    flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 8rem; padding: 0.55rem 0.75rem; resize: none; field-sizing: content;
    border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); background: var(--vjp-fundo); color: var(--vjp-texto);
    font: inherit; font-size: 15px; line-height: 1.4;
}
.vjp-notif-caixa textarea:focus { outline: 2px solid var(--vjp-primaria); outline-offset: 0; border-color: var(--vjp-primaria); }
.vjp-notif-enviar { flex: none; gap: 0.35rem; min-height: 44px; min-width: 44px; }
.vjp-notif-enviar .vjp-icone { width: 1.15rem; height: 1.15rem; }
/* Painel estreito (1024–1279 px): o Enviar fica só com o ícone (o rótulo segue para o leitor de tela). */
@container (max-width: 380px) {
    .vjp-notif-enviar { width: 44px; padding: 0; }
    .vjp-notif-enviar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.vjp-notif-erro { margin: 0; }
.vjp-notif-dica { margin: 0; font-size: 12px; color: var(--vjp-texto-mudo); }
.vjp-notif-aviso {
    margin: 0; padding: 0.4rem 0.6rem; border-radius: var(--vjp-raio); font-size: 13px;
    background: var(--vjp-primaria-suave); color: var(--vjp-primaria-texto); border: 1px solid var(--vjp-primaria);
}
.vjp-notif-rep { display: flex; flex-direction: column; gap: 0.4rem; max-height: 16rem; padding: 0.5rem; border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); background: var(--vjp-fundo); }
.vjp-notif-rep-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.vjp-notif-rep-busca {
    min-height: 44px; padding: 0 0.75rem; border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio);
    background: var(--vjp-cartao); color: var(--vjp-texto); font: inherit; font-size: 15px;
}
.vjp-notif-rep-busca:focus { outline: 2px solid var(--vjp-primaria); outline-offset: 0; }
.vjp-notif-rep-lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.35rem; }
.vjp-notif-rep-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: var(--vjp-raio); background: var(--vjp-cartao); border: 1px solid var(--vjp-borda); }
.vjp-notif-rep-texto { flex: 1 1 auto; min-width: 0; }
.vjp-notif-rep-texto strong { display: block; font-size: 15px; }
.vjp-notif-rep-texto p { margin: 0; font-size: 13px; color: var(--vjp-texto-suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vjp-notif-rep-usar { flex: none; min-height: 44px; }

/* Painel de outro tipo. */
.vjp-notif-texto-outro { margin: 0 0 0.75rem; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.vjp-notif-dados { display: grid; gap: 0.35rem; margin: 0 0 0.75rem; }
.vjp-notif-dados div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; padding: 0.35rem 0; border-bottom: 1px solid var(--vjp-borda); }
.vjp-notif-dados dt { color: var(--vjp-texto-suave); }
.vjp-notif-dados dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.vjp-notif-abrir { min-height: 44px; }
.vjp-notif a.vjp-botao { text-decoration: none; }

/* Abaixo de 1024 px: só a lista; o painel abre em tela inteira, com Voltar. */
@media (max-width: 1023.98px) {
    .vjp-notif-frase { display: none; }
    .vjp-notif-todas { width: 44px; padding: 0; }
    .vjp-notif-todas-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .vjp-notif[data-notif-aberto="1"] .vjp-notif-painel {
        display: flex; position: fixed; inset: 0; z-index: 21; border: 0; border-radius: 0;
        height: 100vh; height: 100dvh; padding-bottom: env(safe-area-inset-bottom);
    }
    .vjp-notif-completa { order: 5; flex: 1 1 100%; }
}

/* A partir de 1024 px: lista com 460 px + o painel no resto; a página não rola (cada coluna rola sozinha). */
@media (min-width: 1024px) {
    body.vjp-pagina-notif { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
    body.vjp-pagina-notif .vjp-corpo { flex: 1 1 auto; min-height: 0; }
    body.vjp-pagina-notif .vjp-lateral-nav { max-height: 100%; overflow-y: auto; }
    body.vjp-pagina-notif .vjp-conteudo { display: flex; flex-direction: column; min-height: 0; }
    body.vjp-pagina-notif .vjp-conteudo > .vjp-aviso { flex: none; }
    body.vjp-pagina-notif .vjp-rodape { display: none; }
    .vjp-notif { flex: 1 1 auto; min-height: 0; }
    .vjp-notif-grade { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, 460px) minmax(20rem, 1fr); grid-template-rows: minmax(0, 1fr); }
    .vjp-notif-lista { overflow-y: auto; overscroll-behavior: contain; }
    .vjp-notif-painel { display: flex; }
    .vjp-notif-voltar { display: none; }
    /* O botão do Jarbas (e a gaveta dele) sobe acima da resposta rápida — nunca cobre o Enviar. */
    body.vjp-pagina-notif:has(.vjp-notif[data-notif-resposta="1"]) .vjp-jarbas-flut-botao { bottom: var(--vjp-notif-acima, 9.5rem); }
    body.vjp-pagina-notif:has(.vjp-notif[data-notif-resposta="1"]) .vjp-jarbas-flut-painel { bottom: var(--vjp-notif-acima, 9.5rem); border-bottom: 1px solid var(--vjp-borda); }
}
/* </npv> */
/* <pz> */
/* PZ03 — faixa do PRAZO da praça (topo de TODA página do portal, nos dois modos; nunca bloqueia). Só tokens
   --vjp-*: atenção = âmbar (vence em breve), informação = azul (dia do acerto e conferência no escritório),
   perigo = rosa (atrasada). Ícone + texto, nunca cor sozinha; filete à esquerda no tom; link de 44 px. */
.vjp-faixa-prazo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--vjp-borda);
    border-left: 4px solid var(--vjp-borda);
    background: var(--vjp-cartao);
    color: var(--vjp-texto);
    font-size: 15px;
    line-height: 1.5;
}
.vjp-faixa-prazo > .vjp-icone { margin-top: 0.15rem; }
.vjp-faixa-prazo-corpo { flex: 1 1 16rem; min-width: 0; }
.vjp-faixa-prazo-texto { margin: 0; font-weight: 600; }
.vjp-faixa-prazo-checklist { margin: 0.25rem 0 0; padding-left: 1.25rem; font-weight: 500; }
.vjp-faixa-prazo-checklist li { margin: 0.1rem 0; }
.vjp-faixa-prazo-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -0.6rem 0;
    font-weight: 600;
    white-space: nowrap;
}
.vjp-faixa-prazo-atencao { background: var(--vjp-primaria-suave); border-left-color: var(--vjp-primaria); }
.vjp-faixa-prazo-atencao > .vjp-icone,
.vjp-faixa-prazo-atencao .vjp-faixa-prazo-link { color: var(--vjp-primaria-texto); }
.vjp-faixa-prazo-info { background: var(--vjp-info-suave); border-left-color: var(--vjp-info); }
.vjp-faixa-prazo-info > .vjp-icone,
.vjp-faixa-prazo-info .vjp-faixa-prazo-link { color: var(--vjp-info); }
.vjp-faixa-prazo-perigo { background: var(--vjp-perigo-suave); border-left-color: var(--vjp-perigo); }
.vjp-faixa-prazo-perigo > .vjp-icone,
.vjp-faixa-prazo-perigo .vjp-faixa-prazo-link { color: var(--vjp-perigo); }

/* Celular: o texto ocupa a linha; o link desce para baixo dele, alinhado ao texto. */
@media (max-width: 640px) {
    .vjp-faixa-prazo { padding: 0.75rem 1rem; }
    .vjp-faixa-prazo-corpo { flex-basis: calc(100% - 2rem); }
    .vjp-faixa-prazo-link { margin: 0 0 -0.6rem 2rem; }
}
/* </pz> */

/* <ag05> AG05 — Encomendas do representante: "Quem eu preciso atender" e Nova encomenda. */
.vjp-badge-atencao { background: var(--vjp-primaria-suave); color: var(--vjp-primaria-texto); }
.vjp-encomendas-janela-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.vjp-encomendas-janela-cabeca h2 { margin: 0; }
.vjp-encomendas-linha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 0.5rem 0.75rem; }
.vjp-encomendas-linha .vjp-hoje-item-corpo { min-width: 0; }
.vjp-encomendas-marca .vjp-icone { width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; }
.vjp-encomendas-pediu .vjp-encomendas-marca { color: var(--vjp-sucesso); }
.vjp-encomendas-nao_pediu .vjp-encomendas-marca { color: var(--vjp-primaria); }
.vjp-encomendas-dispensou .vjp-encomendas-marca { color: var(--vjp-texto-mudo); }
.vjp-encomendas-dispensou .vjp-item-titulo { color: var(--vjp-texto-suave); }
.vjp-encomendas-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.vjp-encomendas-acoes form { margin: 0; }
.vjp-encomenda-escolha { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.vjp-encomenda-escolha .vjp-campo { flex: 1 1 16rem; margin: 0; }
.vjp-encomenda-linha { border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); padding: 0.75rem 1rem; margin: 0 0 1rem; min-width: 0; }
.vjp-encomenda-linha legend { font-weight: 600; padding: 0 0.35rem; }
.vjp-encomenda-linha-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1rem; }
.vjp-encomenda-linha-grade .vjp-encomenda-padrao { grid-column: span 1; }
.vjp-encomenda-atributos { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0 1rem; }
.vjp-encomenda-linha input[type="file"] { max-width: 100%; }
.vjp-encomenda-nova .vjp-campo select,
.vjp-encomenda-form .vjp-campo select,
.vjp-encomenda-form .vjp-campo textarea { width: 100%; min-height: 44px; padding: 0 0.75rem; font-size: 15px; font-family: inherit; color: var(--vjp-texto); background: var(--vjp-cartao); border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); }
.vjp-encomenda-form .vjp-campo textarea { padding: 0.5rem 0.75rem; }
.vjp-encomenda-nova .vjp-campo select:focus,
.vjp-encomenda-form .vjp-campo select:focus,
.vjp-encomenda-form .vjp-campo textarea:focus { outline: 2px solid var(--vjp-primaria); outline-offset: 1px; border-color: var(--vjp-primaria); }
.vjp-encomenda-total { border-top: 1px solid var(--vjp-borda); padding-top: 0.75rem; }
.vjp-encomenda-repetir { border-top: 1px solid var(--vjp-borda); margin-top: 1rem; padding-top: 0.75rem; }
.vjp-tabela-encomenda-itens td[data-rotulo="Item"] { min-width: 12rem; }
@media (max-width: 640px) {
    .vjp-encomenda-linha-grade { grid-template-columns: minmax(0, 1fr); }
    .vjp-encomendas-linha { grid-template-columns: auto minmax(0, 1fr); }
    .vjp-encomendas-acoes { grid-column: 1 / -1; }
}
/* </ag05> */
/* <sl06> SL06 (D-SL22) — bloco recolhido "Atendimento anterior" no topo da linha do tempo da mesa */
.vjp-mesa-anterior { margin: 0 0 0.75rem; border: 1px dashed var(--vjp-borda); border-radius: var(--vjp-raio); background: var(--vjp-neutro-suave); }
.vjp-mesa-anterior-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.55rem 0.8rem; cursor: pointer; font-size: 0.875rem; color: var(--vjp-texto-suave); }
.vjp-mesa-anterior-titulo .vjp-icone { width: 1rem; height: 1rem; }
.vjp-mesa-anterior-titulo .vjp-badge { font-size: 0.7rem; padding: 0.05rem 0.45rem; }
.vjp-mesa-anterior-titulo:focus-visible { outline: 2px solid var(--vjp-primaria); outline-offset: 2px; }
.vjp-mesa-anterior-nota { margin: 0 0.8rem 0.5rem; }
.vjp-mesa-anterior-lista { padding: 0 0.8rem 0.8rem; }
.vjp-mesa-anterior-lista .vjp-mensagem-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
/* </sl06> */

/* DR04 (D-DR3) — bloco "Produtividade com contrapeso" no portal: régua do mínimo no % recebido
   (componente x-desempenho.percentual-com-minimo), faixas "Em andamento" × "Fechados" e ▼ abaixo do
   mínimo. DR05: as mesmas classes servem o bloco de Rota. Só tokens --vjp-* (claro e escuro pelo prefers-color-scheme do portal, padrão visual §9). */
:is(.vjp-produtividade, .vjp-metricas-rota) .vj-dr-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:is(.vjp-produtividade, .vjp-metricas-rota) .vj-dr-pct { display: grid; gap: 0.35rem; }
:is(.vjp-produtividade, .vjp-metricas-rota) .vj-dr-pct-valor { font-size: 1.75rem; font-weight: 700; color: var(--vjp-texto); line-height: 1.2; }
:is(.vjp-produtividade, .vjp-metricas-rota) .vj-dr-pct--abaixo .vj-dr-pct-valor,
:is(.vjp-produtividade, .vjp-metricas-rota) .vj-dr-pct--abaixo .vj-dr-pct-linha,
:is(.vjp-produtividade, .vjp-metricas-rota) .vj-dr-prod-abaixo { color: var(--vjp-perigo); font-weight: 600; }
:is(.vjp-produtividade, .vjp-metricas-rota) .vj-dr-pct-barra { position: relative; display: block; height: 0.5rem; border-radius: 9999px; background: var(--vjp-neutro-suave); }
:is(.vjp-produtividade, .vjp-metricas-rota) .vj-dr-pct-preenchido { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9999px; background: var(--vjp-primaria); }
:is(.vjp-produtividade, .vjp-metricas-rota) .vj-dr-pct-minimo { position: absolute; top: -0.1875rem; bottom: -0.1875rem; width: 2px; transform: translateX(-1px); background: var(--vjp-texto); }
:is(.vjp-produtividade, .vjp-metricas-rota) .vj-dr-pct-linha { font-size: 15px; color: var(--vjp-texto-suave); }
:is(.vjp-produtividade, .vjp-metricas-rota) .vj-dr-indeterminado { display: grid; gap: 0.15rem; }
:is(.vjp-produtividade, .vjp-metricas-rota) .vj-dr-indeterminado-traco { font-size: 1.75rem; font-weight: 700; color: var(--vjp-texto); }
:is(.vjp-produtividade, .vjp-metricas-rota) .vj-dr-indeterminado-motivo { font-size: 15px; color: var(--vjp-texto-suave); }
:is(.vjp-produtividade, .vjp-metricas-rota) .vj-dr-prod-grupo th { background: var(--vjp-neutro-suave); color: var(--vjp-texto-suave); font-size: 0.875rem; font-weight: 600; white-space: normal; }
@media (max-width: 640px) {
    :is(.vjp-produtividade, .vjp-metricas-rota) .vj-dr-prod-grupo { display: block; padding: 0; }
    :is(.vjp-produtividade, .vjp-metricas-rota) .vj-dr-prod-grupo th { display: block; padding: 0.4rem 0.5rem; border: 0; border-radius: var(--vjp-raio); }
}

/* DR05 (D-DR3) — bloco "Rota: planejado × realizado" no portal: gráfico dos 14 dias (planejado = contorno, atendido =
   primária, plano sem atendimento = tracejado perigo, "sem atividade"), barra do plano cumprido, atendimentos por
   período e etiquetas "Manhã 3 de 3" (abaixo do plano em perigo). Só tokens --vjp-*. */
.vjp-metricas-rota .vj-dr-rota-periodo { display: grid; gap: 0.75rem; }
.vjp-metricas-rota .vj-dr-rota-grafico { margin: 0.75rem 0; padding: 0.75rem; border: 1px solid var(--vjp-borda); border-radius: var(--vjp-raio); background: var(--vjp-cartao); }
.vjp-metricas-rota .vj-dr-rota-grafico-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.5rem; color: var(--vjp-texto); }
.vjp-metricas-rota .vj-dr-rota-legenda { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; font-size: 0.875rem; color: var(--vjp-texto-suave); }
.vjp-metricas-rota .vj-dr-rota-amostra { display: inline-block; width: 0.75rem; height: 0.75rem; margin-right: 0.25rem; vertical-align: -0.125rem; border-radius: 2px; }
.vjp-metricas-rota .vj-dr-rota-amostra--plano { border: 1.5px solid var(--vjp-texto-suave); }
.vjp-metricas-rota .vj-dr-rota-amostra--feito { background: var(--vjp-primaria); }
.vjp-metricas-rota .vj-dr-rota-amostra--tracejado { border: 1.5px dashed var(--vjp-perigo); }
.vjp-metricas-rota .vj-dr-rota-barras { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 0.375rem; align-items: end; }
.vjp-metricas-rota .vj-dr-rota-dia { display: grid; gap: 0.25rem; min-width: 0; text-align: center; }
.vjp-metricas-rota .vj-dr-rota-coluna { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 7rem; border-bottom: 1px solid var(--vjp-borda); }
.vjp-metricas-rota .vj-dr-rota-barra-plano { position: absolute; left: 0; right: 0; bottom: 0; border: 1.5px solid var(--vjp-texto-suave); border-bottom: 0; border-radius: 3px 3px 0 0; }
.vjp-metricas-rota .vj-dr-rota-barra-feito { position: absolute; left: 22%; right: 22%; bottom: 0; background: var(--vjp-primaria); border-radius: 3px 3px 0 0; }
.vjp-metricas-rota .vj-dr-rota-dia--tracejado .vj-dr-rota-barra-plano { border: 1.5px dashed var(--vjp-perigo); border-bottom: 0; background: var(--vjp-perigo-suave); }
.vjp-metricas-rota .vj-dr-rota-sem { margin-bottom: 0.25rem; writing-mode: vertical-rl; rotate: 180deg; font-size: 0.6875rem; color: var(--vjp-texto-suave); white-space: nowrap; }
.vjp-metricas-rota .vj-dr-rota-eixo { font-size: 0.75rem; line-height: 1.2; color: var(--vjp-texto-suave); }
.vjp-metricas-rota .vj-dr-rota-empilhada { display: flex; height: 0.5rem; overflow: hidden; border-radius: 9999px; background: var(--vjp-neutro-suave); }
.vjp-metricas-rota .vj-dr-rota-parte--0 { background: var(--vjp-primaria); }
.vjp-metricas-rota .vj-dr-rota-parte--1 { background: var(--vjp-primaria-suave); }
.vjp-metricas-rota .vj-dr-rota-parte--2 { background: var(--vjp-texto-suave); }
.vjp-metricas-rota .vj-dr-rota-etiquetas { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.125rem; }
.vjp-metricas-rota .vj-dr-rota-etiqueta { padding: 0 0.375rem; border: 1px solid var(--vjp-borda); border-radius: 9999px; font-size: 0.8125rem; color: var(--vjp-texto-suave); white-space: nowrap; }
.vjp-metricas-rota .vj-dr-rota-etiqueta--abaixo { border-color: var(--vjp-perigo); background: var(--vjp-perigo-suave); color: var(--vjp-perigo); font-weight: 600; }
@media (max-width: 640px) {
    .vjp-metricas-rota .vj-dr-rota-barras { gap: 0.125rem; }
    .vjp-metricas-rota .vj-dr-rota-coluna { height: 5.5rem; }
    .vjp-metricas-rota .vj-dr-rota-eixo, .vjp-metricas-rota .vj-dr-rota-sem { font-size: 0.625rem; }
}
/* No 390 (cartão por linha), "Plano → feito" e "R$ por hora no dia" empilham o rótulo sobre o texto e as etiquetas — em linha, o rótulo
   espreme e a tabela passa da tela (mesma armadilha da Observação, PR05). */
@media (max-width: 900px) {
    .vjp-metricas-rota td[data-rotulo="Plano → feito"], .vjp-metricas-rota td[data-rotulo="R$ por hora no dia"] { flex-direction: column; gap: 0.25rem; white-space: normal; }
    .vjp-metricas-rota td[data-rotulo="Plano → feito"]::before, .vjp-metricas-rota td[data-rotulo="R$ por hora no dia"]::before { flex: 0 0 auto; }
}