/* Assinaturas NDR Tecnologia - base das paginas (o checkout usa checkout.css por cima) */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #1d2738;
    background: #f4f7fb;
}

a { color: #177865; }

.container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }

.topo { background: #fff; border-bottom: 1px solid #e3e9f1; }
.topo .container { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 12px; }
.marca { font-weight: 800; letter-spacing: .04em; color: #177865; text-decoration: none; }
.marca span { color: #1d2738; font-weight: 600; letter-spacing: 0; }
.topo-voltar { font-size: 14px; font-weight: 600; text-decoration: none; }

/* As paginas de checkout vieram de um site com cabecalho fixo: aqui o cabecalho nao e fixo. */
.ck-page { padding: 40px 0 64px; }
.ck-summary { top: 24px; }
@media (max-width: 991px) { .ck-page { padding-top: 28px; } }

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #c8d3e0;
    border-radius: 10px;
    font: inherit;
    background: #fff;
}

/* ---------- pagina da assinatura ---------- */
.situacao { display: flex; gap: 18px; align-items: center; }
.situacao-icone {
    flex: 0 0 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center; font-size: 24px;
}
.situacao.ativa .situacao-icone { background: #e3f6ef; color: #177865; }
.situacao.carencia .situacao-icone { background: #fff3d9; color: #b77700; }
.situacao.vencida .situacao-icone { background: #fde7e7; color: #c43a3a; }
.situacao h2 { margin: 0 0 4px; font-size: 20px; }
.situacao p { margin: 0; color: #5f6f84; }

.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 18px; }
.plano { display: flex; flex-direction: column; gap: 10px; }
.plano h3 { margin: 0; font-size: 18px; }
.plano p { margin: 0; color: #5f6f84; font-size: 14px; }
.plano-preco { font-size: 30px; font-weight: 800; color: #1d2738; }
.plano-preco small { font-size: 14px; font-weight: 600; color: #5f6f84; }
.plano-mes { font-size: 13px; color: #177865; font-weight: 700; }
.plano form { margin-top: auto; }
.plano .ck-btn { width: 100%; justify-content: center; }

.titulo-secao { margin: 36px 0 0; font-size: 18px; }

.tabela-wrap { overflow-x: auto; margin-top: 12px; }
table.historico { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
table.historico th, table.historico td { padding: 10px 12px; border-bottom: 1px solid #e3e9f1; text-align: left; white-space: nowrap; }
table.historico th { color: #5f6f84; font-weight: 600; }

.etiqueta { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.etiqueta.ok { background: #e3f6ef; color: #177865; }
.etiqueta.espera { background: #fff3d9; color: #8a5a00; }
.etiqueta.erro { background: #fde7e7; color: #a52f2f; }

.aviso-simulado {
    margin-bottom: 18px; padding: 14px 16px; border-radius: 12px;
    background: #fff3d9; color: #6b4a00; border: 1px dashed #d6a400; font-size: 14px;
}
.aviso-simulado .ck-btn { margin-top: 10px; }

.centro { max-width: 640px; margin: 0 auto; text-align: center; }
.rodape { padding: 24px 0 40px; text-align: center; font-size: 13px; color: #7b8794; }