/* ==========================================================================
   legal.css — Suporte + páginas jurídicas (privacidade, reembolso).
   Depende de central.css (tokens :root, .container, .card, .btn, .alert...).
   Carregue sempre DEPOIS de central.css.
   ========================================================================== */

/* ---------- Cards de ação rápida ---------- */
.acao-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

.acao-card {
    display: flex; flex-direction: column; gap: .55rem;
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-xl);
    padding: 1.25rem; text-decoration: none; color: inherit;
    box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s;
    cursor: pointer; text-align: left; font-family: inherit;
}
.acao-card:hover { border-color: var(--border-strong); background: var(--background); }
.acao-icone {
    width: 42px; height: 42px; border-radius: var(--radius-md);
    display: grid; place-items: center; background: var(--primary-tint); color: var(--primary);
}
.acao-icone svg { width: 22px; height: 22px; }
.acao-card.whats .acao-icone { background: #e3ece4; color: var(--green); }
.acao-card.gold .acao-icone { background: var(--gold-tint); color: var(--gold); }
.acao-card.green .acao-icone { background: var(--green-tint); color: var(--green); }
.acao-card h3 { font-size: 1rem; font-weight: 700; }
.acao-card p { font-size: .875rem; color: var(--text-light); line-height: 1.45; }
.acao-meta { margin-top: auto; padding-top: .5rem; font-size: .8125rem; font-weight: 600; color: var(--primary); }

/* ---------- Formulário ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .85rem; }
.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo label { font-size: .8125rem; font-weight: 600; color: var(--text); }
.campo .dica { font-size: .78rem; color: var(--text-light); font-weight: 400; }
.campo input {
    padding: .7rem .85rem; border: 1px solid var(--border); border-radius: var(--radius-md);
    font-size: .95rem; font-family: inherit; color: var(--text); background: var(--surface-card);
    transition: border-color .2s, box-shadow .2s;
}
.campo input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.campo input::placeholder { color: var(--text-dim); }

.resultado { margin-top: 1.1rem; }
.resultado:empty { display: none; }

.spinner {
    width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff; border-radius: 50%; animation: girar .7s linear infinite; display: inline-block;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Painel da assinatura ---------- */
.assinatura-box {
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
    padding: 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .75rem;
}
.assinatura-linhas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.assinatura-item .rotulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-light); font-weight: 600; }
.assinatura-item .valor { font-size: .95rem; font-weight: 700; margin-top: .15rem; }

.selo { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .2rem .6rem; font-size: .78rem; font-weight: 700; }
.selo.ok { background: var(--green-tint); color: var(--green); }
.selo.alerta { background: var(--gold-tint); color: var(--gold); }
.selo.off { background: var(--surface-2); color: var(--text-light); }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: .6rem; }
.faq details {
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 0 1.1rem; transition: border-color .2s, box-shadow .2s;
}
.faq details[open] { border-color: var(--primary-light); box-shadow: var(--shadow-sm); }
.faq summary {
    list-style: none; cursor: pointer; padding: 1rem 0; font-weight: 600; font-size: .95rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ""; flex-shrink: 0; width: 9px; height: 9px;
    border-right: 2px solid var(--text-light); border-bottom: 2px solid var(--text-light);
    transform: rotate(45deg) translateY(-2px); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq-corpo { padding: 0 0 1.1rem; color: var(--text-light); font-size: .95rem; line-height: 1.65; }
.faq-corpo p + p { margin-top: .7rem; }
.faq-corpo strong { color: var(--text); }
.faq-corpo a { color: var(--primary); font-weight: 600; }
.faq-corpo ul { margin: .6rem 0 0 1.15rem; display: flex; flex-direction: column; gap: .3rem; }

/* ---------- Extrato / identificação da cobrança ---------- */
.extrato {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    background: #17150f; color: var(--border); border-radius: var(--radius-lg); padding: .9rem 1.1rem;
    font-family: var(--font-mono); font-size: .95rem;
}
.extrato b { color: #fff; letter-spacing: .06em; }

/* ---------- Páginas jurídicas ---------- */
.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2.5rem; align-items: start; padding-bottom: 3rem; }
@media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; gap: 1.5rem; } }

.legal-indice { position: sticky; top: 80px; }
@media (max-width: 900px) { .legal-indice { position: static; } }
.legal-indice h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-light); margin-bottom: .7rem; }
.legal-indice ol { list-style: none; display: flex; flex-direction: column; gap: .1rem; }
.legal-indice a {
    display: block; padding: .4rem .6rem; border-radius: var(--radius-md); border-left: 2px solid transparent;
    font-size: .875rem; color: var(--text-light); text-decoration: none; line-height: 1.35;
}
.legal-indice a:hover { background: var(--primary-tint); color: var(--primary); border-left-color: var(--primary); }

