/* ====================================================================
   web/css/conta.css — a área do usuário (js/conta.js; rodada Ecossistema,
   07/10/2026). Desenho de Configurações (ChatGPT/Claude/iOS) no design
   system da direção A. Toda regra começa por `#module-conta` ou `.ct-dlg-*`
   (o diálogo vive no body): nada vaza para o resto do app. Não depende da
   flag do visual A — os tokens são definidos aqui, com os valores de
   web/css/visual-a.css.
   Refino 08/10/2026: medido contra o padrão visual (cabeçalho de
   web/css/barra.css) — pesos 600 no lugar de 700, botões em pílula, ação
   em azul, cards 16, rótulo de grupo em caixa normal, plano sem gradiente.
   ==================================================================== */

#module-conta,
.ct-dlg-fundo {
  --ct-navy: #0a1628;
  --ct-gold: #c9a040;
  --ct-ink: #0a1628;
  --ct-dim: #5b6472;
  --ct-line: #e6e8ec;
  --ct-fill: #f3f4f6;
  --ct-bg: #ffffff;
  --ct-azul: #152848;
  --ct-azul-06: #f1f4f9;
  --ct-azul-10: #e6ecf6;
  --ct-verde: #1f7a4d;
  --ct-verde-fundo: #e8f5ee;
  --ct-perigo: #c0362c;
  --ct-perigo-fundo: #fdf0ef;
  --ct-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#module-conta.active { max-width: 720px; }
#module-conta .ct { font-family: var(--ct-font); color: var(--ct-ink); padding-bottom: 48px; -webkit-font-smoothing: antialiased; }
#module-conta .ct i[data-lucide], #module-conta .ct svg.lucide { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 2; }

/* ---------- cabeçalho + abas ---------- */
#module-conta .ct-cab { margin-bottom: 18px; }
#module-conta .ct-tit { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 0; outline: none; }
#module-conta .ct-sub { margin: 6px 0 0; color: var(--ct-dim); font-size: 14.5px; line-height: 1.45; }

#module-conta .ct-abas { display: flex; gap: 6px; margin: 0 0 28px; padding: 4px; background: var(--ct-fill); border-radius: 12px; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
#module-conta .ct-abas::-webkit-scrollbar { display: none; }
#module-conta .ct-aba { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--ct-dim); font: 500 14px/1 var(--ct-font); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
#module-conta .ct-aba:hover { color: var(--ct-ink); }
#module-conta .ct-aba[aria-current="page"] { background: var(--ct-bg); color: var(--ct-ink); box-shadow: 0 1px 2px rgba(10, 22, 40, .08), 0 0 0 1px rgba(10, 22, 40, .04); }
#module-conta .ct-aba:focus-visible { outline: 2px solid var(--ct-azul); outline-offset: 1px; }

/* ---------- grupos, cartões, linhas ---------- */
#module-conta .ct-grupo { margin: 0 0 26px; }
#module-conta .ct-grupo-tit { margin: 0 0 8px 4px; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ct-dim); }
#module-conta .ct-card { background: var(--ct-bg); border: 1px solid var(--ct-line); border-radius: 16px; overflow: hidden; }
#module-conta .ct-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 18px; }
#module-conta .ct-linha + .ct-linha,
#module-conta .ct-card > details + details { border-top: 1px solid var(--ct-line); }
#module-conta .ct-rot { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
#module-conta .ct-rot-t { font-size: 15px; font-weight: 500; line-height: 1.35; display: inline-flex; align-items: center; gap: 8px; }
#module-conta .ct-rot-d { font-size: 13px; color: var(--ct-dim); line-height: 1.4; }
#module-conta .ct-ctl { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
#module-conta .ct-valor { font-size: 14.5px; color: var(--ct-dim); word-break: break-all; }
#module-conta .ct-num { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
#module-conta .ct-linha-col { flex-direction: column; align-items: stretch; gap: 10px; }
#module-conta .ct-ic-esq { color: var(--ct-dim); }

/* ---------- controles ---------- */
#module-conta .ct-btn,
.ct-dlg .ct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 16px; border: 1px solid var(--ct-line); border-radius: 999px; background: var(--ct-bg); color: var(--ct-ink); font: 500 14px/1 var(--ct-font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, opacity .15s; }
#module-conta .ct-btn:hover:not(:disabled),
.ct-dlg .ct-btn:hover { background: var(--ct-fill); }
#module-conta .ct-btn:focus-visible,
.ct-dlg .ct-btn:focus-visible { outline: 2px solid var(--ct-azul); outline-offset: 2px; }
#module-conta .ct-btn-pri,
.ct-dlg .ct-btn-pri { background: var(--ct-azul); border-color: var(--ct-azul); color: #fff; }
#module-conta .ct-btn-pri:hover:not(:disabled),
.ct-dlg .ct-btn-pri:hover { background: var(--ct-navy); border-color: var(--ct-navy); }
#module-conta .ct-btn-perigo { color: var(--ct-perigo); border-color: transparent; background: transparent; }
#module-conta .ct-btn-perigo:hover:not(:disabled) { background: var(--ct-perigo-fundo); }
#module-conta .ct-btn:disabled { opacity: .5; cursor: not-allowed; }
#module-conta .ct-btn-grande { min-height: 46px; padding: 0 28px; font-size: 15px; }
#module-conta .ct-ic-dir { margin-right: -4px; }
#module-conta .ct-desab { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
#module-conta .ct-desab-nota { font-size: 12.5px; color: var(--ct-dim); line-height: 1.35; }

#module-conta .ct-campo { display: flex; align-items: center; gap: 8px; }
#module-conta .ct-input { width: 240px; max-width: 100%; min-height: 38px; padding: 0 12px; border: 1px solid var(--ct-line); border-radius: 12px; background: var(--ct-bg); color: var(--ct-ink); font: 400 14.5px/1 var(--ct-font); }
#module-conta .ct-input:focus { outline: none; border-color: var(--ct-azul); box-shadow: 0 0 0 3px var(--ct-azul-10); }
#module-conta .ct-input[readonly] { background: var(--ct-fill); color: var(--ct-dim); letter-spacing: .04em; font-weight: 600; }
#module-conta .ct-salvo { font-size: 12.5px; color: var(--ct-verde); min-width: 48px; }

#module-conta .ct-seg { display: inline-flex; padding: 3px; background: var(--ct-fill); border-radius: 10px; }
#module-conta .ct-seg-op { min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ct-dim); font: 500 13.5px/1 var(--ct-font); cursor: pointer; }
#module-conta .ct-seg-op[aria-checked="true"] { background: var(--ct-bg); color: var(--ct-ink); box-shadow: 0 1px 2px rgba(10, 22, 40, .1); }
#module-conta .ct-seg-op:focus-visible { outline: 2px solid var(--ct-azul); outline-offset: 1px; }

#module-conta .ct-switch { position: relative; width: 46px; height: 28px; flex-shrink: 0; border: 0; border-radius: 999px; background: #d4d8de; cursor: pointer; padding: 0; transition: background .2s; }
#module-conta .ct-switch-bola { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(10, 22, 40, .25); transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
#module-conta .ct-switch[aria-checked="true"] { background: var(--ct-azul); }
#module-conta .ct-switch[aria-checked="true"] .ct-switch-bola { transform: translateX(18px); }
#module-conta .ct-switch:focus-visible { outline: 2px solid var(--ct-azul); outline-offset: 2px; }

#module-conta .ct-nota { display: flex; align-items: center; gap: 8px; margin: -12px 4px 0; font-size: 13px; color: var(--ct-dim); }

/* ---------- zona de perigo ---------- */
#module-conta .ct-grupo-perigo .ct-rot-t { color: var(--ct-perigo); }

/* ---------- plano ---------- */
#module-conta .ct-aviso { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 12px 16px; border-radius: 12px; background: var(--ct-verde-fundo); color: var(--ct-verde); font-size: 14.5px; font-weight: 500; }
#module-conta .ct-plano { padding: 20px; display: flex; flex-direction: column; gap: 16px; background: var(--ct-bg); }
#module-conta .ct-plano-topo { display: flex; align-items: center; gap: 14px; }
#module-conta .ct-plano-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ct-navy); color: var(--ct-gold); }
#module-conta .ct-plano-ic svg { width: 20px; height: 20px; }
#module-conta .ct-plano-txt { flex: 1; min-width: 0; }
#module-conta .ct-plano-nome { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
#module-conta .ct-plano-d { font-size: 13.5px; color: var(--ct-dim); margin-top: 3px; }
#module-conta .ct-plano-preco { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
#module-conta .ct-selo { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--ct-verde-fundo); color: var(--ct-verde); font-size: 12px; font-weight: 500; letter-spacing: 0; }
#module-conta .ct-selo svg { width: 12px; height: 12px; }
#module-conta .ct-cupom-chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 12px; border-radius: 10px; border: 1px dashed #d9c48e; background: rgba(201, 160, 64, .08); font-size: 13.5px; color: #7d5e10; }
#module-conta .ct-cupom-chip b { letter-spacing: .04em; }
#module-conta .ct-plano-acoes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }

#module-conta .ct-lista { list-style: none; margin: 0; padding: 8px 0; }
#module-conta .ct-lista li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 18px; font-size: 14.5px; line-height: 1.45; }
#module-conta .ct-ic-ok { color: var(--ct-verde); margin-top: 2px; }

#module-conta .ct-vazio { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 20px; }
#module-conta .ct .ct-vazio-ic { width: 28px; height: 28px; color: #a9b0bb; margin-bottom: 10px; }
#module-conta .ct-vazio-t { font-size: 15px; font-weight: 600; }
#module-conta .ct-vazio-d { font-size: 13.5px; color: var(--ct-dim); margin-top: 4px; }

/* ---------- checkout ---------- */
#module-conta .ct-voltar { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin: -12px 0 14px -6px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ct-dim); font: 500 14px/1 var(--ct-font); cursor: pointer; }
#module-conta .ct-voltar:hover { color: var(--ct-ink); background: var(--ct-fill); }
#module-conta .ct-linha-soma { min-height: 44px; font-size: 14.5px; color: var(--ct-dim); font-variant-numeric: tabular-nums; }
#module-conta .ct-linha-total { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--ct-fill); }
#module-conta .ct-cupom-campo { display: flex; align-items: center; gap: 10px; }
#module-conta .ct-rodape { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 4px; }

/* ---------- ajuda ---------- */
#module-conta .ct-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 18px; font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; }
#module-conta .ct-faq summary::-webkit-details-marker { display: none; }
#module-conta .ct-faq summary:focus-visible { outline: 2px solid var(--ct-azul); outline-offset: -2px; }
#module-conta .ct-faq-ic { color: var(--ct-dim); transition: transform .2s; }
#module-conta .ct-faq[open] .ct-faq-ic { transform: rotate(180deg); }
#module-conta .ct-faq p { margin: 0; padding: 0 18px 16px; font-size: 14px; line-height: 1.55; color: var(--ct-dim); }

/* ---------- diálogo (no body, fora do módulo) ---------- */
.ct-dlg-fundo { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(10, 22, 40, .42); font-family: var(--ct-font); animation: ct-fundo .15s ease-out; }
.ct-dlg { width: 100%; max-width: 420px; padding: 24px; border-radius: 16px; background: var(--ct-bg); color: var(--ct-ink); box-shadow: 0 24px 64px rgba(10, 22, 40, .18); animation: ct-dlg .18s cubic-bezier(.2, .8, .2, 1); }
.ct-dlg-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ct-perigo-fundo); color: var(--ct-perigo); margin-bottom: 14px; }
.ct-dlg-ic svg { width: 20px; height: 20px; }
.ct-dlg-t { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.ct-dlg-p { margin: 0 0 22px; font-size: 14.5px; line-height: 1.55; color: var(--ct-dim); }
.ct-dlg-acoes { display: flex; justify-content: flex-end; gap: 10px; }
.ct-dlg .ct-btn svg { width: 16px; height: 16px; }
@keyframes ct-fundo { from { opacity: 0; } }
@keyframes ct-dlg { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .ct-dlg-fundo, .ct-dlg { animation: none; } }

/* ---------- celular ---------- */
@media (max-width: 768px) {
  #module-conta.active { overflow-y: auto; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  #module-conta .ct { padding-top: 4px; }
  #module-conta .ct-tit { font-size: 24px; }
  #module-conta .ct-abas { width: 100%; margin-bottom: 22px; }
  #module-conta .ct-aba { flex: 1 0 auto; justify-content: center; min-height: 44px; padding: 0 12px; }
  #module-conta .ct-aba svg { display: none; }
  #module-conta .ct-linha { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
  #module-conta .ct-linha-soma,
  #module-conta .ct-linha-total { flex-direction: row; align-items: center; }
  #module-conta .ct-linha:has(> .ct-ctl > .ct-switch) { flex-direction: row; align-items: center; }
  #module-conta .ct-ctl { width: 100%; }
  #module-conta .ct-linha:has(> .ct-ctl > .ct-switch) .ct-ctl { width: auto; }
  #module-conta .ct-btn,
  #module-conta .ct-input,
  #module-conta .ct-seg-op { min-height: 44px; }
  #module-conta .ct-ctl > .ct-btn,
  #module-conta .ct-desab,
  #module-conta .ct-desab .ct-btn,
  #module-conta .ct-plano-acoes > .ct-btn { width: 100%; }
  #module-conta .ct-campo, #module-conta .ct-input { width: 100%; }
  #module-conta .ct-seg { width: 100%; }
  #module-conta .ct-seg-op { flex: 1; }
  #module-conta .ct-switch { width: 51px; height: 31px; }
  #module-conta .ct-switch-bola { width: 27px; height: 27px; top: 2px; left: 2px; }
  #module-conta .ct-switch[aria-checked="true"] .ct-switch-bola { transform: translateX(20px); }
  #module-conta .ct-plano-topo { flex-wrap: wrap; }
  #module-conta .ct-rodape { flex-direction: column-reverse; align-items: stretch; }
  #module-conta .ct-btn-grande { width: 100%; }
  #module-conta .ct-cupom-campo .ct-input { flex: 1; }
  .ct-dlg-fundo { place-items: end center; padding: 0; }
  .ct-dlg { max-width: none; border-radius: 18px 18px 0 0; padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); }
  .ct-dlg-acoes { flex-direction: column-reverse; }
  .ct-dlg .ct-btn { min-height: 46px; width: 100%; }
}

