/* ═══════════════════════════════════════════════════════════════
   Transcendence Shell — Estilo público compartilhado
   Páginas: /servicos, /solicitar, /consentir, /termos_autorizacao,
            /ajuda-conexao, /login, /cadastro, /recuperar
   Tema: claro/escuro via body.dark · Variáveis CSS · Mobile-first
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Variáveis ─────────────────────────────────────────── */
:root {
    --bg: #eef2f8;
    --panel-bg: #ffffff;
    --panel-border: #e3e9f2;
    --text: #17233a;
    --muted: #64748b;
    --primary: #2563eb;
    --primary-soft: rgba(37,99,235,.13);
    --success: #16a34a;
    --success-soft: rgba(22,163,74,.14);
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 8px 24px rgba(16,30,60,.08);
}
body.dark {
    --bg: #0b1220;
    --panel-bg: #121c30;
    --panel-border: #22304d;
    --text: #e6eefb;
    --muted: #8fa3c0;
    --primary: #3b82f6;
    --primary-soft: rgba(59,130,246,.18);
    --success-soft: rgba(22,163,74,.18);
}

/* ── 2. Base ──────────────────────────────────────────────── */
* { scrollbar-width: thin; }
body { background: var(--bg); color: var(--text); font-size: .925rem; line-height: 1.5; }
a { color: var(--primary); }
a:hover { color: var(--primary); }

