/* Ajustes especificos do modulo contas (redesign 01/10/2026).
   Use os tokens do sistema.css; nada de cor fixa. */

/* Celulas com muitos badges (permissoes do grupo, setores do cargo):
   quebram em linhas com respiro e fonte um pouco menor. */
.celula-permissoes { display: flex; flex-wrap: wrap; gap: .25rem; max-width: 34rem; }
.celula-permissoes .badge { font-size: .66rem; white-space: normal; text-align: left; }
.chip-permissao { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .22rem .6rem; border-radius: 10px; font-size: .72rem; line-height: 1.25; font-weight: 500; color: var(--ceu-tinta, #0e1116); background: var(--ceu-afundado, #f1f4f8); border: 1px solid var(--ceu-fio, #e3e8ee); }
.chip-permissao::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #2E7DEF; }
.chip-permissao.chip-mais { cursor: pointer; font-weight: 700; color: #2E7DEF; background: color-mix(in srgb, #2E7DEF 10%, transparent); border-color: color-mix(in srgb, #2E7DEF 30%, transparent); }
.chip-permissao.chip-mais::before { display: none; }
.mais-permissoes { display: contents; }
.mais-permissoes > summary { list-style: none; display: inline-flex; }
.mais-permissoes > summary::-webkit-details-marker { display: none; }
.mais-permissoes[open] > summary .chip-mais { background: #2E7DEF; color: #fff; }
.mais-permissoes > .celula-permissoes { flex-basis: 100%; max-width: none; animation: ceu-pop .35s ease; }
@media (max-width: 767.98px) {
  .celula-permissoes { justify-content: flex-end; max-width: none; }
}

/* Lista de permissoes (form de usuario e de grupo) e grade de cargos do setor */
.lista-permissoes .list-group-item { padding: .6rem .9rem; }
.lista-permissoes .form-check-label { font-size: .84rem; }
.lista-opcoes-grade { background: var(--superficie-2); }
.lista-opcoes-grade .form-check-label { font-size: .84rem; }

/* Botoes do fim do formulario: no celular ocupam a linha toda */
.acoes-form { margin-top: .25rem; }
@media (max-width: 575.98px) {
  .acoes-form .btn { flex: 1 1 auto; }
}

/* Icone no avatar (grupo, conexao) no mesmo tom das iniciais */
.avatar .bi { font-size: .85em; }

/* Indicador com texto no lugar do numero (Saudavel, 3 h 20 min) */
.cartao-indicador .valor.valor-texto { font-size: 1.3rem; }
@media (max-width: 575.98px) { .cartao-indicador .valor.valor-texto { font-size: 1.05rem; } }

/* Faixa de indicadores dentro de uma aba (banco de dados) */
.card[data-abas] .faixa-indicadores { border-left: 0; border-right: 0; border-top: 0; border-radius: 0; }

/* Mensagem de log: quebra e nao estoura a largura */
.celula-mensagem { max-width: 28rem; overflow-wrap: anywhere; }

/* Form "usar este banco" dentro da celula (lista de integracoes API) */
.form-banco { max-width: 18rem; }
.form-banco .form-select, .form-banco .select-bonito { min-width: 11.5rem; }
@media (max-width: 767.98px) { .form-banco { margin-left: auto; } }

/* Personalizacao > Cor do menu lateral (01/10/2026): amostras e leitura. */
.amostras-de-cor { display: flex; flex-wrap: wrap; gap: .45rem; }
.amostra-de-cor {
  width: 30px; height: 30px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--amostra); border: 2px solid var(--borda-forte);
  box-shadow: inset 0 0 0 2px var(--superficie);
}
.amostra-de-cor:hover { transform: scale(1.08); }
.amostra-de-cor.ativa { border-color: var(--primaria-600); box-shadow: inset 0 0 0 2px var(--superficie), 0 0 0 3px rgba(var(--primaria-rgb), .25); }
.leitura-do-menu { background: var(--superficie-2); border: 1px solid var(--borda); border-radius: var(--raio-lg); padding: .85rem 1rem; }

/* Personalizacao > Personagem 3D da tela de entrada (02/10/2026): previa ao
   vivo, abas do catalogo e grades de miniaturas (pecas e animacoes). */
.previa-3d {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--raio-lg);
  overflow: hidden; border: 1px solid var(--borda);
  background: radial-gradient(120% 90% at 50% 100%, #3a3a3a 0%, #2b2b2b 55%, #1f1f1f 100%);
}
.previa-3d canvas { display: block; width: 100%; height: 100%; }
.previa-3d .aviso-3d {
  position: absolute; inset: auto 0 0 0; padding: .5rem .75rem; font-size: .8rem;
  color: #f7f7f7; background: rgba(0,0,0,.45); text-align: center;
}
.estilos-3d { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.estilo-3d {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; cursor: pointer;
  border: 1px solid var(--borda); border-radius: var(--raio-lg); background: var(--superficie-2);
}
.estilo-3d input { margin: 0; }
.estilo-3d:has(input:checked) { border-color: var(--primaria-600); box-shadow: 0 0 0 3px rgba(var(--primaria-rgb), .18); }
.abas-3d { display: flex; flex-wrap: wrap; gap: .35rem; }
.abas-3d .btn { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .7rem; --bs-btn-font-size: .85rem; }
.abas-3d .btn .badge { margin-left: .35rem; }
.painel-3d[hidden] { display: none; }
.grade-3d {
  display: grid; gap: .5rem; max-height: 26rem; overflow: auto; padding: .25rem;
  grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr));
}
.cartao-3d {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem;
  margin: 0; padding: .4rem .3rem .35rem; cursor: pointer; text-align: center;
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie);
}
.cartao-3d:hover { border-color: var(--borda-forte); }
.cartao-3d input { position: absolute; opacity: 0; pointer-events: none; }
.cartao-3d:has(input:checked) { border-color: var(--primaria-600); box-shadow: 0 0 0 3px rgba(var(--primaria-rgb), .22); }
.cartao-3d:has(input:focus-visible) { outline: 2px solid var(--primaria-600); outline-offset: 2px; }
.cartao-3d img, .cartao-3d .sem-miniatura {
  width: 4.4rem; height: 4.4rem; border-radius: var(--raio-sm); object-fit: contain;
  background: var(--superficie-2);
}
.cartao-3d .sem-miniatura { display: grid; place-items: center; font-size: 1.2rem; color: var(--texto-3); }
.cartao-3d .nome-3d { font-size: .72rem; line-height: 1.15; color: var(--texto-3); }
.cartao-3d .selo-3d {
  position: absolute; top: .3rem; right: .3rem; font-size: .6rem; font-weight: 700;
  padding: 0 .3rem; border-radius: 999px; background: var(--superficie-2); color: var(--texto-3);
  border: 1px solid var(--borda);
}
.cartao-3d.e-animacao img { width: 5rem; height: 5rem; }
.cartao-3d .duracao-3d { font-size: .66rem; color: var(--texto-3); }
[data-bs-theme="dark"] .cartao-3d img { background: #e9eef5; }
@media (max-width: 575.98px) {
  .grade-3d { grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); max-height: 20rem; }
  .cartao-3d img, .cartao-3d .sem-miniatura { width: 3.6rem; height: 3.6rem; }
}

/* Personalizacao > Cores da tela de entrada, compacto (02/10/2026): grade de
   rotulos com o seletor de cor ao lado, no lugar de quatro fieldsets. */
.grade-de-cores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .9rem; }
.cor-compacta {
  display: flex; align-items: center; gap: .55rem; margin: 0; padding: .3rem .45rem; cursor: pointer;
  border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie-2);
  font-size: .85rem; line-height: 1.2;
}
.cor-compacta .form-control-color { width: 2.4rem; height: 2rem; padding: .15rem; flex: 0 0 auto; }
.cor-compacta-logo { grid-column: 1 / -1; }
.cor-compacta-logo .form-control { width: 6rem; flex: 0 0 auto; padding: .3rem .5rem; }
@media (max-width: 420px) { .grade-de-cores { grid-template-columns: 1fr; } }
/* Previa 3D mais baixa no celular (3/4 ocupava a tela inteira). */
@media (max-width: 575.98px) { .previa-3d { aspect-ratio: 4 / 3; } }
/* Tablet (coluna inteira, 576-991 px): 3/4 virava ~700x930; limita a altura. */
@media (min-width: 576px) and (max-width: 991.98px) { .previa-3d { aspect-ratio: auto; height: 22rem; } }
/* Celular: abas numa linha que rola de lado, em vez de 3 fileiras de botoes. */
@media (max-width: 575.98px) {
  .abas-3d { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
  .abas-3d .btn { flex: 0 0 auto; }
}

/* Cores do personagem 3D (08/10/2026): paleta de amostras redondas por grupo;
   "original" = sem tinta; a ultima e o conta-gotas (input type=color). */
.grupo-cor { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: .45rem 0; border-bottom: 1px dashed var(--borda); }
.grupo-cor:last-of-type { border-bottom: 0; }
.grupo-cor .rotulo-cor { flex: 0 0 11rem; font-size: .85rem; font-weight: 600; color: var(--texto-2); }
.paleta-cores { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.paleta-cores .amostra {
  width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--borda-forte, #c8d0da); padding: 0; cursor: pointer;
  background: var(--amostra, transparent); display: inline-grid; place-items: center; color: var(--texto-2); font-size: .85rem; position: relative;
}
.paleta-cores .amostra.original { background: var(--superficie-2, #f1f4f8); }
.paleta-cores .amostra.livre input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.paleta-cores .amostra.livre .bi { color: #fff; mix-blend-mode: difference; pointer-events: none; }
.paleta-cores .amostra:hover { transform: scale(1.12); }
.paleta-cores .amostra.ativa { border-color: var(--texto); box-shadow: 0 0 0 3px color-mix(in srgb, var(--texto) 25%, transparent); }
.cores-do-corpo { display: grid; gap: .25rem; padding: .5rem .75rem; border: 1px solid var(--borda); border-radius: 12px; }
.cores-do-corpo .grupo-cor { border-bottom: 0; padding: .25rem 0; }
.painel-3d > .grupo-cor { margin-bottom: .6rem; }