/* Acabamento visual do Controle de Qualidade e Inovação (10/11/2026; pedido da dona: "deixa mais bonito, tá chocho e
   capenga"). Só apresentação, carregado por último: fundo com profundidade, cabeçalho de tela com presença, faixa de
   números viva, cartões com relevo sutil, tabelas legíveis, menu lateral elegante e microinterações curtas. Tokens do
   Nexus nos dois temas; a marca é o globo em rede do GEO3X (pin-sistema.png). */
:root { --vz-rapido: 160ms cubic-bezier(0.2, 0.7, 0.2, 1); --vz-sombra: 0 1px 2px rgba(10, 30, 40, 0.04), 0 6px 18px -10px rgba(10, 30, 40, 0.18); --vz-sombra-alta: 0 2px 4px rgba(10, 30, 40, 0.05), 0 16px 32px -14px rgba(10, 30, 40, 0.3); --vz-teal: #1fa39f; }
[data-theme=dark] { --vz-sombra: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 22px -12px rgba(0, 0, 0, 0.6); --vz-sombra-alta: 0 2px 6px rgba(0, 0, 0, 0.3), 0 18px 36px -14px rgba(0, 0, 0, 0.7); --vz-teal: #3cc7c0; }

/* ---------- fundo ---------- */
.cq-pagina { background: radial-gradient(1200px 520px at 100% -10%, color-mix(in srgb, var(--nx-teal-500) 9%, transparent), transparent 60%), radial-gradient(900px 420px at 0% 0%, color-mix(in srgb, var(--vz-teal) 6%, transparent), transparent 55%), var(--nx-bg); background-attachment: fixed; }
.cq-corpo { gap: 20px; padding: 26px 32px 56px; }

/* ---------- menu lateral ---------- */
.cq-rail { background: linear-gradient(180deg, #0a1c27 0%, #0c2532 46%, #0b2230 100%); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05); }
.cq-rail__topo { position: relative; }
.cq-rail__topo::after { position: absolute; right: 16px; bottom: 0; left: 16px; height: 1px; background: linear-gradient(90deg, transparent, rgba(127, 214, 207, 0.28), transparent); content: ""; }
.cq-rail__marca { padding: 22px 18px 16px; }
.cq-rail__marca span { color: #7fd6cf; letter-spacing: 0.12em; }
.cq-rail__nav { gap: 2px; padding: 12px 10px 14px; }
.cq-rail__grupo { margin-top: 8px; padding: 9px 10px; border-radius: 10px; color: #e3eef1; font-size: 12.4px; letter-spacing: 0.01em; transition: background-color var(--vz-rapido), color var(--vz-rapido); }
.cq-rail__grupo > .pi:first-child { display: grid; width: 24px; height: 24px; border-radius: 7px; background: rgba(255, 255, 255, 0.05); font-size: 12px; place-items: center; transition: background-color var(--vz-rapido), color var(--vz-rapido); }
.cq-rail__grupo--on > .pi:first-child { background: color-mix(in srgb, var(--vz-teal) 22%, transparent); color: #9ff0e9; }
.cq-rail__sub { margin: 2px 0 6px 21px; padding-left: 10px; border-left-color: rgba(127, 214, 207, 0.14); }
.cq-rail__item { position: relative; color: #a9bfc6; transition: background-color var(--vz-rapido), color var(--vz-rapido), transform var(--vz-rapido); }
.cq-rail__item:hover { transform: translateX(2px); }
.cq-rail__item--on { background: linear-gradient(90deg, color-mix(in srgb, var(--vz-teal) 26%, transparent), color-mix(in srgb, var(--vz-teal) 6%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vz-teal) 22%, transparent); color: #fff; }
.cq-rail__item--on::before { position: absolute; top: 8px; bottom: 8px; left: -11px; width: 3px; border-radius: 3px; background: var(--vz-teal); box-shadow: 0 0 10px var(--vz-teal); content: ""; }
.cq-rail__item--on .pi { color: #9ff0e9; }
.cq-rail__quem { margin: 10px 10px 16px; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); backdrop-filter: blur(6px); transition: border-color var(--vz-rapido), background-color var(--vz-rapido); }
.cq-rail__quem:hover { border-color: rgba(127, 214, 207, 0.35); }
.cq-avatar { background: linear-gradient(135deg, var(--vz-teal), var(--nx-teal-700)); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08); }
.cq-rail__recolher { transition: background-color var(--vz-rapido), color var(--vz-rapido); }

/* ---------- topo ---------- */
.cq-topo { min-height: 58px; padding: 9px 32px; border-bottom: 0; background: color-mix(in srgb, var(--nx-surface) 82%, transparent); box-shadow: 0 1px 0 var(--nx-line), 0 8px 24px -22px rgba(10, 30, 40, 0.5); backdrop-filter: saturate(1.4) blur(12px); }
.cq-topo::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--vz-teal) 45%, transparent) 30%, color-mix(in srgb, var(--nx-teal-500) 35%, transparent) 70%, transparent); content: ""; }
.cq-topo__tit b { font-size: 15px; letter-spacing: -0.01em; }
.cq-cliente .nx-select { border-radius: 10px; box-shadow: var(--vz-sombra); }
.cq-topo .nx-tag { border-radius: 999px; }

/* ---------- cabeçalho de tela ---------- */
.cq-cab { position: relative; isolation: isolate; overflow: hidden; align-items: center; padding: 22px 26px; border: 1px solid var(--nx-line); border-radius: 18px; background: linear-gradient(120deg, var(--nx-surface) 0%, var(--nx-surface) 55%, color-mix(in srgb, var(--vz-teal) 7%, var(--nx-surface)) 100%); box-shadow: var(--vz-sombra); }
.cq-cab::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--vz-teal), var(--nx-teal-600)); content: ""; }
.cq-cab::after { position: absolute; top: 50%; right: -26px; z-index: -1; width: 168px; aspect-ratio: 847 / 946; background: url("../comum/marca/pin-sistema.png") no-repeat center / contain; opacity: 0.07; transform: translateY(-50%) rotate(-8deg); content: ""; pointer-events: none; }
[data-theme=dark] .cq-cab::after { opacity: 0.1; }
.cq-cab h1 { margin: 0 0 6px; font-size: 25px; font-weight: 750; letter-spacing: -0.025em; line-height: 1.15; }
.cq-cab p { color: var(--nx-ink-2); font-size: 13.2px; line-height: 1.6; }
.cq-cab__acoes { position: relative; z-index: 1; }

/* ---------- faixa do cliente ---------- */
.cq-faixa-cliente { border-color: var(--nx-line); border-radius: 16px; background: linear-gradient(90deg, color-mix(in srgb, var(--vz-teal) 6%, var(--nx-surface)), var(--nx-surface) 45%); box-shadow: var(--vz-sombra); }
.cq-faixa-cliente__txt b { font-size: 17px; letter-spacing: -0.015em; }

/* ---------- faixa de números ---------- */
#app .mk-faixa:not(.mk-faixa--filtros) { gap: 12px; overflow: visible; border: 0; background: none; box-shadow: none; }
#app .mk-faixa:not(.mk-faixa--filtros) .mk-faixa__item { overflow: hidden; padding: 15px 18px 14px; border: 1px solid var(--nx-line); border-radius: 15px; background: var(--nx-surface); box-shadow: var(--vz-sombra); transition: transform var(--vz-rapido), box-shadow var(--vz-rapido), border-color var(--vz-rapido); }
#app .mk-faixa:not(.mk-faixa--filtros) .mk-faixa__item::after { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--mk-tom, color-mix(in srgb, var(--vz-teal) 60%, var(--nx-line))); opacity: 0.85; content: ""; }
#app .mk-faixa:not(.mk-faixa--filtros) a.mk-faixa__item:hover, #app .mk-faixa:not(.mk-faixa--filtros) button.mk-faixa__item:hover { border-color: var(--nx-line-2); box-shadow: var(--vz-sombra-alta); transform: translateY(-2px); }
#app .mk-faixa:not(.mk-faixa--filtros) .mk-faixa__valor { font-size: 28px; font-weight: 760; letter-spacing: -0.03em; line-height: 1.15; }
#app .mk-faixa:not(.mk-faixa--filtros) .mk-faixa__rot { font-size: 10px; letter-spacing: 0.13em; }

/* ---------- cartões ---------- */
#app .nx-card { border-color: var(--nx-line); border-radius: 16px; box-shadow: var(--vz-sombra); }
.cq-card__cab { padding: 16px 18px 10px; }
.cq-card__cab h2 { font-size: 15px; font-weight: 720; letter-spacing: -0.01em; }
.cq-card > :not(.cq-card__cab) { margin-inline: 18px; }
.cq-card > :last-child { margin-bottom: 16px; }
.gq-bloco__cab h2 { border-left-color: var(--vz-teal); font-size: 18px; font-weight: 750; letter-spacing: -0.02em; }

/* ---------- tabelas ---------- */
.cq-tabela th { padding: 11px 14px; border-bottom: 1px solid var(--nx-line); background: color-mix(in srgb, var(--nx-surface-2) 85%, var(--nx-surface)); color: var(--nx-ink-3); font-size: 10.2px; letter-spacing: 0.09em; }
.cq-tabela thead th:first-child { border-top-left-radius: 15px; }
.cq-tabela thead th:last-child { border-top-right-radius: 15px; }
.cq-tabela td { padding: 11px 14px; transition: background-color var(--vz-rapido); }
.cq-tabela tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--nx-surface-2) 55%, transparent); }
.cq-tabela tbody tr[data-abrir]:hover td, .cq-tabela tbody tr[data-st-conf]:hover td, .cq-tabela tbody tr[data-treino]:hover td { background: color-mix(in srgb, var(--vz-teal) 8%, var(--nx-surface)); }
.cq-tabela tbody tr[data-abrir] td:first-child, .cq-tabela tbody tr[data-st-conf] td:first-child { box-shadow: inset 3px 0 0 transparent; transition: box-shadow var(--vz-rapido); }
.cq-tabela tbody tr[data-abrir]:hover td:first-child, .cq-tabela tbody tr[data-st-conf]:hover td:first-child { box-shadow: inset 3px 0 0 var(--vz-teal); }
.cq-tabela code { padding: 2px 7px; border-radius: 6px; background: var(--nx-surface-2); color: var(--nx-ink-2); font-size: 11.6px; }
.cq-tabela-card { overflow: hidden; }