/* ── 3. Marca / Cabeçalho ───────────────────────────────── */
.brand-row { display:flex; gap:.75rem; align-items:center; justify-content:center; margin-bottom:.25rem; }
.brand-icon { width:52px; height:52px; border-radius:13px; background:linear-gradient(135deg,#2563eb,#38bdf8); display:grid; place-items:center; color:#fff; font-size:1.45rem; flex-shrink:0; }
.brand-title { font-size:1.35rem; font-weight:750; margin:0; line-height:1.15; }
.brand-subtitle { color:var(--muted); margin:0; font-size:.85rem; }
.theme-fab { position:absolute; top:.85rem; right:.85rem; z-index:20; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--panel-border); background:var(--panel-bg); color:var(--muted); font-size:1.02rem; transition:.15s; }
.theme-fab:hover { color:var(--primary); border-color:var(--primary); transform:rotate(12deg); }

/* ── 4. Painéis ───────────────────────────────────────────── */
.panel { background: var(--panel-bg); border:1px solid var(--panel-border); border-radius: var(--radius); padding:1.15rem; box-shadow: var(--shadow); }
.panel-title { font-size:.98rem; font-weight:700; display:flex; align-items:center; gap:.5rem; margin:0; }
.panel-title i { color: var(--primary); }
.panel-desc { color: var(--muted); font-size:.82rem; margin:.15rem 0 0; }
.page-head { margin-bottom:1rem; }
.eyebrow { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 .15rem; }

/* ── 5. Formulários ───────────────────────────────────────── */
label.form-label { font-size:.8rem; font-weight:600; color:var(--muted); margin-bottom:.25rem; }
.form-control, .form-select, .btn { border-radius: var(--radius-sm); }
.form-control, .form-select { background: var(--panel-bg); border-color: var(--panel-border); color: var(--text); }
.form-control:focus, .form-select:focus { background: var(--panel-bg); color: var(--text); border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(37,99,235,.15); }
.form-control::placeholder { color: var(--muted); opacity:.7; }

/* ── 6. Botões & Badges ───────────────────────────────────── */
.btn-grad { background:linear-gradient(135deg,#2563eb,#38bdf8); border:0; color:#fff; font-weight:700; height:46px; }
.btn-grad:hover, .btn-grad:focus { color:#fff; filter:brightness(1.09); }
.badge-soft-blue  { background: var(--primary-soft); color: var(--primary); border:0; }
.badge-soft-green { background: var(--success-soft); color: var(--success); border:0; }
.badge-soft-amber { background: rgba(245,158,11,.14); color:#b45309; border:0; }
.badge-preco { background: var(--success); color:#fff; font-size:1rem; font-weight:800; border-radius:8px; padding:.4rem .7rem; }
.badge-old { text-decoration:line-through; color:var(--muted); font-size:.8rem; }

/* ── 7. Cards de preço (serviços) ─────────────────────────── */
.price-card { height:100%; position:relative; overflow:hidden; border-radius: var(--radius); transition:transform .15s, box-shadow .15s, border-color .15s; }
.price-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent,#2563eb); }
.price-card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(16,30,60,.12); border-color:var(--accent); }
.price-card.reco { border-color:var(--accent); box-shadow:0 8px 20px rgba(37,99,235,.14); }
.price-card.reco::before { width:5px; }
.svc-icon { width:42px; height:42px; border-radius:10px; display:grid; place-items:center; color:#fff; font-size:1.25rem; flex-shrink:0; }
.svc-hero { background:linear-gradient(135deg,#0d1526 0%,#1d2a45 100%); color:#e6eefb; border-radius:16px; padding:1.4rem 1.2rem; }
.trust-pill { border:1px solid var(--panel-border); background:var(--panel-bg); border-radius:999px; padding:.35rem .7rem; font-size:.78rem; display:inline-flex; align-items:center; gap:.4rem; }
.trust-pill i { font-size:.9rem; }

/* ── 8. Stepper (fluxo ①②③) ───────────────────────────────── */
.stepper { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; align-items:center; }
.step-badge { padding:.45rem .7rem; border-radius:999px; font-size:.8rem; font-weight:600; }
.step-num { width:26px; height:26px; border-radius:50%; background:var(--primary); color:#fff; display:inline-grid; place-items:center; font-weight:700; font-size:.82rem; margin-right:.5rem; flex-shrink:0; }
.step-card { display:flex; gap:.9rem; align-items:flex-start; background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:12px; padding:.9rem 1rem; margin-bottom:.6rem; }
.help-hero { background:linear-gradient(135deg,#0d1526 0%,#1d2a45 100%); color:#e6eefb; border-radius:14px; padding:1.2rem; }

/* ── 9. Termo / LGPD ──────────────────────────────────────── */
.term-box { max-height:180px; overflow-y:auto; background:var(--bg); border:1px solid var(--panel-border); border-radius:10px; padding:.9rem; font-size:.84rem; line-height:1.55; }
.term-box p { margin:.5rem 0; }
.term-box::-webkit-scrollbar { width:6px; }
.term-box::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius:999px; }

/* ── 10. Rodapé & Estados ─────────────────────────────────── */
.pub-topbar { display:flex; justify-content:flex-end; padding:.7rem 1rem; max-width:780px; margin:0 auto; }
.pub-foot { text-align:center; color:var(--muted); font-size:.78rem; padding:1rem 0 .5rem; }
.dot-live { width:8px; height:8px; border-radius:50%; background:#22c55e; display:inline-block; box-shadow:0 0 0 3px rgba(34,197,94,.25); animation:pulse 2s infinite; }
@keyframes pulse { 50% { opacity:.55; } }

/* ── 11. Autenticação (login/cadastro/recuperar) ──────────── */
.auth-shell { min-height:100vh; min-height:100svh; display:grid; align-content:center; justify-items:center; padding:.75rem;
    background: radial-gradient(900px 420px at 12% -8%, rgba(37,99,235,.28), transparent), radial-gradient(760px 380px at 108% 112%, rgba(56,189,248,.20), transparent); }
.auth-card { width:100%; max-width:430px; }
.auth-title { text-align:center; font-weight:750; margin:0; font-size:1.3rem; }
.auth-sub { text-align:center; color:var(--muted); font-size:.85rem; margin-top:.15rem; }
.auth-brand { display:flex; flex-direction:column; align-items:center; gap:.28rem; margin-bottom:.75rem; }
.auth-card .brand-icon { width:46px; height:46px; font-size:1.22rem; border-radius:11px; }
.input-icon { position:relative; }
.input-icon .form-control { padding-right:2.55rem; height:41px; }
.input-icon > i { position:absolute; right:.85rem; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.input-icon > .eye-btn { position:absolute; right:.55rem; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--muted); padding:.15rem; font-size:1rem; }
.input-icon > .eye-btn:hover { color:var(--primary); }
.auth-link { color:var(--primary); text-decoration:none; font-size:.86rem; }
.auth-link:hover { text-decoration:underline; }
.auth-div { display:flex; align-items:center; gap:.75rem; color:var(--muted); font-size:.78rem; margin:.75rem 0 .5rem; }
.auth-div::before, .auth-div::after { content:""; height:1px; background:var(--panel-border); flex:1; }
.codigo-box { font-size:2rem; font-weight:800; letter-spacing:.35em; text-align:center; background:var(--bg); border:1px dashed var(--panel-border); border-radius:10px; padding:.6rem 0; user-select:all; }