/* INGRA — assinatura, planos e limites (módulo SaaS) */

.ig-login-trial a { color: var(--ig-brand, #006699); font-weight: 700; text-decoration: none; }
.ig-login-trial a:hover { text-decoration: underline; }

/* ---------- Faixa no topo do painel ---------- */
.ig-saas-faixa {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 0 18px; padding: 12px 16px; border-radius: 14px; font-size: 14px;
}
.ig-saas-faixa .ic { width: 20px; height: 20px; flex: none; }
.ig-saas-faixa span { flex: 1; min-width: 220px; }
.ig-saas-faixa-trial { background: linear-gradient(120deg, #013252, #006699); color: #eaf7fc; }
.ig-saas-faixa-trial .ic { color: #2dd4ea; }
.ig-saas-faixa-erro { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.ig-saas-faixa-btn {
    display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 10px; font-weight: 700; font-size: 13px;
    background: #2dd4ea; color: #001b29; text-decoration: none; white-space: nowrap;
}
.ig-saas-faixa-erro .ig-saas-faixa-btn { background: #dc2626; color: #fff; }
.ig-saas-faixa-btn:hover { filter: brightness(1.06); }

/* ---------- Página Conta e assinatura ---------- */
.ig-saas { display: grid; gap: 22px; }
.ig-saas-card {
    background: var(--ig-surface, #fff); border: 1px solid var(--ig-line, rgba(2, 26, 51, .08)); border-radius: 18px; padding: 22px;
    box-shadow: 0 1px 2px rgba(2, 26, 51, .04);
}
.ig-saas-rotulo { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ig-text-2, #64748b); }
.ig-saas-aviso { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 14px; font-size: 14px; }
.ig-saas-aviso .ic { width: 22px; height: 22px; flex: none; }
.ig-saas-aviso-erro { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.ig-saas-resumo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 22px; }
.ig-saas-plano-atual { display: flex; flex-direction: column; gap: 14px; }
.ig-saas-plano-nome { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ig-saas-plano-nome h2 { font-family: 'Fraunces', Georgia, serif; font-size: 30px; font-weight: 700; color: var(--ig-text, #0f2a3d); margin: 0; }
.ig-saas-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 0; }
.ig-saas-dados dt { font-size: 12px; color: var(--ig-text-2, #64748b); font-weight: 600; }
.ig-saas-dados dd { margin: 2px 0 0; font-weight: 700; color: var(--ig-text, #0f2a3d); }
.ig-saas-texto-erro { color: #dc2626 !important; }
.ig-saas-nota { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; font-size: 14px; color: #854d0e; }
.ig-saas-link { font-weight: 700; color: var(--ig-link, #006699); margin-left: 6px; }
.ig-saas-acoes-rodape { margin-top: auto; padding-top: 6px; }

.ig-saas-uso { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 16px; }
.ig-saas-uso-topo { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; margin-bottom: 6px; color: var(--ig-text, #0f2a3d); }
.ig-saas-uso-topo small { color: var(--ig-text-2, #64748b); font-weight: 500; }
.ig-saas-barra { height: 8px; border-radius: 999px; background: var(--ig-surface-3, #f1f5f9); overflow: hidden; }
.ig-saas-barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #006699, #2dd4ea); }
.ig-saas-barra span.alerta { background: linear-gradient(90deg, #d97706, #f59e0b); }
.ig-saas-barra span.cheio { background: #dc2626; }

.ig-saas-bloco { display: grid; gap: 16px; }
.ig-saas-bloco-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ig-saas-bloco-cab h3 { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 700; margin: 0; color: var(--ig-text, #0f2a3d); }
.ig-saas-bloco-cab p { margin: 2px 0 0; font-size: 14px; color: var(--ig-text-2, #64748b); }
.ig-saas-ciclo { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--ig-surface, #fff); border: 1px solid var(--ig-line, rgba(2, 26, 51, .08)); }
.ig-saas-ciclo button { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--ig-text-2, #64748b); cursor: pointer; }
.ig-saas-ciclo button.ativo { background: #013252; color: #fff; }

.ig-saas-planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.ig-saas-plano {
    position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 20px;
    background: var(--ig-surface, #fff); border: 1px solid var(--ig-line, rgba(2, 26, 51, .08)); border-radius: 18px;
}
.ig-saas-plano.destaque { border-color: #7cc3e2; }
.ig-saas-plano.atual { border: 2px solid #006699; box-shadow: 0 18px 40px -28px rgba(0, 102, 153, .7); }
.ig-saas-selo {
    position: absolute; top: -11px; left: 18px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .05em; background: #2dd4ea; color: #001b29;
}
.ig-saas-plano h4 { font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-weight: 700; margin: 0; color: var(--ig-text, #0f2a3d); }
.ig-saas-preco b { font-family: 'Fraunces', Georgia, serif; font-size: 28px; color: var(--ig-heading, #013252); }
.ig-saas-preco span { color: var(--ig-text-2, #64748b); font-weight: 600; font-size: 14px; }
.ig-saas-economia { color: #0f8a5f; font-weight: 700; font-size: 12px; }
.ig-saas-plano ul { list-style: none; padding: 10px 0 0; margin: 4px 0 0; border-top: 1px solid var(--ig-line, rgba(2, 26, 51, .08)); display: grid; gap: 6px; font-size: 14px; color: var(--ig-text, #0f2a3d); flex: 1; }
.ig-saas-plano-acao { margin-top: 10px; }
.ig-saas-plano-acao .fi-btn { width: 100%; }

.ig-saas-vazio { padding: 26px; text-align: center; color: var(--ig-text-2, #64748b); background: var(--ig-surface, #fff); border: 1px dashed var(--ig-border-soft, #e2e8f0); border-radius: 16px; font-size: 14px; }
.ig-saas-tabela-wrap { overflow-x: auto; background: var(--ig-surface, #fff); border: 1px solid var(--ig-line, rgba(2, 26, 51, .08)); border-radius: 16px; }
.ig-saas-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.ig-saas-tabela th { text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ig-text-2, #64748b); padding: 12px 16px; background: var(--ig-surface-2, #f8fafc); }
.ig-saas-tabela td { padding: 12px 16px; border-top: 1px solid var(--ig-line, rgba(2, 26, 51, .08)); color: var(--ig-text, #0f2a3d); }
.ig-saas-status { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.ig-saas-status-ok { background: #dcfce7; color: #166534; }
.ig-saas-status-erro { background: #fee2e2; color: #991b1b; }
.ig-saas-status-aviso { background: #fef3c7; color: #92400e; }

/* ---------- Retorno do Mercado Pago ---------- */
.ig-saas-retorno { max-width: 620px; margin: 24px auto; text-align: center; display: grid; justify-items: center; gap: 12px; padding: 40px 28px; }
.ig-saas-retorno h2 { font-family: 'Fraunces', Georgia, serif; font-size: 26px; font-weight: 700; margin: 0; color: var(--ig-text, #0f2a3d); }
.ig-saas-retorno p { margin: 0 0 8px; color: var(--ig-text-2, #64748b); }
.ig-saas-retorno-ic { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 20px; background: var(--ig-surface-brand, #eef6fb); color: var(--ig-link, #006699); }
.ig-saas-retorno-ic svg { width: 34px; height: 34px; }
.ig-saas-retorno-ic.ok { background: #dcfce7; color: #16a34a; }
.ig-saas-retorno-ic.aviso { background: #fef3c7; color: #d97706; }

@media (max-width: 1024px) {
    .ig-saas-resumo { grid-template-columns: 1fr; }
}