/* ============================================================================
   CRM Siscomp - Folha de estilos base
   Paleta neutra suave (cinza-azulado) + cor primária configurável por empresa
   (definida via variável inline --cor-primaria no <body>, a partir do banco)
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
    /* Cor primária - valor de fallback; sobrescrita inline por empresa */
    --cor-primaria: #2D6CDF;
    --cor-primaria-escura: #2255B5;
    --cor-primaria-suave: #EAF1FD;

    /* Neutros */
    --bg: #F6F7FA;
    --superficie: #FFFFFF;
    --borda: #E3E6EC;
    --texto: #1F2430;
    --texto-secundario: #6B7280;
    --texto-terciario: #9AA1AF;

    /* Semânticas */
    --sucesso: #2F9E62;
    --sucesso-suave: #E7F6ED;
    --alerta: #C2841A;
    --alerta-suave: #FBF0DD;
    --perigo: #D64545;
    --perigo-suave: #FBEAEA;
    --info: #3B7DDB;
    --info-suave: #EAF1FD;

    /* Prioridades (escala do mais urgente ao menos urgente) */
    --prio-muito-alta: #C0392B;
    --prio-alta: #D9822B;
    --prio-media: #C9A227;
    --prio-baixa: #3B7DDB;
    --prio-muito-baixa: #8A94A6;

    /* Layout */
    --raio: 10px;
    --raio-pequeno: 6px;
    --sombra: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    --sombra-elevada: 0 4px 12px rgba(16, 24, 40, 0.10);
    --sidebar-largura: 260px;
    --topbar-altura: 64px;

    /* Superfícies escuras da marca (rodapé das páginas públicas, cartão do guia): trocáveis por tema */
    --marca-escura: #1E2A4A;
    --marca-escura-apoio: #A9B6D8;
    --marca-escura-texto: #D6DDF0;
    --rodape-fundo: #1F2430;
    --rodape-texto: #9AA1AF;
    --rodape-linha: #333A47;

    --fonte-corpo: 'Inter', system-ui, -apple-system, sans-serif;
    --fonte-titulo: 'Manrope', 'Inter', system-ui, sans-serif;
}

.icone-svg { vertical-align: middle; display: inline-block; flex-shrink: 0; }
.menu-toggle { display: inline-flex; align-items: center; }
.topbar-notificacao { display: inline-flex; align-items: center; }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--texto);
    font-family: var(--fonte-corpo);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    font-weight: 700;
    color: var(--texto);
    margin: 0 0 .5rem 0;
    letter-spacing: -0.01em;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

a { color: var(--cor-primaria); text-decoration: none; }
a:hover { text-decoration: underline; }

p { margin: 0 0 .75rem 0; }

:focus-visible {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
}

/* ============================== LAYOUT ================================== */

.app-layout {
    display: flex;
    min-height: 100vh;
}

/* -------- Sidebar -------- */
.sidebar {
    width: var(--sidebar-largura);
    flex-shrink: 0;
    background: var(--superficie);
    border-right: 1px solid var(--borda);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 40;
    transition: transform .2s ease;
}

.sidebar-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.5rem 1rem;
    border-bottom: 1px solid var(--borda);
}
.sidebar-logo img { max-width: 100%; max-height: 56px; object-fit: contain; }
.sidebar-logo .logo-texto {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--cor-primaria);
    text-align: center;
    line-height: 1.25;
}
.sidebar-logo .logo-texto-com-imagem {
    font-size: .82rem;
    font-weight: 600;
    color: var(--texto-secundario);
}

/* ---- Seletor de ambiente (Vendas / Pós-venda) - clique no logo ---- */
:root { --cor-pos-venda: #0E7C72; --cor-pos-venda-suave: #E3F4F2; --cor-marketing: #7A3FD1; --cor-marketing-suave: #F1EAFB; }
button.sidebar-logo-seletor {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--borda);
    font: inherit;
    cursor: pointer;
    transition: background .15s ease;
}
button.sidebar-logo-seletor:hover { background: var(--bg); }
button.sidebar-logo-seletor:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: -2px; }
.ambiente-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    background: var(--cor-primaria-suave);
    color: var(--cor-primaria);
}
.sidebar-ambiente-pos_venda .ambiente-chip { background: var(--cor-pos-venda-suave); color: var(--cor-pos-venda); }
.sidebar-ambiente-pos_venda .sidebar-nav a.ativo { color: var(--cor-pos-venda); background: var(--cor-pos-venda-suave); }
.sidebar-ambiente-marketing .ambiente-chip { background: var(--cor-marketing-suave); color: var(--cor-marketing); }
.sidebar-ambiente-marketing .sidebar-nav a.ativo { color: var(--cor-marketing); background: var(--cor-marketing-suave); }

.seletor-ambiente-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .55);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    z-index: 200;
}
.seletor-ambiente-overlay[hidden] { display: none; }
.seletor-ambiente-caixa {
    position: relative;
    width: 100%; max-width: 940px;
    max-height: calc(100vh - 2rem); overflow-y: auto;
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--cor-primaria) 8%, transparent), transparent 45%),
        radial-gradient(circle at 95% 100%, color-mix(in srgb, var(--cor-marketing) 7%, transparent), transparent 45%),
        var(--superficie);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    padding: 1.75rem 2rem 2rem;
    animation: amb-caixa-entra .3s cubic-bezier(.2, .9, .3, 1.1) both;
}
.seletor-ambiente-caixa h2 { margin: 0 0 .35rem; font-size: 1.45rem; }
.seletor-ambiente-sub { margin: 0; color: var(--texto-secundario); font-size: .9rem; }
.seletor-ambiente-fechar {
    position: absolute; top: .75rem; right: .75rem;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: var(--raio-pequeno);
    color: var(--texto-secundario); cursor: pointer;
}
.seletor-ambiente-fechar:hover { background: var(--bg); color: var(--texto); }

/* Cores por ambiente: cada nó, painel e a própria órbita usam --amb-cor */
.amb-cor-vendas    { --amb-cor: var(--cor-primaria);  --amb-cor-suave: var(--cor-primaria-suave); }
.amb-cor-pos_venda { --amb-cor: var(--cor-pos-venda); --amb-cor-suave: var(--cor-pos-venda-suave); }
.amb-cor-marketing { --amb-cor: var(--cor-marketing); --amb-cor-suave: var(--cor-marketing-suave); }

.amb-cabecalho { padding-right: 2.5rem; margin-bottom: .5rem; }
.amb-data {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .75rem; font-weight: 600; color: var(--texto-secundario);
    margin-bottom: .35rem;
}
.amb-corpo { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 1.5rem 2.25rem; align-items: center; }

/* ---- Órbita: centro (usuário), anéis girando, feixe e os três nós ---- */
.amb-orbita {
    --raio-orbita: 158px;
    --no: 100px;
    --centro: 128px;
    position: relative;
    width: 100%; max-width: 440px; aspect-ratio: 1;
    margin: 1.5rem auto 0;
}
.amb-orbita.amb-foco-bloqueado { --amb-cor: var(--texto-terciario); }
.amb-anel { position: absolute; border-radius: 50%; pointer-events: none; }
.amb-anel-trilha {
    inset: calc(50% - var(--raio-orbita));
    background: conic-gradient(from 0deg, var(--cor-primaria), var(--cor-pos-venda), var(--cor-marketing), var(--cor-primaria));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    opacity: .35;
    animation: amb-girar 18s linear infinite;
}
.amb-anel-externo {
    inset: calc(50% - var(--raio-orbita) - 34px);
    border: 1.5px dashed color-mix(in srgb, var(--texto-terciario) 45%, transparent);
    animation: amb-girar 70s linear infinite reverse;
}
.amb-anel-interno {
    inset: calc(50% - var(--raio-orbita) + 52px);
    background: radial-gradient(circle, color-mix(in srgb, var(--amb-cor) 10%, transparent), transparent 70%);
    transition: background .4s ease;
}
.amb-feixe {
    position: absolute; left: 50%; top: 50%;
    width: var(--raio-orbita); height: 3px; margin-top: -1.5px;
    border-radius: 3px;
    transform-origin: 0 50%;
    transform: rotate(var(--feixe-ang, -90deg));
    background: linear-gradient(90deg, transparent 35%, var(--amb-cor));
    transition: transform .6s cubic-bezier(.3, 1.25, .5, 1);
    pointer-events: none;
}
.amb-centro {
    position: absolute; left: 50%; top: 50%; z-index: 1;
    width: var(--centro); height: var(--centro);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    background: var(--superficie);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--amb-cor) 12%, transparent), 0 10px 28px rgba(16, 24, 40, .12);
    transition: box-shadow .4s ease;
    text-align: center;
}
.amb-centro-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.15rem; color: #fff;
    background: linear-gradient(135deg, var(--amb-cor), color-mix(in srgb, var(--amb-cor) 65%, #000));
    margin-bottom: .2rem;
    transition: background .4s ease;
}
.amb-centro-saudacao { font-size: .72rem; color: var(--texto-secundario); line-height: 1.1; }
.amb-centro-nome { font-family: var(--fonte-titulo); font-size: .95rem; line-height: 1.15; max-width: calc(var(--centro) - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.amb-no {
    position: absolute; left: 50%; top: 50%; z-index: 2;
    width: var(--no); height: var(--no);
    padding: 0; border: none; background: none; font: inherit; color: var(--texto);
    border-radius: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%) rotate(var(--ang)) translateX(var(--raio-orbita)) rotate(calc(var(--ang) * -1));
}
.amb-no:focus-visible { outline: none; }
.amb-no-bolha {
    position: relative;
    width: 100%; height: 100%; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--superficie); color: var(--amb-cor);
    border: 2px solid color-mix(in srgb, var(--amb-cor) 35%, var(--borda));
    box-shadow: 0 6px 18px rgba(16, 24, 40, .10);
    transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), background .25s ease, color .25s ease, box-shadow .3s ease, border-color .25s ease;
    animation: amb-surgir .6s cubic-bezier(.2, 1.3, .4, 1) backwards;
    animation-delay: calc(var(--i) * 90ms + 60ms);
}
.amb-no.selecionado .amb-no-bolha {
    background: linear-gradient(135deg, var(--amb-cor), color-mix(in srgb, var(--amb-cor) 68%, #000));
    color: #fff; border-color: transparent;
    transform: scale(1.12);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--amb-cor) 18%, transparent), 0 14px 30px color-mix(in srgb, var(--amb-cor) 38%, transparent);
}
.amb-no:focus-visible .amb-no-bolha { box-shadow: 0 0 0 3px var(--superficie), 0 0 0 6px var(--amb-cor); }
.amb-no.pendente:not(.selecionado) .amb-no-bolha::after {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid var(--amb-cor);
    animation: amb-pulso 2.4s ease-out infinite;
}
.amb-no-nome {
    position: absolute; top: calc(100% + .55rem); left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--fonte-titulo); font-weight: 700; font-size: .95rem;
    transition: color .25s ease, top .3s ease;
}
.amb-no.selecionado .amb-no-nome { color: var(--amb-cor); top: calc(100% + 1.05rem); }
/* Nó do topo: rótulo acima da bolha (do lado de fora da órbita, longe do centro) */
.amb-no[data-angulo="-90"] .amb-no-nome { top: auto; bottom: calc(100% + .55rem); transition: color .25s ease, bottom .3s ease; }
.amb-no[data-angulo="-90"].selecionado .amb-no-nome { top: auto; bottom: calc(100% + 1.05rem); }
.amb-no-contador {
    position: absolute; top: -3px; right: -3px;
    min-width: 26px; height: 26px; padding: 0 .4rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 13px; border: 2px solid var(--superficie);
    background: var(--tom, var(--alerta)); color: #fff;
    font-size: .75rem; font-weight: 700;
    animation: amb-surgir .4s cubic-bezier(.2, 1.4, .4, 1) backwards;
}
.amb-no-contador[hidden] { display: none; }
.amb-no-marca {
    position: absolute; bottom: 2px; right: 2px;
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--superficie); color: var(--amb-cor);
    border: 1.5px solid color-mix(in srgb, var(--amb-cor) 35%, var(--borda));
}
.amb-no.bloqueado .amb-no-bolha { filter: grayscale(1); opacity: .5; border-style: dashed; box-shadow: none; }
.amb-no.bloqueado.selecionado .amb-no-bolha { background: var(--bg); color: var(--texto-secundario); border-color: var(--texto-terciario); transform: scale(1.06); opacity: .85; }
.amb-no.bloqueado .amb-no-nome { color: var(--texto-terciario); }
.amb-no.bloqueado { cursor: help; }

/* ---- Painel de detalhes do ambiente em foco ---- */
.amb-painel { min-height: 340px; display: flex; flex-direction: column; justify-content: center; }
.amb-detalhe { display: flex; flex-direction: column; gap: .85rem; animation: amb-painel-entra .35s ease both; }
.amb-detalhe[hidden] { display: none; }
.amb-detalhe-topo { display: flex; align-items: center; gap: .85rem; }
.amb-detalhe-topo h3 { margin: 0 0 .2rem; font-size: 1.4rem; }
.amb-detalhe-icone {
    flex-shrink: 0;
    width: 54px; height: 54px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--amb-cor), color-mix(in srgb, var(--amb-cor) 68%, #000));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--amb-cor) 30%, transparent);
}
.amb-detalhe.bloqueado .amb-detalhe-icone { background: var(--bg); color: var(--texto-terciario); box-shadow: none; border: 1.5px dashed var(--texto-terciario); }
.amb-detalhe-desc { margin: 0; color: var(--texto-secundario); font-size: .92rem; line-height: 1.5; }
.amb-detalhe-recursos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.amb-detalhe-recursos li {
    font-size: .76rem; font-weight: 600;
    padding: .25rem .65rem; border-radius: 999px;
    background: var(--amb-cor-suave); color: var(--amb-cor);
}
.amb-detalhe.bloqueado .amb-detalhe-recursos li { background: var(--bg); color: var(--texto-secundario); }

.amb-resumo { display: flex; flex-direction: column; gap: .55rem; }
.amb-resumo-titulo { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-terciario); }
.tom-perigo { --tom: var(--perigo); }
.tom-alerta { --tom: var(--alerta); }
.tom-info   { --tom: var(--info); }
.tom-neutro { --tom: var(--texto-secundario); }
.amb-resumo-destaque {
    display: flex; align-items: center; gap: .9rem;
    padding: .8rem 1rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tom) 8%, var(--superficie));
    border: 1px solid color-mix(in srgb, var(--tom) 28%, var(--borda));
    color: var(--texto);
    transition: transform .15s ease, box-shadow .15s ease;
}
.amb-resumo-destaque:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 24, 40, .08); }
.amb-resumo-destaque > .icone-svg { margin-left: auto; color: var(--tom); }
.amb-resumo-numero { font-family: var(--fonte-titulo); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--tom); min-width: 2.4rem; text-align: center; }
.amb-resumo-frase { font-size: .92rem; line-height: 1.35; }
.amb-resumo-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.amb-resumo-lista a { display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: var(--texto); padding: .15rem 0; }
.amb-resumo-lista a:hover { color: var(--amb-cor); text-decoration: none; }
.amb-resumo-qtd {
    min-width: 24px; height: 22px; padding: 0 .35rem; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .74rem; font-weight: 700;
    background: color-mix(in srgb, var(--tom) 13%, var(--superficie)); color: var(--tom);
}
.amb-resumo-vazio {
    display: flex; align-items: center; gap: .6rem;
    padding: .8rem 1rem; border-radius: 12px;
    background: var(--sucesso-suave); color: var(--sucesso);
    font-size: .88rem; font-weight: 600;
}
.amb-resumo-vazio .icone-svg { flex-shrink: 0; }
.amb-resumo-erro { margin: 0; font-size: .85rem; color: var(--texto-secundario); }
.amb-resumo-carregando { display: flex; flex-direction: column; gap: .45rem; }
.amb-resumo-carregando span {
    display: block; height: 54px; border-radius: 12px;
    background: linear-gradient(90deg, var(--bg) 25%, var(--borda) 50%, var(--bg) 75%);
    background-size: 200% 100%;
    animation: amb-brilho 1.2s linear infinite;
}
.amb-resumo-carregando span + span { height: 16px; width: 70%; border-radius: 8px; }
.amb-bloqueio {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: .85rem 1rem; border-radius: 12px;
    border: 1.5px dashed var(--borda); background: var(--bg);
    color: var(--texto-secundario); font-size: .86rem;
}
.amb-bloqueio .icone-svg { flex-shrink: 0; margin-top: .1rem; }
.amb-bloqueio strong { display: block; color: var(--texto); margin-bottom: .15rem; }
.amb-acao { align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; }
.amb-entrar { background: var(--amb-cor); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--amb-cor) 30%, transparent); }
.amb-entrar:hover { filter: brightness(.94); }
.amb-entrar .icone-svg { transition: transform .2s ease; }
.amb-entrar:hover .icone-svg { transform: translateX(3px); }