/* ---------- botões, filtros e vistas ---------- */
.nx-btn { transition: background-color var(--vz-rapido), border-color var(--vz-rapido), color var(--vz-rapido), box-shadow var(--vz-rapido), transform var(--vz-rapido); }
.nx-btn:active:not(:disabled) { transform: translateY(1px); }
.nx-btn--primary { border-color: transparent; background: linear-gradient(135deg, var(--vz-teal), var(--nx-teal-600)); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--vz-teal) 80%, transparent); color: #fff; }
.nx-btn--primary:hover:not(:disabled) { background: linear-gradient(135deg, color-mix(in srgb, var(--vz-teal) 88%, #fff), var(--nx-teal-600)); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--vz-teal) 90%, transparent); }
.cq-filtros .nx-chip { transition: background-color var(--vz-rapido), border-color var(--vz-rapido), color var(--vz-rapido); }
.cq-filtros .nx-chip--ativo { border-color: color-mix(in srgb, var(--vz-teal) 60%, var(--nx-line)); background: color-mix(in srgb, var(--vz-teal) 12%, var(--nx-surface)); color: var(--nx-ink); font-weight: 650; }
.pl-vistas, .gq-abas, .cq-cfg-abas { border-radius: 14px; box-shadow: var(--vz-sombra); scrollbar-width: none; }
.pl-vistas::-webkit-scrollbar { display: none; }
.pl-vista--on, .pl-vista--on:hover { background: linear-gradient(135deg, var(--nx-navy-800), var(--nx-teal-700)); color: #fff; box-shadow: 0 6px 14px -8px rgba(10, 30, 40, 0.6); }
[data-theme=dark] .pl-vista--on, [data-theme=dark] .pl-vista--on:hover { background: linear-gradient(135deg, var(--nx-teal-700), var(--nx-teal-600)); }
.pl-vista--on b { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* ---------- telas vazias e notas ---------- */
.mk-vazio, .cq-sem-produto { animation: vz-surge 260ms ease-out both; }
.cq-sem-produto > .pi { width: 58px; height: 58px; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--vz-teal) 22%, var(--nx-surface)), var(--nx-surface-2)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--vz-teal) 7%, transparent); color: var(--vz-teal); }
.cq-nota { padding: 10px 14px; border: 1px dashed var(--nx-line-2); border-radius: 12px; background: color-mix(in srgb, var(--nx-surface) 60%, transparent); }
@keyframes vz-surge { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- indicadores e gestão ---------- */
.iq-card { border-radius: 15px; box-shadow: var(--vz-sombra); }
.iq-card:hover { box-shadow: var(--vz-sombra-alta); }
.gq-hero, .iq-placar { box-shadow: 0 18px 40px -24px rgba(8, 30, 40, 0.75); }

/* ---------- foco visível ---------- */
.cq a:focus-visible, .cq button:focus-visible, .cq select:focus-visible, .cq input:focus-visible, .cq textarea:focus-visible, .cq [tabindex]:focus-visible { outline: 2px solid var(--vz-teal); outline-offset: 2px; }

@media (max-width: 860px) {
    .cq-corpo { padding: 18px 14px 40px; }
    .cq-topo { padding: 8px 14px; }
    .cq-cab { padding: 18px 18px; }
    .cq-cab h1 { font-size: 21px; }
    .cq-cab::after { width: 120px; right: -30px; }
}
@media (prefers-reduced-motion: reduce) { .cq *, .cq *::before, .cq *::after { animation: none !important; transition: none !important; } }
@media print { .cq-cab { border: 0; box-shadow: none; background: none; padding: 0; } .cq-cab::before, .cq-cab::after { display: none; } .cq-pagina { background: #fff; } }