/* ═══════════════════════════════════════════════════════════════
   CTDC · telas de conta
   Login, equipe e o módulo financeiro. Usa os tokens de app.css.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Login ──────────────────────────────────────────────────── */
body.tela-login{background:var(--tinta-3);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-wrap{width:100%;max-width:404px}
.login-card{background:var(--branco);border-radius:14px;padding:30px 30px 26px;box-shadow:0 24px 60px rgba(0,0,0,.34)}
.login-card .lockup{margin-bottom:24px}
.login-card .lockup .mk{color:var(--tinta)}
.login-card .lockup b{color:var(--tinta)}
.login-card .lockup em{color:var(--roxo)}
.login-card h1{font-size:23px;font-weight:700;letter-spacing:-.025em}
.login-card .sub{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.45}

.login-card form{margin-top:22px;display:flex;flex-direction:column;gap:5px}
.login-card label{font-family:var(--fm);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-top:11px}
.login-card input{font-size:14px;border:1px solid var(--linha);border-radius:8px;padding:10px 12px;color:var(--tinta);background:var(--papel)}
.login-card input:focus{outline:2px solid var(--roxo);outline-offset:1px;background:var(--branco)}

.bt-primario{margin-top:20px;background:var(--roxo);color:#fff;font-size:14px;font-weight:600;padding:12px;border-radius:8px;transition:filter .12s}
.bt-primario:hover{filter:brightness(1.08)}
.bt-primario:disabled{background:var(--papel-2);color:var(--muted-2);cursor:not-allowed}

.login-card .nota a{color:var(--roxo);text-decoration:none;font-weight:600}
.login-card .nota a:hover{text-decoration:underline}
.rodape-login{text-align:center;font-size:11px;color:rgba(255,255,255,.36);margin-top:18px;font-family:var(--fm);letter-spacing:.1em}

/* ─── Avisos ─────────────────────────────────────────────────── */
.aviso{font-size:12.5px;border-radius:8px;padding:10px 13px;margin-top:18px;line-height:1.5}
.aviso.erro{background:#FDEBEA;color:#9E2621;border-left:3px solid var(--vermelho)}
.aviso.ok{background:#EAF6EC;color:#256B2C;border-left:3px solid var(--verde)}

/* ─── Telas internas (equipe, financeiro) ────────────────────── */
body.tela-conta{background:var(--papel)}
.conta-topo{background:var(--tinta-3);color:#fff;padding:18px 0}
.conta-topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.conta-topo .lockup .mk{color:#fff}
.conta-topo .lockup b{color:#fff}
.conta-topo .voltar{font-size:12.5px;color:rgba(255,255,255,.72);text-decoration:none;border:1px solid var(--linha-d);border-radius:7px;padding:7px 13px}
.conta-topo .voltar:hover{color:#fff;border-color:rgba(255,255,255,.4)}

.conta-main{padding:clamp(24px,4vw,44px) 0 60px}

/* O .wrap do app.css só define largura máxima. Nas telas de conta ele
   precisa centralizar e ter respiro lateral — sem isso o painel encosta
   na borda do celular e fica torto à esquerda no monitor largo. */
.conta-topo .wrap,
.conta-main .wrap{margin-inline:auto;padding-inline:clamp(14px,3.5vw,28px)}
.painel{background:var(--branco);border:1px solid var(--linha);border-radius:12px;padding:22px 24px;margin-bottom:20px}
.painel > h2{font-size:19px;font-weight:700;letter-spacing:-.02em}
.painel > .hint{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.5;max-width:64ch}

.grade-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:18px}
.grade-form .fg.wide{grid-column:1 / -1}
.grade-form label{font-family:var(--fm);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);display:block;margin-bottom:5px}
.grade-form input,.grade-form select{width:100%;font-size:13px;border:1px solid var(--linha);border-radius:7px;padding:8px 10px;color:var(--tinta);background:var(--papel)}
.grade-form input:focus,.grade-form select:focus{outline:2px solid var(--roxo);outline-offset:1px;background:var(--branco)}
.grade-form .dica{font-size:11px;color:var(--muted-2);margin-top:5px;line-height:1.4}

.acoes-form{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.bt-a{background:var(--roxo);color:#fff;font-size:13px;font-weight:600;padding:10px 18px;border-radius:8px}
.bt-a:hover{filter:brightness(1.08)}
.bt-b{background:var(--papel-2);color:var(--tinta);font-size:13px;font-weight:600;padding:10px 18px;border-radius:8px}
.bt-b:hover{background:#E2E2E7}
.bt-perigo{background:#FDEBEA;color:#9E2621;font-size:12px;font-weight:600;padding:7px 12px;border-radius:7px}
.bt-perigo:hover{background:#FADAD8}
.bt-mini{background:var(--papel-2);color:var(--tinta);font-size:12px;font-weight:600;padding:7px 12px;border-radius:7px}
.bt-mini:hover{background:#E2E2E7}

/* ─── Tabelas ────────────────────────────────────────────────── */
/* Tabela larga em tela estreita rola dentro da própria caixa; sem isto
   ela empurra a página inteira e cria rolagem horizontal no celular. */
.tab-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:6px}
.tab-rolagem .tabela{min-width:640px}

.tabela{width:100%;border-collapse:collapse;margin-top:16px}
.tabela th{font-family:var(--fm);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);text-align:left;padding:8px 10px;border-bottom:1px solid var(--linha);font-weight:500}
.tabela td{padding:11px 10px;border-bottom:1px solid var(--linha);font-size:13px;vertical-align:middle}
.tabela tr:last-child td{border-bottom:0}
.tabela tr.inativo td{opacity:.5}

.pessoa{display:flex;align-items:center;gap:10px}
.pessoa .av{width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--fm);font-size:11px;color:#fff;text-transform:uppercase}
.pessoa b{display:block;font-weight:600}
.pessoa em{font-style:normal;font-size:11.5px;color:var(--muted)}

.nivel{display:inline-block;font-family:var(--fm);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:5px;font-weight:500}
.tabela .col-acoes{text-align:right;white-space:nowrap}
.tabela .col-acoes form{display:inline}
.eu-marca{font-family:var(--fm);font-size:9.5px;color:var(--roxo);letter-spacing:.08em;text-transform:uppercase}

/* ─── Cartões de nível ───────────────────────────────────────── */
.niveis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:16px}
.nv{border:1px solid var(--linha);border-left:3px solid var(--c);border-radius:10px;padding:13px 15px;background:var(--papel)}
.nv b{display:block;font-size:13.5px;font-weight:700;color:var(--c)}
.nv p{font-size:12px;margin-top:5px;line-height:1.5}

/* ─── Financeiro (marcador do módulo futuro) ─────────────────── */
.futuro{text-align:center;padding:44px 24px}
.futuro .mk{width:52px;height:52px;color:var(--roxo);opacity:.4}
.futuro h2{font-size:22px;margin-top:16px}
.futuro p{max-width:52ch;margin:9px auto 0;font-size:13.5px;line-height:1.6}