@keyframes amb-girar { to { transform: rotate(360deg); } }
@keyframes amb-surgir { from { opacity: 0; transform: scale(.3); } }
@keyframes amb-pulso { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes amb-painel-entra { from { opacity: 0; transform: translateX(10px); } }
@keyframes amb-caixa-entra { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes amb-brilho { to { background-position: -200% 0; } }

@media (max-width: 780px) {
    .seletor-ambiente-caixa { padding: 1.25rem 1rem 1.5rem; }
    .amb-corpo { grid-template-columns: 1fr; }
    .amb-orbita { --raio-orbita: 108px; --no: 74px; --centro: 96px; max-width: 320px; }
    .amb-orbita .amb-no-bolha .icone-svg:first-child { width: 26px; height: 26px; }
    .amb-centro-avatar { width: 34px; height: 34px; font-size: .95rem; }
    .amb-no-nome { font-size: .82rem; }
    .amb-painel { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .seletor-ambiente-caixa, .amb-anel, .amb-no-bolha, .amb-no-contador, .amb-detalhe,
    .amb-no.pendente .amb-no-bolha::after, .amb-resumo-carregando span { animation: none !important; }
    .amb-feixe, .amb-no-bolha { transition: none; }
}

.sidebar-nav { flex: 1; padding: .75rem .5rem; }
.sidebar-secao {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-terciario);
    padding: .75rem .75rem .3rem;
}
.sidebar-grupo-itens { display: flex; flex-direction: column; }
.sidebar-grupo.fechado .sidebar-grupo-itens { display: none; }
.sidebar-secao-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.sidebar-secao-seta { display: inline-flex; transition: transform .15s; color: var(--texto-terciario); }
.sidebar-grupo.fechado .sidebar-secao-seta { transform: rotate(0deg); }
.sidebar-grupo:not(.fechado) .sidebar-secao-seta { transform: rotate(90deg); }
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .42rem .75rem;
    border-radius: var(--raio-pequeno);
    color: var(--texto-secundario);
    font-weight: 500;
    font-size: .85rem;
    text-decoration: none;
    margin-bottom: 1px;
    position: relative;
}
.sidebar-nav a:hover { background: var(--bg); color: var(--texto); }
.sidebar-nav-futuro {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .42rem .75rem;
    border-radius: var(--raio-pequeno);
    color: var(--texto-terciario);
    font-weight: 500;
    font-size: .85rem;
    margin-bottom: 1px;
    cursor: default;
}
.sidebar-nav-futuro .badge { margin-left: auto; }

/* Chips de filtro (checkbox como botão-pílula) */
.chips-filtro { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.chip-filtro { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.chip-filtro input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-filtro span { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .8rem; border: 1px solid var(--borda); border-radius: 999px; font-size: .82rem; font-weight: 500; color: var(--texto-secundario); background: var(--superficie); user-select: none; transition: background .15s, border-color .15s, color .15s; }
.chip-filtro:hover span { border-color: var(--cor-primaria); color: var(--texto); }
.chip-filtro input:checked + span { background: var(--cor-primaria-suave); border-color: var(--cor-primaria); color: var(--cor-primaria); font-weight: 700; }
.chip-filtro input:focus-visible + span { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* Sidebar: item Kanban expansível (um quadro por objetivo) */
.sidebar-subgrupo-cabecalho { display: flex; align-items: center; }
.sidebar-subgrupo-cabecalho > a { flex: 1; min-width: 0; }
.sidebar-subgrupo-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 2px; background: none; border: none; border-radius: var(--raio-pequeno); color: var(--texto-terciario); cursor: pointer; }
.sidebar-subgrupo-toggle:hover { background: var(--bg); color: var(--texto); }
.sidebar-subgrupo-toggle svg { transition: transform .15s; transform: rotate(90deg); }
.sidebar-subgrupo.fechado .sidebar-subgrupo-toggle svg { transform: rotate(0deg); }
.sidebar-subgrupo-itens { display: flex; flex-direction: column; max-height: 40vh; overflow-y: auto; margin: 0 0 .2rem 1.35rem; padding-left: .35rem; border-left: 1px solid var(--borda); }
.sidebar-subgrupo.fechado .sidebar-subgrupo-itens { display: none; }
.sidebar-nav .sidebar-subgrupo-itens a { padding: .32rem .6rem; font-size: .82rem; }
.sidebar-subitem-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Integrações (vitrine de cards) */
.grade-integracoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.cartao-integracao { display: flex; gap: 1rem; align-items: flex-start; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
a.cartao-integracao:hover { border-color: var(--cor-primaria); box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-1px); }
.cartao-integracao .cartao-integracao-icone-multi { height: auto; flex-direction: column; padding: .6rem 0; gap: .5rem; }
.cartao-integracao-icone svg { flex-shrink: 0; }
.cartao-integracao-futuro { opacity: .65; cursor: default; }
.cartao-integracao-icone { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cartao-integracao-titulo { font-weight: 700; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cartao-integracao-corpo p { margin: .35rem 0 .75rem; font-size: .88rem; color: var(--texto-secundario); }
.cartao-integracao-acao { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 600; color: var(--cor-primaria); }
.cartao-integracao-acao-futuro { color: var(--texto-terciario); font-weight: 500; }

/* Recurso bloqueado por plano - conteúdo real fica borrado embaixo, o
   aviso (blocoRecursoBloqueado(), includes/planos.php) fica por cima */
.recurso-bloqueado {
    filter: blur(3px);
    opacity: .5;
    pointer-events: none;
    position: relative;
    user-select: none;
}
.recurso-bloqueado-aviso {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    text-align: center;
    padding: 1rem;
    filter: none;
    opacity: 1;
    pointer-events: auto;
    z-index: 5;
    background: rgba(255, 255, 255, .65);
    border-radius: 10px;
}
.recurso-bloqueado-aviso span { color: var(--texto-secundario); font-size: .85rem; }
.sidebar-nav a.ativo { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); font-weight: 600; }
.sidebar-nav a .icone { width: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--texto-terciario); }
.sidebar-nav a:hover .icone, .sidebar-nav a.ativo .icone { color: var(--cor-primaria-escura); }
.sidebar-nav .badge-contador {
    margin-left: auto;
    background: var(--perigo);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}

.sidebar-rodape {
    border-top: 1px solid var(--borda);
    padding: .85rem 1rem;
    font-size: .82rem;
    color: var(--texto-secundario);
}
.sidebar-rodape .usuario-nome { font-weight: 600; color: var(--texto); display: block; }
.sidebar-rodape a { color: var(--texto-secundario); font-size: .8rem; }

.credito-siscomp {
    display: block;
    margin-top: .5rem;
    font-size: .68rem !important;
    color: var(--texto-terciario) !important;
    text-decoration: none;
}
.credito-siscomp:hover { color: var(--texto-secundario) !important; text-decoration: underline; }
.credito-siscomp-publico { text-align: center; padding: 1rem 0 .5rem; }

/* -------- Conteúdo principal -------- */
.app-main {
    margin-left: var(--sidebar-largura);
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: margin-left .2s ease;
}

/* Sidebar recolhida (alternada pelo botão de menu no topbar, lembrada via
   localStorage - ver assets/js/app.js). Reaproveita o mesmo mecanismo de
   transform usado no overlay mobile, só que persistente em telas largas. */
body.sidebar-recolhida .sidebar { transform: translateX(-100%); }
body.sidebar-recolhida .app-main { margin-left: 0; }

.topbar {
    height: var(--topbar-altura);
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 30;
}
.topbar .menu-toggle { display: inline-flex; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--texto); }
.topbar-titulo-grupo { display: flex; align-items: center; gap: .85rem; min-width: 0; flex-shrink: 0; }
.topbar-acoes { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.topbar-notificacao { position: relative; font-size: 1.15rem; color: var(--texto-secundario); }

/* -------- Busca global no topbar (visível em toda tela logada) -------- */
/* margin-left:auto empurra a busca (e as ações depois dela) pra direita,
   sem esticar o campo pela barra toda - largura fixa, não flex:1. */
.topbar-busca { position: relative; width: 220px; flex-shrink: 0; margin-left: auto; margin-right: 1.25rem; }
.topbar-busca-icone {
    position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
    color: var(--texto-terciario); pointer-events: none; display: inline-flex;
}
.topbar-busca input {
    width: 100%; padding: .5rem .75rem .5rem 2.4rem;
    border: 1px solid var(--borda); border-radius: var(--raio-pequeno);
    background: var(--bg); font-size: .88rem; font-family: var(--fonte-corpo);
    text-align: right;
}
.topbar-busca input:focus {
    background: var(--superficie); border-color: var(--cor-primaria); outline: none;
    box-shadow: 0 0 0 3px var(--cor-primaria-suave);
}
.topbar-busca-resultados {
    display: none;
    position: absolute; top: calc(100% + 6px); right: 0;
    width: 360px; max-width: calc(100vw - 3rem);
    background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra-elevada); max-height: 60vh; overflow-y: auto; z-index: 60;
}
.topbar-busca-resultados.aberto { display: block; }
.topbar-busca-resultados .resultado-busca-global {
    border: none; border-radius: 0; border-bottom: 1px solid var(--borda);
}
.topbar-busca-resultados .resultado-busca-global:last-child { border-bottom: none; }
.topbar-busca-resultados .resultado-busca-global:hover,
.topbar-busca-resultados .resultado-busca-global.selecionado { background: var(--cor-primaria-suave); }
.topbar-busca-status { padding: .75rem .9rem; font-size: .82rem; color: var(--texto-secundario); }
@media (max-width: 780px) {
    .topbar-busca { display: none; }
}
.topbar-notificacao .badge-contador {
    position: absolute; top: -6px; right: -8px;
    background: var(--perigo); color: #fff; font-size: .65rem; font-weight: 700;
    padding: 1px 5px; border-radius: 999px;
}

.conteudo { padding: 1.75rem; flex: 1; }

/* ============================== COMPONENTES ============================== */

.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.25rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .6rem 1.1rem;
    border-radius: var(--raio-pequeno);
    font-family: var(--fonte-corpo);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: filter .12s ease, background .12s ease;
}
.btn:hover { text-decoration: none; filter: brightness(0.96); }
.btn-primario { background: var(--cor-primaria); color: #fff; }
.btn-secundario { background: #fff; color: var(--texto); border-color: var(--borda); }
.btn-perigo { background: var(--perigo); color: #fff; }
.btn-email { background: var(--info-suave); color: var(--info); border-color: var(--info); }
.btn-whatsapp { background: #25D366; color: #fff; }
.btn-sm { padding: .4rem .8rem; font-size: .82rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.cartao-sticky { position: sticky; top: calc(var(--topbar-altura) + 1rem); }

/* Botão só ícone (ações de manutenção em linhas de lista - ver/editar/
   excluir/etc) - compacto, sem texto, título via atributo title/aria-label
   pra acessibilidade. Cor neutra por padrão, variantes tingem no hover. */
.btn-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--raio-pequeno);
    border: 1px solid var(--borda);
    background: var(--superficie);
    color: var(--texto-secundario);
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.btn-icone:hover { background: var(--bg); color: var(--texto); text-decoration: none; }
.btn-icone-perigo:hover { background: var(--perigo-suave); color: var(--perigo); border-color: var(--perigo); }
.btn-icone-sucesso:hover { background: var(--sucesso-suave); color: var(--sucesso); border-color: var(--sucesso); }
.btn-icone-alerta:hover { background: var(--alerta-suave); color: var(--alerta); border-color: var(--alerta); }
.btn-icone-primario { background: var(--cor-primaria); color: #fff; border-color: var(--cor-primaria); }
.btn-icone-primario:hover { filter: brightness(.94); background: var(--cor-primaria); color: #fff; }

.zoom-controle { display: inline-flex; align-items: center; gap: .4rem; }
.zoom-controle .btn-icone { width: 28px; height: 28px; font-size: 1.05rem; font-weight: 700; line-height: 1; user-select: none; }
.zoom-rotulo { font-size: .8rem; color: var(--texto-secundario); min-width: 40px; text-align: center; }

/* ---------- Lista de registros (padrão pra clientes, e reaproveitável em
   outras telas de listagem: avatar maior à esquerda, título em destaque,
   metadados numa linha secundária discreta, ações só-ícone à direita) --- */
.lista-registros { display: flex; flex-direction: column; }
.linha-registro {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--borda);
}
.linha-registro:last-child { border-bottom: none; }
.linha-registro:hover { background: var(--bg); }
.linha-registro-avatar { flex-shrink: 0; text-decoration: none; }
.linha-registro-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.linha-registro-titulo {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    font-size: 1rem;
    font-weight: 700;
    color: var(--texto);
    text-decoration: none;
}
.linha-registro-titulo:hover { color: var(--cor-primaria); text-decoration: none; }
.linha-registro-subtitulo { font-size: .86rem; color: var(--texto-secundario); }
.linha-registro-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    font-size: .82rem;
    color: var(--texto-secundario);
}
.linha-registro-meta-item { display: inline-flex; align-items: center; gap: .3rem; }
.linha-registro-meta-item .icone-svg { flex-shrink: 0; color: var(--texto-terciario); }
.linha-registro-acoes { flex-shrink: 0; display: flex; gap: .4rem; align-items: center; }
@media (max-width: 640px) {
    .linha-registro { flex-wrap: wrap; }
    .linha-registro-acoes { margin-left: auto; }
}

/* Prioridade como faixa colorida à esquerda da linha (em vez de mais um
   texto/ícone na meta) - mesmo espírito do border-top do card do Kanban. */
.linha-registro-prioridade { border-left: 4px solid transparent; padding-left: calc(1.25rem - 4px); }
.linha-registro-prioridade.prioridade-muito-alta { border-left-color: var(--prio-muito-alta); }
.linha-registro-prioridade.prioridade-alta       { border-left-color: var(--prio-alta); }
.linha-registro-prioridade.prioridade-media      { border-left-color: var(--prio-media); }
.linha-registro-prioridade.prioridade-baixa      { border-left-color: var(--prio-baixa); }
.linha-registro-prioridade.prioridade-muito-baixa{ border-left-color: var(--prio-muito-baixa); }

.badge {
    display: inline-flex;
    align-items: center;
    padding: .18rem .6rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
}
.badge-sucesso { background: var(--sucesso-suave); color: var(--sucesso); }
.badge-alerta  { background: var(--alerta-suave); color: var(--alerta); }
.badge-perigo  { background: var(--perigo-suave); color: var(--perigo); }
.badge-info    { background: var(--info-suave); color: var(--info); }
.badge-neutro  { background: var(--bg); color: var(--texto-secundario); }

/* Cor das etapas (objetivos de vendas e tipos de atendimento) */
.cor-etapa-info    { --cor-etapa: var(--info); }
.cor-etapa-alerta  { --cor-etapa: var(--alerta); }
.cor-etapa-sucesso { --cor-etapa: var(--sucesso); }
.cor-etapa-perigo  { --cor-etapa: var(--perigo); }
.cor-etapa-neutro  { --cor-etapa: var(--texto-secundario); }
.etapa-cor-ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-right: .4rem; vertical-align: middle; background: var(--cor-etapa, var(--borda)); }

/* Editor de etapas do objetivo (nome, cor, ordem) */
.linha-etapa-objetivo { display: grid; grid-template-columns: 30px minmax(0, 1fr) 150px 34px; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.linha-etapa-objetivo input[type=text], .linha-etapa-objetivo select { width: 100%; min-width: 0; margin: 0; }
.linha-etapa-ordem { display: flex; flex-direction: column; gap: 2px; }
.linha-etapa-ordem .btn-icone { width: 30px; height: 19px; padding: 0; }
.linha-etapa-cor-campo { display: flex; align-items: center; }
@media (max-width: 560px) {
    .linha-etapa-objetivo { grid-template-columns: 30px 1fr 34px; }
    .linha-etapa-cor-campo { grid-column: 2; grid-row: 2; }
}

.prioridade-muito-alta  { color: var(--prio-muito-alta); }
.prioridade-alta        { color: var(--prio-alta); }
.prioridade-media       { color: var(--prio-media); }
.prioridade-baixa       { color: var(--prio-baixa); }
.prioridade-muito-baixa { color: var(--prio-muito-baixa); }

.status-andamento  { background: var(--info-suave); color: var(--info); }
.status-parado     { background: var(--alerta-suave); color: var(--alerta); }
.status-finalizada { background: var(--sucesso-suave); color: var(--sucesso); }

.fc-prioridade-muito-alta  { background: var(--prio-muito-alta); border-color: var(--prio-muito-alta); }
.fc-prioridade-alta        { background: var(--prio-alta); border-color: var(--prio-alta); }
.fc-prioridade-media       { background: var(--prio-media); border-color: var(--prio-media); }
.fc-prioridade-baixa       { background: var(--prio-baixa); border-color: var(--prio-baixa); }
.fc-prioridade-muito-baixa { background: var(--prio-muito-baixa); border-color: var(--prio-muito-baixa); }
.fc-event.fc-atrasada { outline: 2px dashed var(--perigo); outline-offset: 1px; }

/* No calendário, cores sólidas lado a lado (vermelho/laranja/amarelo) ficam
   parecidas demais e o texto perde legibilidade em cima delas. Preferimos
   fundo claro + borda/texto na cor da prioridade (mesmo padrão dos badges
   -suave do resto do sistema). "Atrasada" vira sinal à parte (borda
   esquerda vermelha grossa), não mistura com a cor de prioridade.
   Setamos background/border/color diretamente (não pelas variáveis
   --fc-event-*-color do FullCalendar - na prática elas não bateram com o
   que o bundle da CDN realmente usa) e com !important, porque o próprio
   FullCalendar aplica cor branca ao título/hora com uma regra mais
   específica que a herança normal não vence. */
#calendario-tarefas .fc-event.fc-prioridade-muito-alta  { background: #FBEAEA !important; border-color: var(--prio-muito-alta) !important; }
#calendario-tarefas .fc-event.fc-prioridade-alta        { background: #FDF1E3 !important; border-color: var(--prio-alta) !important; }
#calendario-tarefas .fc-event.fc-prioridade-media       { background: #FBF6DC !important; border-color: var(--prio-media) !important; }
#calendario-tarefas .fc-event.fc-prioridade-baixa       { background: #EAF1FD !important; border-color: var(--prio-baixa) !important; }
#calendario-tarefas .fc-event.fc-prioridade-muito-baixa { background: #F1F2F5 !important; border-color: var(--prio-muito-baixa) !important; }

#calendario-tarefas .fc-event.fc-prioridade-muito-alta  .fc-event-title,
#calendario-tarefas .fc-event.fc-prioridade-muito-alta  .fc-event-time { color: var(--prio-muito-alta) !important; }
#calendario-tarefas .fc-event.fc-prioridade-alta        .fc-event-title,
#calendario-tarefas .fc-event.fc-prioridade-alta        .fc-event-time { color: var(--prio-alta) !important; }
#calendario-tarefas .fc-event.fc-prioridade-media       .fc-event-title,
#calendario-tarefas .fc-event.fc-prioridade-media       .fc-event-time { color: #8A6D14 !important; }
#calendario-tarefas .fc-event.fc-prioridade-baixa       .fc-event-title,
#calendario-tarefas .fc-event.fc-prioridade-baixa       .fc-event-time { color: var(--prio-baixa) !important; }
#calendario-tarefas .fc-event.fc-prioridade-muito-baixa .fc-event-title,
#calendario-tarefas .fc-event.fc-prioridade-muito-baixa .fc-event-time { color: #5B6272 !important; }

#calendario-tarefas .fc-event.fc-atrasada {
    outline: none !important;
    border-left-width: 4px !important;
    border-left-color: var(--perigo) !important;
}

#calendario-tarefas .fc-event-title,
#calendario-tarefas .fc-event-time,
#calendario-tarefas .fc-list-event-title,
#calendario-tarefas .fc-list-event-time {
    font-size: .72rem;
    font-weight: 600;
}
#calendario-tarefas .fc-daygrid-event { padding: 1px 3px; }

/* Botões do cabeçalho (Mês/Semana/Dia/Hoje/navegação) na cor primária da
   empresa, em vez do azul padrão do FullCalendar - mesma variável usada
   em .btn-primario no resto do sistema. */
#calendario-tarefas .fc-button-primary {
    background: var(--cor-primaria) !important;
    border-color: var(--cor-primaria) !important;
}
#calendario-tarefas .fc-button-primary:hover {
    filter: brightness(0.9);
}
#calendario-tarefas .fc-button-primary:disabled {
    background: var(--cor-primaria) !important;
    border-color: var(--cor-primaria) !important;
    opacity: .5;
}
#calendario-tarefas .fc-button-primary:not(:disabled).fc-button-active,
#calendario-tarefas .fc-button-primary:not(:disabled):active {
    background: var(--cor-primaria) !important;
    border-color: var(--cor-primaria) !important;
    filter: brightness(0.82);
}
#calendario-tarefas .fc-button:focus,
#calendario-tarefas .fc-button-primary:not(:disabled):focus {
    box-shadow: none !important;
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
}

.legenda-prioridade {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
    font-size: .82rem;
    color: var(--texto-secundario);
}
.legenda-prioridade-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.legenda-prioridade-cor {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 4px;
}
.legenda-prioridade-cor.fc-atrasada {
    background: transparent;
    border: 2px dashed var(--perigo);
}
.legenda-prioridade { gap: .6rem 1.75rem; }
.legenda-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; }
.legenda-grupo-titulo { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-terciario); }
.legenda-barra-progresso { display: inline-block; width: 28px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--cor-primaria) 60%, var(--borda) 60%); }
/* Legenda à esquerda, zoom à direita, na mesma linha do rodapé */
.rodape-legenda-zoom { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; margin-top: 1rem; }
.rodape-legenda-zoom .legenda-prioridade { margin-top: 0; flex: 1; min-width: 260px; }
.rodape-legenda-zoom .zoom-controle { flex-shrink: 0; }

/* ------------------- Trajetória da tarefa (detalhe.php) ------------------- */

/* Padrão (sem preferência salva ainda, ou JS desabilitado): só timeline. */
#bloco-trajetoria-tarefa { display: none; }
[data-vis-tarefa="trajetoria"] #bloco-trajetoria-tarefa,
[data-vis-tarefa="ambas"]      #bloco-trajetoria-tarefa { display: block; }
[data-vis-tarefa="trajetoria"] #bloco-timeline-tarefa    { display: none; }

.tarefa-vis-toggle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: 1rem;
}
.tarefa-vis-opcao {
    font-family: var(--fonte-corpo);
    font-size: .8rem;
    font-weight: 600;
    color: var(--texto-secundario);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    padding: .35rem .75rem;
    cursor: pointer;
}
.tarefa-vis-opcao:hover { border-color: var(--cor-primaria); color: var(--texto); }
.tarefa-vis-opcao.ativa { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }

.trilho-wrap { overflow-x: auto; margin: 0 -.25rem; padding: 0 .25rem; }
.trilho { display: grid; grid-template-columns: 128px 1fr; min-width: 760px; }
.trilho-rotulos { display: flex; flex-direction: column; }
.trilho-rotulo {
    height: 76px;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--texto-secundario);
}
.trilho-rotulo .num {
    font-family: var(--fonte-corpo);
    font-size: .68rem;
    font-weight: 700;
    color: var(--texto-terciario);
    width: 1.1rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.trilho-rotulo.rotulo-atual { color: var(--texto); font-weight: 600; }

.trilho-svg-area svg { display: block; width: 100%; height: auto; overflow: visible; }

.linha-guia { stroke: var(--borda); stroke-width: 1; }

.segmento { fill: none; stroke: var(--cor-primaria); stroke-width: 2.5; stroke-linecap: round; }
.segmento.retrocesso { stroke: var(--alerta); stroke-dasharray: 5 4; }

.no {
    fill: var(--superficie);
    stroke: var(--cor-primaria);
    stroke-width: 2.5;
    cursor: pointer;
    transition: stroke-width .12s ease;
}
.no:hover { stroke-width: 3; }
.no.atual { stroke: var(--sucesso); }
.no-miolo { fill: var(--cor-primaria); }
.no-miolo.atual { fill: var(--sucesso); }
.no-atraso-anel { fill: none; stroke: var(--perigo); stroke-width: 2; stroke-dasharray: 3 3; }

.rotulo-segmento {
    font-family: var(--fonte-corpo);
    font-size: 10.5px;
    font-weight: 600;
    text-anchor: middle;
    fill: var(--texto-secundario);
    /* halo branco atrás do texto, pra não ficar ilegível cruzando a curva/linha-guia */
    paint-order: stroke fill;
    stroke: var(--superficie);
    stroke-width: 3px;
    stroke-linejoin: round;
}
.rotulo-segmento.retrocesso { fill: var(--alerta); }
.rotulo-segmento.atrasado { fill: var(--perigo); font-weight: 700; }

.legenda-trajetoria {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--borda);
    font-size: .78rem;
    color: var(--texto-secundario);
}
.legenda-trajetoria-item { display: inline-flex; align-items: center; gap: .45rem; }
.legenda-trajetoria-linha { width: 22px; height: 2.5px; border-radius: 2px; background: var(--cor-primaria); }
.legenda-trajetoria-linha.retrocesso { background: none; border-top: 2.5px dashed var(--alerta); height: 0; }
.legenda-trajetoria-ponto { width: .65rem; height: .65rem; border-radius: 999px; border: 2.5px solid var(--sucesso); background: var(--superficie); }
.legenda-trajetoria-ponto.atraso { border: 2px dashed var(--perigo); }

/* Formulários */
.campo { margin-bottom: 1.1rem; }
.campo label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .35rem; color: var(--texto); }
.ajuda { font-size: .82rem; color: var(--texto-terciario); }
.campo .ajuda { font-size: .78rem; color: var(--texto-terciario); margin-top: .3rem; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=datetime-local], input[type=time], input[type=number], input[type=tel], select, textarea {
    width: 100%;
    padding: .62rem .75rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    font-family: var(--fonte-corpo);
    font-size: .92rem;
    color: var(--texto);
    background: #fff;
}
input:focus, select:focus, textarea:focus { border-color: var(--cor-primaria); outline: none; box-shadow: 0 0 0 3px var(--cor-primaria-suave); }
textarea { resize: vertical; min-height: 90px; }

.alerta-msg {
    padding: .85rem 1rem;
    border-radius: var(--raio-pequeno);
    font-size: .88rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}
.alerta-msg.sucesso { background: var(--sucesso-suave); color: var(--sucesso); border-color: rgba(47,158,98,.25); }
.alerta-msg.erro    { background: var(--perigo-suave); color: var(--perigo); border-color: rgba(214,69,69,.25); }
.alerta-msg.info    { background: var(--info-suave); color: var(--info); border-color: rgba(59,125,219,.25); }

/* Tabelas */
table.tabela-padrao { width: 100%; border-collapse: collapse; background: var(--superficie); }
table.tabela-padrao th {
    text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--texto-terciario); padding: .75rem 1rem; border-bottom: 1px solid var(--borda);
}
table.tabela-padrao td { padding: .8rem 1rem; border-bottom: 1px solid var(--borda); font-size: .9rem; }
table.tabela-padrao tr:last-child td { border-bottom: none; }
table.tabela-padrao tr:hover td { background: var(--bg); }

/* ------------------------------ Propostas ---------------------------- */

.proposta-linha-resumo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .75rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    color: inherit;
    text-decoration: none;
}
.proposta-linha-resumo:hover { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); text-decoration: none; }

.tabela-itens-proposta td { vertical-align: middle; }
.tabela-itens-proposta .campo-busca { position: relative; }

/* ============================== RESPONSIVO ============================== */

@media (max-width: 880px) {
    .sidebar { transform: translateX(-100%); box-shadow: var(--sombra-elevada); }
    .sidebar.aberta { transform: translateX(0); }
    .app-main { margin-left: 0; }
    .conteudo { padding: 1.1rem; }
}

/* ============================== RELATÓRIOS ================================ */

.cartao-relatorio {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 1.1rem;
    box-shadow: var(--sombra);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}
.cartao-relatorio:hover { box-shadow: var(--sombra-elevada); border-color: var(--cor-primaria); text-decoration: none; transform: translateY(-1px); }
.cartao-relatorio-icone {
    width: 40px; height: 40px; border-radius: var(--raio-pequeno);
    background: var(--cor-primaria-suave); color: var(--cor-primaria-escura);
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Gráfico de barras verticais (funil, receita mensal) */
.grafico-barras { display: flex; align-items: flex-end; gap: 1rem; min-height: 200px; padding-top: 1rem; overflow-x: auto; }
.grafico-barra-coluna { display: flex; flex-direction: column; align-items: center; gap: .4rem; flex: 1; min-width: 46px; }
.grafico-barra-valor { font-size: .74rem; color: var(--texto-secundario); white-space: nowrap; }
.grafico-barra-trilha {
    width: 100%; max-width: 42px; height: 150px;
    background: var(--bg); border-radius: var(--raio-pequeno) var(--raio-pequeno) 0 0;
    display: flex; align-items: flex-end; overflow: hidden;
}
.grafico-barra-preenchida { width: 100%; background: var(--cor-primaria); border-radius: var(--raio-pequeno) var(--raio-pequeno) 0 0; min-height: 2px; transition: height .2s ease; }
.grafico-barra-rotulo { font-size: .74rem; color: var(--texto-secundario); text-align: center; white-space: nowrap; }

/* Duas barras lado a lado por coluna (orçado x realizado) */
.grafico-barras-duplas .grafico-barra-trilha-dupla { display: flex; align-items: flex-end; gap: 3px; background: none; }
.grafico-barras-duplas .grafico-barra-trilha-dupla .grafico-barra-preenchida { flex: 1; border-radius: var(--raio-pequeno) var(--raio-pequeno) 0 0; }

.legenda-cor { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }

/* Barra horizontal (ranking - vendedores, origem de leads, perdas por etapa) */
.grafico-barra-horizontal-trilha { background: var(--bg); border-radius: 999px; height: 10px; overflow: hidden; }
.grafico-barra-horizontal-preenchida { height: 100%; background: var(--cor-primaria); border-radius: 999px; min-width: 2px; transition: width .3s ease; }
.grafico-barra-horizontal-preenchida.sucesso { background: var(--sucesso); }
.grafico-barra-horizontal-preenchida.alerta  { background: var(--alerta); }

/* ============================== ÁREA PÚBLICA ============================= */

.topo-publico {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--borda);
    background: var(--superficie);
}
.topo-publico .marca {
    font-family: var(--fonte-titulo);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--cor-primaria);
}
.topo-publico .marca-logo { height: 34px; display: block; }
.topo-publico nav a { margin-left: 1.25rem; font-weight: 600; font-size: .9rem; color: var(--texto-secundario); }
.topo-publico nav a.destaque {
    background: var(--cor-primaria); color: #fff; padding: .55rem 1.1rem;
    border-radius: var(--raio-pequeno); text-decoration: none;
}
.topo-publico nav a.destaque:hover { text-decoration: none; filter: brightness(0.95); }

/* Tela de login/cadastro: cartão centralizado */
.auth-wrap {
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.cartao-auth {
    width: 100%;
    max-width: 420px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 2rem;
}
.cartao-auth h1 { font-size: 1.35rem; margin-bottom: .25rem; }
.cartao-auth .subtitulo { color: var(--texto-secundario); font-size: .88rem; margin-bottom: 1.5rem; }
.cartao-auth .rodape-form { text-align: center; margin-top: 1.25rem; font-size: .87rem; color: var(--texto-secundario); }
.cartao-auth .btn { width: 100%; }

.abas-cadastro { display: flex; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); overflow: hidden; margin-bottom: 1.5rem; }
.abas-cadastro a {
    flex: 1; text-align: center; padding: .6rem; font-size: .85rem; font-weight: 600;
    color: var(--texto-secundario); text-decoration: none; background: var(--bg);
}
.abas-cadastro a.ativa { background: var(--cor-primaria); color: #fff; }

/* Landing page */
.landing-cabecalho { text-align: center; max-width: 620px; margin: 0 auto 2.75rem; }
.landing-cabecalho .eyebrow {
    display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--cor-primaria); margin-bottom: .75rem;
}
.landing-cabecalho h2 { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.9rem; margin: 0 0 .6rem; }
.landing-cabecalho p { font-size: .95rem; color: var(--texto-secundario); margin: 0; }

