/* ============================================================================
   formularios.css — formulários do site inteiro seguindo o tema      [2026-10-03 w]
   ----------------------------------------------------------------------------
   Campos, rótulos, grupos (olhinho da senha, "Procurar"), caixas de seleção,
   Sim/Não e botões de envio passam a usar os tokens --tv-* (design.css, temas
   do site em /temas e temas completos da Loja em loja-temas.css). Então qualquer
   tema — escuro ou claro — recolore os formulários sozinho.
   Só aparência (nada de regra, nada de JS). Carregado pelo index.php DEPOIS do
   design.css e do index.0.css. Prefixo html:not(#tvf): vence o Canvas/Bootstrap
   e os CSS antigos das páginas sem !important (os estilos inline tvs-* continuam
   valendo, como antes).
   Fora daqui, de propósito (têm visual próprio):
     • página play (tema do jogo)        • .curr-box (valores do extrato/transferir)
     • .border-form-control (comentários) • .top-search-form (busca do cabeçalho)
     • .tvl-input (Loja)
   ============================================================================ */

:root {
	--tvf-campo: color-mix(in srgb, var(--tv-superficie-2, #1a1a21) 55%, var(--tv-fundo, #09090c));
	--tvf-campo-foco: color-mix(in srgb, var(--tvf-campo) 92%, var(--tv-destaque, #6f5cc2));
	--tvf-borda: color-mix(in srgb, var(--tv-texto, #ededf2) 13%, transparent);
	--tvf-borda-forte: color-mix(in srgb, var(--tv-texto, #ededf2) 24%, transparent);
	--tvf-anel: 0 0 0 3px color-mix(in srgb, var(--tv-destaque, #6f5cc2) 24%, transparent);
	--tvf-rotulo: color-mix(in srgb, var(--tv-texto, #ededf2) 82%, var(--tv-texto-2, #a3a3b2));
	--tvf-raio: var(--tv-raio-sm, 10px);
}
html[data-modo="claro"] {
	--tvf-campo: var(--tv-superficie, #fff);
	--tvf-campo-foco: var(--tv-superficie, #fff);
	--tvf-borda: color-mix(in srgb, var(--tv-texto, #16161d) 16%, transparent);
	--tvf-borda-forte: color-mix(in srgb, var(--tv-texto, #16161d) 30%, transparent);
}

/* ---------- 1. Campos ------------------------------------------------------- */
html:not(#tvf) body:not([data-tvpg="play"]) :is(.form-control, .form-select):not(.border-form-control):not(.form-control-plaintext):not(.curr-box *):not(.top-search-form *) {
	background-color: var(--tvf-campo);
	color: var(--tv-texto);
	border: 1px solid var(--tvf-borda);
	border-radius: var(--tvf-raio);
	box-shadow: none;
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
/* tamanho padrão (os compactos .form-control-sm mantêm o tamanho deles) */
html:not(#tvf) body:not([data-tvpg="play"]) :is(.form-control, .form-select):not(.form-control-sm):not(.form-select-sm):not(.border-form-control):not(.form-control-plaintext):not(.curr-box *):not(.top-search-form *) {
	min-height: 46px; padding: 10px 14px; font-size: 1rem; line-height: 1.4;
}
html:not(#tvf) body:not([data-tvpg="play"]) textarea.form-control:not(.border-form-control) { min-height: 110px; line-height: 1.55; resize: vertical; }
html:not(#tvf) body:not([data-tvpg="play"]) .form-select:not(.form-select-sm) { padding-right: 40px; }
html:not(#tvf) body:not([data-tvpg="play"]) :is(.form-control, .form-select):not(.border-form-control):not(.curr-box *):not(.top-search-form *):hover:not(:focus):not(:disabled) { border-color: var(--tvf-borda-forte); }
html:not(#tvf) body:not([data-tvpg="play"]) :is(.form-control, .form-select):not(.border-form-control):not(.curr-box *):not(.top-search-form *):focus {
	background-color: var(--tvf-campo-foco); color: var(--tv-texto); border-color: var(--tv-destaque); box-shadow: var(--tvf-anel); outline: none;
}
html:not(#tvf) body:not([data-tvpg="play"]) .form-control:not(.border-form-control)::placeholder { color: var(--tv-texto-2); opacity: .75; }
html:not(#tvf) body:not([data-tvpg="play"]) :is(.form-control, .form-select):not(.border-form-control):not(.curr-box *):disabled,
html:not(#tvf) body:not([data-tvpg="play"]) .form-control[readonly]:not([data-tv-focus]):not(.custom-file-text):not(.border-form-control):not(.curr-box *) {
	background-color: color-mix(in srgb, var(--tvf-campo) 60%, transparent); color: var(--tv-texto-2); border-style: dashed; cursor: default; opacity: 1;
}
/* preenchimento automático do navegador sem o fundo amarelo/azul */
html:not(#tvf) body:not([data-tvpg="play"]) .form-control:not(.border-form-control):-webkit-autofill {
	-webkit-text-fill-color: var(--tv-texto); caret-color: var(--tv-texto);
	-webkit-box-shadow: 0 0 0 1000px var(--tvf-campo) inset; transition: background-color 9999s ease 0s;
}
html:not(#tvf) body:not([data-tvpg="play"]) select.form-control option, html:not(#tvf) .form-select option { background-color: var(--tv-superficie); color: var(--tv-texto); }

/* ---------- 2. Rótulos e textos de ajuda ---------------------------------- */
html:not(#tvf) body:not([data-tvpg="play"]) form :is(.form-group, [class*="col-"]) > label:not(.btn):not(.form-check-label):not([class*="tvl-"]),
html:not(#tvf) body:not([data-tvpg="play"]) .form-label {
	display: inline-block; margin-bottom: 6px; font-size: .84rem; font-weight: 600; letter-spacing: .01em; text-transform: none; color: var(--tvf-rotulo);
}
html:not(#tvf) body:not([data-tvpg="play"]) form :is(.form-text, small.text-muted) { display: block; margin-top: 6px; font-size: .78rem; color: var(--tv-texto-2) !important; }

/* ---------- 3. Grupos: campo + botão (olhinho da senha, Procurar) --------- */
html:not(#tvf) body:not([data-tvpg="play"]) .input-group { border-radius: var(--tvf-raio); transition: box-shadow .18s ease; }
html:not(#tvf) body:not([data-tvpg="play"]) .input-group.toggle-password { flex-wrap: nowrap; }
html:not(#tvf) body:not([data-tvpg="play"]) .input-group:focus-within { box-shadow: var(--tvf-anel); }
html:not(#tvf) body:not([data-tvpg="play"]) .input-group > .form-control:focus { box-shadow: none; }
html:not(#tvf) body:not([data-tvpg="play"]) .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
html:not(#tvf) body:not([data-tvpg="play"]) .input-group > :is(.btn, .input-group-text) {
	display: inline-flex; align-items: center; justify-content: center; min-width: 48px; padding: 0 14px;
	background-color: var(--tvf-campo); color: var(--tv-texto-2);
	border: 1px solid var(--tvf-borda) !important;   /* !important: o tvs-1a514d82 vira estilo inline cinza fixo */
	border-radius: 0 var(--tvf-raio) var(--tvf-raio) 0; box-shadow: none;
	transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
html:not(#tvf) body:not([data-tvpg="play"]) .input-group > :is(.btn, .input-group-text):first-child:not(:last-child) { border-radius: var(--tvf-raio) 0 0 var(--tvf-raio); }
html:not(#tvf) body:not([data-tvpg="play"]) .input-group > .btn:hover { color: var(--tv-texto); background-color: color-mix(in srgb, var(--tv-destaque) 12%, var(--tvf-campo)); }
html:not(#tvf) body:not([data-tvpg="play"]) .input-group:focus-within > :is(.form-control, .btn, .input-group-text) { border-color: var(--tv-destaque) !important; }

/* campo de arquivo do site (configurações e editar perfil): texto + "Procurar" */
html:not(#tvf) body:not([data-tvpg="play"]) .custom-file-input-group { border-radius: var(--tvf-raio); }
html:not(#tvf) body:not([data-tvpg="play"]) .custom-file-input-group > .custom-file-text { border-radius: var(--tvf-raio) 0 0 var(--tvf-raio); border-right: 0; cursor: pointer; color: var(--tv-texto-2); }
html:not(#tvf) body:not([data-tvpg="play"]) .custom-file-input-group > .custom-file-btn {
	min-width: 112px; padding: 0 18px; border: 1px solid var(--tvf-borda); border-radius: 0 var(--tvf-raio) var(--tvf-raio) 0;
	background: color-mix(in srgb, var(--tv-destaque) 14%, var(--tvf-campo)); color: var(--tv-texto); font-weight: 600;
	transition: background-color .18s ease, border-color .18s ease;
}
html:not(#tvf) body:not([data-tvpg="play"]) .custom-file-input-group:hover > * { border-color: var(--tvf-borda-forte); }
html:not(#tvf) body:not([data-tvpg="play"]) .custom-file-input-group > .custom-file-btn:hover { background: color-mix(in srgb, var(--tv-destaque) 26%, var(--tvf-campo)); }
html:not(#tvf) body:not([data-tvpg="play"]) .preview-container-box {
	padding: 16px; margin-bottom: 10px; border: 1px dashed var(--tvf-borda-forte); border-radius: var(--tvf-raio);
	background: radial-gradient(60% 80% at 50% 40%, color-mix(in srgb, var(--tv-destaque) 10%, transparent), transparent 70%), var(--tvf-campo);
}
html:not(#tvf) body:not([data-tvpg="play"]) .preview-container-box img.img-thumbnail { background: transparent; border: 1px solid var(--tvf-borda); border-radius: var(--tvf-raio); }

/* ---------- 4. Caixas de seleção, rádios e Sim/Não ------------------------ */
html:not(#tvf) input:is([type="checkbox"], [type="radio"]) { accent-color: var(--tv-destaque); }
html:not(#tvf) body:not([data-tvpg="play"]) .form-check-input { width: 1.15em; height: 1.15em; margin-top: .15em; background-color: var(--tvf-campo); border: 1px solid var(--tvf-borda-forte); cursor: pointer; }
html:not(#tvf) body:not([data-tvpg="play"]) .form-check-input:checked { background-color: var(--tv-destaque); border-color: var(--tv-destaque); }
html:not(#tvf) body:not([data-tvpg="play"]) .form-check-input:focus { border-color: var(--tv-destaque); box-shadow: var(--tvf-anel); }
html:not(#tvf) body:not([data-tvpg="play"]) .form-check-label { color: var(--tv-texto); font-size: .88rem; line-height: 1.45; cursor: pointer; }
html:not(#tvf) body:not([data-tvpg="play"]) .form-check-label a { color: var(--tv-destaque); text-decoration: underline; text-underline-offset: 2px; }
/* Sim/Não (btn-check) */
html:not(#tvf) body:not([data-tvpg="play"]) .btn-check + .btn-outline-secondary {
	min-height: 42px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600;
	color: var(--tv-texto-2); background-color: var(--tvf-campo); border-color: var(--tvf-borda);
}
html:not(#tvf) body:not([data-tvpg="play"]) .btn-check + .btn-outline-secondary:hover { color: var(--tv-texto); background-color: color-mix(in srgb, var(--tv-destaque) 10%, var(--tvf-campo)); }
html:not(#tvf) body:not([data-tvpg="play"]) .btn-check:checked + .btn-outline-secondary { color: var(--tv-destaque-texto, #fff); background-color: var(--tv-destaque); border-color: var(--tv-destaque); }
html:not(#tvf) body:not([data-tvpg="play"]) .btn-check:focus-visible + .btn-outline-secondary { box-shadow: var(--tvf-anel); }

/* ---------- 5. Botões de envio (os "button button-3d" dos formulários) ---- */
html:not(#tvf) body:not([data-tvpg="play"]) form :is(.button.button-3d, .button.bg-alt):not([class*="button-red"]):not(.button-danger):not(.button-dark):not(.button-light):not(.button-border):not(.button-mini):not(.button-small) {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px !important; margin: 4px 0 0;
	background: var(--tv-destaque) !important; color: var(--tv-destaque-texto, #fff) !important; text-shadow: none;
	border: 0 !important; border-radius: var(--tvf-raio) !important;
	box-shadow: 0 3px 0 color-mix(in srgb, var(--tv-destaque) 62%, #000), 0 8px 18px color-mix(in srgb, var(--tv-destaque) 22%, transparent);
	font-weight: 600; letter-spacing: .01em; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease;
}
html:not(#tvf) body:not([data-tvpg="play"]) form :is(.button.button-3d, .button.bg-alt):not([class*="button-red"]):not(.button-danger):not(.button-dark):not(.button-light):not(.button-border):not(.button-mini):not(.button-small):hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
html:not(#tvf) body:not([data-tvpg="play"]) form :is(.button.button-3d, .button.bg-alt):not([class*="button-red"]):not(.button-danger):not(.button-dark):not(.button-light):not(.button-border):not(.button-mini):not(.button-small):active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in srgb, var(--tv-destaque) 62%, #000); }
html:not(#tvf) body:not([data-tvpg="play"]) form :is(.button.button-3d, .button.bg-alt):disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.25); transform: none; }

/* separadores das páginas de formulário */
html:not(#tvf) body:not([data-tvpg="play"]) #content .line { border-color: var(--tvf-borda); }

/* ---------- 6. Configurações: seções organizadas ------------------------- */
html:not(#tvf) body[data-tvpg="configuracoes"] #canvas-TabContent h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 700; letter-spacing: -.01em; }
html:not(#tvf) body[data-tvpg="configuracoes"] #canvas-TabContent h2::before { content: ""; flex: 0 0 auto; width: 4px; height: 1.05em; border-radius: 4px; background: var(--tv-faixa, var(--tv-destaque)); }
html:not(#tvf) body[data-tvpg="configuracoes"] #canvas-TabContent .line { margin-top: 22px !important; margin-bottom: 26px !important; border-top: 1px solid var(--tvf-borda); }
@media (max-width: 575.98px) {
	/* celular: os pares de campos (senha / confirmar, CPF / nascimento…) um embaixo do outro */
	html:not(#tvf) body:is([data-tvpg="configuracoes"], [data-tvpg="u"]) form > .col-6 { flex: 0 0 100%; max-width: 100%; }
}
/* opção de superadmin: botão Editar nos perfis (editar-chave.js) */
.tvf-opcao { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid var(--tvf-borda); border-radius: var(--tv-raio, 16px); background: var(--tvf-campo); }
.tvf-opcao-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tvf-opcao-txt b { color: var(--tv-texto); font-size: .95rem; }
.tvf-opcao-txt small { color: var(--tv-texto-2); font-size: .8rem; line-height: 1.45; }
.tvf-selo { align-self: flex-start; padding: 2px 8px; border-radius: 999px; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--tv-destaque); background: color-mix(in srgb, var(--tv-destaque) 14%, transparent); }
.tvf-chave { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 6px 0 14px; border: 1px solid var(--tvf-borda); border-radius: 999px; background: var(--tv-superficie); color: var(--tv-texto-2); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: border-color .18s ease, color .18s ease; }
.tvf-chave:hover { border-color: var(--tvf-borda-forte); color: var(--tv-texto); }
.tvf-chave-on { display: none; }
.tvf-chave[aria-pressed="true"] { color: var(--tv-texto); }
.tvf-chave[aria-pressed="true"] .tvf-chave-on { display: inline; }
.tvf-chave[aria-pressed="true"] .tvf-chave-off { display: none; }
.tvf-chave-trilho { position: relative; width: 40px; height: 24px; border-radius: 999px; background: color-mix(in srgb, var(--tv-texto) 16%, transparent); transition: background-color .2s ease; }
.tvf-chave-trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .2s ease; }
.tvf-chave[aria-pressed="true"] .tvf-chave-trilho { background: var(--tv-destaque); }
.tvf-chave[aria-pressed="true"] .tvf-chave-trilho::after { transform: translateX(16px); }
@media (max-width: 575.98px) { .tvf-opcao { flex-direction: column; align-items: stretch; } .tvf-chave { align-self: flex-start; } }

@media (prefers-reduced-motion: reduce) {
	html:not(#tvf) body :is(.form-control, .form-select, .input-group, .button, .tvf-chave, .tvf-chave-trilho, .tvf-chave-trilho::after) { transition: none !important; }
	html:not(#tvf) body form .button:hover { transform: none !important; }
}