/* ============================================================================
   design.css — Design system do theVacilos                     [Fase 5 — 2026-09-27]
   ----------------------------------------------------------------------------
   Carregado DEPOIS do tema Canvas. Três camadas:
     1. Tokens (--tv-*): cores de base, raio, fonte. Valores padrão aqui; o tema
        ativo (criado pelo superadmin em /temas) sobrescreve via ?tv_tema_css.
     2. Ponte para o Canvas/Bootstrap: as variáveis --cnvs-* e --bs-* passam a
        ler os tokens, então os componentes do template mudam junto.
     3. Acabamento: bordas arredondadas, foco visível, rolagem, alvos de toque.
   Modo: <html data-modo="escuro|claro"> (padrão escuro). O modo claro também
   neutraliza as seções marcadas com .dark no HTML das páginas.
   ============================================================================ */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
	color-scheme: dark;
	--tv-raio: 16px;
	--tv-raio-sm: 10px;
	--tv-raio-lg: 22px;
	--tv-fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

	/* escuro "real": quase preto, com leve toque do matiz do tema */
	--tv-fundo: color-mix(in srgb, #09090c calc(100% - var(--tv-matiz-forca, 0%)), var(--tv-matiz, #6f5cc2));
	--tv-superficie: color-mix(in srgb, #121217 calc(100% - var(--tv-matiz-forca, 0%)), var(--tv-matiz, #6f5cc2));
	--tv-superficie-2: color-mix(in srgb, #1a1a21 calc(100% - var(--tv-matiz-forca, 0%)), var(--tv-matiz, #6f5cc2));
	--tv-borda: rgba(255, 255, 255, 0.09);
	--tv-texto: #ededf2;
	--tv-texto-2: #a3a3b2;
	--tv-sombra: 0 10px 30px rgba(0, 0, 0, 0.45);
	--tv-destaque-texto: #ffffff;
	--tv-ok: #22c55e;
	--tv-alerta: #f59e0b;
	--tv-erro: #ef4444;
}
html[data-modo="claro"] {
	color-scheme: light;
	--tv-fundo: color-mix(in srgb, #f4f4f7 calc(100% - var(--tv-matiz-forca, 0%) / 2), var(--tv-matiz, #6f5cc2));
	--tv-superficie: #ffffff;
	--tv-superficie-2: color-mix(in srgb, #ececf2 calc(100% - var(--tv-matiz-forca, 0%) / 2), var(--tv-matiz, #6f5cc2));
	--tv-borda: rgba(15, 15, 25, 0.1);
	--tv-texto: #16161d;
	--tv-texto-2: #565669;
	--tv-sombra: 0 10px 30px rgba(20, 20, 40, 0.12);
}

/* ---------- 2. Ponte Canvas / Bootstrap ----------------------------------- */
:root {
	--bs-border-radius: var(--tv-raio-sm);
	--bs-border-radius-sm: calc(var(--tv-raio-sm) * .7);
	--bs-border-radius-lg: var(--tv-raio);
	--bs-border-radius-xl: var(--tv-raio-lg);
	--bs-border-radius-xxl: calc(var(--tv-raio-lg) * 1.4);
	--bs-primary: var(--tv-destaque);
	--cnvs-themecolor: var(--tv-destaque);
	--bs-body-font-family: var(--tv-fonte);
	--cnvs-body-font: var(--tv-fonte);
	--cnvs-primary-font: var(--tv-fonte);
}
html:not([data-modo="claro"]) .dark,
html:not([data-modo="claro"]) body {
	--cnvs-contrast-bg: var(--tv-fundo);
	--cnvs-contrast-bg-offset: var(--tv-superficie);
	--cnvs-header-bg: var(--tv-superficie);
	--cnvs-header-sticky-bg: var(--tv-superficie);
	--cnvs-primary-menu-submenu-bg: var(--tv-superficie);
	--cnvs-footer-bg: var(--tv-superficie);
	--cnvs-section-bg: var(--tv-superficie);
	--bs-body-bg: var(--tv-fundo);
	--bs-body-color: var(--tv-texto);
	--bs-secondary-bg: var(--tv-superficie);
	--bs-tertiary-bg: var(--tv-superficie-2);
	--bs-border-color: var(--tv-borda);
}
/* Modo claro: as seções que o HTML marca como .dark voltam ao esquema claro do Canvas */
html[data-modo="claro"] .dark,
html[data-modo="claro"] body {
	--cnvs-contrast-bg: var(--tv-superficie);
	--cnvs-contrast-bg-offset: var(--tv-superficie-2);
	--cnvs-contrast-0: #fff;
	--cnvs-contrast-100: #f8f9fa;
	--cnvs-contrast-200: #e9ecef;
	--cnvs-contrast-300: #dee2e6;
	--cnvs-contrast-400: #ced4da;
	--cnvs-contrast-500: #adb5bd;
	--cnvs-contrast-600: #6c757d;
	--cnvs-contrast-700: #495057;
	--cnvs-contrast-800: #343a40;
	--cnvs-contrast-900: #212529;
	--cnvs-contrast-1000: #000;
	--cnvs-contrast-rgb: 0, 0, 0;
	--cnvs-invert-contrast-rgb: 255, 255, 255;
	--cnvs-heading-color: var(--tv-texto);
	--cnvs-header-bg: var(--tv-superficie);
	--cnvs-header-sticky-bg: var(--tv-superficie);
	--cnvs-primary-menu-submenu-bg: var(--tv-superficie);
	--cnvs-footer-bg: var(--tv-superficie-2);
	--cnvs-section-bg: var(--tv-superficie-2);
	--bs-body-bg: var(--tv-fundo);
	--bs-body-color: var(--tv-texto);
	--bs-link-color: var(--tv-destaque);
	--bs-border-color: var(--tv-borda);
	color: var(--tv-texto);
}
html[data-modo="claro"] .text-white:not(.btn):not(.button):not(.badge):not([class*="bg-"]):not(.tvh-manter) { color: var(--tv-texto) !important; }
html[data-modo="claro"] .text-light:not(.btn):not(.button):not(.badge):not([class*="bg-"]) { color: var(--tv-texto-2) !important; }
html[data-modo="claro"] .bg-dark:not(.tvh-manter) { background-color: var(--tv-superficie-2) !important; color: var(--tv-texto); }

body {
	background-color: var(--tv-fundo);
	color: var(--tv-texto);
	font-family: var(--tv-fonte);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
#header-wrap, body:not(.is-expanded-menu) .sticky-header #header-wrap { background-color: var(--tv-superficie) !important; }

/* ---------- 3. Acabamento ------------------------------------------------ */
.card, .modal-content, .dropdown-menu, .alert, .list-group, .toast, .offcanvas,
.form-control, .form-select, .input-group-text, .accordion, .accordion-item, .popover {
	border-radius: var(--tv-raio);
}
.form-control, .form-select, .input-group-text { border-radius: var(--tv-raio-sm); }
.card, .modal-content, .dropdown-menu { border-color: var(--tv-borda); }
.modal-content, .dropdown-menu { box-shadow: var(--tv-sombra); }
.button:not(.button-rounded):not(.rounded-pill):not(.button-circle):not(.button-reveal),
.btn:not(.rounded-pill):not(.rounded-circle):not(.btn-close) { border-radius: var(--tv-raio-sm); }
img.rounded, .rounded { border-radius: var(--tv-raio-sm) !important; }

:focus-visible { outline: 2px solid var(--tv-destaque); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--tv-destaque) 55%, transparent); color: #fff; }
html { scrollbar-color: color-mix(in srgb, var(--tv-texto) 25%, transparent) transparent; }
/* [2026-09-28] Antes: html { scroll-behavior: smooth } global — deixava a rolagem por
   script/teclado/barra "arrastada". Âncoras continuam suaves pelo próprio Canvas. */
html { scroll-behavior: auto; }

/* Mobile-first: textos de formulário em 16px evitam o zoom automático do iOS;
   alvos de toque com no mínimo 40px nos dispositivos de toque. */
@media (max-width: 767.98px) {
	input, select, textarea { font-size: 16px; }
}
@media (pointer: coarse) {
	.btn, .button, .menu-link { min-height: 40px; }
}

/* ---------- Alternador de modo (cabeçalho) -------------------------------- */
.tv-modo-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; margin: 0 6px; padding: 0;
	border: 1px solid var(--tv-borda); border-radius: 999px;
	background: var(--tv-superficie-2); color: var(--tv-texto);
	cursor: pointer; transition: transform .2s ease, background-color .2s ease;
}
.tv-modo-btn:hover { transform: rotate(-12deg) scale(1.05); }
.tv-modo-btn .tv-modo-sol { display: none; }
html[data-modo="claro"] .tv-modo-btn .tv-modo-lua { display: none; }
html[data-modo="claro"] .tv-modo-btn .tv-modo-sol { display: inline; }
/* alternador: no cabeçalho a partir de 380px; abaixo disso, flutuante acima do menu do app */
.tv-modo-flutuante { display: none; }
@media (max-width: 575.98px) {
	.tv-modo-btn { width: 30px; height: 30px; margin: 0; font-size: 13px; }
	#header .header-misc { flex-wrap: nowrap; }
}
@media (max-width: 379.98px) {
	.tv-modo-cabecalho { display: none !important; }
	.tv-modo-flutuante { display: inline-flex; position: fixed; left: 12px; bottom: 78px; z-index: 998; width: 38px; height: 38px; box-shadow: var(--tv-sombra); }
}

/* ---------- Moldura no modo claro (2026-09-28) --------------------------------
   Antes o cabeçalho, o rodapé e o menu inferior ficavam sempre escuros. Agora o
   modo claro é claro por inteiro: vidro branco no cabeçalho, rodapé na superfície
   do tema e o logo (desenhado em branco) invertido para preto. */
html[data-modo="claro"] #header-wrap,
html[data-modo="claro"] body:not(.is-expanded-menu) .sticky-header #header-wrap {
	/* sólido (sem backdrop-filter): o desfoque redesenhava a cada quadro da rolagem */
	background-color: var(--tv-superficie) !important;
	box-shadow: 0 1px 0 var(--tv-borda), 0 6px 20px rgba(30, 20, 70, .06);
}
html[data-modo="claro"] #header {
	--cnvs-header-bg: var(--tv-superficie); --cnvs-header-sticky-bg: var(--tv-superficie);
	--cnvs-primary-menu-color: var(--tv-texto); --cnvs-primary-menu-hover-color: var(--tv-destaque);
	--cnvs-primary-menu-active-color: var(--tv-destaque);
	--cnvs-primary-menu-submenu-bg: var(--tv-superficie); --cnvs-primary-menu-submenu-color: var(--tv-texto);
	--cnvs-primary-menu-submenu-hover-color: var(--tv-destaque);
	--cnvs-header-misc-icons-color: var(--tv-texto);
	color: var(--tv-texto);
}
html[data-modo="claro"] #header :is(.menu-link, .menu-link div, .header-misc-icon > a, .header-misc-icon i, #top-search-trigger, .top-cart-trigger) { color: var(--tv-texto) !important; }
html[data-modo="claro"] #header .sub-menu-container .menu-link { color: var(--tv-texto) !important; }
html[data-modo="claro"] #logo a img { filter: invert(1) brightness(.12); }
html[data-modo="claro"] #logo a .logo-default { display: none !important; }
html[data-modo="claro"] #logo a .logo-dark { display: flex !important; }
html[data-modo="claro"] :is(#footer, .app-menu) {
	background-color: var(--tv-superficie) !important; color: var(--tv-texto-2);
	--cnvs-footer-bg: var(--tv-superficie); --cnvs-contrast-rgb: 0, 0, 0;
}
html[data-modo="claro"] #footer :is(a, .text-white) { color: var(--tv-texto) !important; }
html[data-modo="claro"] #copyrights { background: transparent; color: var(--tv-texto-2); }
html[data-modo="claro"] .app-menu { box-shadow: 0 -6px 20px rgba(30, 20, 70, .08); }
html[data-modo="claro"] .app-menu .app-menu-link, html[data-modo="claro"] .app-menu .app-menu-link i { color: var(--tv-texto-2) !important; }
html[data-modo="claro"] .app-menu .app-menu-item.current .app-menu-link,
html[data-modo="claro"] .app-menu .app-menu-item.current .app-menu-link i { color: var(--tv-destaque) !important; }
html[data-modo="claro"] .app-menu.app-menu-style-2 .app-menu-item.current > .app-menu-link::before { background-color: color-mix(in srgb, var(--tv-destaque) 14%, transparent) !important; }

/* ---------- menu inferior do celular nas cores do tema [2026-09-30] ----------
   Antes ficava cinza do Bootstrap (#212529, classe .dark do tema Canvas) nos dois modos.
   Agora segue os tokens: fundo = superfície do tema (com leve transparência e desfoque),
   ícones = texto secundário, página atual = cor de destaque (ícone, faixa no topo e fundo). */
html[data-modo] body .app-menu {
	--cnvs-app-menu-bg-color: var(--tv-superficie);
	--cnvs-app-menu-color: var(--tv-texto-2);
	background-color: color-mix(in srgb, var(--tv-superficie) 94%, transparent) !important;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-top: 1px solid var(--tv-borda) !important;
	box-shadow: 0 -8px 24px color-mix(in srgb, #000 30%, transparent);
}
html[data-modo="claro"] body .app-menu { box-shadow: 0 -6px 20px rgba(30, 20, 70, .08); }
html[data-modo] body .app-menu .app-menu-item > .app-menu-link { background-color: transparent !important; }
html[data-modo] body .app-menu .app-menu-link,
html[data-modo] body .app-menu .app-menu-link i { color: var(--tv-texto-2) !important; transition: color .15s ease; }
html[data-modo] body .app-menu .app-menu-item:hover > .app-menu-link i { color: var(--tv-texto) !important; }
html[data-modo] body .app-menu .app-menu-item.current > .app-menu-link { background-color: color-mix(in srgb, var(--tv-destaque) 12%, transparent) !important; }
html[data-modo] body .app-menu .app-menu-item.current > .app-menu-link,
html[data-modo] body .app-menu .app-menu-item.current > .app-menu-link i { color: var(--tv-destaque) !important; }
html[data-modo] body .app-menu.app-menu-style-2 .app-menu-item:hover > .app-menu-link::before { background-color: var(--tv-borda) !important; }
html[data-modo] body .app-menu.app-menu-style-2 .app-menu-item.current > .app-menu-link::before { background-color: var(--tv-destaque) !important; }