/* Complementos da versão web (login, conta, equipe, importação). */

/* ---------- entrada / login ---------- */
.entrada { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: radial-gradient(1200px 600px at 20% -10%, #1d4a42 0%, var(--lateral) 55%); }
.entrada-cartao { width: min(400px, 100%); background: var(--superficie); border-radius: 16px; padding: 28px; box-shadow: 0 24px 60px rgba(0,0,0,.28); display: flex; flex-direction: column; gap: 22px; }
.marca.grande { padding: 0; border: 0; }
.marca.grande strong { color: var(--texto); font-size: 17px; }
.marca.grande span { color: var(--texto-2); opacity: 1; font-size: 12.5px; }
.entrada-estado { display: flex; flex-direction: column; gap: 14px; }
.entrada-estado[data-estado="carregando"] { align-items: center; padding: 18px 0; color: var(--texto-2); }
.entrada-estado p { margin: 0; line-height: 1.5; }
.entrada .campo input { width: 100%; border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; background: var(--superficie); }
.entrada .campo input:focus { outline: 2px solid var(--primaria); outline-offset: -1px; border-color: transparent; }
.btn.largo { width: 100%; justify-content: center; padding-top: 11px; padding-bottom: 11px; }
.apagado { color: var(--texto-3); }

/* ---------- lateral: usuário e servidor ---------- */
.status.servidor { color: #ffb4ab; }
.status.servidor i { background: #f2675a; animation: pulsar 1.4s infinite; }
.usuario-menu { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; margin: 0 -2px; border: 0; border-radius: 10px; background: rgba(255,255,255,.05); color: inherit; cursor: pointer; text-align: left; }
.usuario-menu:hover { background: rgba(255,255,255,.1); }
.usuario-menu .avatar-mini { width: 30px; height: 30px; font-size: 12px; color: #fff; }
.usuario-info { min-width: 0; display: flex; flex-direction: column; }
.usuario-info b { color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-info small { font-size: 11.5px; opacity: .7; }

/* ---------- CRM ---------- */
.card-linha.dois { grid-template-columns: 1fr 1.4fr; }
.card-linha select, .card-corpo select, .form-modal select { width: 100%; }
.resp-mini { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 9.5px; font-weight: 700; display: inline-grid; place-items: center; flex: none; }
.cartao-rodape time + .resp-mini { margin-left: 6px; }

/* ---------- equipe ---------- */
.input.fino { border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 5px 8px; width: 100%; max-width: 240px; }
.input.fino:hover, .input.fino:focus { border-color: var(--borda); background: var(--superficie); }
#tabelaEquipe .avatar-mini { width: 28px; height: 28px; font-size: 11px; color: #fff; }
#tabelaEquipe select { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--borda); background: var(--superficie); }
.linha-inativa td { opacity: .55; }
.alternar.sem-texto { margin: 0; }

/* ---------- importação ---------- */
code.copiavel { background: #eef2f0; border: 1px solid var(--borda); border-radius: 6px; padding: 2px 6px; font-size: 12.5px; user-select: all; }
.lista-importar { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; width: min(520px, 100%); text-align: left; }
.lista-importar li { display: flex; gap: 10px; justify-content: space-between; padding: 8px 12px; border-radius: 8px; background: #f3f5f4; color: var(--texto-3); font-size: 13px; }
.lista-importar li b { color: var(--texto-2); }
.lista-importar li.ok { background: var(--primaria-clara); color: var(--primaria-escura); }
.lista-importar li.ok b { color: var(--primaria-escura); }
.importar.alvo { border-color: var(--primaria); background: #f6fbf9; }
.tela[data-tela="adm-importar"] .instrucoes { margin-bottom: 20px; }
.tela[data-tela="adm-importar"] > .alternar, .tela[data-tela="adm-importar"] > .linha-botoes, .tela[data-tela="adm-importar"] > .progresso-cartao, .tela[data-tela="adm-importar"] > .estatisticas { margin-top: 18px; }

/* ---------- telas menores (notebook / tablet) ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  .lateral { padding: 14px; }
  .passos { flex-direction: row; flex-wrap: wrap; }
  .lateral-rodape { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .usuario-menu { width: auto; }
}