.landing-hero {
    max-width: 1220px; margin: 0 auto; padding: 4rem 1.5rem 3rem;
    display: flex; align-items: center; gap: 3.5rem;
}
.landing-hero-texto { flex: 1 1 460px; min-width: 0; }
.landing-hero-texto .eyebrow {
    display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--cor-primaria-escura); background: var(--cor-primaria-suave);
    padding: .3rem .85rem; border-radius: 999px; margin-bottom: 1.25rem;
}
.landing-hero-texto h1 { font-size: 2.3rem; line-height: 1.15; margin: 0 0 1rem; }
.landing-hero-texto p.lead { font-size: 1.05rem; color: var(--texto-secundario); max-width: 480px; margin: 0 0 1.75rem; }
.landing-hero-texto .acoes { display: flex; gap: .85rem; flex-wrap: wrap; }
.landing-hero-texto .acoes .btn { padding: .8rem 1.6rem; font-size: .95rem; }
.landing-hero-texto .nota-selo { font-size: .8rem; color: var(--texto-terciario); margin: 1rem 0 0; }
.landing-hero-visual { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; }
.landing-hero-visual .moldura {
    width: 100%; max-width: 540px; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--borda); box-shadow: 0 12px 32px rgba(16,24,40,.14);
}
.landing-hero-visual img { display: block; width: 100%; height: 380px; object-fit: cover; object-position: 68% 16%; }

.landing-produto { max-width: 1220px; margin: 0 auto; padding: 4rem 1.5rem; }
.landing-produto .print-principal {
    border-radius: 16px; overflow: hidden; border: 1px solid var(--borda);
    box-shadow: 0 14px 34px rgba(16,24,40,.12); margin-bottom: 1.5rem;
}
.landing-produto .print-principal img { display: block; width: 100%; height: 460px; object-fit: cover; object-position: 50% 0; }
.landing-produto .grade-prints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.landing-produto .cartao-print {
    background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px;
    overflow: hidden; box-shadow: 0 4px 14px rgba(16,24,40,.06);
}
.landing-produto .cartao-print img { display: block; width: 100%; height: 200px; object-fit: cover; }
.landing-produto .cartao-print .legenda { padding: 1rem 1.1rem; }
.landing-produto .cartao-print .legenda h3 { font-size: .95rem; margin: 0 0 .3rem; }
.landing-produto .cartao-print .legenda p { font-size: .82rem; color: var(--texto-secundario); margin: 0; }

.landing-como-funciona { max-width: 1100px; margin: 0 auto; padding: 3.5rem 1.5rem; }
.landing-como-funciona .trilha { position: relative; }
.landing-como-funciona .trilha-linha { position: absolute; top: 28px; left: 10%; right: 10%; height: 2px; background: var(--borda); }
.landing-como-funciona .trilha-passos { position: relative; display: flex; }
.landing-como-funciona .passo { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 .5rem; }
.landing-como-funciona .passo .icone-passo {
    width: 56px; height: 56px; border-radius: 50%; background: var(--cor-primaria-suave);
    color: var(--cor-primaria); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.landing-como-funciona .passo strong { font-size: .9rem; margin-top: .75rem; }
.landing-como-funciona .passo span { font-size: .8rem; color: var(--texto-terciario); margin-top: .25rem; }

.landing-plataforma { max-width: 1220px; margin: 0 auto; padding: 3.5rem 1.5rem; }
.landing-plataforma .grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.landing-plataforma .cartao {
    background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px;
    padding: 1.75rem; display: flex; flex-direction: column;
}
.landing-plataforma .cartao-cabecalho { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.landing-plataforma .cartao-icone { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.landing-plataforma .cartao-titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.05rem; }
.landing-plataforma .cartao-subtitulo { font-size: .83rem; color: var(--texto-secundario); margin-top: .15rem; }
.landing-plataforma .exemplo { background: var(--bg); border-radius: 8px; padding: .7rem .85rem; margin-top: auto; }
.landing-plataforma .exemplo + .exemplo { margin-top: .5rem; }
.landing-plataforma .regra-linha { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .78rem; color: var(--texto); }
.landing-plataforma .badge-ativa { font-size: .65rem; font-weight: 700; color: var(--sucesso); background: var(--sucesso-suave); padding: .15rem .55rem; border-radius: 999px; flex-shrink: 0; }
.landing-plataforma .funil-mini { display: flex; align-items: flex-end; gap: .6rem; height: 84px; }
.landing-plataforma .funil-barra { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.landing-plataforma .funil-barra .coluna { width: 34px; border-radius: 4px 4px 0 0; background: var(--cor-primaria); }
.landing-plataforma .funil-barra .rotulo { font-size: .6rem; color: var(--texto-terciario); }
.landing-plataforma .contrato-linhas { display: flex; flex-direction: column; gap: 5px; margin: .5rem 0 .7rem; }
.landing-plataforma .contrato-linhas div { height: 6px; background: var(--borda); border-radius: 3px; }
.landing-plataforma .tag-papel { font-size: .65rem; font-weight: 600; color: var(--texto-secundario); background: var(--superficie); border: 1px solid var(--borda); padding: .15rem .55rem; border-radius: 999px; }

.landing-recursos { max-width: 1220px; margin: 0 auto; padding: 4rem 1.5rem; }
.landing-recursos .grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.landing-recursos .cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 1.75rem; }
.landing-recursos .cartao-icone { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; }
.landing-recursos .cartao h3 { font-size: 1rem; margin-bottom: .4rem; }
.landing-recursos .cartao p { font-size: .87rem; color: var(--texto-secundario); margin: 0; }

.landing-perfis, .landing-planos { max-width: 1220px; margin: 0 auto; padding: 3.5rem 1.5rem; }
.landing-perfis .grade, .landing-planos .grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.landing-planos .grade { grid-template-columns: repeat(4, 1fr); }
.landing-perfis .cartao, .landing-planos .cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 1.75rem; }
.landing-perfis .cartao-cabecalho, .landing-planos .cartao-cabecalho { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.landing-perfis .avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--fonte-titulo); font-weight: 800; font-size: .9rem; flex-shrink: 0; }
.landing-perfis ul, .landing-planos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.landing-perfis li, .landing-planos li { display: flex; align-items: flex-start; gap: .5rem; font-size: .83rem; color: var(--texto-secundario); line-height: 1.5; }
.landing-perfis li svg, .landing-planos li svg { color: var(--sucesso); flex-shrink: 0; margin-top: 2px; }

