/* ═══════════════════════════════════════════════════════════════════════
   Finitya — folha de estilo única do sistema
   ═══════════════════════════════════════════════════════════════════════

   Todo CSS próprio do Finitya fica aqui. Bibliotecas de terceiros
   (theme.min.css, Feather, FullCalendar, Swiper...) continuam em arquivos
   próprios e são carregadas ANTES deste.

   Escopo
   ──────
   Este arquivo é carregado por todos os templates. Para que o CSS de um
   template ou de uma tela não vaze para os outros, cada seção é restrita
   pela classe do <html>:

     tpl-private  template.php (área logada, desktop)
     tpl-mobile   template-mobile.php (área logada, celular)
     tpl-pdv      template-pdv.php
     tpl-setup    setup.php
     tpl-public   public/template.php (login, pré-cadastro...)
     tpl-site     public/site.php (site institucional)
     tpl-doc      public/doc.php (documentação)
     tpl-suporte  private/suporte/shell.php (casca do modo suporte)
     pg-<pasta>-<view>  a tela atual, gerada no Controller::loadTemplate
                        (ex.: pg-public-login-index)

   O escopo usa :where(), que tem especificidade ZERO. As regras continuam
   disputando com o tema e entre si exatamente como antes da unificação.
   Não trocar por "html.tpl-private .x": isso aumenta a especificidade e
   muda quem vence em várias telas.

   Exceção: CSS que depende de dado do banco (cores do tema da empresa e o
   CSS extra cadastrado por ela) continua em <style id="tema-ui-vars"> no
   template, só com as variáveis. As regras que usam essas variáveis
   estão na seção "Tema da empresa", abaixo.

   Depois de alterar este arquivo, subir o APP_VERSION no .env do servidor
   (cache-busting do ?v.).
   ═══════════════════════════════════════════════════════════════════════ */

/* @import precisa vir antes de qualquer regra, senão o navegador o ignora.
   Fonte das telas de login e do pré-cadastro. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ─── Tema da empresa (área logada, desktop) ───────────────────────────
   As variáveis --tui-* vêm do tema ativo da empresa e são impressas no
   <style id="tema-ui-vars"> do template.php. Cada campo preenchido no
   tema liga uma classe no <html> (tui-bg, tui-card...); campo vazio não
   liga a classe e a regra correspondente não vale, igual a antes, quando
   o PHP só imprimia a regra se o campo existisse. */
:where(html.tui-bg) body { background-color: var(--tui-bg) !important; }
:where(html.tui-texto) body { color: var(--tui-text) !important; }
:where(html.tui-fonte-tam) body { font-size: var(--tui-font-size); }
:where(html.tui-fonte) body { font-family: var(--tui-font-family), sans-serif !important; }

:where(html.tui-card) .card { background-color: var(--tui-card-bg) !important; }
:where(html.tui-borda) .card { border-color: var(--tui-border) !important; }
:where(html.tui-radius) .card { border-radius: var(--tui-radius) !important; }

:where(html.tui-primaria) .btn-primary {
    background-color: var(--tui-primary) !important;
    border-color: var(--tui-primary) !important;
}
:where(html.tui-primaria) .btn-primary:hover { filter: brightness(1.12); }
:where(html.tui-primaria) .text-primary { color: var(--tui-primary) !important; }
:where(html.tui-primaria) .bg-primary { background-color: var(--tui-primary) !important; }
:where(html.tui-primaria) .border-primary { border-color: var(--tui-primary) !important; }
:where(html.tui-primaria) .badge.bg-primary { background-color: var(--tui-primary) !important; }
:where(html.tui-primaria) a { color: var(--tui-primary); }
:where(html.tui-acento) a:hover { color: var(--tui-accent); }

/* ── Tema escuro: superfícies com cor fixa no HTML ──────────────────────
   O Bootstrap 5.3 já escurece seus componentes pelo data-bs-theme,
   mas estes pontos têm a cor escrita direto no markup (style inline
   ou CSS local) e não acompanhariam. Precisa de !important para
   vencer o atributo style. */

/* Barra superior */
:where(html.tui-escuro) .navbar-default {
    background-color: var(--tui-card-bg) !important;
    border-bottom: 1px solid var(--tui-border) !important;
}

/* Busca global e painel de atalhos */
:where(html.tui-escuro) #buscaGlobalModal,
:where(html.tui-escuro) #painelAtalhosModal {
    background: var(--tui-card-bg) !important;
    border: 1px solid var(--tui-border);
}

:where(html.tui-escuro) .bg-result-item { color: var(--tui-text) !important; }
:where(html.tui-escuro) .bg-result-item:hover { background: rgba(255, 255, 255, .06) !important; }

:where(html.tui-escuro) .bg-badge,
:where(html.tui-escuro) #buscaGlobalModal kbd,
:where(html.tui-escuro) #painelAtalhosModal kbd {
    background: rgba(255, 255, 255, .08) !important;
    border-color: var(--tui-border) !important;
    color: #cbd5e1 !important;
}

:where(html.tui-escuro) #buscaGlobalOverlay { background: rgba(0, 0, 0, .6) !important; }

/* Divisórias internas desses painéis. As divisórias que eram style="..."
   viraram classes u-* (fase 3); o [style*=...] fica para as que sobraram. */
:where(html.tui-escuro) #buscaGlobalModal [style*="border-bottom"],
:where(html.tui-escuro) #buscaGlobalModal [style*="border-top"],
:where(html.tui-escuro) #painelAtalhosModal [style*="border-bottom"],
:where(html.tui-escuro) #painelAtalhosModal [style*="border-top"],
:where(html.tui-escuro) #buscaGlobalModal .u-27bda45,
:where(html.tui-escuro) #painelAtalhosModal .u-27bda45,
:where(html.tui-escuro) #buscaGlobalModal .u-2e09ef7,
:where(html.tui-escuro) #painelAtalhosModal .u-2e09ef7,
:where(html.tui-escuro) #buscaGlobalModal .u-34fe053,
:where(html.tui-escuro) #painelAtalhosModal .u-34fe053,
:where(html.tui-escuro) #buscaGlobalModal .u-bdb-1px-solid-dee2e6-fsh-0-p-12px-16px,
:where(html.tui-escuro) #painelAtalhosModal .u-bdb-1px-solid-dee2e6-fsh-0-p-12px-16px,
:where(html.tui-escuro) #buscaGlobalModal .u-bdt-1px-solid-dee2e6-fsh-0-p-12px-16px,
:where(html.tui-escuro) #painelAtalhosModal .u-bdt-1px-solid-dee2e6-fsh-0-p-12px-16px,
:where(html.tui-escuro) #buscaGlobalModal .u-bdt-1px-solid-dee2e6-pt-8px,
:where(html.tui-escuro) #painelAtalhosModal .u-bdt-1px-solid-dee2e6-pt-8px,
:where(html.tui-escuro) #buscaGlobalModal .u-cf2624c,
:where(html.tui-escuro) #painelAtalhosModal .u-cf2624c,
:where(html.tui-escuro) #buscaGlobalModal .u-dc96670,
:where(html.tui-escuro) #painelAtalhosModal .u-dc96670,
:where(html.tui-escuro) #buscaGlobalModal .u-ebe1801,
:where(html.tui-escuro) #painelAtalhosModal .u-ebe1801,
:where(html.tui-escuro) #buscaGlobalModal .u-efb05fb,
:where(html.tui-escuro) #painelAtalhosModal .u-efb05fb,
:where(html.tui-escuro) #buscaGlobalModal .u-f8e3d81,
:where(html.tui-escuro) #painelAtalhosModal .u-f8e3d81,
:where(html.tui-escuro) #buscaGlobalModal .u-fec3c22,
:where(html.tui-escuro) #painelAtalhosModal .u-fec3c22 {
    border-color: var(--tui-border) !important;
}

/* Utilitários de fundo claro do Bootstrap usados em telas do app */
:where(html.tui-escuro) .bg-white { background-color: var(--tui-card-bg) !important; }
:where(html.tui-escuro) .bg-light { background-color: rgba(255, 255, 255, .04) !important; }
:where(html.tui-escuro) .table-light > :not(caption) > * > * {
    background-color: rgba(255, 255, 255, .04) !important;
    color: var(--tui-text) !important;
}
:where(html.tui-escuro) .text-dark { color: var(--tui-text) !important; }

/* O menu lateral já é escuro por padrão; mantém a borda coerente. */
:where(html.tui-escuro) .navbar-vertical { border-right: 1px solid var(--tui-border); }

/* ─── Busca global e atalhos de teclado (template privado e PDV) ─── */
/* escopo: tpl-private, tpl-pdv */
/* ── Busca Global ────────────────────────────────────────── */
:where(html.tpl-private, html.tpl-pdv) #buscaGlobalOverlay {
    opacity: 0;
}

:where(html.tpl-private, html.tpl-pdv) #buscaGlobalOverlay.visible {
    opacity: 1;
}

:where(html.tpl-private, html.tpl-pdv) .bg-search-group {
    padding: 4px 0;
}

:where(html.tpl-private, html.tpl-pdv) .bg-search-group-title {
    padding: 10px 18px 6px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

:where(html.tpl-private, html.tpl-pdv) .bg-badge {
    background: #f1f5f9;
    color: #64748b;
    border-radius: 99px;
    padding: 1px 7px;
    font-size: .7rem;
}

:where(html.tpl-private, html.tpl-pdv) .bg-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    text-decoration: none;
    color: #111827;
    transition: background .12s;
}

:where(html.tpl-private, html.tpl-pdv) .bg-result-item:hover,
:where(html.tpl-private, html.tpl-pdv) .bg-result-item.selected {
    background: #f8faff;
    color: #111827;
}

:where(html.tpl-private, html.tpl-pdv) .bg-result-item mark {
    background: #fef08a;
    padding: 0 1px;
    border-radius: 2px;
}

:where(html.tpl-private, html.tpl-pdv) .bg-result-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

:where(html.tpl-private, html.tpl-pdv) .bg-result-titulo {
    font-size: .88rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:where(html.tpl-private, html.tpl-pdv) .bg-result-sub {
    font-size: .78rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:where(html.tpl-private, html.tpl-pdv) .bg-result-extra {
    font-size: .75rem;
    color: #94a3b8;
    flex-shrink: 0;
    margin-left: 8px;
    white-space: nowrap;
}

:where(html.tpl-private, html.tpl-pdv) .bg-vazio,
:where(html.tpl-private, html.tpl-pdv) .bg-loading,
:where(html.tpl-private, html.tpl-pdv) .bg-estado-inicial {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #94a3b8;
    text-align: center;
    gap: 8px;
}

:where(html.tpl-private, html.tpl-pdv) .bg-estado-inicial p {
    margin: 0;
    font-size: .88rem;
}

:where(html.tpl-private, html.tpl-pdv) .bg-shortcuts-hint {
    display: flex;
    gap: 8px;
    font-size: .75rem;
    margin-top: 6px;
}

:where(html.tpl-private, html.tpl-pdv) .bg-shortcuts-hint kbd {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: .72rem;
    color: #64748b;
}

:where(html.tpl-private, html.tpl-pdv) .bg-spinner {
    width: 22px;
    height: 22px;
    border: 2px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: bgSpin .6s linear infinite;
}

@keyframes bgSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Painel Atalhos ──────────────────────────────────────── */
:where(html.tpl-private, html.tpl-pdv) #painelAtalhosOverlay {
    opacity: 0;
}

:where(html.tpl-private, html.tpl-pdv) #painelAtalhosOverlay.visible {
    opacity: 1;
    display: flex !important;
}

:where(html.tpl-private, html.tpl-pdv) #painelAtalhosModal {
    width: calc(100% - 32px) !important;
}

/* ── Toast Atalho ────────────────────────────────────────── */
:where(html.tpl-private, html.tpl-pdv) .atalho-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: #1e293b;
    color: #fff;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: .85rem;
    z-index: 999999;
    opacity: 0;
    transition: opacity .2s, transform .2s;
    pointer-events: none;
    white-space: nowrap;
}

:where(html.tpl-private, html.tpl-pdv) .atalho-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ─── Template privado (antigo private-template.css) ─── */
/* escopo: tpl-private, tpl-pdv */
/* Logo padrão para tema claro */
:where(html.tpl-private, html.tpl-pdv) .logo {
    content: url("https://finitya.com.br/assets/images/logos/logo-preto.png");
}

/* Layout Base */
:where(html.tpl-private, html.tpl-pdv) #db-wrapper {
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Layout Vertical corrigido */
:where(html.tpl-private, html.tpl-pdv) .vertical-layout {
    display: flex;
    min-height: 100vh;
    height: 100%;
    position: relative;
}

:where(html.tpl-private, html.tpl-pdv) .vertical-layout #vertical-menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
    /* Impede que o menu encolha */
}

:where(html.tpl-private, html.tpl-pdv) .vertical-layout #vertical-content {
    flex-grow: 1;
    /* Ocupa todo espaço restante */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
    /* Esconde overflow do container principal */
    margin-left: 260px; /* Espaço para o menu */
}

:where(html.tpl-private, html.tpl-pdv) .vertical-layout #horizontal-layout {
    display: none !important;
}

/* Layout Horizontal */
:where(html.tpl-private, html.tpl-pdv) .horizontal-layout {
    display: block;
    grid-template-columns: none;
}

:where(html.tpl-private, html.tpl-pdv) .horizontal-layout #vertical-menu,
:where(html.tpl-private, html.tpl-pdv) .horizontal-layout #vertical-content {
    display: none !important;
}

:where(html.tpl-private, html.tpl-pdv) .horizontal-layout #horizontal-layout {
    display: block !important;
}

/* Estilos para o layout horizontal */
:where(html.tpl-private, html.tpl-pdv) #horizontal-layout {
    width: 100%;
}

:where(html.tpl-private, html.tpl-pdv) #horizontal-layout .horizontal-content {
    margin-top: 90px;
    /* Ajuste conforme altura dos navbars */
    padding: 20px;
}

/* Ajustes para header fixo no horizontal */
:where(html.tpl-private, html.tpl-pdv) #horizontal-layout>nav.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

:where(html.tpl-private, html.tpl-pdv) #horizontal-layout>nav.navbar-default {
    position: fixed;
    top: 60px;
    /* Ajuste conforme altura da primeira navbar */
    left: 0;
    right: 0;
    z-index: 1029;
}

/* Área de Conteúdo COM ROLAGEM */
:where(html.tpl-private, html.tpl-pdv) #page-content {
    flex-grow: 1;
    overflow-y: auto;
    /* Rolagem apenas aqui */
    padding: 1rem;
    padding-right: 0px;
}

/* Reset básico corrigido */
:where(html.tpl-private, html.tpl-pdv) body,
html:where(.tpl-private, .tpl-pdv) {
    margin: 0;
    padding: 0;
    height: 100%;
    /* Removido overflow: hidden */
}

:where(html.tpl-private, html.tpl-pdv) .navbar-vertical {
    position: fixed;
    overflow-y: auto;
    /* Rolagem independente no menu */
    height: 100vh;
}

/* Área de Conteúdo COM ROLAGEM */
:where(html.tpl-private, html.tpl-pdv) #page-content {
    overflow-y: auto;
    padding-bottom: 70px !important;
    /* Rolagem apenas aqui */
}

/* Remove todo o espaçamento entre os navbars */
:where(html.tpl-private, html.tpl-pdv) .navbar-expand-lg+.navbar-default {
    margin-top: 0;
    padding-top: 0;
}

/* Garante que os navbars fiquem colados */
:where(html.tpl-private, html.tpl-pdv) .header {
    padding-bottom: 0;
}

/* Spinner Fullscreen Branco */
:where(html.tpl-private, html.tpl-pdv) #loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

:where(html.tpl-private, html.tpl-pdv) .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Bloqueia scroll durante o loading */
:where(html.tpl-private, html.tpl-pdv) body.loading {
    overflow: hidden;
    height: 100vh;
}

/* Esconde quando carregado */
:where(html.tpl-private, html.tpl-pdv) body.loaded #loading-overlay {
    opacity: 0;
    visibility: hidden;
}

:where(html.tpl-private, html.tpl-pdv) #nav-toggle {
    padding-left: 10px;
}

:where(html.tpl-private, html.tpl-pdv) .expira-text {
    color: #6c757d;
    /* Cinza Bootstrap */
    font-style: italic;
    font-size: 0.875em;
    /* Um pouco menor que o padrão */
}

/* Esconde o botão regular em dispositivos móveis */
@media (max-width: 768px) {
    :where(html.tpl-private, html.tpl-pdv) .regular-button-container {
        display: none;
    }

    /* Exibe o botão flutuante */
    :where(html.tpl-private, html.tpl-pdv) .floating-button-container {
        display: block;
    }

    :where(html.tpl-private, html.tpl-pdv) .floating-btn {
        padding: 15px 20px;
        font-size: 16px;
        border-radius: 50px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }

    :where(html.tpl-private, html.tpl-pdv) .floating-btn:hover {
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
    }
}

/* Caso o botão de flutuação não apareça em telas grandes */
@media (min-width: 769px) {
    :where(html.tpl-private, html.tpl-pdv) .floating-button-container {
        display: none;
    }

    :where(html.tpl-private, html.tpl-pdv) .regular-button-container {
        display: block;
    }
}

/* Esconde os botões adicionais */
:where(html.tpl-private, html.tpl-pdv) .floating-buttons {
    display: none;
    /* Inicialmente escondido */
    position: absolute;
    bottom: 60px;
    /* Ajuste conforme necessário */
    right: 0;
    z-index: 1050;
    border-radius: 5px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

:where(html.tpl-private, html.tpl-pdv) .floating-button-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050;
}

:where(html.tpl-private, html.tpl-pdv) .floating-btn {
    padding: 15px 20px;
    font-size: 16px;
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

:where(html.tpl-private, html.tpl-pdv) .floating-buttons.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

:where(html.tpl-private, html.tpl-pdv) .floating-buttons a {
    display: block;
    margin: 5px 0;
    white-space: nowrap;
}

:where(html.tpl-private, html.tpl-pdv) .floating-buttons a:nth-child(1) {
    animation-delay: 0.1s;
}

:where(html.tpl-private, html.tpl-pdv) .floating-buttons a:nth-child(2) {
    animation-delay: 0.2s;
}

:where(html.tpl-private, html.tpl-pdv) .floating-buttons a:nth-child(3) {
    animation-delay: 0.3s;
}

/* Animações gerais */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeInButtons {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Classe para esconder campos em telas pequenas */
:where(html.tpl-private, html.tpl-pdv) .hide-on-small {
    display: table-cell;
    /* Exibido normalmente */
}

/* Esconde as colunas em telas menores */
@media (max-width: 768px) {
    :where(html.tpl-private, html.tpl-pdv) .hide-on-small {
        display: none !important;
    }
}

/* Modal de Novidades */
:where(html.tpl-private, html.tpl-pdv) .modal-overlay-novidades {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 20px;
}

:where(html.tpl-private, html.tpl-pdv) .modal-overlay-novidades.active {
    opacity: 1;
    visibility: visible;
}

:where(html.tpl-private, html.tpl-pdv) .modal-novidades {
    background-color: white;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    max-height: 90vh;
}

:where(html.tpl-private, html.tpl-pdv) .modal-overlay-novidades.active .modal-novidades {
    transform: scale(1);
}

:where(html.tpl-private, html.tpl-pdv) .modal-header-novidades {
    background: #003ca4;
    color: white;
    padding: 15px 20px;
    text-align: center;
    position: relative;
}

:where(html.tpl-private, html.tpl-pdv) .modal-header-novidades h2 {
    font-size: 20px;
    margin-bottom: 5px;
}

:where(html.tpl-private, html.tpl-pdv) .modal-header-novidades p {
    font-size: 13px;
    opacity: 0.9;
    color: white;
    margin-bottom: 0;
}

:where(html.tpl-private, html.tpl-pdv) .close-modal-novidades {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.2);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

:where(html.tpl-private, html.tpl-pdv) .close-modal-novidades:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

:where(html.tpl-private, html.tpl-pdv) .modal-content-novidades {
    padding: 20px;
    position: relative;
    overflow-y: auto;
    max-height: 75vh;
}

:where(html.tpl-private, html.tpl-pdv) .news-slider {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

:where(html.tpl-private, html.tpl-pdv) .news-slides {
    display: flex;
    align-items: flex-start;
    transition: transform 0.4s ease, height 0.3s ease;
}

:where(html.tpl-private, html.tpl-pdv) .news-slide {
    min-width: 100%;
    padding: 0 10px;
}

:where(html.tpl-private, html.tpl-pdv) .news-content h3 {
    font-size: 18px;
    margin-bottom: 12px;
    color: #2d3e50;
}

:where(html.tpl-private, html.tpl-pdv) .news-content p {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 15px;
}

/* Estilos para descrição com HTML rico (Quill) */
:where(html.tpl-private, html.tpl-pdv) .news-description {
    font-size: 14px;
    color: #6c757d;
    text-align: left;
    line-height: 1.6;
}

:where(html.tpl-private, html.tpl-pdv) .news-description p {
    margin-bottom: 10px;
}

:where(html.tpl-private, html.tpl-pdv) .news-description strong {
    font-weight: 600;
    color: #2d3e50;
}

:where(html.tpl-private, html.tpl-pdv) .news-description a {
    color: #003ca4;
    text-decoration: underline;
}

:where(html.tpl-private, html.tpl-pdv) .news-description a:hover {
    color: #a777e3;
}

:where(html.tpl-private, html.tpl-pdv) .news-description ul,
:where(html.tpl-private, html.tpl-pdv) .news-description ol {
    margin-left: 20px;
    margin-bottom: 10px;
}

:where(html.tpl-private, html.tpl-pdv) .news-description img {
    width: 200px !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 4px;
    margin: 10px auto;
    display: block;
    object-fit: contain;
}

:where(html.tpl-private, html.tpl-pdv) .news-description h1,
:where(html.tpl-private, html.tpl-pdv) .news-description h2,
:where(html.tpl-private, html.tpl-pdv) .news-description h3 {
    color: #2d3e50;
    margin-top: 15px;
    margin-bottom: 10px;
}

:where(html.tpl-private, html.tpl-pdv) .gif-placeholder {
    background-color: #f1f5fe;
    border-radius: 8px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 12px 0 20px;
    position: relative;
}

:where(html.tpl-private, html.tpl-pdv) .gif-placeholder::before {
    content: "GIF demonstrativo";
    position: absolute;
    color: #a777e3;
    font-weight: bold;
    font-size: 14px;
}

:where(html.tpl-private, html.tpl-pdv) .gif-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
}

:where(html.tpl-private, html.tpl-pdv) .slider-indicators {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

:where(html.tpl-private, html.tpl-pdv) .slider-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ddd;
    margin: 0 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

:where(html.tpl-private, html.tpl-pdv) .slider-indicator.active {
    background: #003ca4;
    transform: scale(1.2);
}

:where(html.tpl-private, html.tpl-pdv) .slider-controls {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

:where(html.tpl-private, html.tpl-pdv) .slider-btn {
    background: transparent;
    border: none;
    color: #003ca4;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

:where(html.tpl-private, html.tpl-pdv) .slider-btn:hover {
    color: #a777e3;
    background-color: #f1f5fe;
}

:where(html.tpl-private, html.tpl-pdv) .modal-footer-novidades {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    background-color: #f9fafc;
    border-top: 1px solid #eee;
}

:where(html.tpl-private, html.tpl-pdv) .btn-novidades {
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
}

:where(html.tpl-private, html.tpl-pdv) .btn-primary-novidades {
    background: linear-gradient(135deg, #2a3f6f 0%, #4a6fa5 100%);
    color: white;
}

:where(html.tpl-private, html.tpl-pdv) .btn-primary-novidades:hover {
    background: linear-gradient(135deg, #2a3f6f 0%, #4a6fa5 100%);
    transform: translateY(-2px);
}

:where(html.tpl-private, html.tpl-pdv) .btn-secondary-novidades {
    background-color: #eee;
    color: #555;
}

:where(html.tpl-private, html.tpl-pdv) .btn-secondary-novidades:hover {
    background-color: #ddd;
}

@media (max-width: 600px) {
    :where(html.tpl-private, html.tpl-pdv) .modal-header-novidades h2 {
        font-size: 18px;
    }

    :where(html.tpl-private, html.tpl-pdv) .modal-header-novidades p {
        font-size: 12px;
    }

    :where(html.tpl-private, html.tpl-pdv) .news-content h3 {
        font-size: 16px;
    }

    :where(html.tpl-private, html.tpl-pdv) .gif-placeholder {
        height: 150px;
    }
}

@media (max-width: 400px) {
    :where(html.tpl-private, html.tpl-pdv) .modal-header-novidades h2 {
        font-size: 16px;
    }

    :where(html.tpl-private, html.tpl-pdv) .news-content h3 {
        font-size: 14px;
    }

    :where(html.tpl-private, html.tpl-pdv) .news-content p {
        font-size: 13px;
    }

    :where(html.tpl-private, html.tpl-pdv) .gif-placeholder {
        height: 120px;
    }
}

:where(html.tpl-private, html.tpl-pdv) .status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

:where(html.tpl-private, html.tpl-pdv) .status-active {
    background-color: #28a745;
}

:where(html.tpl-private, html.tpl-pdv) .status-inactive {
    background-color: #dc3545;
}

/* ==================== MENU MINI (APENAS ÍCONES) ==================== */

/* Menu vertical com largura fixa padrão */
:where(html.tpl-private, html.tpl-pdv) .navbar-vertical {
    width: 260px;
    transition: width 0.3s ease-in-out;
    overflow-y: auto;
    overflow-x: visible;
    z-index: 1050; /* Sempre acima do conteúdo */
}

/* Container vh-100 permite sticky logo */
:where(html.tpl-private, html.tpl-pdv) .navbar-vertical .vh-100 {
    overflow-x: visible;
    overflow-y: auto;
}

/* Simplebar content wrapper permite sticky logo */
:where(html.tpl-private, html.tpl-pdv) .navbar-vertical .simplebar-content-wrapper {
    overflow-x: visible !important;
    overflow-y: auto !important;
}

/* Itens do menu ficam abaixo da logo */
:where(html.tpl-private, html.tpl-pdv) .navbar-vertical .nav-item {
    position: relative;
    z-index: 1;
}

:where(html.tpl-private, html.tpl-pdv) .navbar-vertical .nav-link {
    position: relative;
    z-index: 1;
}

/* Transições suaves para o conteúdo */
:where(html.tpl-private, html.tpl-pdv) #vertical-content,
:where(html.tpl-private, html.tpl-pdv) #page-content,
:where(html.tpl-private, html.tpl-pdv) .header,
:where(html.tpl-private, html.tpl-pdv) .navbar-default {
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
}

/* Estado normal - menu aberto */
@media (min-width: 769px) {
    :where(html.tpl-private, html.tpl-pdv) .vertical-layout #vertical-content {
        margin-left: 250px;
    }
}

/* IMPORTANTE: Sobrescreve o CSS do tema que esconde o menu */
:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical {
    margin-left: 0 !important; /* Impede que o menu suma */
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    position: fixed !important; /* Mantém fixo */
    left: 0 !important; /* Alinha à esquerda */
    overflow-y: auto !important; /* Permite scroll vertical */
    overflow-x: visible !important; /* Permite submenus flutuantes horizontalmente */
    z-index: 1050 !important; /* Fica acima do conteúdo */
}

/* Ajusta o container interno quando minimizado */
:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical .vh-100 {
    width: 70px !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
}

/* Logo fixa no topo do menu - versão expandida */
:where(html.tpl-private, html.tpl-pdv) .navbar-vertical a[href*="Home/index"] {
    position: sticky;
    top: 0;
    z-index: 1080;
    background: var(--gk-navbar-vertical-bg);
    padding: 1rem;
    display: block;
    text-align: center;
}

/* Reduz e centraliza a logo quando menu está minimizado */
:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical a[href*="Home/index"] {
    padding: 0.5rem;
    text-align: center;
    display: block;
    position: sticky;
    top: 0;
    z-index: 1080;
    background: var(--gk-navbar-vertical-bg);
}

:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical a[href*="Home/index"] img {
    max-width: 45px;
    max-height: 45px;
    margin: 0 auto;
    content: url("/assets/images/logos/logo-branco-4.png");
}

/* Esconde apenas o TEXTO dos links, mantém os ícones */
:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical .nav-link {
    padding: 0.75rem 0 !important;
    text-align: center;
    justify-content: center;
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    overflow: hidden !important;
    font-size: 0 !important;
    line-height: 1 !important;
    min-height: 48px !important;
    position: relative;
    z-index: 1;
}

/* Força os ícones SVG a ficarem visíveis e centralizados */
:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical .nav-link svg {
    display: block !important;
    margin: 0 auto !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    font-size: 22px !important;
}

/* Remove o margin-right/margin-left dos SVGs que normalmente aparece com texto */
:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical .nav-link svg.me-2,
:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical .nav-link svg.ms-2 {
    margin: 0 auto !important;
}

/* Adiciona efeito hover no menu minimizado */
:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical .nav-link:hover {
    background-color: #0f172a !important;
    border-radius: 10px !important;
}

/* Esconde as setas de dropdown quando minimizado */
:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical .nav-link[data-bs-toggle="collapse"]::after,
:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical .nav-link .dropdown-toggle::after {
    display: none !important;
}

/* Estiliza submenus ao lado do menu minimizado */
:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical .collapse {
    position: fixed !important;
    left: 70px !important;
    min-width: 200px !important;
    background: #1e2139 !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3) !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 0.5rem 0 !important;
    z-index: 9999 !important;
    display: none !important;
    height: auto !important;
    overflow: visible !important;
}

:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical .collapse.show {
    display: block !important;
}

:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical .collapse .nav-link {
    font-size: 14px !important;
    padding: 0.5rem 1rem !important;
    white-space: nowrap;
    color: #fff;
}

:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical .collapse .nav-link:hover {
    background: rgba(213, 249, 0, 0.1);
}

/* Esconde os headings do menu quando minimizado */
:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical .navbar-heading {
    display: none !important;
}

/* Esconde os separadores quando minimizado */
:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical .nav-divider {
    margin: 0.25rem 0.5rem;
}

/* Ajusta o simplebar quando minimizado */
:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical [data-simplebar] {
    width: 70px !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
}

:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical .simplebar-content-wrapper,
:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical .simplebar-content {
    overflow-x: visible !important;
    overflow-y: auto !important;
}

/* Centraliza cada item de menu e permite posicionamento de submenus */
:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical .nav-item {
    text-align: center;
    display: block !important;
    width: 100% !important;
    position: relative;
    overflow: visible !important;
    z-index: 1;
}

/* Garante espaçamento vertical entre itens */
:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical .nav-item + .nav-item {
    margin-top: 0 !important;
}

/* Remove padding lateral do UL */
:where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical .navbar-nav {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
}

/* Garante que o ícone do nav-toggle continue visível e funcional */
:where(html.tpl-private, html.tpl-pdv) #nav-toggle {
    cursor: pointer;
    transition: transform 0.3s ease;
}

:where(html.tpl-private, html.tpl-pdv) #nav-toggle:hover {
    transform: scale(1.1);
}

/* Responsivo: em telas pequenas, esconde completamente */
@media (max-width: 768px) {
    :where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-vertical {
        margin-left: -260px !important;
        width: 260px !important;
    }
}

/* Ajusta o conteúdo principal quando o menu está minimizado */
@media (min-width: 769px) {
    /* Quando toggled (menu minimizado) */
    :where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled #vertical-content {
        margin-left: 70px !important;
    }
    
    :where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled #page-content,
    :where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .header,
    :where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-default {
        margin-left: 0 !important;
    }
    
    /* Ajusta a largura do header */
    :where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .header,
    :where(html.tpl-private, html.tpl-pdv) #db-wrapper.toggled .navbar-default {
        width: 100% !important;
    }
}

/* ─── Template público (antigo public-template.css) ─── */
/* escopo: tpl-public, tpl-site, tpl-setup */
/* Logo padrão para tema claro */
:where(html.tpl-public, html.tpl-site, html.tpl-setup) .logo {
    content: url("https://finitya.com.br/assets/images/logos/logo-preto.png");
}

/* ─── Notificações (antigo modern-notifications.css) ─── */
/* tpl-mobile incluído: no template do celular os alertas ficavam sem estilo
   (e sem empilhar/fechar sozinhos, porque o modern-notifications.js não era carregado). */
/* escopo: tpl-private, tpl-pdv, tpl-public, tpl-site */
/* Container de Notificações Modernas */
:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notifications-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 360px;
    pointer-events: none;
}

/* Notificação Individual */
:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
    width: 360px;
    min-width: 360px;
    max-width: 360px;
    animation: slideIn 0.3s ease-out;
    pointer-events: all;
    margin-bottom: 12px;
    box-sizing: border-box;
}

/* Animações */
@keyframes slideIn {
    from {
        transform: translateX(120%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
        max-height: 200px;
        margin-bottom: 12px;
    }
    to {
        transform: translateX(120%);
        opacity: 0;
        max-height: 0;
        margin-bottom: 0;
    }
}

:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification.removing {
    animation: slideOut 0.3s ease-in forwards;
}

/* Conteúdo da Notificação */
:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification-content {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

/* Ícone */
:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification-icon,
:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .icon-container {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
}

:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification-icon i,
:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .icon-container i {
    font-size: 20px !important;
    line-height: 1;
}

:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification-icon.bg-success,
:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .icon-container.bg-success {
    background-color: #28a745;
}

:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification-icon.bg-danger,
:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .icon-container.bg-danger {
    background-color: #dc3545;
}

:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification-icon.bg-warning,
:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .icon-container.bg-warning {
    background-color: #ffc107;
}

:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification-icon.bg-info,
:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .icon-container.bg-info {
    background-color: #17a2b8;
}

/* Texto */
:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification-title {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification-message {
    font-size: 14px;
    color: #6c757d;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Botão Fechar */
:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 24px;
    color: #95a5a6;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    line-height: 1;
}

:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification-close:hover {
    color: #2c3e50;
}

/* Barra de Progresso */
:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification-progress {
    height: 4px;
    background-color: rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #28a745;
    animation: progressBar 5s linear forwards;
}

/* Cores da barra de progresso por tipo */
:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification.alert-success .modern-notification-progress::after {
    background-color: #28a745;
}

:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification.alert-danger .modern-notification-progress::after {
    background-color: #dc3545;
}

:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification.alert-warning .modern-notification-progress::after {
    background-color: #ffc107;
}

:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification.alert-info .modern-notification-progress::after {
    background-color: #17a2b8;
}

@keyframes progressBar {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* Notificação pausada (quando o mouse está em cima) */
:where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification:hover .modern-notification-progress::after {
    animation-play-state: paused;
}

/* Responsividade */
@media (max-width: 768px) {
    :where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notifications-container {
        width: calc(100vw - 40px);
        right: 20px;
    }
    
    :where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification {
        width: 100%;
        min-width: unset;
    }
    
    :where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification-content {
        padding: 14px;
    }
    
    :where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification-icon,
    :where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .icon-container {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    
    :where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification-icon i,
    :where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .icon-container i {
        font-size: 18px !important;
    }
}

@media (max-width: 480px) {
    :where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notifications-container {
        width: calc(100vw - 24px);
        right: 12px;
        top: 12px;
    }
    
    :where(html.tpl-private, html.tpl-pdv, html.tpl-public, html.tpl-site, html.tpl-mobile) .modern-notification-content {
        padding: 12px;
        gap: 10px;
    }
}

/* ─── Site institucional (template site.php) ─── */
/* escopo: tpl-site */
html:where(.tpl-site) {
    height: 100%;
}

:where(html.tpl-site) body {
    background: linear-gradient(230.08deg, #1A1A33 -.57%, #0050D3 40.06%, #00CA7F 77%, #CCF000 100.75%);
    background-attachment: fixed;
    min-height: 100vh;
}

:where(html.tpl-site) main {
    min-height: calc(100vh - 60px);
}

:where(html.tpl-site) .footer {
    background: #ffffff !important;
}

:where(html.tpl-site) .footer,
:where(html.tpl-site) .footer p,
:where(html.tpl-site) .footer span,
:where(html.tpl-site) .footer h3,
:where(html.tpl-site) .footer a,
:where(html.tpl-site) .footer .nav-link {
    color: #ffffff !important;
}

:where(html.tpl-site) .footer a:hover,
:where(html.tpl-site) .footer .nav-link:hover {
    color: #e0e0e0 !important;
    opacity: 0.9;
}

:where(html.tpl-site) .footer .text-dark {
    color: #ffffff !important;
}

:where(html.tpl-site) .footer i {
    color: #ffffff !important;
}

:where(html.tpl-site) .footer .border-top {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

:where(html.tpl-site) .site-header {
    background: transparent;
    box-shadow: none;
    position: relative;
    z-index: 1000;
}

:where(html.tpl-site) .site-navbar {
    padding: 12px 0;
}

:where(html.tpl-site) .site-navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

:where(html.tpl-site) .site-navbar .navbar-brand img {
    height: 40px;
    width: auto;
}

:where(html.tpl-site) .site-navbar .navbar-collapse {
    flex-grow: 1;
    display: flex;
}

:where(html.tpl-site) .site-navbar .navbar-nav {
    gap: 35px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html.tpl-site) .site-navbar .nav-link {
    color: #ffffff !important;
    font-weight: 500;
    font-size: 15px;
    padding: 8px 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    position: relative;
}

:where(html.tpl-site) .site-navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #00CA7F;
    transition: width 0.3s ease;
}

:where(html.tpl-site) .site-navbar .nav-link:hover {
    opacity: 0.85;
}

:where(html.tpl-site) .site-navbar .nav-link:hover::after {
    width: 100%;
}

:where(html.tpl-site) .site-navbar .navbar-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

:where(html.tpl-site) .btn-login {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

:where(html.tpl-site) .btn-login:hover {
    opacity: 0.85;
    color: #ffffff;
}

:where(html.tpl-site) .btn-cta {
    background: #ffffff;
    color: #0984e3;
    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    animation: pulse 2s ease-in-out infinite;
    position: relative;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(255, 255, 255, 0.7);
    }

    50% {
        box-shadow: 0 4px 20px rgba(255, 255, 255, 0.4), 0 0 0 8px rgba(255, 255, 255, 0);
    }
}

:where(html.tpl-site) .btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.5);
    color: #0984e3;
    animation: none;
}

:where(html.tpl-site) .navbar-toggler {
    border: 2px solid rgba(255, 255, 255, 0.8);
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

:where(html.tpl-site) .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

:where(html.tpl-site) .navbar-toggler .icon-bar {
    background-color: #ffffff;
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    margin: 4px 0;
}

@media (max-width: 991px) {
    :where(html.tpl-site) .site-navbar .container {
        position: relative;
    }

    :where(html.tpl-site) .site-navbar .navbar-collapse {
        display: none;
    }

    :where(html.tpl-site) .site-navbar .navbar-collapse.show,
    :where(html.tpl-site) .site-navbar .navbar-collapse.collapsing {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(0, 50, 211, 0.98);
        backdrop-filter: blur(10px);
        padding: 20px;
        margin-top: 10px;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        z-index: 1000;
    }

    :where(html.tpl-site) .site-navbar .navbar-collapse.show .navbar-nav,
    :where(html.tpl-site) .site-navbar .navbar-collapse.collapsing .navbar-nav {
        margin: 0 0 20px 0;
        gap: 0;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    :where(html.tpl-site) .site-navbar .navbar-collapse.show .nav-item,
    :where(html.tpl-site) .site-navbar .navbar-collapse.collapsing .nav-item {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    :where(html.tpl-site) .site-navbar .navbar-collapse.show .nav-item:last-child,
    :where(html.tpl-site) .site-navbar .navbar-collapse.collapsing .nav-item:last-child {
        border-bottom: none;
    }

    :where(html.tpl-site) .site-navbar .navbar-collapse.show .nav-link,
    :where(html.tpl-site) .site-navbar .navbar-collapse.collapsing .nav-link {
        padding: 15px 10px !important;
        width: 100%;
        font-size: 16px;
    }

    :where(html.tpl-site) .site-navbar .navbar-collapse.show .navbar-actions,
    :where(html.tpl-site) .site-navbar .navbar-collapse.collapsing .navbar-actions {
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }

    :where(html.tpl-site) .site-navbar .navbar-collapse.show .btn-login,
    :where(html.tpl-site) .site-navbar .navbar-collapse.collapsing .btn-login {
        width: 100%;
        justify-content: center;
        padding: 12px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
    }

    :where(html.tpl-site) .site-navbar .navbar-collapse.show .btn-cta,
    :where(html.tpl-site) .site-navbar .navbar-collapse.collapsing .btn-cta {
        width: 100%;
        justify-content: center;
    }

    :where(html.tpl-site) .navbar-toggler:not(.collapsed) .icon-bar {
        background-color: #CCF000;
    }
}

/* ─── Documentação (template doc.php) ─── */
/* escopo: tpl-doc */
/* ── Estrutura própria da documentação ─────────────────────────
   A página não usa mais as classes de layout do app, para não herdar
   o CSS do menu principal. */
:where(html.tpl-doc) .doc-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
}

:where(html.tpl-doc) .doc-topbar {
    position: sticky;
    top: 0;
    z-index: 1050;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    background: #0f172a;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

:where(html.tpl-doc) .doc-brand img {
    height: 30px;
    display: block;
}

:where(html.tpl-doc) .doc-topbar-title {
    color: rgba(255, 255, 255, .55);
    font-size: .9rem;
    font-weight: 500;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, .15);
}

:where(html.tpl-doc) .doc-menu-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    border-radius: 8px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex: 0 0 auto;
}

:where(html.tpl-doc) .doc-back-btn {
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    padding: 7px 14px;
    white-space: nowrap;
}

:where(html.tpl-doc) .doc-back-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

:where(html.tpl-doc) .doc-body {
    flex: 1;
    min-height: 0;
}

:where(html.tpl-doc) .tutorial-container {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - 60px);
}

/* Área de leitura com largura controlada — texto corrido em tela
   larga fica cansativo. */
:where(html.tpl-doc) .doc-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 20px 48px;
}

:where(html.tpl-doc) .doc-video-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 18px;
}

/* Menu escuro, com as cores declaradas aqui em vez de herdadas do tema:
   a página roda em data-bs-theme="light", então --bs-body-color resolvia
   para quase preto e o texto sumia sobre o fundo escuro da barra. */
:where(html.tpl-doc) .tutorial-sidebar {
    width: 280px;
    background: #0f172a;
    border-right: 1px solid rgba(255, 255, 255, .08);
    overflow-y: auto;
    transition: all 0.3s;
    padding: 8px 12px 24px;
}

:where(html.tpl-doc) .tutorial-sidebar h5 {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    padding: 4px 8px;
}

:where(html.tpl-doc) .tutorial-sidebar .playlist-info {
    /* Sobrepõe a .playlist-info genérica, que usa fundo claro do tema. */
    background: transparent;
    padding: 0 8px 12px;
    margin-bottom: 8px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

:where(html.tpl-doc) .tutorial-sidebar .playlist-info small {
    color: rgba(255, 255, 255, .55);
}

:where(html.tpl-doc) .tutorial-sidebar .playlist-info a {
    color: #7dd3fc;
    text-decoration: none;
    font-weight: 500;
}

:where(html.tpl-doc) .tutorial-sidebar .playlist-info a:hover {
    text-decoration: underline;
}

:where(html.tpl-doc) .tutorial-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Desktop: menu fixo com rolagem própria, conteúdo rola do lado. */
@media (min-width: 993px) {
    :where(html.tpl-doc) .tutorial-sidebar {
        position: sticky;
        top: 60px;
        height: calc(100vh - 60px);
        flex: 0 0 280px;
    }
}

/* Mobile: gaveta deslizante com fundo escurecido. */
@media (max-width: 992px) {
    :where(html.tpl-doc) .tutorial-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 290px;
        max-width: 85vw;
        z-index: 1060;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        padding-top: 0;
    }

    :where(html.tpl-doc) .tutorial-sidebar.show {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(0, 0, 0, .45);
    }

    :where(html.tpl-doc) .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .28s;
        z-index: 1055;
    }

    :where(html.tpl-doc) .sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    /* Trava a rolagem do fundo enquanto a gaveta está aberta. */
    :where(html.tpl-doc) body.doc-menu-open {
        overflow: hidden;
    }

    :where(html.tpl-doc) .doc-inner {
        padding: 16px 14px 40px;
    }

    :where(html.tpl-doc) .doc-video-title {
        font-size: 1.2rem;
    }
}

:where(html.tpl-doc) .tutorial-menu .nav-link {
    /* Altura de toque confortável — antes eram 0.2rem de padding. */
    padding: 0.55rem 0.8rem !important;
    border-radius: 8px;
    color: rgba(255, 255, 255, .82);
    font-size: .9rem;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 2px;
    transition: background-color .15s, color .15s;
}

:where(html.tpl-doc) .tutorial-menu .nav-link i {
    color: rgba(255, 255, 255, .45);
    transition: color .15s;
}

:where(html.tpl-doc) .tutorial-menu .nav-link:hover:not(.active) {
    background-color: rgba(255, 255, 255, .08);
    color: #fff;
}

:where(html.tpl-doc) .tutorial-menu .nav-link:hover:not(.active) i {
    color: rgba(255, 255, 255, .8);
}

:where(html.tpl-doc) .tutorial-menu .nav-link.active {
    background-color: var(--bs-primary);
    color: #fff !important;
    font-weight: 600;
}

:where(html.tpl-doc) .tutorial-menu .nav-link.active i {
    color: #fff;
}

:where(html.tpl-doc) .tutorial-menu .nav-item + .nav-item {
    margin-top: 2px;
}

:where(html.tpl-doc) .video-data {
    display: none;
}

:where(html.tpl-doc) .video-player-container {
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
}

:where(html.tpl-doc) .tutorial-card {
    border-radius: 8px;
    border: 1px solid var(--bs-border-color);
}

:where(html.tpl-doc) .tutorial-sidebar .navbar-heading {
    padding: 0.75rem 0.8rem 0.35rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: rgba(255, 255, 255, .45);
}

:where(html.tpl-doc) .tutorial-sidebar .nav-divider {
    margin: 0.75rem 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Ajustes para o player de vídeo */
:where(html.tpl-doc) .video-player-container {
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

:where(html.tpl-doc) .video-player-container iframe {
    width: 100%;
    height: 500px;
}

@media (max-width: 992px) {
    :where(html.tpl-doc) .video-player-container iframe {
        height: 400px;
    }
}

@media (max-width: 768px) {
    :where(html.tpl-doc) .video-player-container iframe {
        height: 300px;
    }
}

:where(html.tpl-doc) .tutorial-content {
    flex: 1;
    min-width: 0;
}

/* Cabeçalho da gaveta em mobile. As regras de posicionamento do menu
   ficam no bloco @media acima — este trecho tinha uma segunda versão
   delas (left: -280px), que sobrescrevia a primeira. */
@media (max-width: 992px) {
    :where(html.tpl-doc) .sidebar-mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.9rem 0.75rem;
        margin: 0 -12px 8px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    :where(html.tpl-doc) .sidebar-mobile-header .btn-close {
        filter: invert(1);
        opacity: 0.7;
    }
}

:where(html.tpl-doc) .tutorial-content {
    transition: none;
}

:where(html.tpl-doc) .playlist-info {
    background-color: var(--bs-dark-bg-subtle);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

/* ─── Template mobile (antigo mobile-template.css) ─── */
/* escopo: tpl-mobile */
/* O @keyframes fadeIn daqui foi renomeado para mobileFadeIn: keyframes
   são globais e o do template privado tem o mesmo nome com outro efeito. */
/* Logo padrão para tema claro */
:where(html.tpl-mobile) .logo {
    content: url("https://finitya.com.br/assets/images/logos/logo-preto.png");
}

/* Layout Base */
:where(html.tpl-mobile) #db-wrapper {
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Layout Vertical corrigido */
:where(html.tpl-mobile) .vertical-layout {
    display: flex;
    min-height: 100vh;
    height: 100%;
}

:where(html.tpl-mobile) .vertical-layout #vertical-menu {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
    /* Impede que o menu encolha */
}

:where(html.tpl-mobile) .vertical-layout #vertical-content {
    flex-grow: 1;
    /* Ocupa todo espaço restante */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
    /* Esconde overflow do container principal */
}

:where(html.tpl-mobile) .vertical-layout #horizontal-layout {
    display: none !important;
}

/* Layout Horizontal */
:where(html.tpl-mobile) .horizontal-layout {
    display: block;
    grid-template-columns: none;
}

:where(html.tpl-mobile) .horizontal-layout #vertical-menu,
:where(html.tpl-mobile) .horizontal-layout #vertical-content {
    display: none !important;
}

:where(html.tpl-mobile) .horizontal-layout #horizontal-layout {
    display: block !important;
}

/* Estilos para o layout horizontal */
:where(html.tpl-mobile) #horizontal-layout {
    width: 100%;
}

:where(html.tpl-mobile) #horizontal-layout .horizontal-content {
    margin-top: 90px;
    /* Ajuste conforme altura dos navbars */
    padding: 20px;
}

/* Ajustes para header fixo no horizontal */
:where(html.tpl-mobile) #horizontal-layout>nav.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

:where(html.tpl-mobile) #horizontal-layout>nav.navbar-default {
    position: fixed;
    top: 60px;
    /* Ajuste conforme altura da primeira navbar */
    left: 0;
    right: 0;
    z-index: 1029;
}

/* Área de Conteúdo COM ROLAGEM */
:where(html.tpl-mobile) #page-content {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 0px;
}

/* Reset básico corrigido */
:where(html.tpl-mobile) body,
html:where(.tpl-mobile) {
    margin: 0;
    padding: 0;
    height: 100%;
    /* Removido overflow: hidden */
}

:where(html.tpl-mobile) .navbar-vertical {
    position: fixed;
    overflow-y: auto;
    /* Rolagem independente no menu */
    height: 100vh;
}

/* Área de Conteúdo COM ROLAGEM */
:where(html.tpl-mobile) #page-content {
    overflow-y: auto;
    padding-bottom: 70px !important;
    /* Rolagem apenas aqui */
}

/* Remove todo o espaçamento entre os navbars */
:where(html.tpl-mobile) .navbar-expand-lg+.navbar-default {
    margin-top: 0;
    padding-top: 0;
}

/* Garante que os navbars fiquem colados */
:where(html.tpl-mobile) .header {
    padding-bottom: 0;
}

/* Spinner Fullscreen Branco */
:where(html.tpl-mobile) #loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

:where(html.tpl-mobile) .spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Bloqueia scroll durante o loading */
:where(html.tpl-mobile) body.loading {
    overflow: hidden;
    height: 100vh;
}

/* Esconde quando carregado */
:where(html.tpl-mobile) body.loaded #loading-overlay {
    opacity: 0;
    visibility: hidden;
}

:where(html.tpl-mobile) #nav-toggle {
    padding-left: 10px;
}

:where(html.tpl-mobile) .expira-text {
    color: #6c757d;
    /* Cinza Bootstrap */
    font-style: italic;
    font-size: 0.875em;
    /* Um pouco menor que o padrão */
}

/* Esconde o botão regular em dispositivos móveis */
@media (max-width: 768px) {
    :where(html.tpl-mobile) .regular-button-container {
        display: none !important;
        /* Garante que o botão regular será escondido */
    }

    /* Exibe o botão flutuante */
    :where(html.tpl-mobile) .floating-button-container {
        position: fixed;
        bottom: 90px;
        right: 20px;
        display: block !important;
        /* Garante que o botão flutuante será exibido */
        z-index: 1030;
        /* Mantém consistente */
        animation: mobileFadeIn 0.5s forwards;
    }

    :where(html.tpl-mobile) .floating-btn {
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 50px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease;
    }

    :where(html.tpl-mobile) .floating-btn:hover {
        transform: scale(1.1);
        /* Efeito de zoom ao passar o mouse */
    }
}

/* Caso o botão de flutuação não apareça em telas grandes */
@media (min-width: 769px) {
    :where(html.tpl-mobile) .floating-button-container {
        display: none;
        /* Esconde o botão flutuante em telas grandes */
    }

    :where(html.tpl-mobile) .regular-button-container {
        display: block;
        /* Exibe o botão normal em telas grandes */
    }
}

/* Esconde os botões adicionais */
:where(html.tpl-mobile) .floating-buttons {
    display: none;
    /* Inicialmente escondido */
    position: absolute;
    bottom: 60px;
    /* Ajuste conforme necessário */
    right: 0;
    z-index: 1050;
    border-radius: 5px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

:where(html.tpl-mobile) .floating-button-container {
    position: fixed;
    bottom: 90px;
    right: 20px;
    display: block !important;
    /* Garante que o botão flutuante será exibido */
    z-index: 1030;
    /* Mantém consistente */
    animation: mobileFadeIn 0.5s forwards;
}

:where(html.tpl-mobile) .floating-btn {
    padding: 15px 20px;
    font-size: 16px;
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #013897 0%, #4d66ae 100%);
}

:where(html.tpl-mobile) .floating-buttons.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

:where(html.tpl-mobile) .floating-buttons a {
    display: block;
    margin: 5px 0;
    white-space: nowrap;
}

:where(html.tpl-mobile) .floating-buttons a:nth-child(1) {
    animation-delay: 0.1s;
}

:where(html.tpl-mobile) .floating-buttons a:nth-child(2) {
    animation-delay: 0.2s;
}

:where(html.tpl-mobile) .floating-buttons a:nth-child(3) {
    animation-delay: 0.3s;
}

/* Animações gerais */
@keyframes mobileFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInButtons {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Classe para esconder campos em telas pequenas */
:where(html.tpl-mobile) .hide-on-small {
    display: table-cell;
    /* Exibido normalmente */
}

/* Esconde as colunas em telas menores */
@media (max-width: 768px) {
    :where(html.tpl-mobile) .hide-on-small {
        display: none;
        /* Oculta em telas menores */
    }
}

:where(html.tpl-mobile) .add-item-btn {
    position: fixed;
    bottom: 70px;
    /* Ajuste conforme necessário */
    right: 0px;
    z-index: 1040;
    /* Manter acima do botão flutuante */
    transition: transform 0.3s ease;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-size: 25px;
}

:where(html.tpl-mobile) .add-item-btn:hover {
    transform: scale(1.1);
    /* Efeito de zoom ao passar o mouse */
}

/* ===== MENU MOBILE - VERSÃO FINAL FUNCIONAL ===== */
:where(html.tpl-mobile) .mobile-nav-container {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    padding: 10px;
}

@media (max-width: 991px) {
    :where(html.tpl-mobile) .mobile-nav-container {
        display: block;
        z-index: 1040;
    }

    :where(html.tpl-mobile) #page-content {
        padding-bottom: 80px;
    }

    /* Esconde o botão flutuante do chat na versão mobile */
    :where(html.tpl-mobile) .chat-bubble {
        display: none !important;
    }
}

/* Barra Inferior Fixa - Camada mais alta */
:where(html.tpl-mobile) .mobile-nav-bar {
    display: flex;
    align-items: center;
    background-color: #003ca4 !important;
    padding: 10px 15px;
    box-shadow: 0px -2px 0px 0px #003ca4;
    height: 70px;
    position: relative;
    z-index: 1043;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    transition: border-radius 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Botão Hamburguer */
:where(html.tpl-mobile) .mobile-nav-hamburger {
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: 10px;
}

:where(html.tpl-mobile) .hamburger-line {
    width: 22px;
    height: 2px;
    background-color: white;
    margin: 3px 0;
    transition: all 0.3s ease;
    transform-origin: center;
}

:where(html.tpl-mobile) .mobile-nav-hamburger.open .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

:where(html.tpl-mobile) .mobile-nav-hamburger.open .hamburger-line:nth-child(2) {
    opacity: 0;
}

:where(html.tpl-mobile) .mobile-nav-hamburger.open .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Estilos alternativos para icon-bar (compatibilidade com site.php) */
:where(html.tpl-mobile) .mobile-nav-hamburger .icon-bar {
    background-color: #CCF000;
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    margin: 4px 0;
    transition: all 0.3s ease;
    transform-origin: center;
}

:where(html.tpl-mobile) .mobile-nav-hamburger.open .icon-bar.top-bar {
    transform: translateY(10px) rotate(45deg);
}

:where(html.tpl-mobile) .mobile-nav-hamburger.open .icon-bar.middle-bar {
    opacity: 0;
}

:where(html.tpl-mobile) .mobile-nav-hamburger.open .icon-bar.bottom-bar {
    transform: translateY(-10px) rotate(-45deg);
}

/* Quando menu está aberto, muda cor para verde */
:where(html.tpl-mobile) .mobile-nav-hamburger.open .icon-bar {
    background-color: #CCF000;
}

/* Menu Expansível */
:where(html.tpl-mobile) .mobile-nav-expand {
    position: fixed;
    bottom: -100%;
    left: 10px;
    right: 10px;
    background-color: #1e293b !important;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 1042;
    max-height: 70vh;
    overflow-y: auto;
    /* Esconde a barra de rolagem mantendo a funcionalidade */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE e Edge */
}

/* Esconde scrollbar no Chrome, Safari e Opera */
:where(html.tpl-mobile) .mobile-nav-expand::-webkit-scrollbar {
    display: none;
}

:where(html.tpl-mobile) .mobile-nav-expand.show {
    bottom: 80px;
    z-index: 1042;
}

/* Remove arredondamento superior da barra quando menu está aberto */
:where(html.tpl-mobile) .mobile-nav-bar.menu-open {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    box-shadow: 0px -3px 0px 0px #92b7f759;
}

:where(html.tpl-mobile) .mobile-nav-expand-content {
    padding: 20px 10px;
    background-color: transparent;
}

:where(html.tpl-mobile) .mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1041;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

:where(html.tpl-mobile) .mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Esconde o botão quando o menu está aberto */
:where(html.tpl-mobile) .mobile-nav-overlay.active~.floating-button-container,
:where(html.tpl-mobile) .mobile-nav-expand.show~.floating-button-container {
    display: none !important;
}

/* Barra de rolagem horizontal */
:where(html.tpl-mobile) .mobile-nav-scroll {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

:where(html.tpl-mobile) .mobile-nav-items {
    display: inline-flex;
    gap: 15px;
    padding: 5px 0;
    width: 100%;
    justify-content: space-around;
}

:where(html.tpl-mobile) .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    opacity: 0.7;
    transition: all 0.3s ease;

}

:where(html.tpl-mobile) .mobile-nav-item.active {
    opacity: 1;
}

:where(html.tpl-mobile) .mobile-nav-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
}

/* Badge de notificação do chat no menu mobile */
:where(html.tpl-mobile) .chat-bubble-badge-mobile {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    z-index: 10;
}

:where(html.tpl-mobile) .mobile-nav-item.active .mobile-nav-icon {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

:where(html.tpl-mobile) .mobile-nav-icon i {
    font-size: 18px;
    color: white;
}

:where(html.tpl-mobile) .mobile-nav-item.active .mobile-nav-icon i {
    color: #b797e1;
}

:where(html.tpl-mobile) .mobile-nav-item.active .mobile-nav-label {
    color: #fff;
}

:where(html.tpl-mobile) .mobile-nav-label {
    font-size: 12px;
    color: white;
    text-align: center;
}

/* Cabeçalho do menu expansível */
:where(html.tpl-mobile) .mobile-nav-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

:where(html.tpl-mobile) .mobile-nav-logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #e9e9e9;
    margin-right: 15px;
}

/* Grid de itens do menu expansível */
:where(html.tpl-mobile) .mobile-nav-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

:where(html.tpl-mobile) .mobile-nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #313f54;
    padding: 15px 10px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    gap: 8px;
}

:where(html.tpl-mobile) .mobile-nav-card svg,
:where(html.tpl-mobile) .mobile-nav-card i {
    font-size: 24px;
    color: #a8adb4;
    display: block;
    margin: 0 auto;
}

/* Efeito de clique para o botão de pedidos */
:where(html.tpl-mobile) .mobile-nav-item.active {
    position: relative;
    transition: all 0.2s ease;
    overflow: hidden;
}

/* Efeito de ripple (onda) ao clicar */
:where(html.tpl-mobile) .mobile-nav-item.active:active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    animation: ripple 0.6s ease-out;
}

@keyframes ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0.7;
    }

    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

/* Efeito de afundamento ao clicar */
:where(html.tpl-mobile) .mobile-nav-item.active:active {
    transform: scale(0.95);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    background-color: rgba(0, 0, 0, 0.1);
}

/* Efeito de transição suave para o ícone */
:where(html.tpl-mobile) .mobile-nav-icon {
    transition: transform 0.2s ease;
}

:where(html.tpl-mobile) .mobile-nav-item.active:active .mobile-nav-icon {
    transform: scale(0.9);
}

/* Efeito de cor no texto ao clicar */
:where(html.tpl-mobile) .mobile-nav-label {
    transition: color 0.2s ease;
}

:where(html.tpl-mobile) .mobile-nav-item.active:active .mobile-nav-label {
    color: #ffffff;
}

:where(html.tpl-mobile) .mobile-nav-card span {
    font-size: 12px;
    color: #a8adb4;
    text-align: center;
}

:where(html.tpl-mobile) .mobile-nav-card:active {
    transform: scale(0.95);
    background-color: #e9f0ff;
}

/* Modal de Novidades */
:where(html.tpl-mobile) .modal-overlay-novidades {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 20px;
}

:where(html.tpl-mobile) .modal-overlay-novidades.active {
    opacity: 1;
    visibility: visible;
}

:where(html.tpl-mobile) .modal-novidades {
    background-color: white;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    max-height: 90vh;
}

:where(html.tpl-mobile) .modal-overlay-novidades.active .modal-novidades {
    transform: scale(1);
}

:where(html.tpl-mobile) .modal-header-novidades {
    background: #003ca4;
    color: white;
    padding: 15px 20px;
    text-align: center;
    position: relative;
}

:where(html.tpl-mobile) .modal-header-novidades h2 {
    font-size: 20px;
    margin-bottom: 5px;
}

:where(html.tpl-mobile) .modal-header-novidades p {
    font-size: 13px;
    opacity: 0.9;
    color: white;
    margin-bottom: 0;
}

:where(html.tpl-mobile) .close-modal-novidades {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.2);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

:where(html.tpl-mobile) .close-modal-novidades:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

:where(html.tpl-mobile) .modal-content-novidades {
    padding: 20px;
    position: relative;
    overflow-y: auto;
    max-height: 75vh;
}

:where(html.tpl-mobile) .news-slider {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

:where(html.tpl-mobile) .news-slides {
    display: flex;
    align-items: flex-start;
    transition: transform 0.4s ease, height 0.3s ease;
}

:where(html.tpl-mobile) .news-slide {
    min-width: 100%;
    padding: 0 10px;
}

:where(html.tpl-mobile) .news-content h3 {
    font-size: 18px;
    margin-bottom: 12px;
    color: #2d3e50;
}

:where(html.tpl-mobile) .news-content p {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 15px;
}

/* Estilos para descrição com HTML rico (Quill) */
:where(html.tpl-mobile) .news-description {
    font-size: 14px;
    color: #6c757d;
    text-align: left;
    line-height: 1.6;
}

:where(html.tpl-mobile) .news-description p {
    margin-bottom: 10px;
}

:where(html.tpl-mobile) .news-description strong {
    font-weight: 600;
    color: #2d3e50;
}

:where(html.tpl-mobile) .news-description a {
    color: #003ca4;
    text-decoration: underline;
}

:where(html.tpl-mobile) .news-description a:hover {
    color: #a777e3;
}

:where(html.tpl-mobile) .news-description ul,
:where(html.tpl-mobile) .news-description ol {
    margin-left: 20px;
    margin-bottom: 10px;
}

:where(html.tpl-mobile) .news-description img {
    width: 200px !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 4px;
    margin: 10px auto;
    display: block;
    object-fit: contain;
}

:where(html.tpl-mobile) .news-description h1,
:where(html.tpl-mobile) .news-description h2,
:where(html.tpl-mobile) .news-description h3 {
    color: #2d3e50;
    margin-top: 15px;
    margin-bottom: 10px;
}

:where(html.tpl-mobile) .gif-placeholder {
    background-color: #f1f5fe;
    border-radius: 8px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 12px 0 20px;
    position: relative;
}

:where(html.tpl-mobile) .gif-placeholder::before {
    content: "GIF demonstrativo";
    position: absolute;
    color: #a777e3;
    font-weight: bold;
    font-size: 14px;
}

:where(html.tpl-mobile) .gif-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
}

:where(html.tpl-mobile) .slider-indicators {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

:where(html.tpl-mobile) .slider-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ddd;
    margin: 0 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

:where(html.tpl-mobile) .slider-indicator.active {
    background: #003ca4;
    transform: scale(1.2);
}

:where(html.tpl-mobile) .slider-controls {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

:where(html.tpl-mobile) .slider-btn {
    background: transparent;
    border: none;
    color: #003ca4;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

:where(html.tpl-mobile) .slider-btn:hover {
    color: #a777e3;
    background-color: #f1f5fe;
}

:where(html.tpl-mobile) .modal-footer-novidades {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    background-color: #f9fafc;
    border-top: 1px solid #eee;
}

:where(html.tpl-mobile) .btn-novidades {
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    font-size: 14px;
}

:where(html.tpl-mobile) .btn-primary-novidades {
    background: linear-gradient(135deg, #2a3f6f 0%, #4a6fa5 100%);
    color: white;
}

:where(html.tpl-mobile) .btn-primary-novidades:hover {
    background: linear-gradient(135deg, #2a3f6f 0%, #4a6fa5 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

:where(html.tpl-mobile) .btn-secondary-novidades {
    background-color: transparent;
    color: #888;
}

:where(html.tpl-mobile) .btn-secondary-novidades:hover {
    color: #555;
    background-color: #f1f1f1;
}

@media (max-width: 600px) {
    :where(html.tpl-mobile) .modal-novidades {
        max-width: 400px;
    }

    :where(html.tpl-mobile) .gif-placeholder {
        height: 150px;
    }

    :where(html.tpl-mobile) .modal-footer-novidades {
        flex-direction: column;
        gap: 8px;
    }

    :where(html.tpl-mobile) .btn-novidades {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 400px) {
    :where(html.tpl-mobile) .modal-novidades {
        max-width: 340px;
    }

    :where(html.tpl-mobile) .modal-header-novidades h2 {
        font-size: 18px;
    }

    :where(html.tpl-mobile) .news-content h3 {
        font-size: 16px;
    }

    :where(html.tpl-mobile) .gif-placeholder {
        height: 120px;
    }
}

:where(html.tpl-mobile) .bg-container {
    background-image: url('https://img.freepik.com/fotos-premium/fechar-a-pagina-do-calendario-no-conceito-de-reuniao-de-planejamento-de-negocios-de-fundo-azul_293060-976.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 140px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0px 0px 10px 10px;
}

:where(html.tpl-mobile) .status-indicator {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    margin-left: 15px;
    transition: all 0.3s ease;
}

:where(html.tpl-mobile) .status-active {
    background-color: #d4edda;
    color: #155724;
}

:where(html.tpl-mobile) .status-inactive {
    background-color: #f8d7da;
    color: #721c24;
}

/* ─── Calculadora flutuante (antigo calculadora-flutuante.css) ─── */
/* escopo: tpl-private */
/* Calculadora flutuante — painel arrastável, aberto pelo ícone da navbar. */

:where(html.tpl-private) #calcPainel {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 19000;
    width: 264px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .18);
    overflow: hidden;
    display: none;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
:where(html.tpl-private) #calcPainel.aberta { display: block; }

:where(html.tpl-private) #calcBarra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: .8rem;
    font-weight: 600;
    color: #334155;
    cursor: move;          /* a barra é a alça de arraste */
    user-select: none;
}
:where(html.tpl-private) #calcBarra .calc-acoes { display: flex; gap: 2px; }
:where(html.tpl-private) #calcBarra button {
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    font-size: .95rem;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 5px;
}
:where(html.tpl-private) #calcBarra button:hover { background: #e2e8f0; color: #0f172a; }

:where(html.tpl-private) #calcVisor {
    padding: 14px 14px 10px;
    font-size: 1.6rem;
    font-weight: 600;
    text-align: right;
    color: #0f172a;
    white-space: nowrap;
    overflow-x: auto;
    font-variant-numeric: tabular-nums;
}
:where(html.tpl-private) #calcVisor::-webkit-scrollbar { height: 0; }
:where(html.tpl-private) #calcVisor.calc-erro { color: #dc2626; animation: calcTremor .3s; }

@keyframes calcTremor {
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

:where(html.tpl-private) #calcTeclas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #e2e8f0;
    border-top: 1px solid #e2e8f0;
}
:where(html.tpl-private) #calcTeclas button {
    border: none;
    background: #fff;
    padding: 13px 0;
    font-size: 1rem;
    font-weight: 500;
    color: #0f172a;
    cursor: pointer;
    transition: background .1s;
}
:where(html.tpl-private) #calcTeclas button:hover  { background: #f1f5f9; }
:where(html.tpl-private) #calcTeclas button:active { background: #e2e8f0; }

:where(html.tpl-private) #calcTeclas .calc-fn    { background: #f8fafc; color: #64748b; font-size: .9rem; }
:where(html.tpl-private) #calcTeclas .calc-op    { background: #f8fafc; color: #2563eb; font-weight: 600; }
:where(html.tpl-private) #calcTeclas .calc-igual { grid-column: span 4; background: #2563eb; color: #fff; font-weight: 600; }
:where(html.tpl-private) #calcTeclas .calc-igual:hover { background: #1d4ed8; }

:where(html.tpl-private) #calcHistorico {
    max-height: 132px;
    overflow-y: auto;
    border-top: 1px solid #e2e8f0;
    background: #fafafa;
}
:where(html.tpl-private) .calc-hist-item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 12px;
    font-size: .75rem;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
}
:where(html.tpl-private) .calc-hist-item:hover { background: #f1f5f9; }
:where(html.tpl-private) .calc-hist-conta { color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(html.tpl-private) .calc-hist-res   { color: #0f172a; font-weight: 600; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
:where(html.tpl-private) .calc-hist-vazio { padding: 14px; text-align: center; color: #94a3b8; font-size: .75rem; font-style: italic; }

@media (max-width: 480px) {
    :where(html.tpl-private) #calcPainel { width: calc(100vw - 32px); right: 16px; left: 16px; }
}

@media print {
    :where(html.tpl-private) #calcPainel { display: none !important; }
}

/* ─── Banner do modo suporte dentro da casca de suporte ────────────────
   Dentro do iframe da casca de suporte a barra de cima já identifica o
   modo, e o banner viraria duplicata. O template marca o <html> com
   em-iframe quando a página está dentro de um iframe. */
:where(html.em-iframe) .sup-banner { display: none !important; }

/* ─── Chat widget — área logada ─── */
/* escopo: tpl-private, tpl-mobile */
/* Chat Widget Flutuante */
:where(html.tpl-private, html.tpl-mobile) .chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Botão flutuante */
:where(html.tpl-private, html.tpl-mobile) .chat-bubble {
    position: relative;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #2a3f6f 0%, #4a6fa5 100%);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(42, 63, 111, 0.4);
    animation: float 3s ease-in-out infinite;
}

:where(html.tpl-private, html.tpl-mobile) .chat-bubble:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 32px rgba(74, 111, 165, 0.5);
}

:where(html.tpl-private, html.tpl-mobile) .chat-bubble-content {
    position: relative;
    color: white;
}

:where(html.tpl-private, html.tpl-mobile) .chat-bubble-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff4757;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 2s infinite;
}

:where(html.tpl-private, html.tpl-mobile) .chat-bubble-text {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    color: #333;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

:where(html.tpl-private, html.tpl-mobile) .chat-bubble:hover .chat-bubble-text {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(-10px);
}

:where(html.tpl-private, html.tpl-mobile) .chat-bubble-text::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid white;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

/* Janela do chat */
:where(html.tpl-private, html.tpl-mobile) .chat-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 350px;
    height: 500px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:where(html.tpl-private, html.tpl-mobile) .chat-window-header {
    background: linear-gradient(135deg, #1d2d50 0%, #2a3f6f 100%);
    padding: 16px;
    display: flex;
    justify-content: between;
    align-items: center;
}

:where(html.tpl-private, html.tpl-mobile) .avatar-chat {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html.tpl-private, html.tpl-mobile) .online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #2ecc71;
    border-radius: 50%;
    margin-right: 6px;
    animation: blink 2s infinite;
}

:where(html.tpl-private, html.tpl-mobile) .btn-close-chat {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
    margin-left: auto;
}

:where(html.tpl-private, html.tpl-mobile) .btn-close-chat:hover {
    opacity: 1;
}

:where(html.tpl-private, html.tpl-mobile) .chat-window-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #f8f9fa;
    max-height: 350px;
    min-height: 200px;
}

:where(html.tpl-private, html.tpl-mobile) .message {
    margin-bottom: 12px;
    display: flex;
}

:where(html.tpl-private, html.tpl-mobile) .message.received {
    justify-content: flex-start;
}

:where(html.tpl-private, html.tpl-mobile) .message.sent {
    justify-content: flex-end;
}

:where(html.tpl-private, html.tpl-mobile) .message-bubble {
    max-width: 85%;
    min-width: fit-content;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    hyphens: none;
}

:where(html.tpl-private, html.tpl-mobile) .message.received .message-bubble {
    background: white;
    color: #333;
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:where(html.tpl-private, html.tpl-mobile) .message.sent .message-bubble {
    background: linear-gradient(135deg, #2a3f6f 0%, #4a6fa5 100%);
    color: #FFFFFF;
    border-bottom-right-radius: 4px;
    font-weight: 500;
}

:where(html.tpl-private, html.tpl-mobile) .message.ai-message .message-bubble {
    background: linear-gradient(135deg, #2a3f6f 0%, #1d2d50 100%);
    border: 1px solid #4a6fa5;
    color: #FFFFFF;
}

/* Input do chat */
:where(html.tpl-private, html.tpl-mobile) .chat-window-input {
    padding: 8px 12px;
    background: white;
    border-top: 1px solid #eee;
}

:where(html.tpl-private, html.tpl-mobile) .input-container {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
}

:where(html.tpl-private, html.tpl-mobile) .input-container input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 24px;
    outline: none;
    font-size: 14px;
    transition: border-color 0.2s;
}

:where(html.tpl-private, html.tpl-mobile) .input-container input:focus {
    border-color: #4a6fa5;
}

:where(html.tpl-private, html.tpl-mobile) .send-btn {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #2a3f6f 0%, #4a6fa5 100%);
    border: none;
    border-radius: 50%;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

:where(html.tpl-private, html.tpl-mobile) .send-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #4a6fa5 0%, #2a3f6f 100%);
    transform: scale(1.05);
}

:where(html.tpl-private, html.tpl-mobile) .send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Sugestões */
:where(html.tpl-private, html.tpl-mobile) .suggestions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

:where(html.tpl-private, html.tpl-mobile) .suggestion-btn {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: #6c757d;
}

:where(html.tpl-private, html.tpl-mobile) .suggestion-btn:hover {
    background: linear-gradient(135deg, #2a3f6f 0%, #4a6fa5 100%);
    color: #FFFFFF;
    border-color: #4a6fa5;
    font-weight: 500;
}

/* Typing animation */
:where(html.tpl-private, html.tpl-mobile) .typing-animation {
    display: flex;
    gap: 4px;
    align-items: center;
}

:where(html.tpl-private, html.tpl-mobile) .typing-animation span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4a6fa5;
    animation: typing 1.4s infinite;
}

:where(html.tpl-private, html.tpl-mobile) .typing-animation span:nth-child(2) {
    animation-delay: 0.2s;
}

:where(html.tpl-private, html.tpl-mobile) .typing-animation span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Animações */
@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

@keyframes blink {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0.3;
    }
}

@keyframes typing {

    0%,
    60%,
    100% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-10px);
    }
}

/* Mobile responsive */
/* Para tablets em modo retrato */
@media (max-width: 768px) {
    :where(html.tpl-private, html.tpl-mobile) .chat-window {
        position: fixed !important;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 80px;
        width: auto;
        height: auto;
        max-height: calc(100vh - 90px);
        max-width: none;
    }

    :where(html.tpl-private, html.tpl-mobile) .chat-bubble {
        width: 55px;
        height: 55px;
    }

    :where(html.tpl-private, html.tpl-mobile) .chat-bubble-text {
        font-size: 13px;
        padding: 6px 12px;
        right: 65px;
    }

    :where(html.tpl-private, html.tpl-mobile) .chat-window-messages {
        max-height: calc(100vh - 280px);
        min-height: 150px;
        padding: 12px;
    }

    :where(html.tpl-private, html.tpl-mobile) .message-bubble {
        max-width: 85%;
        min-width: fit-content;
        font-size: 13px;
        padding: 10px 14px;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
        hyphens: none;
    }

    :where(html.tpl-private, html.tpl-mobile) .suggestions {
        flex-direction: column;
        gap: 6px;
    }

    :where(html.tpl-private, html.tpl-mobile) .suggestion-btn {
        width: 100%;
        text-align: center;
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* Para smartphones */
@media (max-width: 480px) {
    :where(html.tpl-private, html.tpl-mobile) .chat-widget {
        bottom: 10px;
        right: 10px;
    }

    :where(html.tpl-private, html.tpl-mobile) .chat-window {
        position: fixed !important;
        top: 100px;
        left: 10px;
        right: 10px;
        bottom: 95px;
        width: auto;
        height: auto;
        max-height: calc(100vh - 195px);
        max-width: none;
    }

    :where(html.tpl-private, html.tpl-mobile) .chat-bubble {
        width: 50px;
        height: 50px;
    }

    :where(html.tpl-private, html.tpl-mobile) .chat-bubble-text {
        display: none;
    }

    :where(html.tpl-private, html.tpl-mobile) .chat-window-header {
        padding: 12px;
    }

    :where(html.tpl-private, html.tpl-mobile) .chat-window-header h6 {
        font-size: 14px;
    }

    :where(html.tpl-private, html.tpl-mobile) .avatar-chat {
        width: 35px;
        height: 35px;
    }

    :where(html.tpl-private, html.tpl-mobile) .chat-window-messages {
        padding: 10px;
        max-height: calc(100vh - 260px);
        min-height: 120px;
    }

    :where(html.tpl-private, html.tpl-mobile) .message {
        margin-bottom: 8px;
    }

    :where(html.tpl-private, html.tpl-mobile) .message-bubble {
        max-width: 90%;
        min-width: fit-content;
        font-size: 13px;
        padding: 8px 12px;
        line-height: 1.4;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
        hyphens: none;
    }

    :where(html.tpl-private, html.tpl-mobile) .chat-window-input {
        padding: 8px 12px;
    }

    :where(html.tpl-private, html.tpl-mobile) .input-container input {
        padding: 10px 14px;
        font-size: 13px;
    }

    :where(html.tpl-private, html.tpl-mobile) .send-btn {
        width: 40px;
        height: 40px;
    }
}

/* Para smartphones muito pequenos */
@media (max-width: 360px) {
    :where(html.tpl-private, html.tpl-mobile) .chat-window {
        position: fixed !important;
        top: 100px;
        left: 10px;
        right: 10px;
        bottom: 95px;
        width: auto;
        height: auto;
        max-height: calc(100vh - 195px);
        max-width: none;
        border-radius: 10px;
    }

    :where(html.tpl-private, html.tpl-mobile) .chat-bubble {
        width: 45px;
        height: 45px;
    }

    :where(html.tpl-private, html.tpl-mobile) .chat-window-messages {
        padding: 8px;
        max-height: calc(100vh - 240px);
    }

    :where(html.tpl-private, html.tpl-mobile) .message-bubble {
        font-size: 12px;
        min-width: fit-content;
        padding: 7px 10px;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
        hyphens: none;
    }
}

:where(html.tpl-private, html.tpl-mobile) .suggestion-btn {
    font-size: 11px;
    padding: 6px 10px;
}

/* Scrollbar personalizada */

:where(html.tpl-private, html.tpl-mobile) .chat-window-messages::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
    margin: 4px;
}

:where(html.tpl-private, html.tpl-mobile) .chat-window-messages::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
    border: 1px solid #f1f1f1;
}

:where(html.tpl-private, html.tpl-mobile) .chat-window-messages::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

:where(html.tpl-private, html.tpl-mobile) .chat-window-messages::-webkit-scrollbar-thumb:active {
    background: #999999;
}

/* Scrollbar para Firefox */
:where(html.tpl-private, html.tpl-mobile) .chat-window-messages {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* Otimizações específicas para touch devices */
:where(html.tpl-private, html.tpl-mobile) .mobile-optimized .chat-window {
    -webkit-overflow-scrolling: touch;
}

:where(html.tpl-private, html.tpl-mobile) .mobile-optimized .chat-window-messages {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Melhorar área de toque para elementos interativos */
@media (max-width: 768px) {
    :where(html.tpl-private, html.tpl-mobile) .chat-bubble {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    :where(html.tpl-private, html.tpl-mobile) .send-btn,
    :where(html.tpl-private, html.tpl-mobile) .suggestion-btn,
    :where(html.tpl-private, html.tpl-mobile) .btn-close-chat {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        min-height: 44px;
        /* Apple guidelines para área mínima de toque */
        min-width: 44px;
    }

    :where(html.tpl-private, html.tpl-mobile) .suggestion-btn {
        min-height: 40px;
    }

    /* Melhorar legibilidade em telas pequenas */
    :where(html.tpl-private, html.tpl-mobile) .message-bubble {
        white-space: normal;
        word-break: keep-all;
        word-wrap: normal;
        overflow-wrap: anywhere;
        hyphens: none;
    }

    /* Otimizar animações para dispositivos móveis */
    :where(html.tpl-private, html.tpl-mobile) .chat-bubble {
        will-change: transform;
    }

    :where(html.tpl-private, html.tpl-mobile) .chat-window {
        will-change: opacity, transform;
    }
}

/* Otimizações para iOS Safari */
@supports (-webkit-touch-callout: none) {
    :where(html.tpl-private, html.tpl-mobile) .mobile-optimized .chat-window {
        -webkit-text-size-adjust: none;
    }

    :where(html.tpl-private, html.tpl-mobile) .mobile-optimized .chat-window-input input {
        -webkit-appearance: none;
        border-radius: 24px;
    }
}

/* ─── Chat widget — site ─── */
/* escopo: tpl-site */
/* Chat Widget Flutuante */
:where(html.tpl-site) .chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Botão flutuante */
:where(html.tpl-site) .chat-bubble {
    position: relative;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #2a3f6f 0%, #4a6fa5 100%);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(42, 63, 111, 0.4);
    animation: float 3s ease-in-out infinite;
}

:where(html.tpl-site) .chat-bubble:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 32px rgba(74, 111, 165, 0.5);
}

:where(html.tpl-site) .chat-bubble-content {
    position: relative;
    color: white;
}

:where(html.tpl-site) .chat-bubble-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff4757;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 2s infinite;
}

:where(html.tpl-site) .chat-bubble-text {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    color: #333;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

:where(html.tpl-site) .chat-bubble:hover .chat-bubble-text {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(-10px);
}

:where(html.tpl-site) .chat-bubble-text::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid white;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

/* Janela do chat */
:where(html.tpl-site) .chat-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 350px;
    height: 500px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:where(html.tpl-site) .chat-window-header {
    background: linear-gradient(135deg, #1d2d50 0%, #2a3f6f 100%);
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

:where(html.tpl-site) .avatar-chat {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html.tpl-site) .online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #2ecc71;
    border-radius: 50%;
    margin-right: 6px;
    animation: blink 2s infinite;
}

:where(html.tpl-site) .btn-close-chat {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}

:where(html.tpl-site) .btn-close-chat:hover {
    opacity: 1;
}

:where(html.tpl-site) .chat-window-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #f8f9fa;
    max-height: 350px;
    min-height: 200px;
}

:where(html.tpl-site) .message {
    margin-bottom: 12px;
    display: flex;
}

:where(html.tpl-site) .message.received {
    justify-content: flex-start;
}

:where(html.tpl-site) .message.sent {
    justify-content: flex-end;
}

:where(html.tpl-site) .message-bubble {
    max-width: 85%;
    min-width: fit-content;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    hyphens: none;
}

:where(html.tpl-site) .message.received .message-bubble {
    background: white;
    color: #333;
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

:where(html.tpl-site) .message.sent .message-bubble {
    background: linear-gradient(135deg, #2a3f6f 0%, #4a6fa5 100%);
    color: #FFFFFF;
    border-bottom-right-radius: 4px;
    font-weight: 500;
}

:where(html.tpl-site) .message.ai-message .message-bubble {
    background: linear-gradient(135deg, #2a3f6f 0%, #1d2d50 100%);
    border: 1px solid #4a6fa5;
    color: #FFFFFF;
}

/* Input do chat */
:where(html.tpl-site) .chat-window-input {
    padding: 8px 12px;
    background: white;
    border-top: 1px solid #eee;
}

:where(html.tpl-site) .input-container {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
}

:where(html.tpl-site) .input-container input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 24px;
    outline: none;
    font-size: 14px;
    transition: border-color 0.2s;
}

:where(html.tpl-site) .input-container input:focus {
    border-color: #4a6fa5;
}

:where(html.tpl-site) .send-btn {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #2a3f6f 0%, #4a6fa5 100%);
    border: none;
    border-radius: 50%;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

:where(html.tpl-site) .send-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #4a6fa5 0%, #2a3f6f 100%);
    transform: scale(1.05);
}

:where(html.tpl-site) .send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Sugestões */
:where(html.tpl-site) .suggestions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

:where(html.tpl-site) .suggestion-btn {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: #6c757d;
}

:where(html.tpl-site) .suggestion-btn:hover {
    background: linear-gradient(135deg, #2a3f6f 0%, #4a6fa5 100%);
    color: #FFFFFF;
    border-color: #4a6fa5;
    font-weight: 500;
}

:where(html.tpl-site) .chat-disclaimer {
    border-top: 1px solid #eee;
    padding-top: 8px;
    margin-top: 8px;
}

:where(html.tpl-site) .chat-disclaimer a {
    color: #4a6fa5;
    text-decoration: none;
}

:where(html.tpl-site) .chat-disclaimer a:hover {
    text-decoration: underline;
}

/* Typing animation */
:where(html.tpl-site) .typing-animation {
    display: flex;
    gap: 4px;
    align-items: center;
}

:where(html.tpl-site) .typing-animation span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4a6fa5;
    animation: typing 1.4s infinite;
}

:where(html.tpl-site) .typing-animation span:nth-child(2) { animation-delay: 0.2s; }
:where(html.tpl-site) .typing-animation span:nth-child(3) { animation-delay: 0.4s; }

/* Animações */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.3; }
}

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-10px); }
}

/* Mobile responsive */
/* Para tablets em modo retrato */
@media (max-width: 768px) {
    :where(html.tpl-site) .chat-window {
        position: fixed !important;
        top: auto !important;
        left: 50% !important;
        right: auto !important;
        bottom: 80px !important;
        width: 340px !important;
        height: 500px !important;
        max-height: 500px !important;
        max-width: none !important;
        transform: translateX(-50%) !important;
    }

    :where(html.tpl-site) .chat-bubble {
        width: 70px;
        height: 70px;
    }

    :where(html.tpl-site) .chat-bubble-content i {
        font-size: 1.8rem !important;
    }

    :where(html.tpl-site) .chat-bubble-text {
        font-size: 13px;
        padding: 6px 12px;
        right: 65px;
    }

    :where(html.tpl-site) .chat-window-messages {
        max-height: calc(100vh - 280px);
        min-height: 150px;
        padding: 12px;
    }

    :where(html.tpl-site) .message-bubble {
        max-width: 85%;
        min-width: fit-content;
        font-size: 13px;
        padding: 10px 14px;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
        hyphens: none;
    }

    :where(html.tpl-site) .suggestions {
        flex-direction: column;
        gap: 6px;
    }

    :where(html.tpl-site) .suggestion-btn {
        width: 100%;
        text-align: center;
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* Para smartphones */
@media (max-width: 480px) {
    :where(html.tpl-site) .chat-widget {
        bottom: 15px;
        right: 15px;
    }

    :where(html.tpl-site) .chat-window {
        position: fixed !important;
        top: 100px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 95px !important;
        width: auto !important;
        height: auto !important;
        max-height: calc(100vh - 195px) !important;
        max-width: none !important;
        border-radius: 12px !important;
        transform: none !important;
    }

    :where(html.tpl-site) .chat-bubble {
        width: 65px;
        height: 65px;
    }

    :where(html.tpl-site) .chat-bubble-content i {
        font-size: 1.7rem !important;
    }

    :where(html.tpl-site) .chat-bubble-text {
        display: none;
    }

    :where(html.tpl-site) .chat-window-header {
        padding: 12px;
    }

    :where(html.tpl-site) .chat-window-header h6 {
        font-size: 14px;
    }

    :where(html.tpl-site) .avatar-chat {
        width: 35px;
        height: 35px;
    }

    :where(html.tpl-site) .chat-window-messages {
        padding: 10px;
        max-height: 250px !important;
        height: 250px !important;
        min-height: 250px !important;
    }

    :where(html.tpl-site) .message {
        margin-bottom: 8px;
    }

    :where(html.tpl-site) .message-bubble {
        max-width: 90%;
        min-width: fit-content;
        font-size: 13px;
        padding: 8px 12px;
        line-height: 1.4;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
        hyphens: none;
    }

    :where(html.tpl-site) .chat-window-input {
        padding: 8px 12px;
    }

    :where(html.tpl-site) .input-container input {
        padding: 10px 14px;
        font-size: 13px;
    }

    :where(html.tpl-site) .send-btn {
        width: 40px;
        height: 40px;
    }

    :where(html.tpl-site) .chat-disclaimer {
        margin-top: 6px;
        padding-top: 6px;
    }

    :where(html.tpl-site) .chat-disclaimer small {
        font-size: 10px;
    }
}

/* Para smartphones muito pequenos */
@media (max-width: 360px) {
    :where(html.tpl-site) .chat-window {
        position: fixed !important;
        top: 100px !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 95px !important;
        width: auto !important;
        height: auto !important;
        max-height: calc(100vh - 195px) !important;
        max-width: none !important;
        border-radius: 10px !important;
        transform: none !important;
    }

    :where(html.tpl-site) .chat-bubble {
        width: 60px;
        height: 60px;
    }

    :where(html.tpl-site) .chat-bubble-content i {
        font-size: 1.6rem !important;
    }

    :where(html.tpl-site) .chat-window-messages {
        padding: 8px;
        max-height: 220px !important;
        height: 220px !important;
        min-height: 220px !important;
    }

    :where(html.tpl-site) .message-bubble {
        font-size: 12px;
        min-width: fit-content;
        padding: 7px 10px;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
        hyphens: none;
    }

    :where(html.tpl-site) .suggestion-btn {
        font-size: 11px;
        padding: 6px 10px;
    }
}

/* Scrollbar personalizada */
:where(html.tpl-site) .chat-window-messages::-webkit-scrollbar {
    width: 8px;
}

:where(html.tpl-site) .chat-window-messages::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
    margin: 4px;
}

:where(html.tpl-site) .chat-window-messages::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
    border: 1px solid #f1f1f1;
}

:where(html.tpl-site) .chat-window-messages::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

:where(html.tpl-site) .chat-window-messages::-webkit-scrollbar-thumb:active {
    background: #999999;
}

/* Scrollbar para Firefox */
:where(html.tpl-site) .chat-window-messages {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* Otimizações específicas para touch devices */
:where(html.tpl-site) .mobile-optimized .chat-window {
    -webkit-overflow-scrolling: touch;
}

:where(html.tpl-site) .mobile-optimized .chat-window-messages {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Melhorar área de toque para elementos interativos */
@media (max-width: 768px) {
    :where(html.tpl-site) .chat-bubble {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    :where(html.tpl-site) .send-btn, :where(html.tpl-site) .suggestion-btn, :where(html.tpl-site) .btn-close-chat {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        min-height: 44px; /* Apple guidelines para área mínima de toque */
        min-width: 44px;
    }

    :where(html.tpl-site) .suggestion-btn {
        min-height: 40px;
    }

    /* Melhorar legibilidade em telas pequenas */
    :where(html.tpl-site) .message-bubble {
        white-space: normal;
        word-break: keep-all;
        word-wrap: normal;
        overflow-wrap: anywhere;
        hyphens: none;
        hyphens: auto;
    }

    /* Otimizar animações para dispositivos móveis */
    :where(html.tpl-site) .chat-bubble {
        will-change: transform;
    }

    :where(html.tpl-site) .chat-window {
        will-change: opacity, transform;
    }
}

/* Otimizações para iOS Safari */
@supports (-webkit-touch-callout: none) {
    :where(html.tpl-site) .mobile-optimized .chat-window {
        -webkit-text-size-adjust: none;
    }

    :where(html.tpl-site) .mobile-optimized .chat-window-input input {
        -webkit-appearance: none;
        border-radius: 24px;
    }
}

/* ─── Login ─── */
/* escopo: pg-public-login-index */
:where(html.pg-public-login-index) * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:where(html.pg-public-login-index) body {
    font-family: 'Poppins', sans-serif;
}

:where(html.pg-public-login-index) .login-container {
    display: flex;
    min-height: 100vh;
    background: #ffffff;
}

:where(html.pg-public-login-index) .login-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 40px;
    background: #f1f5f9;
}

:where(html.pg-public-login-index) .login-content-wrapper {
    width: 100%;
    max-width: 370px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

:where(html.pg-public-login-index) .login-form-wrapper {
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

:where(html.pg-public-login-index) .login-card-header {
    background: #003ca6;
    padding: 24px 30px;
    text-align: center;
}

:where(html.pg-public-login-index) .login-card-header .login-title {
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

:where(html.pg-public-login-index) .login-card-header p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    margin: 6px 0 0 0;
}

:where(html.pg-public-login-index) .login-card-body {
    padding: 30px;
}

:where(html.pg-public-login-index) .logo-finitya {
    margin-bottom: 30px;
    text-align: center;
    width: 100%;
}

:where(html.pg-public-login-index) .logo-finitya img {
    height: 40px;
    width: auto;
}

:where(html.pg-public-login-index) .login-title {
    font-size: 28px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 50px;
}

:where(html.pg-public-login-index) .form-group {
    margin-bottom: 16px;
}

:where(html.pg-public-login-index) .form-label {
    display: block;
    font-size: 13px;
    color: #333333;
    margin-bottom: 6px;
    font-weight: 600;
}

:where(html.pg-public-login-index) .email-wrapper {
    position: relative;
}

:where(html.pg-public-login-index) .email-wrapper .form-input {
    padding-left: 40px;
}

:where(html.pg-public-login-index) .email-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 18px;
    pointer-events: none;
}

:where(html.pg-public-login-index) .form-input {
    width: 100%;
    padding: 10px 16px;
    font-size: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #ffffff;
    transition: all 0.3s ease;
}

:where(html.pg-public-login-index) .form-input::placeholder {
    color: #999999;
}

:where(html.pg-public-login-index) .form-input:focus {
    outline: none;
    border-color: #1e4a9f;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(30, 74, 159, 0.1);
}

:where(html.pg-public-login-index) .password-wrapper {
    position: relative;
}

:where(html.pg-public-login-index) .password-wrapper .form-input {
    padding-right: 45px;
}

:where(html.pg-public-login-index) .password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 18px;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html.pg-public-login-index) .save-login {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    cursor: pointer;
}

:where(html.pg-public-login-index) .save-login input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #1e4a9f;
}

:where(html.pg-public-login-index) .save-login label {
    font-size: 13px;
    color: #4a4a4a;
    cursor: pointer;
    user-select: none;
}

:where(html.pg-public-login-index) .btn-login {
    width: 100%;
    padding: 11px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background: #b0b0b0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

:where(html.pg-public-login-index) .btn-login:hover {
    background: #9a9a9a;
}

:where(html.pg-public-login-index) .btn-login.active {
    background: #1e4a9f;
}

:where(html.pg-public-login-index) .btn-login.active:hover {
    background: #163a7f;
}

:where(html.pg-public-login-index) .forgot-password {
    text-align: center;
}

:where(html.pg-public-login-index) .forgot-password a {
    color: #1e4a9f;
    text-decoration: underline;
    font-size: 13px;
    font-weight: 500;
}

:where(html.pg-public-login-index) .forgot-password a:hover {
    color: #163a7f;
}

:where(html.pg-public-login-index) .register-link {
    text-align: center;
    font-size: 13px;
    color: #999999;
    margin-top: 24px;
    width: 100%;
}

:where(html.pg-public-login-index) .register-link a {
    color: #1e4a9f;
    text-decoration: none;
    font-weight: 600;
}

:where(html.pg-public-login-index) .register-link a:hover {
    text-decoration: underline;
}

:where(html.pg-public-login-index) .login-right {
    flex: 0 0 30%;
    background: #003ca6;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0;
    position: relative;
    overflow: hidden;
}

:where(html.pg-public-login-index) .login-right::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    top: -100px;
    right: -100px;
}

:where(html.pg-public-login-index) .login-right::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    bottom: 100px;
    left: -50px;
}

:where(html.pg-public-login-index) .right-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: 40px 0 0 40px;
}

:where(html.pg-public-login-index) .right-content h2 {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: auto;
    padding-right: 40px;
    max-width: 400px;
    text-align: left;
}

:where(html.pg-public-login-index) .business-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

:where(html.pg-public-login-index) .business-image img {
    max-width: 90%;
    height: auto;
    display: block;
}

:where(html.pg-public-login-index) .circle {
    position: absolute;
    border-radius: 50%;
}

:where(html.pg-public-login-index) .circle-1 {
    width: 180px;
    height: 180px;
    background: #00d4ff;
    top: 5%;
    right: 10%;
}

:where(html.pg-public-login-index) .circle-2 {
    width: 150px;
    height: 150px;
    background: #c4e538;
    top: 8%;
    right: 35%;
}

:where(html.pg-public-login-index) .circle-3 {
    width: 120px;
    height: 120px;
    background: #00d4a3;
    bottom: 15%;
    left: 5%;
}

:where(html.pg-public-login-index) .circle-4 {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.15);
    bottom: 40%;
    right: 8%;
}

:where(html.pg-public-login-index) .circle-5 {
    width: 80px;
    height: 80px;
    background: rgba(196, 229, 56, 0.6);
    bottom: 5%;
    left: 25%;
}

/* Responsive */
@media (max-width: 1200px) {
    :where(html.pg-public-login-index) .login-right {
        flex: 0 0 35%;
    }

    :where(html.pg-public-login-index) .right-content h2 {
        font-size: 26px;
    }
}

@media (max-width: 992px) {
    :where(html.pg-public-login-index) .login-right {
        display: none;
    }

    :where(html.pg-public-login-index) .login-left {
        flex: 1;
    }
}

@media (max-width: 576px) {
    :where(html.pg-public-login-index) .login-left {
        padding: 20px;
    }

    :where(html.pg-public-login-index) .login-content-wrapper {
        max-width: 100%;
    }

    :where(html.pg-public-login-index) .login-card-header .login-title {
        font-size: 20px;
    }

    :where(html.pg-public-login-index) .login-card-header {
        padding: 24px;
    }

    :where(html.pg-public-login-index) .login-card-body {
        padding: 24px 20px;
    }

    :where(html.pg-public-login-index) .logo-finitya {
        margin-bottom: 24px;
    }

    :where(html.pg-public-login-index) .logo-finitya img {
        height: 35px;
    }

    :where(html.pg-public-login-index) .register-link {
        margin-top: 20px;
        font-size: 12px;
    }
}

@media (max-width: 1199px) {
    :where(html.pg-public-login-index) .register-desktop {
        display: none;
    }
}

@media (min-width: 1200px) {
    :where(html.pg-public-login-index) .register-desktop {
        display: block;
    }
}

/* Animação suave no carregamento */
:where(html.pg-public-login-index) .login-form-wrapper {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

:where(html.pg-public-login-index) .invalid-feedback {
    display: none;
    color: #dc3545;
    font-size: 13px;
    margin-top: 4px;
}

:where(html.pg-public-login-index) .form-input.is-invalid {
    border-color: #dc3545;
}

:where(html.pg-public-login-index) .form-input.is-invalid~.invalid-feedback {
    display: block;
}

/* ─── Login — esqueci a senha ─── */
/* escopo: pg-public-login-esqueceu */
:where(html.pg-public-login-esqueceu) * { margin: 0; padding: 0; box-sizing: border-box; }

:where(html.pg-public-login-esqueceu) body { font-family: 'Poppins', sans-serif; }

:where(html.pg-public-login-esqueceu) .recover-container {
    display: flex;
    min-height: 100vh;
    background: #f1f5f9;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

:where(html.pg-public-login-esqueceu) .recover-wrapper {
    width: 100%;
    max-width: 440px;
}

:where(html.pg-public-login-esqueceu) .recover-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

:where(html.pg-public-login-esqueceu) .recover-header {
    background: #003ca6;
    padding: 28px 32px;
    text-align: center;
}

:where(html.pg-public-login-esqueceu) .recover-header h1 {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

:where(html.pg-public-login-esqueceu) .recover-header p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    margin: 6px 0 0 0;
}

:where(html.pg-public-login-esqueceu) .recover-body { padding: 32px; }

:where(html.pg-public-login-esqueceu) .alert-info {
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 24px;
    font-size: 13px;
    color: #1565c0;
    line-height: 1.5;
}

:where(html.pg-public-login-esqueceu) .form-group { margin-bottom: 20px; }

:where(html.pg-public-login-esqueceu) .form-label {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 500;
}

:where(html.pg-public-login-esqueceu) .form-control {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    transition: border-color 0.25s;
    outline: none;
}

:where(html.pg-public-login-esqueceu) .form-control:focus { border-color: #003ca6; }

:where(html.pg-public-login-esqueceu) .btn-primary {
    width: 100%;
    padding: 12px;
    background: #003ca6;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: background 0.25s;
}

:where(html.pg-public-login-esqueceu) .btn-primary:hover { background: #002d80; }

:where(html.pg-public-login-esqueceu) .btn-primary:disabled { background: #b0b0b0; cursor: not-allowed; }

:where(html.pg-public-login-esqueceu) .link-voltar {
    display: block;
    text-align: center;
    margin-top: 18px;
    color: #003ca6;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}

:where(html.pg-public-login-esqueceu) .link-voltar:hover { color: #002d80; text-decoration: underline; }

:where(html.pg-public-login-esqueceu) #msg-area { margin-top: 16px; min-height: 20px; }

/* ─── Login — redefinir senha ─── */
/* escopo: pg-public-login-resetar-senha */
:where(html.pg-public-login-resetar-senha) * { margin: 0; padding: 0; box-sizing: border-box; }

:where(html.pg-public-login-resetar-senha) body { font-family: 'Poppins', sans-serif; }

:where(html.pg-public-login-resetar-senha) .reset-container {
    display: flex;
    min-height: 100vh;
    background: #f1f5f9;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

:where(html.pg-public-login-resetar-senha) .reset-wrapper { width: 100%; max-width: 440px; }

:where(html.pg-public-login-resetar-senha) .reset-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

:where(html.pg-public-login-resetar-senha) .reset-header {
    background: #003ca6;
    padding: 28px 32px;
    text-align: center;
}

:where(html.pg-public-login-resetar-senha) .reset-header h1 {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

:where(html.pg-public-login-resetar-senha) .reset-header p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    margin: 6px 0 0 0;
}

:where(html.pg-public-login-resetar-senha) .reset-body { padding: 32px; }

:where(html.pg-public-login-resetar-senha) .form-group { margin-bottom: 20px; }

:where(html.pg-public-login-resetar-senha) .form-label {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 500;
}

:where(html.pg-public-login-resetar-senha) .form-control {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    transition: border-color 0.25s;
    outline: none;
}

:where(html.pg-public-login-resetar-senha) .form-control:focus { border-color: #003ca6; }

:where(html.pg-public-login-resetar-senha) .password-wrapper { position: relative; }

:where(html.pg-public-login-resetar-senha) .toggle-pass {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
    font-size: 15px;
    user-select: none;
}

:where(html.pg-public-login-resetar-senha) .strength-bar {
    height: 4px;
    border-radius: 2px;
    margin-top: 6px;
    transition: background 0.3s, width 0.3s;
    width: 0;
}

:where(html.pg-public-login-resetar-senha) .form-hint { font-size: 12px; color: #999; margin-top: 4px; }

:where(html.pg-public-login-resetar-senha) .btn-primary {
    width: 100%;
    padding: 12px;
    background: #003ca6;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: background 0.25s;
}

:where(html.pg-public-login-resetar-senha) .btn-primary:hover { background: #002d80; }
:where(html.pg-public-login-resetar-senha) .btn-primary:disabled { background: #b0b0b0; cursor: not-allowed; }

:where(html.pg-public-login-resetar-senha) .link-voltar {
    display: block;
    text-align: center;
    margin-top: 18px;
    color: #003ca6;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s;
}

:where(html.pg-public-login-resetar-senha) .link-voltar:hover { color: #002d80; text-decoration: underline; }

:where(html.pg-public-login-resetar-senha) #msg-area { margin-top: 16px; min-height: 20px; }

/* ─── Login — verificação em duas etapas ─── */
/* escopo: pg-public-login-validate-2fa */
:where(html.pg-public-login-validate-2fa) * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:where(html.pg-public-login-validate-2fa) body {
    font-family: 'Poppins', sans-serif;
}

:where(html.pg-public-login-validate-2fa) .twofa-container {
    display: flex;
    min-height: 100vh;
    background: #f1f5f9;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

:where(html.pg-public-login-validate-2fa) .twofa-content-wrapper {
    width: 100%;
    max-width: 450px;
}

:where(html.pg-public-login-validate-2fa) .twofa-form-wrapper {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

:where(html.pg-public-login-validate-2fa) .twofa-card-header {
    background: #003ca6;
    padding: 24px 30px;
    text-align: center;
}

:where(html.pg-public-login-validate-2fa) .twofa-card-header .twofa-title {
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

:where(html.pg-public-login-validate-2fa) .twofa-card-header p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    margin: 6px 0 0 0;
}

:where(html.pg-public-login-validate-2fa) .twofa-card-body {
    padding: 35px 30px;
}

:where(html.pg-public-login-validate-2fa) .alert-info {
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 25px;
    font-size: 13px;
    color: #1565c0;
}

:where(html.pg-public-login-validate-2fa) .form-group {
    margin-bottom: 20px;
}

:where(html.pg-public-login-validate-2fa) .form-label {
    display: block;
    font-size: 14px;
    color: #333333;
    margin-bottom: 8px;
    font-weight: 600;
}

:where(html.pg-public-login-validate-2fa) .code-input-wrapper {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 20px 0;
}

:where(html.pg-public-login-validate-2fa) .code-input {
    width: 50px;
    height: 60px;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
}

:where(html.pg-public-login-validate-2fa) .code-input:focus {
    outline: none;
    border-color: #1e4a9f;
    box-shadow: 0 0 0 3px rgba(30, 74, 159, 0.1);
}

:where(html.pg-public-login-validate-2fa) .remember-device {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0;
    cursor: pointer;
}

:where(html.pg-public-login-validate-2fa) .remember-device input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #1e4a9f;
}

:where(html.pg-public-login-validate-2fa) .remember-device label {
    font-size: 13px;
    color: #4a4a4a;
    cursor: pointer;
    user-select: none;
}

:where(html.pg-public-login-validate-2fa) .btn-verify {
    width: 100%;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background: #1e4a9f;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

:where(html.pg-public-login-validate-2fa) .btn-verify:hover {
    background: #164080;
    transform: translateY(-1px);
}

:where(html.pg-public-login-validate-2fa) .btn-verify:disabled {
    background: #b0b0b0;
    cursor: not-allowed;
}

:where(html.pg-public-login-validate-2fa) .text-center {
    text-align: center;
}

:where(html.pg-public-login-validate-2fa) .link-voltar {
    display: inline-block;
    margin-top: 20px;
    color: #1e4a9f;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.3s ease;
}

:where(html.pg-public-login-validate-2fa) .link-voltar:hover {
    color: #164080;
    text-decoration: underline;
}

:where(html.pg-public-login-validate-2fa) .backup-code-hint {
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    color: #666;
}

:where(html.pg-public-login-validate-2fa) .backup-code-hint a {
    color: #1e4a9f;
    cursor: pointer;
    text-decoration: none;
}

:where(html.pg-public-login-validate-2fa) .backup-code-hint a:hover {
    text-decoration: underline;
}

:where(html.pg-public-login-validate-2fa) .spinner {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 2px solid white;
    width: 16px;
    height: 16px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 480px) {
    :where(html.pg-public-login-validate-2fa) .twofa-container {
        padding: 10px;
    }

    :where(html.pg-public-login-validate-2fa) .code-input {
        width: 42px;
        height: 52px;
        font-size: 20px;
    }

    :where(html.pg-public-login-validate-2fa) .twofa-card-body {
        padding: 25px 20px;
    }
}

/* ─── Pré-cadastro ─── */
/* escopo: pg-public-precadastro-index */
:where(html.pg-public-precadastro-index) * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:where(html.pg-public-precadastro-index) body {
    font-family: 'Poppins', sans-serif;
}

:where(html.pg-public-precadastro-index) .login-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: #ffffff;
}

:where(html.pg-public-precadastro-index) .login-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 30px 40px;
    background: #f1f5f9;
    overflow-y: auto;
    height: 100vh;
}

:where(html.pg-public-precadastro-index) .login-content-wrapper {
    width: 100%;
    max-width: 430px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}

:where(html.pg-public-precadastro-index) .login-form-wrapper {
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

:where(html.pg-public-precadastro-index) .login-card-header {
    background: #003ca6;
    padding: 24px 30px;
    text-align: center;
}

:where(html.pg-public-precadastro-index) .login-card-header .login-title {
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

:where(html.pg-public-precadastro-index) .login-card-header p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    margin: 6px 0 0 0;
}

:where(html.pg-public-precadastro-index) .login-card-body {
    padding: 30px;
}

:where(html.pg-public-precadastro-index) .logo-finitya {
    margin-bottom: 30px;
    text-align: center;
    width: 100%;
}

:where(html.pg-public-precadastro-index) .logo-finitya img {
    height: 40px;
    width: auto;
}

:where(html.pg-public-precadastro-index) .form-group {
    margin-bottom: 16px;
}

:where(html.pg-public-precadastro-index) .form-label {
    display: block;
    font-size: 13px;
    color: #333333;
    margin-bottom: 6px;
    font-weight: 600;
}

:where(html.pg-public-precadastro-index) .form-input {
    width: 100%;
    padding: 10px 16px;
    font-size: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #ffffff;
    transition: all 0.3s ease;
}

:where(html.pg-public-precadastro-index) .form-input::placeholder {
    color: #999999;
}

:where(html.pg-public-precadastro-index) .form-input:focus {
    outline: none;
    border-color: #1e4a9f;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(30, 74, 159, 0.1);
}

:where(html.pg-public-precadastro-index) .password-wrapper {
    position: relative;
}

:where(html.pg-public-precadastro-index) .password-wrapper .form-input {
    padding-right: 45px;
}

:where(html.pg-public-precadastro-index) .password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 18px;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html.pg-public-precadastro-index) .section-divider {
    border: 0;
    border-top: 1px solid #e0e0e0;
    margin: 20px 0 16px;
}

:where(html.pg-public-precadastro-index) .section-title {
    font-size: 13px;
    font-weight: 700;
    color: #003ca6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

:where(html.pg-public-precadastro-index) .password-hints {
    font-size: 12px;
    color: #666;
    margin-top: 6px;
    padding-left: 0;
    list-style: none;
}

:where(html.pg-public-precadastro-index) .password-hints li {
    margin-bottom: 2px;
}

:where(html.pg-public-precadastro-index) .btn-submit {
    width: 100%;
    padding: 11px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background: #1e4a9f;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

:where(html.pg-public-precadastro-index) .btn-submit:hover {
    background: #163a7f;
}

:where(html.pg-public-precadastro-index) .register-link {
    text-align: center;
    font-size: 13px;
    color: #999999;
    margin-top: 24px;
    width: 100%;
}

:where(html.pg-public-precadastro-index) .register-link a {
    color: #1e4a9f;
    text-decoration: none;
    font-weight: 600;
}

:where(html.pg-public-precadastro-index) .register-link a:hover {
    text-decoration: underline;
}

:where(html.pg-public-precadastro-index) .login-right {
    flex: 0 0 30%;
    background: #003ca6;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

:where(html.pg-public-precadastro-index) .login-right::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    top: -100px;
    right: -100px;
}

:where(html.pg-public-precadastro-index) .login-right::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    bottom: 100px;
    left: -50px;
}

:where(html.pg-public-precadastro-index) .right-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: 40px 0 0 40px;
}

:where(html.pg-public-precadastro-index) .right-content h2 {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: auto;
    padding-right: 40px;
    max-width: 400px;
    text-align: left;
}

:where(html.pg-public-precadastro-index) .business-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

:where(html.pg-public-precadastro-index) .business-image img {
    max-width: 90%;
    height: auto;
    display: block;
}

:where(html.pg-public-precadastro-index) .circle {
    position: absolute;
    border-radius: 50%;
}

:where(html.pg-public-precadastro-index) .circle-1 {
    width: 180px;
    height: 180px;
    background: #00d4ff;
    top: 5%;
    right: 10%;
}

:where(html.pg-public-precadastro-index) .circle-2 {
    width: 150px;
    height: 150px;
    background: #c4e538;
    top: 8%;
    right: 35%;
}

:where(html.pg-public-precadastro-index) .circle-3 {
    width: 120px;
    height: 120px;
    background: #00d4a3;
    bottom: 15%;
    left: 5%;
}

:where(html.pg-public-precadastro-index) .circle-4 {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.15);
    bottom: 40%;
    right: 8%;
}

:where(html.pg-public-precadastro-index) .circle-5 {
    width: 80px;
    height: 80px;
    background: rgba(196, 229, 56, 0.6);
    bottom: 5%;
    left: 25%;
}

/* Responsive */
@media (max-width: 1200px) {
    :where(html.pg-public-precadastro-index) .login-right {
        flex: 0 0 35%;
    }

    :where(html.pg-public-precadastro-index) .right-content h2 {
        font-size: 26px;
    }
}

@media (max-width: 992px) {
    :where(html.pg-public-precadastro-index) .login-right {
        display: none;
    }

    :where(html.pg-public-precadastro-index) .login-left {
        flex: 1;
    }
}

@media (max-width: 576px) {
    :where(html.pg-public-precadastro-index) .login-left {
        padding: 20px;
    }

    :where(html.pg-public-precadastro-index) .login-content-wrapper {
        max-width: 100%;
    }

    :where(html.pg-public-precadastro-index) .login-card-header .login-title {
        font-size: 20px;
    }

    :where(html.pg-public-precadastro-index) .login-card-header {
        padding: 24px;
    }

    :where(html.pg-public-precadastro-index) .login-card-body {
        padding: 24px 20px;
    }

    :where(html.pg-public-precadastro-index) .logo-finitya {
        margin-bottom: 24px;
    }

    :where(html.pg-public-precadastro-index) .logo-finitya img {
        height: 35px;
    }

    :where(html.pg-public-precadastro-index) .register-link {
        margin-top: 20px;
        font-size: 12px;
    }
}

/* Animação suave no carregamento */
:where(html.pg-public-precadastro-index) .login-form-wrapper {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

:where(html.pg-public-precadastro-index) .invalid-feedback {
    display: none;
    color: #dc3545;
    font-size: 13px;
    margin-top: 4px;
}

:where(html.pg-public-precadastro-index) .form-input.is-invalid {
    border-color: #dc3545;
}

:where(html.pg-public-precadastro-index) .form-input.is-invalid~.invalid-feedback {
    display: block;
}

/* ─── Modo escuro (botão sol/lua do cabeçalho) ─── */
/* A paleta do modo escuro é fixa aqui, e não um registro em temas_ui: assim
   ela não pode ser editada nem apagada pela empresa. O script de
   components/modo-escuro-head.php liga as classes modo-escuro + tui-* no
   <html>, e as regras do "Tema da empresa" e do "Tema escuro: cores fixas"
   passam a valer com estas cores. html.modo-escuro vence o :root do
   <style id="tema-ui-vars"> (mais específico), então a paleta prevalece sobre
   as cores de superfície da empresa; primária, acento e fonte continuam as
   da empresa. */
html.modo-escuro {
    --tui-bg: #0f172a;
    --tui-card-bg: #1e293b;
    --tui-text: #e2e8f0;
    --tui-border: #334155;
    --gk-card-background: #1e293b;
    --gk-navbar-vertical-bg: #0b1324;
    --gk-navbar-vertical-link: #e2e8f0;
    --gk-navbar-vertical-link-hover: #ffffff;
    color-scheme: dark;
}
/* Empresa com tema escuro e usuário pediu claro: o card do tema base volta
   ao branco (a variável viria escura do tema da empresa). */
html.modo-claro {
    --gk-card-background: #fff;
    color-scheme: light;
}

/* Ícone do botão: lua no claro (vai para o escuro), sol no escuro. */
:where(html.tpl-private, html.tpl-mobile, html.tpl-public, html.tpl-pdv) .modo-toggle .icone-sol { display: none; }
:where(html[data-bs-theme="dark"]) .modo-toggle .icone-sol { display: inline-block; }
:where(html[data-bs-theme="dark"]) .modo-toggle .icone-lua { display: none; }

/* Login: botão fixo no canto, por cima do layout de duas colunas. */
:where(html.tpl-public) .login-modo-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1050;
}

/* Mobile: o botão é o último item da barra inferior. A barra desliza para
   o lado quando os itens não cabem, em vez de espremer todos (antes o
   botão ficava fora da rolagem e cortava os outros itens). */
:where(html.tpl-mobile) .mobile-nav-items {
    width: max-content;
    min-width: 100%;
}
:where(html.tpl-mobile) .mobile-nav-scroll { scroll-snap-type: x proximity; }
:where(html.tpl-mobile) .mobile-nav-item {
    flex: 0 0 auto;
    min-width: 52px;
    scroll-snap-align: start;
}
:where(html.tpl-mobile) .mobile-nav-tema {
    background: none;
    border: 0;
    padding: 0;
    /* <button> não herda fonte nem altura de linha como os <a> vizinhos */
    font: inherit;
    line-height: inherit;
    color: inherit;
}
/* Os outros itens usam SVG de 20x20; o ícone de fonte, com a altura de linha
   dele, ficava mais alto e empurrava o rótulo para baixo. */
:where(html.tpl-mobile) .mobile-nav-tema .mobile-nav-icon {
    width: 20px;
    height: 20px;
}
:where(html.tpl-mobile) .mobile-nav-tema .mobile-nav-icon i {
    font-size: 20px;
    line-height: 1;
}
:where(html.tpl-mobile) .mobile-nav-tema .mobile-nav-icon i::before { vertical-align: top; }

/* A barra inferior tem azul fixo (#003ca4 !important) no CSS do template
   mobile; no escuro ela acompanha a cor do menu, como o menu lateral do
   desktop. */
:where(html.tui-escuro.tpl-mobile) .mobile-nav-bar {
    background-color: var(--gk-navbar-vertical-bg) !important;
    box-shadow: 0 -2px 0 0 var(--gk-navbar-vertical-bg);
}

/* ─── Botões redondos do cabeçalho (pesquisa, calculadora, atalhos, tema, sino) ─── */
/* O fim do theme.min.css tem duas regras soltas: "button.btn.btn-light:hover
   { #fff }" (hover branco, que no escuro virava um círculo branco) e
   ".btn:hover { #01286d }" (azul fixo). O sino é um <a>, não um <button>, e
   por isso pegava o azul em vez do branco. Aqui os cinco ficam iguais: o
   hover do claro continua branco e o do escuro fica um tom acima do fundo. */
:where(html.tpl-private) .navbar-default .btn.btn-light:hover,
:where(html.tpl-private) .navbar-default .btn.btn-light:focus-visible,
:where(html.tpl-private) .navbar-default .btn.btn-light.show {
    background-color: var(--gk-card-background, #fff);
    border-color: var(--gk-border-color);
    color: inherit;
}
html.tui-escuro .navbar-default .btn.btn-light:hover,
html.tui-escuro .navbar-default .btn.btn-light:focus-visible,
html.tui-escuro .navbar-default .btn.btn-light.show {
    background-color: color-mix(in srgb, var(--tui-escuro-superficie) 80%, #ffffff);
    border-color: var(--tui-escuro-borda);
    color: var(--tui-escuro-texto);
}

/* ─── Botão escuro (btn-dark) no modo escuro ─── */
/* O tema inverte o btn-dark no escuro (fundo branco, texto preto) e a regra
   solta ".btn:hover { #01286d }" do fim do theme.min.css troca o fundo por
   azul-marinho mantendo o texto preto: o botão (ex.: "Ações" do pedido)
   sumia ao passar o mouse. Aqui ele vira um botão escuro com borda. */
html.tui-escuro .btn-dark {
    background-color: color-mix(in srgb, var(--tui-escuro-superficie) 85%, #ffffff);
    border-color: var(--tui-escuro-borda);
    color: var(--tui-escuro-texto);
}
html.tui-escuro .btn-dark:hover,
html.tui-escuro .btn-dark:focus-visible,
html.tui-escuro .btn-dark:active,
html.tui-escuro .btn-dark.show {
    background-color: color-mix(in srgb, var(--tui-escuro-superficie) 72%, #ffffff);
    border-color: var(--tui-escuro-borda);
    color: #fff;
}

/* ─── Paginação genérica (paginar.js: data-paginar) ─── */
/* escopo: tpl-private, tpl-mobile. A pesquisa e o rodapé usam as mesmas
   classes de pedidos/index (search-icon, card-footer, pagination). */
:where(html.tpl-private, html.tpl-mobile) .paginar-oculto { display: none !important; }
:where(html.tpl-private, html.tpl-mobile) .paginar-rodape[hidden] { display: none; }
/* Impressão (ex.: relatórios): sai a lista inteira, sem pesquisa nem paginação. */
@media print {
    :where(html.tpl-private, html.tpl-mobile) .paginar-oculto { display: revert !important; }
    :where(html.tpl-private, html.tpl-mobile) .paginar-rodape,
    :where(html.tpl-private, html.tpl-mobile) .paginar-busca { display: none !important; }
}
/* Mesmo visual do #paginacao-mobile do theme.min.css (pedidos/index no celular). */
:where(html.tpl-private, html.tpl-mobile) .pagination.paginar-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}
:where(html.tpl-private, html.tpl-mobile) .pagination.paginar-mobile .page-item { margin: 0 3px; }

/* ─── Seletor de ícone (components/seletor-icone.php) ─── */
/* Grade que se ajusta à largura do formulário/modal: não passa da tela. */
:where(html.tpl-private, html.tpl-mobile) .seletor-icone-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: .4rem;
    max-height: 220px;
    overflow-y: auto;
    padding: .5rem;
    border: 1px solid var(--gk-border-color);
    border-radius: 8px;
    background: var(--gk-card-background);
}
:where(html.tpl-private, html.tpl-mobile) .seletor-icone-opcao {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 1px solid var(--gk-border-color);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
:where(html.tpl-private, html.tpl-mobile) .seletor-icone-opcao:hover { background: var(--gk-tertiary-bg); }
:where(html.tpl-private, html.tpl-mobile) .seletor-icone-opcao.is-ativo {
    border-color: var(--gk-primary);
    background: color-mix(in srgb, var(--gk-primary) 12%, transparent);
}
:where(html.tpl-private, html.tpl-mobile) .seletor-icone-previa { min-width: 42px; justify-content: center; font-size: 1.1rem; }

/* ─── Choices.js no modo escuro ─── */
/* O theme.min.css pinta o Choices com var(--gk-white) — branco também no
   escuro — e o campo de busca do select-one com #fff fixo: no escuro o fundo
   ficava branco e o texto digitado (claro) não aparecia. Vale para todos os
   Choices do sistema (ex.: produtos em pedidos/editar). */
html.tui-escuro .choices__inner,
html.tui-escuro .choices__input,
html.tui-escuro .choices[data-type*="select-one"] .choices__input {
    background-color: var(--gk-input-bg);
    border-color: var(--gk-input-border);
    color: var(--tui-escuro-texto);
}
html.tui-escuro .choices__input::placeholder { color: var(--gk-secondary-color); }
html.tui-escuro .choices__list--dropdown,
html.tui-escuro .choices__list[aria-expanded] {
    background-color: var(--tui-escuro-superficie);
    border-color: var(--tui-escuro-borda);
    color: var(--tui-escuro-texto);
}
html.tui-escuro .choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
html.tui-escuro .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: color-mix(in srgb, var(--tui-escuro-superficie) 78%, #ffffff);
}
html.tui-escuro .choices__heading {
    border-bottom-color: var(--tui-escuro-borda);
    color: var(--gk-secondary-color);
}
html.tui-escuro .choices.is-disabled .choices__inner,
html.tui-escuro .choices.is-disabled .choices__input {
    background-color: color-mix(in srgb, var(--gk-input-bg) 70%, #000000);
}

/* ─── Select2 com o visual do form-select do tema ─── */
/* escopo: tpl-private, tpl-mobile, tpl-pdv
   O Select2 vinha com o visual padrão da biblioteca (branco, 28px, borda
   cinza), fora do padrão dos outros selects e branco no tema escuro. Aqui
   ele copia as medidas do .form-select do theme.min.css e usa as variáveis
   do tema, que já mudam no escuro. */
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default .select2-selection--single,
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default .select2-selection--multiple {
    background-color: var(--gk-input-bg);
    border: var(--gk-border-width) solid var(--gk-input-border);
    border-radius: var(--gk-border-radius);
    min-height: calc(1.6em + 1rem + 2 * var(--gk-border-width));
    font-size: 0.875rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default .select2-selection--single {
    height: auto;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
}
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--gk-body-color);
    line-height: 1.6;
    padding: 0;
}
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--gk-secondary-color);
}
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 0.75rem;
    top: 0;
}
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--gk-secondary-color);
}
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--gk-secondary-color);
    margin-right: 0.5rem;
}
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default.select2-container--focus .select2-selection--single,
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default.select2-container--focus .select2-selection--multiple,
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default.select2-container--open .select2-selection--single,
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--gk-primary);
    box-shadow: 0 0 0 0.25rem var(--gk-focus-ring-color);
}
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--gk-tertiary-bg);
    border-color: var(--gk-input-border);
    color: var(--gk-body-color);
}
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-dropdown {
    background-color: var(--gk-dropdown-bg, var(--gk-input-bg));
    border-color: var(--gk-input-border);
    color: var(--gk-body-color);
    font-size: 0.875rem;
}
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--gk-input-bg);
    border: var(--gk-border-width) solid var(--gk-input-border);
    border-radius: var(--gk-border-radius);
    color: var(--gk-body-color);
    padding: 0.375rem 0.75rem;
}
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default .select2-results__option--selected,
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--gk-tertiary-bg);
}
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default.select2-container--disabled .select2-selection--single,
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default.select2-container--disabled .select2-selection--multiple {
    /* A biblioteca usa #eee fixo no desabilitado (ex.: cidade antes de
       escolher o estado), que ficava branco no tema escuro. */
    background-color: var(--gk-input-disabled-bg);
}
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
:where(html.tpl-private, html.tpl-mobile, html.tpl-pdv) .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--gk-primary);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   Telas (fase 2 da unificação). Cada seção vale só na tela indicada no
   "escopo". Os @keyframes das telas ganharam o nome da tela como prefixo:
   keyframes são globais, e o nome antigo ("spin", "pulse"...) passaria a
   valer no sistema inteiro, por cima do tema.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── private/admin/suporte/ticket ─── */
/* escopo: pg-private-admin-suporte-ticket */
:where(html.pg-private-admin-suporte-ticket) .msg-content img { max-width: 100%; border-radius: 4px; margin: 4px 0; }
:where(html.pg-private-admin-suporte-ticket) .msg-content p { margin-bottom: 0.25rem; }

/* ─── private/admin/usuarios/index ─── */
/* escopo: pg-private-admin-usuarios-index */
:where(html.pg-private-admin-usuarios-index) .presenca-dot {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    margin-right: .4rem;
    vertical-align: middle;
}

:where(html.pg-private-admin-usuarios-index) .presenca-online { background-color: var(--gk-success); box-shadow: 0 0 0 3px rgba(var(--gk-success-rgb), .2); }
:where(html.pg-private-admin-usuarios-index) .presenca-ausente { background-color: var(--gk-warning); box-shadow: 0 0 0 3px rgba(var(--gk-warning-rgb), .2); }
:where(html.pg-private-admin-usuarios-index) .presenca-offline { background-color: var(--gk-secondary-color); }

:where(html.pg-private-admin-usuarios-index) #tabelaPresenca td { vertical-align: middle; }

/* ─── private/calculadora/index ─── */
/* escopo: pg-private-calculadora-index */
/* Estilos para a página da calculadora */
:where(html.pg-private-calculadora-index) .calculadora-info-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:where(html.pg-private-calculadora-index) .calculadora-desc-mobile {
    font-size: 13px;
    color: #5f6f84;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

:where(html.pg-private-calculadora-index) .calculadora-img-mobile {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

:where(html.pg-private-calculadora-index) .calculadora-img-mobile i {
    font-size: 24px;
    color: #6c757d;
}

/* Reutilizando estilos das outras páginas */
:where(html.pg-private-calculadora-index) .group-list {
    max-width: 420px;
    margin: auto;
}

:where(html.pg-private-calculadora-index) .group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #263347;
}

:where(html.pg-private-calculadora-index) .group-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

:where(html.pg-private-calculadora-index) .group-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

:where(html.pg-private-calculadora-index) .group-text p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-calculadora-index) .arrow {
    font-size: 20px;
    color: #bbb;
    font-weight: bold;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #334155;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html.pg-private-calculadora-index) .arrow:hover {
    background-color: #4747e6;
}

:where(html.pg-private-calculadora-index) .arrow a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

:where(html.pg-private-calculadora-index) .bg-row-mobile {
    background-color: #1e293b;
    border-radius: 10px;
}

:where(html.pg-private-calculadora-index) #paginacao-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

:where(html.pg-private-calculadora-index) #search-resultado-mobile {
    margin-bottom: 15px;
}

/* ─── private/calendario/eventos/index ─── */
/* escopo: pg-private-calendario-eventos-index */
/* Estilos melhorados para o calendário */
:where(html.pg-private-calendario-eventos-index) #calendar {
    max-width: 1000px;
    margin: 0 auto;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

:where(html.pg-private-calendario-eventos-index) .fc-header-toolbar {
    margin-bottom: 1.5em;
}

:where(html.pg-private-calendario-eventos-index) .fc-toolbar-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c3e50;
}

:where(html.pg-private-calendario-eventos-index) .fc-button {
    background-color: #515b66;
    border: none;
    color: white;
    padding: 0.5em 1em;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s;
}

:where(html.pg-private-calendario-eventos-index) .fc-button:hover {
    background-color: #3a4149;
    transform: translateY(-1px);
}

:where(html.pg-private-calendario-eventos-index) .fc-button:active {
    transform: translateY(0);
}

:where(html.pg-private-calendario-eventos-index) .fc-daygrid-day {
    transition: background-color 0.2s;
}

:where(html.pg-private-calendario-eventos-index) .fc-daygrid-day:hover {
    background-color: #f8f9fa;
}

:where(html.pg-private-calendario-eventos-index) .fc-daygrid-day.fc-day-today {
    background-color: rgba(0, 123, 255, 0.1);
}

:where(html.pg-private-calendario-eventos-index) .fc-daygrid-day-number {
    font-weight: 500;
    color: #495057;
}

:where(html.pg-private-calendario-eventos-index) .fc-day-today .fc-daygrid-day-number {
    color: #0d6efd;
    font-weight: 600;
}

:where(html.pg-private-calendario-eventos-index) .fc-event {
    border: none;
    border-radius: 4px;
    padding: 3px 6px;
    margin-bottom: 2px;
    font-size: 0.9rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
}

:where(html.pg-private-calendario-eventos-index) .fc-event:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

:where(html.pg-private-calendario-eventos-index) .fc-event-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:where(html.pg-private-calendario-eventos-index) .fc-event-time {
    font-weight: 400;
    margin-right: 4px;
}

/* Estilos para eventos allday */
:where(html.pg-private-calendario-eventos-index) .fc-daygrid-event-dot {
    border-color: white !important;
    margin-right: 4px;
}

/* Melhorias para a visualização de lista */
:where(html.pg-private-calendario-eventos-index) .fc-list-event:hover td {
    background-color: #f8f9fa;
}

:where(html.pg-private-calendario-eventos-index) .fc-list-event-time {
    font-weight: 500;
}

:where(html.pg-private-calendario-eventos-index) .fc-list-event-title {
    font-weight: 500;
}

/* ── Calendário mobile ──────────────────────────────────────────────
   Tudo aqui vive dentro de .mobile-schedule, que só aparece abaixo de
   768px — o calendário desktop (#calendar) não é afetado.
   ------------------------------------------------------------------ */
:where(html.pg-private-calendario-eventos-index) .mobile-schedule {
    display: none;
}

:where(html.pg-private-calendario-eventos-index) .mobile-schedule .card-body {
    padding: 0;
}

/* Cabeçalho fixo com mês e atalho para hoje */
:where(html.pg-private-calendario-eventos-index) .mob-cal-header {
    position: sticky;
    top: 0;
    z-index: 5;
    /* Era var(--bs-body-bg, #fff): o tema usa o prefixo --gk-, a variável
       --bs-* não existe e o cabeçalho ficava sempre branco (no escuro também).
       Ele fica dentro do card, então usa a cor do card. */
    background: var(--gk-card-background, #fff);
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--gk-border-color);
}

:where(html.pg-private-calendario-eventos-index) .mob-cal-month {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.02em;
    text-transform: capitalize;
    margin: 0;
    line-height: 1.2;
}

:where(html.pg-private-calendario-eventos-index) .mob-cal-year {
    font-size: .8rem;
    color: #94a3b8;
    font-weight: 500;
}

:where(html.pg-private-calendario-eventos-index) .mob-cal-today-btn {
    border: 1px solid var(--gk-border-color);
    background: transparent;
    color: inherit;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    min-height: 34px;
}

:where(html.pg-private-calendario-eventos-index) .mob-cal-today-btn:active { transform: scale(.96); }

/* Faixa de dias da semana, deslizável na horizontal */
:where(html.pg-private-calendario-eventos-index) .mob-week-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 12px 16px 10px;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

:where(html.pg-private-calendario-eventos-index) .mob-week-strip::-webkit-scrollbar { display: none; }

:where(html.pg-private-calendario-eventos-index) .mob-day {
    flex: 0 0 auto;
    scroll-snap-align: center;
    width: 52px;
    min-height: 68px;
    border-radius: 16px;
    border: 1px solid transparent;
    background: rgba(148, 163, 184, .12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    transition: background .18s, transform .12s;
    padding: 8px 0 6px;
}

:where(html.pg-private-calendario-eventos-index) .mob-day:active { transform: scale(.94); }

:where(html.pg-private-calendario-eventos-index) .mob-day-week {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    font-weight: 600;
}

:where(html.pg-private-calendario-eventos-index) .mob-day-num {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
}

/* Ponto indicando que o dia tem evento */
:where(html.pg-private-calendario-eventos-index) .mob-day-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #94a3b8;
    opacity: 0;
}

:where(html.pg-private-calendario-eventos-index) .mob-day.has-events .mob-day-dot { opacity: 1; }

:where(html.pg-private-calendario-eventos-index) .mob-day.is-today .mob-day-num { color: #0d6efd; }
:where(html.pg-private-calendario-eventos-index) .mob-day.is-today { border-color: rgba(13, 110, 253, .35); }

:where(html.pg-private-calendario-eventos-index) .mob-day.is-selected {
    background: #0d6efd;
    border-color: #0d6efd;
}

:where(html.pg-private-calendario-eventos-index) .mob-day.is-selected .mob-day-num,
:where(html.pg-private-calendario-eventos-index) .mob-day.is-selected .mob-day-week { color: #fff; }
:where(html.pg-private-calendario-eventos-index) .mob-day.is-selected .mob-day-dot { background: #fff; }

/* Linha com o dia escolhido e a contagem de eventos */
:where(html.pg-private-calendario-eventos-index) .mob-day-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 16px 12px;
}

:where(html.pg-private-calendario-eventos-index) .mob-day-label {
    font-size: .95rem;
    font-weight: 600;
    text-transform: capitalize;
}

:where(html.pg-private-calendario-eventos-index) .mob-day-count {
    font-size: .78rem;
    color: #94a3b8;
    white-space: nowrap;
}

/* Lista de eventos em formato de linha do tempo */
:where(html.pg-private-calendario-eventos-index) .mobile-schedule-list {
    padding: 0 16px 96px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

:where(html.pg-private-calendario-eventos-index) .mob-event {
    display: flex;
    gap: 12px;
    align-items: stretch;
    background: rgba(148, 163, 184, .1);
    border-radius: 14px;
    padding: 12px 14px;
    cursor: pointer;
    transition: transform .12s, background .18s;
}

:where(html.pg-private-calendario-eventos-index) .mob-event:active {
    transform: scale(.985);
    background: rgba(148, 163, 184, .18);
}

:where(html.pg-private-calendario-eventos-index) .mob-event-rail {
    flex: 0 0 4px;
    border-radius: 999px;
    background: #0d6efd;
}

:where(html.pg-private-calendario-eventos-index) .mob-event-body { min-width: 0; flex: 1; }

:where(html.pg-private-calendario-eventos-index) .mob-event-time {
    font-size: .76rem;
    font-weight: 600;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
}

:where(html.pg-private-calendario-eventos-index) .mob-event-title {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: 2px;
    /* Título longo não pode empurrar o card */
    overflow-wrap: anywhere;
}

:where(html.pg-private-calendario-eventos-index) .mob-event-desc {
    font-size: .84rem;
    color: #64748b;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

:where(html.pg-private-calendario-eventos-index) .mob-event-tag {
    display: inline-block;
    margin-top: 6px;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .2);
    color: #475569;
}

:where(html.pg-private-calendario-eventos-index) .mob-empty {
    text-align: center;
    padding: 48px 24px;
    color: #94a3b8;
}

:where(html.pg-private-calendario-eventos-index) .mob-empty i {
    font-size: 2.6rem;
    display: block;
    margin-bottom: 12px;
    opacity: .5;
}

:where(html.pg-private-calendario-eventos-index) .mob-empty h5 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: #64748b;
}

:where(html.pg-private-calendario-eventos-index) .mob-empty p {
    font-size: .86rem;
    margin: 0;
}

@media (max-width: 767px) {
    :where(html.pg-private-calendario-eventos-index) #calendar {
        display: none;
    }

    :where(html.pg-private-calendario-eventos-index) .mobile-schedule {
        display: block;
    }

    :where(html.pg-private-calendario-eventos-index) .desktop-calendar {
        display: none;
    }

    /* O botão flutuante não pode cobrir o último evento da lista: a lista
       ganha folga embaixo. O botão fica acima da barra inferior do mobile
       (70px, z-index maior); com bottom: 16px ele ficava escondido atrás dela. */
    :where(html.pg-private-calendario-eventos-index) .floating-button-container {
        bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    }
    :where(html.pg-private-calendario-eventos-index) .mobile-schedule {
        padding-bottom: 72px;
    }
}

/* ─── private/calendario/tipos/index ─── */
/* escopo: pg-private-calendario-tipos-index */
/* Estilos para a página de tipos do calendário */
:where(html.pg-private-calendario-tipos-index) .tipo-cor-mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

:where(html.pg-private-calendario-tipos-index) .tipo-cor-box {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Reutilizando estilos das outras páginas */
:where(html.pg-private-calendario-tipos-index) .group-list {
    max-width: 420px;
    margin: auto;
}

:where(html.pg-private-calendario-tipos-index) .group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #263347;
}

:where(html.pg-private-calendario-tipos-index) .group-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

:where(html.pg-private-calendario-tipos-index) .group-avatar {
    width: 48px;
    height: 48px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html.pg-private-calendario-tipos-index) .group-avatar span {
    font-size: 20px;
}

:where(html.pg-private-calendario-tipos-index) .group-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

:where(html.pg-private-calendario-tipos-index) .group-text p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-calendario-tipos-index) .arrow {
    font-size: 20px;
    color: #bbb;
    font-weight: bold;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #334155;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html.pg-private-calendario-tipos-index) .arrow:hover {
    background-color: #4747e6;
}

:where(html.pg-private-calendario-tipos-index) .arrow a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

:where(html.pg-private-calendario-tipos-index) .bg-row-mobile {
    background-color: #1e293b;
    border-radius: 10px;
}

:where(html.pg-private-calendario-tipos-index) #paginacao-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

:where(html.pg-private-calendario-tipos-index) #search-resultado-mobile {
    margin-bottom: 15px;
}

/* ─── private/categorias/produtos/index ─── */
/* escopo: pg-private-categorias-produtos-index */
/* Estilos para a página de categorias */
:where(html.pg-private-categorias-produtos-index) .categoria-info-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:where(html.pg-private-categorias-produtos-index) .categoria-status-mobile {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

:where(html.pg-private-categorias-produtos-index) .status-ativo {
    background-color: #d1e7dd;
    color: #0f5132;
}

:where(html.pg-private-categorias-produtos-index) .status-inativo {
    background-color: #f8d7da;
    color: #842029;
}

:where(html.pg-private-categorias-produtos-index) .categoria-img-mobile {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    flex-shrink: 0;
}

:where(html.pg-private-categorias-produtos-index) .categoria-img-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(html.pg-private-categorias-produtos-index) .categoria-img-mobile i {
    font-size: 24px;
    color: #6c757d;
}

/* Reutilizando estilos das outras páginas */
:where(html.pg-private-categorias-produtos-index) .group-list {
    max-width: 420px;
    margin: auto;
}

:where(html.pg-private-categorias-produtos-index) .group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #263347;
}

:where(html.pg-private-categorias-produtos-index) .group-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

:where(html.pg-private-categorias-produtos-index) .group-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

:where(html.pg-private-categorias-produtos-index) .group-text p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-categorias-produtos-index) .arrow {
    font-size: 20px;
    color: #bbb;
    font-weight: bold;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #334155;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html.pg-private-categorias-produtos-index) .arrow:hover {
    background-color: #4747e6;
}

:where(html.pg-private-categorias-produtos-index) .arrow a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

:where(html.pg-private-categorias-produtos-index) .bg-row-mobile {
    background-color: #1e293b;
    border-radius: 10px;
}

:where(html.pg-private-categorias-produtos-index) #paginacao-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

:where(html.pg-private-categorias-produtos-index) #search-resultado-mobile {
    margin-bottom: 15px;
}

:where(html.pg-private-categorias-produtos-index) .toggle-btn {
    display: inline-flex;
    border-radius: 25px;
    background: #334156;
    padding: 4px;
    margin-bottom: 15px;
}

:where(html.pg-private-categorias-produtos-index) .toggle-btn button {
    border: none;
    padding: 8px 18px;
    border-radius: 20px;
    background: transparent;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.3s ease;
}

:where(html.pg-private-categorias-produtos-index) .toggle-btn button.active {
    background: white;
    color: #000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ─── private/categorias/servicos/index ─── */
/* escopo: pg-private-categorias-servicos-index */
/* Estilos para a página de categorias de serviços */
:where(html.pg-private-categorias-servicos-index) .categoria-info-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:where(html.pg-private-categorias-servicos-index) .categoria-status-mobile {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

:where(html.pg-private-categorias-servicos-index) .status-ativo {
    background-color: #d1e7dd;
    color: #0f5132;
}

:where(html.pg-private-categorias-servicos-index) .status-inativo {
    background-color: #f8d7da;
    color: #842029;
}

:where(html.pg-private-categorias-servicos-index) .categoria-img-mobile {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    flex-shrink: 0;
}

:where(html.pg-private-categorias-servicos-index) .categoria-img-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(html.pg-private-categorias-servicos-index) .categoria-img-mobile i {
    font-size: 24px;
    color: #6c757d;
}

/* Reutilizando estilos das outras páginas */
:where(html.pg-private-categorias-servicos-index) .group-list {
    max-width: 420px;
    margin: auto;
}

:where(html.pg-private-categorias-servicos-index) .group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #263347;
}

:where(html.pg-private-categorias-servicos-index) .group-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

:where(html.pg-private-categorias-servicos-index) .group-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

:where(html.pg-private-categorias-servicos-index) .group-text p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-categorias-servicos-index) .arrow {
    font-size: 20px;
    color: #bbb;
    font-weight: bold;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #334155;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html.pg-private-categorias-servicos-index) .arrow:hover {
    background-color: #4747e6;
}

:where(html.pg-private-categorias-servicos-index) .arrow a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

:where(html.pg-private-categorias-servicos-index) .bg-row-mobile {
    background-color: #1e293b;
    border-radius: 10px;
}

:where(html.pg-private-categorias-servicos-index) #paginacao-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

:where(html.pg-private-categorias-servicos-index) #search-resultado-mobile {
    margin-bottom: 15px;
}

:where(html.pg-private-categorias-servicos-index) .toggle-btn {
    display: inline-flex;
    border-radius: 25px;
    background: #334156;
    padding: 4px;
    margin-bottom: 15px;
}

:where(html.pg-private-categorias-servicos-index) .toggle-btn button {
    border: none;
    padding: 8px 18px;
    border-radius: 20px;
    background: transparent;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.3s ease;
}

:where(html.pg-private-categorias-servicos-index) .toggle-btn button.active {
    background: white;
    color: #000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ─── private/chat/index ─── */
/* escopo: pg-private-chat-index */
/* Estilos existentes do chat... */
:where(html.pg-private-chat-index) .chat-container {
  height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
}
:where(html.pg-private-chat-index) .chat-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 10px 10px 0 0;
}
:where(html.pg-private-chat-index) .chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #f8f9fa;
}
:where(html.pg-private-chat-index) .message {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
}
:where(html.pg-private-chat-index) .message.sent {
  justify-content: flex-end;
}
:where(html.pg-private-chat-index) .message.received {
  justify-content: flex-start;
}
:where(html.pg-private-chat-index) .message-bubble {
  max-width: 70%;
  padding: 12px 18px;
  border-radius: 18px;
  position: relative;
  word-wrap: break-word;
}
:where(html.pg-private-chat-index) .message.sent .message-bubble {
  background: #007bff;
  color: white;
  border-bottom-right-radius: 4px;
}
:where(html.pg-private-chat-index) .message.received .message-bubble {
  background: white;
  color: #333;
  border-bottom-left-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
:where(html.pg-private-chat-index) .message-time {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 5px;
}
:where(html.pg-private-chat-index) .message.sent .message-time {
  text-align: right;
}
:where(html.pg-private-chat-index) .chat-input-container {
  padding: 20px;
  background: white;
  border-top: 1px solid #dee2e6;
  border-radius: 0 0 10px 10px;
}
:where(html.pg-private-chat-index) .chat-input {
  border-radius: 25px;
  padding: 12px 20px;
  border: 2px solid #e9ecef;
  resize: none;
}
:where(html.pg-private-chat-index) .chat-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}
:where(html.pg-private-chat-index) .send-button {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
:where(html.pg-private-chat-index) .online-status {
  width: 10px;
  height: 10px;
  background: #28a745;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  animation: private_chat_index_pulse 2s infinite;
}
@keyframes private_chat_index_pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
:where(html.pg-private-chat-index) .typing-indicator {
  display: none;
  padding: 10px;
  font-style: italic;
  color: #6c757d;
}
:where(html.pg-private-chat-index) .typing-indicator.active {
  display: block;
}

/* (antigo chat-ai.css, carregado logo depois do bloco acima) */
/**
 * Estilos para o Chat AI - Assistente Virtual
 */

/* Mensagens da IA */
:where(html.pg-private-chat-index) .chat-message.ai-message,
:where(html.pg-private-chat-index) .message.ai-message,
:where(html.pg-private-chat-index) .ai-styled {
    background: linear-gradient(135deg, #1d2d50 0%, #2a3f6f 100%);
    border-left: 4px solid #4a6fa5;
    border-radius: 12px;
    padding: 15px;
    margin: 10px 0;
    box-shadow: 0 2px 8px rgba(74, 111, 165, 0.3);
    position: relative;
    color: #FFFFFF;
}

:where(html.pg-private-chat-index) .chat-message.ai-message::before,
:where(html.pg-private-chat-index) .message.ai-message::before,
:where(html.pg-private-chat-index) .ai-styled::before {
    content: '🤖';
    position: absolute;
    top: -8px;
    left: 15px;
    background: linear-gradient(135deg, #2a3f6f 0%, #4a6fa5 100%);
    color: #FFFFFF;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
}

/* Botão do Assistente Virtual */
:where(html.pg-private-chat-index) .btn-ai-assistant {
    background: linear-gradient(135deg, #2a3f6f 0%, #4a6fa5 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 25px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(42, 63, 111, 0.3);
}

:where(html.pg-private-chat-index) .btn-ai-assistant:hover {
    background: linear-gradient(135deg, #4a6fa5 0%, #2a3f6f 100%);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(74, 111, 165, 0.4);
}

:where(html.pg-private-chat-index) .btn-ai-assistant:focus,
:where(html.pg-private-chat-index) .btn-ai-assistant:active {
    color: #FFFFFF;
    background: linear-gradient(135deg, #4a6fa5 0%, #2a3f6f 100%);
    box-shadow: 0 0 0 0.2rem rgba(74, 111, 165, 0.25);
}

/* Modal do AI */
:where(html.pg-private-chat-index) #chatAIModal .modal-content {
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background: #1d2d50;
}

:where(html.pg-private-chat-index) #chatAIModal .modal-header {
    background: linear-gradient(135deg, #1d2d50 0%, #2a3f6f 100%);
    color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom: 2px solid #4a6fa5;
}

:where(html.pg-private-chat-index) #chatAIModal .modal-header .close {
    color: white;
    opacity: 0.8;
}

:where(html.pg-private-chat-index) #chatAIModal .modal-header .close:hover {
    opacity: 1;
}

:where(html.pg-private-chat-index) #chatAIModal .modal-title {
    font-weight: 600;
    color: #FFFFFF;
}

/* Área de resposta da IA */
:where(html.pg-private-chat-index) #aiResposta {
    background: linear-gradient(135deg, #2a3f6f 0%, #1d2d50 100%);
    border: 1px solid #4a6fa5;
    border-radius: 10px;
    margin-top: 15px;
}

:where(html.pg-private-chat-index) #aiRespostaTexto {
    margin-top: 10px;
    line-height: 1.6;
    color: #FFFFFF;
}

:where(html.pg-private-chat-index) #aiRespostaTexto strong {
    color: #6CA0DC;
}

/* Campo de pergunta */
:where(html.pg-private-chat-index) #aiPergunta {
    border-radius: 8px;
    border: 2px solid #2a3f6f;
    transition: border-color 0.3s ease;
    background: #1d2d50;
    color: #FFFFFF;
}

:where(html.pg-private-chat-index) #aiPergunta:focus {
    border-color: #4a6fa5;
    box-shadow: 0 0 0 0.2rem rgba(74, 111, 165, 0.25);
    background: #1d2d50;
    color: #FFFFFF;
}

/* Dicas de uso da IA */
:where(html.pg-private-chat-index) .ai-hints {
    background: linear-gradient(135deg, #2a3f6f 0%, #1d2d50 100%);
    border: 1px solid #4a6fa5;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 15px;
    color: #FFFFFF;
}

:where(html.pg-private-chat-index) .ai-hints strong {
    color: #6CA0DC;
}

/* Animação de digitação para mensagens da IA */
@keyframes private_chat_index_typing {
    0% { width: 0; }
    100% { width: 100%; }
}

:where(html.pg-private-chat-index) .ai-typing {
    overflow: hidden;
    white-space: nowrap;
    animation: private_chat_index_typing 2s steps(40, end);
}

/* Indicador de resposta da IA */
:where(html.pg-private-chat-index) .ai-thinking {
    background: linear-gradient(135deg, #2a3f6f 0%, #1d2d50 100%);
    border: 1px solid #4a6fa5;
    border-radius: 10px;
    padding: 10px;
    margin: 10px 0;
    font-style: italic;
    color: #6CA0DC;
}

:where(html.pg-private-chat-index) .ai-thinking::before {
    content: '🤖 ';
}

:where(html.pg-private-chat-index) .ai-thinking::after {
    content: ' ...';
    animation: private_chat_index_dots 1.4s infinite;
}

@keyframes private_chat_index_dots {
    0%, 20% { color: transparent; }
    40% { color: #6CA0DC; }
    100% { color: transparent; }
}

/* Responsividade aprimorada */
@media (max-width: 992px) {
    :where(html.pg-private-chat-index) .btn-ai-assistant {
        padding: 7px 14px;
        font-size: 12px;
        margin-top: 5px;
        margin-left: 0 !important;
    }
    
    :where(html.pg-private-chat-index) #chatAIModal .modal-dialog {
        margin: 15px;
        max-width: calc(100% - 30px);
    }
}

@media (max-width: 768px) {
    :where(html.pg-private-chat-index) .btn-ai-assistant {
        padding: 6px 12px;
        font-size: 11px;
        margin-top: 5px;
        margin-left: 0 !important;
        width: 100%;
        display: block;
    }
    
    :where(html.pg-private-chat-index) .chat-message.ai-message,
    :where(html.pg-private-chat-index) .message.ai-message,
    :where(html.pg-private-chat-index) .ai-styled {
        padding: 12px;
        margin: 8px 0;
        font-size: 13px;
    }
    
    :where(html.pg-private-chat-index) .chat-message.ai-message::before,
    :where(html.pg-private-chat-index) .message.ai-message::before,
    :where(html.pg-private-chat-index) .ai-styled::before {
        font-size: 10px;
        padding: 3px 6px;
        top: -6px;
        left: 12px;
    }
    
    :where(html.pg-private-chat-index) #chatAIModal .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
        height: calc(100vh - 20px);
    }
    
    :where(html.pg-private-chat-index) #chatAIModal .modal-content {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    :where(html.pg-private-chat-index) #chatAIModal .modal-body {
        flex: 1;
        overflow-y: auto;
        padding: 12px;
    }
    
    :where(html.pg-private-chat-index) #aiPergunta {
        font-size: 14px;
        padding: 10px 12px;
    }
    
    :where(html.pg-private-chat-index) #aiRespostaTexto {
        font-size: 13px;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    :where(html.pg-private-chat-index) .btn-ai-assistant {
        padding: 5px 10px;
        font-size: 10px;
        border-radius: 15px;
    }
    
    :where(html.pg-private-chat-index) .chat-message.ai-message,
    :where(html.pg-private-chat-index) .message.ai-message,
    :where(html.pg-private-chat-index) .ai-styled {
        padding: 10px;
        margin: 6px 0;
        font-size: 12px;
        border-radius: 8px;
    }
    
    :where(html.pg-private-chat-index) .chat-message.ai-message::before,
    :where(html.pg-private-chat-index) .message.ai-message::before,
    :where(html.pg-private-chat-index) .ai-styled::before {
        font-size: 9px;
        padding: 2px 5px;
        border-radius: 8px;
    }
    
    :where(html.pg-private-chat-index) #chatAIModal .modal-dialog {
        margin: 5px;
        max-width: calc(100% - 10px);
        height: calc(100vh - 10px);
    }
    
    :where(html.pg-private-chat-index) #chatAIModal .modal-header {
        padding: 10px 12px;
    }
    
    :where(html.pg-private-chat-index) #chatAIModal .modal-title {
        font-size: 16px;
    }
    
    :where(html.pg-private-chat-index) #chatAIModal .modal-body {
        padding: 10px;
    }
    
    :where(html.pg-private-chat-index) #aiPergunta {
        font-size: 13px;
        padding: 8px 10px;
    }
    
    :where(html.pg-private-chat-index) .ai-hints {
        padding: 8px;
        margin-bottom: 10px;
        font-size: 11px;
    }
    
    :where(html.pg-private-chat-index) #aiRespostaTexto {
        font-size: 12px;
    }
}

@media (max-width: 360px) {
    :where(html.pg-private-chat-index) .chat-message.ai-message,
    :where(html.pg-private-chat-index) .message.ai-message,
    :where(html.pg-private-chat-index) .ai-styled {
        padding: 8px;
        margin: 4px 0;
        font-size: 11px;
    }
    
    :where(html.pg-private-chat-index) #chatAIModal .modal-header {
        padding: 8px 10px;
    }
    
    :where(html.pg-private-chat-index) #chatAIModal .modal-body {
        padding: 8px;
    }
}

/* Container de input com IA */
:where(html.pg-private-chat-index) .chat-input-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

:where(html.pg-private-chat-index) .chat-input-container .form-control {
    flex: 1;
    min-width: 200px;
}

/* Destaque para palavras-chave nas mensagens da IA */
:where(html.pg-private-chat-index) .ai-message .highlight {
    background: rgba(74, 111, 165, 0.3);
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 500;
    color: #6CA0DC;
}

/* Ícones nas respostas da IA */
:where(html.pg-private-chat-index) .ai-message .service-item {
    margin: 8px 0;
    padding: 5px 0;
    border-bottom: 1px solid rgba(74, 111, 165, 0.2);
}

:where(html.pg-private-chat-index) .ai-message .service-item:last-child {
    border-bottom: none;
}

:where(html.pg-private-chat-index) .ai-message .price {
    color: #6CA0DC;
    font-weight: 600;
}

:where(html.pg-private-chat-index) .ai-message .contact-info {
    margin: 5px 0;
    padding: 3px 0;
}

:where(html.pg-private-chat-index) .ai-message .contact-info strong {
    color: #6CA0DC;
}

/* ─── private/clientes/index ─── */
/* escopo: pg-private-clientes-index */
/* Estilos existentes da página de pedidos que podem ser reutilizados */
:where(html.pg-private-clientes-index) #sugestoesCliente {
    position: absolute;
    z-index: 1050;
    width: 95%;
    /* Mesma largura do input */
    max-height: 200px;
    overflow-y: auto;
    background: #414f63;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    margin-top: 2px;
    display: none;
}

:where(html.pg-private-clientes-index) .sugestao-cliente {
    padding: 0.5rem 1rem;
    border: none;
    background: #414f63;
    color: #ffffff;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

:where(html.pg-private-clientes-index) .sugestao-cliente:hover,
:where(html.pg-private-clientes-index) .sugestao-cliente.active {
    background-color: #0b1324;
    color: #ffffff;
    text-decoration: none;
}

:where(html.pg-private-clientes-index) .sugestao-cliente:first-child {
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

:where(html.pg-private-clientes-index) .sugestao-cliente:last-child {
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

/* Container relativo para posicionamento absoluto */
:where(html.pg-private-clientes-index) .autocomplete-container {
    position: relative;
}

:where(html.pg-private-clientes-index) .group-list {
    max-width: 420px;
    margin: auto;
}

:where(html.pg-private-clientes-index) .group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #263347;
}

:where(html.pg-private-clientes-index) .group-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

:where(html.pg-private-clientes-index) .group-avatar {
    width: 48px;
    height: 48px;
    overflow: hidden;
    flex-shrink: 0;
}

:where(html.pg-private-clientes-index) .group-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(html.pg-private-clientes-index) .group-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

:where(html.pg-private-clientes-index) .group-text p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-clientes-index) .arrow {
    font-size: 20px;
    color: #bbb;
    font-weight: bold;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #334155;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html.pg-private-clientes-index) .arrow:hover {
    background-color: #4747e6;
    /* cor ao passar o mouse */
}

:where(html.pg-private-clientes-index) .arrow svg {
    width: 20px;
    height: 20px;
    fill: white;
    /* cor da seta */
}

:where(html.pg-private-clientes-index) .toggle-btn {
    display: inline-flex;
    border-radius: 25px;
    background: #334156;
    padding: 4px;
}

:where(html.pg-private-clientes-index) .toggle-btn button {
    border: none;
    padding: 8px 18px;
    border-radius: 20px;
    background: transparent;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.3s ease;
}

:where(html.pg-private-clientes-index) .toggle-btn button.active {
    background: white;
    color: #000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

:where(html.pg-private-clientes-index) #paginacao-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

:where(html.pg-private-clientes-index) #search-resultado-mobile {
    margin-bottom: 15px;
}

/* Estilos para o botão de ocultar valores */
:where(html.pg-private-clientes-index) .btn-toggle-values {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

:where(html.pg-private-clientes-index) .btn-toggle-values:hover {
    background-color: #ffffff2e !important;
    color: #ac95fe !important;
}

:where(html.pg-private-clientes-index) .btn-toggle-values.active {
    background: none;
    color: #495057;
    border-color: #adb5bd;
}

:where(html.pg-private-clientes-index) .btn-toggle-values i {
    font-size: 1rem;
}

/* Estilo para quando os valores estão ocultos */
:where(html.pg-private-clientes-index) .values-hidden .value-to-hide {
    visibility: hidden;
    position: relative;
}

:where(html.pg-private-clientes-index) .values-hidden .value-to-hide::after {
    content: "R$ ***";
    visibility: visible;
    position: absolute;
    left: 0;
    color: #607084;
    font-weight: normal;
}

:where(html.pg-private-clientes-index) .bg-row-mobile {
    background-color: #1e293b;
    border-radius: 10px;
}

/* Estilos para a versão mobile dos clientes */
:where(html.pg-private-clientes-index) .client-info-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:where(html.pg-private-clientes-index) .client-stats-mobile {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-clientes-index) .client-address-mobile {
    font-size: 13px;
    color: #5f6f84;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Estilos para o botão de ocultar valores */
:where(html.pg-private-clientes-index) .btn-toggle-values {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

:where(html.pg-private-clientes-index) .btn-toggle-values:hover {
    background-color: #ffffff2e !important;
    color: #ac95fe !important;
}

:where(html.pg-private-clientes-index) .btn-toggle-values.active {
    background: none;
    color: #495057;
    border-color: #adb5bd;
}

:where(html.pg-private-clientes-index) .btn-toggle-values i {
    font-size: 1rem;
}

/* ─── private/conlibras/dashboard ─── */
/* escopo: pg-private-conlibras-dashboard */
/* O Chart.js com maintainAspectRatio: false ocupa a altura do pai. */
:where(html.pg-private-conlibras-dashboard) .conlibras-grafico {
    position: relative;
    height: 280px;
}
/* Barras finas nas listas e na situação dos eventos; a largura de cada uma
   vem do PHP (style="width: N%"). */
:where(html.pg-private-conlibras-dashboard) .conlibras-barra {
    height: 6px;
    background-color: var(--gk-tertiary-bg);
}

/* ─── private/configuracoes/empresa ─── */
/* escopo: pg-private-configuracoes-empresa */
:where(html.pg-private-configuracoes-empresa) #logoPreview {
  cursor: pointer;
  transition: transform 0.2s;
  border: 1px solid #dee2e6;
  background-color: #f8f9fa;
}

:where(html.pg-private-configuracoes-empresa) #logoPreview:hover {
  transform: scale(1.05);
}

/* ─── private/configuracoes/personalizar-recibo ─── */
/* escopo: pg-private-configuracoes-personalizar-recibo */
:where(html.pg-private-configuracoes-personalizar-recibo) #preview-frame-wrapper {
    position: relative;
    width: 100%;
    padding-top: 141%; /* proporção A4 */
    overflow: hidden;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
:where(html.pg-private-configuracoes-personalizar-recibo) #preview-frame-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 166.66%;
    height: 166.66%;
    transform: scale(0.6);
    transform-origin: top left;
    border: none;
    pointer-events: none;
}
:where(html.pg-private-configuracoes-personalizar-recibo) .config-section { border-bottom: 1px solid #f0f0f0; padding-bottom: 1rem; margin-bottom: 1rem; }
:where(html.pg-private-configuracoes-personalizar-recibo) .config-section:last-child { border-bottom: none; margin-bottom: 0; }
:where(html.pg-private-configuracoes-personalizar-recibo) .config-section .section-title { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; margin-bottom: .6rem; }
:where(html.pg-private-configuracoes-personalizar-recibo) .color-row { display: flex; align-items: center; gap: .5rem; }
:where(html.pg-private-configuracoes-personalizar-recibo) .color-row input[type=color] { width: 36px; height: 36px; padding: 2px; border-radius: 4px; border: 1px solid #dee2e6; flex-shrink: 0; cursor: pointer; }
:where(html.pg-private-configuracoes-personalizar-recibo) .color-row input[type=text] { flex: 1; }

/* ─── private/configuracoes/temas/personalizar ─── */
/* escopo: pg-private-configuracoes-temas-personalizar */
:where(html.pg-private-configuracoes-temas-personalizar) #preview-sidebar { background: var(--pr-corFundoSidebar, #0b1324); color: var(--pr-corTextoSidebar, #fff); width:180px; min-height:320px; padding:16px 8px; flex-shrink:0; border-radius:8px 0 0 8px; }
:where(html.pg-private-configuracoes-temas-personalizar) #preview-main    { flex:1; background: var(--pr-corFundo, #f5f4f0); padding:16px; border-radius:0 8px 8px 0; min-height:320px; }
:where(html.pg-private-configuracoes-temas-personalizar) #preview-topbar  { background: var(--pr-corPrimaria, #003ca4); color:#fff; padding:8px 12px; font-size:12px; border-radius:4px; margin-bottom:8px; }
:where(html.pg-private-configuracoes-temas-personalizar) #preview-card    { background: var(--pr-corCard, #fff); border:1px solid var(--pr-corBorda, #dee2e6); border-radius:4px; padding:10px; font-size:11px; color: var(--pr-corTexto, #212529); }
:where(html.pg-private-configuracoes-temas-personalizar) .btn-preview     { background: var(--pr-corPrimaria, #003ca4); color:#fff; border:none; border-radius:4px; padding:4px 10px; font-size:11px; cursor:default; }
:where(html.pg-private-configuracoes-temas-personalizar) .badge-preview   { background: var(--pr-corAcento, #00d37f); color:#fff; border-radius:3px; padding:2px 6px; font-size:10px; }
:where(html.pg-private-configuracoes-temas-personalizar) #preview-nav-item { background: var(--pr-corAcento, #00d37f); color:#fff; border-radius:4px; padding:3px 8px; font-size:11px; margin-bottom:4px; }

/* ─── private/configuracoes/temas ─── */
/* escopo: pg-private-configuracoes-temas */
  :where(html.pg-private-configuracoes-temas) .theme-option {
    position: relative;
    width: 172px;
  }

  :where(html.pg-private-configuracoes-temas) .theme-option .btn {
    transition: all 0.2s ease;
    border: 2px solid #dee2e6;
    border-radius: 10px;
    background: #fff;
  }

  :where(html.pg-private-configuracoes-temas) .theme-option .btn:hover {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.15);
  }

  :where(html.pg-private-configuracoes-temas) .theme-option .btn-check:checked + .btn {
    border-color: var(--bs-primary);
    border-width: 2.5px;
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    box-shadow: 0 4px 14px rgba(var(--bs-primary-rgb), 0.25);
    transform: translateY(-1px);
  }

  :where(html.pg-private-configuracoes-temas) .theme-option .btn-check:checked + .btn .theme-name {
    color: var(--bs-primary);
    font-weight: 700;
  }

  /* Checkmark badge aparece quando selecionado */
  :where(html.pg-private-configuracoes-temas) .theme-option .theme-check {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    background: var(--bs-primary);
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.4);
  }

  :where(html.pg-private-configuracoes-temas) .theme-option .btn-check:checked ~ .theme-check {
    display: flex;
  }

  :where(html.pg-private-configuracoes-temas) .theme-name {
    font-size: 0.88rem;
    font-weight: 500;
    color: #495057;
    transition: all 0.2s ease;
  }

  :where(html.pg-private-configuracoes-temas) .receipt-preview {
    max-width: 600px;
    margin: 0 auto;
  }

  :where(html.pg-private-configuracoes-temas) .signature-preview {
    font-size: 24px;
    min-height: 50px;
    border: 1px dashed #ccc;
    padding: 10px;
    margin-top: 10px;
    text-align: center;
  }

  :where(html.pg-private-configuracoes-temas) #footerImagePreview {
    max-width: 100%;
    max-height: 100px;
    margin-top: 10px;
    display: none;
  }
  :where(html.pg-private-configuracoes-temas) .lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

:where(html.pg-private-configuracoes-temas) .lightbox img {
    max-width: 90%;
    max-height: 90%;
    border: 3px solid white;
    border-radius: 5px;
}

:where(html.pg-private-configuracoes-temas) .lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 30px;
    cursor: pointer;
    background: none;
    border: none;
}

/* ─── private/empresas/index ─── */
/* escopo: pg-private-empresas-index */
/* Estilos para a página de empresas */
:where(html.pg-private-empresas-index) .empresa-info-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:where(html.pg-private-empresas-index) .empresa-details-mobile {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-empresas-index) .empresa-status-mobile {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

:where(html.pg-private-empresas-index) .status-ativa {
    background-color: #d1e7dd;
    color: #0f5132;
}

:where(html.pg-private-empresas-index) .status-desativada {
    background-color: #f8d7da;
    color: #842029;
}

:where(html.pg-private-empresas-index) .empresa-img-mobile {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #334156;
    flex-shrink: 0;
}

:where(html.pg-private-empresas-index) .empresa-img-mobile i {
    font-size: 24px;
    color: #a38ef1;
}

:where(html.pg-private-empresas-index) .data-empresa-mobile {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

:where(html.pg-private-empresas-index) .data-item-mobile {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

:where(html.pg-private-empresas-index) .data-label-mobile {
    font-size: 11px;
    color: #6c757d;
}

:where(html.pg-private-empresas-index) .data-mobile {
    font-size: 13px;
    font-weight: 600;
}

/* ─── private/empresas/ver ─── */
/* escopo: pg-private-empresas-ver */
:where(html.pg-private-empresas-ver) .avatar-cor {
  background-color: rgb(247 248 250) !important;
  color: #1e293b !important;
}

/* ─── private/estoque/cadastrar + private/estoque/editar ─── */
/* escopo: pg-private-estoque-cadastrar, pg-private-estoque-editar */
/* Container principal do código de barras */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .card .card-body {
    padding: 1rem;
}

/* Input group melhorado para mobile */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .input-group {
    flex-wrap: nowrap;
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .input-group .form-control {
    min-height: 50px;
    font-size: 16px; /* Prevenir zoom no iOS */
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .input-group .btn {
    min-height: 50px;
    white-space: nowrap;
    padding: 0.5rem 1rem;
}

/* Container da câmera */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #camera-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    padding: 20px;
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #camera-container .border {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    max-width: 100%;
    height: auto;
    position: relative;
}

/* Área do scanner */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #reader {
    max-width: 400px;
    margin: 0 auto;
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #reader video {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px;
}

/* Botão fechar câmera */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #camera-container .btn-secondary {
    margin-top: 1rem;
    padding: 0.75rem 1.5rem;
}

/* Melhorias para mobile */
@media (max-width: 768px) {
    :where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .input-group {
        flex-direction: column;
    }

    :where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .input-group .form-control {
        border-radius: 0.375rem;
        margin-bottom: 0.5rem;
        font-size: 18px; /* Melhor legibilidade no mobile */
        height: 60px;
    }

    :where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .input-group .btn {
        border-radius: 0.375rem;
        margin: 0.25rem 0;
        height: 50px;
        font-size: 16px;
    }

    /* Botões em linha no mobile */
    :where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .input-group .btn-group {
        display: flex;
        width: 100%;
    }

    :where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .input-group .btn-group .btn {
        flex: 1;
        margin: 0 2px;
    }

    /* Ajuste do container da câmera para mobile */
    :where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #camera-container .border {
        margin: 0;
        border-radius: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

}

/* Feedback visual */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .is-valid {
    border-color: #198754 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Texto de ajuda */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .form-text {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}
/* Área da câmera integrada */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #camera-container {
    display: none;
    margin-top: 1rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #camera-container.active {
    display: block;
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #reader {
    width: 100% !important;
    background: #000;
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #reader video {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover;
}

/* Botão de fechar integrado */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .btn-fechar-camera {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    background: rgba(0,0,0,0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Loading integrado */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-loading {
    display: none;
    text-align: center;
    padding: 50px 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-loading.active {
    display: block;
}

/* Status da câmera */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-status {
    text-align: center;
    padding: 10px;
    background: #e9ecef;
    font-size: 0.9rem;
    color: #6c757d;
}
/* Estados dos botões */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .btn-loading {
    position: relative;
    color: transparent;
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-right-color: transparent;
    animation: private_estoque_cadastrar_spin 1s linear infinite;
}

@keyframes private_estoque_cadastrar_spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* Modal da câmera - Visual profissional */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #camera-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #camera-container.active {
    display: flex;
}

/* Container da câmera */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-modal {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 100%;
    overflow: hidden;
    animation: private_estoque_cadastrar_modalFadeIn 0.3s ease-out;
}

@keyframes private_estoque_cadastrar_modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Header do modal */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-header {
    padding: 20px 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 16px;
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
}

/* Botão fechar */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .btn-fechar-camera {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    transition: all 0.2s ease;
    font-size: 18px;
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .btn-fechar-camera:hover {
    background: #e9ecef;
    color: #495057;
    border-color: #adb5bd;
}

/* Área do scanner */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-body {
    padding: 0;
    position: relative;
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #reader {
    width: 100% !important;
    background: #000;
    min-height: 300px;
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #reader video {
    width: 100% !important;
    height: 400px !important;
    object-fit: cover;
}

/* Status da câmera */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-status {
    text-align: center;
    padding: 16px 24px;
    background: #f8f9fa;
    color: #6c757d;
    font-size: 0.9rem;
    border-top: 1px solid #e9ecef;
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-status::before {
    content: "🎯 ";
}

/* Footer do modal */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-footer {
    padding: 16px 24px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

/* Loading integrado */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-loading {
    display: none;
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-loading.active {
    display: block;
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-loading .spinner-border {
    width: 3rem;
    height: 3rem;
    color: #007bff;
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-loading p {
    margin-top: 1rem;
    color: #6c757d;
    font-size: 1rem;
}

/* Botões principais */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #btnIniciarCamera {
    display: block;
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #btnPararCamera {
    display: none;
}

/* Responsivo */
@media (max-width: 768px) {
    :where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #camera-container {
        padding: 10px;
    }

    :where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-modal {
        max-width: 100%;
        margin: 0 10px;
    }

    :where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #reader video {
        height: 300px !important;
    }

    :where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-header {
        padding: 16px 20px 0;
        padding-bottom: 12px;
    }

    :where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-title {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    :where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #reader video {
        height: 250px !important;
    }

    :where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-header,
    :where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-footer {
        padding: 12px 16px;
    }
}

/* Efeito de overlay profissional */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) #camera-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

/* Botão de parar no footer */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .btn-parar-footer {
    background: #dc3545;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .btn-parar-footer:hover {
    background: #c82333;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}
/* Efeito de scan line (opcional) */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-body::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #00ff00 50%, 
        transparent 100%);
    animation: private_estoque_cadastrar_scanLine 2s linear infinite;
    z-index: 10;
}

@keyframes private_estoque_cadastrar_scanLine {
    0% {
        top: 0;
    }
    100% {
        top: 100%;
    }
}

/* Borda destacada no modal */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .camera-modal {
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ─── private/estoque/compras/index ─── */
/* escopo: pg-private-estoque-compras-index */
/* Estilos para a página de pedidos de compras */
:where(html.pg-private-estoque-compras-index) .pedido-info-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:where(html.pg-private-estoque-compras-index) .pedido-details-mobile {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-estoque-compras-index) .pedido-status-mobile {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

:where(html.pg-private-estoque-compras-index) .status-pendente {
    background-color: #fff3cd;
    color: #856404;
}

:where(html.pg-private-estoque-compras-index) .status-recebido {
    background-color: #d1e7dd;
    color: #0f5132;
}

:where(html.pg-private-estoque-compras-index) .pedido-entrega-mobile {
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}

:where(html.pg-private-estoque-compras-index) .pedido-img-mobile {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    flex-shrink: 0;
}

:where(html.pg-private-estoque-compras-index) .pedido-img-mobile i {
    font-size: 24px;
    color: #6c757d;
}

:where(html.pg-private-estoque-compras-index) .pedido-quantidade-mobile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

:where(html.pg-private-estoque-compras-index) .quantidade-label-mobile {
    font-size: 11px;
    color: #6c757d;
}

:where(html.pg-private-estoque-compras-index) .quantidade-mobile {
    font-size: 13px;
    font-weight: 600;
}

/* Reutilizando estilos das outras páginas */
:where(html.pg-private-estoque-compras-index) .group-list {
    max-width: 420px;
    margin: auto;
}

:where(html.pg-private-estoque-compras-index) .group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #263347;
}

:where(html.pg-private-estoque-compras-index) .group-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

:where(html.pg-private-estoque-compras-index) .group-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

:where(html.pg-private-estoque-compras-index) .group-text p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-estoque-compras-index) .arrow {
    font-size: 20px;
    color: #bbb;
    font-weight: bold;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #334155;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html.pg-private-estoque-compras-index) .arrow:hover {
    background-color: #4747e6;
}

:where(html.pg-private-estoque-compras-index) .arrow a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

:where(html.pg-private-estoque-compras-index) .bg-row-mobile {
    background-color: #1e293b;
    border-radius: 10px;
}

:where(html.pg-private-estoque-compras-index) #paginacao-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

:where(html.pg-private-estoque-compras-index) #search-resultado-mobile {
    margin-bottom: 15px;
}

/* ─── private/estoque/index ─── */
/* escopo: pg-private-estoque-index */
/* Estilos para a página de produtos */
:where(html.pg-private-estoque-index) .produto-info-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:where(html.pg-private-estoque-index) .produto-details-mobile {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-estoque-index) .produto-status-mobile {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

:where(html.pg-private-estoque-index) .status-ativo {
    background-color: #d1e7dd;
    color: #0f5132;
}

:where(html.pg-private-estoque-index) .status-inativo {
    background-color: #f8d7da;
    color: #842029;
}

:where(html.pg-private-estoque-index) .produto-img-mobile {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    flex-shrink: 0;
}

:where(html.pg-private-estoque-index) .produto-img-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(html.pg-private-estoque-index) .produto-img-mobile i {
    font-size: 24px;
    color: #6c757d;
}

:where(html.pg-private-estoque-index) .valores-produto-mobile {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

:where(html.pg-private-estoque-index) .valor-item-mobile {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

:where(html.pg-private-estoque-index) .valor-label-mobile {
    font-size: 11px;
    color: #6c757d;
}

:where(html.pg-private-estoque-index) .valor-mobile {
    font-size: 13px;
    font-weight: 600;
}

/* Reutilizando estilos das outras páginas */
:where(html.pg-private-estoque-index) .group-list {
    max-width: 420px;
    margin: auto;
}

:where(html.pg-private-estoque-index) .group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #263347;
}

:where(html.pg-private-estoque-index) .group-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

:where(html.pg-private-estoque-index) .group-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

:where(html.pg-private-estoque-index) .group-text p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-estoque-index) .arrow {
    font-size: 20px;
    color: #bbb;
    font-weight: bold;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #334155;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html.pg-private-estoque-index) .arrow:hover {
    background-color: #4747e6;
}

:where(html.pg-private-estoque-index) .arrow a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

:where(html.pg-private-estoque-index) .bg-row-mobile {
    background-color: #1e293b;
    border-radius: 10px;
}

:where(html.pg-private-estoque-index) #paginacao-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

:where(html.pg-private-estoque-index) #search-resultado-mobile {
    margin-bottom: 15px;
}

:where(html.pg-private-estoque-index) .toggle-btn {
    display: inline-flex;
    border-radius: 25px;
    background: #334156;
    padding: 4px;
    margin-bottom: 15px;
}

:where(html.pg-private-estoque-index) .toggle-btn button {
    border: none;
    padding: 8px 18px;
    border-radius: 20px;
    background: transparent;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.3s ease;
}

:where(html.pg-private-estoque-index) .toggle-btn button.active {
    background: white;
    color: #000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ─── private/financeiro/despesas ─── */
/* escopo: pg-private-financeiro-despesas */
/* Sistema de cores para finanças */
:root:where(.pg-private-financeiro-despesas) {
    --color-income: #28a745;
    --color-expense: #dc3545;
    --color-pending: #ffc107;
    --color-paid: #20c997;
    --color-fixed: #17a2b8;
    --color-card: #1e293b;
    --gk-table-bg: #38a16a;
}

/* Cores para status */
:where(html.pg-private-financeiro-despesas) .expense-amount {
    color: var(--color-expense);
    font-weight: 600;
}

:where(html.pg-private-financeiro-despesas) .status-paid {
    color: var(--color-paid);
}

:where(html.pg-private-financeiro-despesas) .status-pending {
    color: var(--color-pending);
}

:where(html.pg-private-financeiro-despesas) .fixed-badge {
    background-color: var(--color-fixed);
    color: white;
}

/* Tabela otimizada */
:where(html.pg-private-financeiro-despesas) .finance-table {
    margin-bottom: 0;
}

:where(html.pg-private-financeiro-despesas) .finance-table th {
    padding: 0.75rem 0.5rem;
    /* Padding das células */
}

:where(html.pg-private-financeiro-despesas) .finance-table td {
    padding: 0.75rem 0.5rem;
    /* Padding das células */
    vertical-align: middle;
    /* Texto mais claro */
}

:where(html.pg-private-financeiro-despesas) .finance-table tr:not(:last-child) td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Borda mais sutil */
}

:where(html.pg-private-financeiro-despesas) .category-badge {
    background-color: rgba(255, 255, 255, 0.1);
    /* Texto mais claro */
}

/* ─── private/financeiro/receitas ─── */
/* escopo: pg-private-financeiro-receitas */
/* Sistema de cores para finanças */
:root:where(.pg-private-financeiro-receitas) {
    --color-income: #28a745;
    --color-expense: #dc3545;
    --color-pending: #ffc107;
    --color-received: #20c997;
    --color-card: #1e293b;
    --gk-table-bg: #38a16a;
}

/* Cores para status */
:where(html.pg-private-financeiro-receitas) .income-amount {
    color: var(--color-income);
    font-weight: 600;
}

:where(html.pg-private-financeiro-receitas) .status-received {
    color: var(--color-received);
}

:where(html.pg-private-financeiro-receitas) .status-pending {
    color: var(--color-pending);
}


:where(html.pg-private-financeiro-receitas) .category-badge {
    font-size: 0.7rem;
    background-color: rgba(255, 255, 255, 0.1);
    /* Fundo mais sutil */
    color: #dee2e6;
    /* Texto mais claro */
}

/* ─── private/fornecedores/index ─── */
/* escopo: pg-private-fornecedores-index */
/* Estilos para a página de fornecedores */
:where(html.pg-private-fornecedores-index) .fornecedor-info-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:where(html.pg-private-fornecedores-index) .fornecedor-details-mobile {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-fornecedores-index) .fornecedor-status-mobile {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

:where(html.pg-private-fornecedores-index) .status-ativo {
    background-color: #d1e7dd;
    color: #0f5132;
}

:where(html.pg-private-fornecedores-index) .status-desabilitado {
    background-color: #f8d7da;
    color: #842029;
}

:where(html.pg-private-fornecedores-index) .fornecedor-link-mobile {
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

:where(html.pg-private-fornecedores-index) .fornecedor-link-mobile a {
    color: #0d6efd;
    text-decoration: none;
}

:where(html.pg-private-fornecedores-index) .fornecedor-link-mobile a:hover {
    text-decoration: underline;
}

:where(html.pg-private-fornecedores-index) .fornecedor-img-mobile {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    flex-shrink: 0;
}

:where(html.pg-private-fornecedores-index) .fornecedor-img-mobile i {
    font-size: 24px;
    color: #6c757d;
}

/* Reutilizando estilos das outras páginas */
:where(html.pg-private-fornecedores-index) .group-list {
    max-width: 420px;
    margin: auto;
}

:where(html.pg-private-fornecedores-index) .group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #263347;
}

:where(html.pg-private-fornecedores-index) .group-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

:where(html.pg-private-fornecedores-index) .group-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

:where(html.pg-private-fornecedores-index) .group-text p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-fornecedores-index) .arrow {
    font-size: 20px;
    color: #bbb;
    font-weight: bold;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #334155;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html.pg-private-fornecedores-index) .arrow:hover {
    background-color: #4747e6;
}

:where(html.pg-private-fornecedores-index) .arrow a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

:where(html.pg-private-fornecedores-index) .bg-row-mobile {
    background-color: #1e293b;
    border-radius: 10px;
}

:where(html.pg-private-fornecedores-index) #paginacao-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

:where(html.pg-private-fornecedores-index) #search-resultado-mobile {
    margin-bottom: 15px;
}

/* ─── private/funcionarios/ver ─── */
/* escopo: pg-private-funcionarios-ver */
/* Habilidades: texto livre, mantém as quebras de linha digitadas. */
:where(html.pg-private-funcionarios-ver) .funcionario-habilidades {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ─── private/funcionarios/index ─── */
/* escopo: pg-private-funcionarios-index */
/* Estilos específicos para a página de funcionários */
:where(html.pg-private-funcionarios-index) .funcionario-info-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:where(html.pg-private-funcionarios-index) .funcionario-details-mobile {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-funcionarios-index) .funcionario-status-mobile {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

:where(html.pg-private-funcionarios-index) .status-ativo {
    background-color: #d1e7dd;
    color: #0f5132;
}

:where(html.pg-private-funcionarios-index) .status-inativo {
    background-color: #f8d7da;
    color: #842029;
}

:where(html.pg-private-funcionarios-index) .no-wrap-btn {
    white-space: nowrap;
}

/* ─── private/home/index ─── */
/* escopo: pg-private-home-index */
:root:where(.pg-private-home-index) {
    --primary-color: #4e73df;
    --secondary-color: #1cc88a;
    --accent-color: #f6c23e;
    --dark-color: #5a5c69;
}

:where(html.pg-private-home-index) .welcome-card {
    background: linear-gradient(135deg, #003ca4 0%, #224abe 100%);
    color: white;
    border: none;
}

:where(html.pg-private-home-index) .quick-action-card {
    transition: all 0.3s ease;
    border-radius: 10px;
    border-left: 4px solid var(--primary-color);
}

:where(html.pg-private-home-index) .quick-action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

:where(html.pg-private-home-index) .stat-card {
    border-radius: 10px;
    border-left: 4px solid var(--secondary-color);
}

/* O Swiper corta com overflow: hidden; com os cards em h-100, a borda de
   baixo (1px) ficava exatamente no limite e sumia. Uma folga interna deixa
   a borda e a sombra do card aparecerem inteiras. */
:where(html.pg-private-home-index) .stat-slider { padding: 2px 2px 6px; }

:where(html.pg-private-home-index) .icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4e73df38;
    color: var(--primary-color);
}

:where(html.pg-private-home-index) .recent-activity-item {
    border-left: 3px solid var(--primary-color);
    padding-left: 15px;
    margin-bottom: 15px;
}

:where(html.pg-private-home-index) .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

/* ─── private/insumos/index ─── */
/* escopo: pg-private-insumos-index */
/* Estilos para a página de insumos */
:where(html.pg-private-insumos-index) .insumo-info-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:where(html.pg-private-insumos-index) .insumo-details-mobile {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-insumos-index) .insumo-status-mobile {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

:where(html.pg-private-insumos-index) .status-ativo {
    background-color: #d1e7dd;
    color: #0f5132;
}

:where(html.pg-private-insumos-index) .status-inativo {
    background-color: #f8d7da;
    color: #842029;
}

:where(html.pg-private-insumos-index) .insumo-desc-mobile {
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}

:where(html.pg-private-insumos-index) .insumo-img-mobile {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    flex-shrink: 0;
}

:where(html.pg-private-insumos-index) .insumo-img-mobile i {
    font-size: 24px;
    color: #6c757d;
}

:where(html.pg-private-insumos-index) .insumo-valor-mobile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

:where(html.pg-private-insumos-index) .valor-label-mobile {
    font-size: 11px;
    color: #6c757d;
}

:where(html.pg-private-insumos-index) .valor-mobile {
    font-size: 13px;
    font-weight: 600;
}

/* Reutilizando estilos das outras páginas */
:where(html.pg-private-insumos-index) .group-list {
    max-width: 420px;
    margin: auto;
}

:where(html.pg-private-insumos-index) .group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #263347;
}

:where(html.pg-private-insumos-index) .group-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

:where(html.pg-private-insumos-index) .group-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

:where(html.pg-private-insumos-index) .group-text p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-insumos-index) .arrow {
    font-size: 20px;
    color: #bbb;
    font-weight: bold;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #334155;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html.pg-private-insumos-index) .arrow:hover {
    background-color: #4747e6;
}

:where(html.pg-private-insumos-index) .arrow a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

:where(html.pg-private-insumos-index) .bg-row-mobile {
    background-color: #1e293b;
    border-radius: 10px;
}

:where(html.pg-private-insumos-index) #paginacao-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

:where(html.pg-private-insumos-index) #search-resultado-mobile {
    margin-bottom: 15px;
}

/* ─── private/lgpd/nova_solicitacao ─── */
/* escopo: pg-private-lgpd-nova-solicitacao */
:where(html.pg-private-lgpd-nova-solicitacao) .lgpd-tipo-card input:checked + .card {
    border-color: #6366f1 !important;
    background-color: rgba(99,102,241,.05);
}
:where(html.pg-private-lgpd-nova-solicitacao) .lgpd-tipo-card .card:hover {
    border-color: #6366f1;
}

/* ─── private/mdfe/ver ─── */
/* escopo: pg-private-mdfe-ver */
:where(html.pg-private-mdfe-ver) .info-label { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; font-weight:600; }
:where(html.pg-private-mdfe-ver) .info-value { font-size:.95rem; }
:where(html.pg-private-mdfe-ver) .chave-acesso { font-family:monospace; font-size:.82rem; word-break:break-all; }

/* ─── private/modulos/index ─── */
/* escopo: pg-private-modulos-index */
/* Estilos para a página de módulos */
:where(html.pg-private-modulos-index) .modulo-info-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:where(html.pg-private-modulos-index) .modulo-details-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-modulos-index) .modulo-img-mobile {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #334156;
    flex-shrink: 0;
}

:where(html.pg-private-modulos-index) .modulo-img-mobile i {
    font-size: 24px;
    color: #ac95fe;
}

:where(html.pg-private-modulos-index) .descricao-modulo-mobile {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    color: #6c757d;
}

/* ─── private/nfe/emitir ─── */
/* escopo: pg-private-nfe-emitir */
/* Cada item é um bloco fechado: os campos fiscais (NCM, CFOP, unidade)
   ficam numa faixa própria, separados da descrição e dos valores. Na
   tabela anterior eles disputavam a mesma célula e a leitura se perdia. */
:where(html.pg-private-nfe-emitir) .nfe-item { transition: border-color .15s ease-in-out; }
:where(html.pg-private-nfe-emitir) .nfe-item:focus-within { border-color: var(--bs-primary); }
:where(html.pg-private-nfe-emitir) .nfe-item + .nfe-item { margin-top: .75rem; }
:where(html.pg-private-nfe-emitir) .nfe-item-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
:where(html.pg-private-nfe-emitir) .nfe-item-numero {
    min-width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
:where(html.pg-private-nfe-emitir) .nfe-item-titulo {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:where(html.pg-private-nfe-emitir) .nfe-item-total { font-variant-numeric: tabular-nums; }
:where(html.pg-private-nfe-emitir) .nfe-acoes { position: sticky; top: 1rem; z-index: 2; }
:where(html.pg-private-nfe-emitir) .nfe-vazio { border: 1px dashed var(--bs-border-color); border-radius: var(--bs-border-radius); }
@media (max-width: 575.98px) {
    :where(html.pg-private-nfe-emitir) .nfe-acoes { position: static; }
}

/* ─── private/nfe/index ─── */
/* escopo: pg-private-nfe-index */
:root:where(.pg-private-nfe-index) {
    --nfe-autorizada:  #28a745;
    --nfe-rascunho:    #6c757d;
    --nfe-aguardando:  #ffc107;
    --nfe-cancelada:   #dc3545;
    --nfe-denegada:    #6f42c1;
    --nfe-rejeitada:   #fd7e14;
    --nfe-inutilizada: #17a2b8;
}

:where(html.pg-private-nfe-index) .nfe-badge-0  { background: var(--nfe-rascunho);    color:#fff; }
:where(html.pg-private-nfe-index) .nfe-badge-1  { background: var(--nfe-aguardando);  color:#000; }
:where(html.pg-private-nfe-index) .nfe-badge-2  { background: var(--nfe-autorizada);  color:#fff; }
:where(html.pg-private-nfe-index) .nfe-badge-3  { background: var(--nfe-cancelada);   color:#fff; }
:where(html.pg-private-nfe-index) .nfe-badge-4  { background: var(--nfe-denegada);    color:#fff; }
:where(html.pg-private-nfe-index) .nfe-badge-5  { background: var(--nfe-inutilizada); color:#fff; }
:where(html.pg-private-nfe-index) .nfe-badge-6  { background: var(--nfe-rejeitada);   color:#fff; }

:where(html.pg-private-nfe-index) .nfe-table th, :where(html.pg-private-nfe-index) .nfe-table td { vertical-align: middle; padding: .6rem .75rem; }
:where(html.pg-private-nfe-index) .nfe-table tr:not(:last-child) td { border-bottom: 1px solid rgba(255,255,255,.05); }

:where(html.pg-private-nfe-index) .stat-card { border-radius: .75rem; padding: 1.25rem 1.5rem; }

/* ─── private/nfe/ver ─── */
/* escopo: pg-private-nfe-ver */
:where(html.pg-private-nfe-ver) .info-label  { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; font-weight:600; }
:where(html.pg-private-nfe-ver) .info-value  { font-size:.95rem; }
:where(html.pg-private-nfe-ver) .danfe-header{ background:#f1f5f9; border-radius:.5rem; padding:1rem; }
:where(html.pg-private-nfe-ver) .chave-acesso{ font-family:monospace; font-size:.82rem; word-break:break-all; }

/* ─── private/novidades/form ─── */
/* escopo: pg-private-novidades-form */
:where(html.pg-private-novidades-form) .ql-editor {
    min-height: 200px;
    font-size: 14px;
}

/* .ql-snow a mais de propósito: o quill.snow.css é carregado de novo dentro
   desta tela (depois do styles.css) e, com a mesma especificidade, voltaria
   a impor a fonte Helvetica no editor. */
:where(html.pg-private-novidades-form) .ql-container.ql-snow {
    font-family: inherit;
}

:where(html.pg-private-novidades-form) #previewDescricao {
    text-align: left;
}

:where(html.pg-private-novidades-form) #previewDescricao img {
    max-width: 100%;
    height: auto;
}

/* Estilo para imagens no editor */
:where(html.pg-private-novidades-form) .ql-editor img {
    cursor: pointer;
    max-width: 100%;
    height: auto;
    transition: outline 0.2s ease;
}

:where(html.pg-private-novidades-form) .ql-editor img:hover {
    outline: 2px dashed #003ca4;
}

/* ─── private/pagamento/index ─── */
/* escopo: pg-private-pagamento-index */
:where(html.pg-private-pagamento-index) .setup-container {
	max-width: 800px;
	margin: 2rem auto;
}

:where(html.pg-private-pagamento-index) .setup-card {
	border: none;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

:where(html.pg-private-pagamento-index) .setup-header {
	background-color: #0051d8;
	color: white;
	padding: 1.5rem;
	text-align: center;
}

:where(html.pg-private-pagamento-index) .setup-body {
	padding: 2.5rem;
}

:where(html.pg-private-pagamento-index) .step-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
	color: #0051d8;
}

:where(html.pg-private-pagamento-index) .setup-title {
	font-weight: 600;
	margin-bottom: 1rem;
}

:where(html.pg-private-pagamento-index) .btn-primary {
	background-color: #0051d8;
	border-color: #0051d8;
	padding: 10px 20px;
	border-radius: 8px;
}

:where(html.pg-private-pagamento-index) .table-faturas {
	margin-top: 2rem;
}

:where(html.pg-private-pagamento-index) .table-faturas th, 
:where(html.pg-private-pagamento-index) .table-faturas td {
	vertical-align: middle;
}

@media (max-width: 767.98px) {
	:where(html.pg-private-pagamento-index) .col-md-6 {
		max-width: 100%;
	}
}

/* ─── private/pedidos/editar ─── */
/* escopo: pg-private-pedidos-editar */
:where(html.pg-private-pedidos-editar) #configuracoesAvancadas {
    transition: all 0.3s ease;
    overflow: hidden;
    display: block !important;
    /* Sobrescreve o d-none para a animação */
    max-height: 0;
    opacity: 0;
}

:where(html.pg-private-pedidos-editar) #configuracoesAvancadas.show {
    max-height: 1000px;
    /* Valor maior que o conteúdo */
    opacity: 1;
}

:where(html.pg-private-pedidos-editar) #configuracoesAvancadas .card {
    display: flex;
    flex-direction: column;
}

/* Ajusta o tamanho do dropdown */
:where(html.pg-private-pedidos-editar) .input-group-prepend .btn {
    min-width: 50px;
    text-align: center;
}

/* Alinha os itens do dropdown */
:where(html.pg-private-pedidos-editar) .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

:where(html.pg-private-pedidos-editar) .autocomplete-container {
    position: relative;
}

:where(html.pg-private-pedidos-editar) #sugestoesServico {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background-color: white;
    display: none;
}

:where(html.pg-private-pedidos-editar) .sugestao-servico {
    cursor: pointer;
    border: none;
    border-radius: 0;
}

:where(html.pg-private-pedidos-editar) .sugestao-servico:hover,
:where(html.pg-private-pedidos-editar) .sugestao-servico.active {
    background-color: #f8f9fa;
}
/* Esconde container mobile no desktop */
@media (min-width: 768px) {
    :where(html.pg-private-pedidos-editar) .mobile-products-container {
        display: none;
    }
}

/* Mantém a tabela web visível apenas no desktop */
@media (max-width: 767.98px) {
    :where(html.pg-private-pedidos-editar) .table-responsive {
        display: none;
    }
}

/* Tabela de itens do pedido — sem scroll horizontal */
:where(html.pg-private-pedidos-editar) .pedido-itens-table {
    table-layout: fixed;
    width: 100%;
}
:where(html.pg-private-pedidos-editar) .pedido-itens-table td,
:where(html.pg-private-pedidos-editar) .pedido-itens-table th {
    white-space: normal;
    word-break: break-word;
    vertical-align: middle;
}
:where(html.pg-private-pedidos-editar) .pedido-itens-table .col-produto {
    width: 50%;
}
:where(html.pg-private-pedidos-editar) .pedido-itens-table .col-itens {
    width: 25%;
}
:where(html.pg-private-pedidos-editar) .pedido-itens-table .col-valor {
    width: 18%;
    white-space: nowrap;
}
:where(html.pg-private-pedidos-editar) .pedido-itens-table td.valor-total {
    white-space: nowrap;
}
:where(html.pg-private-pedidos-editar) .pedido-itens-table .col-acao {
    width: 7%;
    padding-right: 16px !important;
    text-align: center;
}
/* Imagem do produto na tabela */
:where(html.pg-private-pedidos-editar) .produto-img-wrap {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 6px;
    overflow: visible;
}
:where(html.pg-private-pedidos-editar) .produto-img-wrap img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    display: block;
    border-radius: 6px;
}
/* Ex-style="background-color:#f8f9fa" do PHP: com a variável do tema o
   quadrinho acompanha o tema escuro. */
:where(html.pg-private-pedidos-editar) .produto-img-wrap.produto-img-vazia { background-color: var(--gk-tertiary-bg); }
/* Ex-style inline do campo de quantidade. O seletor precisa passar do
   ".input-group > .form-control" do tema (min-width: 0), que o inline vencia.
   O fundo fixo rgb(253,253,253) saiu: o do .form-control já muda no escuro. */
:where(html.pg-private-pedidos-editar) .input-group > .quantity-field.pedido-qtd-campo { min-width: 80px; max-width: 120px; }
:where(html.pg-private-pedidos-editar) .produto-img-wrap i {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Nome do produto */
:where(html.pg-private-pedidos-editar) .produto-nome {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}
/* SKU menor */
:where(html.pg-private-pedidos-editar) .produto-sku {
    font-size: 0.72rem;
    color: #6c757d;
}
/* Mobile: nome com quebra de linha */
:where(html.pg-private-pedidos-editar) .mobile-product-name {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    font-size: 0.88rem;
    line-height: 1.3;
}
:where(html.pg-private-pedidos-editar) .mobile-product-image {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
}
:where(html.pg-private-pedidos-editar) .mobile-product-image img,
:where(html.pg-private-pedidos-editar) .mobile-product-image i {
    width: 34px;
    height: 34px;
    object-fit: cover;
    font-size: 1.2rem;
}

/* Menu flutuante: os filhos diretos viram uma pilha de largura cheia.
   O CSS global só faz isso com <a>, e agora há também <button>, <form> e <hr>
   ali dentro — sem isto eles ficariam lado a lado. */
:where(html.pg-private-pedidos-editar) .floating-buttons {
    max-height: 70vh;
    overflow-y: auto;
    text-align: left;
}

:where(html.pg-private-pedidos-editar) .floating-buttons > a,
:where(html.pg-private-pedidos-editar) .floating-buttons > button,
:where(html.pg-private-pedidos-editar) .floating-buttons > form {
    display: block;
    width: 100%;
    margin: 5px 0;
    white-space: nowrap;
    text-align: left;
}

:where(html.pg-private-pedidos-editar) .floating-buttons > hr {
    margin: 8px 0;
    opacity: .25;
}

/* Imagens anexadas ao pedido: grade de miniaturas e visualizador. */
:where(html.pg-private-pedidos-editar) .pedido-anexos-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

:where(html.pg-private-pedidos-editar) .pedido-anexos-grade:empty {
    display: none;
}

:where(html.pg-private-pedidos-editar) .pedido-anexo {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gk-border-color);
    border-radius: 10px;
    overflow: hidden;
    background: var(--gk-card-background);
}

:where(html.pg-private-pedidos-editar) .pedido-anexo-miniatura {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--gk-tertiary-bg);
    cursor: zoom-in;
}

:where(html.pg-private-pedidos-editar) .pedido-anexo-miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(html.pg-private-pedidos-editar) .pedido-anexo.is-enviando .pedido-anexo-miniatura {
    cursor: progress;
}

:where(html.pg-private-pedidos-editar) .pedido-anexo-acoes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    color: var(--gk-body-color);
}

/* O visor tem altura fixa (tela menos cabeçalho, rodapé e margens do
   modal) e a imagem preenche essa caixa com object-fit: contain. Assim ela
   sempre cabe inteira, em pé ou deitada, sem rolar nem cortar. O dvh
   desconta a barra do navegador no celular; o vh fica de reserva. */
:where(html.pg-private-pedidos-editar) .pedido-anexo-visor {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 13rem);
    height: calc(100dvh - 13rem);
    min-height: 240px;
    padding: 0;
    overflow: hidden;
    background: var(--gk-tertiary-bg);
}

:where(html.pg-private-pedidos-editar) .pedido-anexo-visor img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Celular: o modal ocupa a tela inteira (modal-fullscreen-sm-down), sem as
   margens; sobra só cabeçalho + rodapé. */
@media (max-width: 575.98px) {
    :where(html.pg-private-pedidos-editar) .pedido-anexo-visor {
        height: calc(100vh - 8rem);
        height: calc(100dvh - 8rem);
    }
}

:where(html.pg-private-pedidos-editar) .pedido-anexo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    opacity: .85;
}

:where(html.pg-private-pedidos-editar) .pedido-anexo-nav.is-anterior { left: 10px; }
:where(html.pg-private-pedidos-editar) .pedido-anexo-nav.is-proxima { right: 10px; }

/* Descrição formatada do item personalizado (editor Quill + popup na lista). */
:where(html.pg-private-pedidos-editar) .descricao-editor {
    height: auto;
    background: var(--gk-card-background);
    color: var(--gk-body-color);
}
/* O texto rola dentro do editor: sem limite, ele crescia com o conteúdo e
   empurrava os campos para fora do modal. */
:where(html.pg-private-pedidos-editar) .descricao-editor .ql-editor {
    height: auto;
    min-height: 160px;
    max-height: 40vh;
    overflow-y: auto;
    font-size: .95rem;
}
/* O Quill põe max-width:100% (imagem do tamanho do editor). Aqui ela fica
   como miniatura; no popup aparece maior. */
:where(html.pg-private-pedidos-editar) .descricao-editor .ql-editor img {
    width: auto;
    max-width: min(100%, 320px);
    max-height: 180px;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
}

/* "Adicionar item" em tela cheia: o <form> fica entre .modal-content e
   .modal-body, então a rolagem interna do Bootstrap não funciona e o
   conteúdo vazava do modal. O próprio conteúdo passa a rolar. */
:where(html.pg-private-pedidos-editar) #exampleModal .modal-fullscreen .modal-content {
    overflow-y: auto;
}

/* Na lista: uma linha, cortada com "…"; o popup mostra o resto. */
:where(html.pg-private-pedidos-editar) .personalizado-resumo {
    display: inline-block;
    min-width: 0;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    cursor: pointer; /* clicar no texto abre a edição da descrição */
}
@media (max-width: 767.98px) {
    :where(html.pg-private-pedidos-editar) .personalizado-resumo {
        max-width: 100%;
    }
}

:where(html.pg-private-pedidos-editar) .popover-descricao {
    --gk-popover-max-width: min(440px, 92vw);
}
:where(html.pg-private-pedidos-editar) .popover-descricao .popover-body {
    max-height: 60vh;
    overflow-y: auto;
}

/* Conteúdo do editor fora dele: imagens contidas e as classes de formatação do Quill. */
:where(html.pg-private-pedidos-editar) .descricao-rica img {
    display: block;
    max-width: 100%;
    max-height: 260px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 6px 0;
    border-radius: 6px;
}
:where(html.pg-private-pedidos-editar) .descricao-rica p:last-child {
    margin-bottom: 0;
}
:where(html.pg-private-pedidos-editar) .descricao-rica .ql-align-center { text-align: center; }
:where(html.pg-private-pedidos-editar) .descricao-rica .ql-align-right { text-align: right; }
:where(html.pg-private-pedidos-editar) .descricao-rica .ql-align-justify { text-align: justify; }
:where(html.pg-private-pedidos-editar) .descricao-rica .ql-indent-1 { padding-left: 2em; }
:where(html.pg-private-pedidos-editar) .descricao-rica .ql-indent-2 { padding-left: 4em; }
/* Quill 2 grava as duas listas como <ol>; o tipo vem em data-list. */
:where(html.pg-private-pedidos-editar) .descricao-rica li[data-list="bullet"] { list-style-type: disc; }
:where(html.pg-private-pedidos-editar) .descricao-rica li[data-list="ordered"] { list-style-type: decimal; }

/* Caderno de obra/serviço: lista de registros datados. */
:where(html.pg-private-pedidos-editar) .caderno-item {
    padding: 12px 0;
    border-top: 1px solid var(--gk-border-color);
}

:where(html.pg-private-pedidos-editar) .caderno-item-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

/* O texto vem por textContent: pre-wrap mantém as quebras de linha digitadas. */
:where(html.pg-private-pedidos-editar) .caderno-item-texto {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--gk-body-color);
}

/* ─── private/pedidos/documento ─── */
/* escopo: pg-private-pedidos-documento — orçamento/comprovante dentro do
   sistema: as páginas do PDF (desenhadas pelo visor-pdf.js) como folhas
   sobre um fundo neutro. */
:where(html.pg-private-pedidos-documento) .documento-visor {
    width: 100%;
    max-width: min(900px, 100%);
    min-width: 0;
    overflow-x: hidden;
    margin: 0 auto;
    padding: 16px;
    border: 1px solid var(--gk-border-color);
    border-radius: 12px;
    background: var(--gk-tertiary-bg);
}
:where(html.pg-private-pedidos-documento) .documento-paginas {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
:where(html.pg-private-pedidos-documento) .visor-pdf-pagina {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    background: #fff; /* o papel do PDF é branco também no tema escuro */
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
:where(html.pg-private-pedidos-documento) .documento-carregando,
:where(html.pg-private-pedidos-documento) .documento-erro {
    padding: 48px 16px;
    text-align: center;
    color: var(--gk-secondary-color);
}
@media (max-width: 575.98px) {
    :where(html.pg-private-pedidos-documento) .documento-visor {
        padding: 8px;
        border-radius: 8px;
    }
    :where(html.pg-private-pedidos-documento) .documento-acoes .btn {
        flex: 1 1 calc(50% - .5rem);
    }
}

/* ─── private/pedidos/index ─── */
/* escopo: pg-private-pedidos-index */
:where(html.pg-private-pedidos-index, html.pg-private-pedidos-orcamentos) #sugestoesCliente {
    position: absolute;
    z-index: 1050;
    width: 95%;
    /* Mesma largura do input */
    max-height: 200px;
    overflow-y: auto;
    background: #414f63;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    margin-top: 2px;
    display: none;
}

:where(html.pg-private-pedidos-index, html.pg-private-pedidos-orcamentos) .sugestao-cliente {
    padding: 0.5rem 1rem;
    border: none;
    background: #414f63;
    color: #ffffff;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

:where(html.pg-private-pedidos-index, html.pg-private-pedidos-orcamentos) .sugestao-cliente:hover,
:where(html.pg-private-pedidos-index, html.pg-private-pedidos-orcamentos) .sugestao-cliente.active {
    background-color: #0b1324;
    color: #ffffff;
    text-decoration: none;
}

:where(html.pg-private-pedidos-index, html.pg-private-pedidos-orcamentos) .sugestao-cliente:first-child {
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

:where(html.pg-private-pedidos-index, html.pg-private-pedidos-orcamentos) .sugestao-cliente:last-child {
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

/* Container relativo para posicionamento absoluto */

/* Menu flutuante: os filhos diretos viram uma pilha de largura cheia.
   O CSS global só faz isso com <a>, e aqui há <button> também — sem esta
   regra eles ficariam lado a lado. */
:where(html.pg-private-pedidos-index) .floating-buttons {
    text-align: left;
}

:where(html.pg-private-pedidos-index) .floating-buttons > a,
:where(html.pg-private-pedidos-index) .floating-buttons > button {
    display: block;
    width: 100%;
    margin: 5px 0;
    white-space: nowrap;
    text-align: left;
}
/* Overlay de gravação — aparece antes de qualquer modal */
:where(html.pg-private-pedidos-index) #pvGravacao {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1080;
    background: rgba(11, 19, 36, .92);
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

:where(html.pg-private-pedidos-index) #pvGravacao.aberto {
    display: flex;
}

:where(html.pg-private-pedidos-index) #pvGravacao .pv-card {
    width: 100%;
    max-width: 480px;
    text-align: center;
    color: #fff;
}

:where(html.pg-private-pedidos-index) #pvGravacao .pv-onda {
    width: 120px;
    height: 120px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: #dc3545;
    color: #fff;
    font-size: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: private_pedidos_index_pvPulse 1.2s ease-in-out infinite;
}

:where(html.pg-private-pedidos-index) #pvGravacao.processando .pv-onda {
    background: #0dcaf0;
    animation: none;
}

:where(html.pg-private-pedidos-index) #pvGravacao .pv-texto {
    min-height: 4.5rem;
    font-size: 1.05rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

:where(html.pg-private-pedidos-index) #pvGravacao .pv-texto.dica {
    font-size: .9rem;
    opacity: .7;
    font-style: italic;
}

@keyframes private_pedidos_index_pvPulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, .55); }
    70% { box-shadow: 0 0 0 26px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}
:where(html.pg-private-pedidos-index) #modalPedidoAudio .pv-mic {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    font-size: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

:where(html.pg-private-pedidos-index) #modalPedidoAudio .pv-passos {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
}

:where(html.pg-private-pedidos-index) #modalPedidoAudio .pv-passos li {
    font-size: .8rem;
    padding: .25rem .75rem;
    border-radius: 999px;
    border: 1px solid #ced4da;
    color: #6c757d;
}

:where(html.pg-private-pedidos-index) #modalPedidoAudio .pv-passos li.ativo {
    background: #0dcaf0;
    border-color: #0dcaf0;
    color: #fff;
    font-weight: 600;
}

:where(html.pg-private-pedidos-index) #modalPedidoAudio .pv-exemplo {
    font-size: .82rem;
}

:where(html.pg-private-pedidos-index) #modalPedidoAudio .pv-item .form-label {
    font-size: .75rem;
    margin-bottom: .15rem;
}

/* ─── private/pedidos/pdv ─── */
/* escopo: pg-private-pedidos-pdv */
:where(html.pg-private-pedidos-pdv) .pdv-layout {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
}

:where(html.pg-private-pedidos-pdv) .pdv-catalog-overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--gk-body-bg-rgb), .85);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    cursor: not-allowed;
}
@media (max-width: 768px) {
    :where(html.pg-private-pedidos-pdv) #pdvLeftPanel, :where(html.pg-private-pedidos-pdv) #pdvRightPanel {
        width: 100% !important;
    }
    /* Compact action buttons on mobile */
    :where(html.pg-private-pedidos-pdv) #pdvBotoesAcao .btn-label {
        display: none;
    }
    :where(html.pg-private-pedidos-pdv) #pdvBotoesAcao .btn {
        padding: 4px 7px;
    }
}

/* ── Atalhos de teclado ─────────────────────────────────────── */
/* As teclas não aparecem na tela: a lista fica no painel de atalhos
   (botão do teclado no topo). Aqui só o estilo desse painel. */
:where(html.pg-private-pedidos-pdv) #pdvPainelAtalhos kbd {
    background: var(--gk-tertiary-bg);
    border: 1px solid var(--gk-border-color);
    border-radius: 5px;
    padding: 2px 8px;
    font-size: .75rem;
    color: var(--gk-body-color);
}

:where(html.pg-private-pedidos-pdv) #pdvPainelAtalhos .pdv-atalho-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--gk-border-color);
}

:where(html.pg-private-pedidos-pdv) #pdvPainelAtalhos .pdv-atalho-grupo {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gk-secondary-color);
    letter-spacing: .08em;
    margin: 16px 0 6px;
}

/* ─── private/pedidos/recorrentes/index ─── */
/* escopo: pg-private-pedidos-recorrentes-index */
:where(html.pg-private-pedidos-recorrentes-index) .recorrente-badge-ativo   { background: #d1fae5; color: #065f46; }
:where(html.pg-private-pedidos-recorrentes-index) .recorrente-badge-inativo { background: #fee2e2; color: #991b1b; }
:where(html.pg-private-pedidos-recorrentes-index) .recorrente-card { transition: box-shadow .15s; }
:where(html.pg-private-pedidos-recorrentes-index) .recorrente-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }

/* ─── private/pedidos/status/cadastro ─── */
/* escopo: pg-private-pedidos-status-cadastro */
:where(html.pg-private-pedidos-status-cadastro) .popover-body {
    max-height: 250px;
    overflow-y: auto;
    width: 300px;
    scrollbar-width: none; /* Firefox */
}

:where(html.pg-private-pedidos-status-cadastro) .popover-body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* ─── private/pedidos/status/index ─── */
/* escopo: pg-private-pedidos-status-index */
/* Estilos para a página de status de pedidos */
:where(html.pg-private-pedidos-status-index) .status-info-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:where(html.pg-private-pedidos-status-index) .status-details-mobile {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-pedidos-status-index) .status-badge-mobile {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

:where(html.pg-private-pedidos-status-index) .bg-warning {
    background-color: #fff3cd;
    color: #856404;
}

:where(html.pg-private-pedidos-status-index) .bg-success {
    background-color: #d1e7dd;
    color: #0f5132;
}

:where(html.pg-private-pedidos-status-index) .bg-info {
    background-color: #cff4fc;
    color: #055160;
}

:where(html.pg-private-pedidos-status-index) .status-icon-mobile {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    flex-shrink: 0;
    font-size: 20px;
}

:where(html.pg-private-pedidos-status-index) .status-desc-mobile {
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}

/* Reutilizando estilos das outras páginas */
:where(html.pg-private-pedidos-status-index) .group-list {
    max-width: 420px;
    margin: auto;
}

:where(html.pg-private-pedidos-status-index) .group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #263347;
}

:where(html.pg-private-pedidos-status-index) .group-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

:where(html.pg-private-pedidos-status-index) .group-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

:where(html.pg-private-pedidos-status-index) .group-text p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-pedidos-status-index) .arrow {
    font-size: 20px;
    color: #bbb;
    font-weight: bold;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #334155;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html.pg-private-pedidos-status-index) .arrow:hover {
    background-color: #4747e6;
}

:where(html.pg-private-pedidos-status-index) .arrow a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

:where(html.pg-private-pedidos-status-index) .bg-row-mobile {
    background-color: #1e293b;
    border-radius: 10px;
}

:where(html.pg-private-pedidos-status-index) #paginacao-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

:where(html.pg-private-pedidos-status-index) #search-resultado-mobile {
    margin-bottom: 15px;
}

/* ─── private/pedidos/visualizar ─── */
/* escopo: pg-private-pedidos-visualizar */
:where(html.pg-private-pedidos-visualizar) #configuracoesAvancadas {
  transition: all 0.3s ease;
  overflow: hidden;
  display: block !important;
  /* Sobrescreve o d-none para a animação */
  max-height: 0;
  opacity: 0;
}

:where(html.pg-private-pedidos-visualizar) #configuracoesAvancadas.show {
  max-height: 1000px;
  /* Valor maior que o conteúdo */
  opacity: 1;
}

:where(html.pg-private-pedidos-visualizar) #configuracoesAvancadas .card {
  display: flex;
  flex-direction: column;
}

/* Ajusta o tamanho do dropdown */
:where(html.pg-private-pedidos-visualizar) .input-group-prepend .btn {
  min-width: 50px;
  text-align: center;
}

/* Alinha os itens do dropdown */
:where(html.pg-private-pedidos-visualizar) .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Tabela de itens do pedido */
:where(html.pg-private-pedidos-visualizar) .tabela-itens-pedido {
  table-layout: fixed;
  width: 100%;
}
:where(html.pg-private-pedidos-visualizar) .tabela-itens-pedido th:nth-child(1),
:where(html.pg-private-pedidos-visualizar) .tabela-itens-pedido td:nth-child(1) { width: 55%; }
:where(html.pg-private-pedidos-visualizar) .tabela-itens-pedido th:nth-child(2),
:where(html.pg-private-pedidos-visualizar) .tabela-itens-pedido td:nth-child(2) { width: 25%; }
:where(html.pg-private-pedidos-visualizar) .tabela-itens-pedido th:nth-child(3),
:where(html.pg-private-pedidos-visualizar) .tabela-itens-pedido td:nth-child(3) { width: 20%; white-space: nowrap; }

/* Miniatura de produto na tabela */
:where(html.pg-private-pedidos-visualizar) .tabela-itens-pedido .img-thumb-produto {
  width: 56px;
  height: 56px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 6px;
}
:where(html.pg-private-pedidos-visualizar) .tabela-itens-pedido .img-thumb-placeholder {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  border-radius: 6px;
}
:where(html.pg-private-pedidos-visualizar) .tabela-itens-pedido .produto-nome {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ─── private/pesquisa_satisfacao/configuracao ─── */
/* escopo: pg-private-pesquisa-satisfacao-configuracao */
:where(html.pg-private-pesquisa-satisfacao-configuracao) .stars-preview {
    font-size: 1.5rem;
    cursor: pointer;
}
:where(html.pg-private-pesquisa-satisfacao-configuracao) .stars-preview .star {
    opacity: 0.3;
    transition: opacity 0.2s;
}
:where(html.pg-private-pesquisa-satisfacao-configuracao) .stars-preview .star:hover,
:where(html.pg-private-pesquisa-satisfacao-configuracao) .stars-preview .star.active {
    opacity: 1;
}

/* ─── private/pesquisa_satisfacao/modelo_form ─── */
/* escopo: pg-private-pesquisa-satisfacao-modelo-form */
:where(html.pg-private-pesquisa-satisfacao-modelo-form) .form-control-color {
    width: 60px;
    height: 38px;
}

:where(html.pg-private-pesquisa-satisfacao-modelo-form) .preview-pesquisa {
    font-size: 14px;
    transition: all 0.3s ease;
}

:where(html.pg-private-pesquisa-satisfacao-modelo-form) .preview-pesquisa h6 {
    margin-bottom: 12px;
    color: #333;
    font-weight: 500;
}

/* Garantir que elementos do preview tenham aparência correta */
:where(html.pg-private-pesquisa-satisfacao-modelo-form) .preview-pesquisa textarea,
:where(html.pg-private-pesquisa-satisfacao-modelo-form) .preview-pesquisa .form-control {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 4px;
    padding: 8px;
    font-size: 13px;
}

:where(html.pg-private-pesquisa-satisfacao-modelo-form) .preview-pesquisa textarea::placeholder,
:where(html.pg-private-pesquisa-satisfacao-modelo-form) .preview-pesquisa .form-control::placeholder {
    color: #6c757d !important;
    opacity: 0.7;
}

:where(html.pg-private-pesquisa-satisfacao-modelo-form) .preview-pesquisa textarea:focus,
:where(html.pg-private-pesquisa-satisfacao-modelo-form) .preview-pesquisa .form-control:focus {
    outline: none;
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* Estilos para botões de avaliação */
:where(html.pg-private-pesquisa-satisfacao-modelo-form) .preview-pesquisa .preview-btn-numero:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

:where(html.pg-private-pesquisa-satisfacao-modelo-form) .preview-pesquisa #preview-avaliacao span {
    user-select: none;
}

:where(html.pg-private-pesquisa-satisfacao-modelo-form) .preview-pesquisa #preview-avaliacao span:hover {
    transform: scale(1.1);
}

/* Botão principal do preview */
:where(html.pg-private-pesquisa-satisfacao-modelo-form) .preview-pesquisa #preview-botao {
    font-size: 14px;
    font-weight: 500;
    padding: 10px;
    border: none;
    transition: all 0.2s;
}

:where(html.pg-private-pesquisa-satisfacao-modelo-form) .preview-pesquisa #preview-botao:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Ajuste do grid de avaliação */
:where(html.pg-private-pesquisa-satisfacao-modelo-form) #preview-avaliacao {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
}

/* ─── private/planos/index ─── */
/* escopo: pg-private-planos-index */
/* Estilos para a página de planos */
:where(html.pg-private-planos-index) .plano-info-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:where(html.pg-private-planos-index) .plano-details-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-planos-index) .plano-status-mobile {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

:where(html.pg-private-planos-index) .status-ativo {
    background-color: #d1e7dd;
    color: #0f5132;
}

:where(html.pg-private-planos-index) .status-desativado {
    background-color: #f8d7da;
    color: #842029;
}

:where(html.pg-private-planos-index) .plano-img-mobile {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #334156;
    flex-shrink: 0;
}

:where(html.pg-private-planos-index) .plano-img-mobile i {
    font-size: 24px;
    color: #ac95fe;
}

:where(html.pg-private-planos-index) .valores-plano-mobile {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

:where(html.pg-private-planos-index) .valor-item-mobile {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

:where(html.pg-private-planos-index) .valor-label-mobile {
    font-size: 11px;
    color: #6c757d;
}

:where(html.pg-private-planos-index) .valor-mobile {
    font-size: 13px;
    font-weight: 600;
}

/* ─── private/planos/trocar ─── */
/* escopo: pg-private-planos-trocar */
:where(html.pg-private-planos-trocar) .plano-card {
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}
:where(html.pg-private-planos-trocar) .plano-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
:where(html.pg-private-planos-trocar) .plano-card.selecionado {
  border: 3px solid #0d6efd;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
:where(html.pg-private-planos-trocar) .badge-current {
  position: absolute;
  top: 10px;
  right: 10px;
}
:where(html.pg-private-planos-trocar) .price-tag {
  font-size: 2.5rem;
  font-weight: bold;
  color: #0d6efd;
}

/* ─── private/relatorios/index ─── */
/* escopo: pg-private-relatorios-index */
@media print {
  :where(html.pg-private-relatorios-index) .d-print-none {
    display: none !important;
  }

  :where(html.pg-private-relatorios-index) .card {
    border: none !important;
    box-shadow: none !important;
  }

  :where(html.pg-private-relatorios-index) .table {
    font-size: 12px;
  }

  :where(html.pg-private-relatorios-index) .card-header {
    background-color: #f8f9fa !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* ─── private/rh/folha/ver ─── */
/* escopo: pg-private-rh-folha-ver */
@media print {

    :where(html.pg-private-rh-folha-ver) .border-bottom,
    :where(html.pg-private-rh-folha-ver) nav,
    :where(html.pg-private-rh-folha-ver) .btn,
    :where(html.pg-private-rh-folha-ver) .d-flex.justify-content-between {
        display: none !important;
    }

    :where(html.pg-private-rh-folha-ver) #holerite {
        box-shadow: none !important;
        border: 1px solid #dee2e6 !important;
    }

    :where(html.pg-private-rh-folha-ver) .container-fluid {
        padding: 0 !important;
    }
}

/* ─── private/seguranca/2fa_ativar ─── */
/* escopo: pg-private-seguranca-2fa-ativar */
:where(html.pg-private-seguranca-2fa-ativar) .code-digit {
  font-weight: bold;
  border: 2px solid #dee2e6;
  transition: all 0.3s;
}

:where(html.pg-private-seguranca-2fa-ativar) .code-digit:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ─── private/servicos/index ─── */
/* escopo: pg-private-servicos-index */
/* Estilos para a página de serviços */
:where(html.pg-private-servicos-index) .servico-info-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:where(html.pg-private-servicos-index) .servico-details-mobile {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-servicos-index) .servico-status-mobile {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

:where(html.pg-private-servicos-index) .status-ativo {
    background-color: #d1e7dd;
    color: #0f5132;
}

:where(html.pg-private-servicos-index) .status-inativo {
    background-color: #f8d7da;
    color: #842029;
}

:where(html.pg-private-servicos-index) .servico-categoria-mobile {
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}

:where(html.pg-private-servicos-index) .servico-img-mobile {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    flex-shrink: 0;
}

:where(html.pg-private-servicos-index) .servico-img-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:where(html.pg-private-servicos-index) .servico-img-mobile i {
    font-size: 24px;
    color: #6c757d;
}

:where(html.pg-private-servicos-index) .servico-preco-mobile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

:where(html.pg-private-servicos-index) .preco-label-mobile {
    font-size: 11px;
    color: #6c757d;
}

:where(html.pg-private-servicos-index) .preco-mobile {
    font-size: 13px;
    font-weight: 600;
}

/* Reutilizando estilos das outras páginas */
:where(html.pg-private-servicos-index) .group-list {
    max-width: 420px;
    margin: auto;
}

:where(html.pg-private-servicos-index) .group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #263347;
}

:where(html.pg-private-servicos-index) .group-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

:where(html.pg-private-servicos-index) .group-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

:where(html.pg-private-servicos-index) .group-text p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-servicos-index) .arrow {
    font-size: 20px;
    color: #bbb;
    font-weight: bold;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #334155;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html.pg-private-servicos-index) .arrow:hover {
    background-color: #4747e6;
}

:where(html.pg-private-servicos-index) .arrow a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

:where(html.pg-private-servicos-index) .bg-row-mobile {
    background-color: #1e293b;
    border-radius: 10px;
}

:where(html.pg-private-servicos-index) #paginacao-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

:where(html.pg-private-servicos-index) #search-resultado-mobile {
    margin-bottom: 15px;
}

/* ─── private/setup/concluido ─── */
/* escopo: pg-private-setup-concluido */
:where(html.pg-private-setup-concluido) .setup-container {
	max-width: 800px;
	margin: 2rem auto;
}

:where(html.pg-private-setup-concluido) .setup-card {
	border: none;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

:where(html.pg-private-setup-concluido) .setup-header {
	background-color: #0051d8;
	color: white;
	padding: 1.5rem;
	text-align: center;
}

:where(html.pg-private-setup-concluido) .setup-body {
	padding: 2.5rem;
}

:where(html.pg-private-setup-concluido) .setup-step {
	display: none;
}

:where(html.pg-private-setup-concluido) .setup-step.active {
	display: block;
}

:where(html.pg-private-setup-concluido) .progress {
	height: 8px;
	margin-bottom: 2rem;
}

:where(html.pg-private-setup-concluido) .form-control,
:where(html.pg-private-setup-concluido) .form-select {
	padding: 12px 15px;
	border-radius: 8px;
}

:where(html.pg-private-setup-concluido) .btn-primary {
	background-color: #0051d8;
	border-color: #0051d8;
	padding: 10px 20px;
	border-radius: 8px;
}

:where(html.pg-private-setup-concluido) .btn-outline-secondary {
	padding: 10px 20px;
	border-radius: 8px;
}

:where(html.pg-private-setup-concluido) .step-icon {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	color: #0051d8;
}

:where(html.pg-private-setup-concluido) .setup-title {
	font-weight: 600;
	margin-bottom: 1.5rem;
}

:where(html.pg-private-setup-concluido) .setup-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e9ecef;
}

:where(html.pg-private-setup-concluido) .skip-link {
	color: #6c757d;
	cursor: pointer;
	text-decoration: none;
}

:where(html.pg-private-setup-concluido) .skip-link:hover {
	text-decoration: underline;
}

:where(html.pg-private-setup-concluido) .invalid-feedback {
	color: #dc3545;
	font-size: 0.875em;
}

:where(html.pg-private-setup-concluido) .is-invalid {
	border-color: #dc3545;
}

:where(html.pg-private-setup-concluido) .is-invalid:focus {
	border-color: #dc3545;
	box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

:where(html.pg-private-setup-concluido) .password-strength {
	font-size: 0.8rem;
}

:where(html.pg-private-setup-concluido) .progress {
	background-color: #e9ecef;
}

/* Centraliza os inputs em telas menores */
@media (max-width: 767.98px) {
	:where(html.pg-private-setup-concluido) .col-md-6 {
		max-width: 100%;
	}
}

/* ─── private/setup/index ─── */
/* escopo: pg-private-setup-index */
:where(html.pg-private-setup-index) .setup-container {
    max-width: 800px;
    margin: 2rem auto;
}

:where(html.pg-private-setup-index) .setup-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

:where(html.pg-private-setup-index) .setup-header {
    background-color: #0051d8;
    color: white;
    padding: 1.5rem;
    text-align: center;
}

:where(html.pg-private-setup-index) .setup-body {
    padding: 2.5rem;
}

:where(html.pg-private-setup-index) .setup-step {
    display: none;
}

:where(html.pg-private-setup-index) .setup-step.active {
    display: block;
}

:where(html.pg-private-setup-index) .progress {
    height: 8px;
    margin-bottom: 2rem;
}

:where(html.pg-private-setup-index) .form-control,
:where(html.pg-private-setup-index) .form-select {
    padding: 12px 15px;
    border-radius: 8px;
}

:where(html.pg-private-setup-index) .btn-outline-secondary {
    padding: 10px 20px;
    border-radius: 8px;
}

:where(html.pg-private-setup-index) .step-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #0051d8;
}

:where(html.pg-private-setup-index) .setup-title {
    font-weight: 600;
    margin-bottom: 1.5rem;
}

:where(html.pg-private-setup-index) .setup-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

:where(html.pg-private-setup-index) .skip-link {
    color: #6c757d;
    cursor: pointer;
    text-decoration: none;
}

:where(html.pg-private-setup-index) .skip-link:hover {
    text-decoration: underline;
}

:where(html.pg-private-setup-index) .invalid-feedback {
    color: #dc3545;
    font-size: 0.875em;
}

:where(html.pg-private-setup-index) .is-invalid {
    border-color: #dc3545;
}

:where(html.pg-private-setup-index) .is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

:where(html.pg-private-setup-index) .password-strength {
    font-size: 0.8rem;
}

:where(html.pg-private-setup-index) .progress {
    background-color: #e9ecef;
}

:where(html.pg-private-setup-index) .mode-selection {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

:where(html.pg-private-setup-index) .mode-card {
    flex: 1;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

:where(html.pg-private-setup-index) .mode-card:hover {
    border-color: #0051d8;
    transform: translateY(-5px);
}

:where(html.pg-private-setup-index) .mode-card.selected {
    border-color: #0051d8;
    background-color: rgba(94, 114, 228, 0.05);
}

:where(html.pg-private-setup-index) .mode-icon {
    font-size: 3rem;
    color: #0051d8;
    margin-bottom: 1rem;
}

:where(html.pg-private-setup-index) .mode-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

:where(html.pg-private-setup-index) .mode-description {
    color: #6c757d;
    font-size: 0.9rem;
}

/* Centraliza os inputs em telas menores */
@media (max-width: 767.98px) {
    :where(html.pg-private-setup-index) .col-md-6 {
        max-width: 100%;
    }

    :where(html.pg-private-setup-index) .mode-selection {
        flex-direction: column;
    }
}

:where(html.pg-private-setup-index) .lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

:where(html.pg-private-setup-index) .lightbox img {
    max-width: 90%;
    max-height: 90%;
    border: 3px solid white;
    border-radius: 5px;
}

:where(html.pg-private-setup-index) .lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 30px;
    cursor: pointer;
    background: none;
    border: none;
}

/* ─── private/suporte/ticket e private/admin/suporte/ticket ─── */
/* escopo: pg-private-suporte-ticket, pg-private-admin-suporte-ticket */
:where(html.pg-private-suporte-ticket, html.pg-private-admin-suporte-ticket) .msg-content img { max-width: 100%; border-radius: 4px; margin: 4px 0; }
:where(html.pg-private-suporte-ticket, html.pg-private-admin-suporte-ticket) .msg-content p { margin-bottom: 0.25rem; }
:where(html.pg-private-suporte-ticket, html.pg-private-admin-suporte-ticket) .msg-content a { word-break: break-all; }

/* Bolhas da conversa. Antes as cores (#0d6efd1a, #f1f5f9...) estavam no
   style da view e não mudavam no modo escuro. "meu" = quem está vendo a
   tela; "outro" = o outro lado da conversa. */
:where(html.pg-private-suporte-ticket, html.pg-private-admin-suporte-ticket) .chat-msg {
    max-width: 75%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--gk-border-color);
    color: var(--gk-body-color);
}
:where(html.pg-private-suporte-ticket, html.pg-private-admin-suporte-ticket) .chat-msg-meu {
    background: color-mix(in srgb, var(--gk-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--gk-primary) 25%, transparent);
    border-bottom-right-radius: 0.25rem;
}
:where(html.pg-private-suporte-ticket, html.pg-private-admin-suporte-ticket) .chat-msg-outro {
    background: var(--gk-gray-100);
    border-bottom-left-radius: 0.25rem;
}
@media (max-width: 767.98px) {
    :where(html.pg-private-suporte-ticket, html.pg-private-admin-suporte-ticket) .chat-msg { max-width: 90%; }
}

/* ─── private/tarefas/index ─── */
/* escopo: pg-private-tarefas-index */
/* Estilos para a página de tarefas */
:where(html.pg-private-tarefas-index) .tarefa-info-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:where(html.pg-private-tarefas-index) .tarefa-details-mobile {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-tarefas-index) .tarefa-status-mobile {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

:where(html.pg-private-tarefas-index) .status-concluida {
    background-color: #d1e7dd;
    color: #0f5132;
}

:where(html.pg-private-tarefas-index) .status-pendente {
    background-color: #f8d7da;
    color: #842029;
}

:where(html.pg-private-tarefas-index) .prioridade-baixa {
    background-color: #6c757d;
    color: white;
}

:where(html.pg-private-tarefas-index) .prioridade-normal {
    background-color: #198754;
    color: white;
}

:where(html.pg-private-tarefas-index) .prioridade-urgente {
    background-color: #dc3545;
    color: white;
}

:where(html.pg-private-tarefas-index) .tarefa-img-mobile {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    flex-shrink: 0;
}

:where(html.pg-private-tarefas-index) .tarefa-img-mobile i {
    font-size: 24px;
    color: #6c757d;
}

:where(html.pg-private-tarefas-index) .prazo-tarefa-mobile {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

:where(html.pg-private-tarefas-index) .prazo-item-mobile {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

:where(html.pg-private-tarefas-index) .prazo-label-mobile {
    font-size: 11px;
    color: #6c757d;
}

:where(html.pg-private-tarefas-index) .prazo-mobile {
    font-size: 13px;
    font-weight: 600;
}

/* Reutilizando estilos das outras páginas */
:where(html.pg-private-tarefas-index) .group-list {
    max-width: 420px;
    margin: auto;
}

:where(html.pg-private-tarefas-index) .group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #263347;
}

:where(html.pg-private-tarefas-index) .group-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

:where(html.pg-private-tarefas-index) .group-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

:where(html.pg-private-tarefas-index) .group-text p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-tarefas-index) .arrow {
    font-size: 20px;
    color: #bbb;
    font-weight: bold;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #334155;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html.pg-private-tarefas-index) .arrow:hover {
    background-color: #4747e6;
}

:where(html.pg-private-tarefas-index) .arrow a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

:where(html.pg-private-tarefas-index) .bg-row-mobile {
    background-color: #1e293b;
    border-radius: 10px;
}

:where(html.pg-private-tarefas-index) #paginacao-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

:where(html.pg-private-tarefas-index) #search-resultado-mobile {
    margin-bottom: 15px;
}

:where(html.pg-private-tarefas-index) .toggle-btn {
    display: inline-flex;
    border-radius: 25px;
    background: #334156;
    padding: 4px;
    margin-bottom: 15px;
}

:where(html.pg-private-tarefas-index) .toggle-btn button {
    border: none;
    padding: 8px 18px;
    border-radius: 20px;
    background: transparent;
    color: #ffffff;
    font-weight: 600;
    transition: all 0.3s ease;
}

:where(html.pg-private-tarefas-index) .toggle-btn button.active {
    background: white;
    color: #000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ─── private/transportadoras/index ─── */
/* escopo: pg-private-transportadoras-index */
/* Estilos para a página de transportadoras */
:where(html.pg-private-transportadoras-index) .transportadora-img-mobile {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    flex-shrink: 0;
}

:where(html.pg-private-transportadoras-index) .transportadora-img-mobile i {
    font-size: 24px;
    color: #6c757d;
}

:where(html.pg-private-transportadoras-index) .group-list {
    max-width: 420px;
    margin: auto;
}

:where(html.pg-private-transportadoras-index) .group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #263347;
}

:where(html.pg-private-transportadoras-index) .group-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

:where(html.pg-private-transportadoras-index) .group-text h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111;
}

:where(html.pg-private-transportadoras-index) .group-text p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #5f6f84;
}

:where(html.pg-private-transportadoras-index) .arrow {
    font-size: 20px;
    color: #bbb;
    font-weight: bold;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #334155;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html.pg-private-transportadoras-index) .arrow:hover {
    background-color: #4747e6;
}

:where(html.pg-private-transportadoras-index) .arrow a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

:where(html.pg-private-transportadoras-index) .bg-row-mobile {
    background-color: #1e293b;
    border-radius: 10px;
}

:where(html.pg-private-transportadoras-index) #search-resultado-mobile {
    margin-bottom: 15px;
}

/* ─── public/afiliados/cadastro ─── */
/* escopo: pg-public-afiliados-cadastro */
:where(html.pg-public-afiliados-cadastro) * { margin: 0; padding: 0; box-sizing: border-box; }
:where(html.pg-public-afiliados-cadastro) body { font-family: 'Poppins', sans-serif; }

/* ── Layout split ── */
:where(html.pg-public-afiliados-cadastro) .login-container {
    display: flex;
    min-height: 100vh;
    background: #ffffff;
}

:where(html.pg-public-afiliados-cadastro) .login-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 40px;
    background: #f1f5f9;
}

:where(html.pg-public-afiliados-cadastro) .login-content-wrapper {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

:where(html.pg-public-afiliados-cadastro) .login-form-wrapper {
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    animation: public_afiliados_cadastro_fadeInUp .6s ease-out;
}

@keyframes public_afiliados_cadastro_fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

:where(html.pg-public-afiliados-cadastro) .login-card-header {
    background: #003ca6;
    padding: 24px 30px;
    text-align: center;
}
:where(html.pg-public-afiliados-cadastro) .login-card-header h1 { font-size: 22px; font-weight: 600; color: #fff; margin: 0; }
:where(html.pg-public-afiliados-cadastro) .login-card-header p  { color: rgba(255,255,255,.9); font-size: 13px; margin: 6px 0 0; }

:where(html.pg-public-afiliados-cadastro) .login-card-body { padding: 30px; }

:where(html.pg-public-afiliados-cadastro) .logo-finitya { margin-bottom: 30px; text-align: center; width: 100%; }
:where(html.pg-public-afiliados-cadastro) .logo-finitya img { height: 40px; width: auto; }

:where(html.pg-public-afiliados-cadastro) .form-group  { margin-bottom: 16px; }
:where(html.pg-public-afiliados-cadastro) .form-label  { display: block; font-size: 13px; color: #333; margin-bottom: 6px; font-weight: 600; }

:where(html.pg-public-afiliados-cadastro) .email-wrapper { position: relative; }
:where(html.pg-public-afiliados-cadastro) .email-wrapper .form-input { padding-left: 40px; }
:where(html.pg-public-afiliados-cadastro) .email-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #999; font-size: 18px; pointer-events: none;
}

:where(html.pg-public-afiliados-cadastro) .form-input {
    width: 100%; padding: 10px 16px; font-size: 14px;
    border: 1px solid #e0e0e0; border-radius: 6px;
    background: #fff; transition: all .3s;
}
:where(html.pg-public-afiliados-cadastro) .form-input::placeholder { color: #999; }
:where(html.pg-public-afiliados-cadastro) .form-input:focus { outline: none; border-color: #1e4a9f; box-shadow: 0 0 0 3px rgba(30,74,159,.1); }

:where(html.pg-public-afiliados-cadastro) .password-wrapper { position: relative; }
:where(html.pg-public-afiliados-cadastro) .password-wrapper .form-input { padding-right: 45px; }
:where(html.pg-public-afiliados-cadastro) .password-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: #999;
    font-size: 18px; padding: 0; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
}

:where(html.pg-public-afiliados-cadastro) .btn-submit {
    width: 100%; padding: 11px 24px; font-size: 15px; font-weight: 600;
    color: #fff; background: #1e4a9f; border: none; border-radius: 6px;
    cursor: pointer; transition: all .3s;
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
}
:where(html.pg-public-afiliados-cadastro) .btn-submit:hover    { background: #163a7f; }
:where(html.pg-public-afiliados-cadastro) .btn-submit:disabled { opacity: .65; cursor: not-allowed; }

:where(html.pg-public-afiliados-cadastro) .register-link { text-align: center; font-size: 13px; color: #999; margin-top: 24px; width: 100%; }
:where(html.pg-public-afiliados-cadastro) .register-link a { color: #1e4a9f; text-decoration: none; font-weight: 600; }
:where(html.pg-public-afiliados-cadastro) .register-link a:hover { text-decoration: underline; }

/* ── Lado direito ── */
:where(html.pg-public-afiliados-cadastro) .login-right {
    flex: 0 0 30%;
    background: #003ca6;
    display: flex; align-items: flex-end; justify-content: flex-end;
    padding: 0; position: relative; overflow: hidden;
}
:where(html.pg-public-afiliados-cadastro) .login-right::before {
    content: ''; position: absolute;
    width: 300px; height: 300px;
    background: rgba(255,255,255,.1);
    border-radius: 50%; top: -100px; right: -100px;
}
:where(html.pg-public-afiliados-cadastro) .login-right::after {
    content: ''; position: absolute;
    width: 200px; height: 200px;
    background: rgba(255,255,255,.08);
    border-radius: 50%; bottom: 100px; left: -50px;
}
:where(html.pg-public-afiliados-cadastro) .right-content {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    align-items: flex-end; justify-content: flex-end;
    width: 100%; height: 100%; padding: 40px 0 0 40px;
}
:where(html.pg-public-afiliados-cadastro) .right-content h2 {
    font-size: 32px; font-weight: 700; color: #fff;
    line-height: 1.3; margin-bottom: auto;
    padding-right: 40px; max-width: 400px; text-align: left;
}
:where(html.pg-public-afiliados-cadastro) .business-image {
    width: 100%; max-width: 100%; height: auto; margin: 0;
    display: flex; align-items: flex-end; justify-content: flex-end;
}
:where(html.pg-public-afiliados-cadastro) .business-image img { max-width: 90%; height: auto; display: block; }

@media (max-width: 992px) {
    :where(html.pg-public-afiliados-cadastro) .login-right { display: none; }
    :where(html.pg-public-afiliados-cadastro) .login-left  { flex: 1; }
}
@media (max-width: 576px) {
    :where(html.pg-public-afiliados-cadastro) .login-left            { padding: 20px; }
    :where(html.pg-public-afiliados-cadastro) .login-content-wrapper { max-width: 100%; }
    :where(html.pg-public-afiliados-cadastro) .login-card-header h1  { font-size: 20px; }
    :where(html.pg-public-afiliados-cadastro) .login-card-header     { padding: 24px; }
    :where(html.pg-public-afiliados-cadastro) .login-card-body       { padding: 24px 20px; }
    :where(html.pg-public-afiliados-cadastro) .logo-finitya          { margin-bottom: 24px; }
    :where(html.pg-public-afiliados-cadastro) .logo-finitya img      { height: 35px; }
    :where(html.pg-public-afiliados-cadastro) .register-link         { margin-top: 20px; font-size: 12px; }
}

:where(html.pg-public-afiliados-cadastro) .alert-box { display: none; padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; }
:where(html.pg-public-afiliados-cadastro) .alert-danger  { background: #fde8e8; color: #c0392b; border: 1px solid #f5c6cb; }
:where(html.pg-public-afiliados-cadastro) .alert-success { background: #e8f5e9; color: #27ae60; border: 1px solid #c3e6cb; }

/* ─── public/afiliados/comissoes ─── */
/* escopo: pg-public-afiliados-comissoes */
:where(html.pg-public-afiliados-comissoes) * { margin: 0; padding: 0; box-sizing: border-box; }
:where(html.pg-public-afiliados-comissoes) body { font-family: 'Poppins', sans-serif; background: #f4f7fc; }

:where(html.pg-public-afiliados-comissoes) .aff-topbar {
    background: #003ca6; padding: 14px 24px;
    display: flex; align-items: center; justify-content: space-between;
}
:where(html.pg-public-afiliados-comissoes) .aff-topbar img { height: 32px; }
:where(html.pg-public-afiliados-comissoes) .aff-topbar-right { display: flex; align-items: center; gap: 12px; }
:where(html.pg-public-afiliados-comissoes) .aff-topbar-link {
    color: rgba(255,255,255,.75); font-size: 13px; text-decoration: none;
    padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,.3); transition: .2s;
}
:where(html.pg-public-afiliados-comissoes) .aff-topbar-link:hover, :where(html.pg-public-afiliados-comissoes) .aff-topbar-link.active { background: rgba(255,255,255,.2); color: #fff; }

:where(html.pg-public-afiliados-comissoes) .aff-main { max-width: 1000px; margin: 0 auto; padding: 28px 16px 60px; }
:where(html.pg-public-afiliados-comissoes) .aff-page-header { margin-bottom: 24px; }
:where(html.pg-public-afiliados-comissoes) .aff-page-header h2 { font-size: 22px; font-weight: 700; color: #222; margin: 0; }
:where(html.pg-public-afiliados-comissoes) .aff-page-header p { font-size: 13px; color: #888; margin: 4px 0 0; }

:where(html.pg-public-afiliados-comissoes) .aff-stats-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px; margin-bottom: 24px;
}
:where(html.pg-public-afiliados-comissoes) .aff-stat {
    background: #fff; border-radius: 12px; padding: 18px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
:where(html.pg-public-afiliados-comissoes) .aff-stat .label { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
:where(html.pg-public-afiliados-comissoes) .aff-stat .value { font-size: 22px; font-weight: 700; }
:where(html.pg-public-afiliados-comissoes) .value-total { color: #1e4a9f; }
:where(html.pg-public-afiliados-comissoes) .value-pago  { color: #27ae60; }
:where(html.pg-public-afiliados-comissoes) .value-rec   { color: #e67e22; }

:where(html.pg-public-afiliados-comissoes) .aff-card {
    background: #fff; border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06); overflow: hidden;
}
:where(html.pg-public-afiliados-comissoes) .aff-card table { width: 100%; border-collapse: collapse; }
:where(html.pg-public-afiliados-comissoes) .aff-card thead th {
    padding: 12px 16px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; color: #888; background: #fafafa; text-align: left; letter-spacing: .04em;
}
:where(html.pg-public-afiliados-comissoes) .aff-card tbody td { padding: 13px 16px; font-size: 13px; border-top: 1px solid #f5f5f5; }
:where(html.pg-public-afiliados-comissoes) .aff-card tbody tr:hover { background: #fafcff; }
:where(html.pg-public-afiliados-comissoes) .aff-badge { display: inline-block; padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; }
:where(html.pg-public-afiliados-comissoes) .badge-pago    { background: #d1e7dd; color: #0f5132; }
:where(html.pg-public-afiliados-comissoes) .badge-pendente { background: #fff3cd; color: #664d03; }
:where(html.pg-public-afiliados-comissoes) .aff-empty { padding: 40px; text-align: center; color: #aaa; font-size: 13px; }

/* ─── public/afiliados/indicacoes ─── */
/* escopo: pg-public-afiliados-indicacoes */
:where(html.pg-public-afiliados-indicacoes) * { margin: 0; padding: 0; box-sizing: border-box; }
:where(html.pg-public-afiliados-indicacoes) body { font-family: 'Poppins', sans-serif; background: #f4f7fc; }

:where(html.pg-public-afiliados-indicacoes) .aff-topbar {
    background: #003ca6; padding: 14px 24px;
    display: flex; align-items: center; justify-content: space-between;
}
:where(html.pg-public-afiliados-indicacoes) .aff-topbar img { height: 32px; }
:where(html.pg-public-afiliados-indicacoes) .aff-topbar-right { display: flex; align-items: center; gap: 12px; }
:where(html.pg-public-afiliados-indicacoes) .aff-topbar-link {
    color: rgba(255,255,255,.75); font-size: 13px; text-decoration: none;
    padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,.3); transition: .2s;
}
:where(html.pg-public-afiliados-indicacoes) .aff-topbar-link:hover, :where(html.pg-public-afiliados-indicacoes) .aff-topbar-link.active { background: rgba(255,255,255,.2); color: #fff; }

:where(html.pg-public-afiliados-indicacoes) .aff-main { max-width: 1000px; margin: 0 auto; padding: 28px 16px 60px; }
:where(html.pg-public-afiliados-indicacoes) .aff-page-header { margin-bottom: 24px; }
:where(html.pg-public-afiliados-indicacoes) .aff-page-header h2 { font-size: 22px; font-weight: 700; color: #222; margin: 0; }
:where(html.pg-public-afiliados-indicacoes) .aff-page-header p { font-size: 13px; color: #888; margin: 4px 0 0; }

:where(html.pg-public-afiliados-indicacoes) .aff-card {
    background: #fff; border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06); overflow: hidden;
}
:where(html.pg-public-afiliados-indicacoes) .aff-card table { width: 100%; border-collapse: collapse; }
:where(html.pg-public-afiliados-indicacoes) .aff-card thead th {
    padding: 12px 16px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; color: #888; background: #fafafa;
    text-align: left; letter-spacing: .04em;
}
:where(html.pg-public-afiliados-indicacoes) .aff-card tbody td { padding: 13px 16px; font-size: 13px; border-top: 1px solid #f5f5f5; }
:where(html.pg-public-afiliados-indicacoes) .aff-card tbody tr:hover { background: #fafcff; }
:where(html.pg-public-afiliados-indicacoes) .aff-empty { padding: 40px; text-align: center; color: #aaa; font-size: 13px; }
:where(html.pg-public-afiliados-indicacoes) .aff-badge { display:inline-block; padding:3px 8px; border-radius:20px; font-size:11px; font-weight:600; }
:where(html.pg-public-afiliados-indicacoes) .badge-ativo   { background:#d1e7dd; color:#0f5132; }
:where(html.pg-public-afiliados-indicacoes) .badge-inativo { background:#f8d7da; color:#842029; }

/* ─── public/afiliados/login ─── */
/* escopo: pg-public-afiliados-login */
:where(html.pg-public-afiliados-login) * { margin: 0; padding: 0; box-sizing: border-box; }
:where(html.pg-public-afiliados-login) body { font-family: 'Poppins', sans-serif; }

/* ── Layout split ── */
:where(html.pg-public-afiliados-login) .login-container {
    display: flex;
    min-height: 100vh;
    background: #ffffff;
}

:where(html.pg-public-afiliados-login) .login-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 40px;
    background: #f1f5f9;
}

:where(html.pg-public-afiliados-login) .login-content-wrapper {
    width: 100%;
    max-width: 370px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

:where(html.pg-public-afiliados-login) .login-form-wrapper {
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    animation: public_afiliados_login_fadeInUp .6s ease-out;
}

@keyframes public_afiliados_login_fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

:where(html.pg-public-afiliados-login) .login-card-header {
    background: #003ca6;
    padding: 24px 30px;
    text-align: center;
}
:where(html.pg-public-afiliados-login) .login-card-header h1 { font-size: 22px; font-weight: 600; color: #fff; margin: 0; }
:where(html.pg-public-afiliados-login) .login-card-header p  { color: rgba(255,255,255,.9); font-size: 13px; margin: 6px 0 0; }

:where(html.pg-public-afiliados-login) .login-card-body { padding: 30px; }

:where(html.pg-public-afiliados-login) .logo-finitya { margin-bottom: 30px; text-align: center; width: 100%; }
:where(html.pg-public-afiliados-login) .logo-finitya img { height: 40px; width: auto; }

:where(html.pg-public-afiliados-login) .form-group  { margin-bottom: 16px; }
:where(html.pg-public-afiliados-login) .form-label  { display: block; font-size: 13px; color: #333; margin-bottom: 6px; font-weight: 600; }

:where(html.pg-public-afiliados-login) .email-wrapper { position: relative; }
:where(html.pg-public-afiliados-login) .email-wrapper .form-input { padding-left: 40px; }
:where(html.pg-public-afiliados-login) .email-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #999; font-size: 18px; pointer-events: none;
}

:where(html.pg-public-afiliados-login) .form-input {
    width: 100%; padding: 10px 16px; font-size: 14px;
    border: 1px solid #e0e0e0; border-radius: 6px;
    background: #fff; transition: all .3s;
}
:where(html.pg-public-afiliados-login) .form-input::placeholder { color: #999; }
:where(html.pg-public-afiliados-login) .form-input:focus { outline: none; border-color: #1e4a9f; box-shadow: 0 0 0 3px rgba(30,74,159,.1); }

:where(html.pg-public-afiliados-login) .password-wrapper { position: relative; }
:where(html.pg-public-afiliados-login) .password-wrapper .form-input { padding-right: 45px; }
:where(html.pg-public-afiliados-login) .password-toggle {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: #999;
    font-size: 18px; padding: 0; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
}

:where(html.pg-public-afiliados-login) .btn-submit {
    width: 100%; padding: 11px 24px; font-size: 15px; font-weight: 600;
    color: #fff; background: #1e4a9f; border: none; border-radius: 6px;
    cursor: pointer; transition: all .3s;
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
}
:where(html.pg-public-afiliados-login) .btn-submit:hover     { background: #163a7f; }
:where(html.pg-public-afiliados-login) .btn-submit:disabled  { opacity: .65; cursor: not-allowed; }

:where(html.pg-public-afiliados-login) .register-link { text-align: center; font-size: 13px; color: #999; margin-top: 24px; width: 100%; }
:where(html.pg-public-afiliados-login) .register-link a { color: #1e4a9f; text-decoration: none; font-weight: 600; }
:where(html.pg-public-afiliados-login) .register-link a:hover { text-decoration: underline; }

/* ── Lado direito ── */
:where(html.pg-public-afiliados-login) .login-right {
    flex: 0 0 30%;
    background: #003ca6;
    display: flex; align-items: flex-end; justify-content: flex-end;
    padding: 0; position: relative; overflow: hidden;
}
:where(html.pg-public-afiliados-login) .login-right::before {
    content: ''; position: absolute;
    width: 300px; height: 300px;
    background: rgba(255,255,255,.1);
    border-radius: 50%; top: -100px; right: -100px;
}
:where(html.pg-public-afiliados-login) .login-right::after {
    content: ''; position: absolute;
    width: 200px; height: 200px;
    background: rgba(255,255,255,.08);
    border-radius: 50%; bottom: 100px; left: -50px;
}
:where(html.pg-public-afiliados-login) .right-content {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    align-items: flex-end; justify-content: flex-end;
    width: 100%; height: 100%; padding: 40px 0 0 40px;
}
:where(html.pg-public-afiliados-login) .right-content h2 {
    font-size: 32px; font-weight: 700; color: #fff;
    line-height: 1.3; margin-bottom: auto;
    padding-right: 40px; max-width: 400px; text-align: left;
}
:where(html.pg-public-afiliados-login) .business-image {
    width: 100%; max-width: 100%; height: auto; margin: 0;
    display: flex; align-items: flex-end; justify-content: flex-end;
}
:where(html.pg-public-afiliados-login) .business-image img { max-width: 90%; height: auto; display: block; }

@media (max-width: 992px) {
    :where(html.pg-public-afiliados-login) .login-right { display: none; }
    :where(html.pg-public-afiliados-login) .login-left  { flex: 1; }
}
@media (max-width: 576px) {
    :where(html.pg-public-afiliados-login) .login-left            { padding: 20px; }
    :where(html.pg-public-afiliados-login) .login-content-wrapper { max-width: 100%; }
    :where(html.pg-public-afiliados-login) .login-card-header h1  { font-size: 20px; }
    :where(html.pg-public-afiliados-login) .login-card-header     { padding: 24px; }
    :where(html.pg-public-afiliados-login) .login-card-body       { padding: 24px 20px; }
    :where(html.pg-public-afiliados-login) .logo-finitya          { margin-bottom: 24px; }
    :where(html.pg-public-afiliados-login) .logo-finitya img      { height: 35px; }
    :where(html.pg-public-afiliados-login) .register-link         { margin-top: 20px; font-size: 12px; }
}

:where(html.pg-public-afiliados-login) .alert-box { display: none; padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; }
:where(html.pg-public-afiliados-login) .alert-danger  { background: #fde8e8; color: #c0392b; border: 1px solid #f5c6cb; }
:where(html.pg-public-afiliados-login) .alert-success { background: #e8f5e9; color: #27ae60; border: 1px solid #c3e6cb; }

/* ─── public/afiliados/painel ─── */
/* escopo: pg-public-afiliados-painel */
:where(html.pg-public-afiliados-painel) * { margin: 0; padding: 0; box-sizing: border-box; }
:where(html.pg-public-afiliados-painel) body { font-family: 'Poppins', sans-serif; background: #f4f7fc; color: #333; }

:where(html.pg-public-afiliados-painel) .aff-topbar {
    background: #003ca6;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
:where(html.pg-public-afiliados-painel) .aff-topbar img { height: 32px; }
:where(html.pg-public-afiliados-painel) .aff-topbar-right { display: flex; align-items: center; gap: 12px; }
:where(html.pg-public-afiliados-painel) .aff-topbar-right span { color: rgba(255,255,255,.85); font-size: 14px; }
:where(html.pg-public-afiliados-painel) .aff-topbar-link {
    color: rgba(255,255,255,.75); font-size: 13px; text-decoration: none;
    padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,.3);
    transition: .2s;
}
:where(html.pg-public-afiliados-painel) .aff-topbar-link:hover { background: rgba(255,255,255,.1); color: #fff; }
:where(html.pg-public-afiliados-painel) .aff-topbar-link.active { background: rgba(255,255,255,.2); color: #fff; }

:where(html.pg-public-afiliados-painel) .aff-main { max-width: 1100px; margin: 0 auto; padding: 28px 16px 60px; }

:where(html.pg-public-afiliados-painel) .aff-welcome {
    background: linear-gradient(135deg, #1e4a9f, #003ca6);
    border-radius: 14px;
    padding: 24px 28px;
    color: #fff;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
:where(html.pg-public-afiliados-painel) .aff-welcome h3 { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
:where(html.pg-public-afiliados-painel) .aff-welcome p { font-size: 13px; color: rgba(255,255,255,.8); margin: 0; }
:where(html.pg-public-afiliados-painel) .aff-badge-nivel {
    background: rgba(255,255,255,.2);
    border-radius: 100px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
}
:where(html.pg-public-afiliados-painel) .aff-badge-nivel i { font-size: 14px; }

:where(html.pg-public-afiliados-painel) .aff-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
:where(html.pg-public-afiliados-painel) .aff-stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
:where(html.pg-public-afiliados-painel) .aff-stat-card .stat-label { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
:where(html.pg-public-afiliados-painel) .aff-stat-card .stat-value { font-size: 24px; font-weight: 700; color: #1e4a9f; }
:where(html.pg-public-afiliados-painel) .aff-stat-card .stat-sub { font-size: 12px; color: #aaa; margin-top: 4px; }

:where(html.pg-public-afiliados-painel) .aff-link-box {
    background: #fff;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
:where(html.pg-public-afiliados-painel) .aff-link-box label { font-size: 13px; font-weight: 600; color: #444; white-space: nowrap; }
:where(html.pg-public-afiliados-painel) .aff-link-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 13px;
    color: #555;
    background: #f9f9f9;
    min-width: 200px;
}
:where(html.pg-public-afiliados-painel) .btn-copy {
    padding: 10px 18px; font-size: 13px; font-weight: 600;
    background: #1e4a9f; color: #fff; border: none; border-radius: 6px;
    cursor: pointer; transition: .2s; white-space: nowrap;
}
:where(html.pg-public-afiliados-painel) .btn-copy:hover { background: #163a7f; }
:where(html.pg-public-afiliados-painel) .btn-copy.copied { background: #27ae60; }

:where(html.pg-public-afiliados-painel) .aff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
@media (max-width: 768px) { :where(html.pg-public-afiliados-painel) .aff-row { grid-template-columns: 1fr; } }

:where(html.pg-public-afiliados-painel) .aff-table-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    overflow: hidden;
}
:where(html.pg-public-afiliados-painel) .aff-table-card-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
}
:where(html.pg-public-afiliados-painel) .aff-table-card-header h6 { font-size: 14px; font-weight: 700; color: #333; margin: 0; }
:where(html.pg-public-afiliados-painel) .aff-table-card-header a { font-size: 12px; color: #1e4a9f; text-decoration: none; }
:where(html.pg-public-afiliados-painel) .aff-table-card table { width: 100%; border-collapse: collapse; }
:where(html.pg-public-afiliados-painel) .aff-table-card th {
    padding: 10px 16px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; color: #888; background: #fafafa;
    text-align: left; letter-spacing: .04em;
}
:where(html.pg-public-afiliados-painel) .aff-table-card td { padding: 12px 16px; font-size: 13px; border-top: 1px solid #f5f5f5; }
:where(html.pg-public-afiliados-painel) .aff-table-card tbody tr:hover { background: #fafcff; }
:where(html.pg-public-afiliados-painel) .badge-ativo   { background:#d1e7dd; color:#0f5132; }
:where(html.pg-public-afiliados-painel) .badge-pago    { background:#d1e7dd; color:#0f5132; }
:where(html.pg-public-afiliados-painel) .badge-pendente { background:#fff3cd; color:#664d03; }
:where(html.pg-public-afiliados-painel) .badge-suspenso { background:#f8d7da; color:#842029; }
:where(html.pg-public-afiliados-painel) .aff-badge { display:inline-block; padding:3px 8px; border-radius:20px; font-size:11px; font-weight:600; }

:where(html.pg-public-afiliados-painel) .aff-empty { padding: 24px; text-align: center; color: #aaa; font-size: 13px; }

/* ─── public/site/index ─── */
/* escopo: pg-public-site-index */
/* Carrossel de Features - Apenas Mobile */
:where(html.pg-public-site-index) .features-carousel-wrapper {
    position: relative;
}

:where(html.pg-public-site-index) .carousel-indicators-features {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
}

:where(html.pg-public-site-index) .carousel-indicators-features .indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 80, 211, 0.3);
    border: 2px solid #0050D3;
    cursor: pointer;
    transition: all 0.3s ease;
}

:where(html.pg-public-site-index) .carousel-indicators-features .indicator.active {
    background: #0050D3;
    width: 28px;
    border-radius: 6px;
}

:where(html.pg-public-site-index) .carousel-indicators-pricing {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}

:where(html.pg-public-site-index) .carousel-indicators-pricing .indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.3s ease;
}

:where(html.pg-public-site-index) .carousel-indicators-pricing .indicator.active {
    background: #ffffff;
    width: 28px;
    border-radius: 6px;
}

@media (max-width: 991px) {
    :where(html.pg-public-site-index) .features-carousel-wrapper {
        overflow: hidden;
        position: relative;
    }

    :where(html.pg-public-site-index) .features-carousel {
        display: flex;
        flex-wrap: nowrap;
        transition: transform 0.4s ease;
        margin: 0 !important;
    }

    :where(html.pg-public-site-index) .feature-item {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 20px;
    }

    :where(html.pg-public-site-index) .carousel-indicators-features {
        display: flex;
    }

    :where(html.pg-public-site-index) .pricing-carousel-wrapper {
        overflow: hidden;
        position: relative;
    }

    :where(html.pg-public-site-index) .pricing-carousel {
        display: flex;
        flex-wrap: nowrap;
        transition: transform 0.4s ease;
        margin: 0 !important;
    }

    :where(html.pg-public-site-index) .pricing-item {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 20px;
    }

    :where(html.pg-public-site-index) .carousel-indicators-pricing {
        display: flex;
    }
}

/* ─── public/conlibras/* (início, portal do intérprete, solicitação de evento, área da empresa) ─── */
/* escopo: toda tela pg-public-conlibras-*. Têm modo claro/escuro (ver
   public/template.php): só variáveis do tema aqui, nada de cor fixa de
   superfície. A primária no escuro usa a versão suavizada do sistema. */
:where(html[class*="pg-public-conlibras-"]) {
    --portal-primaria: var(--gk-primary);
    --portal-primaria-texto: var(--gk-primary);
}
:where(html.tui-escuro[class*="pg-public-conlibras-"]) {
    --portal-primaria: var(--tui-escuro-primaria-suave);
    --portal-primaria-texto: var(--tui-escuro-primaria-texto);
}
:where(html[class*="pg-public-conlibras-"]) body {
    background-color: var(--gk-gray-100);
}

/* Topo */
:where(html[class*="pg-public-conlibras-"]) .portal-topo {
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: var(--gk-card-background);
    border-bottom: 1px solid var(--gk-border-color);
}
:where(html[class*="pg-public-conlibras-"]) .portal-marca-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background-color: var(--portal-primaria);
    color: #fff;
    font-size: 1.1rem;
}
:where(html[class*="pg-public-conlibras-"]) .portal-marca-icone-lg {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    font-size: 1.75rem;
}
:where(html[class*="pg-public-conlibras-"]) .portal-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    background-color: color-mix(in srgb, var(--portal-primaria) 15%, transparent);
    color: var(--portal-primaria-texto);
}
:where(html[class*="pg-public-conlibras-"]) .portal-nome { max-width: 220px; }

/* Faixa de boas-vindas (texto branco sobre a primária, nos dois modos) */
:where(html[class*="pg-public-conlibras-"]) .portal-hero {
    background: linear-gradient(135deg, var(--portal-primaria) 0%, color-mix(in srgb, var(--portal-primaria) 70%, #000) 100%);
}
:where(html[class*="pg-public-conlibras-"]) .portal-hero-texto { color: rgba(255, 255, 255, .85); }

/* Abas: no celular deslizam para o lado em vez de quebrar linha */
:where(html[class*="pg-public-conlibras-"]) .portal-abas {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    border-bottom: 1px solid var(--gk-border-color);
}

/* Cartão de agendamento */
:where(html[class*="pg-public-conlibras-"]) .portal-evento {
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}
:where(html[class*="pg-public-conlibras-"]) .portal-evento:hover,
:where(html[class*="pg-public-conlibras-"]) .portal-evento:focus-visible {
    border-color: var(--portal-primaria);
    transform: translateY(-1px);
}
:where(html[class*="pg-public-conlibras-"]) .portal-evento-data {
    width: 3.5rem;
    padding: 0.5rem 0;
    border-radius: 0.75rem;
    background-color: color-mix(in srgb, var(--portal-primaria) 12%, transparent);
    color: var(--portal-primaria-texto);
}
:where(html[class*="pg-public-conlibras-"]) .portal-evento-meta {
    column-gap: 1rem;
    row-gap: 0.25rem;
}
/* Deixa o text-truncate funcionar dentro do flex */
:where(html[class*="pg-public-conlibras-"]) .portal-min-w-0 { min-width: 0; }
:where(html[class*="pg-public-conlibras-"]) .portal-evento .flex-grow-1 { min-width: 0; }

/* Cartões de opção da página inicial do ConLibras */
:where(html[class*="pg-public-conlibras-"]) .portal-opcao {
    transition: border-color .15s ease, transform .15s ease;
}
:where(html[class*="pg-public-conlibras-"]) .portal-opcao:hover {
    border-color: var(--portal-primaria);
    transform: translateY(-2px);
}
:where(html[class*="pg-public-conlibras-"]) .portal-opcao-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.875rem;
    font-size: 1.4rem;
    background-color: color-mix(in srgb, var(--portal-primaria) 12%, transparent);
    color: var(--portal-primaria-texto);
}

/* Indicador de etapas (solicitação de evento) */
:where(html[class*="pg-public-conlibras-"]) .portal-passos { counter-reset: passo; }
:where(html[class*="pg-public-conlibras-"]) .portal-passo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--gk-body-color);
    font-size: 0.875rem;
    white-space: nowrap;
}
:where(html[class*="pg-public-conlibras-"]) .portal-passo-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid var(--gk-border-color);
    background-color: var(--gk-card-background);
    font-weight: 600;
}
:where(html[class*="pg-public-conlibras-"]) .portal-passo.ativo { color: var(--portal-primaria-texto); font-weight: 600; }
:where(html[class*="pg-public-conlibras-"]) .portal-passo.ativo .portal-passo-num,
:where(html[class*="pg-public-conlibras-"]) .portal-passo.feito .portal-passo-num {
    background-color: var(--portal-primaria);
    border-color: var(--portal-primaria);
    color: #fff;
}
:where(html[class*="pg-public-conlibras-"]) .portal-passo-linha {
    flex: 1 1 auto;
    min-width: 1rem;
    border-top: 1px solid var(--gk-border-color);
}
@media (max-width: 575.98px) {
    /* No celular só o número das etapas que não são a atual */
    :where(html[class*="pg-public-conlibras-"]) .portal-passo:not(.ativo) .portal-passo-rotulo { display: none; }
}

/* Campo do código de 6 dígitos */
:where(html[class*="pg-public-conlibras-"]) .portal-codigo {
    letter-spacing: 0.5em;
    font-size: 1.5rem;
    text-align: center;
    font-weight: 600;
}

/* ─── private/estoque/_ncm_select (incluído no cadastrar e no editar) ─── */
/* escopo: pg-private-estoque-cadastrar, pg-private-estoque-editar */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .ncm-opcao .ncm-codigo {
  font-family: var(--bs-font-monospace, monospace);
  font-weight: 600;
  margin-right: .5rem;
}
/* A descrição é o caminho inteiro na árvore do NCM e pode passar de 1.000
   caracteres — limitar a 2 linhas mantém a lista navegável. */
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .ncm-opcao .ncm-caminho {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  margin-top: .15rem;
}
:where(html.pg-private-estoque-cadastrar, html.pg-private-estoque-editar) .select2-results__option .ncm-opcao {
  white-space: normal;
}

/* ─── private/suporte/shell (casca do modo suporte; antigo suporte-console.css + bloco da view) ─── */
/* escopo: tpl-suporte */
/* Console de suporte — visual de terminal, sobreposto à aplicação.
   Só é carregado quando o modo "Dar Suporte" está ativo. */

:where(html.tpl-suporte) #supConsoleBtn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 20000;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: #1e1e1e;
    color: #4ec9b0;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, background .15s ease;
}
:where(html.tpl-suporte) #supConsoleBtn:hover      { transform: scale(1.08); }
:where(html.tpl-suporte) #supConsoleBtn.ativo      { background: #4ec9b0; color: #1e1e1e; }

:where(html.tpl-suporte) #supConsoleBadge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: #f14c4c;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
}

:where(html.tpl-suporte) #supConsolePainel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42vh;
    min-height: 220px;
    z-index: 19999;
    background: #1e1e1e;
    border-top: 2px solid #4ec9b0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform .2s ease;
    font-family: "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace;
}
:where(html.tpl-suporte) #supConsolePainel.aberto { transform: translateY(0); }

:where(html.tpl-suporte) #supConsoleBarra {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 6px 12px;
    background: #252526;
    border-bottom: 1px solid #333;
    font-size: 12px;
    color: #ccc;
}
:where(html.tpl-suporte) #supConsoleBarra .sup-titulo { color: #4ec9b0; font-weight: 700; }
:where(html.tpl-suporte) #supConsoleBarra .sup-aviso  { color: #808080; font-style: italic; }
:where(html.tpl-suporte) #supConsoleBarra .sup-filtros,
:where(html.tpl-suporte) #supConsoleBarra .sup-acoes  { display: flex; gap: 4px; }
:where(html.tpl-suporte) #supConsoleBarra .sup-acoes  { margin-left: auto; }

:where(html.tpl-suporte) #supConsoleBarra button {
    background: #333;
    border: 1px solid #454545;
    color: #ccc;
    border-radius: 3px;
    padding: 2px 8px;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
}
:where(html.tpl-suporte) #supConsoleBarra button:hover  { background: #3e3e42; }
:where(html.tpl-suporte) #supConsoleBarra button.ativo  { background: #4ec9b0; border-color: #4ec9b0; color: #1e1e1e; font-weight: 700; }

:where(html.tpl-suporte) #supConsoleSaida {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.5;
}

:where(html.tpl-suporte) .sup-linha {
    display: flex;
    gap: 8px;
    padding: 2px 12px;
    border-left: 3px solid transparent;
    color: #d4d4d4;
    word-break: break-word;
}
:where(html.tpl-suporte) .sup-linha:hover { background: #2a2d2e; }

:where(html.tpl-suporte) .sup-ts  { color: #6a9955; flex: 0 0 auto; }
:where(html.tpl-suporte) .sup-tag { flex: 0 0 52px; text-transform: uppercase; font-size: 10px; opacity: .85; }
:where(html.tpl-suporte) .sup-msg { flex: 1 1 auto; min-width: 0; }
:where(html.tpl-suporte) .sup-det { color: #9cdcfe; white-space: pre-wrap; opacity: .85; margin-top: 2px; }

:where(html.tpl-suporte) .sup-clique { border-left-color: #c586c0; }
:where(html.tpl-suporte) .sup-clique .sup-tag { color: #c586c0; }
:where(html.tpl-suporte) .sup-req    { border-left-color: #569cd6; }
:where(html.tpl-suporte) .sup-req    .sup-tag { color: #569cd6; }
:where(html.tpl-suporte) .sup-resp   { border-left-color: #4ec9b0; }
:where(html.tpl-suporte) .sup-resp   .sup-tag { color: #4ec9b0; }
:where(html.tpl-suporte) .sup-erro   { border-left-color: #f14c4c; background: rgba(241, 76, 76, .08); }
:where(html.tpl-suporte) .sup-erro   .sup-tag, :where(html.tpl-suporte) .sup-erro .sup-msg { color: #f14c4c; }
:where(html.tpl-suporte) .sup-aviso  { border-left-color: #dcdcaa; }
:where(html.tpl-suporte) .sup-aviso  .sup-tag { color: #dcdcaa; }
:where(html.tpl-suporte) .sup-info   { border-left-color: #808080; }
:where(html.tpl-suporte) .sup-info   .sup-tag { color: #808080; }

:where(html.tpl-suporte) .sup-vazio { padding: 20px; text-align: center; color: #808080; font-style: italic; }

@media (max-width: 768px) {
    :where(html.tpl-suporte) #supConsolePainel { height: 55vh; }
    :where(html.tpl-suporte) #supConsoleBarra .sup-aviso { display: none; }
    :where(html.tpl-suporte) .sup-tag { flex-basis: 42px; }
}

@media print {
    :where(html.tpl-suporte) #supConsoleBtn, :where(html.tpl-suporte) #supConsolePainel { display: none !important; }
}

/* Navegação: marca a troca de página na linha do tempo, para a sequência
   "cliquei aqui → carregou aquilo" ficar legível depois do reload. */
:where(html.tpl-suporte) .sup-nav {
    border-left-color: #ce9178;
    background: rgba(206, 145, 120, .07);
}
:where(html.tpl-suporte) .sup-nav .sup-tag { color: #ce9178; }
:where(html.tpl-suporte) .sup-nav .sup-msg { color: #ce9178; font-weight: 600; }

/* (bloco <style> da shell.php, que vinha depois do suporte-console.css) */
/* Layout em coluna: a barra ocupa o que precisa e o frame fica com
   todo o resto. Antes a altura do frame vinha só do JS, e até ele
   rodar o iframe usava a altura padrão de 150px — era a faixa branca
   que sobrava embaixo no primeiro carregamento. */
html:where(.tpl-suporte), :where(html.tpl-suporte) body { height: 100%; margin: 0; overflow: hidden; background: #fff; }
:where(html.tpl-suporte) body { display: flex; flex-direction: column; }

:where(html.tpl-suporte) #supBarra {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #fff3cd; border-bottom: 2px solid #ffc107;
    padding: 6px 16px; font: 14px/1.4 system-ui, sans-serif;
}
:where(html.tpl-suporte) #supBarra .sup-url {
    flex: 1 1 auto; min-width: 0; color: #6c757d; font-size: 12px;
    font-family: Consolas, monospace; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
:where(html.tpl-suporte) #supBarra a { text-decoration: none; }

:where(html.tpl-suporte) #supAppFrame {
    flex: 1 1 auto;
    min-height: 0;          /* sem isto o flex não deixa o iframe encolher */
    width: 100%; border: 0; background: #fff;
    transition: margin-bottom .2s ease;
}

/* Console aberto: o frame recua a altura do painel, em vez de ficar
   escondido atrás dele. Os valores acompanham a parte do antigo suporte-console.css, acima. */
:where(html.tpl-suporte) body.sup-aberto #supAppFrame { margin-bottom: 42vh; }
@media (max-width: 768px) {
    :where(html.tpl-suporte) body.sup-aberto #supAppFrame { margin-bottom: 55vh; }
}

/* ─── private/financeiro/index (visão geral) ─── */
/* escopo: pg-private-financeiro-index */
:where(html.pg-private-financeiro-index) .fin-kpi-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.1rem;
}

/* O Chart.js com maintainAspectRatio: false ocupa a altura do contêiner;
   sem altura fixa aqui o gráfico cresce sem parar no redimensionamento. */
:where(html.pg-private-financeiro-index) .fin-grafico { position: relative; height: 300px; }
:where(html.pg-private-financeiro-index) .fin-grafico-sm { height: 170px; }

:where(html.pg-private-financeiro-index) .fin-sem-dados {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    min-height: 120px;
}
:where(html.pg-private-financeiro-index) .fin-sem-dados i { font-size: 1.5rem; }

:where(html.pg-private-financeiro-index) .fin-card-link { text-decoration: none; transition: box-shadow .15s; }
:where(html.pg-private-financeiro-index) .fin-card-link:hover { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08); }

/* Item de lista com texto longo: sem min-width 0 o flex não deixa o
   text-truncate cortar e o valor é empurrado para fora do card. */
:where(html.pg-private-financeiro-index) .list-group-item > .text-truncate { min-width: 0; }
:where(html.pg-private-financeiro-index) .fin-col-descricao { max-width: 260px; }

/* A barra superior é fixa: sem isto o link "Contas vencidas" rola o título
   do card para baixo dela. */
:where(html.pg-private-financeiro-index) #contasAPagar { scroll-margin-top: 80px; }

@media (max-width: 767.98px) {
    :where(html.pg-private-financeiro-index) .fin-grafico { height: 240px; }
    :where(html.pg-private-financeiro-index) .fin-grafico-sm { height: 150px; }
}

/* Cards de indicador em 2 colunas no celular: valores como R$ 123.456,78
   não cabem no tamanho h3/h4. */
@media (max-width: 575.98px) {
    :where(html.pg-private-financeiro-index) .card-body > .h3,
    :where(html.pg-private-financeiro-index) .card-body > .h4 { font-size: 1.1rem; }
}

/* ─── private/pedidos/pdv — HTML montado pelo JS ─── */
/* escopo: pg-private-pedidos-pdv
   Eram style="..." dentro das strings do JS (catálogo, carrinho, sugestões
   de cliente, painel de atalhos). O hover era feito com
   onmouseover/onmouseout que gravava #fff no fundo; agora é :hover. */
:where(html.pg-private-pedidos-pdv) .pdv-clicavel { cursor: pointer; }
:where(html.pg-private-pedidos-pdv) .pdv-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 10px;
}
:where(html.pg-private-pedidos-pdv) .pdv-cat-card {
    border: 1px solid var(--gk-border-color);
    border-radius: 8px;
    padding: 10px 8px;
    cursor: pointer;
    text-align: center;
    background: var(--gk-card-background);
    transition: background .12s;
}
:where(html.pg-private-pedidos-pdv) .pdv-cat-card:hover { background: var(--gk-tertiary-bg); }
:where(html.pg-private-pedidos-pdv) .pdv-cat-icone { font-size: 1.5rem; color: var(--gk-secondary-color); }
:where(html.pg-private-pedidos-pdv) .pdv-cat-nome {
    font-size: .8rem;
    font-weight: 600;
    margin: 4px 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:where(html.pg-private-pedidos-pdv) .pdv-cat-preco { font-size: .82rem; color: var(--gk-success); font-weight: 700; }
:where(html.pg-private-pedidos-pdv) .pdv-cat-estoque { font-size: .7rem; color: var(--gk-secondary-color); margin-bottom: 4px; }
:where(html.pg-private-pedidos-pdv) .pdv-cat-add {
    font-size: .7rem;
    background: var(--gk-primary);
    color: #fff;
    border-radius: 4px;
    padding: 1px 8px;
}
:where(html.pg-private-pedidos-pdv) .pdv-serv-preco { display: flex; align-items: center; gap: 10px; }
:where(html.pg-private-pedidos-pdv) .pdv-car-linha { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
:where(html.pg-private-pedidos-pdv) .pdv-car-info { flex: 1; min-width: 0; }
:where(html.pg-private-pedidos-pdv) .pdv-car-nome {
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
:where(html.pg-private-pedidos-pdv) .pdv-car-unit { font-size: .74rem; color: var(--gk-secondary-color); }
:where(html.pg-private-pedidos-pdv) .pdv-car-acoes { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
:where(html.pg-private-pedidos-pdv) .pdv-car-qtd-btn {
    border: 1px solid var(--gk-border-color);
    background: var(--gk-card-background);
    color: inherit;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
:where(html.pg-private-pedidos-pdv) .pdv-car-qtd { min-width: 26px; text-align: center; font-size: .85rem; font-weight: 600; }
:where(html.pg-private-pedidos-pdv) .pdv-car-total { min-width: 64px; text-align: right; font-size: .82rem; font-weight: 700; }
:where(html.pg-private-pedidos-pdv) .pdv-car-remover {
    border: none;
    background: none;
    color: var(--gk-danger);
    cursor: pointer;
    padding: 0 2px;
    font-size: .9rem;
}
:where(html.pg-private-pedidos-pdv) .pdv-sugestao {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--gk-border-color);
    font-size: .85rem;
}
:where(html.pg-private-pedidos-pdv) .pdv-sugestao:hover { background: var(--gk-tertiary-bg); }
:where(html.pg-private-pedidos-pdv) .pdv-sugestao-vazia { cursor: default; color: var(--gk-secondary-color); border-bottom: 0; }
:where(html.pg-private-pedidos-pdv) .pdv-sugestao-vazia:hover { background: none; }
:where(html.pg-private-pedidos-pdv) .pdv-atalho-desc { font-size: .88rem; }
:where(html.pg-private-pedidos-pdv) .pdv-atalhos-painel {
    background: var(--gk-card-background);
    border-radius: 16px;
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .25);
    overflow: hidden;
}
:where(html.pg-private-pedidos-pdv) .pdv-atalhos-cab {
    padding: 18px 20px;
    border-bottom: 1px solid var(--gk-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
:where(html.pg-private-pedidos-pdv) .pdv-atalhos-titulo { margin: 0; font-size: 1rem; font-weight: 600; }
:where(html.pg-private-pedidos-pdv) .pdv-atalhos-fechar {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--gk-secondary-color);
}
:where(html.pg-private-pedidos-pdv) .pdv-atalhos-corpo { padding: 4px 20px 20px; overflow-y: auto; }
:where(html.pg-private-pedidos-pdv) .pdv-atalhos-nota { font-size: .76rem; margin: 14px 0 0; }

/* ─── private/pedidos/editar — HTML montado pelo JS ─── */
/* escopo: pg-private-pedidos-editar
   Opções do seletor de itens (Choices.js) e linhas de parcela; eram
   style="..." nas template strings do JS. */
:where(html.pg-private-pedidos-editar) .item-opcao { display: flex; align-items: center; gap: 10px; }
:where(html.pg-private-pedidos-editar) .item-opcao-img { border-radius: 5px; }
:where(html.pg-private-pedidos-editar) .item-opcao-icone {
    font-size: 24px;
    color: var(--gk-secondary-color);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
:where(html.pg-private-pedidos-editar) .item-opcao-nome { font-weight: bold; }
:where(html.pg-private-pedidos-editar) .item-opcao-preco { font-size: 12px; color: var(--gk-secondary-color); }
:where(html.pg-private-pedidos-editar) .parcela-indice { min-width: 52px; }

/* ─── HTML montado pelo JS em telas diversas ─── */
/* Eram style="..." dentro de strings do JS. */
:where(html.pg-private-pesquisa-satisfacao-modelo-form) .pesq-escala {
    display: flex;
    gap: 6px;
    justify-content: center;
}
:where(html.pg-private-pesquisa-satisfacao-modelo-form) .pesq-escala-quebra { flex-wrap: wrap; }
:where(html.pg-private-pesquisa-satisfacao-modelo-form) .pesq-escala-folga { gap: 8px; }
:where(html.pg-private-pesquisa-satisfacao-modelo-form) .pesq-escala-junta { gap: 4px; }
:where(html.pg-private-pesquisa-satisfacao-modelo-form) .pesq-escala-item {
    font-size: 28px;
    cursor: pointer;
    transition: transform 0.2s;
}
/* --pesq-cor: cor escolhida no formulário, definida pelo JS no contêiner. */
:where(html.pg-private-pesquisa-satisfacao-modelo-form) .pesq-escala-cor { color: var(--pesq-cor); }
:where(html.pg-private-pesquisa-satisfacao-modelo-form) .preview-btn-numero {
    min-width: 40px;
    height: 40px;
    border: 2px solid var(--pesq-cor);
    background: var(--gk-card-background);
    border-radius: 6px;
    cursor: pointer;
    color: var(--pesq-cor);
    font-weight: bold;
    font-size: 16px;
    transition: all 0.2s;
}

:where(html.pg-public-login-esqueceu, html.pg-public-login-resetar-senha) .login-msg-erro {
    color: var(--gk-danger);
    font-size: 13px;
    margin-top: 8px;
}
:where(html.pg-public-login-resetar-senha) .login-msg-erro-junto { margin-top: 0; }

:where(html.pg-private-chat-index) .chat-rotulo-suporte { font-size: 12px; color: #667eea; }
:where(html.pg-private-configuracoes-temas) .tema-logo-ampliada { max-height: 70vh; }
:where(html.pg-private-laudos-novo) .laudo-col-indice { width: 36px; }
:where(html.pg-private-laudos-novo) .laudo-leitura-valor { min-width: 70px; }

/* Busca global (busca-global.js) e dicas do chat (chat-ai.js): eram style="..." no HTML do JS. */
:where(html.tpl-private) .bg-vazio-icone { font-size: 2rem; color: var(--gk-secondary-color); }
:where(html.tpl-private) .bg-vazio-icone-erro { color: var(--gk-danger); }
:where(html.pg-private-chat-index) .ai-hints { margin-bottom: 15px; font-size: 12px; }

/* ─── private/calendario/eventos/index — versão web ─── */
/* Também vale na agenda de demonstrações do admin (admin/demonstracoes/index),
   que usa o mesmo calendário e a mesma coluna lateral. */
/* escopo: pg-private-calendario-eventos-index, só dentro de .desktop-calendar
   (a agenda mobile é outro bloco e não é afetada).
   O CSS antigo da tela usava classes do FullCalendar v5 (.fc-daygrid-day,
   .fc-toolbar-title...), mas o instalado é o v4 (public/assets/js/core):
   quase nada dele pegava. Estas regras usam as classes do v4. Cores pelas
   variáveis do tema, para funcionar no claro e no escuro. */

/* Coluna lateral */
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-lateral {
    background: var(--gk-tertiary-bg);
    border-right: 1px solid var(--gk-border-color);
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}
@media (max-width: 991.98px) {
    :where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-lateral { border-right: 0; border-top: 1px solid var(--gk-border-color); }
}
/* O card é filho direto de uma .row, e o Bootstrap dá o padding do gutter
   a todo filho de .row: sobrava uma faixa na cor do card antes da coluna
   lateral. Só a partir de 768px; no mobile o card continua como era. */
@media (min-width: 768px) {
    :where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .row > .cal-card {
        padding-left: 0;
        padding-right: 0;
    }
}
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-lateral-bloco { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--gk-border-color); }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-lateral-bloco:last-child { border-bottom: 0; }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-lateral-titulo {
    display: flex;
    justify-content: space-between;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gk-secondary-color);
    margin-bottom: .75rem;
}
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-resumo-item {
    background: var(--gk-card-background);
    border: 1px solid var(--gk-border-color);
    border-radius: 10px;
    padding: .6rem .4rem;
    text-align: center;
}
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-resumo-num {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--tui-escuro-primaria-texto, var(--gk-primary));
}
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-resumo-rot { font-size: .7rem; color: var(--gk-secondary-color); }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-lista-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
    background: var(--gk-card-background);
    border: 1px solid var(--gk-border-color);
    border-left: 3px solid var(--ev-cor);
    border-radius: 8px;
    padding: .5rem .7rem;
    color: inherit;
    cursor: pointer;
    transition: box-shadow .15s, transform .1s;
}
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-lista-item:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, .1); transform: translateY(-1px); }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-lista-quando { font-size: .72rem; font-weight: 600; color: var(--gk-secondary-color); }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-lista-titulo {
    font-size: .86rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-lista-tipo { font-size: .72rem; color: var(--gk-secondary-color); }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-lista-vazio { font-size: .82rem; color: var(--gk-secondary-color); }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-legenda-item { display: flex; align-items: center; gap: .55rem; font-size: .85rem; }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-ponto { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--ev-cor); }

/* Barra do calendário */
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .cal-principal { padding: 1.25rem 1.5rem; }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-toolbar { margin-bottom: 1.1rem; gap: .5rem; flex-wrap: wrap; }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-toolbar h2 {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: capitalize;
    color: inherit;
}
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-button,
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-button-primary {
    background: var(--gk-card-background);
    border: 1px solid var(--gk-border-color);
    color: inherit;
    font-size: .85rem;
    font-weight: 500;
    text-transform: capitalize;
    padding: .375rem .8rem;
    box-shadow: none;
    transition: background .15s, border-color .15s;
}
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-button:hover,
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-button-primary:hover { background: var(--gk-tertiary-bg); border-color: var(--gk-border-color); color: inherit; }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-button:focus,
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-button-primary:focus { box-shadow: 0 0 0 .2rem var(--gk-focus-ring-color); }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-button-primary:not(:disabled).fc-button-active,
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-button-primary:not(:disabled):active {
    background: var(--tui-escuro-primaria-suave, var(--gk-primary));
    border-color: var(--tui-escuro-primaria-suave, var(--gk-primary));
    color: #fff;
}
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-button-primary:disabled { background: var(--gk-card-background); color: inherit; opacity: .5; }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-button .fc-icon { font-size: 1.1em; }

/* Grade */
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-unthemed th,
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-unthemed td,
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-unthemed thead,
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-unthemed tbody,
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-unthemed .fc-divider,
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-unthemed .fc-row,
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-unthemed .fc-popover { border-color: var(--gk-border-color); }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-day-header {
    padding: .6rem 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gk-secondary-color);
    background: var(--gk-tertiary-bg);
}
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-day.fc-sat,
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-day.fc-sun { background: color-mix(in srgb, var(--gk-tertiary-bg) 60%, transparent); }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-unthemed td.fc-today { background: color-mix(in srgb, var(--gk-primary) 7%, transparent); }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-day-top .fc-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    margin: 4px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: inherit;
}
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-day-top.fc-today .fc-day-number {
    background: var(--tui-escuro-primaria-suave, var(--gk-primary));
    color: #fff;
}
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-day-top.fc-other-month { opacity: .45; }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar a.fc-day-number:hover { background: var(--gk-tertiary-bg); text-decoration: none; }

/* Eventos: pílula com a cor do tipo numa faixa à esquerda. !important porque
   o FullCalendar grava background/borda/cor inline em cada evento. */
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-event.cal-evento {
    background: color-mix(in srgb, var(--ev-cor) 16%, var(--gk-card-background)) !important;
    border: 0 !important;
    border-left: 3px solid var(--ev-cor) !important;
    color: inherit !important;
    border-radius: 6px;
    margin: 1px 5px 2px;
    padding: 2px 6px;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
    transition: box-shadow .15s, transform .1s;
}
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-event.cal-evento:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .14); transform: translateY(-1px); }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-event.cal-evento .fc-content { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-event.cal-evento .fc-time { font-weight: 700; margin-right: 4px; opacity: .75; }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-more { font-size: .75rem; font-weight: 600; margin-left: 6px; color: var(--tui-escuro-primaria-texto, var(--gk-primary)); }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-popover {
    background: var(--gk-card-background);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-popover .fc-header { background: var(--gk-tertiary-bg); padding: .4rem .6rem; font-weight: 600; }
:where(html.pg-private-calendario-eventos-index, html.pg-private-admin-demonstracoes-index) .desktop-calendar .fc-highlight { background: color-mix(in srgb, var(--gk-primary) 15%, transparent); opacity: 1; }

/* ─── private/admin/demonstracoes/index — agenda de demonstrações ─── */
/* escopo: pg-private-admin-demonstracoes-index. Calendário e coluna lateral
   vêm das regras do calendário (bloco "private/calendario/eventos/index —
   versão web"); aqui ficam só a cor por status e a lista mobile. A cor do
   evento entra em --ev-cor, que aquelas regras já usam. */
:where(html.pg-private-admin-demonstracoes-index) .demo-st-0 { --ev-cor: var(--gk-primary); }
:where(html.pg-private-admin-demonstracoes-index) .demo-st-1 { --ev-cor: var(--gk-success); }
:where(html.pg-private-admin-demonstracoes-index) .demo-st-2 { --ev-cor: var(--gk-secondary-color); }
:where(html.pg-private-admin-demonstracoes-index) .demo-st-3 { --ev-cor: var(--gk-warning); }

/* Demonstração cancelada fica riscada no calendário e nas listas. */
:where(html.pg-private-admin-demonstracoes-index) .demo-st-2 .fc-title,
:where(html.pg-private-admin-demonstracoes-index) .demo-st-2 .cal-lista-titulo,
:where(html.pg-private-admin-demonstracoes-index) .demo-card.demo-st-2 .demo-card-titulo { text-decoration: line-through; }

/* Lista mobile: cartão com a barra de status à esquerda. */
:where(html.pg-private-admin-demonstracoes-index) .demo-card {
    display: flex;
    gap: .75rem;
    width: 100%;
    padding: .85rem 1rem;
    text-align: left;
    background: var(--gk-card-background);
    color: var(--gk-body-color);
    border: 1px solid var(--gk-border-color);
    border-left: 4px solid var(--ev-cor);
    border-radius: .6rem;
}
:where(html.pg-private-admin-demonstracoes-index) .demo-card + .demo-card { margin-top: .6rem; }
:where(html.pg-private-admin-demonstracoes-index) .demo-card-quando { font-size: .8rem; color: var(--gk-secondary-color); }
:where(html.pg-private-admin-demonstracoes-index) .demo-card-titulo { font-weight: 600; }
:where(html.pg-private-admin-demonstracoes-index) .demo-card-sub { font-size: .85rem; color: var(--gk-secondary-color); }
:where(html.pg-private-admin-demonstracoes-index) .demo-secao-titulo {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gk-secondary-color);
    margin: 1.25rem 0 .6rem;
}
:where(html.pg-private-admin-demonstracoes-index) .demo-ponto {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--ev-cor);
    margin-right: .4rem;
}
/* Observações do modal de detalhes mantêm as quebras de linha digitadas. */
:where(html.pg-private-admin-demonstracoes-index) .demo-obs { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 767px) {
    /* O botão flutuante fica acima da barra inferior do mobile (ver o mesmo
       ajuste no calendário) e a lista ganha folga para ele não cobrir o
       último cartão. */
    :where(html.pg-private-admin-demonstracoes-index) .floating-button-container {
        bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    }
    :where(html.pg-private-admin-demonstracoes-index) .demo-mobile { padding-bottom: 72px; }
}

/* ─── private/pedidos/editar — "Mais Opções" com salvamento automático ─── */
/* escopo: pg-private-pedidos-editar */
:where(html.pg-private-pedidos-editar) .pedido-opcoes { display: flex; flex-direction: column; gap: 1.25rem; }
:where(html.pg-private-pedidos-editar) .pedido-opcoes-grupo + .pedido-opcoes-grupo {
    border-top: 1px solid var(--gk-border-color);
    padding-top: 1.1rem;
}
:where(html.pg-private-pedidos-editar) .pedido-opcoes-titulo {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gk-secondary-color);
    margin-bottom: .75rem;
}
:where(html.pg-private-pedidos-editar) .pedido-opcoes-sub { margin-top: 1rem; }
:where(html.pg-private-pedidos-editar) .pedido-opcoes-subtitulo { font-size: .85rem; font-weight: 600; margin-bottom: .5rem; }
:where(html.pg-private-pedidos-editar) .pedido-opcoes .form-label { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* Aviso "Salvando… / Salvo / erro" ao lado do rótulo de cada campo. */
:where(html.pg-private-pedidos-editar) .autosave-status { font-size: .72rem; font-weight: 500; line-height: 1; }
:where(html.pg-private-pedidos-editar) .autosave-status .spinner-border { width: .7rem; height: .7rem; border-width: .12em; vertical-align: -1px; }
:where(html.pg-private-pedidos-editar) .autosave-status.is-salvando { color: var(--gk-secondary-color); }
:where(html.pg-private-pedidos-editar) .autosave-status.is-salvo { color: var(--gk-success); }
:where(html.pg-private-pedidos-editar) .autosave-status.is-erro { color: var(--gk-danger); }
:where(html.pg-private-pedidos-editar) .autosave-tentar {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ─── Receitas e despesas: tabela sem rolagem horizontal ─── */
/* A tabela tem text-nowrap: uma descrição longa alargava tudo e empurrava a
   coluna "Ações" para fora da tela. A descrição passa a quebrar linha; no
   web o layout é fixo (as outras colunas têm largura definida e a descrição
   fica com o resto). No celular o layout continua automático — fixo, as
   larguras das outras colunas deixariam a descrição com poucos pixels. */
:where(html.pg-private-financeiro-despesas, html.pg-private-financeiro-receitas) .finance-table .description-cell {
    white-space: normal;
    overflow-wrap: anywhere;
}
@media (min-width: 768px) {
    :where(html.pg-private-financeiro-despesas, html.pg-private-financeiro-receitas) .finance-table { table-layout: fixed; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Documentos na tela: recibos e orçamentos
   ═══════════════════════════════════════════════════════════════════════

   Valem só na tela do documento. As cores e medidas do modelo da empresa
   (--tpl-*) continuam num <style> na view, porque vêm do banco.

   A janela de impressão desses documentos copia só os <link> de CSS da
   página, sem as classes do <html>. Por isso estas regras não chegam nela,
   exatamente como antes, quando ficavam num <style> que também não era
   copiado. Já as classes u-* (sem escopo) chegam, como chegava o
   style="..." inline que elas substituem.

   Os modelos templates/template-0X.php NÃO estão aqui: viram PDF no dompdf,
   que não lê este arquivo, e o CSS deles precisa ficar no próprio HTML.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── private/recibos/recibo-01 ─── */
/* escopo: pg-private-recibos-recibo-01 */
:where(html.pg-private-recibos-recibo-01) body { font-size: var(--tpl-fonte-sz); font-family: var(--tpl-fonte); color: var(--tpl-cor-texto); }
:where(html.pg-private-recibos-recibo-01) #invoice { background: var(--tpl-cor-fundo); padding: var(--tpl-margem); }
:where(html.pg-private-recibos-recibo-01) .text-primary { color: var(--tpl-cor-cabecalho) !important; }
:where(html.pg-private-recibos-recibo-01) .bg-primary { background-color: var(--tpl-cor-cabecalho) !important; }
:where(html.pg-private-recibos-recibo-01) .btn-primary { background-color: var(--tpl-cor-cabecalho) !important; border-color: var(--tpl-cor-cabecalho) !important; }
:where(html.pg-private-recibos-recibo-01) .bg-light { background-color: var(--tpl-cor-fundo) !important; }
:where(html.pg-private-recibos-recibo-01) .card, :where(html.pg-private-recibos-recibo-01) .rounded-5 { border-color: var(--tpl-cor-borda) !important; border-radius: var(--tpl-radius) !important; }
:where(html.pg-private-recibos-recibo-01) table.table thead tr th { background-color: var(--tpl-cor-th) !important; padding-top: var(--tpl-padding-linha) !important; padding-bottom: var(--tpl-padding-linha) !important; font-family: var(--tpl-fonte); font-size: var(--tpl-fonte-sz); }
:where(html.pg-private-recibos-recibo-01) table.table tbody td { padding-top: var(--tpl-padding-linha) !important; padding-bottom: var(--tpl-padding-linha) !important; font-family: var(--tpl-fonte); font-size: var(--tpl-fonte-sz); }
:where(html.pg-private-recibos-recibo-01) table.table tbody tr:nth-child(even) td { background-color: var(--tpl-cor-tr-alt); }
:where(html.pg-private-recibos-recibo-01) table.table { border-color: var(--tpl-cor-borda) !important; border-width: var(--tpl-borda-w) !important; }
:where(html.pg-private-recibos-recibo-01) #invoice img.logo-empresa { height: var(--tpl-logo-h) !important; max-height: var(--tpl-logo-h) !important; width: auto; }
:where(html.pg-private-recibos-recibo-01) h2, :where(html.pg-private-recibos-recibo-01) h3, :where(html.pg-private-recibos-recibo-01) .titulo-recibo { font-size: var(--tpl-fonte-titulo-sz) !important; }
:where(html.pg-private-recibos-recibo-01) .table-compact { border-collapse: collapse; }
:where(html.pg-private-recibos-recibo-01) .table-compact thead th { padding-top: var(--tpl-padding-linha); padding-bottom: var(--tpl-padding-linha); }
:where(html.pg-private-recibos-recibo-01) .table-compact tbody td { padding-top: var(--tpl-padding-linha); padding-bottom: var(--tpl-padding-linha); font-size: var(--tpl-fonte-sz); }

:where(html.pg-private-recibos-recibo-01) .rodape-termos img { max-height: 45px; width: auto; height: auto; vertical-align: middle; }

/* ─── private/recibos/recibo-02 ─── */
/* escopo: pg-private-recibos-recibo-02 */
:where(html.pg-private-recibos-recibo-02) body { font-size: var(--tpl-fonte-sz); font-family: var(--tpl-fonte); color: var(--tpl-cor-texto); }
:where(html.pg-private-recibos-recibo-02) #invoice { background: var(--tpl-cor-fundo); padding: var(--tpl-margem); }
:where(html.pg-private-recibos-recibo-02) .text-primary { color: var(--tpl-cor-cabecalho) !important; }
:where(html.pg-private-recibos-recibo-02) .bg-primary { background-color: var(--tpl-cor-cabecalho) !important; }
:where(html.pg-private-recibos-recibo-02) .btn-primary { background-color: var(--tpl-cor-cabecalho) !important; border-color: var(--tpl-cor-cabecalho) !important; }
:where(html.pg-private-recibos-recibo-02) .bg-light { background-color: var(--tpl-cor-fundo) !important; }
:where(html.pg-private-recibos-recibo-02) .card, :where(html.pg-private-recibos-recibo-02) .rounded-5 { border-color: var(--tpl-cor-borda) !important; border-radius: var(--tpl-radius) !important; }
:where(html.pg-private-recibos-recibo-02) table.table thead tr th { background-color: var(--tpl-cor-th) !important; padding-top: var(--tpl-padding-linha) !important; padding-bottom: var(--tpl-padding-linha) !important; font-family: var(--tpl-fonte); font-size: var(--tpl-fonte-sz); }
:where(html.pg-private-recibos-recibo-02) table.table tbody td { padding-top: var(--tpl-padding-linha) !important; padding-bottom: var(--tpl-padding-linha) !important; font-family: var(--tpl-fonte); font-size: var(--tpl-fonte-sz); }
:where(html.pg-private-recibos-recibo-02) table.table tbody tr:nth-child(even) td { background-color: var(--tpl-cor-tr-alt); }
:where(html.pg-private-recibos-recibo-02) table.table { border-color: var(--tpl-cor-borda) !important; border-width: var(--tpl-borda-w) !important; }
:where(html.pg-private-recibos-recibo-02) img.logo-empresa { height: var(--tpl-logo-h) !important; max-height: var(--tpl-logo-h) !important; width: auto; max-width: 100%; }
/* Layout específico recibo-02 */
:where(html.pg-private-recibos-recibo-02) .topo { display: flex; align-items: stretch; margin-bottom: 10px; border-bottom: var(--tpl-borda-w) solid var(--tpl-cor-borda); padding-bottom: 0; }
:where(html.pg-private-recibos-recibo-02) .logo { width: var(--tpl-logo-h); display: flex; align-items: center; }
:where(html.pg-private-recibos-recibo-02) .empresa-info { padding-left: 20px; flex-direction: column; justify-content: center; }
:where(html.pg-private-recibos-recibo-02) .titulo { text-align: center; font-size: var(--tpl-fonte-titulo-sz); font-weight: bold; color: var(--tpl-cor-cabecalho); padding-top: 10px; margin-top: 10px; }
:where(html.pg-private-recibos-recibo-02) .footer { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding: 20px; background: var(--tpl-cor-fundo); font-size: var(--tpl-fonte-sz); border-top: var(--tpl-borda-w) solid var(--tpl-cor-borda); flex-wrap: wrap; }
:where(html.pg-private-recibos-recibo-02) .footer-left { flex: 1; max-width: 60%; }
:where(html.pg-private-recibos-recibo-02) .footer-right { text-align: right; max-width: 40%; }
:where(html.pg-private-recibos-recibo-02) .table-compact { border-collapse: collapse; }
:where(html.pg-private-recibos-recibo-02) .table-compact thead th { padding-top: var(--tpl-padding-linha); padding-bottom: var(--tpl-padding-linha); }
:where(html.pg-private-recibos-recibo-02) .table-compact tbody td { padding-top: var(--tpl-padding-linha); padding-bottom: var(--tpl-padding-linha); font-size: var(--tpl-fonte-sz); }

/* ─── private/recibos/recibo-03 ─── */
/* escopo: pg-private-recibos-recibo-03 */
:where(html.pg-private-recibos-recibo-03) * { box-sizing: border-box; }
:where(html.pg-private-recibos-recibo-03) body { font-family: var(--tpl-fonte); margin: var(--tpl-margem); color: var(--tpl-cor-texto); background: var(--tpl-cor-fundo); font-size: var(--tpl-fonte-sz); }
:where(html.pg-private-recibos-recibo-03) .container { background: #fff; padding: calc(var(--tpl-margem)*0.67); border-radius: var(--tpl-radius); box-shadow: 0 0 10px rgba(0,0,0,0.1); }
:where(html.pg-private-recibos-recibo-03) .topo { display: flex; align-items: center; margin-bottom: 20px; }
:where(html.pg-private-recibos-recibo-03) .logo img { height: var(--tpl-logo-h); max-width: 160px; object-fit: contain; }
:where(html.pg-private-recibos-recibo-03) .empresa-info { flex: 1; padding-left: 20px; font-size: calc(var(--tpl-fonte-sz) * 0.9); }
:where(html.pg-private-recibos-recibo-03) .titulo { text-align: center; font-size: var(--tpl-fonte-titulo-sz); font-weight: bold; color: var(--tpl-cor-cabecalho); border-top: var(--tpl-borda-w) solid var(--tpl-cor-borda); padding-top: 10px; margin-top: 10px; }
:where(html.pg-private-recibos-recibo-03) .linha-dados { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: calc(var(--tpl-fonte-sz) * 0.95); }
:where(html.pg-private-recibos-recibo-03) .cliente-info, :where(html.pg-private-recibos-recibo-03) .pagamento-info { margin-top: 15px; font-size: var(--tpl-fonte-sz); }
:where(html.pg-private-recibos-recibo-03) table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: var(--tpl-fonte-sz); }
:where(html.pg-private-recibos-recibo-03) table, :where(html.pg-private-recibos-recibo-03) th, :where(html.pg-private-recibos-recibo-03) td { border: var(--tpl-borda-w) solid var(--tpl-cor-borda); }
:where(html.pg-private-recibos-recibo-03) th { padding: var(--tpl-padding-linha) 8px; background-color: var(--tpl-cor-th); text-align: left; color: var(--tpl-cor-texto); font-weight: bold; }
:where(html.pg-private-recibos-recibo-03) td { padding: var(--tpl-padding-linha) 8px; }
:where(html.pg-private-recibos-recibo-03) tbody tr:nth-child(even) td { background-color: var(--tpl-cor-tr-alt); }
:where(html.pg-private-recibos-recibo-03) .resumo { width: 50%; float: right; margin-top: 20px; border-collapse: collapse; }
:where(html.pg-private-recibos-recibo-03) .resumo td { border: none; padding: 4px 0; font-size: var(--tpl-fonte-sz); }
:where(html.pg-private-recibos-recibo-03) .resumo .total-linha td { font-weight: bold; font-size: calc(var(--tpl-fonte-sz) * 1.05); color: var(--tpl-cor-cabecalho); border-top: var(--tpl-borda-w) solid var(--tpl-cor-borda); }
:where(html.pg-private-recibos-recibo-03) .obs { clear: both; margin-top: 20px; font-size: calc(var(--tpl-fonte-sz) * 0.9); color: #555; }
:where(html.pg-private-recibos-recibo-03) .assinatura { margin-top: 30px; font-size: var(--tpl-fonte-sz); }
:where(html.pg-private-recibos-recibo-03) .rodape-termos img { max-height: 45px; width: auto; height: auto; vertical-align: middle; }
@media print { :where(html.pg-private-recibos-recibo-03) body { margin: 0; } :where(html.pg-private-recibos-recibo-03) .container { box-shadow: none; } }

/* ─── private/recibos/recibo-04 ─── */
/* escopo: pg-private-recibos-recibo-04 */
/* ── Industrial layout ── */
:where(html.pg-private-recibos-recibo-04) #invoice-04 {
  font-family: var(--tpl-fonte);
  font-size: var(--tpl-fonte-sz);
  color: var(--tpl-cor-texto);
  background: var(--tpl-cor-fundo);
  padding: var(--tpl-margem);
  max-width: 860px;
  margin: auto;
}
/* Header */
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-header {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: calc(var(--tpl-borda-w) * 3) solid var(--tpl-cor-cabecalho);
  padding-bottom: 12px;
  margin-bottom: 12px;
}
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-header .logo img {
  height: var(--tpl-logo-h);
  max-width: 200px;
  object-fit: contain;
}
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-header .empresa-info {
  flex: 1;
}
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-header .empresa-nome {
  font-size: calc(var(--tpl-fonte-sz) * 1.2);
  font-weight: bold;
  text-transform: uppercase;
}
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-header .empresa-sub {
  font-size: calc(var(--tpl-fonte-sz) * 0.85);
  line-height: 1.7;
  color: #555;
}
/* Título */
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-title-bar {
  background: var(--tpl-cor-cabecalho);
  color: #fff;
  text-align: center;
  font-size: var(--tpl-fonte-titulo-sz);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px;
  margin-bottom: 12px;
  border-radius: var(--tpl-radius);
}
/* Info row */
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-info-row {
  display: flex;
  gap: 20px;
  font-size: var(--tpl-fonte-sz);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-info-row span { white-space: nowrap; }
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-info-row strong { font-weight: bold; }
/* Sections */
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-section { margin-bottom: 14px; }
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-section-header {
  background: var(--tpl-cor-th);
  color: #fff;
  font-weight: bold;
  font-size: calc(var(--tpl-fonte-sz) * 0.9);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--tpl-padding-linha) 10px;
}
/* Table */
:where(html.pg-private-recibos-recibo-04) #invoice-04 table.r4-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tpl-fonte-sz);
  margin-bottom: 6px;
}
:where(html.pg-private-recibos-recibo-04) #invoice-04 table.r4-table th {
  background: var(--tpl-cor-th);
  color: #fff;
  font-weight: bold;
  text-align: left;
  padding: var(--tpl-padding-linha) 10px;
  border: var(--tpl-borda-w) solid var(--tpl-cor-borda);
}
:where(html.pg-private-recibos-recibo-04) #invoice-04 table.r4-table td {
  padding: var(--tpl-padding-linha) 10px;
  border: var(--tpl-borda-w) solid var(--tpl-cor-borda);
  vertical-align: top;
}
:where(html.pg-private-recibos-recibo-04) #invoice-04 table.r4-table tbody tr:nth-child(even) td {
  background: var(--tpl-cor-tr-alt);
}
:where(html.pg-private-recibos-recibo-04) #invoice-04 table.r4-table .right { text-align: right; }
:where(html.pg-private-recibos-recibo-04) #invoice-04 table.r4-table .center { text-align: center; }
/* Totals */
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-totals {
  width: 45%;
  float: right;
  border-collapse: collapse;
  margin-bottom: 14px;
  font-size: var(--tpl-fonte-sz);
}
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-totals td { padding: 4px 10px; border: none; }
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-totals .r4-total-row td {
  font-weight: bold;
  font-size: calc(var(--tpl-fonte-sz) * 1.1);
  color: var(--tpl-cor-cabecalho);
  border-top: calc(var(--tpl-borda-w) * 2) solid var(--tpl-cor-cabecalho);
  padding-top: 6px;
}
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-clearfix { clear: both; }
/* Signature */
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-signature {
  margin-top: 28px;
  display: flex;
  justify-content: flex-end;
}
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-signature-box {
  text-align: center;
  min-width: 200px;
}
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-signature-name {
  font-style: italic;
  font-size: calc(var(--tpl-fonte-sz) * 1.1);
}
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-signature-line {
  border-top: var(--tpl-borda-w) solid var(--tpl-cor-borda);
  margin: 4px 0 2px;
}
/* Footer */
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-footer {
  margin-top: 20px;
  padding-top: 10px;
  border-top: calc(var(--tpl-borda-w) * 2) solid var(--tpl-cor-cabecalho);
  font-size: calc(var(--tpl-fonte-sz) * 0.85);
  color: #555;
}
:where(html.pg-private-recibos-recibo-04) #invoice-04 .r4-footer img { max-height: 40px; vertical-align: middle; }
/* Print */
:where(html.pg-private-recibos-recibo-04) #invoice-04 .no-print { display: block; }
@media print { :where(html.pg-private-recibos-recibo-04) #invoice-04 .no-print { display: none !important; } }

:where(html.pg-private-recibos-recibo-04) .r4-footer img { max-height: 40px; vertical-align: middle; }

/* ─── private/orcamentos/orcamento-01 ─── */
/* escopo: pg-private-orcamentos-orcamento-01 */
/* Estilo para compactar as linhas da tabela */
:where(html.pg-private-orcamentos-orcamento-01) .table-compact {
  border-collapse: collapse;
}

:where(html.pg-private-orcamentos-orcamento-01) .table-compact thead th {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

:where(html.pg-private-orcamentos-orcamento-01) .table-compact tbody td {
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  font-size: 0.9rem;
}

:where(html.pg-private-orcamentos-orcamento-01) .table-compact tbody tr {
  line-height: 1.2;
}

:where(html.pg-private-orcamentos-orcamento-01) .rodape-termos img { max-height: 45px; width: auto; height: auto; vertical-align: middle; }

/* ─── private/orcamentos/orcamento-02 ─── */
/* escopo: pg-private-orcamentos-orcamento-02 */
/* Estilo para compactar as linhas da tabela */
:where(html.pg-private-orcamentos-orcamento-02) .table-compact {
  border-collapse: collapse;
}

:where(html.pg-private-orcamentos-orcamento-02) .table-compact thead th {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

:where(html.pg-private-orcamentos-orcamento-02) .table-compact tbody td {
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  font-size: 0.9rem;
}

:where(html.pg-private-orcamentos-orcamento-02) .table-compact tbody tr {
  line-height: 1.2;
}

:where(html.pg-private-orcamentos-orcamento-02) .topo {
  display: flex;
  align-items: stretch;
  /* estica os elementos verticalmente */
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0;

}

:where(html.pg-private-orcamentos-orcamento-02) .logo {
  width: 150px;
  display: flex;
  align-items: center;

}

:where(html.pg-private-orcamentos-orcamento-02) .empresa-info {
  padding-left: 20px;
  flex-direction: column;
  justify-content: center;
}


:where(html.pg-private-orcamentos-orcamento-02) .titulo {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  color: #007bff;
  padding-top: 10px;
  margin-top: 10px;
}

:where(html.pg-private-orcamentos-orcamento-02) .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  padding: 20px;
  background: #fff;
  font-size: 14px;
  border-top: 1px solid #ccc;
  flex-wrap: wrap;
}

:where(html.pg-private-orcamentos-orcamento-02) .footer-left {
  flex: 1;
  max-width: 60%;
}

:where(html.pg-private-orcamentos-orcamento-02) .footer-right {
  text-align: right;
  max-width: 40%;
}

/* ─── private/orcamentos/orcamento-03 ─── */
/* escopo: pg-private-orcamentos-orcamento-03 */
:where(html.pg-private-orcamentos-orcamento-03) body { font-family: Arial, sans-serif; margin: 40px; color: #000; background: #f8f9fa; }
:where(html.pg-private-orcamentos-orcamento-03) .container { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
:where(html.pg-private-orcamentos-orcamento-03) .topo { display: flex; align-items: center; margin-bottom: 20px; }
:where(html.pg-private-orcamentos-orcamento-03) .logo { width: 150px; }
:where(html.pg-private-orcamentos-orcamento-03) .empresa-info { flex: 1; padding-left: 20px; }
:where(html.pg-private-orcamentos-orcamento-03) .empresa-info b { font-size: 16px; }
:where(html.pg-private-orcamentos-orcamento-03) .titulo { text-align: center; font-size: 22px; font-weight: bold; color: #007bff; border-top: 1px solid #ccc; padding-top: 10px; margin-top: 10px; }
:where(html.pg-private-orcamentos-orcamento-03) .linha-dados { display: flex; justify-content: space-between; margin-top: 10px; font-size: 14px; }
:where(html.pg-private-orcamentos-orcamento-03) .linha-dados span { margin-right: 10px; }
:where(html.pg-private-orcamentos-orcamento-03) .pagamento-info, :where(html.pg-private-orcamentos-orcamento-03) .cliente-info, :where(html.pg-private-orcamentos-orcamento-03) .observacoes, :where(html.pg-private-orcamentos-orcamento-03) .assinatura { margin-top: 20px; font-size: 14px; }
:where(html.pg-private-orcamentos-orcamento-03) .pagamento-info strong, :where(html.pg-private-orcamentos-orcamento-03) .cliente-info strong { display: inline-block; width: 220px; }
:where(html.pg-private-orcamentos-orcamento-03) table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px; }
:where(html.pg-private-orcamentos-orcamento-03) table, :where(html.pg-private-orcamentos-orcamento-03) th, :where(html.pg-private-orcamentos-orcamento-03) td { border: 1px solid #000; }
:where(html.pg-private-orcamentos-orcamento-03) th, :where(html.pg-private-orcamentos-orcamento-03) td { padding: 8px; text-align: left; }
:where(html.pg-private-orcamentos-orcamento-03) .resumo { margin-top: 20px; width: 50%; float: right; font-size: 14px; }
:where(html.pg-private-orcamentos-orcamento-03) .resumo td { border: none; padding: 5px 0; }

/* ═══════════════════════════════════════════════════════════════════════
   Classes utilitárias (fase 3): substituem os antigos style="..." das views
   ═══════════════════════════════════════════════════════════════════════

   Cada classe u-* reproduz um style="..." que existia em alguma view. O
   nome resume as declarações (u-c-38a16a-fs-20px = color #38a16a,
   font-size 20px); quando ficaria longo demais, vira um hash curto
   (u-1a473d4).

   Por que ":not(#_)": um style inline vence qualquer regra de classe do
   tema e das telas. O :not(#_) (um id que nunca existe) dá à classe peso
   de id, para ela continuar vencendo essas regras como o inline vencia.
   Continua perdendo para !important e para o que o JS escreve em
   el.style, igual ao inline.

   Ficaram no style="..." de propósito: display/visibility (o JS mostra e
   esconde lendo e trocando esse valor), valores que vêm do PHP e HTML
   montado dentro de <script>.
   ═══════════════════════════════════════════════════════════════════════ */
.u-0258890:not(#_) { position: absolute; z-index: 200; width: 100%; background: var(--gk-card-background); border: 1px solid var(--gk-border-color); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.15); max-height: 160px; overflow-y: auto; }
.u-09511aa:not(#_) { background: none; border: none; cursor: pointer; padding: 4px; color: #94a3b8; align-items: center; justify-content: center; }
.u-0aaf8b9:not(#_) { background: #fff3cd; border: 2px solid #ffc107; padding: 15px; margin: 20px 0; border-radius: 8px; }
.u-0fdc585:not(#_) { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); color: #fff; align-items: center; gap: 4px; }
.u-11fb959:not(#_) { flex-direction: column; gap: 0.75rem; height: 420px; overflow-y: auto; padding: 1.25rem; }
.u-1a473d4:not(#_) { background: #ffffff; bottom: -10px; left: 0; position: absolute; right: 0; top: -10px; z-index: 0; }
.u-1d8ea83:not(#_) { background: #ffffff; bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 0; }
.u-1e8dff2:not(#_) { height: 300px; background: var(--gk-tertiary-bg); }
.u-1edb423:not(#_) { background: #ffffff; overflow: hidden; padding: 60px 0; position: relative; }
.u-23f5ff6:not(#_) { background: white; border-radius: 8px; bottom: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); max-width: 300px; min-width: 280px; padding: 16px; right: 20px; }
.u-27593fd:not(#_) { stroke-dasharray: 139.989, 139.989; stroke-dashoffset: 139.989; transition: stroke-dashoffset 10ms linear; }
.u-27bda45:not(#_) { background: #f8f9fa; border-bottom: 1px solid #dee2e6; flex-shrink: 0; padding: 12px 16px; }
.u-2835f90:not(#_) { min-height: 140px; background: var(--gk-card-background); border-radius: 0 0 4px 4px; }
.u-2a1b1e4:not(#_) { color: #94a3b8; font-size: .7rem; font-weight: 700; letter-spacing: .08em; margin-bottom: 10px; text-transform: uppercase; }
.u-2de4b86:not(#_) { width: 60%; flex-direction: column; border-right: 1px solid var(--gk-border-color); background: var(--gk-card-background); position: relative; }
.u-2e09ef7:not(#_) { background: #f8f9fa; border-top: 1px solid #dee2e6; flex-shrink: 0; padding: 12px 16px; }
.u-2e72a9f:not(#_) { flex: 1; border: none; outline: none; font-size: 1rem; background: transparent; }
.u-319e113:not(#_) { min-height: 120px; background: var(--gk-card-background); border-radius: 0 0 4px 4px; }
.u-34fe053:not(#_) { border-bottom: 1px solid #f1f5f9; color: #94a3b8; font-size: .78rem; min-height: 28px; padding: 6px 18px; }
.u-391d185:not(#_) { background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 4px; padding: 1px 5px; }
.u-3a360c6:not(#_) { background: #ffffff; overflow: hidden; padding: 3rem; position: relative; }
.u-3c85053:not(#_) { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; padding: 6px 12px; border-radius: 6px; font-size: .85rem; text-decoration: none; flex-shrink: 0; }
.u-3fd91d0:not(#_) { align-items: center; background: #003ca4; box-shadow: 0 2px 8px rgba(0,0,0,.3); color: #fff; flex-shrink: 0; height: 56px; justify-content: space-between; padding: 0 16px 0 20px; }
.u-496550b:not(#_) { background: #dc3545; color: #fff; border-radius: 10px; padding: 0 5px; font-size: .68rem; font-weight: 700; }
.u-4b8e151:not(#_) { justify-content: space-between; font-size: .82rem; color: #dc3545; }
.u-517e3a6:not(#_) { font-size: .82rem; background: rgba(255,255,255,.15); border-radius: 6px; padding: 3px 10px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-5448661:not(#_) { min-height: 120px; background: var(--gk-card-background); }
.u-54bbad8:not(#_) { min-height: 150px; background: var(--gk-card-background); }
.u-5da6da6:not(#_) { background: #f8f9fa; padding: 20px; margin: 20px 0; border: 2px solid #dee2e6; border-radius: 8px; }
.u-649baa8:not(#_) { background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 5px; padding: 2px 8px; font-size: .7rem; color: #64748b; white-space: nowrap; }
.u-69d9678:not(#_) { background: var(--gk-card-background); }
.u-6b92b84:not(#_) { align-self: center; }
.u-72bc344:not(#_) { background-color: white; border-radius: 50%; cursor: pointer; height: 80px; object-fit: contain; width: 80px; }
.u-7e0d12d:not(#_) { padding: 14px 16px; border-top: 1px solid var(--gk-border-color); flex-shrink: 0; background: var(--gk-tertiary-bg); }
.u-807f3b8:not(#_) { gap: 10px; grid-template-columns: 1fr 1fr; }
.u-8876e7a:not(#_) { width: 40%; flex-direction: column; background: var(--gk-card-background); }
.u-887cfb9:not(#_) { position: absolute; z-index: 300; width: 100%; background: var(--gk-card-background); border: 1px solid var(--gk-border-color); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.15); max-height: 220px; overflow-y: auto; }
.u-901482e:not(#_) { align-self: self-end; }
.u-949ab27:not(#_) { margin-top: 6px; font-size: .85rem; color: var(--gk-secondary-color); }
.u-972a5a5:not(#_) { background: var(--gk-card-background); border-radius: 16px; width: 100%; max-width: 540px; box-shadow: 0 25px 60px rgba(0,0,0,.25); overflow: hidden; max-height: 90vh; flex-direction: column; }
.u-9b92a82:not(#_) { background: none; border: none; cursor: pointer; font-size: 1.2rem; color: #64748b; }
.u-9c39f32:not(#_) { background-color: var(--gk-card-background); text-align: -webkit-center; }
.u-a4acf69:not(#_) { border-radius: 8px; overflow: hidden; border: 1px solid #dee2e6; min-height: 320px; }
.u-ai-center-fsh-0-gap-6px:not(#_) { align-items: center; flex-shrink: 0; gap: 6px; }
.u-ai-center-gap-12px-mnw-0:not(#_) { align-items: center; gap: 12px; min-width: 0; }
.u-ai-center-gap-6px:not(#_) { align-items: center; gap: 6px; }
.u-ai-center-gap-8px:not(#_) { align-items: center; gap: 8px; }
.u-ai-center-gap-8px-mb-8px:not(#_) { align-items: center; gap: 8px; margin-bottom: 8px; }
.u-ai-center-h-30px-jc-center-w-30px:not(#_) { align-items: center; height: 30px; justify-content: center; width: 30px; }
.u-ai-center-h-36px-jc-center-w-36px:not(#_) { align-items: center; height: 36px; justify-content: center; width: 36px; }
.u-b90d561:not(#_) { background: var(--gk-card-background); border-radius: 16px; width: 100%; max-width: 640px; max-height: 70vh; flex-direction: column; box-shadow: 0 25px 60px rgba(0,0,0,.25); overflow: hidden; }
.u-bba8d09:not(#_) { color: #212529; font-size: 1.25rem; font-weight: 700; justify-content: space-between; margin-top: 4px; }
.u-bdb-1px-solid-ccc:not(#_) { border-bottom: 1px solid #ccc; }
.u-bdb-1px-solid-dee2e6-fsh-0-p-12px-16px:not(#_) { border-bottom: 1px solid #dee2e6; flex-shrink: 0; padding: 12px 16px; }
.u-bdr-5px-solid-ccc:not(#_) { border-right: 5px solid #ccc; }
.u-bdt-1px-solid-dee2e6-fsh-0-p-12px-16px:not(#_) { border-top: 1px solid #dee2e6; flex-shrink: 0; padding: 12px 16px; }
.u-bdt-1px-solid-dee2e6-pt-8px:not(#_) { border-top: 1px solid #dee2e6; padding-top: 8px; }
.u-bg-eef2ff-h-46px-w-46px:not(#_) { background: #eef2ff; height: 46px; width: 46px; }
.u-bg-fff:not(#_) { background: #fff; }
.u-bg-ffffff-ov-hidden-pos-relative:not(#_) { background: #ffffff; overflow: hidden; position: relative; }
.u-bg-var-pr-corborda-h-2px-m-6px-0:not(#_) { background: var(--pr-corBorda); height: 2px; margin: 6px 0; }
.u-bg-white:not(#_) { background: white; }
.u-bg-white-bd-1px-solid-dee2e6-p-10px:not(#_) { background: white; border: 1px solid #dee2e6; padding: 10px; }
.u-bgc-003ca4:not(#_) { background-color: #003ca4; }
.u-bgc-0047c8:not(#_) { background-color: #0047c8; }
.u-bgc-1a1a33-imp:not(#_) { background-color: #1a1a33 !important; }
.u-bgc-4299e1-c-white:not(#_) { background-color: #4299e1; color: white; }
.u-bgc-white-h-80px-of-contain-w-80px:not(#_) { background-color: white; height: 80px; object-fit: contain; width: 80px; }
.u-br-4px-h-140px-of-cover-w-100px:not(#_) { border-radius: 4px; height: 140px; object-fit: cover; width: 100px; }
.u-c-003ca6:not(#_) { color: #003ca6; }
.u-c-0047c8-imp-fs-24px:not(#_) { color: #0047c8 !important; font-size: 24px; }
.u-c-0d6efd:not(#_) { color: #0d6efd; }
.u-c-27ae60:not(#_) { color: #27ae60; }
.u-c-374151-fs-_88rem:not(#_) { color: #374151; font-size: .88rem; }
.u-c-38a16a-fs-20px:not(#_) { color: #38a16a; font-size: 20px; }
.u-c-4299e1-fs-2_5rem:not(#_) { color: #4299e1; font-size: 2.5rem; }
.u-c-4299e1-fs-2rem:not(#_) { color: #4299e1; font-size: 2rem; }
.u-c-48bb78-fs-2rem:not(#_) { color: #48bb78; font-size: 2rem; }
.u-c-64748b-fs-12px-mt-8px:not(#_) { color: #64748b; font-size: 12px; margin-top: 8px; }
.u-c-64748b-fw-400:not(#_) { color: #64748b; font-weight: 400; }
.u-c-6c757d:not(#_) { color: #6c757d; }
.u-c-6c757d-fs-_82rem-jc-space-between:not(#_) { color: #6c757d; font-size: .82rem; justify-content: space-between; }
.u-c-6c757d-fs-_88rem:not(#_) { color: #6c757d; font-size: .88rem; }
.u-c-718096-fs-2rem:not(#_) { color: #718096; font-size: 2rem; }
.u-c-73df38-imp-fs-24px:not(#_) { color: #73df38 !important; font-size: 24px; }
.u-c-754ffe-imp-fs-34px:not(#_) { color: #754ffe !important; font-size: 34px; }
.u-c-82e42f:not(#_) { color: #82e42f; }
.u-c-856404:not(#_) { color: #856404; }
.u-c-94a3b8-fs-2_5rem:not(#_) { color: #94a3b8; font-size: 2.5rem; }
.u-c-94a3b8-fs-3rem:not(#_) { color: #94a3b8; font-size: 3rem; }
.u-c-94a3b8-fsh-0-fs-1_1rem:not(#_) { color: #94a3b8; flex-shrink: 0; font-size: 1.1rem; }
.u-c-9facbf:not(#_) { color: #9facbf; }
.u-c-adb5bd-fs-2rem:not(#_) { color: #adb5bd; font-size: 2rem; }
.u-c-cbd5e0-fs-4rem:not(#_) { color: #cbd5e0; font-size: 4rem; }
.u-c-e67e22:not(#_) { color: #e67e22; }
.u-c-ed8936-fs-2rem:not(#_) { color: #ed8936; font-size: 2rem; }
.u-c-fff:not(#_) { color: #fff; }
.u-c-fff-fs-18px:not(#_) { color: #fff; font-size: 18px; }
.u-c-ffffff:not(#_) { color: #ffffff; }
.u-c-rgba-255-255-255-_75-fs-15px:not(#_) { color: rgba(255,255,255,.75); font-size: 15px; }
.u-c-var-pr-cortexto-fs-11px:not(#_) { color: var(--pr-corTexto); font-size: 11px; }
.u-c-white:not(#_) { color: white; }
.u-c39c78e:not(#_) { flex-direction: column; gap: 0.75rem; height: 450px; overflow-y: auto; padding: 1.25rem; }
.u-ca7f529:not(#_) { font-size: .8rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-cee1312:not(#_) { position: fixed; inset: 0; z-index: 99998; background: rgba(0,0,0,.55); align-items: center; justify-content: center; transition: opacity .2s; }
.u-cf2624c:not(#_) { align-items: center; border-bottom: 1px solid #e2e8f0; gap: 10px; padding: 14px 18px; }
.u-cf2bd10:not(#_) { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff; }
.u-cur-pointer:not(#_) { cursor: pointer; }
.u-cur-pointer-tr-border-color-_2s:not(#_) { cursor: pointer; transition: border-color .2s; }
.u-dc96670:not(#_) { border-top: 1px solid #f1f5f9; color: #94a3b8; font-size: .72rem; gap: 16px; padding: 8px 18px; }
.u-dd16f91:not(#_) { background-color: #ffffff; box-shadow: 0 1px 3px rgba(17, 24, 39, 0.09); }
.u-eac3898:not(#_) { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.55); align-items: flex-start; justify-content: center; padding-top: 80px; transition: opacity .2s; }
.u-ebe1801:not(#_) { align-items: center; border-bottom: 1px solid #e2e8f0; justify-content: space-between; padding: 18px 20px; }
.u-efb05fb:not(#_) { align-items: center; border-bottom: 1px solid #f8fafc; justify-content: space-between; padding: 7px 0; }
.u-f80638e:not(#_) { clear: both; }
.u-f8e3d81:not(#_) { align-items: center; background: #fff3cd; border-bottom: 2px solid #ffc107; font-size: .875rem; justify-content: space-between; padding: 8px 20px; position: sticky; top: 0; z-index: 9999; }
.u-fec3c22:not(#_) { align-items: center; background: #fff3cd; border-bottom: 2px solid #ffc107; font-size: .8rem; justify-content: space-between; padding: 8px 16px; position: sticky; top: 0; z-index: 9999; }
.u-ff-arial:not(#_) { font-family: Arial; }
.u-ff-arial-sans-serif-p-40px:not(#_) { font-family: Arial, sans-serif; padding: 40px; }
.u-ff4e6ff:not(#_) { background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 5px; padding: 2px 8px; font-size: .75rem; color: #374151; }
.u-fs-0_7rem:not(#_) { font-size: 0.7rem; }
.u-fs-0_8rem:not(#_) { font-size: 0.8rem; }
.u-fs-10px:not(#_) { font-size: 10px; }
.u-fs-11px-mb-4px-op-_7-p-3px-8px:not(#_) { font-size: 11px; margin-bottom: 4px; opacity: .7; padding: 3px 8px; }
.u-fs-11px-mt-4px-op-_8:not(#_) { font-size: 11px; margin-top: 4px; opacity: .8; }
.u-fs-11px-op-_8:not(#_) { font-size: 11px; opacity: .8; }
.u-fs-12px-c-dc3545-mt-4px:not(#_) { font-size: 12px; color: #dc3545; margin-top: 4px; }
.u-fs-12px-fw-600-mb-6px:not(#_) { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.u-fs-12px-ta-right:not(#_) { font-size: 12px; text-align: right; }
.u-fs-13px:not(#_) { font-size: 13px; }
.u-fs-13px-fw-700-ls-_5px-mb-12px:not(#_) { font-size: 13px; font-weight: 700; letter-spacing: .5px; margin-bottom: 12px; }
.u-fs-13px-mxh-160px-mnh-80px-oy-auto:not(#_) { font-size: 13px; max-height: 160px; min-height: 80px; overflow-y: auto; }
.u-fs-16px:not(#_) { font-size: 16px; }
.u-fs-16px-h-50px:not(#_) { font-size: 16px; height: 50px; }
.u-fs-18px:not(#_) { font-size: 18px; }
.u-fs-1_4rem:not(#_) { font-size: 1.4rem; }
.u-fs-1_5rem:not(#_) { font-size: 1.5rem; }
.u-fs-1rem:not(#_) { font-size: 1rem; }
.u-fs-1rem-fw-600-m-0:not(#_) { font-size: 1rem; font-weight: 600; margin: 0; }
.u-fs-1rem-fw-700-ls-_5px-ws-nowrap:not(#_) { font-size: 1rem; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
.u-fs-1rem-mr-0_5rem:not(#_) { font-size: 1rem; margin-right: 0.5rem; }
.u-fs-1rem-p-10px-0:not(#_) { font-size: 1rem; padding: 10px 0; }
.u-fs-1rem-p-10px-12px:not(#_) { font-size: 1rem; padding: 10px 12px; }
.u-fs-24px:not(#_) { font-size: 24px; }
.u-fs-2_2rem-mb-8px-op-_4:not(#_) { font-size: 2.2rem; margin-bottom: 8px; opacity: .4; }
.u-fs-2_5rem:not(#_) { font-size: 2.5rem; }
.u-fs-32px-mb-8px:not(#_) { font-size: 32px; margin-bottom: 8px; }
.u-fs-3rem:not(#_) { font-size: 3rem; }
.u-fs-3rem-op-_3:not(#_) { font-size: 3rem; opacity: .3; }
.u-fs-40px:not(#_) { font-size: 40px; }
.u-fs-50px-h-100px-w-100px:not(#_) { font-size: 50px; height: 100px; width: 100px; }
.u-fs-_6rem:not(#_) { font-size: .6rem; }
.u-fs-_72rem:not(#_) { font-size: .72rem; }
.u-fs-_75rem:not(#_) { font-size: .75rem; }
.u-fs-_7rem:not(#_) { font-size: .7rem; }
.u-fs-_875rem:not(#_) { font-size: .875rem; }
.u-fs-_8rem:not(#_) { font-size: .8rem; }
.u-fs-_95rem:not(#_) { font-size: .95rem; }
.u-fs-_9rem:not(#_) { font-size: .9rem; }
.u-fwr-wrap-gap-6px-mb-8px:not(#_) { flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.u-fx-1-1-auto-mnh-0-oy-auto-p-20px:not(#_) { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px; }
.u-fx-1-ov-hidden:not(#_) { flex: 1; overflow: hidden; }
.u-fx-1-oy-auto:not(#_) { flex: 1; overflow-y: auto; }
.u-fx-1-oy-auto-p-12px-16px:not(#_) { flex: 1; overflow-y: auto; padding: 12px 16px; }
.u-gap-4px:not(#_) { gap: 4px; }
.u-h-100px-of-cover-w-100px:not(#_) { height: 100px; object-fit: cover; width: 100px; }
.u-h-140px-of-cover-w-100px:not(#_) { height: 140px; object-fit: cover; width: 100px; }
.u-h-20px:not(#_) { height: 20px; }
.u-h-25px:not(#_) { height: 25px; }
.u-h-2rem:not(#_) { height: 2rem; }
.u-h-300px-pos-relative:not(#_) { height: 300px; position: relative; }
.u-h-32px-w-32px:not(#_) { height: 32px; width: 32px; }
.u-h-3rem:not(#_) { height: 3rem; }
.u-h-40px-w-40px:not(#_) { height: 40px; width: 40px; }
.u-h-60px-w-50px:not(#_) { height: 60px; width: 50px; }
.u-h-8px:not(#_) { height: 8px; }
.u-h-64px-of-contain-w-64px:not(#_) { height: 64px; object-fit: contain; width: 64px; }
.u-h-6rem:not(#_) { height: 6rem; }
.u-h-80px-of-contain-w-80px:not(#_) { height: 80px; object-fit: contain; width: 80px; }
.u-h-_7rem-w-_7rem:not(#_) { height: .7rem; width: .7rem; }
.u-lh-1:not(#_) { line-height: 1; }
.u-lh-1_4:not(#_) { line-height: 1.4; }
.u-m-10px-auto-w-50pct:not(#_) { margin: 10px auto; width: 50%; }
.u-mb-10px-ta-center:not(#_) { margin-bottom: 10px; text-align: center; }
.u-mb-13px:not(#_) { margin-bottom: 13px; }
.u-mb-15px:not(#_) { margin-bottom: 15px; }
.u-mb-16px:not(#_) { margin-bottom: 16px; }
.u-mb-24px:not(#_) { margin-bottom: 24px; }
.u-mb-30px-ta-center:not(#_) { margin-bottom: 30px; text-align: center; }
.u-ml-0px:not(#_) { margin-left: 0px; }
.u-ml-auto-w-fit-content:not(#_) { margin-left: auto; width: fit-content; }
.u-mnh-100vh:not(#_) { min-height: 100vh; }
.u-mnw-0:not(#_) { min-width: 0; }
.u-mnw-36px:not(#_) { min-width: 36px; }
.u-mr-0_5rem:not(#_) { margin-right: 0.5rem; }
.u-mr-0_5rem-va-middle:not(#_) { margin-right: 0.5rem; vertical-align: middle; }
.u-mr-3px-w-6px:not(#_) { margin-right: 3px; width: 6px; }
.u-mt-0_5rem-p-1rem-ta-start:not(#_) { margin-top: 0.5rem; padding: 1rem; text-align: start; }
.u-mt-8px:not(#_) { margin-top: 8px; }
.u-mxh-250px-oy-auto-w-300px:not(#_) { max-height: 250px; overflow-y: auto; width: 300px; }
.u-mxh-300px:not(#_) { max-height: 300px; }
.u-mxh-360px:not(#_) { max-height: 360px; }
.u-mxh-420px-oy-auto:not(#_) { max-height: 420px; overflow-y: auto; }
.u-mxh-75vh-oy-auto:not(#_) { max-height: 75vh; overflow-y: auto; }
.u-mxh-calc-100vh-180px-oy-auto:not(#_) { max-height: calc(100vh - 180px); overflow-y: auto; }
.u-mxw-100pct:not(#_) { max-width: 100%; }
.u-mxw-220px:not(#_) { max-width: 220px; }
.u-mxw-250px:not(#_) { max-width: 250px; }
.u-mxw-400px:not(#_) { max-width: 400px; }
.u-mxw-520px-w-100pct:not(#_) { max-width: 520px; width: 100%; }
.u-mxw-700px:not(#_) { max-width: 700px; }
.u-mxw-780px:not(#_) { max-width: 780px; }
.u-mxw-95vw-w-360px:not(#_) { max-width: 95vw; width: 360px; }
.u-ox-hidden:not(#_) { overflow-x: hidden; }
.u-oy-auto:not(#_) { overflow-y: auto; }
.u-p-0:not(#_) { padding: 0; }
.u-p-1_2rem:not(#_) { padding: 1.2rem; }
.u-p-20px:not(#_) { padding: 20px; }
.u-p-40px:not(#_) { padding: 40px; }
.u-p-_3rem-_45rem:not(#_) { padding: .3rem .45rem; }
.u-p-_6rem-_9rem:not(#_) { padding: .6rem .9rem; }
.u-pb-20px:not(#_) { padding-bottom: 20px; }
.u-pl-0:not(#_) { padding-left: 0; }
.u-pl-0px-pr-0px-ta-webkit-center:not(#_) { padding-left: 0px; padding-right: 0px; text-align: -webkit-center; }
.u-pl-1_2rem-pr-1_2rem:not(#_) { padding-left: 1.2rem; padding-right: 1.2rem; }
.u-pos-relative:not(#_) { position: relative; }
.u-pos-relative-z-1:not(#_) { position: relative; z-index: 1; }
.u-pt-0px:not(#_) { padding-top: 0px; }
.u-ta-center:not(#_) { text-align: center; }
.u-ta-left:not(#_) { text-align: left; }
.u-top-20px:not(#_) { top: 20px; }
.u-top-80px:not(#_) { top: 80px; }
.u-va-middle:not(#_) { vertical-align: middle; }
.u-w-0pct:not(#_) { width: 0%; }
.u-w-100px:not(#_) { width: 100px; }
.u-w-110px:not(#_) { width: 110px; }
.u-w-120px:not(#_) { width: 120px; }
.u-w-140px:not(#_) { width: 140px; }
.u-w-2rem:not(#_) { width: 2rem; }
.u-w-150px:not(#_) { width: 150px; }
.u-w-170px:not(#_) { width: 170px; }
.u-w-180px:not(#_) { width: 180px; }
.u-w-220px:not(#_) { width: 220px; }
.u-w-250px:not(#_) { width: 250px; }
.u-w-34px:not(#_) { width: 34px; }
.u-w-3rem:not(#_) { width: 3rem; }
.u-w-40px:not(#_) { width: 40px; }
.u-w-55px:not(#_) { width: 55px; }
.u-w-80px:not(#_) { width: 80px; }
.u-w-90px:not(#_) { width: 90px; }
.u-ws-nowrap:not(#_) { white-space: nowrap; }
.u-ws-pre-wrap:not(#_) { white-space: pre-wrap; }
.u-ws-pre-wrap-wb-break-all:not(#_) { white-space: pre-wrap; word-break: break-all; }
.u-z-11000:not(#_) { z-index: 11000; }

/* ═══════════════════════════════════════════════════════════════════════
   Tema escuro: cores fixas do CSS acima
   ═══════════════════════════════════════════════════════════════════════

   O theme.min.css já escurece os componentes do Bootstrap pelo
   data-bs-theme="dark", mas o CSS próprio das telas e as classes u-* têm
   cores escritas à mão (#fff, #f8f9fa, texto #333, borda #dee2e6...), que
   ficavam claras no tema escuro. Esta seção repete essas regras só com a
   cor trocada, e vale apenas com tema escuro (html.tui-escuro):

     fundo claro neutro   -> superfície do tema (cor do card)
     fundo claro colorido -> a mesma cor, bem diluída na superfície
     texto escuro         -> texto do tema
     borda clara          -> borda do tema

   Foi gerada a partir das cores deste arquivo (2026-09-29). Os documentos
   (recibos, orçamentos) ficam de fora de propósito: representam papel.
   CSS NOVO: em vez de cor fixa, usar as variáveis do tema
   (var(--gk-card-background), var(--gk-body-color), var(--gk-border-color)...;
   --gk-card-bg só existe dentro de .card),
   que já mudam sozinhas no tema escuro.
   ═══════════════════════════════════════════════════════════════════════ */
:where(html.tui-escuro) {
    --tui-escuro-superficie: var(--tui-card-bg, #1e293b);
    --tui-escuro-texto: var(--tui-text, #e2e8f0);
    --tui-escuro-borda: var(--tui-border, #334155);
}

/* style="..." que sobraram no HTML (e no HTML montado pelo JS) com fundo branco. */
:where(html.tui-escuro) [style*="background: #fff"],
:where(html.tui-escuro) [style*="background:#fff"],
:where(html.tui-escuro) [style*="background-color: #fff"],
:where(html.tui-escuro) [style*="background-color:#fff"],
:where(html.tui-escuro) [style*="background: white"],
:where(html.tui-escuro) [style*="background:white"],
:where(html.tui-escuro) [style*="background-color: white"],
:where(html.tui-escuro) [style*="background-color:white"] {
    background-color: var(--tui-escuro-superficie) !important;
}

:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .bg-badge { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .bg-result-item { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .bg-result-item:hover,
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .bg-result-item.selected { background-color: var(--tui-escuro-superficie) !important; color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .bg-shortcuts-hint kbd { background-color: var(--tui-escuro-superficie) !important; border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .bg-spinner { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) #loading-overlay { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .spinner { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .modal-novidades { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .news-content h3 { color: color-mix(in srgb, rgb(45, 62, 80) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .news-description strong { color: color-mix(in srgb, rgb(45, 62, 80) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .news-description a { color: color-mix(in srgb, rgb(0, 60, 164) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .news-description h1,
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .news-description h2,
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .news-description h3 { color: color-mix(in srgb, rgb(45, 62, 80) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .gif-placeholder { background-color: color-mix(in srgb, rgb(241, 245, 254) 22%, var(--tui-escuro-superficie)) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .slider-indicator { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .slider-btn { color: color-mix(in srgb, rgb(0, 60, 164) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .slider-btn:hover { background-color: color-mix(in srgb, rgb(241, 245, 254) 22%, var(--tui-escuro-superficie)) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .modal-footer-novidades { background-color: var(--tui-escuro-superficie) !important; border-top-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .btn-secondary-novidades { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv) .btn-secondary-novidades:hover { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv, html.tui-escuro.tpl-public, html.tui-escuro.tpl-mobile) .modern-notification { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv, html.tui-escuro.tpl-public) .modern-notification-title { color: color-mix(in srgb, rgb(44, 62, 80) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-pdv, html.tui-escuro.tpl-public) .modern-notification-close:hover { color: color-mix(in srgb, rgb(44, 62, 80) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.tpl-mobile) #loading-overlay { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.tpl-mobile) .spinner { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.tpl-mobile) .mobile-nav-logo { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.tpl-mobile) .mobile-nav-card:active { background-color: color-mix(in srgb, rgb(233, 240, 255) 22%, var(--tui-escuro-superficie)) !important; }
:where(html.tui-escuro.tpl-mobile) .modal-novidades { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.tpl-mobile) .news-content h3 { color: color-mix(in srgb, rgb(45, 62, 80) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.tpl-mobile) .news-description strong { color: color-mix(in srgb, rgb(45, 62, 80) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.tpl-mobile) .news-description a { color: color-mix(in srgb, rgb(0, 60, 164) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.tpl-mobile) .news-description h1,
:where(html.tui-escuro.tpl-mobile) .news-description h2,
:where(html.tui-escuro.tpl-mobile) .news-description h3 { color: color-mix(in srgb, rgb(45, 62, 80) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.tpl-mobile) .gif-placeholder { background-color: color-mix(in srgb, rgb(241, 245, 254) 22%, var(--tui-escuro-superficie)) !important; }
:where(html.tui-escuro.tpl-mobile) .slider-indicator { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.tpl-mobile) .slider-btn { color: color-mix(in srgb, rgb(0, 60, 164) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.tpl-mobile) .slider-btn:hover { background-color: color-mix(in srgb, rgb(241, 245, 254) 22%, var(--tui-escuro-superficie)) !important; }
:where(html.tui-escuro.tpl-mobile) .modal-footer-novidades { background-color: var(--tui-escuro-superficie) !important; border-top-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.tpl-mobile) .btn-secondary-novidades:hover { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.tpl-mobile) .status-active { background-color: color-mix(in srgb, rgb(212, 237, 218) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(21, 87, 36) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.tpl-mobile) .status-inactive { background-color: color-mix(in srgb, rgb(248, 215, 218) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(114, 28, 36) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.tpl-private) #calcPainel { background-color: var(--tui-escuro-superficie) !important; border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.tpl-private) #calcBarra { background-color: var(--tui-escuro-superficie) !important; border-bottom-color: var(--tui-escuro-borda) !important; color: color-mix(in srgb, rgb(51, 65, 85) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.tpl-private) #calcBarra button:hover { background-color: color-mix(in srgb, rgb(226, 232, 240) 22%, var(--tui-escuro-superficie)) !important; color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.tpl-private) #calcVisor { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.tpl-private) #calcTeclas { background-color: color-mix(in srgb, rgb(226, 232, 240) 22%, var(--tui-escuro-superficie)) !important; border-top-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.tpl-private) #calcTeclas button { background-color: var(--tui-escuro-superficie) !important; color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.tpl-private) #calcTeclas button:hover { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.tpl-private) #calcTeclas button:active { background-color: color-mix(in srgb, rgb(226, 232, 240) 22%, var(--tui-escuro-superficie)) !important; }
:where(html.tui-escuro.tpl-private) #calcTeclas .calc-fn { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.tpl-private) #calcTeclas .calc-op { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.tpl-private) #calcHistorico { background-color: var(--tui-escuro-superficie) !important; border-top-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.tpl-private) .calc-hist-item { border-bottom-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.tpl-private) .calc-hist-item:hover { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.tpl-private) .calc-hist-res { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-mobile) .chat-bubble-text { background-color: var(--tui-escuro-superficie) !important; color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-mobile) .chat-bubble-text::after { border-left-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-mobile) .chat-window { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-mobile) .chat-window-messages { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-mobile) .message.received .message-bubble { background-color: var(--tui-escuro-superficie) !important; color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-mobile) .chat-window-input { background-color: var(--tui-escuro-superficie) !important; border-top-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-mobile) .input-container input { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-mobile) .suggestion-btn { background-color: var(--tui-escuro-superficie) !important; border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-mobile) .chat-window-messages::-webkit-scrollbar-track { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.tpl-private, html.tui-escuro.tpl-mobile) .chat-window-messages::-webkit-scrollbar-thumb { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-calculadora-index) .group-text h4 { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-calendario-eventos-index) .fc-toolbar-title { color: color-mix(in srgb, rgb(44, 62, 80) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-calendario-eventos-index) .fc-daygrid-day:hover { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-calendario-eventos-index) .fc-daygrid-day-number { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-calendario-eventos-index) .fc-daygrid-event-dot { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-calendario-eventos-index) .fc-list-event:hover td { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-calendario-eventos-index) .mob-day.is-selected .mob-day-dot { background-color: var(--tui-escuro-texto) !important; }
/* Faixa de dias do mobile: o azul #0d6efd (Bootstrap, não o do tema) ficava
   um bloco forte no escuro. O selecionado vira a primária do tema diluída na
   superfície; o número de hoje, um azul claro legível sobre o escuro. */
:where(html.tui-escuro.pg-private-calendario-eventos-index) .mob-day.is-selected {
    background-color: color-mix(in srgb, var(--gk-primary) 45%, var(--tui-escuro-superficie)) !important;
    border-color: color-mix(in srgb, var(--gk-primary) 70%, var(--tui-escuro-texto)) !important;
}
:where(html.tui-escuro.pg-private-calendario-eventos-index) .mob-day.is-today { border-color: color-mix(in srgb, var(--gk-primary) 55%, transparent) !important; }
:where(html.tui-escuro.pg-private-calendario-eventos-index) .mob-day.is-today .mob-day-num,
:where(html.tui-escuro.pg-private-calendario-eventos-index) .fc-day-today .fc-daygrid-day-number {
    color: color-mix(in srgb, #0d6efd 55%, var(--tui-escuro-texto)) !important;
}
:where(html.tui-escuro.pg-private-calendario-eventos-index) .mob-day.is-selected .mob-day-num { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-calendario-tipos-index) .group-text h4 { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-categorias-produtos-index) .status-ativo { background-color: color-mix(in srgb, rgb(209, 231, 221) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(15, 81, 50) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-categorias-produtos-index) .status-inativo { background-color: color-mix(in srgb, rgb(248, 215, 218) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(132, 32, 41) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-categorias-produtos-index) .categoria-img-mobile { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-categorias-produtos-index) .group-text h4 { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-categorias-produtos-index) .toggle-btn button.active { background-color: var(--tui-escuro-superficie) !important; color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-categorias-servicos-index) .status-ativo { background-color: color-mix(in srgb, rgb(209, 231, 221) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(15, 81, 50) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-categorias-servicos-index) .status-inativo { background-color: color-mix(in srgb, rgb(248, 215, 218) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(132, 32, 41) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-categorias-servicos-index) .categoria-img-mobile { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-categorias-servicos-index) .group-text h4 { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-categorias-servicos-index) .toggle-btn button.active { background-color: var(--tui-escuro-superficie) !important; color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-chat-index) .chat-messages { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-chat-index) .message.received .message-bubble { background-color: var(--tui-escuro-superficie) !important; color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-chat-index) .chat-input-container { background-color: var(--tui-escuro-superficie) !important; border-top-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-chat-index) .chat-input { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-clientes-index) #sugestoesCliente { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-clientes-index) .group-text h4 { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-clientes-index) .toggle-btn button.active { background-color: var(--tui-escuro-superficie) !important; color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-clientes-index) .btn-toggle-values.active { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-clientes-index) .btn-toggle-values.active { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-configuracoes-empresa) #logoPreview { background-color: var(--tui-escuro-superficie) !important; border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-configuracoes-personalizar-recibo) #preview-frame-wrapper { background-color: var(--tui-escuro-superficie) !important; border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-configuracoes-personalizar-recibo) .config-section { border-bottom-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-configuracoes-personalizar-recibo) .color-row input[type=color] { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-configuracoes-temas) .theme-option .btn { background-color: var(--tui-escuro-superficie) !important; border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-configuracoes-temas) .theme-name { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-configuracoes-temas) .signature-preview { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-configuracoes-temas) .lightbox img { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-empresas-index) .status-ativa { background-color: color-mix(in srgb, rgb(209, 231, 221) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(15, 81, 50) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-empresas-index) .status-desativada { background-color: color-mix(in srgb, rgb(248, 215, 218) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(132, 32, 41) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-empresas-ver) .avatar-cor { background-color: var(--tui-escuro-superficie) !important; color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-estoque-cadastrar, html.tui-escuro.pg-private-estoque-editar) #camera-container .border { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-estoque-cadastrar, html.tui-escuro.pg-private-estoque-editar) .camera-loading { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-estoque-cadastrar, html.tui-escuro.pg-private-estoque-editar) .camera-status { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-estoque-cadastrar, html.tui-escuro.pg-private-estoque-editar) .btn-loading::after { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-estoque-cadastrar, html.tui-escuro.pg-private-estoque-editar) .camera-modal { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-estoque-cadastrar, html.tui-escuro.pg-private-estoque-editar) .camera-header { border-bottom-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-estoque-cadastrar, html.tui-escuro.pg-private-estoque-editar) .camera-title { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-estoque-cadastrar, html.tui-escuro.pg-private-estoque-editar) .btn-fechar-camera { background-color: var(--tui-escuro-superficie) !important; border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-estoque-cadastrar, html.tui-escuro.pg-private-estoque-editar) .btn-fechar-camera:hover { background-color: var(--tui-escuro-superficie) !important; color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-estoque-cadastrar, html.tui-escuro.pg-private-estoque-editar) .camera-status { background-color: var(--tui-escuro-superficie) !important; border-top-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-estoque-cadastrar, html.tui-escuro.pg-private-estoque-editar) .camera-footer { background-color: var(--tui-escuro-superficie) !important; border-top-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-estoque-cadastrar, html.tui-escuro.pg-private-estoque-editar) .camera-loading { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-estoque-cadastrar, html.tui-escuro.pg-private-estoque-editar) .camera-modal { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-estoque-compras-index) .status-pendente { background-color: color-mix(in srgb, rgb(255, 243, 205) 22%, var(--tui-escuro-superficie)) !important; }
:where(html.tui-escuro.pg-private-estoque-compras-index) .status-recebido { background-color: color-mix(in srgb, rgb(209, 231, 221) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(15, 81, 50) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-estoque-compras-index) .pedido-img-mobile { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-estoque-compras-index) .group-text h4 { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-estoque-index) .status-ativo { background-color: color-mix(in srgb, rgb(209, 231, 221) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(15, 81, 50) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-estoque-index) .status-inativo { background-color: color-mix(in srgb, rgb(248, 215, 218) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(132, 32, 41) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-estoque-index) .produto-img-mobile { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-estoque-index) .group-text h4 { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-estoque-index) .toggle-btn button.active { background-color: var(--tui-escuro-superficie) !important; color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-financeiro-despesas) .finance-table tr:not(:last-child) td { border-bottom-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-fornecedores-index) .status-ativo { background-color: color-mix(in srgb, rgb(209, 231, 221) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(15, 81, 50) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-fornecedores-index) .status-desabilitado { background-color: color-mix(in srgb, rgb(248, 215, 218) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(132, 32, 41) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-fornecedores-index) .fornecedor-img-mobile { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-fornecedores-index) .group-text h4 { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-funcionarios-index) .status-ativo { background-color: color-mix(in srgb, rgb(209, 231, 221) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(15, 81, 50) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-funcionarios-index) .status-inativo { background-color: color-mix(in srgb, rgb(248, 215, 218) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(132, 32, 41) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-insumos-index) .status-ativo { background-color: color-mix(in srgb, rgb(209, 231, 221) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(15, 81, 50) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-insumos-index) .status-inativo { background-color: color-mix(in srgb, rgb(248, 215, 218) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(132, 32, 41) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-insumos-index) .insumo-img-mobile { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-insumos-index) .group-text h4 { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-nfe-index) .nfe-badge-1 { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-nfe-index) .nfe-table tr:not(:last-child) td { border-bottom-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-pagamento-index) .step-icon { color: color-mix(in srgb, rgb(0, 81, 216) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-pedidos-editar) #sugestoesServico { background-color: var(--tui-escuro-superficie) !important; border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-pedidos-editar) .sugestao-servico:hover,
:where(html.tui-escuro.pg-private-pedidos-editar) .sugestao-servico.active { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-pedidos-index, html.tui-escuro.pg-private-pedidos-orcamentos) #sugestoesCliente { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-pedidos-index) #modalPedidoAudio .pv-passos li { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-pedidos-pdv) .pdv-catalog-overlay { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-pedidos-pdv) #pdvPainelAtalhos kbd { background-color: var(--tui-escuro-superficie) !important; border-color: var(--tui-escuro-borda) !important; color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-pedidos-pdv) #pdvPainelAtalhos .pdv-atalho-linha { border-bottom-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-pedidos-recorrentes-index) .recorrente-badge-ativo { background-color: color-mix(in srgb, rgb(209, 250, 229) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(6, 95, 70) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-pedidos-recorrentes-index) .recorrente-badge-inativo { background-color: color-mix(in srgb, rgb(254, 226, 226) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(153, 27, 27) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-pedidos-status-index) .bg-warning { background-color: color-mix(in srgb, rgb(255, 243, 205) 22%, var(--tui-escuro-superficie)) !important; }
:where(html.tui-escuro.pg-private-pedidos-status-index) .bg-success { background-color: color-mix(in srgb, rgb(209, 231, 221) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(15, 81, 50) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-pedidos-status-index) .bg-info { background-color: color-mix(in srgb, rgb(207, 244, 252) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(5, 81, 96) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-pedidos-status-index) .status-icon-mobile { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-pedidos-status-index) .group-text h4 { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-pedidos-visualizar) .tabela-itens-pedido .img-thumb-placeholder { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-pesquisa-satisfacao-modelo-form) .preview-pesquisa h6 { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-pesquisa-satisfacao-modelo-form) .preview-pesquisa textarea,
:where(html.tui-escuro.pg-private-pesquisa-satisfacao-modelo-form) .preview-pesquisa .form-control { background-color: var(--tui-escuro-superficie) !important; color: var(--tui-escuro-texto) !important; border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-planos-index) .status-ativo { background-color: color-mix(in srgb, rgb(209, 231, 221) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(15, 81, 50) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-planos-index) .status-desativado { background-color: color-mix(in srgb, rgb(248, 215, 218) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(132, 32, 41) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-planos-trocar) .plano-card.selecionado { background: var(--tui-escuro-superficie) !important; }
@media print { :where(html.tui-escuro.pg-private-relatorios-index) .card-header { background-color: var(--tui-escuro-superficie) !important; } }
@media print { :where(html.tui-escuro.pg-private-rh-folha-ver) #holerite { border-color: var(--tui-escuro-borda) !important; } }
:where(html.tui-escuro.pg-private-seguranca-2fa-ativar) .code-digit { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-servicos-index) .status-ativo { background-color: color-mix(in srgb, rgb(209, 231, 221) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(15, 81, 50) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-servicos-index) .status-inativo { background-color: color-mix(in srgb, rgb(248, 215, 218) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(132, 32, 41) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-servicos-index) .servico-img-mobile { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-servicos-index) .group-text h4 { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-setup-concluido) .step-icon { color: color-mix(in srgb, rgb(0, 81, 216) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-setup-concluido) .setup-footer { border-top-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-setup-concluido) .progress { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-setup-index) .step-icon { color: color-mix(in srgb, rgb(0, 81, 216) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-setup-index) .setup-footer { border-top-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-setup-index) .progress { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-setup-index) .mode-card { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-setup-index) .mode-icon { color: color-mix(in srgb, rgb(0, 81, 216) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-setup-index) .lightbox img { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-private-tarefas-index) .status-concluida { background-color: color-mix(in srgb, rgb(209, 231, 221) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(15, 81, 50) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-tarefas-index) .status-pendente { background-color: color-mix(in srgb, rgb(248, 215, 218) 22%, var(--tui-escuro-superficie)) !important; color: color-mix(in srgb, rgb(132, 32, 41) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-private-tarefas-index) .tarefa-img-mobile { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-tarefas-index) .group-text h4 { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-tarefas-index) .toggle-btn button.active { background-color: var(--tui-escuro-superficie) !important; color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-private-transportadoras-index) .transportadora-img-mobile { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-private-transportadoras-index) .group-text h4 { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro) .u-0aaf8b9:not(#_) { background-color: color-mix(in srgb, rgb(255, 243, 205) 22%, var(--tui-escuro-superficie)) !important; }
:where(html.tui-escuro) .u-1a473d4:not(#_) { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro) .u-1d8ea83:not(#_) { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro) .u-1edb423:not(#_) { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro) .u-23f5ff6:not(#_) { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro) .u-27bda45:not(#_) { background-color: var(--tui-escuro-superficie) !important; border-bottom-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro) .u-2e09ef7:not(#_) { background-color: var(--tui-escuro-superficie) !important; border-top-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro) .u-34fe053:not(#_) { border-bottom-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro) .u-391d185:not(#_) { background-color: var(--tui-escuro-superficie) !important; border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro) .u-3a360c6:not(#_) { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro) .u-3c85053:not(#_) { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro) .u-5da6da6:not(#_) { background-color: var(--tui-escuro-superficie) !important; border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro) .u-649baa8:not(#_) { background-color: var(--tui-escuro-superficie) !important; border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro) .u-72bc344:not(#_) { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro) .u-a4acf69:not(#_) { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro) .u-bba8d09:not(#_) { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro) .u-bdb-1px-solid-ccc:not(#_) { border-bottom-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro) .u-bdb-1px-solid-dee2e6-fsh-0-p-12px-16px:not(#_) { border-bottom-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro) .u-bdr-5px-solid-ccc:not(#_) { border-right-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro) .u-bdt-1px-solid-dee2e6-fsh-0-p-12px-16px:not(#_) { border-top-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro) .u-bdt-1px-solid-dee2e6-pt-8px:not(#_) { border-top-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro) .u-bg-eef2ff-h-46px-w-46px:not(#_) { background-color: color-mix(in srgb, rgb(238, 242, 255) 22%, var(--tui-escuro-superficie)) !important; }
:where(html.tui-escuro) .u-bg-fff:not(#_) { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro) .u-bg-ffffff-ov-hidden-pos-relative:not(#_) { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro) .u-bg-white:not(#_) { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro) .u-bg-white-bd-1px-solid-dee2e6-p-10px:not(#_) { background-color: var(--tui-escuro-superficie) !important; border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro) .u-bgc-white-h-80px-of-contain-w-80px:not(#_) { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro) .u-c-003ca6:not(#_) { color: color-mix(in srgb, rgb(0, 60, 166) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro) .u-c-0047c8-imp-fs-24px:not(#_) { color: color-mix(in srgb, rgb(0, 71, 200) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro) .u-c-374151-fs-_88rem:not(#_) { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro) .u-cf2624c:not(#_) { border-bottom-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro) .u-dc96670:not(#_) { border-top-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro) .u-dd16f91:not(#_) { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro) .u-ebe1801:not(#_) { border-bottom-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro) .u-efb05fb:not(#_) { border-bottom-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro) .u-f8e3d81:not(#_) { background-color: color-mix(in srgb, rgb(255, 243, 205) 22%, var(--tui-escuro-superficie)) !important; }
:where(html.tui-escuro) .u-fec3c22:not(#_) { background-color: color-mix(in srgb, rgb(255, 243, 205) 22%, var(--tui-escuro-superficie)) !important; }
:where(html.tui-escuro) .u-ff4e6ff:not(#_) { background-color: var(--tui-escuro-superficie) !important; border-color: var(--tui-escuro-borda) !important; color: var(--tui-escuro-texto) !important; }

/* ─── Tema escuro: badge bg-dark ─── */
/* No tema escuro o theme.min.css inverte --gk-dark para branco, e o
   .badge.bg-dark (código do intérprete, status "cancelado" do ConLibras,
   SuperAdmin) virava um badge branco com texto branco. Aqui ele fica
   com a cor de borda do tema, um cinza-ardósia que destaca do card. */
:where(html.tui-escuro) .badge.bg-dark {
    background-color: var(--tui-escuro-borda) !important;
    color: var(--tui-escuro-texto);
}

/* ─── Tema escuro: cabeçalho de modal bg-dark ─── */
/* Mesmo caso do badge: com --gk-dark invertido, o .modal-header.bg-dark
   (ex.: "Consultar Preço" do PDV) ficava branco com o título em branco. */
:where(html.tui-escuro) .modal-header.bg-dark {
    background-color: var(--tui-escuro-borda) !important;
    color: var(--tui-escuro-texto);
}

/* ─── Tema escuro: telas de login ─── */
/* Três níveis, como no claro (fundo cinza, card branco, campo branco): a
   geração automática deixava fundo, card e campos na mesma superfície e o
   card sumia. Fundo e campos ficam na cor de fundo do tema; o card, na
   superfície, com borda. */
:where(html.tui-escuro.pg-public-login-index) .login-form-wrapper,
:where(html.tui-escuro.pg-public-login-esqueceu) .recover-card,
:where(html.tui-escuro.pg-public-login-resetar-senha) .reset-card,
:where(html.tui-escuro.pg-public-login-validate-2fa) .twofa-form-wrapper {
    border: 1px solid var(--tui-escuro-borda);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
:where(html.tui-escuro.pg-public-login-esqueceu, html.tui-escuro.pg-public-login-resetar-senha) .form-control,
:where(html.tui-escuro.pg-public-login-validate-2fa) .code-input {
    background-color: var(--tui-bg, #0f172a) !important;
}

/* Avisos (boxAjax/boxFlash) do login. As três regras deles na seção acima
   foram estendidas ao tpl-public, que só fica escuro nas telas de login. */
:where(html.tui-escuro.tpl-public) .modern-notification {
    border: 1px solid var(--tui-escuro-borda);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
:where(html.tui-escuro.tpl-public) .modern-notification-message { color: color-mix(in srgb, var(--tui-escuro-texto) 75%, transparent); }
/* Mesma troca de cores da seção acima, para o login (botão sol/lua no canto
   da tela). Gerada a partir das regras "Login*" deste arquivo. */
:where(html.tui-escuro.pg-public-login-index) .login-container { background-color: var(--tui-bg, #0f172a) !important; }
:where(html.tui-escuro.pg-public-login-index) .login-left { background-color: var(--tui-bg, #0f172a) !important; }
:where(html.tui-escuro.pg-public-login-index) .login-form-wrapper { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-public-login-index) .login-title { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-public-login-index) .form-label { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-public-login-index) .form-input { background-color: var(--tui-bg, #0f172a) !important; border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-public-login-index) .form-input:focus { background-color: var(--tui-bg, #0f172a) !important; }
:where(html.tui-escuro.pg-public-login-index) .save-login label { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-public-login-index) .forgot-password a { color: color-mix(in srgb, rgb(30, 74, 159) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-public-login-index) .forgot-password a:hover { color: color-mix(in srgb, rgb(22, 58, 127) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-public-login-index) .register-link a { color: color-mix(in srgb, rgb(30, 74, 159) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-public-login-esqueceu) .recover-container { background-color: var(--tui-bg, #0f172a) !important; }
:where(html.tui-escuro.pg-public-login-esqueceu) .recover-card { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-public-login-esqueceu) .alert-info { background-color: color-mix(in srgb, rgb(227, 242, 253) 22%, var(--tui-escuro-superficie)) !important; }
:where(html.tui-escuro.pg-public-login-esqueceu) .form-label { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-public-login-esqueceu) .form-control { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-public-login-esqueceu) .link-voltar { color: color-mix(in srgb, rgb(0, 60, 166) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-public-login-esqueceu) .link-voltar:hover { color: color-mix(in srgb, rgb(0, 45, 128) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-public-login-resetar-senha) .reset-container { background-color: var(--tui-bg, #0f172a) !important; }
:where(html.tui-escuro.pg-public-login-resetar-senha) .reset-card { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-public-login-resetar-senha) .form-label { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-public-login-resetar-senha) .form-control { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-public-login-resetar-senha) .link-voltar { color: color-mix(in srgb, rgb(0, 60, 166) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-public-login-resetar-senha) .link-voltar:hover { color: color-mix(in srgb, rgb(0, 45, 128) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-public-login-validate-2fa) .twofa-container { background-color: var(--tui-bg, #0f172a) !important; }
:where(html.tui-escuro.pg-public-login-validate-2fa) .twofa-form-wrapper { background-color: var(--tui-escuro-superficie) !important; }
:where(html.tui-escuro.pg-public-login-validate-2fa) .alert-info { background-color: color-mix(in srgb, rgb(227, 242, 253) 22%, var(--tui-escuro-superficie)) !important; }
:where(html.tui-escuro.pg-public-login-validate-2fa) .form-label { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-public-login-validate-2fa) .code-input { border-color: var(--tui-escuro-borda) !important; }
:where(html.tui-escuro.pg-public-login-validate-2fa) .remember-device label { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro.pg-public-login-validate-2fa) .link-voltar { color: color-mix(in srgb, rgb(30, 74, 159) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-public-login-validate-2fa) .link-voltar:hover { color: color-mix(in srgb, rgb(22, 64, 128) 45%, var(--tui-escuro-texto)) !important; }
:where(html.tui-escuro.pg-public-login-validate-2fa) .backup-code-hint a { color: color-mix(in srgb, rgb(30, 74, 159) 45%, var(--tui-escuro-texto)) !important; }

/* ─── Modo escuro: cor primária suavizada ─── */
/* No escuro, a primária cheia (#003ca4 ou a da empresa) virava blocos azuis
   fortes: filtros, botões, flutuantes, banner da Home. E o bloco escuro do
   theme.min.css ainda trazia a paleta roxa original do tema (#ac95fe,
   #640ef1, #8361fe...), que aparecia em links, no botão "›" das listas
   mobile e no foco dos campos. Aqui tudo passa a derivar da primária do
   tema/empresa: diluída na superfície para preencher e clareada para texto.
   html.tui-escuro (e não :where) para vencer o [data-bs-theme="dark"] do tema. */
html.tui-escuro {
    --tui-escuro-primaria: var(--tui-primary, var(--gk-primary));
    --tui-escuro-primaria-suave: color-mix(in srgb, var(--tui-escuro-primaria) 55%, var(--tui-card-bg, #1e293b));
    --tui-escuro-primaria-borda: color-mix(in srgb, var(--tui-escuro-primaria) 65%, #cbd5e1);
    --tui-escuro-primaria-texto: color-mix(in srgb, var(--tui-escuro-primaria) 40%, #ffffff);
    --gk-primary-text-emphasis: var(--tui-escuro-primaria-texto);
    --gk-primary-bg-subtle: color-mix(in srgb, var(--tui-escuro-primaria) 25%, #0f172a);
    --gk-primary-border-subtle: color-mix(in srgb, var(--tui-escuro-primaria) 55%, #0f172a);
    --gk-link-color: var(--tui-escuro-primaria-texto);
    --gk-link-hover-color: color-mix(in srgb, var(--tui-escuro-primaria) 25%, #ffffff);
    --gk-light-primary: color-mix(in srgb, var(--tui-escuro-primaria) 22%, #1e293b);
    --gk-input-focus-border: var(--tui-escuro-primaria-borda);
    --gk-arrow-color: var(--tui-escuro-primaria-suave);
}

/* Texto no escuro: o theme.min.css usa #64748b como texto padrão
   (--gk-body-color), cinza médio de pouco contraste sobre o fundo escuro, e
   .text-body tem cor fixa #334155 !important (feita para o fundo claro).
   Tabelas, formulários e listas usam essas duas e ficavam quase apagados. */
html.tui-escuro {
    --gk-body-color: var(--tui-text, #cbd5e1);
    --gk-body-color-rgb: 203, 213, 225;
}
html.tui-escuro .text-body { color: var(--tui-text, #e2e8f0) !important; }

/* Resquícios roxos do tema em transparências e sombras de foco. */
html.tui-escuro {
    --gk-primary-rgb: var(--tui-primary-rgb, 0, 60, 164);
}
html.tui-escuro .btn-primary,
html.tui-escuro .btn-outline-primary {
    --gk-btn-focus-shadow-rgb: var(--tui-primary-rgb, 0, 60, 164);
}

/* Texto e link na cor primária: clareados para ler sobre o escuro. Só "a",
   com o mesmo peso da regra do tema da empresa (:where(html.tui-primaria) a):
   qualquer classe que já dê cor ao link (menu, dropdown, .text-inherit,
   .btn) continua vencendo. */
:where(html.tui-escuro) a { color: var(--gk-link-color); }
:where(html.tui-escuro) a:hover { color: var(--gk-link-hover-color); }
:where(html.tui-escuro) .text-primary { color: var(--tui-escuro-primaria-texto) !important; }

/* Preenchidos: botão primário, fundo primário (inclui o cabeçalho dos
   modais "modal-header bg-primary"), paginação e abas ativas.
   "html.tui-escuro" com peso de verdade, e não :where(): o theme.min.css tem
   [data-bs-theme="dark"] .bg-primary { RGBA(117, 79, 254) !important }, o
   roxo original do tema, com especificidade (0,2,0). */
html.tui-escuro .btn-primary,
html.tui-escuro .bg-primary,
html.tui-escuro .text-bg-primary,
html.tui-escuro .page-item.active .page-link,
html.tui-escuro .nav-pills .nav-link.active,
html.tui-escuro .modal-header-novidades {
    background-color: var(--tui-escuro-primaria-suave) !important;
    border-color: var(--tui-escuro-primaria-borda) !important;
    color: #fff !important;
}
:where(html.tui-escuro) .btn-primary:hover,
:where(html.tui-escuro) .btn-primary:focus,
:where(html.tui-escuro) .btn-primary:active {
    background-color: color-mix(in srgb, var(--tui-escuro-primaria) 70%, var(--tui-card-bg, #1e293b)) !important;
}
:where(html.tui-escuro) .btn-outline-primary {
    color: var(--tui-escuro-primaria-texto) !important;
    border-color: var(--tui-escuro-primaria-borda) !important;
}
:where(html.tui-escuro) .btn-outline-primary:hover {
    background-color: var(--tui-escuro-primaria-suave) !important;
    color: #fff !important;
}

/* Filtro "Todos / Pendentes / Pagos" das listas mobile (theme.min.css tem
   azul fixo com !important no fundo e branco no botão ativo). */
:where(html.tui-escuro) .toggle-btn {
    background: var(--tui-escuro-superficie) !important;
    border: 1px solid var(--tui-escuro-borda);
}
:where(html.tui-escuro) .toggle-btn button { color: var(--tui-escuro-texto) !important; }
:where(html.tui-escuro) .toggle-btn button.active {
    background: var(--tui-escuro-primaria-suave) !important;
    color: #fff !important;
    box-shadow: none;
}

/* Botões flutuantes (desktop: btn-primary; mobile: degradê azul fixo). */
:where(html.tui-escuro) .floating-btn {
    background: var(--tui-escuro-primaria-suave) !important;
    border: 1px solid var(--tui-escuro-primaria-borda) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .45);
}

/* Banner de boas-vindas da Home: o degradê azul fixo passava por cima da cor
   do card (a regra do tema só troca o background-color). */
:where(html.tui-escuro.pg-private-home-index) .welcome-card {
    background: linear-gradient(135deg,
        var(--tui-escuro-primaria-suave) 0%,
        color-mix(in srgb, var(--tui-escuro-primaria) 30%, var(--tui-card-bg, #1e293b)) 100%) !important;
    border: 1px solid var(--tui-escuro-borda);
}

/* ─── Formulário em abas (abas-formulario.js) ─── */
/* Funcionário e fornecedor (cadastro em modal e edição). Seletor segmentado:
   uma faixa arredondada em que a aba ativa vira um botão preenchido com a
   primária da empresa. Antes era nav-tabs dentro de card-header, e o
   overflow da rolagem lateral cortava a borda inferior das abas.
   "html:where(...)" dá o peso necessário para vencer as cores de .nav-link
   do tema (inclusive no modo escuro). */
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin-bottom: 1.5rem;
    padding: 4px;
    border: 1px solid var(--gk-border-color);
    border-radius: 12px;
    background: var(--gk-tertiary-bg);
    /* No celular as abas deslizam de lado; a barra de rolagem fica escondida. */
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form::-webkit-scrollbar {
    display: none;
}
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form .nav-item {
    flex: 1 0 auto;
}
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 16px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--gk-secondary-color);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form .nav-link i {
    font-size: 1rem;
    opacity: .85;
}
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form .nav-link:hover {
    color: var(--gk-emphasis-color);
    background: var(--gk-card-background);
}
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form .nav-link:focus-visible {
    outline: 2px solid var(--tui-primary, var(--gk-primary));
    outline-offset: 1px;
}
/* Ativa: primária da empresa; no escuro, a versão suavizada do modo escuro. */
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form .nav-link.active {
    color: var(--gk-white);
    background: var(--tui-escuro-primaria-suave, var(--tui-primary, var(--gk-primary)));
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form .nav-link.active i {
    opacity: 1;
}

/* Aba com campo em erro: texto vermelho e um ponto, para a pessoa achar o
   erro escondido em outra aba (ativa: só o ponto, com contorno claro para
   destacar sobre a primária). */
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form .nav-link.tem-erro:not(.active) {
    color: var(--gk-danger);
}
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form .nav-link.tem-erro::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gk-danger);
}
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form .nav-link.tem-erro.active::after {
    box-shadow: 0 0 0 2px var(--gk-white);
}

/* Setas ‹ › da faixa de abas (criadas pelo abas-formulario.js só quando as
   abas não cabem). Ficam por cima das pontas da faixa, com um degradê da cor
   da faixa para a aba cortada "sumir" embaixo da seta. A margem de baixo
   passa da faixa para a moldura. */
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form-rolagem {
    position: relative;
    margin-bottom: 1.5rem;
}
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form-rolagem .abas-form {
    margin-bottom: 0;
}
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form-seta {
    position: absolute;
    top: 1px;
    bottom: 1px;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 40px;
    padding: 0 8px;
    border: 0;
    color: var(--gk-emphasis-color);
    cursor: pointer;
}
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form-seta[hidden] {
    display: none;
}
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form-seta-esq {
    left: 1px;
    justify-content: flex-start;
    border-radius: 11px 0 0 11px;
    background: linear-gradient(to right, var(--gk-tertiary-bg) 55%, transparent);
}
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form-seta-dir {
    right: 1px;
    justify-content: flex-end;
    border-radius: 0 11px 11px 0;
    background: linear-gradient(to left, var(--gk-tertiary-bg) 55%, transparent);
}
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form-seta:hover {
    color: var(--tui-primary, var(--gk-primary));
}
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form-seta i {
    font-size: 1.1rem;
    -webkit-text-stroke: .5px; /* chevron do Bootstrap Icons é fino demais */
}

/* Troca de aba: o conteúdo entra deslizando de leve, além do fade do Bootstrap. */
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .tab-pane.fade {
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
}
html:where(.tpl-private, .tpl-mobile) [data-abas-form] .tab-pane.fade.show {
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    html:where(.tpl-private, .tpl-mobile) [data-abas-form] .abas-form .nav-link,
    html:where(.tpl-private, .tpl-mobile) [data-abas-form] .tab-pane.fade {
        transition: none;
        transform: none;
    }
}

/* ─── Painel de ações do botão flutuante ─── */
/* Pedidos (lista e edição), ver cliente e ver funcionário. Antes os itens eram
   botões soltos, cada um de uma cor (primary, success, warning, info,
   outline...), alguns sem fundo e com espaçamento irregular (links, botões
   dentro de <form>, <hr>). Agora é uma lista de ações num card: todos os
   itens iguais, e a cor fica só no ícone, indicando o tipo da ação.
   "html:where(...)" dá o peso (0,2,1) necessário para vencer as cores de
   botão do modo escuro (html.tui-escuro .btn-primary { ... !important }). */
html:where(.tpl-mobile, .tpl-private) .floating-buttons {
    /* --gk-card-background, e não --gk-card-bg: esta só existe dentro de
       .card, e fora dele o painel caía no branco do fallback (no escuro também). */
    background: var(--gk-card-background, #fff);
    border: 1px solid var(--gk-border-color);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    padding: 6px;
    min-width: 230px;
    max-height: 70vh;
    overflow-y: auto;
    text-align: left;
}
html:where(.tpl-mobile, .tpl-private) .floating-buttons > form { margin: 0; }
html:where(.tpl-mobile, .tpl-private) .floating-buttons .btn {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 2px !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: inherit !important;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    box-shadow: none !important;
}
html:where(.tpl-mobile, .tpl-private) .floating-buttons > :last-child,
html:where(.tpl-mobile, .tpl-private) .floating-buttons > :last-child .btn { margin-bottom: 0 !important; }
html:where(.tpl-mobile, .tpl-private) .floating-buttons .btn:hover,
html:where(.tpl-mobile, .tpl-private) .floating-buttons .btn:focus-visible,
html:where(.tpl-mobile, .tpl-private) .floating-buttons .btn:active { background: var(--gk-tertiary-bg) !important; }
html:where(.tpl-mobile, .tpl-private) .floating-buttons .btn:disabled,
html:where(.tpl-mobile, .tpl-private) .floating-buttons .btn.disabled { opacity: .5; }
html:where(.tpl-mobile, .tpl-private) .floating-buttons .btn i {
    flex: 0 0 18px;
    margin: 0 !important;
    font-size: 1.05rem;
    text-align: center;
    color: var(--tui-escuro-primaria-texto, var(--gk-primary));
}
html:where(.tpl-mobile, .tpl-private) .floating-buttons .btn-success i { color: var(--gk-success); }
html:where(.tpl-mobile, .tpl-private) .floating-buttons .btn-warning i { color: var(--gk-warning); }
html:where(.tpl-mobile, .tpl-private) .floating-buttons .btn-info i, html:where(.tpl-mobile, .tpl-private) .floating-buttons .btn-outline-info i { color: var(--gk-info); }
html:where(.tpl-mobile, .tpl-private) .floating-buttons .btn-danger i, html:where(.tpl-mobile, .tpl-private) .floating-buttons .btn-outline-danger i { color: var(--gk-danger); }
html:where(.tpl-mobile, .tpl-private) .floating-buttons .btn-secondary i { color: var(--gk-secondary-color); }
/* Ações destrutivas: o texto também em vermelho, para não serem clicadas por engano. */
html:where(.tpl-mobile, .tpl-private) .floating-buttons .btn-danger, html:where(.tpl-mobile, .tpl-private) .floating-buttons .btn-outline-danger { color: var(--gk-danger) !important; }
html:where(.tpl-mobile, .tpl-private) .floating-buttons > hr {
    margin: 6px 4px;
    border-color: var(--gk-border-color);
    opacity: 1;
}

/* ─── Documentos (lista, edição e card na tela do cliente) ───────────────
   Miniatura da imagem ou ícone do tipo de arquivo, sempre pequena e em caixa
   de tamanho fixo (para ver em detalhe, o usuário abre o arquivo). Leva
   :not(#_) para nenhuma regra de imagem do tema ou da tabela esticá-la. */
:where(html.pg-private-documentos-index, html.pg-private-documentos-editar, html.pg-private-clientes-ver) .documento-miniatura:not(#_) {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    max-width: 44px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--gk-border-color);
    background: var(--gk-tertiary-bg);
    color: var(--gk-secondary-color);
    font-size: 1.4rem;
    text-decoration: none;
}
:where(html.pg-private-documentos-index, html.pg-private-documentos-editar, html.pg-private-clientes-ver) .documento-miniatura img:not(#_) {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
}
:where(html.pg-private-documentos-editar) .documento-miniatura-lg:not(#_) {
    width: 72px;
    height: 72px;
    max-width: 72px;
    font-size: 2rem;
}
:where(html.pg-private-documentos-index, html.pg-private-clientes-ver) .documento-nome { max-width: 320px; }
:where(html.pg-private-documentos-index) .documentos-uso { height: 8px; }

/* Lista mobile (cards): o layout de .group-item é definido tela a tela. */
:where(html.pg-private-documentos-index, html.pg-private-clientes-ver) .group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--gk-border-color);
}
:where(html.pg-private-documentos-index, html.pg-private-clientes-ver) .group-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
:where(html.pg-private-documentos-index, html.pg-private-clientes-ver) .group-text {
    min-width: 0;
    overflow-wrap: anywhere;
}