/* V3: estilos dos formulários (cadastro de cartão, marcas, contas) usados na intranet e no painel. Carregado depois de estilo.css. */

/* Logo da marca: imagem ou, sem logo, a sigla num círculo roxo. Tamanhos: .pequeno (18 px) e .grande (44 px). */
.logo-marca { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: contain; background: var(--papel); border: 1px solid var(--linha); }
.logo-sigla { display: inline-grid; place-items: center; background: var(--roxo); border-color: var(--roxo); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; }
.logo-marca.pequeno { width: 18px; height: 18px; font-size: 7px; }
.logo-marca.grande { width: 44px; height: 44px; font-size: 14px; }

/* Marca no cadastro: botões com o logo, um marcado. O rádio fica escondido; a faixa quebra a linha quando não cabe. */
.marcas { display: flex; flex-wrap: wrap; gap: 8px; }
.marca-opcao {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px 0 8px;
  background: var(--papel); color: var(--texto);
  border: 1.5px solid var(--linha); border-radius: 999px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.marca-opcao:has(input:checked) { border-color: var(--roxo); background: var(--roxo-suave); color: var(--roxo); }
.marca-opcao:has(input:focus-visible) { box-shadow: var(--foco); }

/* Ícone da forma de entrar dentro de uma "ficha" branca: as cores da marca aparecem também no botão marcado (fundo roxo). */
.metodo-icone { width: 26px; height: 26px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: #fff; color: var(--roxo); }
.metodo-icone svg { width: 16px; height: 16px; }

/* Cartão de conta (tipo que guarda contas): o texto de ajuda do bloco tem o mesmo espaço dos demais campos */
.bloco-conta > .ajuda { margin-bottom: 16px; }

/* Login que ainda não virou conta: só para ler, num quadro leve */
.login-atual { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--roxo-suave); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }

/* Onde está e de quem é: link, plataforma e dono do arquivo juntos, num quadro leve */
.bloco-onde { margin: 0 0 16px; padding: 14px 16px 2px; border: 1px solid var(--linha); border-radius: 16px; background: var(--fundo); }
/* Linha da plataforma: ícone de 24 px e o nome. Some enquanto o link não é um endereço completo. */
.plataforma-reconhecida { display: flex; align-items: center; gap: 10px; margin: -6px 0 16px; font-size: 14px; font-weight: 700; color: var(--texto); overflow-wrap: anywhere; }
.plataforma-reconhecida .icone-local { width: 24px; height: 24px; flex: none; }

/* Quem pode ver a senha: duas opções lado a lado (uma embaixo da outra no celular), com a descrição embaixo do nome */
.graus { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.grau-opcao {
  position: relative;
  display: flex; flex: 1 1 200px; flex-direction: column; gap: 2px;
  min-height: 44px; padding: 10px 14px;
  background: var(--papel); color: var(--texto);
  border: 1.5px solid var(--linha); border-radius: 14px;
  cursor: pointer;
}
.grau-opcao:has(input:checked) { border-color: var(--roxo); background: var(--roxo-suave); color: var(--roxo); }
.grau-opcao:has(input:focus-visible) { box-shadow: var(--foco); }
.grau-nome { font-size: 15px; font-weight: 800; }
.grau-opcao small { font-size: 13px; font-weight: 500; color: var(--suave); }

/* Outra cor: a pílula com o seletor de cores nativo (a roda) dentro */
.cor-livre input[type="color"] { width: 30px; height: 30px; flex: none; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.cor-livre input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.cor-livre input[type="color"]::-webkit-color-swatch { border: 2px solid var(--papel); border-radius: 50%; }
.cor-livre input[type="color"]::-moz-color-swatch { border: 2px solid var(--papel); border-radius: 50%; }

/* Grade de ícones: rola dentro da janela quando fica alta (são 52 ícones) */
.escolha-icones { max-height: 240px; overflow-y: auto; padding: 6px; }

/* Ícone e nome pequeno do cartão: quadro leve, como "Onde está e de quem é" */
.bloco-aparencia { margin: 0 0 16px; padding: 14px 16px 2px; border: 1px solid var(--linha); border-radius: 16px; background: var(--fundo); }
.aparencia-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 8px; }
/* A prévia tem o mesmo tamanho (44 px) e a mesma moldura do ícone da ficha */
.aparencia-previa { display: inline-flex; flex: none; }
.aparencia-previa .icone-local { width: 44px; height: 44px; padding: 6px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-sm); }
.aparencia-previa .icone-site { padding: 4px; }
.aparencia-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Descrição do cartão: caixa de texto com as mesmas bordas e o mesmo foco dos campos de uma linha */
.campo textarea { display: block; width: 100%; padding: 10px 12px; background: var(--papel); border: 1.5px solid var(--linha); border-radius: var(--raio-sm); font-size: 16px; line-height: 1.4; resize: vertical; }
.campo textarea:focus { outline: none; border-color: var(--roxo-medio); box-shadow: 0 0 0 3px rgba(90, 26, 134, 0.16); }
.campo-descricao > .ajuda { text-align: right; font-variant-numeric: tabular-nums; }