/* ============================================================================
   cabecalho-rodape.css — acabamento do cabeçalho e do rodapé        [2026-10-02]
   ----------------------------------------------------------------------------
   1. Ícones do cabeçalho: uma caixa só (38×38, 36 no celular), mesmo eixo,
      mesmo espaço entre eles; hover em pílula igual ao do menu do perfil.
      Os .tvs-*/index.0.css antigos davam margens soltas (4, 10, 16 px) e o
      link em "inline" — aqui tudo é zerado e o espaço vem do gap do flex.
   2. Saldo da carteira (no lugar do antigo botão de tema), só logado.
   3. Modo claro/escuro (.tv-modo-alt): menu do perfil (com chave), menu ☰ do
      celular e rodapé. Quem troca é o tv-tema.js ([data-tv-alternar-modo]).
   4. Rodapé: separadores iguais, botão de tema e texto livre do mascote.
   Carregado depois de index.0.css. Prefixo html:not(#tvc):not(#tvc) #header
   (3 ids) vence os .tvs-*:not(#tv):not(#tv) (2 ids), inclusive os !important.
   Só tokens --tv-*: escuro e claro, todos os temas.
   ============================================================================ */

/* ---------- 1. Ícones do cabeçalho ----------------------------------------- */
html:not(#tvc):not(#tvc) #header .header-misc { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; }
html:not(#tvc):not(#tvc) #header .header-misc > .header-misc-icon { margin: 0 !important; padding: 0 !important; line-height: 0; }
/* o line-height 0 acima é só para a caixa do ícone; os menus que abrem dali (perfil,
   notificações, chat) voltam à altura de linha normal do site */
html:not(#tvc):not(#tvc) #header .header-misc > .header-misc-icon :is(.dropdown-menu, .top-cart-content, .dropdown-menu-end) { line-height: var(--bs-body-line-height, 1.5); }
html:not(#tvc):not(#tvc) #header .header-misc > .header-misc-icon > a {
	display: inline-flex !important; align-items: center; justify-content: center; position: relative;
	width: 38px; height: 38px; padding: 0; border-radius: 11px; line-height: 1;
	color: var(--tv-texto) !important; text-decoration: none !important;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
html:not(#tvc):not(#tvc) #header .header-misc > .header-misc-icon > a:hover,
html:not(#tvc):not(#tvc) #header .header-misc > .header-misc-icon > a:focus-visible,
html:not(#tvc):not(#tvc) #header .header-misc > .header-misc-icon > a[aria-expanded="true"] { background: var(--tv-hover, var(--tv-superficie-2)); }
html:not(#tvc):not(#tvc) #header .header-misc > .header-misc-icon > a:focus-visible { outline: 2px solid var(--tv-destaque); outline-offset: 1px; }
/* todos os desenhos no mesmo tamanho (busca, chat, sino) */
html:not(#tvc):not(#tvc) #header .header-misc > .header-misc-icon > a > i,
html:not(#tvc):not(#tvc) #header .header-misc .icon-wrapper > i { font-size: 18px !important; line-height: 1; margin: 0 !important; color: inherit; }
/* contadores (chat e notificações) no canto da caixa, não fora dela */
html:not(#tvc):not(#tvc) #header .header-misc .top-cart-number { top: 3px; right: 2px; left: auto; }
html:not(#tvc):not(#tvc) #header .header-misc .icon-wrapper > .badge-chat-pvt, html:not(#tvc):not(#tvc) #header .header-misc .icon-wrapper .badge-notification { top: 3px; right: 1px; }
/* foto do perfil: 32 px com anel na cor de destaque, centrada na mesma caixa */
html:not(#tvc):not(#tvc) #header .header-misc > .profile-image > a img {
	width: 32px !important; height: 32px !important; max-width: none; max-height: none; border-radius: 50%; object-fit: cover !important;
	box-shadow: 0 0 0 2px var(--tv-superficie), 0 0 0 3.5px color-mix(in srgb, var(--tv-destaque) 70%, transparent);
	transition: box-shadow .15s ease;
}
html:not(#tvc):not(#tvc) #header .header-misc > .profile-image > a:hover img,
html:not(#tvc):not(#tvc) #header .header-misc > .profile-image > a[aria-expanded="true"] img { box-shadow: 0 0 0 2px var(--tv-superficie), 0 0 0 3.5px var(--tv-alien, var(--tv-destaque)); }
html:not(#tvc):not(#tvc) #header .header-misc > .profile-image > a:hover,
html:not(#tvc):not(#tvc) #header .header-misc > .profile-image > a[aria-expanded="true"] { background: transparent; }
/* visitante: "ACESSAR" (imagem de texto) na mesma altura, com respiro dos lados */
html:not(#tvc):not(#tvc) #header .header-misc > .profile-image > a[href="#modal-login-form"] { width: auto; padding: 0 10px; }
html:not(#tvc):not(#tvc) #header .header-misc > .profile-image > a[href="#modal-login-form"] img { width: auto !important; height: 15px !important; border-radius: 0; box-shadow: none; }
/* menu do perfil: sai alinhado à direita da foto */
html:not(#tvc):not(#tvc) #header .header-misc > .profile-image .dropdown-menu { margin-top: 6px !important; }

/* ---------- 2. Saldo da carteira ------------------------------------------- */
html:not(#tvc):not(#tvc) #header .header-misc > .tv-saldo-cab { margin-right: 6px !important; }
html:not(#tvc):not(#tvc) #header .header-misc > .tv-saldo-cab > a.tv-saldo {
	width: auto; height: 34px; gap: 7px; padding: 0 13px 0 11px; border-radius: 999px;
	font: 700 13.5px/1 var(--tv-fonte, inherit); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap;
	background: color-mix(in srgb, var(--tv-alien, #35c43f) 9%, var(--tv-superficie-2));
	border: 1px solid color-mix(in srgb, var(--tv-alien, #35c43f) 32%, transparent);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
html:not(#tvc):not(#tvc) #header .header-misc > .tv-saldo-cab > a.tv-saldo > i { font-size: 15px !important; color: var(--tv-alien, #35c43f); }
html:not(#tvc):not(#tvc) #header .header-misc > .tv-saldo-cab > a.tv-saldo:hover,
html:not(#tvc):not(#tvc) #header .header-misc > .tv-saldo-cab > a.tv-saldo:focus-visible {
	background: color-mix(in srgb, var(--tv-alien, #35c43f) 16%, var(--tv-superficie-2));
	border-color: color-mix(in srgb, var(--tv-alien, #35c43f) 65%, transparent);
	box-shadow: 0 0 16px color-mix(in srgb, var(--tv-alien, #35c43f) 22%, transparent);
}
html:not(#tvc):not(#tvc) #header .header-misc > .tv-saldo-cab > a.tv-saldo.tv-saldo-neg { color: var(--tv-erro) !important; border-color: color-mix(in srgb, var(--tv-erro) 45%, transparent); }
html:not(#tvc):not(#tvc) #header .header-misc > .tv-saldo-cab > a.tv-saldo.tv-saldo-neg > i { color: var(--tv-erro); }

/* ---------- menu recolhido (< 992 px): cabeçalho com altura fixa -------------
   A altura vinha do respiro do ícone do perfil (13+14 px) e variava: 60 px logado,
   53 visitante, 37 no tablet. Agora 56 px em todos. */
@media (max-width: 991.98px) { html:not(#tvc):not(#tvc) #header .header-row { min-height: 56px; align-content: center; } }
/* logo: altura aqui (antes vinha inline do estilos.js e não deixava ajustar no celular) */
html:not(#tvc):not(#tvc) #header #logo img { height: 20px !important; width: auto; }
html:not(#tvc):not(#tvc) #header .header-misc { margin-left: 8px; }
/* ---------- 1/2 no celular: caixas de 36 px ------------------------------------ */
@media (max-width: 767.98px) {
	html:not(#tvc):not(#tvc) #header .header-misc { gap: 2px; }
	html:not(#tvc):not(#tvc) #header .header-misc > .header-misc-icon > a { width: 36px; height: 36px; border-radius: 10px; }
	html:not(#tvc):not(#tvc) #header .header-misc > .tv-saldo-cab { margin-right: 4px !important; }
	html:not(#tvc):not(#tvc) #header .header-misc > .tv-saldo-cab > a.tv-saldo { height: 32px; gap: 6px; padding: 0 10px 0 9px; font-size: 12.5px; }
	html:not(#tvc):not(#tvc) #header .header-misc > .tv-saldo-cab > a.tv-saldo > i { font-size: 14px !important; }
}
@media (max-width: 399.98px) {
	html:not(#tvc):not(#tvc) #header #logo img { height: 16px !important; }
	html:not(#tvc):not(#tvc) #header .header-misc > .header-misc-icon > a { width: 34px; }
	html:not(#tvc):not(#tvc) #header .header-misc > .tv-saldo-cab > a.tv-saldo { padding: 0 9px 0 8px; gap: 5px; }
}
@media (max-width: 379.98px) {
	html:not(#tvc):not(#tvc) #header .header-misc > .tv-saldo-cab > a.tv-saldo > i { display: none; }
	html:not(#tvc):not(#tvc) #header .header-misc { gap: 0; }
}

/* ---------- 3. Modo claro/escuro (.tv-modo-alt) ---------------------------- */
/* mostra a AÇÃO: no escuro "Modo claro" (sol); no claro "Modo escuro" (lua) */
.tv-modo-alt .tv-modo-lua, .tv-modo-alt .tv-modo-txt-escuro { display: none !important; }
html[data-modo="claro"] .tv-modo-alt .tv-modo-sol, html[data-modo="claro"] .tv-modo-alt .tv-modo-txt-claro { display: none !important; }
html[data-modo="claro"] .tv-modo-alt .tv-modo-lua { display: inline-block !important; }
html[data-modo="claro"] .tv-modo-alt .tv-modo-txt-escuro { display: inline !important; }
/* [2026-10-04 p22] o Canvas esconde todo <span> dentro de .menu-link (subtítulo de menu): no modo escuro o
   "Modo claro" do menu ☰ sumia e ficava só o sol. O texto da ação aparece sempre (o modo claro acima continua escondendo-o). */
.tv-modo-alt .tv-modo-txt-claro { display: inline !important; }

/* menu do perfil: mesmo item dos outros (universo.css §17) + chave à direita.
   Aqui o texto é fixo ("Modo claro") e a chave mostra se está ligado. */
html:not(#tvc):not(#tvc) #header .profile-image .dropdown-item.tv-modo-item { width: 100%; border: 0; text-align: left; cursor: pointer; font-family: inherit; line-height: inherit; }
html:not(#tvc):not(#tvc) #header .profile-image .dropdown-item.tv-modo-item .tv-modo-sol { display: inline-block !important; }
html:not(#tvc):not(#tvc) #header .profile-image .dropdown-item.tv-modo-item .tv-modo-txt-claro { display: inline !important; }
html:not(#tvc):not(#tvc) #header .profile-image .dropdown-item.tv-modo-item :is(.tv-modo-lua, .tv-modo-txt-escuro) { display: none !important; }
.tv-modo-chave {
	position: relative; flex: 0 0 auto; margin-left: auto; width: 30px; height: 17px; border-radius: 999px;
	background: var(--tv-superficie-2); border: 1px solid var(--tv-borda); transition: background-color .2s ease, border-color .2s ease;
}
.tv-modo-chave::after {
	content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%;
	background: var(--tv-texto-2); transition: transform .2s ease, background-color .2s ease;
}
html[data-modo="claro"] .tv-modo-chave { background: var(--tv-destaque); border-color: transparent; }
html[data-modo="claro"] .tv-modo-chave::after { transform: translateX(13px); background: #fff; }

/* menu ☰ do celular: ícone + texto como os outros itens */
#header .tv-menu-modo .menu-link > div { display: inline-flex; align-items: center; gap: 8px; }
#header .tv-menu-modo .menu-link i { width: 16px; text-align: center; }

/* ---------- 3b. Página atual no menu [2026-10-04] -------------------------
   index.php marca o <li> da página aberta com .current (tv_menu_atual em lib/functions.php).
   Hub/CS2/Jogos/Financeiro ficam marcados quando a página está dentro deles. */
html:not(#tvc):not(#tvc) #header .primary-menu .menu-item.current > .menu-link,
html:not(#tvc):not(#tvc) #header .primary-menu .menu-item.current > .menu-link > div,
html:not(#tvc):not(#tvc) #header .primary-menu .menu-item.current > .menu-link i { color: var(--tv-destaque) !important; }
@media (min-width: 992px) {
	html:not(#tvc):not(#tvc) #header .primary-menu > .menu-container > .menu-item.current > .menu-link > div {
		text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 9px;
		text-decoration-color: var(--tv-destaque); text-decoration-skip-ink: none;
	}
}
html:not(#tvc):not(#tvc) #header .primary-menu .sub-menu-container .menu-item.current > .menu-link { font-weight: 700; background: color-mix(in srgb, var(--tv-destaque) 10%, transparent); border-radius: 8px; }
@media (max-width: 991.98px) {
	html:not(#tvc):not(#tvc) #header .primary-menu > .menu-container > .menu-item.current > .menu-link { box-shadow: inset 3px 0 0 var(--tv-destaque); padding-left: 12px; }
}

/* ---------- 4. Rodapé ------------------------------------------------------ */
html:not(#tvc):not(#tvc) #footer .tv-rodape-links { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; row-gap: 6px; }
html:not(#tvc):not(#tvc) #footer .tv-rodape-links > a { margin: 0 !important; }
.tv-rodape-sep { margin: 0 10px; opacity: .5; }
.tv-rodape-modo {
	display: inline-flex; align-items: center; gap: 7px; height: 30px; margin-left: 16px; padding: 0 12px; cursor: pointer;
	font: 600 12.5px/1 var(--tv-fonte, inherit); color: var(--tv-texto-2); background: transparent;
	border: 1px solid var(--tv-borda); border-radius: 999px; transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.tv-rodape-modo:hover, .tv-rodape-modo:focus-visible { color: var(--tv-texto); border-color: color-mix(in srgb, var(--tv-destaque) 60%, var(--tv-borda)); background: var(--tv-destaque-suave, transparent); }
.tv-rodape-modo:focus-visible { outline: 2px solid var(--tv-destaque); outline-offset: 2px; }
@media (max-width: 991.98px) { html:not(#tvc):not(#tvc) #footer .tv-rodape-links { justify-content: center; } }
/* o mascote fica parado no canto de baixo à esquerda (fixo, ~84 px): o texto do rodapé começa depois dele
   nas larguras em que o container encosta na borda. Container do Bootstrap: 960 / 1140 / 1320 px. */
@media (min-width: 992px) and (max-width: 1199.98px) { #footer .tv-rodape-copy { display: inline-block; padding-left: max(0px, calc(84px - (100vw - 960px) / 2)); } }
@media (min-width: 1200px) and (max-width: 1399.98px) { #footer .tv-rodape-copy { display: inline-block; padding-left: max(0px, calc(84px - (100vw - 1140px) / 2)); } }
@media (min-width: 1400px) { #footer .tv-rodape-copy { display: inline-block; padding-left: max(0px, calc(84px - (100vw - 1320px) / 2)); } }

@media (prefers-reduced-motion: reduce) {
	.tv-modo-chave, .tv-modo-chave::after, .tv-rodape-modo { transition: none; }
}

/* [2026-10-03 8bit] chave "Botão Editar" do menu do perfil (só superadmin, editar-chave.js). Mesmo desenho da chave do
   modo, mas o estado vem do aria-pressed do próprio botão (não do modo claro/escuro). */
.tv-ed-chave {
	position: relative; flex: 0 0 auto; margin-left: auto; width: 30px; height: 17px; border-radius: 999px;
	background: var(--tv-superficie-2); border: 1px solid var(--tv-borda); transition: background-color .2s ease, border-color .2s ease;
}
.tv-ed-chave::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--tv-texto-2); transition: transform .2s ease, background-color .2s ease; }
.tv-ed-item[aria-pressed="true"] .tv-ed-chave { background: var(--tv-destaque); border-color: transparent; }
.tv-ed-item[aria-pressed="true"] .tv-ed-chave::after { transform: translateX(13px); background: #fff; }
@media (prefers-reduced-motion: reduce) { .tv-ed-chave, .tv-ed-chave::after { transition: none; } }

/* [2026-10-03 ab] "Acessar" (imagem branca) some no modo claro: lá entra a mesma arte em preto, como o logo.
   Arte: lib/config/img/acessar-claro.png (gerada a partir de arquivos/imagens/acessar.png, sem mexer no original). */
#header .tv-acessar-claro { display: none !important; }
html[data-modo="claro"] #header .tv-acessar-escuro { display: none !important; }
html[data-modo="claro"] #header .tv-acessar-claro { display: inline-block !important; }