/* ---------- (F2, 28/10) aba Plano: limites de uso (opção A da maquete minha-conta-maquetes-2026-10-28) ---------- */
#module-conta .ct-med { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 16px 18px; }
#module-conta .ct-med + .ct-med { border-top: 1px solid var(--ct-line); }
#module-conta .ct-med-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#module-conta .ct-med-t { font-size: 15px; font-weight: 500; }
#module-conta .ct-med-v { font-size: 14px; color: var(--ct-dim); white-space: nowrap; }
#module-conta .ct-med-v b { color: var(--ct-ink); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
#module-conta .ct-med-v.ambar b { color: #8a6405; }
#module-conta .ct-barra { height: 8px; border-radius: 999px; background: var(--ct-fill); overflow: hidden; }
#module-conta .ct-barra > i { display: block; height: 100%; border-radius: 999px; background: var(--ct-azul); transition: width .4s cubic-bezier(.23, 1, .32, 1); }
#module-conta .ct-barra.ambar > i { background: #8a6405; }
#module-conta .ct-med-r { font-size: 12.5px; color: var(--ct-dim); }
#module-conta .ct-uso-nota { margin: 10px 4px 0; align-items: flex-start; line-height: 1.45; }
#module-conta .ct-uso-nota svg, #module-conta .ct-uso-nota i { margin-top: 2px; }
#module-conta .ct-uso-vazio { padding: 16px 18px; font-size: 14px; color: var(--ct-dim); }
#module-conta .ct-uso-livre { display: flex; align-items: center; gap: 10px; padding: 16px 18px; font-size: 15px; font-weight: 500; }
#module-conta .ct-uso-livre svg { color: var(--ct-verde); }
@media (prefers-reduced-motion: reduce) { #module-conta .ct-barra > i { transition: none; } }