.landing-cta { background: var(--cor-primaria); padding: 4.5rem 1.5rem; text-align: center; }
.landing-cta h2 { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.9rem; color: #fff; margin: 0 0 .7rem; }
.landing-cta p { color: rgba(255,255,255,.85); margin: 0 0 1.75rem; }
.landing-cta .acoes { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; }
.landing-cta .btn-branco { background: #fff; color: var(--cor-primaria); font-weight: 700; padding: .85rem 1.7rem; border-radius: 10px; }
.landing-cta .btn-fantasma { background: transparent; color: #fff; font-weight: 700; padding: .85rem 1.7rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.5); }

.rodape-publico {
    background: var(--rodape-fundo); color: var(--rodape-texto); padding: 3.5rem 1.5rem 1.5rem;
}
.rodape-publico .rodape-conteudo { max-width: 1220px; margin: 0 auto; display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding-bottom: 2.5rem; }
.rodape-publico .rodape-marca { max-width: 320px; }
.rodape-publico .rodape-marca .rodape-simbolo { height: 30px; width: auto; margin-bottom: 1rem; display: block; }
.rodape-publico .rodape-marca p { font-size: .83rem; line-height: 1.7; margin: 0; }
.rodape-publico .rodape-colunas { display: flex; gap: 4rem; flex-wrap: wrap; }
.rodape-publico .rodape-coluna { display: flex; flex-direction: column; gap: .7rem; }
.rodape-publico .rodape-coluna .titulo { font-size: .72rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; }
.rodape-publico .rodape-coluna a { font-size: .83rem; color: var(--rodape-texto); }
.rodape-publico .rodape-base { max-width: 1220px; margin: 0 auto; border-top: 1px solid var(--rodape-linha); padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .78rem; color: #6B7280; }
.rodape-publico .rodape-base a { color: var(--rodape-texto); font-weight: 600; }
.rodape-publico + .credito-siscomp { display: none; }

@media (max-width: 980px) {
    .landing-hero { flex-direction: column; }
    .landing-hero-texto { text-align: center; }
    .landing-hero-texto p.lead { margin-left: auto; margin-right: auto; }
    .landing-hero-texto .acoes { justify-content: center; }
    .landing-produto .grade-prints { grid-template-columns: 1fr; }
    .landing-plataforma .grade { grid-template-columns: 1fr; }
    .landing-recursos .grade { grid-template-columns: 1fr; }
    .landing-perfis .grade { grid-template-columns: 1fr; }
    .landing-planos .grade { grid-template-columns: 1fr; }
    .landing-como-funciona .trilha-passos { flex-direction: column; gap: 1.5rem; align-items: flex-start; }
    .landing-como-funciona .trilha-linha { display: none; }
    .landing-como-funciona .passo { flex-direction: row; text-align: left; width: 100%; }
    .landing-como-funciona .passo strong, .landing-como-funciona .passo span { margin-top: 0; }
    .landing-como-funciona .passo .texto-passo { display: flex; flex-direction: column; margin-left: 1rem; }
}
@media (max-width: 640px) {
    .landing-hero-texto h1 { font-size: 1.7rem; }
    .rodape-publico .rodape-conteudo { flex-direction: column; }
}

/* ============================== EVENTOS DA TAREFA (timeline) ============= */

.rotulo-discreto {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-terciario);
    font-weight: 700;
    margin-bottom: .2rem;
}

/* Canais de contato (telefone, WhatsApp, e-mail) - ficha do cliente e cartão "Cliente" da tarefa */
.canais-contato { display: flex; flex-wrap: wrap; gap: .4rem; }
.canal-contato { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .75rem .35rem .35rem; border: 1px solid var(--borda); border-radius: 999px; font-size: .83rem; color: var(--texto); text-decoration: none; background: var(--superficie); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canal-contato:hover { border-color: var(--cor-primaria); text-decoration: none; }
.canal-contato-icone { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ==========================================================================
   Detalhe da tarefa / atendimento (modulos/tarefas/_detalhe-topo.php e _detalhe-abas.php)
   ========================================================================== */
.tarefa-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem 1.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tarefa-topo-titulo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; flex: 1 1 420px; }
.tarefa-topo-titulo h2 { margin: 0; font-size: 1.5rem; line-height: 1.25; }
.tarefa-topo-numero { color: var(--texto-terciario); }
.tarefa-trilha-navegacao { display: flex; gap: .4rem; font-size: .78rem; color: var(--texto-secundario); }
.tarefa-topo-sub { font-size: .84rem; color: var(--texto-secundario); }
.tarefa-topo-sub strong { color: var(--texto); font-weight: 600; }
.tarefa-topo-acoes { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.tarefa-topo-acoes .btn { height: 40px; }
.tarefa-topo-acoes .btn-icone { width: 40px; height: 40px; }
.tarefa-topo-form-pausa { display: contents; }
.btn-contorno-primario { background: var(--superficie); color: var(--cor-primaria); border-color: var(--cor-primaria); }

.tarefa-atencao { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: 1rem; }
.tarefa-atencao-rotulo { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-secundario); margin-right: .2rem; }
.chip-atencao { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 600; line-height: 1.3; }
.chip-atencao-perigo  { background: var(--perigo-suave);  color: #A3281C; }
.chip-atencao-alerta  { background: var(--alerta-suave);  color: #8A5A0A; }
.chip-atencao-sucesso { background: var(--sucesso-suave); color: #1B6B3A; }
.chip-atencao-info    { background: var(--info-suave);    color: #2557A8; }
.chip-atencao-neutro  { background: var(--bg); color: var(--texto-secundario); border: 1px solid var(--borda); }

/* Trilha do funil: todas as etapas, o tempo em cada uma e onde está agora */
.tarefa-trilha-cartao { margin-bottom: 1rem; padding: 1.1rem 1.3rem 1.2rem; }
.tarefa-trilha-cabecalho { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tarefa-trilha-cabecalho h3 { margin: 0; font-size: 1rem; }
.tarefa-trilha-cabecalho span { font-size: .8rem; color: var(--texto-secundario); }
.trilha-etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--trilha-colunas, 4), minmax(150px, 1fr)); overflow-x: auto; }
.trilha-item { display: flex; flex-direction: column; gap: .6rem; padding-right: .75rem; min-width: 0; }
.trilha-item:last-child { padding-right: 0; }
.trilha-marcador { display: flex; align-items: center; }
.trilha-bolinha { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; box-sizing: border-box; background: var(--superficie); color: var(--texto-secundario); border: 2px solid var(--borda); }
.trilha-linha { flex: 1; height: 3px; margin-left: 8px; border-radius: 2px; background: var(--borda); }
.trilha-item:last-child .trilha-linha { display: none; }
.trilha-corpo { min-width: 0; }
.trilha-nome { display: block; font-weight: 700; font-size: .9rem; color: var(--texto); line-height: 1.3; }
button.trilha-nome { background: none; border: 0; padding: 0; font-family: inherit; text-align: left; cursor: pointer; }
.trilha-ir:hover { color: var(--cor-primaria); text-decoration: underline; }
.trilha-info { font-size: .78rem; color: var(--texto-secundario); margin-top: .15rem; }
.trilha-info-forte { font-weight: 700; color: var(--texto); }
.trilha-feita .trilha-bolinha { background: var(--cor-etapa); border-color: var(--cor-etapa); color: #fff; }
.trilha-feita .trilha-linha { background: var(--cor-etapa); }
.trilha-pulada .trilha-bolinha { border-style: dashed; }
.trilha-pulada .trilha-nome, .trilha-futura .trilha-nome { color: var(--texto-secundario); }
.trilha-atual .trilha-bolinha { background: var(--cor-etapa); border-color: var(--cor-etapa); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--cor-etapa) 20%, transparent); }
.trilha-atual .trilha-linha { background: repeating-linear-gradient(90deg, var(--borda) 0 6px, transparent 6px 11px); margin-left: 13px; }
.trilha-atual-caixa { background: color-mix(in srgb, var(--cor-etapa) 9%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--cor-etapa) 35%, var(--superficie)); border-radius: 10px; padding: .6rem .75rem; margin-right: .3rem; }
.trilha-atual .trilha-nome { font-weight: 800; }
.trilha-selo { display: inline-block; margin-left: .3rem; padding: .1rem .45rem; border-radius: 999px; font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; background: var(--sucesso-suave); color: #1B6B3A; }
.trilha-info-prazo { font-weight: 600; color: #1B6B3A; }
.trilha-atrasada { --cor-etapa: var(--perigo) !important; }
.trilha-atrasada .trilha-selo { background: var(--perigo-suave); color: #A3281C; }
.trilha-atrasada .trilha-info-prazo { color: #A3281C; }
.trilha-fechamento .trilha-bolinha { border-style: dashed; color: var(--texto-terciario); }
.trilha-fechamento .trilha-nome { color: var(--texto-secundario); }
.trilha-ganha .trilha-bolinha { background: var(--sucesso); border-color: var(--sucesso); color: #fff; }
.trilha-perdida .trilha-bolinha { background: var(--perigo); border-color: var(--perigo); color: #fff; }

/* Três blocos: tarefa (ou atendimento), etapa atual, cliente */
.tarefa-blocos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; align-items: stretch; }
.tarefa-bloco { display: flex; flex-direction: column; gap: .9rem; padding: 1.1rem; min-width: 0; }
.tarefa-bloco-cabecalho { display: flex; align-items: center; gap: .55rem; }
.tarefa-bloco-icone { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tarefa-bloco-icone-tarefa { background: var(--cor-primaria-suave); color: var(--cor-primaria); }
.tarefa-bloco-icone-etapa { background: color-mix(in srgb, var(--cor-etapa, var(--texto-secundario)) 15%, var(--superficie)); color: var(--cor-etapa, var(--texto-secundario)); }
.tarefa-bloco-icone-cliente { background: var(--info-suave); color: var(--info); }
.tarefa-bloco-titulo { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-secundario); }
.tarefa-bloco-link { margin-left: auto; font-size: .8rem; font-weight: 600; }
.tarefa-bloco-nome { font-family: var(--fonte-titulo); font-size: 1.08rem; font-weight: 800; line-height: 1.3; display: flex; align-items: center; }
.tarefa-bloco-sub { font-size: .8rem; color: var(--texto-secundario); margin-top: .2rem; overflow-wrap: anywhere; }
.texto-perigo { color: #A3281C; font-weight: 600; }
.tarefa-bloco-selos { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.tarefa-bloco-alerta { margin: 0; font-size: .8rem; }
.tarefa-bloco-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem .9rem; margin: 0; }
.tarefa-bloco-dados dt { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-secundario); margin-bottom: .25rem; }
.tarefa-bloco-dados dd { margin: 0; font-size: .88rem; }
.tarefa-bloco-dado-largo { grid-column: 1 / -1; }
.tarefa-bloco-texto { font-size: .84rem; color: var(--texto); margin-top: .2rem; line-height: 1.45; }
.tarefa-bloco-vazio { font-size: .85rem; color: var(--texto-secundario); margin: 0; }
.tarefa-bloco-acao { margin-top: auto; width: 100%; }
.tarefa-bloco .meta-destaque { padding: .65rem .85rem; }

.sla-medidor { display: flex; flex-direction: column; gap: .35rem; }
.sla-medidor-topo { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; }
.sla-medidor-topo span { font-weight: 600; white-space: nowrap; }
.sla-medidor-topo strong { text-align: right; font-weight: 700; }
.sla-medidor-trilha { height: 7px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.sla-medidor-trilha div { height: 100%; border-radius: 999px; }
.sla-sucesso strong { color: #1B6B3A; } .sla-sucesso .sla-medidor-trilha div { background: var(--sucesso); }
.sla-alerta strong  { color: #8A5A0A; } .sla-alerta .sla-medidor-trilha div  { background: var(--alerta); }
.sla-perigo strong  { color: #A3281C; } .sla-perigo .sla-medidor-trilha div  { background: var(--perigo); }
.sla-info strong    { color: #2557A8; } .sla-info .sla-medidor-trilha div    { background: var(--info); }

.tarefa-pessoa { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: 10px; background: var(--bg); min-width: 0; }
.tarefa-pessoa-icone { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--superficie); color: var(--texto-secundario); flex-shrink: 0; }
.tarefa-pessoa { flex-wrap: wrap; }
.tarefa-pessoa-acoes { display: flex; gap: .4rem; flex-shrink: 0; }
.tarefa-pessoa-texto { display: flex; flex-direction: column; flex: 1 1 130px; min-width: 0; }
.tarefa-pessoa-texto strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarefa-pessoa-texto span { font-size: .75rem; color: var(--texto-secundario); }
.tarefa-acao-icone { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--borda); background: var(--superficie); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tarefa-acao-icone:hover { border-color: currentColor; text-decoration: none; }
.tarefa-acao-ligar { color: var(--info); }
.tarefa-acao-whatsapp { color: var(--sucesso); }
.tarefa-acao-email { color: var(--alerta); }

.tarefa-ultima-mov { display: flex; flex-direction: column; gap: .3rem; }
.tarefa-ultima-mov-rotulo { display: flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-secundario); }
.tarefa-ultima-mov-texto { font-size: .86rem; line-height: 1.45; color: var(--texto); }
.tarefa-ultima-mov-autor { font-size: .75rem; color: var(--texto-secundario); }

.tarefa-cliente-empresa { display: flex; flex-direction: column; gap: .4rem; font-size: .85rem; }
.tarefa-cliente-linha { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; color: var(--texto); overflow-wrap: anywhere; }
.tarefa-cliente-linha a, a.tarefa-cliente-linha { color: var(--texto); display: inline-flex; align-items: center; gap: .35rem; }
.tarefa-cliente-linha svg { color: var(--texto-secundario); }
.tarefa-cliente-mais { align-self: flex-start; font-size: .82rem; font-weight: 600; }

.tarefa-observacoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem 1.5rem; margin-bottom: 1rem; padding: 1rem 1.2rem; }
.tarefa-observacoes .texto-rico-render { margin-top: .35rem; font-size: .9rem; }

/* Abas: linha do tempo, propostas, contratos, e-mails, pessoas */
.tarefa-abas { display: flex; gap: .25rem; border-bottom: 1px solid var(--borda); margin: .5rem 0 1.25rem; overflow-x: auto; }
.tarefa-aba { flex-shrink: 0; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: .7rem .9rem; font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--texto-secundario); cursor: pointer; }
.tarefa-aba:hover { color: var(--texto); }
.tarefa-aba.ativa { color: var(--texto); font-weight: 700; border-bottom-color: var(--cor-primaria); }
.tarefa-aba-qtd { display: inline-block; min-width: 1.4em; padding: .05rem .4rem; margin-left: .2rem; border-radius: 999px; background: var(--bg); font-size: .72rem; font-weight: 700; color: var(--texto-secundario); text-align: center; }
.tarefa-aba.ativa .tarefa-aba-qtd { background: var(--cor-primaria-suave); color: var(--cor-primaria); }
.tarefa-aba-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.tarefa-aba-cabecalho h3 { margin: 0; }
.tarefa-aba-lista { display: flex; flex-direction: column; gap: .6rem; }
.tarefa-aba-sub { display: block; font-size: .78rem; color: var(--texto-secundario); margin-top: .15rem; }
.tarefa-email-linha { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.tarefa-email-linha summary { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; cursor: pointer; list-style: none; }
.tarefa-email-linha summary::-webkit-details-marker { display: none; }
.tarefa-email-icone { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tarefa-email-enviado { background: var(--info-suave); color: var(--info); }
.tarefa-email-recebido { background: var(--sucesso-suave); color: var(--sucesso); }
.tarefa-email-texto { flex: 1; min-width: 0; }
.tarefa-email-corpo { padding: .85rem; border-top: 1px solid var(--borda); }
.tarefa-pessoas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; }
.tarefa-pessoa-cartao { display: flex; flex-direction: column; gap: .6rem; padding: .8rem; border: 1px solid var(--borda); border-radius: var(--raio); }
.tarefa-pessoa-cartao .tarefa-pessoa { background: none; padding: 0; }

/* Janelas (<dialog>): pergunta "finalizar agora?" e conclusão da tarefa no detalhe */
.dialogo { border: 0; border-radius: 14px; padding: 1.5rem; width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-sizing: border-box; background: var(--superficie); color: var(--texto); box-shadow: 0 20px 50px rgba(16, 24, 40, .25); }
.dialogo-largo { width: min(560px, calc(100vw - 32px)); }
.dialogo::backdrop { background: rgba(16, 24, 40, .45); }
.dialogo h3 { margin: 0 0 .35rem; }
.dialogo-texto { margin: 0; color: var(--texto-secundario); font-size: .9rem; line-height: 1.5; }
.dialogo-icone { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .9rem; }
.dialogo-icone-sucesso { background: var(--sucesso-suave); color: var(--sucesso); }
.dialogo-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; }
.dialogo-acoes { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.25rem; flex-wrap: wrap; }
.finalizar-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .35rem; }
.finalizar-opcao { position: relative; margin: 0 !important; }
.finalizar-opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.finalizar-opcao span { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; padding: .55rem .75rem; border: 1px solid var(--borda); border-radius: 10px; font-weight: 600; font-size: .88rem; color: var(--texto); cursor: pointer; text-align: center; }
.finalizar-opcao input:focus-visible + span { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.finalizar-opcao-sim input:checked + span { border-color: var(--sucesso); background: var(--sucesso-suave); color: #1B6B3A; }
.finalizar-opcao-nao input:checked + span { border-color: var(--perigo); background: var(--perigo-suave); color: #A3281C; }
@media (max-width: 480px) { .finalizar-opcoes { grid-template-columns: minmax(0, 1fr); } }

.tarefa-conteudo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.tarefa-conteudo-sem-lateral { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1100px) {
    .tarefa-blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .tarefa-blocos, .tarefa-conteudo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
    .tarefa-topo-titulo h2 { font-size: 1.25rem; }
    /* Trilha vertical */
    .trilha-etapas { display: flex; flex-direction: column; overflow: visible; }
    .trilha-item { flex-direction: row; gap: .75rem; padding-right: 0; }
    .trilha-marcador { flex-direction: column; align-self: stretch; }
    .trilha-linha, .trilha-atual .trilha-linha { flex: 1; width: 3px; height: auto; min-height: 18px; margin: 4px 0; }
    .trilha-atual .trilha-linha { background: repeating-linear-gradient(180deg, var(--borda) 0 6px, transparent 6px 11px); }
    .trilha-corpo { flex: 1; padding-bottom: .8rem; padding-top: .3rem; }
    .trilha-atual-caixa { margin-right: 0; }
    /* Ações principais fixas no rodapé */
    .tarefa-topo-acoes { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--superficie); border-top: 1px solid var(--borda); padding: .6rem 16px calc(.6rem + env(safe-area-inset-bottom)); flex-wrap: nowrap; box-shadow: 0 -4px 12px rgba(16, 24, 40, .08); }
    .tarefa-topo-acoes .btn { height: 44px; padding: 0 .7rem; }
    .tarefa-topo-acoes .btn-icone { width: 44px; }
    .tarefa-topo-acoes .btn-primario, .tarefa-topo-acoes .btn-contorno-primario { flex: 1; font-size: .82rem; }
    .tarefa-topo-rotulo-opcional { display: none; }
    main:has(.tarefa-topo-acoes) { padding-bottom: 84px; }
}

/* Destaque da data meta no detalhe da tarefa: no prazo (verde), vencida (vermelho), finalizada (neutro) */
.meta-destaque { display: flex; align-items: center; gap: .8rem; padding: .7rem 1.1rem .7rem .8rem; border-radius: 12px; border: 1px solid var(--borda); }
.meta-destaque-icone { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.meta-destaque-rotulo { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-secundario); }
.meta-destaque-data { font-size: 1.25rem; font-weight: 800; line-height: 1.2; color: var(--texto); }
.meta-destaque-texto { font-size: .84rem; font-weight: 600; margin-top: .1rem; }
.meta-no-prazo { background: var(--sucesso-suave); border-color: var(--sucesso); }
.meta-no-prazo .meta-destaque-icone { background: var(--sucesso); color: #fff; }
.meta-no-prazo .meta-destaque-texto { color: var(--sucesso); }
.meta-vencida { background: var(--perigo-suave); border-color: var(--perigo); }
.meta-vencida .meta-destaque-icone { background: var(--perigo); color: #fff; }
.meta-vencida .meta-destaque-texto, .meta-vencida .meta-destaque-data { color: var(--perigo); }
.meta-finalizada { background: var(--bg); }
.meta-finalizada .meta-destaque-icone { background: var(--superficie); color: var(--texto-secundario); border: 1px solid var(--borda); }
.meta-finalizada .meta-destaque-texto { color: var(--texto-secundario); }

.grade-resumo-tarefa {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem .75rem;
    font-size: .88rem;
    padding-top: 1rem;
    border-top: 1px solid var(--borda);
}

.lista-eventos { display: flex; flex-direction: column; gap: 1rem; }

.evento-card {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-left: 4px solid var(--texto-terciario);
    border-radius: var(--raio);
    padding: 1rem 1.1rem;
}
.evento-card.status-atual      { border-left-color: var(--cor-primaria); background: var(--cor-primaria-suave); }
.evento-card.status-visto      { border-left-color: var(--sucesso); }
.evento-card.status-pendente   { border-left-color: var(--alerta); }
.evento-card.status-atrasado   { border-left-color: var(--perigo); }

/* Marcador de "proposta criada" mesclado na timeline - visualmente distinto
   dos cards de movimentação de etapa, mas com a mesma linguagem visual. */
.evento-card.evento-card-proposta {
    border-left-color: var(--cor-primaria);
    border-style: dashed;
    background: var(--bg);
}
.evento-card.evento-card-proposta .icone-status { color: var(--cor-primaria); }

.evento-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.evento-titulo { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .95rem; }
.evento-titulo .icone-status { flex-shrink: 0; }
.evento-card.status-visto .icone-status      { color: var(--sucesso); }
.evento-card.status-pendente .icone-status   { color: var(--alerta); }
.evento-card.status-atrasado .icone-status   { color: var(--perigo); }
.evento-card.status-atual .icone-status,
.evento-card.status-atual:not(.status-visto):not(.status-pendente):not(.status-atrasado) .icone-status { color: var(--cor-primaria); }

.evento-quando { font-size: .78rem; color: var(--texto-terciario); white-space: nowrap; }
.evento-transicao { font-size: .78rem; color: var(--texto-terciario); margin: .15rem 0 .5rem; display: flex; align-items: center; gap: .3rem; }

.evento-meta { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin-top: .5rem; font-size: .84rem; color: var(--texto-secundario); }
.evento-meta strong { color: var(--texto); }

.evento-obs {
    margin-top: .65rem;
    padding: .6rem .8rem;
    background: var(--bg);
    border-radius: var(--raio-pequeno);
    font-size: .85rem;
    color: var(--texto);
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}
.evento-obs .icone-svg { margin-top: .15rem; color: var(--texto-terciario); }

/* ---------------------------- Anexos de evento ---------------------------- */

.lista-anexos-evento {
    display: flex;
    flex-direction: column;
    margin-top: .65rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    overflow: hidden;
}

.anexo-linha {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    background: var(--superficie);
    font-size: .84rem;
}
.anexo-linha + .anexo-linha { border-top: 1px solid var(--borda); }
.anexo-linha:hover { background: var(--bg); }

.anexo-linha-icone { flex-shrink: 0; display: inline-flex; }
.anexo-linha-nome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--texto);
}
.anexo-linha-tamanho { flex-shrink: 0; color: var(--texto-terciario); font-size: .76rem; }

.anexo-linha-acoes { display: flex; align-items: center; gap: .15rem; flex-shrink: 0; }
.icone-acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--raio-pequeno);
    color: var(--texto-secundario);
    background: none;
    border: none;
    cursor: pointer;
}
.icone-acao:hover { background: var(--cor-primaria-suave); color: var(--cor-primaria); }
.icone-acao-perigo:hover { background: var(--perigo-suave); color: var(--perigo); }

/* Anexos escolhidos e ainda não salvos (Registrar movimentação) - o input
   file real fica escondido; a lista é montada por assets/js/app.js. */
.anexos-pendentes { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.anexos-pendentes-input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.anexos-pendentes-lista:empty { display: none; }
.anexos-pendentes-lista {
    align-self: stretch;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    overflow: hidden;
}
.anexos-pendentes .anexo-linha-nome-input {
    flex: 1; min-width: 0;
    font-size: .85rem; padding: .3rem .5rem; height: auto;
}
.anexos-pendentes .anexo-linha-extensao { flex-shrink: 0; color: var(--texto-terciario); font-size: .8rem; margin-left: -.35rem; }
.anexos-pendentes-erro {
    font-size: .8rem; color: var(--perigo);
    background: var(--perigo-suave); border-radius: var(--raio-pequeno);
    padding: .4rem .6rem;
}

/* ------------------------- Andamento / stepper de etapas ------------------ */

.form-andamento .campo { margin-bottom: 1.25rem; }

.grade-andamento { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 640px) { .grade-andamento { grid-template-columns: 1fr; } }

.campo-prazo { display: flex; gap: .5rem; }
.campo-prazo input[type="date"] { flex: 1.4; }
.campo-prazo input[type="time"] { flex: 1; }

.stepper-etapas { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }

.stepper-etapa {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem .5rem .5rem;
    border-radius: 999px;
    border: 1.5px solid var(--borda);
    background: var(--superficie);
    cursor: pointer;
    font-size: .85rem;
    color: var(--texto-secundario);
    font-family: var(--fonte-corpo);
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.stepper-etapa:hover { border-color: var(--cor-primaria); color: var(--texto); }
.stepper-etapa.ativa { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); color: var(--cor-primaria); font-weight: 700; }

.stepper-etapa-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--texto-terciario);
    font-size: .72rem;
    font-weight: 700;
    flex-shrink: 0;
}
.stepper-etapa.ativa .stepper-etapa-numero { background: var(--cor-primaria); color: #fff; }

.forma-contato-grupo { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }

.forma-contato-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    border: 1.5px solid var(--borda);
    background: var(--superficie);
    cursor: pointer;
    font-size: .85rem;
    color: var(--texto-secundario);
    font-family: var(--fonte-corpo);
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.forma-contato-btn:hover { border-color: var(--cor-primaria); color: var(--texto); }
.forma-contato-btn.ativa { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); color: var(--cor-primaria); font-weight: 700; }

.evento-forma-contato { display: inline-flex; align-items: center; gap: .3rem; color: var(--texto-secundario); }

.email-corpo-toggle summary { cursor: pointer; list-style: none; display: inline-flex; }
.email-corpo-toggle summary::-webkit-details-marker { display: none; }
.email-corpo-toggle summary::marker { content: ''; }

/* ------------------------- Linha do tempo do cliente ----------------------- */

.linha-tempo-lead-dia-titulo {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--texto-terciario);
    margin: 1.1rem 0 .5rem;
}
.linha-tempo-lead > .linha-tempo-lead-dia-titulo:first-child { margin-top: 0; }

.linha-tempo-lead-item { display: flex; align-items: flex-start; gap: .7rem; padding: .5rem 0; }
.linha-tempo-lead-item + .linha-tempo-lead-item { border-top: 1px dashed var(--borda); }

.linha-tempo-lead-hora {
    flex-shrink: 0;
    width: 40px;
    font-size: .78rem;
    color: var(--texto-terciario);
    padding-top: .35rem;
}

.linha-tempo-lead-icone {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cor-primaria-suave);
    color: var(--cor-primaria);
    display: flex;
    align-items: center;
    justify-content: center;
}

.linha-tempo-lead-texto { font-size: .87rem; color: var(--texto); line-height: 1.5; padding-top: .3rem; }
.linha-tempo-lead-texto strong { color: var(--texto); }

/* ------------------------------- Editor rico ------------------------------ */

.editor-rico-wrapper {
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    overflow: hidden;
    background: #fff;
}

.editor-rico-toolbar {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .4rem .5rem;
    background: var(--bg);
    border-bottom: 1px solid var(--borda);
    flex-wrap: wrap;
}

.editor-rico-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    background: #fff;
    color: var(--texto);
    font-size: .82rem;
    cursor: pointer;
}
.editor-rico-btn:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }

.editor-rico-select {
    width: auto;
    padding: .3rem .4rem;
    font-size: .78rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    background: #fff;
    color: var(--texto);
}

.editor-rico-cor {
    width: 30px;
    height: 28px;
    padding: 2px;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    background: #fff;
    cursor: pointer;
}

.editor-rico-area {
    min-height: 90px;
    max-height: 320px;
    overflow-y: auto;
    padding: .62rem .75rem;
    font-size: .92rem;
    color: var(--texto);
    line-height: 1.5;
}
.editor-rico-area:focus { outline: none; }

.texto-rico-render { font-size: .92rem; line-height: 1.55; color: var(--texto); overflow-wrap: anywhere; }
.texto-rico-render img { max-width: 100%; height: auto; }
.texto-rico-render table { max-width: 100%; border-collapse: collapse; }
.texto-rico-render p { margin: 0 0 .6rem; }
.texto-rico-render blockquote { margin: 0 0 .6rem; padding: .3rem .8rem; border-left: 3px solid var(--borda); }

/* ---------------------- Comunicação (thread de e-mail) ------------------ */

.thread-comunicacao { display: flex; flex-direction: column; gap: 1rem; }

.comunicacao-item {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: .9rem 1rem;
    max-width: 85%;
}
.comunicacao-item-enviado { align-self: flex-end; background: var(--cor-primaria-suave); border-color: var(--cor-primaria-suave); }
.comunicacao-item-recebido { align-self: flex-start; background: var(--superficie); }

.comunicacao-item-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .2rem; }
.comunicacao-item-titulo { font-weight: 600; font-size: .92rem; }
.comunicacao-item-meta { font-size: .78rem; color: var(--texto-secundario); margin-bottom: .5rem; }

.comunicacao-corpo { word-wrap: break-word; }

.comunicacao-anexos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.anexo-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .55rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 999px;
    font-size: .78rem;
    color: var(--texto);
}
.anexo-chip:hover { background: var(--bg); text-decoration: none; }

.comunicacao-item-responder {
    display: inline-flex; align-items: center; gap: .3rem;
    margin-top: .6rem;
    font-size: .8rem;
    font-weight: 600;
}

/* --------------------- Teste de conexão SMTP/IMAP ------------------------ */

.resultado-teste-conexao { font-size: .82rem; margin-top: .5rem; min-height: 1.1em; }
.resultado-teste-conexao.sucesso { color: var(--sucesso); }
.resultado-teste-conexao.erro { color: var(--perigo); }
.resultado-teste-detalhe { margin-top: .4rem; color: var(--texto-secundario); }
.resultado-teste-detalhe summary { cursor: pointer; font-size: .78rem; text-decoration: underline; }
.resultado-teste-detalhe pre { margin: .4rem 0 0; padding: .6rem .75rem; background: var(--fundo-suave, #F4F6F9); border-radius: 8px; font-size: .74rem; white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow: auto; color: var(--texto, #1F2430); }
.dica-provedor-email { font-size: .82rem; margin: .35rem 0 .75rem; padding: .55rem .75rem; border-radius: 8px; background: var(--cor-primaria-suave); color: var(--texto, #1F2430); }

/* Agrupa visualmente Envio (SMTP) e Recebimento (IMAP/POP3) como dois
   blocos bem separados - evita a sensação de campos "duplicados" quando
   os dois ficam soltos em sequência num formulário longo. */
.bloco-config-email {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    background: var(--bg);
}
.bloco-config-email-titulo {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .75rem;
    font-size: .95rem;
}

/* ---------------------------- Modal de anexo ---------------------------- */

.modal-anexo-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    z-index: 1000;
}
.modal-anexo-overlay[hidden] { display: none; }

.modal-anexo-conteudo {
    background: var(--superficie);
    border-radius: var(--raio);
    box-shadow: var(--sombra-elevada);
    width: min(880px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-anexo-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--borda);
}
.modal-anexo-titulo { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-anexo-acoes { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.modal-anexo-download {
    font-size: .82rem;
    font-weight: 600;
    color: var(--cor-primaria);
    padding: .35rem .7rem;
    border-radius: var(--raio-pequeno);
    border: 1px solid var(--borda);
}
.modal-anexo-download:hover { background: var(--cor-primaria-suave); text-decoration: none; }
.modal-anexo-fechar {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--texto-secundario);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 1.4rem;
    line-height: 1;
    border-radius: var(--raio-pequeno);
}
.modal-anexo-fechar:hover { background: var(--bg); color: var(--texto); }

.modal-anexo-corpo {
    flex: 1;
    overflow: auto;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-anexo-corpo img { max-width: 100%; max-height: 78vh; display: block; border-radius: var(--raio-pequeno); }
.modal-anexo-corpo iframe { width: 100%; height: 78vh; border: none; background: #fff; }
.modal-anexo-sem-preview { text-align: center; color: var(--texto-secundario); padding: 2rem; }
.modal-anexo-sem-preview p { margin: 0 0 1rem; }

/* ============================== KANBAN ==================================== */

.kanban-board { display: flex; gap: 1.4rem; overflow-x: auto; padding: .25rem .25rem 1.25rem; }

.coluna-kanban {
    min-width: 300px;
    max-width: 300px;
    flex-shrink: 0;
    background: var(--bg);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: .85rem .75rem;
}

.coluna-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: .1rem .35rem .85rem;
}
.coluna-titulo { font-size: .98rem; font-weight: 700; color: var(--texto); }
.coluna-contagem { font-size: .78rem; color: var(--texto-terciario); margin-top: .15rem; }
.coluna-badge { background: var(--superficie); border: 1px solid var(--borda); color: var(--texto-secundario); font-size: .76rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; }

.lista-cards {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-height: 90px;
    transition: outline .12s ease;
}

.card-tarefa {
    position: relative;
    display: block;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-top: 4px solid var(--texto-terciario);
    border-radius: var(--raio);
    padding: .85rem 1rem .9rem;
    text-decoration: none;
    color: inherit;
    cursor: grab;
    box-shadow: var(--sombra);
    transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}
.card-tarefa:hover { box-shadow: var(--sombra-elevada); border-color: var(--cor-primaria); border-top-color: var(--cor-primaria); text-decoration: none; transform: translateY(-1px); }
.card-tarefa:active { cursor: grabbing; }

.card-tarefa.prioridade-muito-alta { border-top-color: var(--prio-muito-alta); }
.card-tarefa.prioridade-alta       { border-top-color: var(--prio-alta); }
.card-tarefa.prioridade-media      { border-top-color: var(--prio-media); }
.card-tarefa.prioridade-baixa      { border-top-color: var(--prio-baixa); }
.card-tarefa.prioridade-muito-baixa{ border-top-color: var(--prio-muito-baixa); }

/* "Merece atenção" - cliente esfriando ou automação prestes a disparar,
   um sinal PRÉVIO ao atraso formal (que já tem seu próprio destaque
   vermelho tracejado). Anel pulsante mais forte (raio/opacidade maiores,
   ciclo mais rápido) + borda esquerda âmbar fixa, pra ficar visível mesmo
   parado entre um pulso e outro - mantém a sombra normal do card como
   primeira camada do box-shadow, só a segunda camada (o anel) anima. */
@keyframes pulsar-atencao {
    0%   { box-shadow: var(--sombra), 0 0 0 0 rgba(194, 132, 26, .65); }
    70%  { box-shadow: var(--sombra), 0 0 0 16px rgba(194, 132, 26, 0); }
    100% { box-shadow: var(--sombra), 0 0 0 0 rgba(194, 132, 26, 0); }
}
.card-tarefa.card-atencao {
    border-left: 4px solid var(--alerta);
    animation: pulsar-atencao 1.5s ease-out infinite;
}
.card-tarefa.card-atencao:hover {
    box-shadow: var(--sombra-elevada), 0 0 0 0 rgba(194, 132, 26, 0);
}
.card-atencao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--alerta);
    background: var(--alerta-suave);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    animation: pulsar-atencao 1.5s ease-out infinite;
}
#calendario-tarefas .fc-event.fc-atencao {
    border-left-width: 4px !important;
    border-left-color: var(--alerta) !important;
    animation: pulsar-atencao 1.5s ease-out infinite;
}

/* -------- Busca global (modulos/busca/) -------- */
.resultado-busca-global {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .8rem .9rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    text-decoration: none;
    color: inherit;
    transition: border-color .12s ease, background .12s ease;
}
.resultado-busca-global:hover {
    border-color: var(--cor-primaria);
    background: var(--cor-primaria-suave);
    text-decoration: none;
}
.resultado-busca-global-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
}
.resultado-busca-global-icone-cliente { background: var(--info-suave); color: var(--info); }
.resultado-busca-global-icone-tarefa  { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }
.resultado-busca-global-corpo { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.resultado-busca-global-topo { display: flex; align-items: center; gap: .5rem; }
.resultado-busca-global-subtitulo { font-size: .82rem; color: var(--texto-secundario); }

.card-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }

.card-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.card-status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.card-status.status-perigo  { color: var(--perigo); }
.card-status.status-info    { color: var(--info); }
.card-status.status-sucesso { color: var(--sucesso); }
.card-status.status-neutro  { color: var(--texto-terciario); }

.card-cliente { display: flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .92rem; color: var(--texto); margin-bottom: .1rem; }
.card-titulo-tarefa { font-size: .8rem; color: var(--texto-secundario); margin-bottom: .55rem; }

.card-meta-linha { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--texto-secundario); margin-bottom: .3rem; }
.card-meta-linha .icone-svg { color: var(--texto-terciario); }
.card-meta-linha.atrasado { color: var(--perigo); font-weight: 600; }
.card-meta-linha.atrasado .icone-svg { color: var(--perigo); }

.card-progresso-trilha { background: var(--bg); border-radius: 999px; height: 5px; overflow: hidden; margin: .6rem 0 .55rem; }
.card-progresso-preenchido { height: 100%; background: var(--cor-primaria); border-radius: 999px; }

.card-proxima { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--texto-secundario); padding-top: .55rem; border-top: 1px solid var(--borda); }
.card-proxima strong { color: var(--texto); font-weight: 600; }
.card-proxima .icone-svg { color: var(--texto-terciario); flex-shrink: 0; }

.avatar-mini {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--cor-primaria-suave); color: var(--cor-primaria-escura);
    font-size: .68rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.avatar-mini-foto { display: inline-block; object-fit: cover; }

/* Tooltip flutuante (JS posiciona via getBoundingClientRect) */
.kanban-tooltip {
    display: none;
    position: fixed;
    z-index: 500;
    width: 260px;
    background: #1c2230;
    color: rgba(255,255,255,.92);
    border-radius: var(--raio);
    padding: .9rem 1rem;
    box-shadow: 0 12px 28px rgba(16,24,40,.35);
    font-size: .8rem;
    pointer-events: none;
}
.kanban-tooltip strong { display: block; font-size: .88rem; color: #fff; }
.kanban-tooltip .tt-sub { color: rgba(255,255,255,.6); font-size: .78rem; margin-top: .1rem; }
.kanban-tooltip .tt-secao { margin-top: .65rem; padding-top: .6rem; border-top: 1px solid rgba(255,255,255,.14); }
.kanban-tooltip .tt-label { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.5); margin-bottom: .2rem; font-weight: 700; }
.kanban-tooltip .tt-obs { margin-top: .3rem; color: rgba(255,255,255,.85); font-style: italic; }
.kanban-tooltip .tt-direcao { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .74rem; margin-top: .55rem; }
.kanban-tooltip .tt-direcao.avancou { color: #6FCF97; }
.kanban-tooltip .tt-direcao.retrocedeu { color: #F0B75A; }
.kanban-tooltip .tt-direcao.inicio { color: rgba(255,255,255,.6); }
.kanban-tooltip .tt-atraso { color: #F6A3A3; font-weight: 700; }

/* ============================== DASHBOARD ================================== */

.secao-dashboard-titulo {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-terciario);
    font-weight: 700;
    margin: 0 0 .6rem .1rem;
}
.secao-dashboard-titulo:not(:first-child) { margin-top: .5rem; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    align-items: stretch;
}
.stat-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 92px; text-decoration: none; color: inherit; transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease; }
.stat-card:hover { text-decoration: none; box-shadow: var(--sombra-elevada); border-color: var(--cor-primaria); transform: translateY(-1px); }
.stat-topo { display: flex; align-items: center; gap: .55rem; }
.stat-icone { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icone-neutro { background: var(--bg); color: var(--texto-secundario); }
.stat-icone-perigo  { background: var(--perigo-suave); color: var(--perigo); }
.stat-icone-alerta  { background: var(--alerta-suave); color: var(--alerta); }
.stat-icone-info    { background: var(--info-suave); color: var(--info); }
.stat-icone-sucesso { background: var(--sucesso-suave); color: var(--sucesso); }
.stat-label { font-size: .8rem; color: var(--texto-secundario); }
.stat-valor { font-size: 1.8rem; font-weight: 700; line-height: 1.2; margin-top: .35rem; }

.linha-prioridade {
    display: flex; align-items: center; gap: .75rem; margin-bottom: .3rem;
    padding: .3rem .4rem; border-radius: var(--raio-pequeno); text-decoration: none; color: inherit;
}
.linha-prioridade:hover { background: var(--bg); text-decoration: none; }

.painel-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
}
.painel-grid > .cartao { display: flex; flex-direction: column; }

/* Cards de meta (mês/ano corrente) - uma linha só enquanto couber (2 cards
   largos lado a lado numa tela comum), só quebra pra próxima linha quando
   não houver mais espaço (3+ metas, ou tela estreita). */
.metas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

@media (max-width: 880px) {
    .painel-grid { grid-template-columns: 1fr; }
}

/* ------------------------------ Gráfico donut ------------------------------ */

.grafico-donut { border-radius: 50%; position: relative; flex-shrink: 0; }
.grafico-donut-centro {
    position: absolute; inset: 20%;
    border-radius: 50%;
    background: var(--superficie);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; line-height: 1.15;
}
.grafico-donut-centro strong { font-size: 1.5rem; color: var(--texto); }
.grafico-donut-centro span { font-size: .68rem; color: var(--texto-terciario); text-transform: uppercase; letter-spacing: .03em; }
.grafico-donut-vazio {
    border-radius: 50%; border: 2px dashed var(--borda);
    display: flex; align-items: center; justify-content: center;
    color: var(--texto-terciario); font-size: .8rem; text-align: center; flex-shrink: 0;
}

.legenda-donut { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }

/* --------------------------- Gráfico de linha (SVG) ------------------------ */

.grafico-linha-svg { width: 100%; height: 200px; overflow: visible; }
.grafico-linha-grade { stroke: var(--borda); stroke-width: 1; }
.grafico-linha-rotulo { fill: var(--texto-terciario); font-size: 9px; font-family: var(--fonte-corpo); }
.grafico-linha-alvo { cursor: pointer; }

/* ------------------------------ Painel de valores --------------------------- */

.valores-linha {
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem 0;
}
.valores-linha + .valores-linha { border-top: 1px solid var(--borda); }
.valores-linha-texto { flex: 1; min-width: 0; }
.valores-linha-label { font-size: .78rem; color: var(--texto-secundario); }
.valores-linha-valor { font-size: 1.15rem; font-weight: 700; color: var(--texto); }
.valores-linha-delta { font-size: .74rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; flex-shrink: 0; }
.valores-linha-delta.positivo { background: var(--sucesso-suave); color: var(--sucesso); }
.valores-linha-delta.negativo { background: var(--perigo-suave); color: var(--perigo); }
.valores-linha-delta.neutro { background: var(--bg); color: var(--texto-terciario); }

/* ============================== CAMPO COM BUSCA (combobox filtrável) ====== */

.campo-busca { position: relative; }
.campo-busca .input-busca { padding-right: 2.2rem; }
.campo-busca::after {
    content: '';
    position: absolute;
    right: .9rem;
    top: 2.55rem;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--texto-terciario);
    border-bottom: 2px solid var(--texto-terciario);
    transform: rotate(45deg);
    pointer-events: none;
}
.lista-opcoes-busca {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    box-shadow: var(--sombra-elevada);
    z-index: 50;
}
.lista-opcoes-busca.aberta { display: block; }
.opcao-busca { padding: .55rem .8rem; font-size: .88rem; cursor: pointer; }
.opcao-busca:hover, .opcao-busca.destacada { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }
.opcao-busca-vazia { color: var(--texto-terciario); cursor: default; }
.opcao-busca-vazia:hover { background: none; color: var(--texto-terciario); }

.ordenar-asc { transform: rotate(90deg); color: var(--cor-primaria); }
.ordenar-desc { transform: rotate(-90deg); color: var(--cor-primaria); }

/* ============ PORTAL ADMINISTRATIVO (dono do sistema) ============= */
/* Página standalone (não usa header.php/menu.php de tenant) - reaproveita
   .cartao/.stats-grid/.stat-card/.lista-registros/.badge-*/.btn* como
   estão, só uma topbar simples própria em vez da sidebar. */

.painel-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .9rem 1.5rem;
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
}
.painel-topbar-marca {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--fonte-titulo);
    font-weight: 700;
    color: var(--texto);
}
.painel-topbar-nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.painel-topbar-nav a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--texto-secundario);
    font-size: .9rem;
    font-weight: 500;
}
.painel-topbar-nav a:hover { color: var(--cor-primaria); text-decoration: none; }