.legal-doc {
    background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm); padding: 2.25rem 2.5rem;
}
@media (max-width: 640px) { .legal-doc { padding: 1.5rem 1.25rem; } }

.legal-doc h2 {
    font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; margin: 2.5rem 0 .9rem;
    padding-top: 1.5rem; border-top: 1px solid var(--border); scroll-margin-top: 80px;
}
.legal-doc h2.primeiro { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-doc h2 .num { color: var(--primary); font-variant-numeric: tabular-nums; }
.legal-doc h3 { font-size: 1rem; font-weight: 700; margin: 1.4rem 0 .5rem; }
.legal-doc p { color: var(--text-light); font-size: .95rem; line-height: 1.75; margin-bottom: .85rem; }
.legal-doc ul, .legal-doc ol { margin: 0 0 .95rem 1.25rem; display: flex; flex-direction: column; gap: .45rem; }
.legal-doc li { color: var(--text-light); font-size: .95rem; line-height: 1.7; }
.legal-doc a { color: var(--primary); font-weight: 600; }
.legal-doc strong { color: var(--text); font-weight: 700; }
.legal-doc .alert { margin: 1.1rem 0; }

.legal-meta {
    display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}
.legal-meta span {
    display: inline-flex; align-items: center; gap: .35rem; background: var(--surface); border: 1px solid var(--border);
    border-radius: 999px; padding: .3rem .75rem; font-size: .8125rem; color: var(--text-light);
}
.legal-meta b { color: var(--text); font-weight: 600; }

/* Tabelas de dados / prazos */
.tabela-wrap { overflow-x: auto; margin: 0 0 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); }
table.legal { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 480px; }
table.legal th, table.legal td { padding: .7rem .85rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
table.legal th { background: var(--surface); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-light); }
table.legal tr:last-child td { border-bottom: 0; }
table.legal td { color: var(--text-light); line-height: 1.55; }

/* Trechos que o responsável precisa preencher antes de publicar */
.preencher { background: #f7f0df; border-bottom: 2px dotted var(--gold); padding: 0 .2rem; border-radius: 3px; font-weight: 600; color: #5c3f0b; }

/* ---------- Regra do reembolso: as duas metades lado a lado ---------- */
.regra-dupla { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }

.regra { border-radius: var(--radius-xl); padding: 1.5rem; border: 1px solid var(--border); background: var(--surface-card); }
.regra h2 { font-size: 1.15rem; font-weight: 700; margin: .75rem 0 .5rem; letter-spacing: -.01em; }
.regra p { font-size: .95rem; line-height: 1.65; color: var(--text-light); }
.regra strong { color: var(--text); font-weight: 700; }

.regra-icone { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; }
.regra-icone svg { width: 24px; height: 24px; }

.regra-sim { border-color: var(--green-borda); background: var(--green-tint); }
.regra-sim .regra-icone { background: var(--green-borda); color: var(--green); }
.regra-sim h2 { color: var(--green); }

.regra-nao { border-color: var(--border); background: var(--surface-2); }
.regra-nao .regra-icone { background: var(--surface-2); color: var(--text-dim); }
.regra-nao h2 { color: var(--text-light); }

.nota-regra {
    margin-top: 1rem; text-align: center; font-size: .875rem; color: var(--text-light); line-height: 1.6;
}
.nota-regra a { color: var(--primary); font-weight: 600; }

/* ---------- Lista de casos cobertos ---------- */
.lista-itens { display: flex; flex-direction: column; gap: .6rem; }
.item-ok {
    display: grid; grid-template-columns: minmax(0, 210px) 1fr; gap: .25rem 1.5rem; align-items: baseline;
    background: var(--surface-card); border: 1px solid var(--border); border-left: 3px solid var(--green);
    border-radius: var(--radius-lg); padding: .9rem 1.1rem;
}
@media (max-width: 640px) { .item-ok { grid-template-columns: 1fr; gap: .3rem; } }
.item-ok strong { font-size: .95rem; font-weight: 700; line-height: 1.45; }
.item-ok span { font-size: .875rem; color: var(--text-light); line-height: 1.6; }

/* Aviso destacado anti-contestação */
.destaque-forte {
    border: 1px solid #e3bdb8; background: var(--primary-tint); color: var(--primary);
    border-radius: var(--radius-lg); padding: 1.1rem 1.25rem;
}
.destaque-forte h3 { color: var(--primary-dark); font-size: 1rem; font-weight: 700; margin: 0 0 .4rem; }
.destaque-forte p { color: var(--primary); font-size: .95rem; line-height: 1.6; margin: 0; }
.destaque-forte p + p { margin-top: .6rem; }
.destaque-forte a { color: var(--primary-dark); font-weight: 700; }