/* INGRA — pacote saas-extras: módulos e adicionais, onboarding, suporte, indicação, LGPD */

/* ---------- Checklist de primeiros passos (Meu Painel) ---------- */
.ig-onb {
    margin: 0 0 22px; padding: 22px 24px; border-radius: 20px; color: var(--ig-ink, #eaf7fc);
    background: linear-gradient(135deg, #0a83bd 0%, #006699 38%, #013252 75%, #001b29 100%);
    box-shadow: 0 18px 40px -24px rgba(1, 50, 82, .7); position: relative; overflow: hidden;
}
.ig-onb::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(115deg, rgba(45, 212, 234, .07) 0 22px, transparent 22px 52px);
}
.ig-onb > * { position: relative; z-index: 1; }
.ig-onb-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 20px; align-items: center; }
.ig-onb-selo {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ig-accent, #2dd4ea);
}
.ig-onb-selo .ic { width: 16px; height: 16px; }
.ig-onb-titulo h2 { font-family: 'Fraunces', Georgia, serif; font-size: 24px; font-weight: 700; margin: 4px 0; color: #fff; }
.ig-onb-titulo p { margin: 0; font-size: 14px; color: var(--ig-muted, #8fb9cd); }
.ig-onb-progresso { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.ig-onb-progresso b { position: absolute; font-size: 16px; font-weight: 800; color: #fff; }
.ig-onb-anel { width: 72px; height: 72px; transform: rotate(-90deg); }
.ig-onb-anel circle { fill: none; stroke-width: 3.2; }
.ig-onb-anel .fundo { stroke: rgba(255, 255, 255, .15); }
.ig-onb-anel .valor { stroke: var(--ig-accent, #2dd4ea); stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.ig-onb-acoes { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.ig-onb-link { background: none; border: 0; padding: 0; font-size: 13px; font-weight: 600; color: var(--ig-muted, #8fb9cd); cursor: pointer; }
.ig-onb-link:hover { color: #fff; text-decoration: underline; }
.ig-onb-itens { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.ig-onb-item {
    display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 12px; padding: 14px; border-radius: 14px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1);
}
.ig-onb-item.feito { background: rgba(45, 212, 234, .12); border-color: rgba(45, 212, 234, .35); }
.ig-onb-item.pulado { opacity: .7; }
.ig-onb-marca {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px;
    background: rgba(255, 255, 255, .12); color: #fff;
}
.ig-onb-item.feito .ig-onb-marca { background: var(--ig-accent, #2dd4ea); color: #001b29; }
.ig-onb-marca .ic { width: 18px; height: 18px; }
.ig-onb-texto b { display: block; font-size: 14px; color: #fff; }
.ig-onb-texto span { display: block; font-size: 12.5px; color: var(--ig-muted, #8fb9cd); margin-top: 2px; }
.ig-onb-item-acoes { grid-column: 2; display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.ig-onb-btn {
    display: inline-flex; padding: 6px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 700; text-decoration: none;
    background: var(--ig-accent, #2dd4ea); color: #001b29;
}
.ig-onb-btn:hover { filter: brightness(1.07); }
.ig-onb-ok { font-size: 12.5px; font-weight: 700; color: var(--ig-accent, #2dd4ea); }

/* ---------- Faixas ---------- */
.ig-extras-faixa-termos { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; }
.ig-extras-faixa-termos a { color: #1d4ed8; font-weight: 700; }
.ig-extras-faixa-termos .ig-saas-faixa-btn { border: 0; cursor: pointer; background: #006699; color: #fff; }
.ig-saas-faixa-btn.ig-extras-faixa-consultor { background: transparent; color: #eaf7fc; border: 1px solid rgba(234, 247, 252, .5); }

/* ---------- Conta e assinatura: módulos e adicionais ---------- */
.ig-extras-bloco-grid { display: grid; gap: 22px; }
.ig-extras-modulos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.ig-extras-modulo {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px;
    background: var(--ig-surface, #fff); border: 1px solid var(--ig-line, rgba(2, 26, 51, .08)); border-radius: 14px; opacity: .72;
}
.ig-extras-modulo.ativo { opacity: 1; }
.ig-extras-modulo b { display: block; font-size: 14px; color: var(--ig-text, #0f2a3d); }
.ig-extras-modulo small { display: block; font-size: 12px; color: var(--ig-text-2, #64748b); }
.ig-extras-modulo-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--ig-surface-brand, #eef6fb); color: var(--ig-link, #006699); }
.ig-extras-modulo:not(.ativo) .ig-extras-modulo-ic { background: var(--ig-surface-3, #f1f5f9); color: #94a3b8; }
.ig-extras-modulo-ic .ic { width: 20px; height: 20px; }
.ig-extras-modulo-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #0f766e; white-space: nowrap; }
.ig-extras-modulo:not(.ativo) .ig-extras-modulo-status { color: #94a3b8; }
.ig-extras-modulo-status .ic { width: 16px; height: 16px; }
.ig-extras-contratados { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ig-extras-contratados li {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; background: var(--ig-surface, #fff);
    border: 1px solid var(--ig-line, rgba(2, 26, 51, .08)); border-radius: 14px;
}
.ig-extras-contratados li > div { flex: 1; min-width: 200px; }
.ig-extras-contratados small { display: block; font-size: 12px; color: var(--ig-text-2, #64748b); }
.ig-extras-qtd { font-size: 12px; font-weight: 800; color: var(--ig-link, #006699); margin-left: 4px; }
.ig-extras-valor { font-weight: 700; color: var(--ig-text, #0f2a3d); }
.ig-extras-addons { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ig-extras-addon {
    display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; background: var(--ig-surface, #fff);
    border: 1px solid var(--ig-line, rgba(2, 26, 51, .08));
}
.ig-extras-addon h4 { margin: 4px 0 0; font-size: 16px; font-weight: 800; color: var(--ig-text, #0f2a3d); }
.ig-extras-addon p { margin: 0; font-size: 13px; color: var(--ig-text-2, #64748b); flex: 1; }
.ig-extras-addon-ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #013252, #006699); color: #2dd4ea; }
.ig-extras-addon-ic .ic { width: 20px; height: 20px; }
.ig-extras-addon-beneficio { font-size: 12px; font-weight: 700; color: #0f766e; }
.ig-extras-addon-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
.ig-extras-addon-rodape b { font-size: 18px; color: var(--ig-text, #0f2a3d); }
.ig-extras-addon-rodape b small { font-size: 12px; font-weight: 600; color: var(--ig-text-2, #64748b); }

/* ---------- Convite de upgrade ---------- */
.ig-upg { display: grid; gap: 22px; }
.ig-upg-hero {
    display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; padding: 28px; border-radius: 22px; color: #eaf7fc;
    background: linear-gradient(135deg, #0a83bd 0%, #006699 40%, #013252 80%, #001b29 100%);
}
.ig-upg-ic { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; background: rgba(45, 212, 234, .15); color: #2dd4ea; }
.ig-upg-ic .ic { width: 36px; height: 36px; }
.ig-upg-selo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #2dd4ea; }
.ig-upg-selo .ic { width: 14px; height: 14px; }
.ig-upg-hero h2 { font-family: 'Fraunces', Georgia, serif; font-size: 30px; font-weight: 700; margin: 6px 0; color: #fff; }
.ig-upg-hero p { margin: 0 0 8px; color: #cfe8f3; max-width: 680px; }
.ig-upg-nota { font-size: 13px; color: #8fb9cd !important; }
.ig-upg-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.ig-upg-btn { display: inline-flex; padding: 10px 18px; border-radius: 12px; font-weight: 800; font-size: 14px; background: #2dd4ea; color: #001b29; text-decoration: none; }
.ig-upg-btn-sec { background: transparent; color: #eaf7fc; border: 1px solid rgba(234, 247, 252, .45); }
.ig-upg-planos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ig-upg-plano { padding: 18px; border-radius: 16px; background: var(--ig-surface, #fff); border: 1px solid var(--ig-line, rgba(2, 26, 51, .08)); display: flex; flex-direction: column; gap: 6px; }
.ig-upg-plano.destaque { border-color: #2dd4ea; box-shadow: 0 0 0 3px rgba(45, 212, 234, .18); }
.ig-upg-plano h4 { margin: 0; font-size: 16px; font-weight: 800; color: var(--ig-text, #0f2a3d); }
.ig-upg-plano b { font-size: 22px; color: var(--ig-text, #0f2a3d); }
.ig-upg-plano b small { font-size: 12px; color: var(--ig-text-2, #64748b); }
.ig-upg-plano p { margin: 0; font-size: 13px; color: var(--ig-text-2, #64748b); flex: 1; }

/* ---------- Suporte ---------- */
.ig-sup { display: grid; gap: 20px; }
.ig-sup-canais { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.ig-sup-canal {
    display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 16px; text-decoration: none;
    background: linear-gradient(135deg, #013252, #006699); color: #eaf7fc;
}
.ig-sup-canal b { display: block; color: #fff; font-size: 14px; }
.ig-sup-canal small { display: block; font-size: 12px; color: #8fb9cd; }
.ig-sup-canal-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(45, 212, 234, .16); color: #2dd4ea; flex: none; }
.ig-sup-canal-ic .ic { width: 22px; height: 22px; }
.ig-sup-canal-wpp .ig-sup-canal-ic { background: rgba(37, 211, 102, .18); color: #4ade80; }
a.ig-sup-canal:hover { filter: brightness(1.08); }
.ig-sup-grade { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; }
.ig-sup-form-corpo { display: grid; gap: 16px; margin-top: 12px; }
.ig-sup-form-rodape { display: flex; justify-content: flex-end; gap: 10px; }
.ig-sup-chamados { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; max-height: 520px; overflow: auto; }
.ig-sup-chamado {
    width: 100%; text-align: left; display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; cursor: pointer;
    background: var(--ig-surface-2, #f8fafc); border: 1px solid var(--ig-line, rgba(2, 26, 51, .08));
}
.ig-sup-chamado.ativo, .ig-sup-chamado:hover { border-color: #006699; background: var(--ig-surface-brand, #eef6fb); }
.ig-sup-chamado-topo { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.ig-sup-chamado-topo b { font-size: 13.5px; color: var(--ig-text, #0f2a3d); }
.ig-sup-chamado small { font-size: 12.5px; color: var(--ig-text-2, #64748b); }
.ig-sup-meta { font-size: 11.5px !important; }
.ig-sup-conversa-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.ig-sup-conversa-cab h3 { margin: 2px 0 0; font-family: 'Fraunces', Georgia, serif; font-size: 20px; color: var(--ig-text, #0f2a3d); }
.ig-sup-mensagens { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ig-sup-msg { max-width: 82%; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--ig-surface-3, #f1f5f9); justify-self: start; }
.ig-sup-msg.equipe { justify-self: end; border-radius: 14px 14px 4px 14px; background: linear-gradient(135deg, #013252, #006699); color: #eaf7fc; }
.ig-sup-msg-autor { display: block; font-size: 11.5px; font-weight: 700; color: var(--ig-text-2, #64748b); margin-bottom: 4px; }
.ig-sup-msg.equipe .ig-sup-msg-autor { color: #2dd4ea; }
.ig-sup-msg-texto { font-size: 14px; line-height: 1.5; }
.ig-sup-responder { display: grid; gap: 10px; margin-top: 16px; }
.ig-sup-responder textarea {
    width: 100%; border-radius: 12px; border: 1px solid var(--ig-border-soft, #e2e8f0); padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical;
}
.ig-sup-responder textarea:focus { outline: 2px solid #2dd4ea; border-color: #006699; }
.ig-sup-erro { color: #dc2626; font-size: 12.5px; }

/* ---------- Indicar o INGRA ---------- */
.ig-ind { display: grid; gap: 22px; }
.ig-ind-hero {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; padding: 28px; border-radius: 22px;
    background: linear-gradient(135deg, #0a83bd 0%, #006699 40%, #013252 80%, #001b29 100%); color: #eaf7fc;
}
.ig-ind-selo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #2dd4ea; }
.ig-ind-selo .ic { width: 16px; height: 16px; }
.ig-ind-hero h2 { font-family: 'Fraunces', Georgia, serif; font-size: 28px; font-weight: 700; margin: 6px 0; color: #fff; }
.ig-ind-hero p { margin: 0; color: #cfe8f3; }
.ig-ind-hero b { color: #fff; }
.ig-ind-link { display: grid; gap: 10px; align-content: center; }
.ig-ind-link label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #8fb9cd; }
.ig-ind-link-campo { display: flex; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); }
.ig-ind-link-campo input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; padding: 10px 12px; font-size: 13.5px; }
.ig-ind-link-campo button { border: 0; padding: 0 16px; font-weight: 800; background: #2dd4ea; color: #001b29; cursor: pointer; }
.ig-ind-compartilhar { display: flex; gap: 14px; flex-wrap: wrap; }
.ig-ind-compartilhar a { display: inline-flex; align-items: center; gap: 6px; color: #eaf7fc; font-size: 13px; font-weight: 700; text-decoration: none; }
.ig-ind-compartilhar a:hover { color: #2dd4ea; }
.ig-ind-compartilhar .ic { width: 18px; height: 18px; }
.ig-ind-totais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ig-ind-totais div { padding: 18px; border-radius: 16px; background: var(--ig-surface, #fff); border: 1px solid var(--ig-line, rgba(2, 26, 51, .08)); }
.ig-ind-totais b { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 30px; color: var(--ig-link, #006699); }
.ig-ind-totais span { font-size: 13px; color: var(--ig-text-2, #64748b); }

/* ---------- Atalhos no topo e botão de ajuda ---------- */
.ig-topo-extras { display: flex; align-items: center; gap: 6px; margin-inline-end: 6px; }
.ig-topo-extra {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; font-size: 13px; font-weight: 700;
    color: var(--ig-link, #006699); text-decoration: none; background: var(--ig-surface-brand, #eef6fb);
}
.ig-topo-extra:hover { background: #bae6fd; }
.ig-topo-extra .ic { width: 18px; height: 18px; }
.ig-topo-extra-icone { padding: 6px; background: transparent; color: var(--ig-text-2, #64748b); }
.ig-topo-extra-icone:hover { background: var(--ig-surface-3, #f1f5f9); color: var(--ig-link, #006699); }
.ig-topo-adicionar-botao {
    border: 0; cursor: pointer; color: #fff; background: linear-gradient(135deg, #006699, #013252);
    box-shadow: 0 8px 18px -10px rgba(1, 50, 82, .9);
}
.ig-topo-adicionar-botao .ic { color: #2dd4ea; }
.ig-topo-adicionar-botao:hover { background: linear-gradient(135deg, #0077b3, #013252); }
.dark .ig-topo-extra-icone:hover { background: rgba(255, 255, 255, .06); color: #2dd4ea; }
.ig-ajuda { position: fixed; right: 22px; bottom: 22px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ig-ajuda-botao {
    width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
    background: linear-gradient(135deg, #006699, #013252); color: #2dd4ea; box-shadow: 0 12px 28px -10px rgba(1, 50, 82, .8);
}
.ig-ajuda-botao .ic { width: 28px; height: 28px; }
.ig-ajuda-botao:hover { filter: brightness(1.1); }
.ig-ajuda-menu {
    width: 280px; padding: 10px; border-radius: 16px; background: var(--ig-surface, #fff); border: 1px solid var(--ig-line, rgba(2, 26, 51, .08));
    box-shadow: 0 18px 40px -16px rgba(2, 26, 51, .35); display: grid; gap: 4px;
}
.ig-ajuda-titulo { padding: 6px 10px 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ig-text-2, #64748b); }
.ig-ajuda-menu a { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; text-decoration: none; color: var(--ig-text, #0f2a3d); }
.ig-ajuda-menu a:hover { background: var(--ig-surface-brand, #eef6fb); }
.ig-ajuda-menu a .ic { width: 22px; height: 22px; color: var(--ig-link, #006699); flex: none; }
.ig-ajuda-menu b { display: block; font-size: 14px; }
.ig-ajuda-menu small { display: block; font-size: 12px; color: var(--ig-text-2, #64748b); }
[x-cloak] { display: none !important; }

/* ---------- Gestão ---------- */
.ig-gestao-config { display: grid; gap: 20px; }
.ig-gestao-config-rodape { display: flex; justify-content: flex-end; }

@media (max-width: 900px) {
    .ig-onb-cab, .ig-sup-grade, .ig-ind-hero { grid-template-columns: minmax(0, 1fr); }
    .ig-onb-acoes { flex-direction: row; justify-content: flex-start; }
    .ig-ind-totais { grid-template-columns: minmax(0, 1fr); }
    .ig-topo-extra span { display: none; }
    .ig-upg-hero { grid-template-columns: minmax(0, 1fr); }
}