.painel-conteudo {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.75rem 1.5rem 3rem;
}

/* ------------------------- Onboarding (primeiro acesso) ------------------------- */
.onb-overlay { position: fixed; inset: 0; background: rgba(16, 24, 40, 0.55); display: flex; align-items: center; justify-content: center; padding: 1.5rem; z-index: 1100; }
.onb-modal { background: var(--superficie); border-radius: var(--raio); box-shadow: 0 12px 40px rgba(16, 24, 40, .25); max-width: 540px; width: 100%; max-height: 92vh; overflow-y: auto; padding: 1.75rem; text-align: center; }
.onb-icone { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--cor-primaria-suave); color: var(--cor-primaria); flex-shrink: 0; }
.onb-modal > .onb-icone { margin-bottom: .75rem; }
.onb-titulo-grande { margin: 0 0 .6rem; font-size: 1.3rem; }
.onb-texto { margin: 0 0 1rem; color: var(--texto-secundario); line-height: 1.5; font-size: .92rem; }
.onb-lista { text-align: left; margin: 0 0 1rem; padding-left: 1.2rem; color: var(--texto-secundario); font-size: .92rem; line-height: 1.5; }
.onb-lista li { margin-bottom: .4rem; }
.onb-lista strong { color: var(--texto); }
.onb-opcoes { display: grid; gap: .75rem; margin: 1.25rem 0 .75rem; }
.onb-opcao { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; text-align: left; background: var(--superficie); border: 1.5px solid var(--borda); border-radius: var(--raio); cursor: pointer; font: inherit; color: var(--texto); transition: border-color .15s, background .15s; }
.onb-opcao:hover, .onb-opcao:focus-visible { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); }
.onb-opcao span { font-size: .85rem; color: var(--texto-secundario); }
.onb-pular { background: none; border: none; color: var(--texto-terciario); font: inherit; font-size: .85rem; cursor: pointer; text-decoration: underline; }
.onb-acoes { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.onb-modal .onb-acoes { justify-content: center; }
.onb-acoes-direita { display: flex; gap: .5rem; }

.onb-cartao { position: fixed; right: 1.25rem; bottom: 1.25rem; width: min(380px, calc(100vw - 2.5rem)); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: 0 12px 40px rgba(16, 24, 40, .25); padding: 1.1rem 1.15rem; z-index: 1100; }
.onb-cartao-topo { display: flex; gap: .8rem; align-items: center; margin-bottom: .6rem; }
.onb-cartao .onb-icone { width: 44px; height: 44px; }
.onb-cartao .onb-icone svg { width: 22px; height: 22px; }
.onb-progresso { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-terciario); }
.onb-titulo { margin: .1rem 0 0; font-size: 1rem; }
.onb-pontos { display: flex; gap: .3rem; justify-content: center; margin-bottom: .9rem; }
.onb-pontos span { width: 7px; height: 7px; border-radius: 50%; background: var(--borda); }
.onb-pontos span.ativo { background: var(--cor-primaria); }

.onb-destaque { position: relative; z-index: 1050; outline: 3px solid var(--cor-primaria); outline-offset: 2px; border-radius: var(--raio-pequeno); animation: onb-pulso 1.4s ease-in-out infinite; }
@keyframes onb-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } 50% { box-shadow: 0 0 0 7px var(--cor-primaria-suave); } }
@media (prefers-reduced-motion: reduce) { .onb-destaque { animation: none; } }

.onb-aviso { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding: .9rem 1.1rem; background: var(--cor-primaria-suave); border: 1px solid var(--cor-primaria); border-radius: var(--raio); }
.onb-aviso .onb-icone { width: 40px; height: 40px; background: var(--superficie); }
.onb-aviso .onb-icone svg { width: 20px; height: 20px; }
.onb-aviso-texto { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 220px; font-size: .9rem; }
.onb-aviso-texto span { color: var(--texto-secundario); font-size: .85rem; }

/* Cartão do guia: tema escuro para se destacar da página, com seta apontando para o item */
.onb-cartao { background: var(--marca-escura); border-color: var(--marca-escura); color: #fff; }
.onb-cartao .onb-titulo { color: #fff; }
.onb-cartao .onb-progresso { color: var(--marca-escura-apoio); }
.onb-cartao .onb-texto { color: var(--marca-escura-texto); }
.onb-cartao .onb-icone { background: rgba(255, 255, 255, .14); color: #fff; }
.onb-cartao .onb-pontos span { background: rgba(255, 255, 255, .28); }
.onb-cartao .onb-pontos span.ativo { background: #fff; }
.onb-cartao .btn-secundario { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff; }
.onb-cartao .btn-secundario:hover { background: rgba(255, 255, 255, .12); }
.onb-cartao::before { content: ''; position: absolute; width: 14px; height: 14px; background: var(--marca-escura); transform: rotate(45deg); display: none; }
.onb-cartao.onb-seta-esquerda::before { display: block; left: -7px; top: calc(var(--onb-seta, 40px) - 7px); }
.onb-cartao.onb-seta-cima::before { display: block; top: -7px; left: calc(var(--onb-seta, 40px) - 7px); }

/* Painel do cliente na abertura de atendimento (modulos/chamados/form.php) */
.alerta-msg.alerta  { background: var(--alerta-suave); color: var(--alerta); border-color: rgba(194,132,26,.25); }
.painel-cliente-atendimento { border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem 1.1rem; margin-bottom: 1.25rem; background: var(--superficie); font-size: .88rem; }
.painel-cliente-atendimento.painel-cliente-destaque { border-color: var(--perigo); box-shadow: 0 0 0 3px var(--perigo-suave); }
.painel-cliente-atendimento h4 { display: flex; align-items: center; gap: .4rem; font-size: .9rem; margin: 1rem 0 .5rem; }
.painel-cliente-alerta { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .75rem; }
.painel-cliente-alerta svg { flex-shrink: 0; margin-top: .1rem; }
.painel-cliente-cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.painel-cliente-link { margin-left: auto; font-size: .82rem; }
.painel-cliente-meta { color: var(--texto-secundario); font-size: .82rem; margin: .35rem 0 0; }
.painel-cliente-vazio { color: var(--texto-terciario); margin: 0; }
.painel-cliente-lista { list-style: none; margin: 0; padding: 0; }
.painel-cliente-lista li { padding: .55rem 0; border-top: 1px solid var(--borda); }
.painel-cliente-lista li:first-child { border-top: none; padding-top: 0; }
.painel-cliente-linha { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.painel-cliente-detalhes { color: var(--texto-secundario); font-size: .8rem; margin-top: .25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.painel-cliente-obs { background: var(--alerta-suave); border-left: 3px solid var(--alerta); padding: .5rem .75rem; border-radius: var(--raio-pequeno); margin-bottom: .4rem; white-space: normal; }
.painel-cliente-carregando { color: var(--texto-terciario); font-size: .85rem; margin-bottom: 1rem; }
/* Form de atendimento: formulário à esquerda, painel do cliente à direita (fixo ao rolar) */
.atendimento-form-layout { display: grid; grid-template-columns: minmax(0, 820px) minmax(300px, 400px); gap: 1.25rem; align-items: start; }
.atendimento-form-principal { min-width: 0; }
.atendimento-form-lateral { position: sticky; top: calc(var(--topbar-altura) + 1rem); max-height: calc(100vh - var(--topbar-altura) - 2rem); overflow-y: auto; }
.atendimento-form-lateral:empty { display: none; }
.atendimento-form-lateral .painel-cliente-atendimento { margin-bottom: 0; }
@media (max-width: 1100px) {
    .atendimento-form-layout { grid-template-columns: minmax(0, 1fr); }
    .atendimento-form-lateral { position: static; max-height: none; overflow: visible; }
}
/* Aviso flutuante temporário (some sozinho) */
.aviso-temporario { position: fixed; top: calc(var(--topbar-altura) + 1rem); right: 1.25rem; z-index: 2000; max-width: 360px; padding: .8rem 1rem; border-radius: var(--raio-pequeno); background: var(--info-suave); color: var(--info); border: 1px solid rgba(59,125,219,.3); box-shadow: 0 6px 20px rgba(0,0,0,.12); font-size: .88rem; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s; pointer-events: none; }
.aviso-temporario.visivel { opacity: 1; transform: translateY(0); }

/* ------------------- Dashboards personalizáveis (por usuário) ------------------- */
.dash-barra { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.dash-barra-edicao { display: none; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; flex: 1; }
.dash-barra-dica { font-size: .8rem; color: var(--texto-secundario); margin-right: auto; }
.dash-select-adicionar { width: auto; min-width: 220px; padding: .4rem .6rem; font-size: .85rem; }
.dash-personalizavel.editando .dash-barra { position: sticky; top: var(--topbar-altura); z-index: 20; background: var(--bg); padding: .6rem 0; }
.dash-personalizavel.editando .dash-btn-personalizar { display: none; }
.dash-personalizavel.editando .dash-barra-edicao { display: flex; }

.dash-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: stretch; margin-bottom: 1.5rem; }
.dash-widget { grid-column: span var(--dash-span, 6); min-width: 0; display: flex; flex-direction: column; }
.dash-widget-corpo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dash-widget-corpo > .cartao { flex: 1; display: flex; flex-direction: column; }
.dash-widget-corpo > .cartao.stat-card { justify-content: space-between; min-height: 8.5rem; }
/* Cards de indicador têm altura própria e igual em todos os dashboards; não esticam para acompanhar listas ou gráficos vizinhos */
.dash-widget:has(> .dash-widget-corpo > .cartao.stat-card) { align-self: start; }
.dash-widget-corpo .metas-grid { flex: 1; }
.dash-widget-corpo > h3 { margin: 0 0 .6rem; }
.dash-vazio { grid-column: 1 / -1; text-align: center; color: var(--texto-secundario); }

.dash-widget-controles { display: none; align-items: center; gap: .3rem; padding: .3rem .4rem; margin-bottom: .35rem; background: var(--superficie); border: 1px dashed var(--cor-primaria); border-radius: var(--raio-pequeno); font-size: .78rem; }
.dash-personalizavel.editando .dash-widget-controles { display: flex; }
.dash-personalizavel.editando .dash-widget-corpo { opacity: .85; }
.dash-personalizavel.editando .dash-widget-corpo a { cursor: default; }
.dash-widget-alca { cursor: grab; color: var(--texto-terciario); display: inline-flex; }
.dash-widget-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--texto-secundario); }
.dash-btn { border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-secundario); border-radius: 6px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0; }
.dash-btn:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.dash-btn-remover:hover { border-color: var(--perigo); color: var(--perigo); background: var(--perigo-suave); }
.dash-icone-esquerda { transform: rotate(180deg); }
.dash-largura { width: auto; padding: .1rem .3rem; font-size: .75rem; height: 24px; }
.dash-arrastando { opacity: .4; }
.dash-widget-novo .dash-widget-corpo > * { box-shadow: 0 0 0 3px var(--cor-primaria-suave); }

@media (max-width: 980px) {
    .dash-widget[data-largura="3"], .dash-widget[data-largura="4"] { grid-column: span 6; }
    .dash-widget[data-largura="6"], .dash-widget[data-largura="8"] { grid-column: span 12; }
}
@media (max-width: 560px) {
    .dash-widget { grid-column: span 12 !important; }
}
.dash-card-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.dash-card-cabecalho h3 { margin: 0; }
.dash-card-cabecalho a { font-size: .85rem; white-space: nowrap; }
.dash-card-vazio { color: var(--texto-secundario); font-size: .9rem; margin: 0; }
.dash-barras { display: flex; flex-direction: column; gap: .45rem; }
.dash-barra-linha { display: grid; grid-template-columns: minmax(80px, 38%) 1fr auto; align-items: center; gap: .6rem; font-size: .84rem; color: inherit; text-decoration: none; padding: .1rem .2rem; border-radius: var(--raio-pequeno); }
a.dash-barra-linha:hover { background: var(--bg); text-decoration: none; }
.dash-barra-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-barra-valor { font-weight: 600; white-space: nowrap; }
.dash-atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.dash-atalho { display: flex; align-items: center; gap: .55rem; padding: .6rem .7rem; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); color: inherit; font-size: .86rem; font-weight: 600; text-decoration: none; }
.dash-atalho:hover { border-color: var(--cor-primaria); text-decoration: none; background: var(--cor-primaria-suave); }
.dash-lista-badge { margin-left: auto; flex-shrink: 0; }
.dash-card-subtitulo { font-size: .78rem; color: var(--texto-terciario); margin-top: .15rem; }
.dash-legenda { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .78rem; justify-content: flex-end; }
.dash-legenda-item { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }

/* ---------------------- Importar / exportar (modulos/dados) ---------------------- */
.dados-wrap { max-width: 1100px; }
.dados-passos { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; color: var(--texto-terciario); }
.dados-passo { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--texto-terciario); text-decoration: none; }
.dados-passo span { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--borda); font-size: .78rem; font-weight: 700; }
.dados-passo.atual { color: var(--texto); font-weight: 700; }
.dados-passo.atual span { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }
.dados-passo.feito { color: var(--texto-secundario); }
.dados-passo.feito span { background: var(--cor-primaria-suave); border-color: var(--cor-primaria); color: var(--cor-primaria); }
a.dados-passo:hover { text-decoration: none; color: var(--cor-primaria); }
.dados-titulo { margin: 0 0 1rem; }
.dados-opcoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.dados-opcao { display: flex; flex-direction: column; gap: .45rem; padding: 1.25rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); color: inherit; text-decoration: none; transition: border-color .12s, box-shadow .12s, transform .12s; }
.dados-opcao:hover { text-decoration: none; border-color: var(--cor-primaria); box-shadow: var(--sombra-elevada); transform: translateY(-1px); }
.dados-opcao strong { font-size: 1.05rem; }
.dados-opcao > span:last-child { font-size: .85rem; color: var(--texto-secundario); }
.dados-opcao-icone { width: 42px; height: 42px; border-radius: 10px; }
.dados-cartao h2 { display: flex; align-items: center; gap: .5rem; }
.dados-secao { border-top: 1px solid var(--borda); padding-top: 1rem; margin-top: 1rem; }
.dados-secao h3 { margin: 0 0 .6rem; font-size: 1rem; }
.dados-secao-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .4rem; }
.dados-secao-cabecalho h3 { margin: 0; }
.dados-atalhos { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--texto-terciario); flex-wrap: wrap; }
.btn-link { background: none; border: none; padding: 0; color: var(--cor-primaria); cursor: pointer; font-size: inherit; font-family: inherit; }
.btn-link:hover { text-decoration: underline; }
.dados-campos { display: flex; flex-wrap: wrap; gap: .4rem; }
.dados-campos .chip-filtro[hidden] { display: none; }
.dados-filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 1rem; align-items: start; }
.dados-lista { margin: 0 0 1rem; padding-left: 1.2rem; font-size: .88rem; color: var(--texto-secundario); }
.dados-lista li { margin-bottom: .25rem; }
.dados-tabela-previa { max-height: 460px; overflow: auto; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); margin-bottom: 1rem; }
.dados-tabela-previa table.tabela-padrao td, .dados-tabela-previa table.tabela-padrao th { padding: .5rem .7rem; font-size: .84rem; }
.dados-tabela-previa thead th { position: sticky; top: 0; background: var(--superficie); z-index: 1; }
.dados-tabela-formato code { font-size: .8rem; }
.dados-linha-pulada td { color: var(--texto-secundario); }
.dados-linha-motivo td { padding-top: 0 !important; border-bottom: 1px solid var(--borda); }
.dados-motivo-erro { color: var(--perigo); font-size: .8rem; margin-right: .75rem; }
.dados-motivo-aviso { color: var(--alerta); font-size: .8rem; margin-right: .75rem; }
.dados-resumo { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.dados-resumo-item { padding: .6rem .9rem; border-radius: var(--raio-pequeno); background: var(--bg); font-size: .88rem; }
.dados-resumo-item strong { font-size: 1.15rem; margin-right: .2rem; }
.dados-resumo-item.sucesso { background: var(--sucesso-suave); color: var(--sucesso); }
.dados-resumo-item.perigo { background: var(--perigo-suave); color: var(--perigo); }
.dados-resumo-item.alerta { background: var(--alerta-suave); color: var(--alerta); }
.dados-acoes { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.dados-formatos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; }
.dados-formato { position: relative; cursor: pointer; margin: 0; }
.dados-formato input { position: absolute; opacity: 0; }
.dados-formato > span { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .85rem 1rem; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); background: var(--superficie); height: 100%; }
.dados-formato small { flex-basis: 100%; color: var(--texto-secundario); font-size: .8rem; }
.dados-formato input:checked + span { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); box-shadow: 0 0 0 1px var(--cor-primaria); }
.dados-formato input:focus-visible + span { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }

/* -------- Acompanhamento do atendimento pelo cliente (tarefas/detalhe.php) -------- */
.acomp-protocolo-interno { display: flex; align-items: center; gap: .4rem; font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; letter-spacing: .04em; }
.acomp-status-interno { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .8rem; color: var(--texto-secundario); margin: .75rem 0 .5rem; }
.acomp-link-interno { display: flex; align-items: center; gap: .3rem; }
.acomp-link-interno input { font-size: .78rem; padding: .4rem .5rem; color: var(--texto-secundario); }
.acomp-botoes-interno { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.acomp-email-interno { display: flex; gap: .4rem; margin-top: .6rem; }
.acomp-email-interno input { font-size: .84rem; padding: .4rem .55rem; }
.acomp-retorno-interno { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; padding: .45rem .6rem; border-radius: var(--raio-pequeno); background: var(--alerta-suave); color: var(--alerta); font-size: .8rem; }
.evento-card-cliente { border-left: 3px solid var(--cor-primaria); background: var(--cor-primaria-suave); }
.evento-obs-cliente { background: var(--superficie); }
.acomp-aviso-novo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.acomp-form-opcoes { border: 1px solid var(--borda); border-radius: var(--raio-pequeno); padding: .75rem 1rem 1rem; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.acomp-form-opcoes legend { font-weight: 600; font-size: .9rem; padding: 0 .35rem; display: inline-flex; align-items: center; gap: .35rem; }
.acomp-form-opcoes .chip-filtro[hidden] { display: none; }
.acomp-form-opcoes .ajuda { flex-basis: 100%; }
.config-opcao { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem 0; cursor: pointer; font-weight: normal; }
.config-opcao input { width: auto; margin-top: .2rem; }
.config-opcao span { display: flex; flex-direction: column; gap: .1rem; font-size: .9rem; }
.config-opcao small { color: var(--texto-secundario); font-size: .8rem; }
.config-subopcoes { margin: .25rem 0 0 1.6rem; padding-left: .9rem; border-left: 2px solid var(--borda); }

/* Inteligência artificial: configuração (modulos/integracoes/ia.php) e blocos de análise (includes/ia-analises.php) */
:root { --ia: #7C3AED; --ia-suave: #F3EEFE; }
.ia-config-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
@media (max-width: 960px) { .ia-config-grade { grid-template-columns: 1fr; } }
.ia-provedores { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.ia-provedor { cursor: pointer; font-weight: normal; margin: 0; }
.ia-provedor input { position: absolute; opacity: 0; pointer-events: none; }
.ia-provedor-corpo { display: flex; gap: .7rem; align-items: center; border: 1px solid var(--borda); border-radius: var(--raio); padding: .75rem .9rem; transition: border-color .15s, box-shadow .15s; }
.ia-provedor-corpo > span:last-child { display: flex; flex-direction: column; }
.ia-provedor-corpo small { color: var(--texto-secundario); font-size: .78rem; }
.ia-provedor input:checked + .ia-provedor-corpo { border-color: var(--ia); box-shadow: 0 0 0 3px var(--ia-suave); }
.ia-provedor input:focus-visible + .ia-provedor-corpo { outline: 2px solid var(--ia); outline-offset: 2px; }
.ia-provedor-marca { width: 34px; height: 34px; border-radius: 9px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.ia-painel-provedor { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borda); }
.ia-modelo-sugestao { display: inline-block; margin: .15rem .35rem 0 0; padding: .05rem .45rem; border-radius: 999px; background: var(--bg); font-size: .75rem; }
.ia-uso-lista { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.ia-uso-lista li { display: flex; justify-content: space-between; padding: .35rem 0; border-bottom: 1px dashed var(--borda); }
.ia-uso-lista li:last-child { border-bottom: 0; }
.ia-analises-config { display: grid; gap: .75rem; }
.ia-analise-config { border: 1px solid var(--borda); border-radius: var(--raio); padding: .75rem .9rem; }
.ia-analise-config textarea { margin-top: .4rem; }

.btn-ia { display: inline-flex; align-items: center; gap: .4rem; background: var(--ia-suave); color: var(--ia); border: 1px solid rgba(124,58,237,.25); }
.btn-ia:hover { background: var(--ia); color: #fff; }
.btn-ia[disabled] { opacity: .6; cursor: progress; }
.ia-bloco { border: 1px solid rgba(124,58,237,.25); border-radius: var(--raio); background: var(--superficie); padding: 1rem 1.1rem; margin: 1rem 0; font-size: .9rem; }
.ia-bloco-topo { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem; }
.ia-bloco-titulo { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--ia); }
.ia-bloco-meta { font-size: .75rem; color: var(--texto-terciario); }
.ia-bloco h5 { margin: .9rem 0 .35rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-secundario); }
.ia-bloco ul { margin: 0; padding-left: 1.1rem; }
.ia-bloco li { margin: .2rem 0; }
/* Card "Leitura da IA" nos dashboards: compacto, o texto rola dentro do card. */
.ia-widget-compacto .ia-bloco { margin: .6rem 0 0; padding: .75rem .85rem; font-size: .84rem; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.ia-widget-compacto .ia-bloco h5 { margin: .6rem 0 .25rem; }
.ia-widget-compacto .ia-bloco-topo { position: sticky; top: -.75rem; background: var(--superficie); padding: .15rem 0 .35rem; z-index: 1; }
.ia-bloco-resumo { margin: 0; line-height: 1.5; }
.ia-bloco-rodape { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--borda); font-size: .8rem; color: var(--texto-secundario); }
.ia-bloco-rodape .btn { padding: .2rem .5rem; }
.ia-bloco-rodape .ativo { background: var(--ia-suave); color: var(--ia); }
.ia-bloco-erro { color: var(--perigo); }
.ia-bloco-carregando { display: flex; align-items: center; gap: .5rem; color: var(--texto-secundario); }
.ia-bloco-carregando::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--ia-suave); border-top-color: var(--ia); border-radius: 50%; animation: ia-girar .8s linear infinite; }
@keyframes ia-girar { to { transform: rotate(360deg); } }
.ia-tag { display: inline-block; padding: .05rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 600; margin-left: .3rem; }
.ia-tag-alta, .ia-tag-alto, .ia-tag-negativo { background: var(--perigo-suave); color: var(--perigo); }
.ia-tag-media, .ia-tag-medio, .ia-tag-neutro, .ia-tag-misto { background: var(--alerta-suave); color: var(--alerta); }
.ia-tag-baixa, .ia-tag-baixo, .ia-tag-positivo { background: var(--sucesso-suave); color: var(--sucesso); }
.ia-rascunho { white-space: pre-wrap; background: var(--bg); border-radius: var(--raio-pequeno); padding: .6rem .75rem; margin: 0 0 .4rem; }
.ia-historico { list-style: none; padding: 0; margin: 0; font-size: .85rem; }
.ia-historico li { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem 0; border-bottom: 1px dashed var(--borda); }

/* Logs de segurança (modulos/painel/logs-seguranca.php) */
.badge-critico { background: var(--perigo); color: #fff; }
.log-detalhes { margin: .4rem 0 0; padding: .6rem .75rem; max-height: 280px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, Consolas, monospace; font-size: .78rem; background: var(--bg); border-radius: var(--raio-pequeno); }

/* ============================================================================
   Marketing (modulos/marketing/) - campanhas, listas, conteúdos, réguas
   ============================================================================ */
.editor-email-wrapper { margin-bottom: .25rem; }
.editor-email-wrapper .tox-tinymce { border-radius: var(--raio-pequeno); border-color: var(--borda); }
.mkt-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.mkt-cabecalho-acoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.mkt-cabecalho-acoes form { margin: 0; }
.mkt-grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; align-items: start; }
.mkt-grade-2 > .cartao { margin: 0; }
.mkt-grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1rem; }
.mkt-grade-campos.mkt-grade-3 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.mkt-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.mkt-kpis .stat-label { line-height: 1.35; }
.mkt-delta { font-size: .74rem; font-weight: 700; margin-left: .2rem; white-space: nowrap; }
.mkt-delta.bom { color: var(--sucesso); }
.mkt-delta.ruim { color: var(--perigo); }
.mkt-delta.neutro { color: var(--texto-terciario); font-weight: 500; }
.mkt-uso { margin: .5rem 0; }
.mkt-uso-topo { display: flex; justify-content: space-between; gap: .5rem; font-size: .88rem; margin-bottom: .35rem; }
.mkt-uso-trilha { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.mkt-uso-trilha > div { height: 100%; border-radius: 999px; transition: width .4s; }
.mkt-legenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--texto-secundario); margin-top: .4rem; }
.mkt-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: middle; }
.mkt-insight { display: flex; gap: .55rem; align-items: flex-start; padding: .65rem .8rem; border-radius: var(--raio-pequeno); background: var(--cor-marketing-suave); color: var(--texto); font-size: .86rem; margin-top: .75rem; }
.mkt-insight svg { color: var(--cor-marketing); margin-top: .1rem; }
.mkt-insight.neutro { background: var(--bg); }
.mkt-insight.neutro svg { color: var(--texto-terciario); }
.mkt-insight.alerta { background: var(--alerta-suave); }
.mkt-insight.alerta svg { color: var(--alerta); }
.mkt-primeiros-passos { margin-bottom: 1.25rem; border-left: 4px solid var(--cor-marketing); }
.mkt-pp-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.mkt-pp-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .5rem; }
.mkt-pp-item { display: flex; align-items: center; gap: .55rem; padding: .6rem .7rem; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); color: var(--texto); text-decoration: none; font-size: .88rem; }
.mkt-pp-item span { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--borda); display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; }
.mkt-pp-item.feito { color: var(--texto-secundario); text-decoration: line-through; }
.mkt-pp-item.feito span { background: var(--sucesso); border-color: var(--sucesso); color: #fff; }
.mkt-pp-item:hover { border-color: var(--cor-marketing); text-decoration: none; }
.mkt-sugestoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.mkt-sugestao { margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.mkt-sugestao p { margin: 0; font-size: .86rem; color: var(--texto-secundario); flex: 1; }
.mkt-sugestao .btn { align-self: flex-start; }
.mkt-sugestao-topo { display: flex; align-items: center; gap: .55rem; }
.mkt-sugestao-topo strong { flex: 1; font-size: .92rem; color: var(--texto); }
a.mkt-sugestao-link { text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
a.mkt-sugestao-link:hover { border-color: var(--cor-marketing); transform: translateY(-2px); text-decoration: none; }
.mkt-cartao-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: 1rem 1.25rem .5rem; flex-wrap: wrap; }
.mkt-cartao-cabecalho h3 { margin: 0; }
.mkt-vazio { padding: 1.25rem; margin: 0; color: var(--texto-secundario); font-size: .9rem; }
.mkt-vazio-grande { text-align: center; padding: 2.5rem 1.5rem; color: var(--texto-secundario); }
.mkt-vazio-grande svg { color: var(--cor-marketing); opacity: .7; }
.mkt-vazio-grande p { max-width: 560px; margin: .75rem auto 1rem; }
.mkt-rodape-cartao { padding: .75rem 1.25rem; border-top: 1px solid var(--borda); font-size: .85rem; color: var(--texto-secundario); }
.mkt-mini-funil { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: .45rem; max-width: 640px; }
.mkt-mini-funil > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .1rem .35rem; font-size: .72rem; color: var(--texto-secundario); }
.mkt-mini-funil strong { font-size: .78rem; color: var(--texto); }
.mkt-mini-trilha { grid-column: 1 / -1; height: 5px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.mkt-mini-trilha > div { height: 100%; border-radius: 999px; }
.mkt-avatar-lista { display: inline-flex; align-items: center; justify-content: center; background: var(--cor-marketing-suave); color: var(--cor-marketing); border-radius: 10px; }
.mkt-avatar-lista.segmento { background: var(--info-suave); color: var(--info); }

/* Formulários do marketing */
.mkt-secao { margin-bottom: 1.25rem; }
.mkt-secao h3 { display: flex; align-items: center; gap: .5rem; }
.mkt-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cor-marketing); color: #fff; font-size: .8rem; font-weight: 800; flex-shrink: 0; }
.mkt-passos { position: sticky; top: calc(var(--topbar-altura) + .5rem); z-index: 5; display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; padding: .5rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: 999px; width: fit-content; box-shadow: var(--sombra); }
.mkt-passo { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; font-size: .85rem; color: var(--texto-secundario); text-decoration: none; }
.mkt-passo span { width: 20px; height: 20px; border-radius: 50%; background: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; }
.mkt-passo:hover { background: var(--cor-marketing-suave); color: var(--cor-marketing); text-decoration: none; }
.mkt-opcoes-cartao { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; }
.mkt-opcoes-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.mkt-opcao-cartao { position: relative; display: block; cursor: pointer; font-weight: 400 !important; margin: 0; }
.mkt-opcao-cartao input { position: absolute; opacity: 0; pointer-events: none; }
.mkt-opcao-cartao > span { display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: .85rem 1rem; border: 2px solid var(--borda); border-radius: var(--raio); transition: border-color .15s, background .15s; }
.mkt-opcao-cartao > span svg { color: var(--cor-marketing); }
.mkt-opcao-cartao small { color: var(--texto-secundario); font-size: .8rem; line-height: 1.4; }
.mkt-opcao-cartao input:checked + span { border-color: var(--cor-marketing); background: var(--cor-marketing-suave); }
.mkt-opcao-cartao input:focus-visible + span { outline: 2px solid var(--cor-marketing); outline-offset: 2px; }
.mkt-check-linha { display: flex !important; align-items: flex-start; gap: .5rem; font-weight: 400 !important; margin: .35rem 0; cursor: pointer; }
.mkt-check-linha input { width: auto !important; margin-top: .25rem; flex-shrink: 0; }
.mkt-recuo { margin-left: 1.6rem !important; }
.mkt-publico { margin-top: .75rem; padding: .85rem 1rem; border-radius: var(--raio-pequeno); background: var(--bg); border: 1px dashed var(--borda); font-size: .88rem; }
.mkt-publico:empty { display: none; }
.mkt-publico { transition: opacity .15s; min-height: 3.5rem; }
.mkt-publico.carregando { opacity: .55; }
.mkt-publico-numero { font-size: 1rem; color: var(--texto); }
.mkt-publico-numero strong { font-size: 1.35rem; color: var(--cor-marketing); }
.mkt-publico-fora { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; margin-top: .45rem; font-size: .8rem; color: var(--texto-secundario); }
.mkt-erro-texto { color: var(--perigo); }
.mkt-ia-barra { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; padding: .6rem .75rem; border-radius: var(--raio-pequeno); background: var(--ia-suave, #F3EEFE); }
.mkt-ia-previa { max-height: 300px; overflow: auto; padding: .75rem; margin: .75rem 0; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); background: var(--bg); }
.mkt-detalhes { margin: .75rem 0; }
.mkt-detalhes > summary { cursor: pointer; font-weight: 600; font-size: .9rem; padding: .35rem 0; color: var(--texto-secundario); }
.mkt-detalhes[open] > summary { margin-bottom: .5rem; }
.mkt-detalhes-cartao { margin-bottom: 1.25rem; }
.mkt-detalhes-cartao > summary { cursor: pointer; }
.mkt-checklist { list-style: none; margin: 0 0 .75rem; padding: 0; font-size: .88rem; }
.mkt-checklist li { position: relative; padding: .45rem .5rem .45rem 1.9rem; border-bottom: 1px solid var(--borda); }
.mkt-checklist li::before { position: absolute; left: .45rem; top: .45rem; font-weight: 800; }
.mkt-checklist li.ok::before { content: "\2713"; color: var(--sucesso); }
.mkt-checklist li.aviso::before { content: "!"; color: var(--alerta); }
.mkt-checklist li.erro::before { content: "\2715"; color: var(--perigo); }
.mkt-checklist li.erro { color: var(--perigo); }
.mkt-teste { padding: .85rem 1rem; border-radius: var(--raio-pequeno); background: var(--bg); margin-bottom: 1rem; }
.mkt-teste label { font-weight: 600; display: block; margin-bottom: .35rem; }
.mkt-botoes-envio { display: flex; gap: .75rem; justify-content: flex-end; flex-wrap: wrap; margin: 1rem 0 0; }
.mkt-aprovacao { border-left: 4px solid var(--alerta); margin-bottom: 1.25rem; }
.mkt-reenvio { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.mkt-reenvio form { margin: 0; }
.mkt-ab { padding: .6rem .75rem; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); margin-bottom: .5rem; }
.mkt-ab.vencedor { border-color: var(--sucesso); background: var(--sucesso-suave); }
.mkt-ab .linha-registro-meta { gap: 1rem; }
.mkt-previa-iframe { width: 100%; height: 520px; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); background: #F2F4F7; margin-top: .75rem; }
.mkt-previa-iframe.alta { height: calc(100vh - 220px); min-height: 520px; margin-top: 0; transition: width .2s; display: block; margin-left: auto; margin-right: auto; }
.mkt-filtro-abas { display: flex; gap: .25rem; flex-wrap: wrap; padding: 0 1.25rem .75rem; border-bottom: 1px solid var(--borda); }
.mkt-adicionar .mkt-filtro-abas { padding: 0 0 .75rem; margin-bottom: .75rem; }
.mkt-filtro-abas a { padding: .3rem .7rem; border-radius: 999px; font-size: .82rem; color: var(--texto-secundario); text-decoration: none; border: 1px solid transparent; }
.mkt-filtro-abas a:hover { background: var(--bg); text-decoration: none; }
.mkt-filtro-abas a.ativa { background: var(--cor-marketing-suave); color: var(--cor-marketing); border-color: rgba(122, 63, 209, .25); font-weight: 600; }
.mkt-trilha-envio { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .35rem; }
.mkt-passo-envio { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .45rem; border-radius: 999px; font-size: .72rem; background: var(--bg); color: var(--texto-secundario); }
.mkt-passo-envio.bom { background: var(--sucesso-suave); color: var(--sucesso); }
.mkt-passo-envio.ruim { background: var(--perigo-suave); color: var(--perigo); }
.mkt-paginacao { display: flex; gap: .3rem; flex-wrap: wrap; padding: .75rem 1.25rem; border-top: 1px solid var(--borda); }
.mkt-paginacao a { min-width: 32px; text-align: center; padding: .25rem .5rem; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); font-size: .82rem; color: var(--texto); text-decoration: none; }
.mkt-paginacao a.ativa { background: var(--cor-marketing); border-color: var(--cor-marketing); color: #fff; }

/* Listas */
.mkt-filtro-destino { max-width: 460px; }
.mkt-regras { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
.mkt-regra { display: grid; grid-template-columns: minmax(170px, 260px) minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .6rem .75rem; border-radius: var(--raio-pequeno); border: 1px solid rgba(122, 63, 209, .3); background: var(--cor-marketing-suave); }
.mkt-regra[hidden] { display: none; }
.mkt-regra-rotulo { font-weight: 600; margin: 0; }
.mkt-regra-valor input[type="text"], .mkt-regra-valor input[type="number"], .mkt-regra-valor select { width: 100%; max-width: 380px; }
.mkt-regra-remover { border: 0; background: transparent; color: var(--texto-secundario); width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mkt-regra-remover:hover { background: rgba(0, 0, 0, .07); color: var(--perigo); }
.mkt-filtros-add { padding: .85rem 1rem; border: 2px dashed rgba(122, 63, 209, .45); border-radius: var(--raio); background: var(--cor-marketing-suave); }
.mkt-filtros-vazio { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 .75rem; color: var(--cor-marketing); line-height: 1.4; }
.mkt-filtros-vazio[hidden] { display: none; }
.mkt-filtros-vazio .icone-svg { margin-top: .15rem; }
.mkt-filtros-add select { width: 100%; max-width: 380px; border-color: var(--cor-marketing); color: var(--cor-marketing); font-weight: 600; background-color: var(--superficie); cursor: pointer; }
.mkt-filtros-add select:hover { box-shadow: 0 0 0 3px rgba(122, 63, 209, .18); }
.mkt-filtros-add select[hidden] { display: none; }
@media (max-width: 700px) { .mkt-regra { grid-template-columns: 1fr auto; } .mkt-regra-valor { grid-column: 1 / -1; grid-row: 2; } }
.mkt-regra .chips-filtro { display: flex; flex-wrap: wrap; gap: .35rem; }
.mkt-checks-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1rem; margin-bottom: .5rem; }
.mkt-adicionar { margin-bottom: 1.25rem; }
.mkt-adicionar textarea, .mkt-adicionar input[type=text] { width: 100%; }
.mkt-resultado-busca { max-height: 340px; overflow: auto; margin: .5rem 0; }
.mkt-resultado-item { padding: .35rem .5rem; border-bottom: 1px solid var(--borda); }
.mkt-criar-leads { margin: .5rem 0 .75rem; }
.mkt-declaracao { padding: .5rem .65rem; border-radius: var(--raio-pequeno); background: var(--alerta-suave); font-size: .85rem; }
.mkt-fonte { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--borda); font-size: .88rem; flex-wrap: wrap; }
.mkt-fonte form { margin: 0; }
.linha-registro .mkt-check-membro { width: auto; margin-right: .25rem; }

/* Construtores (landing / formulário) */
.mkt-construtor-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.mkt-construtor-previa { position: sticky; top: calc(var(--topbar-altura) + 1rem); }
.mkt-previa-barra { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.mkt-previa-tamanhos { margin-left: auto; display: inline-flex; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); overflow: hidden; }
.mkt-previa-tamanhos button { background: var(--superficie); border: 0; padding: .3rem .55rem; cursor: pointer; color: var(--texto-secundario); }
.mkt-previa-tamanhos button.ativa { background: var(--cor-marketing-suave); color: var(--cor-marketing); }
.mkt-slug { display: flex; align-items: stretch; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); overflow: hidden; }
.mkt-slug span { padding: .55rem .6rem; background: var(--bg); color: var(--texto-terciario); font-size: .78rem; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; align-self: center; }
.mkt-slug input { border: 0 !important; border-radius: 0 !important; flex: 1; min-width: 0; }
.mkt-bloco { margin-bottom: .75rem; padding: 0; border-left: 4px solid var(--cor-marketing); }
.mkt-bloco-topo { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border-bottom: 1px solid var(--borda); }
.mkt-bloco-resumo { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-bloco-acoes { display: flex; gap: .25rem; flex-shrink: 0; }
.mkt-bloco-acoes .btn-icone { width: 30px; height: 30px; font-size: .9rem; }
.mkt-bloco-corpo { padding: .75rem; }
.mkt-adicionar-bloco { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .5rem 0 1rem; padding: .75rem; border: 1px dashed var(--borda); border-radius: var(--raio); }
.mkt-adicionar-bloco > span { display: inline-flex; align-items: center; gap: .3rem; color: var(--texto-secundario); font-size: .85rem; margin-right: .25rem; }
.mkt-campo-imagem { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.mkt-campo-imagem input[type=text] { flex: 1; min-width: 200px; }
.mkt-itens { display: flex; flex-direction: column; gap: .5rem; }
.mkt-item { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: .5rem; align-items: start; }
.mkt-campo-form { margin-bottom: .75rem; border-left: 4px solid var(--info); }
.mkt-campo-form-topo { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.mkt-campo-form-topo input { flex: 1; font-weight: 600; }

/* Réguas */
.mkt-passo-regua { margin-bottom: 1rem; border-left: 4px solid var(--cor-marketing); }
.mkt-passo-regua-topo { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.mkt-passo-regua-topo select { width: auto; }
.mkt-passo-espera { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; font-size: .88rem; flex: 1; }
.mkt-passo-espera label { font-weight: 600; margin: 0; }
.mkt-passo-espera input { width: 70px; }
.mkt-linha-regua { display: flex; flex-direction: column; padding: .5rem 1.25rem 1.25rem; }
.mkt-linha-regua-item { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; align-items: center; position: relative; }
.mkt-linha-regua-item + .mkt-linha-regua-item { margin-top: .75rem; }
.mkt-linha-regua-espera { font-size: .8rem; color: var(--texto-secundario); text-align: right; }
.mkt-linha-regua-email { margin: 0; border-left: 4px solid var(--cor-marketing); }
.mkt-linha-regua-email strong { display: flex; align-items: center; gap: .5rem; }

/* Leads, relatórios, ficha do cliente */
.mkt-resposta { margin-top: .35rem; font-size: .84rem; }
.mkt-resposta summary { cursor: pointer; color: var(--texto-secundario); }
.mkt-resposta dl { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: .25rem .75rem; margin: .5rem 0 0; }
.mkt-resposta dt { color: var(--texto-secundario); }
.mkt-resposta dd { margin: 0; }
.mkt-funil { display: flex; flex-direction: column; gap: .7rem; margin: .5rem 0 1rem; }
.mkt-funil-linha { display: grid; grid-template-columns: 170px 1fr 70px; gap: .5rem .75rem; align-items: center; }
.mkt-funil-linha .ajuda { grid-column: 2 / -1; margin: -.4rem 0 0; font-size: .75rem; }
.mkt-funil-rotulo { font-size: .86rem; }
.mkt-funil-trilha { height: 14px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.mkt-funil-trilha > div { height: 100%; border-radius: 999px; }
.mkt-tabela { font-size: .86rem; }
.mkt-tabela th { white-space: nowrap; }

@media (max-width: 980px) {
    .mkt-construtor-layout { grid-template-columns: 1fr; }
    .mkt-construtor-previa { position: static; }
    .mkt-previa-iframe.alta { height: 600px; }
}
@media (max-width: 640px) {
    .mkt-grade-2 { grid-template-columns: 1fr; }
    .mkt-mini-funil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mkt-funil-linha { grid-template-columns: 1fr 60px; }
    .mkt-funil-trilha { grid-column: 1 / -1; grid-row: 2; }
    .mkt-linha-regua-item { grid-template-columns: 1fr; }
    .mkt-linha-regua-espera { text-align: left; }
    .mkt-item { grid-template-columns: 1fr; }
    .mkt-passos { width: 100%; border-radius: var(--raio); }
}

/* ==========================================================================
   E-mails automáticos (modulos/empresa/emails-automaticos.php)
   ========================================================================== */
.ema-marca { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem; margin-bottom: 1.25rem; }
.ema-marca-cor { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 3px rgba(255,255,255,.55); }
.ema-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.ema-cartao { padding: 0; overflow: hidden; display: flex; flex-direction: column; margin: 0; }
.ema-miniatura { height: 230px; overflow: hidden; background: #EEF0F4; border-bottom: 1px solid var(--borda); position: relative; }
.ema-miniatura iframe { width: 680px; height: 900px; border: 0; transform: scale(.5); transform-origin: 0 0; pointer-events: none; position: absolute; left: 50%; margin-left: -170px; }
.ema-cartao-corpo { padding: 1rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.ema-cartao-corpo h3 { margin: .2rem 0 0; font-size: 1.05rem; }
.ema-cartao-corpo .ajuda { margin: 0; }
.ema-cartao-corpo .btn { align-self: flex-start; margin-top: auto; }
.ema-cartao-topo { display: flex; gap: .4rem; flex-wrap: wrap; }
.ema-assunto { margin: .1rem 0 .4rem; font-size: .85rem; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ema-assunto span { color: var(--texto-terciario); }
.ema-editor { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ema-editor > .cartao { margin: 0; }
.ema-editor > #form-restaurar { display: none; }
.ema-status { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.ema-fichas { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .45rem; }
.ema-ficha { border: 1px dashed var(--borda); background: var(--bg); color: var(--texto-secundario); border-radius: 999px; padding: .15rem .55rem; font-size: .75rem; font-family: ui-monospace, Consolas, monospace; cursor: pointer; }
.ema-ficha:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.ema-variaveis { margin: .25rem 0 1rem; font-size: .85rem; }
.ema-variaveis summary { cursor: pointer; color: var(--texto-secundario); }
.ema-variaveis dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .35rem 1rem; margin: .6rem 0 0; }
.ema-variaveis dl div { display: flex; gap: .5rem; align-items: baseline; }
.ema-variaveis dt code { font-size: .78rem; white-space: nowrap; }
.ema-variaveis dd { margin: 0; color: var(--texto-secundario); }
.ema-botoes { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.ema-btn-restaurar { order: 0; margin-right: auto; }
.ema-btn-teste { order: 1; margin-left: auto; }
.ema-btn-salvar { order: 2; }
.ema-previa { position: sticky; top: 1rem; }
.ema-previa-topo { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.ema-dispositivos { display: inline-flex; border: 1px solid var(--borda); border-radius: 999px; padding: 2px; background: var(--bg); }
.ema-dispositivos button { border: 0; background: transparent; color: var(--texto-secundario); padding: .3rem .75rem; border-radius: 999px; font-size: .8rem; display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.ema-dispositivos button.ativo { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.ema-caixa-entrada { display: flex; gap: .7rem; align-items: flex-start; border: 1px solid var(--borda); border-radius: var(--raio); padding: .7rem .85rem; background: var(--superficie); margin-bottom: .75rem; }
.ema-avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.ema-caixa-texto { min-width: 0; flex: 1; font-size: .85rem; line-height: 1.35; }
.ema-caixa-linha1 { display: flex; justify-content: space-between; gap: .5rem; }
.ema-caixa-linha1 span { color: var(--texto-terciario); font-size: .75rem; }
.ema-caixa-assunto { font-weight: 600; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ema-caixa-pre { color: var(--texto-secundario); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ema-avisos .alerta-msg { margin: 0 0 .5rem; font-size: .85rem; }
.ema-moldura { background: #EEF0F4; border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; display: flex; justify-content: center; }
.ema-moldura iframe { width: 100%; height: 900px; border: 0; background: #EEF0F4; transition: width .2s; display: block; }
@media (max-width: 1100px) {
    .ema-editor { grid-template-columns: 1fr; }
    .ema-previa { position: static; }
}

/* Dashboard personalizável do Marketing (modulos/marketing/dashboard.php) */
.mkt-sugestao-interna { border: 1px solid var(--borda); border-radius: var(--raio); padding: .9rem 1rem; background: var(--bg); }
.mkt-dash-linha { display: block; padding: .6rem 0; border-top: 1px solid var(--borda); color: inherit; text-decoration: none; }
.mkt-dash-linha:first-of-type { border-top: 0; padding-top: 0; }
.mkt-dash-linha:hover .linha-registro-titulo { color: var(--cor-marketing); }
.mkt-dash-posicao { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .8rem; font-weight: 700; background: var(--bg); color: var(--texto-secundario); }
.mkt-calor { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.mkt-calor-hora { font-size: .66rem; color: var(--texto-terciario); white-space: nowrap; }
.mkt-calor-dia { font-size: .75rem; color: var(--texto-secundario); }
.mkt-calor-celula { display: block; aspect-ratio: 1; min-height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--cor-marketing) var(--calor), var(--bg)); }
.mkt-dash-barra-topo { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.mkt-dash-barra-topo .abas-cadastro a { white-space: nowrap; }

/* ---------------------- Formulários em tela cheia ----------------------
   Cadastros simples (configurações da empresa, produto, meta) ocupam a
   largura toda e distribuem os campos em colunas que se ajustam à tela.
   .cheio, títulos e avisos ocupam a linha inteira. */
.form-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 1.5rem; align-items: start; }
.form-grade > .cheio,
.form-grade > h3,
.form-grade > p,
.form-grade > .alerta-msg { grid-column: 1 / -1; }
.form-grade > .bloco-config-email { margin-bottom: 1rem; }
.form-grade .campo-par { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.form-acoes { display: flex; gap: .75rem; margin-top: 1rem; }

/* ---------------------- Trilha de implantação ---------------------- */
.trilha { margin-bottom: 1.5rem; border-left: 4px solid var(--cor-primaria); }
.trilha-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.trilha-titulo { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.15rem; }
.trilha-sub { margin: .25rem 0 0; color: var(--texto-secundario); font-size: .88rem; max-width: 60ch; }
.trilha-progresso { min-width: 220px; font-size: .85rem; color: var(--texto-secundario); }
.trilha-progresso strong { color: var(--texto); }
.trilha-barra { height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; margin-top: .4rem; }
.trilha-barra-cheia { height: 100%; background: var(--sucesso); border-radius: 999px; transition: width .4s; }
.trilha-passos { align-items: start; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .75rem; }
.trilha-passo { display: flex; gap: .75rem; padding: .85rem 1rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--bg); }
.trilha-passo.proximo { border-color: var(--cor-primaria); background: var(--superficie, #fff); box-shadow: 0 0 0 1px var(--cor-primaria) inset; }
.trilha-passo.feito { opacity: .7; align-items: center; }
.trilha-marca { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; background: var(--borda); color: var(--texto-secundario); }
.trilha-passo.proximo .trilha-marca { background: var(--cor-primaria); color: #fff; }
.trilha-passo.feito .trilha-marca { background: none; color: var(--sucesso); }
.trilha-corpo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.trilha-texto { font-size: .84rem; color: var(--texto-secundario); }
.trilha-acoes { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .25rem; }
.trilha-etiqueta { font-size: .72rem; font-weight: 500; color: var(--texto-secundario); border: 1px solid var(--borda); border-radius: 999px; padding: 0 .45rem; margin-left: .3rem; }

/* ---------------------- Sugestões de objetivos ---------------------- */
.sugestoes-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.sugestao { display: flex; flex-direction: column; gap: .5rem; margin: 0; }
.sugestao h3 { margin: 0; }
.sugestao-para { margin: 0; color: var(--texto-secundario); font-size: .88rem; }
.sugestao-etapas { list-style: none; margin: .25rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.sugestao .btn { align-self: flex-start; margin-top: auto; }

/* ---------------------- Menu da conta (foto no topo) ---------------------- */
.topbar-conta { position: relative; }
.topbar-conta-botao { display: inline-flex; padding: 2px; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; }
.topbar-conta-botao:hover, .topbar-conta-botao[aria-expanded="true"] { border-color: var(--cor-primaria); }
.topbar-conta-botao:focus-visible { outline: 2px solid var(--cor-primaria); outline-offset: 2px; }
.topbar-conta-menu { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 230px; z-index: 300; padding: .35rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: 0 10px 30px rgba(20, 30, 50, .15); }
.topbar-conta-menu[hidden] { display: none; }
.topbar-conta-nome { padding: .45rem .65rem .35rem; font-size: .78rem; color: var(--texto-secundario); font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-conta-menu a { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: 6px; color: var(--texto); font-size: .88rem; text-decoration: none; }
.topbar-conta-menu a:hover { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); }
.topbar-conta-menu a .icone-svg { color: var(--texto-secundario); flex-shrink: 0; }
.topbar-conta-separador { height: 1px; margin: .3rem .25rem; background: var(--borda); }

/* ---------------------- Campo de busca com detalhe (cliente) ---------------------- */
.opcao-busca-nome { display: block; }
.opcao-busca-detalhe { display: block; margin-top: .1rem; font-size: .74rem; line-height: 1.3; color: var(--texto-secundario); }
.opcao-busca:hover .opcao-busca-detalhe, .opcao-busca.destacada .opcao-busca-detalhe { color: inherit; opacity: .8; }
.busca-detalhe-selecionado { margin-top: .3rem; font-size: .76rem; color: var(--texto-secundario); }
.busca-detalhe-selecionado:empty { display: none; }
.mkt-uso-lista { display: flex; flex-wrap: wrap; gap: .5rem; }
.mkt-uso-lista small { color: var(--texto-terciario); margin-left: .25rem; }

/* ==========================================================================
   ENVIOS GUIADOS (modulos/envios/) - assistente "Novo envio", listas e
   central de envios dos ambientes Marketing e Pós-venda. A cor acompanha o
   ambiente (.amb-cor-marketing / .amb-cor-pos_venda definem --amb-cor).
   ========================================================================== */
.env-assistente { --amb-cor: var(--cor-primaria); --amb-cor-suave: var(--bg); }
.env-assistente.amb-cor-pos_venda { --amb-cor: var(--cor-pos-venda); --amb-cor-suave: var(--cor-pos-venda-suave); }
.env-assistente.amb-cor-marketing { --amb-cor: var(--cor-marketing); --amb-cor-suave: var(--cor-marketing-suave); }
.env-badge-ambiente { background: var(--amb-cor-suave); color: var(--amb-cor); vertical-align: middle; font-size: .72rem; }

.env-passos { list-style: none; margin: 0 0 1rem; padding: .4rem; display: flex; gap: .25rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: 999px; width: fit-content; max-width: 100%; overflow-x: auto; box-shadow: var(--sombra); position: sticky; top: calc(var(--topbar-altura) + .5rem); z-index: 5; }
.env-passos li { flex-shrink: 0; }
.env-passo { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem .35rem .4rem; border: 0; border-radius: 999px; background: none; color: var(--texto-secundario); font: inherit; font-size: .86rem; cursor: pointer; }
.env-passo:hover { background: var(--amb-cor-suave); color: var(--amb-cor); }
.env-passo-num { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); font-size: .75rem; font-weight: 800; transition: background .15s, color .15s; }
.env-passo.feito .env-passo-num { background: var(--amb-cor-suave); color: var(--amb-cor); }
.env-passo.atual { background: var(--amb-cor-suave); color: var(--amb-cor); font-weight: 700; }
.env-passo.atual .env-passo-num { background: var(--amb-cor); color: #fff; }

.env-secao { margin-bottom: 1rem; }
.env-secao-titulo { margin: 0 0 .25rem; font-size: 1.15rem; }
.env-secao-ajuda { margin: 0 0 1rem; }
.env-navegacao { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--borda); }
.env-botoes-direita { display: flex; gap: .5rem; flex-wrap: wrap; }
.env-rodape-rascunho { text-align: right; margin: -.25rem 0 1rem; font-size: .85rem; }
.env-rodape-rascunho .btn-link { display: inline-flex; align-items: center; gap: .3rem; color: var(--texto-secundario); }
.env-aviso-passo { margin-top: 1rem; }

/* 1. Finalidade */
.env-finalidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; }
.env-finalidade { position: relative; display: block; margin: 0; cursor: pointer; font-weight: 400 !important; }
.env-finalidade input { position: absolute; opacity: 0; pointer-events: none; }
.env-finalidade-corpo { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: 1rem; border: 2px solid var(--borda); border-radius: var(--raio); background: var(--superficie); transition: border-color .15s, background .15s, transform .15s; }
.env-finalidade:hover .env-finalidade-corpo { border-color: color-mix(in srgb, var(--amb-cor) 45%, var(--borda)); transform: translateY(-1px); }
.env-finalidade input:checked + .env-finalidade-corpo { border-color: var(--amb-cor); background: var(--amb-cor-suave); }
.env-finalidade input:focus-visible + .env-finalidade-corpo { outline: 2px solid var(--amb-cor); outline-offset: 2px; }
.env-finalidade-corpo strong { font-size: .97rem; }
.env-finalidade-corpo small { color: var(--texto-secundario); font-size: .82rem; line-height: 1.45; }
.env-finalidade-icone { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--amb-cor-suave, var(--bg)); color: var(--amb-cor, var(--cor-primaria)); flex-shrink: 0; }
.env-finalidade input:checked + .env-finalidade-corpo .env-finalidade-icone { background: var(--amb-cor); color: #fff; }
.env-finalidade-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; padding-top: .35rem; }
.env-tag { display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .5rem; border-radius: 999px; background: var(--bg); color: var(--texto-secundario); font-size: .72rem; font-weight: 600; }
.env-aviso-regua { margin-top: 1rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* 2. Público */
.env-publicos, .env-publicos-sugeridos { display: grid; gap: .6rem; }
.env-publicos-sugeridos:empty { display: none; }
.env-publico { position: relative; display: block; margin: 0; cursor: pointer; font-weight: 400 !important; }
.env-publico > input { position: absolute; opacity: 0; pointer-events: none; }
.env-publico-corpo { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; row-gap: .15rem; align-items: center; padding: .8rem 1rem .8rem 2.6rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); position: relative; transition: border-color .15s, background .15s; }
.env-publico-corpo::before { content: ""; position: absolute; left: 1rem; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 2px solid var(--texto-terciario); background: var(--superficie); box-sizing: border-box; }
.env-publico > input:checked + .env-publico-corpo { border-color: var(--amb-cor); background: var(--amb-cor-suave); }
.env-publico > input:checked + .env-publico-corpo::before { border-color: var(--amb-cor); box-shadow: inset 0 0 0 3px var(--superficie); background: var(--amb-cor); }
.env-publico > input:focus-visible + .env-publico-corpo { outline: 2px solid var(--amb-cor); outline-offset: 2px; }
.env-publico-corpo strong { grid-column: 1; display: inline-flex; align-items: center; gap: .35rem; }
.env-publico-corpo small { grid-column: 1; color: var(--texto-secundario); font-size: .82rem; }
.env-publico-contagem { grid-column: 2; grid-row: 1 / span 2; font-size: .8rem; font-weight: 700; color: var(--amb-cor); background: var(--superficie); border: 1px solid color-mix(in srgb, var(--amb-cor) 30%, var(--borda)); padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
.env-publico-contagem.zero { color: var(--texto-terciario); border-color: var(--borda); }
.env-publico-lista-campo { grid-column: 1 / -1; display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .45rem; }
.env-publico-lista-campo select { flex: 1; min-width: 220px; }
.env-resumo-publico { margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--raio); background: var(--bg); border: 1px dashed var(--borda); }
.env-resumo-publico:empty { display: none; }
.env-resumo-numero { font-size: 1rem; }
.env-resumo-numero strong { font-size: 1.6rem; color: var(--amb-cor); margin-right: .2rem; }
.env-resumo-amostra { color: var(--texto-secundario); font-size: .85rem; margin-top: .2rem; }
.env-resumo-fora { margin-top: .5rem; font-size: .85rem; display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.env-resumo-semana { margin-top: .5rem; font-size: .85rem; color: var(--alerta); }
.env-resumo-publico .alerta-msg { margin: .6rem 0 0; }

/* 3. Conteúdo */
.env-galeria-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.env-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; margin-bottom: 1.25rem; }
.env-modelo { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left; padding: .8rem .9rem; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); color: var(--texto); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.env-modelo:hover { border-color: var(--amb-cor); box-shadow: 0 4px 14px rgba(16, 24, 40, .08); }
.env-modelo.escolhido { border-color: var(--amb-cor); background: var(--amb-cor-suave); }
.env-modelo strong { font-size: .92rem; }
.env-modelo small { color: var(--texto-secundario); font-size: .8rem; line-height: 1.4; }
.env-modelo-tag { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--amb-cor); }
.env-modelo-assunto { font-size: .78rem; color: var(--texto-terciario); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.env-bloco-extra { margin: 0 0 1.25rem; padding: 1rem 1.1rem; border-radius: var(--raio); background: var(--bg); border: 1px solid var(--borda); }
.env-bloco-extra h4 { margin: 0 0 .6rem; display: flex; align-items: center; gap: .4rem; font-size: .98rem; flex-wrap: wrap; }
.env-bloco-extra h4 svg { color: var(--amb-cor); }
.env-dica { font-size: .85rem; color: var(--texto-secundario); padding: .75rem .9rem; border-left: 3px solid var(--amb-cor); background: var(--superficie); border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0; }
.env-dica p { margin: .25rem 0 0; }
.env-interesses { display: grid; gap: .5rem; margin-bottom: .6rem; }
.env-interesse { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(160px, 1.4fr) auto; gap: .5rem; align-items: center; }
.env-editor-topo { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.env-editor-topo label { margin: 0; }

/* 4. Quando */
.env-lembrete { margin-top: 1.1rem; padding: .85rem 1rem; border: 1px dashed var(--borda); border-radius: var(--raio); }
.env-lembrete select, .env-lembrete input[type=number] { display: inline-block; width: auto; padding: .2rem .4rem; margin: 0 .2rem; }
.env-aviso-semana { margin-top: .9rem; }

/* 5. Revisão */
.env-frase { padding: 1rem 1.1rem; border-radius: var(--raio); background: var(--amb-cor-suave); border: 1px solid color-mix(in srgb, var(--amb-cor) 25%, var(--borda)); font-size: .95rem; line-height: 1.55; margin-bottom: .75rem; }
.env-frase p { margin: 0 0 .45rem; }
.env-frase p:last-child { margin-bottom: 0; }
.env-checagem { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .88rem; }
.env-checagem li { position: relative; padding: .45rem .5rem .45rem 1.9rem; border-bottom: 1px solid var(--borda); }
.env-checagem li::before { position: absolute; left: .45rem; top: .45rem; font-weight: 800; }
.env-checagem li.ok::before { content: "\2713"; color: var(--sucesso); }
.env-checagem li.aviso::before { content: "!"; color: var(--alerta); }
.env-checagem li.erro::before { content: "\2715"; color: var(--perigo); }
.env-checagem li.erro { color: var(--perigo); }
#resultado-teste.erro { color: var(--perigo); }

/* Prévia do e-mail */
.env-dialogo-previa { width: min(720px, calc(100vw - 32px)); }
.env-previa-abas { display: inline-flex; gap: .25rem; padding: .2rem; border-radius: 999px; background: var(--bg); margin-bottom: .75rem; }
.env-previa-abas button { border: 0; background: none; padding: .3rem .8rem; border-radius: 999px; font: inherit; font-size: .82rem; cursor: pointer; color: var(--texto-secundario); }
.env-previa-abas button.ativa { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.env-previa-iframe { display: block; width: 640px; max-width: 100%; height: 62vh; margin: 0 auto; border: 1px solid var(--borda); border-radius: var(--raio); background: #EEF0F4; transition: width .2s; }

/* Lista de envios */
.linha-registro-avatar .env-finalidade-icone { width: 36px; height: 36px; background: var(--bg); color: var(--texto-secundario); }

@media (max-width: 700px) {
    .env-passo-rotulo { display: none; }
    .env-passo.atual .env-passo-rotulo { display: inline; }
    .env-interesse { grid-template-columns: 1fr auto; }
    .env-interesse input[name$="[descricao]"] { grid-column: 1; grid-row: 2; }
    .env-interesse [data-remover-interesse] { grid-row: 1 / span 2; grid-column: 2; }
    .env-publico-corpo { grid-template-columns: 1fr; }
    .env-publico-contagem { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .3rem; }
    .env-botoes-direita { width: 100%; }
    .env-botoes-direita .btn { flex: 1; }
}
.env-cartao-atalho { display: block; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.env-cartao-atalho:hover { text-decoration: none; border-color: var(--amb-cor, var(--cor-primaria)); box-shadow: 0 6px 18px rgba(16, 24, 40, .08); }
.env-atalho-varios { max-width: 900px; display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.env-atalho-varios .env-finalidade-icone { background: var(--cor-pos-venda-suave); color: var(--cor-pos-venda); }
.env-atalho-varios .btn { margin-left: auto; flex-shrink: 0; }
.env-prontos-grupo { margin-bottom: 1.25rem; }
.env-prontos-grupo h4 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; font-size: .98rem; }
.env-prontos-grupo h4 svg { color: var(--amb-cor); }
.env-modelo-estatico { cursor: default; }
.env-modelo-acoes { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.env-proximos { border-left: 4px solid var(--amb-cor); }
.env-proximos-lista { margin: 0; padding-left: 1.1rem; }
.env-proximos-lista li { margin: .25rem 0; }
.env-categorias-lista { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .45rem; }
.env-categorias-lista li { display: flex; flex-direction: column; padding: .55rem .75rem; border-radius: var(--raio-pequeno); background: var(--bg); font-size: .88rem; }
.env-categorias-lista li span { color: var(--texto-secundario); font-size: .82rem; }
@media (max-width: 700px) {
    .env-atalho-varios { flex-direction: column; align-items: flex-start; }
    .env-atalho-varios .btn { margin-left: 0; }
}
/* Elementos ocultos pelo assistente continuam ocultos mesmo com display próprio (alerta, campo...). */
.env-assistente [hidden] { display: none !important; }
/* Assistente: "uma vez" x "automaticamente" e os gatilhos */
.env-modos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; margin: .5rem 0 1rem; }
.env-modo { position: relative; display: block; margin: 0; cursor: pointer; font-weight: 400 !important; }
.env-modo input { position: absolute; opacity: 0; pointer-events: none; }
.env-modo > span { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; row-gap: .1rem; align-items: center; padding: .8rem 1rem; border: 2px solid var(--borda); border-radius: var(--raio); transition: border-color .15s, background .15s; height: 100%; }
.env-modo > span svg { grid-row: 1 / span 2; color: var(--amb-cor); }
.env-modo small { grid-column: 2; color: var(--texto-secundario); font-size: .8rem; line-height: 1.4; }
.env-modo input:checked + span { border-color: var(--amb-cor); background: var(--amb-cor-suave); }
.env-modo input:focus-visible + span { outline: 2px solid var(--amb-cor); outline-offset: 2px; }
.env-gatilhos { display: grid; gap: .6rem; }
.env-gatilho .env-publico-corpo { grid-template-columns: 1fr; }
.env-gatilho-n, .env-gatilho-espera input { display: inline-block; width: 4.2rem !important; padding: .15rem .35rem !important; margin: 0 .15rem; font: inherit; }
.env-gatilho-espera { font-size: .82rem; color: var(--texto-secundario); margin-top: .35rem; }
.env-gatilho-extra { display: block; margin-top: .45rem; }
.env-gatilho-extra select { max-width: 420px; }
.env-quando-automatico .env-frase { margin-bottom: 0; }
/* Envios programados (agenda e automáticos) */
.env-abas-programados { margin-bottom: 1rem; }
.env-abas-programados a { display: inline-flex; align-items: center; gap: .35rem; }
.env-agenda-topo { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.env-agenda-dia { margin-bottom: 1.1rem; }
.env-agenda-dia-titulo { margin: 0 0 .45rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-secundario); }
.env-badge-outro { background: var(--bg); color: var(--texto-secundario); border: 1px dashed var(--borda); }
.linha-registro-avatar .env-amb-pos_venda { background: var(--cor-pos-venda-suave); color: var(--cor-pos-venda); }
.linha-registro-avatar .env-amb-marketing { background: var(--cor-marketing-suave); color: var(--cor-marketing); }
.linha-registro-avatar .env-amb-vendas { background: var(--bg); color: var(--cor-primaria); }
.env-automatico-frase { font-size: .9rem; color: var(--texto); margin: .2rem 0 .25rem; line-height: 1.45; }
.env-automatico-inativo .linha-registro-corpo { opacity: .7; }
.linha-registro-acoes form { margin: 0; }
.env-assistente .mkt-filtro-abas a.ativa { background: var(--amb-cor-suave); color: var(--amb-cor); border-color: color-mix(in srgb, var(--amb-cor) 30%, transparent); }
.env-assistente .env-abas-programados { padding-left: 0; }

/* Avisar antes de agir: o que sai para o cliente ao finalizar / mudar de etapa (includes/envios-avisos.php) */
.emails-cliente-aviso { background: var(--info-suave); border: 1px solid color-mix(in srgb, var(--info) 25%, transparent); border-radius: 10px; padding: .7rem .9rem; margin: .4rem 0 1rem; font-size: .88rem; color: var(--texto); }
.emails-cliente-aviso > strong { display: flex; align-items: center; gap: .4rem; color: var(--info); font-size: .88rem; }
.emails-cliente-aviso ul { margin: .4rem 0 .5rem 1.1rem; padding: 0; line-height: 1.45; }
.emails-cliente-aviso li + li { margin-top: .25rem; }
.emails-cliente-bloqueado { color: var(--texto-secundario); font-style: italic; }
.emails-cliente-aviso .emails-cliente-pular { display: flex; align-items: center; gap: .45rem; font-weight: 500; cursor: pointer; margin: 0; }
.emails-cliente-aviso .emails-cliente-pular input { width: auto; margin: 0; }
#kanban-emails .dialogo-icone { background: var(--info-suave); color: var(--info); }
#kanban-emails .emails-cliente-aviso { text-align: left; }

/* Ficha do cliente: "E-mails para este cliente" (modulos/envios/_cartao-cliente.php) */
.env-cli-titulo { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-secundario); margin: 1rem 0 .4rem; }
.env-cli .env-cli-titulo:first-of-type { margin-top: .2rem; }
.env-cli-endereco { padding: .45rem 0; border-bottom: 1px solid var(--borda); }
.env-cli-email { font-size: .86rem; font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.env-cli-email span { font-weight: 400; color: var(--texto-secundario); }
.env-cli-cats { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.env-cli-cat { display: inline-flex; align-items: center; gap: .25rem; font-size: .74rem; padding: .12rem .5rem; border-radius: 999px; cursor: default; }
.env-cli-cat.sim { background: var(--sucesso-suave); color: var(--sucesso); }
.env-cli-cat.nao { background: var(--perigo-suave, #fdecec); color: var(--perigo); }
.env-cli-pedido, .env-cli-automaticos { margin-top: .55rem; font-size: .85rem; }
.env-cli-pedido summary, .env-cli-automaticos summary { cursor: pointer; color: var(--cor-primaria); font-weight: 500; }
.env-cli-pedido form { display: grid; gap: .35rem; margin-top: .5rem; padding: .7rem; background: var(--bg); border-radius: 8px; }
.env-cli-pedido label { font-size: .78rem; font-weight: 600; margin: 0; }
.env-cli-pedido button { justify-self: start; }
.env-cli-item { display: block; padding: .5rem 0; border-bottom: 1px solid var(--borda); text-decoration: none; color: inherit; font-size: .86rem; }
a.env-cli-item:hover strong { color: var(--cor-primaria); }
.env-cli-quando { display: block; font-size: .74rem; color: var(--texto-secundario); }
.env-cli-detalhe { display: block; font-size: .78rem; color: var(--texto-secundario); margin-top: .1rem; }
.env-cli-trilha { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.env-cli-amb { display: inline-block; font-size: .68rem; font-weight: 600; padding: .05rem .4rem; border-radius: 4px; vertical-align: 1px; }
.env-cli-amb.env-amb-marketing { background: var(--cor-marketing-suave); color: var(--cor-marketing); }
.env-cli-amb.env-amb-pos_venda { background: var(--cor-pos-venda-suave); color: var(--cor-pos-venda); }
.env-cli-amb.env-amb-vendas { background: var(--bg); color: var(--cor-primaria); }
.env-cli-automaticos ul { margin: .5rem 0 .6rem; padding-left: 1.1rem; line-height: 1.45; }
.env-cli-automaticos li + li { margin-top: .4rem; }
.env-cli-automaticos li.env-cli-fora { color: var(--texto-secundario); }
.env-cli-automaticos em { font-size: .8rem; }

/* Automação "enviar e-mail": escrever aqui x modelo da biblioteca */
.automacao-email-origem { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.automacao-email-origem label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; margin: 0; cursor: pointer; }
.automacao-email-origem input { width: auto; margin: 0; }
[data-email-origem][hidden] { display: none !important; }

/* ==========================================================================
 * Assistente de envio: destino (passo 2), canais (passo 3), WhatsApp, revisão
 * ========================================================================== */
.env-finalidade-dica { display: flex; gap: .35rem; align-items: flex-start; font-size: .8rem; color: var(--amb-cor); font-weight: 600; line-height: 1.35; margin-top: .15rem; }
.env-finalidade-dica svg { flex-shrink: 0; margin-top: .1rem; }

.env-destinos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.env-destinos.so-um { grid-template-columns: minmax(200px, 420px); }
.env-destino-opcao { position: relative; display: block; margin: 0; cursor: pointer; font-weight: 400 !important; }
.env-destino-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.env-destino-opcao > span { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; row-gap: .1rem; align-items: center; height: 100%; padding: .7rem .85rem; border: 2px solid var(--borda); border-radius: var(--raio); background: var(--superficie); transition: border-color .15s, background .15s; }
.env-destino-opcao small { grid-column: 1 / -1; color: var(--texto-secundario); font-size: .78rem; line-height: 1.4; }
.env-destino-opcao input:checked + span { border-color: var(--amb-cor); background: var(--amb-cor-suave); }
.env-destino-opcao input:focus-visible + span { outline: 2px solid var(--amb-cor); outline-offset: 2px; }
.env-destino-icone { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--amb-cor-suave); color: var(--amb-cor); }
.env-destino-opcao input:checked + span .env-destino-icone { background: var(--amb-cor); color: #fff; }

.env-destino-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.env-destino-painel { padding: 1rem 1.1rem; border-radius: var(--raio); background: var(--bg); border: 1px solid var(--borda); }
.env-painel-titulo { margin: 0 0 .35rem; font-size: .98rem; }
.env-destino-previa { position: sticky; top: calc(var(--topbar-altura) + 4.5rem); border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); overflow: hidden; }
.env-previa-barra { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem .75rem; border-bottom: 1px solid var(--borda); background: var(--bg); font-size: .86rem; }
.env-previa-barra strong { display: inline-flex; align-items: center; gap: .3rem; }
.env-previa-barra .env-previa-abas { margin: 0; }
.env-previa-barra a { margin-left: auto; }
.env-destino-moldura { position: relative; background: #EEF0F4; display: flex; justify-content: center; }
.env-destino-moldura iframe { display: block; width: 100%; height: 600px; border: 0; background: #fff; transition: width .2s; }
.env-destino-vazio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; color: var(--texto-secundario); font-size: .9rem; background: var(--bg); }

.env-pesquisa-topo { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.env-pesquisa-estado { display: flex; align-items: center; gap: .35rem; min-height: 2.2rem; }
.env-pesquisa-perguntas { display: grid; gap: .6rem; margin-bottom: .6rem; }
.env-pergunta { margin: 0; padding: .65rem .75rem; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); background: var(--superficie); display: grid; gap: .5rem; }
.env-pergunta-numero { font-size: .75rem; font-weight: 700; color: var(--texto-secundario); padding: 0 .3rem; }
.env-pergunta-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .4rem; align-items: center; }
.env-pergunta-linha input[data-campo="texto"] { grid-column: 1 / -1; }

.env-pergunta-linha select { min-width: 0; }
.env-pergunta-cfg label { font-size: .84rem; font-weight: 400; }
.env-pergunta-limites { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-top: .4rem; }
.env-pergunta-limites input { width: 5.5rem; display: inline-block; margin-left: .25rem; }
.env-pesquisa-salvar { display: flex; gap: .25rem .6rem; align-items: center; flex-wrap: wrap; margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--borda); }

.env-destino-acoes { display: flex; gap: .4rem .6rem; flex-wrap: wrap; align-items: center; }
.env-destino-situacao { min-height: 1.2em; }
.env-ok { color: var(--sucesso); font-weight: 700; }
.env-ruim { color: var(--perigo); font-weight: 700; }
.env-criar { margin-top: .9rem; padding: .9rem 1rem; border-radius: var(--raio); background: var(--superficie); border: 1px solid color-mix(in srgb, var(--amb-cor) 35%, var(--borda)); }
.env-criar-acoes { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }

.env-canais { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .6rem; margin-bottom: 1.1rem; }
.env-canal { position: relative; display: block; margin: 0; cursor: pointer; font-weight: 400 !important; }
.env-canal input { position: absolute; opacity: 0; pointer-events: none; }
.env-canal > span { display: grid; grid-template-columns: auto 1fr auto; column-gap: .6rem; row-gap: .15rem; align-items: center; height: 100%; padding: .85rem 1rem; border: 2px solid var(--borda); border-radius: var(--raio); background: var(--superficie); transition: border-color .15s, background .15s; }
.env-canal > span::after { content: ""; grid-column: 3; grid-row: 1; width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--texto-terciario); box-sizing: border-box; }
.env-canal > span svg { color: var(--amb-cor); }
.env-canal small { grid-column: 1 / -1; color: var(--texto-secundario); font-size: .8rem; line-height: 1.4; }
.env-canal input:checked + span { border-color: var(--amb-cor); background: var(--amb-cor-suave); }
.env-canal input:checked + span::after { background: var(--amb-cor); border-color: var(--amb-cor); box-shadow: inset 0 0 0 3px var(--superficie); }
.env-canal input:focus-visible + span { outline: 2px solid var(--amb-cor); outline-offset: 2px; }
.env-bloco-canal { margin: 0 0 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--borda); border-radius: var(--raio); }
.env-bloco-canal-titulo { display: flex; align-items: center; gap: .4rem; margin: 0 0 .75rem; font-size: 1.02rem; }
.env-bloco-canal-titulo svg { color: var(--amb-cor); }
.env-destino-chip { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; padding: .55rem .8rem; margin-bottom: .9rem; border-radius: var(--raio-pequeno); background: #FFF4E0; border: 1px dashed #F5A623; font-size: .88rem; color: #6B4500; }
.env-destino-chip:empty { display: none; }
.env-chip-rotulo { font-weight: 600; }
.env-editor-acoes { display: inline-flex; gap: .4rem; flex-wrap: wrap; }

.env-whats-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); gap: 1.25rem; align-items: start; }
.env-whats-variaveis { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .45rem; }
.env-chip { border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-secundario); border-radius: 999px; padding: .15rem .55rem; font: inherit; font-size: .76rem; font-family: ui-monospace, Consolas, monospace; cursor: pointer; }
.env-chip:hover { border-color: var(--amb-cor); color: var(--amb-cor); }
.env-whats-celular { border-radius: 18px; overflow: hidden; border: 1px solid #D1D7DB; box-shadow: 0 8px 24px rgba(16, 24, 40, .1); max-width: 360px; background: #ECE5DD; }
.env-whats-topo { display: flex; align-items: center; gap: .55rem; padding: .6rem .8rem; background: #075E54; color: #fff; }
.env-whats-topo small { display: block; opacity: .8; font-size: .72rem; }
.env-whats-avatar { width: 32px; height: 32px; border-radius: 50%; background: #25D366; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.env-whats-conversa { padding: 1rem .8rem 1.2rem; min-height: 170px; }
.env-whats-balao { position: relative; max-width: 92%; padding: .5rem .65rem 1.2rem; border-radius: 8px 0 8px 8px; background: #DCF8C6; color: #111B21; font-size: .88rem; line-height: 1.45; margin-left: auto; word-wrap: break-word; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); }
.env-whats-balao a, .env-whats-link { color: #027EB5; text-decoration: underline; }
.env-whats-balao mark { background: #FDE68A; border-radius: 3px; }
.env-whats-hora { position: absolute; right: .5rem; bottom: .25rem; font-size: .66rem; color: #667781; }

.env-canal-filtro { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .55rem .8rem; margin: .25rem 0 .9rem; border-radius: var(--raio-pequeno); background: var(--bg); font-size: .88rem; }
.env-canal-filtro:empty { display: none; }
.env-canal-icones { display: inline-flex; gap: .25rem; }
.env-canal-tag { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #fff; }
.env-canal-tag.env-canal-email { background: var(--amb-cor); }
.env-canal-tag.env-canal-whatsapp { background: #1FA855; }
.env-canal-ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 2px; vertical-align: middle; }
.env-canal-ponto.env-canal-email { background: var(--amb-cor); }
.env-canal-ponto.env-canal-whatsapp { background: #25D366; }
.env-modo.desabilitado { opacity: .55; cursor: not-allowed; }
.env-resumo-canais { margin-top: .25rem; font-size: .9rem; font-weight: 600; color: var(--texto); }

.env-revisao-previas { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
.env-revisao-titulo { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .5rem; font-size: .9rem; }
.env-revisao-titulo .env-previa-abas { margin: 0 0 0 auto; }
.env-revisao-iframe { width: 100%; height: 520px; }
.env-revisao-whats .btn { margin-top: .6rem; }
.env-revisao-destino { grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .65rem .9rem; border-radius: var(--raio-pequeno); background: var(--amb-cor-suave); font-size: .9rem; }

/* Resultado do envio: fila do WhatsApp (envio manual até a integração) */
.env-fila-whats { border-left: 4px solid #25D366; }
.env-fila-whats-topo { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.env-fila-whats-topo h3 { margin: 0; display: flex; align-items: center; gap: .4rem; }
.env-fila-whats-proximo { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .85rem; padding: .8rem 1rem; border-radius: var(--raio); background: var(--bg); }
.env-fila-whats-proximo .env-whats-balao { margin: 0; max-width: 520px; flex: 1; min-width: 240px; }
.env-fila-whats-acoes { display: flex; gap: .4rem; flex-wrap: wrap; }
.btn-whats { background: #1FA855; border-color: #1FA855; color: #fff; }
.btn-whats:hover { background: #178A45; border-color: #178A45; color: #fff; }
.env-whats-situacao { font-size: .78rem; font-weight: 600; }
.env-whats-situacao.feito { color: var(--sucesso); }
.env-whats-situacao.pendente { color: var(--alerta); }

@media (max-width: 1000px) {
    .env-destino-layout, .env-whats-layout, .env-revisao-previas { grid-template-columns: 1fr; }
    .env-destino-previa { position: static; }
    .env-destino-moldura iframe { height: 460px; }
    .env-whats-celular { margin: 0 auto; }
}

/* Campo de valor monetário: prefixo "R$" fixo à esquerda (inicializarMoeda em app.js) */
.input-moeda { position: relative; display: block; }
.input-moeda-prefixo { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--texto-secundario); font-size: .9em; font-weight: 500; pointer-events: none; }
.input-moeda > input { padding-left: 2.4rem; text-align: right; }

/* Conta Google: botão de login, separador do login e tela de pareamento (modulos/integracoes/google.php) */
.btn-google { background: #fff; color: #3c4043; border-color: #dadce0; gap: .6rem; }
.btn-google:hover { background: #f8f9fa; }
.auth-separador { display: flex; align-items: center; gap: .75rem; margin: 1.1rem 0 .9rem; color: var(--texto-terciario); font-size: .8rem; }
.auth-separador::before, .auth-separador::after { content: ""; flex: 1; border-top: 1px solid var(--borda); }
.integ-conta { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; margin-bottom: 1rem; padding: .9rem 1rem; border-radius: var(--raio); background: var(--bg); }
.integ-conta-info { flex: 1; min-width: 200px; }
.integ-conta-logo { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; }
.integ-conta-info strong { display: block; }
.integ-conta-info span { font-size: .84rem; color: var(--texto-secundario); }
.integ-recursos { display: grid; gap: .6rem; margin: .5rem 0 1rem; }
.integ-recurso { display: flex; align-items: flex-start; gap: .7rem; padding: .75rem .9rem; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); }
.integ-recurso input { margin-top: .25rem; }
.integ-recurso-corpo { flex: 1; }
.integ-recurso-corpo strong { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .93rem; }
.integ-recurso-corpo p { margin: .15rem 0 0; font-size: .84rem; color: var(--texto-secundario); }
.integ-recurso.desabilitado { opacity: .6; }
.integ-acoes { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.integ-secao { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--borda); }
.integ-secao h3 { font-size: 1rem; margin: 0 0 .25rem; }
.integ-contatos-filtro { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-bottom: .75rem; }
.integ-contatos-filtro input[type="text"] { flex: 1; width: auto; min-width: 200px; }
.integ-contatos-situacao { font-size: .8rem; color: var(--texto-secundario); }
.integ-contatos-situacao.aviso { color: var(--alerta); }
tr.integ-contato-bloqueado td { opacity: .55; }

/* Agenda: compromissos no calendário (modulos/agenda/) */
.agenda-barra { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.agenda-filtro { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; cursor: pointer; }
.agenda-quem { width: auto; min-width: 190px; padding: .4rem .7rem; font-size: .88rem; }
.legenda-prioridade-cor.fc-compromisso { background: #1F9D8A; border-color: #1F9D8A; }
#calendario-tarefas .fc-event.fc-compromisso { background: #E4F5F2 !important; border-color: #1F9D8A !important; }
#calendario-tarefas .fc-event.fc-compromisso .fc-event-title,
#calendario-tarefas .fc-event.fc-compromisso .fc-event-time { color: #137A6B !important; }
#calendario-tarefas .fc-event.fc-compromisso-outro { border-style: dashed !important; }
.fc-list-event.fc-compromisso td { background: #E4F5F2; }

.integ-simulador { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; padding: .75rem .9rem; border: 1px dashed var(--borda); border-radius: var(--raio-pequeno); font-size: .85rem; }
.integ-simulador input[type="text"], .integ-simulador input[type="datetime-local"] { width: auto; flex: 1; min-width: 160px; }

/* Conta Google: linhas de recurso com ações e escolha visual do sentido da agenda */
.integ-recurso { align-items: center; }
.integ-recurso-rotulo { display: flex; align-items: flex-start; gap: .7rem; flex: 1; cursor: pointer; min-width: 0; }
.integ-recurso-acoes { display: flex; gap: .4rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.sentido-opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.sentido-opcao { cursor: pointer; display: block; }
.sentido-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.sentido-caixa { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .8rem .5rem; border: 2px solid var(--borda); border-radius: var(--raio); text-align: center; height: 100%; transition: border-color .12s, background .12s; }
.sentido-opcao:hover .sentido-caixa { border-color: var(--cor-primaria); }
.sentido-opcao input:checked + .sentido-caixa { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); }
.sentido-opcao input:focus-visible + .sentido-caixa { box-shadow: 0 0 0 3px var(--cor-primaria-suave); }
.sentido-diagrama { display: flex; align-items: center; gap: .45rem; color: var(--texto-secundario); }
.sentido-no { font-size: .72rem; font-weight: 700; padding: .25rem .5rem; border-radius: 6px; letter-spacing: .02em; }
.sentido-no-crm { background: var(--cor-primaria); color: #fff; }
.sentido-no-google { background: #1A73E8; color: #fff; }
.sentido-no-outlook { background: #0078D4; color: #fff; }
.sentido-rotulo { font-size: .84rem; font-weight: 600; }
.sentido-explicacao { margin-top: .6rem; padding: .65rem .85rem; border-radius: var(--raio-pequeno); background: var(--bg); font-size: .86rem; color: var(--texto-secundario); line-height: 1.45; }
@media (max-width: 640px) { .sentido-opcoes { grid-template-columns: 1fr; } .integ-recurso { flex-wrap: wrap; } }

/* Google Agenda: os dois fluxos (eventos do Google -> CRM, tarefas do CRM -> Google) */
.agenda-fluxo { padding: .9rem 1rem; border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 1rem; }
.agenda-fluxo > label, .agenda-fluxo > div > label[for] { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .35rem; }
.agenda-fluxo-titulo { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; color: var(--texto-secundario); }
.agenda-fluxo-titulo strong { margin-left: .35rem; color: var(--texto); font-size: .92rem; }
.agenda-fluxo .ajuda { margin-top: .4rem; }
/* ---- Reunião online na movimentação (janela de escolha + destaque na timeline) ---- */
.reuniao-selecionada { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: -.4rem 0 1rem; padding: .6rem .8rem; border-radius: var(--raio-pequeno); background: var(--cor-primaria-suave); font-size: .88rem; }
.reuniao-selecionada[hidden] { display: none; }
.reuniao-selecionada-logo { display: inline-flex; }
.reuniao-selecionada-aviso { background: #FEF6E7; color: #92400E; }
.reuniao-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(16, 24, 40, .55); }
.reuniao-modal[hidden] { display: none; }
.reuniao-modal-caixa { width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; padding: 1.4rem; border-radius: var(--raio); background: var(--superficie, #fff); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.reuniao-modal-caixa h3 { margin: 0 0 .4rem; }
.reuniao-plataformas { display: flex; gap: .75rem; flex-wrap: wrap; margin: .9rem 0; }
.reuniao-plataforma { display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 118px; padding: .8rem 1rem; border: 2px solid var(--borda); border-radius: var(--raio); background: #fff; cursor: pointer; font-weight: 600; font-size: .85rem; }
.reuniao-plataforma[hidden] { display: none; }
.reuniao-plataforma:hover { border-color: var(--reuniao-cor); }
.reuniao-plataforma.ativa { border-color: var(--reuniao-cor); background: var(--reuniao-fundo); }
.reuniao-resumo { margin-bottom: 1rem; padding: .65rem .8rem; border-radius: var(--raio-pequeno); background: var(--bg); font-size: .85rem; }
.reuniao-resumo:empty { display: none; }
.reuniao-convite { display: flex; align-items: flex-start; gap: .55rem; font-weight: 400; margin-bottom: .6rem; }
.reuniao-convite input { width: auto; margin-top: .2rem; }
.reuniao-canais { display: grid; gap: .5rem; padding: .75rem; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); }
.reuniao-canais.desativado { opacity: .45; pointer-events: none; }
.reuniao-canal { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 400; margin: 0; }
.reuniao-canal > input[type="checkbox"] { width: auto; }
.reuniao-canal > input[type="email"] { flex: 1; min-width: 160px; }
.reuniao-canal > span { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
.reuniao-acoes { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; margin-top: 1.1rem; }
.evento-card-reuniao { border-left: 4px solid var(--reuniao-cor, #00832D); }
.evento-reuniao { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .7rem 0; padding: .75rem .9rem; border-radius: var(--raio-pequeno); background: var(--reuniao-fundo, #E6F4EA); border: 1px solid var(--reuniao-cor, #00832D); }
.evento-reuniao-logo { display: inline-flex; flex-shrink: 0; }
.evento-reuniao-corpo { flex: 1; min-width: 200px; }
.evento-reuniao-titulo { font-weight: 700; color: var(--reuniao-cor, #00832D); }
.evento-reuniao-quando { margin-left: .4rem; font-weight: 500; color: var(--texto); }
.evento-reuniao-convites { display: flex; flex-direction: column; gap: .15rem; margin-top: .2rem; font-size: .8rem; color: var(--texto-secundario); }
.evento-reuniao-convites span { display: inline-flex; align-items: center; gap: .3rem; }
.evento-reuniao-acoes { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.evento-reuniao-entrar { background: var(--reuniao-cor, #00832D); border-color: var(--reuniao-cor, #00832D); }
.evento-reuniao-gerando { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: var(--texto-secundario); }

/* ---- Transcrição da reunião (cartão do evento e compromisso) ---- */
.evento-transcricao { margin: -.2rem 0 .7rem; padding: .6rem .9rem; border: 1px solid var(--borda); border-radius: var(--raio-pequeno); background: #fff; font-size: .88rem; }
.evento-transcricao summary { cursor: pointer; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.evento-transcricao-meta { color: var(--texto-secundario); font-size: .8rem; }
.evento-transcricao-texto { margin: .7rem 0; padding: .8rem; max-height: 320px; overflow-y: auto; border-radius: var(--raio-pequeno); background: var(--bg); line-height: 1.55; font-size: .86rem; word-break: break-word; }
.evento-transcricao-acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.evento-transcricao-estado { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; color: var(--texto-secundario); }
.evento-transcricao-estado > span { flex: 1; min-width: 200px; }
.evento-transcricao-estado small { display: block; margin-top: .15rem; }
.evento-transcricao-erro, .evento-transcricao-indisponivel { color: #92400E; }

/* Contrato de prestação de serviço (aceite no cadastro, página pública e painel) */
.contrato-aceite { margin-top: 1rem; padding: .75rem .9rem; background: var(--bg); border: 1px solid var(--borda); border-radius: var(--raio, 8px); }
.contrato-aceite .config-opcao { display: flex; align-items: flex-start; gap: .65rem; padding: 0; }
.contrato-aceite .config-opcao input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin: .15rem 0 0; }
.contrato-aceite .config-opcao span { display: block; flex: 1; line-height: 1.45; }
.contrato-aceite .config-opcao small { display: block; margin-top: .2rem; }
.contrato-publico { max-width: 880px; margin: 0 auto; padding: 2rem 1rem 3rem; }
.contrato-publico-topo { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.contrato-publico-topo .btn { margin-left: auto; }
.contrato-publico-rodape { margin-top: 1rem; word-break: break-all; }
.contrato-servico-texto { line-height: 1.6; font-size: .95rem; }
.contrato-servico-texto h2 { margin: 0 0 .25rem; font-size: 1.25rem; }
.contrato-servico-texto h3 { margin: 1.6rem 0 .5rem; font-size: 1rem; font-weight: 700; letter-spacing: .01em; }
.contrato-servico-texto p { margin: 0 0 .7rem; text-align: justify; }
.contrato-painel-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.contrato-painel-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.contrato-ip { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; }
@media (max-width: 900px) { .contrato-painel-grade, .contrato-painel-dados { grid-template-columns: 1fr; } }
@media print {
    .topo-publico, .rodape-publico, .contrato-publico-topo, .contrato-publico-rodape, .alerta-msg { display: none !important; }
    .contrato-publico { padding: 0; max-width: none; }
    .contrato-publico .cartao { border: 0; box-shadow: none; padding: 0; }
}

/* Página não encontrada (erro-404.php) */
.cartao-auth.erro-404 { text-align: center; }
.erro-404-codigo { font-family: var(--fonte-titulo); font-weight: 800; font-size: 4.5rem; line-height: 1; margin: 0 0 .5rem; color: var(--cor-primaria); }
.erro-404-acoes { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* Landing: faixas dos grupos de recursos novos (fundo alternado) e nota sobre planos */
.landing-faixa { max-width: none; padding-left: 0; padding-right: 0; }
.landing-faixa > .landing-cabecalho, .landing-faixa > .grade { max-width: 1220px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.landing-faixa-clara { background: var(--superficie); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.landing-nota-planos { text-align: center; font-size: .85rem; color: var(--texto-secundario); margin: 0; padding: 1.25rem 1.5rem 0; }
@media (max-width: 900px) { .landing-faixa .grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .landing-faixa .grade { grid-template-columns: 1fr; } }

/* Revisão da landing page antes de publicar */
.mkt-publicar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
.mkt-publicar-conferencia { position: sticky; top: 1rem; }
.mkt-conf-ok { color: var(--sucesso); font-weight: 600; display: flex; gap: .4rem; align-items: center; }
.mkt-conf-titulo { font-weight: 600; font-size: .9rem; display: flex; gap: .4rem; align-items: center; margin: 1rem 0 .3rem; }
.mkt-conf-titulo.erro { color: var(--perigo); }
.mkt-conf-titulo.alerta { color: var(--alerta); }
.mkt-conf-lista { margin: 0 0 .5rem 1.1rem; padding: 0; font-size: .85rem; }
.mkt-conf-lista li { margin-bottom: .25rem; }
@media (max-width: 960px) { .mkt-publicar-layout { grid-template-columns: 1fr; } .mkt-publicar-conferencia { position: static; } }

/* Importação: conferência das colunas do arquivo */
.dados-colunas { margin: .75rem 0 1rem; border: 1px solid var(--borda); border-radius: var(--raio-pequeno, 8px); padding: .6rem .9rem; background: var(--superficie, #fff); }
.dados-colunas summary { cursor: pointer; font-size: .9rem; }
.dados-colunas-form { margin-top: .6rem; overflow-x: auto; }
.dados-colunas select { max-width: 240px; }

.minha-conta-foto-linha { display: flex; align-items: center; gap: 1rem; }
.minha-conta-foto-linha .avatar-mini { flex: 0 0 auto; }

.erro-404-ilustracao { display: block; margin: 0 auto .25rem; max-width: 100%; height: auto; }
.erro-404-frase { font-size: 1.1rem; font-weight: 600; margin: .25rem 0 .35rem; color: var(--texto); }
.erro-404-nota { font-size: .8rem; color: var(--texto-secundario); margin: 1.25rem 0 0; }