/* ============================================================================
   ESTOQUEPRO — FOLHA DE ESTILOS (app.css)
   Repaginada visual 2026: identidade azul, tipografia Inter, login "aurora",
   sidebar navy profunda, cards/tabelas/modais refinados.
   IMPORTANTE: todas as regras funcionais originais foram preservadas
   (collapse da sidebar, impressão, tooltips, feature-bloqueada, help center).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0. TIPOGRAFIA GLOBAL (Inter)
   ---------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f4f7fb;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    letter-spacing: -0.02em;
}

/* ----------------------------------------------------------------------------
   1. SIDEBAR — comportamento (original) + novo visual navy profundo
   ---------------------------------------------------------------------------- */
.sidebar {
    transition: all 0.3s;
}
.sidebar.collapsed {
    width: 70px;
}
.sidebar.collapsed .sidebar-text {
    display: none;
}
.sidebar.collapsed .logo-text {
    display: none;
}
.sidebar.collapsed .menu-item {
    justify-content: center;
}
.main-content {
    transition: all 0.3s;
}
.sidebar.collapsed + .main-content {
    margin-left: 70px;
}

/* Novo visual: navy profundo com brilho radial sutil no topo */
.sidebar {
    background:
        radial-gradient(900px 320px at -10% -8%, rgba(56, 189, 248, 0.14), transparent 60%),
        radial-gradient(600px 280px at 110% 108%, rgba(37, 99, 235, 0.18), transparent 55%),
        linear-gradient(180deg, #142a63 0%, #0e1d4a 55%, #0a1636 100%) !important;
    box-shadow: 4px 0 30px rgba(2, 6, 23, 0.35);
    border-right: 1px solid rgba(148, 163, 184, 0.10);
}

/* Divisórias internas da sidebar mais discretas */
.sidebar .border-blue-700 {
    border-color: rgba(148, 163, 184, 0.16) !important;
}

/* Bloco de informações do usuário (painel translúcido) */
.sidebar div.bg-blue-900 {
    background: rgba(255, 255, 255, 0.06) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

/* Itens de menu: cantos suaves e hover elegante */
.sidebar .menu-item {
    border-radius: 12px;
    margin: 2px 8px;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.sidebar .menu-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
.sidebar.collapsed .menu-item {
    margin: 2px 6px;
}

/* Item de menu ATIVO: pill luminoso com barra azul-céu */
.sidebar .menu-item.bg-blue-900 {
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.20), rgba(37, 99, 235, 0.14)) !important;
    border-left: 4px solid #38bdf8;
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ----------------------------------------------------------------------------
   2. BADGES E ANIMAÇÕES BASE (original)
   ---------------------------------------------------------------------------- */
.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 10px;
    background-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 4px 10px rgba(239, 68, 68, 0.45);
}
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------------------------------------
   3. IMPRESSÃO (original — inalterado)
   ---------------------------------------------------------------------------- */
@media print {
    .no-print {
        display: none !important;
    }
    body, html {
        background: white !important;
    }
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

.auth-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@media print {
    body * {
        visibility: hidden;
    }
    .print-container, .print-container * {
        visibility: visible;
    }
    .print-container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    .no-print {
        display: none !important;
    }
}

/* Estilo para itens de menu e botões de planos superiores (original) */
.feature-bloqueada {
    opacity: 0.5; /* Deixa o item meio transparente/cinza */
    cursor: not-allowed; /* O cursor do mouse vira um sinal de 'proibido' */
}

/* ----------------------------------------------------------------------------
   4. LOGIN / REGISTER — "AURORA AZUL" (novo)
   Fundo animado em tons de azul da identidade do sistema, com orbes de luz
   flutuantes em duas camadas de profundidade e grade técnica sutil.
   ---------------------------------------------------------------------------- */

/* Camada base: gradiente animado navy -> azul royal -> azul vivo -> azul petróleo */
.animated-bg {
    background: linear-gradient(-45deg, #0a1636, #1e3a8a, #2563eb, #0c4a6e, #172554);
    background-size: 400% 400%;
    animation: gradientBG 16s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

/* Camada 2 (::before): brilhos estáticos suaves de profundidade (vidro fosco) */
.animated-bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        radial-gradient(circle at 18% 42%, rgba(56, 189, 248, 0.14) 0%, transparent 32%),
        radial-gradient(circle at 82% 22%, rgba(255, 255, 255, 0.09) 0%, transparent 30%),
        radial-gradient(circle at 55% 96%, rgba(37, 99, 235, 0.20) 0%, transparent 38%);
    filter: blur(30px);
    pointer-events: none;
}

/* Camada 3 (::after): orbes de luz flutuantes (animação lenta e elegante) */
.animated-bg::after {
    content: "";
    position: absolute;
    top: -30%; left: -30%;
    width: 160%; height: 160%;
    background:
        radial-gradient(circle at 28% 32%, rgba(96, 165, 250, 0.28) 0%, transparent 18%),
        radial-gradient(circle at 74% 64%, rgba(14, 165, 233, 0.22) 0%, transparent 20%),
        radial-gradient(circle at 52% 12%, rgba(255, 255, 255, 0.10) 0%, transparent 12%);
    filter: blur(40px);
    animation: aurorafloat 22s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes aurorafloat {
    0% {
        transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1);
    }
    50% {
        transform: translate3d(3%, 3%, 0) rotate(4deg) scale(1.06);
    }
    100% {
        transform: translate3d(-2%, 4%, 0) rotate(-3deg) scale(1.02);
    }
}

/* Cartão de Vidro (Glassmorphism) — refinado */
.glass-card {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow:
        0 30px 60px -20px rgba(2, 6, 23, 0.50),
        0 0 0 1px rgba(56, 189, 248, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    border-radius: 1.5rem;
}

/* Inputs do login */
.glass-input {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}
.glass-input:focus {
    background: #fff;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
    border-color: #3b82f6;
}

/* Botão principal do login com brilho azul */
#login-button {
    box-shadow: 0 14px 30px -12px rgba(37, 99, 235, 0.65);
    letter-spacing: 0.01em;
}
#login-button:hover {
    box-shadow: 0 18px 38px -12px rgba(37, 99, 235, 0.75);
}

/* Keep only the custom login password toggle icon (original) */
#login-password::-ms-reveal,
#login-password::-ms-clear {
    display: none;
}

/* ----------------------------------------------------------------------------
   5. UPGRADE DE INTERFACE (UI/UX) — refinado
   ---------------------------------------------------------------------------- */

/* Cards brancos em todo o app: cantos maiores, borda sutil, sombra em camadas */
.bg-white.rounded-lg.shadow {
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.90);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px -14px rgba(15, 23, 42, 0.12);
}

/* Efeito de "levitação" nos cards do Dashboard */
#dashboard-content .bg-white.rounded-lg.shadow {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: default;
}
#dashboard-content .bg-white.rounded-lg.shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px -8px rgba(37, 99, 235, 0.14), 0 10px 14px -6px rgba(15, 23, 42, 0.10);
    border-color: rgba(147, 197, 253, 0.85);
}

/* Animação de entrada dos modais (pop-in) — original */
@keyframes modalPop {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Aplica a animação em todos os modais (original) */
[id$="-modal"] > div {
    animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Overlay dos modais com desfoque (efeito profissional) */
div[id$="-modal"].fixed {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
div[id$="-modal"].fixed > div {
    border-radius: 18px;
}

/* Tabelas mais elegantes */
tbody tr {
    transition: background-color 0.2s ease;
}
tbody tr:hover {
    background-color: #f8fafc !important; /* Cinza muito suave no hover */
}

/* Cabeçalhos de tabela refinados */
thead th {
    letter-spacing: 0.06em;
}
thead.bg-gray-50 th,
thead .bg-gray-50 {
    color: #475569;
}

/* Botões: micro-interações suaves em todo o sistema */
button {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}
button:active {
    transform: translateY(1px);
}

/* Botões primários em gradiente ganham profundidade */
.bg-gradient-to-r.from-blue-600 {
    box-shadow: 0 8px 20px -10px rgba(37, 99, 235, 0.55);
}
.bg-gradient-to-r.from-green-600 {
    box-shadow: 0 8px 20px -10px rgba(22, 163, 74, 0.50);
}

/* Inputs e selects: transição suave de foco em todo o app */
input, select, textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Acessibilidade: foco visível elegante em links e botões */
a:focus-visible,
button:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.55);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Notificações toast com acabamento premium */
#success-notification,
#error-notification,
#warning-notification {
    border-radius: 14px;
    box-shadow: 0 18px 40px -14px rgba(2, 6, 23, 0.35);
}

/* Scrollbar personalizada (Chrome/Edge) — fina e discreta */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #c3cede;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Respeita usuários com preferência por menos movimento */
@media (prefers-reduced-motion: reduce) {
    .animated-bg,
    .animated-bg::after {
        animation: none !important;
    }
    [id$="-modal"] > div {
        animation: none !important;
    }
}

@media print {
    /* Força a impressão de fundos e cores exatas (original) */
    body {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Garante que as linhas da tabela sejam pretas (original) */
    table, td, tr {
        border-color: #000 !important;
    }
}

/* ----------------------------------------------------------------------------
   6. TOOLTIPS (original — inalterado, incluindo correções de th e 5ª coluna)
   ---------------------------------------------------------------------------- */
.tooltip-container {
    position: relative;
    display: inline-flex; /* Mudado para inline-flex para alinhar melhor com texto */
    align-items: center;
    cursor: help;
    vertical-align: middle;
    z-index: 30; /* garante que o container fique acima dos cards vizinhos */
}
.tooltip-container:hover {
    z-index: 10000; /* ao passar o mouse, sobe acima de tudo */
}

.tooltip-text {
    visibility: hidden;
    width: 240px;
    background-color: #1e293b; /* Slate 800 */
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px; /* Mais espaçamento */
    position: absolute;
    z-index: 9999; /* Z-index altíssimo para ficar por cima de tudo */
    bottom: 135%; /* Um pouco mais alto */
    left: 50%;
    transform: translateX(-50%); /* Centraliza perfeitamente */
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    font-size: 0.75rem;
    font-weight: normal;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    line-height: 1.4;
    pointer-events: none; /* Garante que o mouse não trave no balão */
    white-space: normal; /* Garante que o texto quebre linha */
}

.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

.help-center-shell {
    border: 1px solid rgba(148, 163, 184, 0.28);
}

.support-submenu {
    border-left: 1px solid rgba(147, 197, 253, 0.25);
}

.sidebar.collapsed .support-submenu {
    display: none !important;
}

#suporte-btn[aria-expanded="true"] #support-menu-chevron {
    transform: rotate(180deg);
}

.help-chapter-item {
    width: 100%;
    border: 1px solid #dbe3ef;
    border-radius: 18px;
    background: #ffffff;
    padding: 14px 16px;
    text-align: left;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.help-chapter-item:hover {
    transform: translateY(-1px);
    border-color: #93c5fd;
    box-shadow: 0 14px 30px rgba(148, 163, 184, 0.18);
}

.help-chapter-item.active {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 18px 35px rgba(37, 99, 235, 0.18);
}

.help-chapter-time {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.3rem 0.65rem;
}

.help-chapter-item.active .help-chapter-time {
    background: #1d4ed8;
    color: #ffffff;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Ajuste específico para tooltips dentro de tabelas para não cortar */
table .tooltip-text {
    min-width: 180px;
}

/* --- CORREÇÃO DE TOOLTIPS EM TABELAS (Evita corte no topo) --- */
table th .tooltip-container .tooltip-text {
    bottom: auto !important;   /* Anula a posição padrão de baixo para cima */
    top: 140% !important;      /* Posiciona abaixo do ícone */
    left: 50%;
    transform: translateX(-50%);
}

/* Corrige a setinha para ficar no topo do balão e apontar para cima */
table th .tooltip-container .tooltip-text::after {
    top: auto !important;
    bottom: 100% !important;   /* Cola a seta no topo do balão */
    border-color: transparent transparent #1e293b transparent !important; /* Inverte a cor da seta */
}

/* Ajuste específico para a coluna 'Diagnóstico' para não cortar na direita se a tela for pequena */
table th:nth-child(5) .tooltip-text {
    left: auto !important;
    right: 0 !important;
    transform: translateX(10%) !important; /* Ajuste fino para esquerda */
}
table th:nth-child(5) .tooltip-text::after {
    left: 80% !important; /* Move a setinha para acompanhar */
}

/* ----------------------------------------------------------------------------
   7. PLANO PRO — badge dourado e bloqueio elegante
   ---------------------------------------------------------------------------- */

/* Badge "PRO" (pill dourado com coroa) — injetado via applyProLock() */
.pro-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #713f12;
    background: linear-gradient(135deg, #fde68a 0%, #f59e0b 55%, #fbbf24 100%);
    border: 1px solid rgba(180, 83, 9, 0.35);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    line-height: 1.2;
    vertical-align: middle;
    white-space: nowrap;
}
.pro-badge .fa-crown {
    font-size: 0.6rem;
}

/* Bloqueio Pro: diferente da .feature-bloqueada (que repele com 'proibido'),
   o bloqueio Pro CONVIDA ao clique — cursor pointer e brilho no hover */
.feature-pro-bloqueada {
    position: relative;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.feature-pro-bloqueada:hover {
    opacity: 1;
}

/* Cabeçalho do modal Pro (navy -> azul com brilho dourado no canto) */
.pro-modal-header {
    background:
        radial-gradient(600px 200px at 85% -20%, rgba(251, 191, 36, 0.25), transparent 60%),
        linear-gradient(135deg, #0e1d4a 0%, #1e3a8a 55%, #2563eb 100%);
}

/* Círculo da coroa no topo do modal */
.pro-crown-circle {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.45);
    box-shadow: 0 10px 25px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Texto "Pro" com gradiente dourado */
.pro-gold-text {
    background: linear-gradient(90deg, #fde68a, #f59e0b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Destaque do preço por dia */
.pro-price-callout {
    background: linear-gradient(180deg, #eff6ff, #ffffff);
    border: 1px solid #bfdbfe;
}

/* Teaser Pro: conteúdo de exemplo desfocado por trás do badge */
.pro-teaser-blur {
    filter: blur(4px);
    user-select: none;
    pointer-events: none;
}

/* Tooltip que abre para BAIXO (para ícones colados no topo da tela) */
.tooltip-container.tooltip-baixo .tooltip-text {
    bottom: auto;
    top: 135%;
}
.tooltip-container.tooltip-baixo .tooltip-text::after {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent #1e293b transparent;
}

/* ----------------------------------------------------------------------------
   MÓDULO FINANCEIRO — abas, chips, badges de status, toggles
   ---------------------------------------------------------------------------- */
.fin-tab {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    padding: 12px 4px;
    margin-right: 24px;
    border: none;
    background: none;
    border-bottom: 2.5px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.fin-tab:hover { color: #334155; }
.fin-tab-on { color: #12233B; border-bottom-color: #2563eb; }

.fin-chip {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}
.fin-chip:hover { border-color: #93c5fd; }
.fin-chip-on { color: #fff; background: #2563eb; border-color: #2563eb; }

/* Badges de status */
.fin-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    display: inline-block;
    white-space: nowrap;
}
.fin-badge-pago { background: #dcfce7; color: #16a34a; }
.fin-badge-pendente { background: #fef3c7; color: #b45309; }
.fin-badge-atrasado { background: #fee2e2; color: #dc2626; }

/* Badges de tipo de contato */
.fin-tipo-badge { font-size: 0.68rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.fin-tipo-fornecedor_produto { background: #e8f0ff; color: #2563eb; }
.fin-tipo-prestador_servico { background: #f3e8ff; color: #7c3aed; }
.fin-tipo-cliente { background: #dcfce7; color: #16a34a; }
.fin-tipo-outro { background: #f1f5f9; color: #64748b; }

/* Toggle a receber / a pagar no modal */
.fin-toggle { border-color: #e2e8f0; background: #fff; color: #64748b; transition: all 0.15s ease; }
.fin-toggle-receber { background: #dcfce7; border-color: #16a34a; color: #16a34a; }
.fin-toggle-pagar { background: #fee2e2; border-color: #dc2626; color: #dc2626; }

/* Segmento de recorrência */
.fin-seg { border-color: #e2e8f0; background: #fff; color: #64748b; transition: all 0.15s ease; }
.fin-seg-on { background: #2563eb; border-color: #2563eb; color: #fff; }

/* Barras do fluxo de caixa */
.fin-fluxo-col { width: 22px; border-radius: 6px 6px 0 0; transition: height 0.3s ease; }
.fin-fluxo-in { background: #16a34a; }
.fin-fluxo-out { background: #f87171; }

/* ----------------------------------------------------------------------------
   SELO PRO NO HEADER — variante "expirado" (janela de reativação, 2 dias)
   O botão #pro-trial-selo tem estilos inline (estado dourado do trial ativo);
   o !important abaixo sobrescreve apenas cor/fundo na fase de conversão.
   ---------------------------------------------------------------------------- */
#pro-trial-selo.pro-selo-expirado {
    background: #fffbeb !important;
    color: #b45309 !important;
    border: 1px solid #f59e0b !important;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25) !important;
}

/* ----------------------------------------------------------------------------
   [FIN-ACESSO] Autorização por usuário no módulo Financeiro
   ---------------------------------------------------------------------------- */
/* Item de menu ofuscado para usuário sem autorização individual. Diferente do
   bloqueio Pro (dourado, que convida ao upgrade): aqui é permissão interna da
   empresa — visual cinza, discreto, com aviso no clique. */
.fin-acesso-bloqueada {
    opacity: 0.42;
    filter: grayscale(0.9) saturate(0.4);
    cursor: pointer;
    transition: opacity 0.25s ease, filter 0.25s ease;
}
.fin-acesso-bloqueada:hover {
    opacity: 0.62;
}

/* Chip de cadeado do item bloqueado (cinza-ardósia) */
.fin-lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 0.62rem;
    font-weight: 800;
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.18);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 999px;
    line-height: 1.2;
    white-space: nowrap;
}
.fin-lock-badge .fa-lock {
    font-size: 0.6rem;
}

/* Aviso âmbar de falta de permissão (toast no canto superior direito,
   acima das notificações padrão do sistema) */
.fin-acesso-aviso {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 60;
    max-width: 380px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 5px solid #f59e0b;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.18);
    padding: 14px 16px;
    transform: translateX(130%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.fin-acesso-aviso.visivel {
    transform: translateX(0);
    pointer-events: auto;
}
.fin-acesso-aviso-icone {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d97706;
    flex-shrink: 0;
}
.fin-acesso-aviso-titulo {
    font-size: 0.85rem;
    font-weight: 700;
    color: #78350f;
    margin: 0;
}
.fin-acesso-aviso-texto {
    font-size: 0.75rem;
    color: #92400e;
    margin: 2px 0 0;
}
.fin-acesso-aviso-fechar {
    color: #d97706;
    margin-left: 4px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}
.fin-acesso-aviso-fechar:hover {
    color: #92400e;
}


/* ============================================================================
   8. [TEMA-ESCURO] Modo escuro do EstoquePro
   Gerado a partir do inventario real de classes de index.html + app.js.
   Ordem: (a) remapeamento das classes utilitarias, (b) ilhas de luz que nunca
   escurecem (palco do PDF), (c) componentes e controles nativos.
   Nada aqui altera o tema claro: toda regra e prefixada por html.dark, exceto
   os ajustes deliberados do botao/menu de perfil e do raio dos modais.
   ============================================================================ */

/* ---- (a) remapeamento das classes utilitarias ---- */
html.dark .bg-amber-100 { background-color: #454238; }
html.dark .bg-amber-50 { background-color: #383633; }
html.dark .bg-amber-500 { background-color: #f59e0b; }
html.dark .bg-amber-700 { background-color: #b45309; }
html.dark .bg-blue-100 { background-color: #3f4143; }
html.dark .bg-blue-200 { background-color: #454b53; }
html.dark .bg-blue-50 { background-color: #363635; }
html.dark .bg-blue-600 { background-color: #2563eb; }
html.dark .bg-blue-800 { background-color: #1e40af; }
html.dark .bg-blue-900 { background-color: #1e3a8a; }
html.dark .bg-emerald-100 { background-color: #3d443e; }
html.dark .bg-emerald-600 { background-color: #059669; }
html.dark .bg-gray-100 { background-color: #2e2d2a; }
html.dark .bg-gray-200 { background-color: #383632; }
html.dark .bg-gray-300 { background-color: #423f3a; }
html.dark .bg-gray-400 { background-color: #4c4942; }
html.dark .bg-gray-50 { background-color: #211f1d; }
html.dark .bg-green-100 { background-color: #3f443f; }
html.dark .bg-green-50 { background-color: #363734; }
html.dark .bg-green-500 { background-color: #22c55e; }
html.dark .bg-green-600 { background-color: #16a34a; }
html.dark .bg-indigo-100 { background-color: #404043; }
html.dark .bg-indigo-50 { background-color: #363535; }
html.dark .bg-indigo-600 { background-color: #4f46e5; }
html.dark .bg-orange-100 { background-color: #46413b; }
html.dark .bg-orange-200 { background-color: #554a3d; }
html.dark .bg-purple-100 { background-color: #434043; }
html.dark .bg-purple-50 { background-color: #373635; }
html.dark .bg-purple-600 { background-color: #9333ea; }
html.dark .bg-red-100 { background-color: #453f3e; }
html.dark .bg-red-200 { background-color: #554746; }
html.dark .bg-red-400 { background-color: #cb5d5d; }
html.dark .bg-red-50 { background-color: #383533; }
html.dark .bg-red-500 { background-color: #ef4444; }
html.dark .bg-red-600 { background-color: #dc2626; }
html.dark .bg-rose-100 { background-color: #46403e; }
html.dark .bg-slate-50 { background-color: #211f1d; }
html.dark .bg-white { background-color: #262523; }
html.dark .bg-yellow-100 { background-color: #454438; }
html.dark .bg-yellow-200 { background-color: #555135; }
html.dark .bg-yellow-50 { background-color: #383732; }
html.dark .border-amber-100 { border-color: #635f4f; }
html.dark .border-amber-200 { border-color: #635b3c; }
html.dark .border-amber-300 { border-color: #74632d; }
html.dark .border-amber-400 { border-color: #d5a21f; }
html.dark .border-amber-500 { border-color: #d08609; }
html.dark .border-blue-100 { border-color: #585c61; }
html.dark .border-blue-200 { border-color: #4f5761; }
html.dark .border-blue-300 { border-color: #4a5e73; }
html.dark .border-blue-400 { border-color: #528cd4; }
html.dark .border-blue-500 { border-color: #326ed1; }
html.dark .border-blue-600 { border-color: #1f54c8; }
html.dark .border-blue-700 { border-color: #1942b8; }
html.dark .border-gray-100 { border-color: #34322e; }
html.dark .border-gray-200 { border-color: #3d3b36; }
html.dark .border-gray-300 { border-color: #4c4942; }
html.dark .border-green-100 { border-color: #58625a; }
html.dark .border-green-200 { border-color: #4e6052; }
html.dark .border-green-400 { border-color: #3fbd6d; }
html.dark .border-green-500 { border-color: #1da750; }
html.dark .border-indigo-100 { border-color: #595b61; }
html.dark .border-indigo-300 { border-color: #525773; }
html.dark .border-indigo-400 { border-color: #6e77d3; }
html.dark .border-indigo-500 { border-color: #5457cd; }
html.dark .border-orange-300 { border-color: #75593c; }
html.dark .border-purple-200 { border-color: #5c5561; }
html.dark .border-purple-300 { border-color: #665773; }
html.dark .border-red-100 { border-color: #635958; }
html.dark .border-red-200 { border-color: #635250; }
html.dark .border-red-300 { border-color: #745150; }
html.dark .border-red-400 { border-color: #d36060; }
html.dark .border-red-500 { border-color: #cb3a3a; }
html.dark .border-slate-200 { border-color: #3d3b36; }
html.dark .border-slate-300 { border-color: #4c4942; }
html.dark .border-yellow-100 { border-color: #63614e; }
html.dark .border-yellow-200 { border-color: #635e3c; }
html.dark .border-yellow-300 { border-color: #75692a; }
html.dark .border-yellow-400 { border-color: #d4ad12; }
html.dark .border-yellow-500 { border-color: #c79807; }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #34322e; }
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #3d3b36; }
html.dark .focus\:bg-white:focus { background-color: #262523; }
html.dark .focus\:border-blue-500:focus { border-color: #326ed1; }
html.dark .focus\:border-indigo-600:focus { border-color: #433cc3; }
html.dark .focus\:border-purple-500:focus { border-color: #8f48d2; }
html.dark .focus\:border-red-500:focus { border-color: #cb3a3a; }
html.dark .focus\:border-yellow-500:focus { border-color: #c79807; }
html.dark .focus\:ring-amber-300:focus { --tw-ring-color: #74632d; }
html.dark .focus\:ring-amber-400:focus { --tw-ring-color: #d5a21f; }
html.dark .focus\:ring-amber-500:focus { --tw-ring-color: #d08609; }
html.dark .focus\:ring-blue-300:focus { --tw-ring-color: #4a5e73; }
html.dark .focus\:ring-blue-500:focus { --tw-ring-color: #326ed1; }
html.dark .focus\:ring-gray-200:focus { --tw-ring-color: #3d3b36; }
html.dark .focus\:ring-gray-300:focus { --tw-ring-color: #4c4942; }
html.dark .focus\:ring-green-300:focus { --tw-ring-color: #456f53; }
html.dark .focus\:ring-indigo-500:focus { --tw-ring-color: #5457cd; }
html.dark .focus\:ring-purple-500:focus { --tw-ring-color: #8f48d2; }
html.dark .focus\:ring-red-500:focus { --tw-ring-color: #cb3a3a; }
html.dark .focus\:ring-yellow-500:focus { --tw-ring-color: #c79807; }
html.dark .from-amber-50 { --tw-gradient-from: #383633; }
html.dark .from-blue-600 { --tw-gradient-from: #2563eb; }
html.dark .from-green-600 { --tw-gradient-from: #16a34a; }
html.dark .from-purple-700 { --tw-gradient-from: #7e22ce; }
html.dark .group:hover .group-hover\:text-indigo-400 { color: #aeb5fb; }
html.dark .group:hover .group-hover\:text-indigo-500 { color: #aeb5fb; }
html.dark .group:hover .group-hover\:text-indigo-600 { color: #aeb5fb; }
html.dark .group:hover .group-hover\:text-indigo-700 { color: #aeb5fb; }
html.dark .hover\:bg-amber-100:hover { background-color: #454238; }
html.dark .hover\:bg-amber-200:hover { background-color: #554e35; }
html.dark .hover\:bg-amber-50:hover { background-color: #383633; }
html.dark .hover\:bg-amber-600:hover { background-color: #d97706; }
html.dark .hover\:bg-blue-100:hover { background-color: #3f4143; }
html.dark .hover\:bg-blue-200:hover { background-color: #454b53; }
html.dark .hover\:bg-blue-50:hover { background-color: #363635; }
html.dark .hover\:bg-blue-700:hover { background-color: #1d4ed8; }
html.dark .hover\:bg-emerald-200:hover { background-color: #3f5247; }
html.dark .hover\:bg-emerald-700:hover { background-color: #047857; }
html.dark .hover\:bg-gray-100:hover { background-color: #2e2d2a; }
html.dark .hover\:bg-gray-200:hover { background-color: #383632; }
html.dark .hover\:bg-gray-300:hover { background-color: #423f3a; }
html.dark .hover\:bg-gray-50:hover { background-color: #211f1d; }
html.dark .hover\:bg-green-100:hover { background-color: #3f443f; }
html.dark .hover\:bg-green-200:hover { background-color: #445347; }
html.dark .hover\:bg-green-600:hover { background-color: #16a34a; }
html.dark .hover\:bg-green-700:hover { background-color: #15803d; }
html.dark .hover\:bg-indigo-50:hover { background-color: #363535; }
html.dark .hover\:bg-indigo-700:hover { background-color: #4338ca; }
html.dark .hover\:bg-orange-200:hover { background-color: #554a3d; }
html.dark .hover\:bg-purple-200:hover { background-color: #504a53; }
html.dark .hover\:bg-purple-50:hover { background-color: #373635; }
html.dark .hover\:bg-purple-700:hover { background-color: #7e22ce; }
html.dark .hover\:bg-red-100:hover { background-color: #453f3e; }
html.dark .hover\:bg-red-200:hover { background-color: #554746; }
html.dark .hover\:bg-red-50:hover { background-color: #383533; }
html.dark .hover\:bg-red-700:hover { background-color: #b91c1c; }
html.dark .hover\:bg-rose-200:hover { background-color: #554848; }
html.dark .hover\:bg-slate-100:hover { background-color: #2e2d2a; }
html.dark .hover\:bg-white:hover { background-color: #262523; }
html.dark .hover\:bg-yellow-200:hover { background-color: #555135; }
html.dark .hover\:border-indigo-200:hover { border-color: #515461; }
html.dark .hover\:from-blue-700:hover { --tw-gradient-from: #1d4ed8; }
html.dark .hover\:text-blue-500:hover { color: #8dbefb; }
html.dark .hover\:text-blue-600:hover { color: #8dbefb; }
html.dark .hover\:text-blue-800:hover { color: #8dbefb; }
html.dark .hover\:text-blue-900:hover { color: #8dbefb; }
html.dark .hover\:text-gray-600:hover { color: #cdc7bb; }
html.dark .hover\:text-gray-700:hover { color: #e2ddd3; }
html.dark .hover\:text-gray-900:hover { color: #f5f2ec; }
html.dark .hover\:text-green-600:hover { color: #4ade80; }
html.dark .hover\:text-green-700:hover { color: #4ade80; }
html.dark .hover\:text-green-800:hover { color: #4ade80; }
html.dark .hover\:text-green-900:hover { color: #4ade80; }
html.dark .hover\:text-indigo-900:hover { color: #aeb5fb; }
html.dark .hover\:text-purple-600:hover { color: #d4abfd; }
html.dark .hover\:text-red-500:hover { color: #fba4a4; }
html.dark .hover\:text-red-600:hover { color: #fba4a4; }
html.dark .hover\:text-red-700:hover { color: #fba4a4; }
html.dark .hover\:text-red-800:hover { color: #fba4a4; }
html.dark .hover\:text-red-900:hover { color: #fba4a4; }
html.dark .hover\:text-slate-800:hover { color: #efebe3; }
html.dark .hover\:to-indigo-700:hover { --tw-gradient-to: #4338ca; }
html.dark .ring-gray-300 { --tw-ring-color: #4c4942; }
html.dark .text-amber-300 { color: #fcd34d; }
html.dark .text-amber-500 { color: #fbbf24; }
html.dark .text-amber-600 { color: #fbbf24; }
html.dark .text-amber-700 { color: #fbbf24; }
html.dark .text-amber-800 { color: #fbbf24; }
html.dark .text-blue-100 { color: #dbeafe; }
html.dark .text-blue-200 { color: #bfdbfe; }
html.dark .text-blue-300 { color: #93c5fd; }
html.dark .text-blue-500 { color: #8dbefb; }
html.dark .text-blue-600 { color: #8dbefb; }
html.dark .text-blue-700 { color: #8dbefb; }
html.dark .text-blue-800 { color: #8dbefb; }
html.dark .text-blue-900 { color: #8dbefb; }
html.dark .text-emerald-600 { color: #44d7a1; }
html.dark .text-emerald-700 { color: #44d7a1; }
html.dark .text-gray-400 { color: #a09a90; }
html.dark .text-gray-500 { color: #c2bcb2; }
html.dark .text-gray-600 { color: #cdc7bb; }
html.dark .text-gray-700 { color: #e2ddd3; }
html.dark .text-gray-800 { color: #efebe3; }
html.dark .text-gray-900 { color: #f5f2ec; }
html.dark .text-green-300 { color: #86efac; }
html.dark .text-green-500 { color: #4ade80; }
html.dark .text-green-600 { color: #4ade80; }
html.dark .text-green-700 { color: #4ade80; }
html.dark .text-green-800 { color: #4ade80; }
html.dark .text-indigo-500 { color: #aeb5fb; }
html.dark .text-indigo-600 { color: #aeb5fb; }
html.dark .text-indigo-700 { color: #aeb5fb; }
html.dark .text-indigo-800 { color: #aeb5fb; }
html.dark .text-orange-500 { color: #fcac6b; }
html.dark .text-orange-600 { color: #fcac6b; }
html.dark .text-orange-700 { color: #fcac6b; }
html.dark .text-purple-100 { color: #f3e8ff; }
html.dark .text-purple-600 { color: #d4abfd; }
html.dark .text-purple-700 { color: #d4abfd; }
html.dark .text-purple-800 { color: #d4abfd; }
html.dark .text-red-400 { color: #fba4a4; }
html.dark .text-red-500 { color: #fba4a4; }
html.dark .text-red-600 { color: #fba4a4; }
html.dark .text-red-700 { color: #fba4a4; }
html.dark .text-red-800 { color: #fba4a4; }
html.dark .text-rose-700 { color: #fca4b1; }
html.dark .text-slate-400 { color: #a09a90; }
html.dark .text-slate-500 { color: #c2bcb2; }
html.dark .text-slate-600 { color: #cdc7bb; }
html.dark .text-slate-700 { color: #e2ddd3; }
html.dark .text-slate-900 { color: #f5f2ec; }
html.dark .text-yellow-500 { color: #facc15; }
html.dark .text-yellow-600 { color: #facc15; }
html.dark .text-yellow-700 { color: #facc15; }
html.dark .text-yellow-800 { color: #facc15; }
html.dark .to-blue-700 { --tw-gradient-to: #1d4ed8; }
html.dark .to-green-700 { --tw-gradient-to: #15803d; }
html.dark .to-indigo-600 { --tw-gradient-to: #4f46e5; }
html.dark .to-indigo-800 { --tw-gradient-to: #3730a3; }
html.dark .to-white { --tw-gradient-to: #262523; }

/* ---- (b) ilhas de luz: imunes ao tema escuro ---- */
html.dark .ep-area-clara .bg-amber-100 { background-color: #fef3c7; }
html.dark .ep-area-clara .bg-amber-50 { background-color: #fffbeb; }
html.dark .ep-area-clara .bg-amber-500 { background-color: #f59e0b; }
html.dark .ep-area-clara .bg-amber-700 { background-color: #b45309; }
html.dark .ep-area-clara .bg-black { background-color: #000000; }
html.dark .ep-area-clara .bg-blue-100 { background-color: #dbeafe; }
html.dark .ep-area-clara .bg-blue-200 { background-color: #bfdbfe; }
html.dark .ep-area-clara .bg-blue-50 { background-color: #eff6ff; }
html.dark .ep-area-clara .bg-blue-600 { background-color: #2563eb; }
html.dark .ep-area-clara .bg-blue-800 { background-color: #1e40af; }
html.dark .ep-area-clara .bg-blue-900 { background-color: #1e3a8a; }
html.dark .ep-area-clara .bg-emerald-100 { background-color: #d1fae5; }
html.dark .ep-area-clara .bg-emerald-600 { background-color: #059669; }
html.dark .ep-area-clara .bg-gray-100 { background-color: #f3f4f6; }
html.dark .ep-area-clara .bg-gray-200 { background-color: #e5e7eb; }
html.dark .ep-area-clara .bg-gray-300 { background-color: #d1d5db; }
html.dark .ep-area-clara .bg-gray-400 { background-color: #9ca3af; }
html.dark .ep-area-clara .bg-gray-50 { background-color: #f9fafb; }
html.dark .ep-area-clara .bg-gray-500 { background-color: #6b7280; }
html.dark .ep-area-clara .bg-gray-600 { background-color: #4b5563; }
html.dark .ep-area-clara .bg-gray-700 { background-color: #374151; }
html.dark .ep-area-clara .bg-gray-800 { background-color: #1f2937; }
html.dark .ep-area-clara .bg-gray-900 { background-color: #111827; }
html.dark .ep-area-clara .bg-green-100 { background-color: #dcfce7; }
html.dark .ep-area-clara .bg-green-50 { background-color: #f0fdf4; }
html.dark .ep-area-clara .bg-green-500 { background-color: #22c55e; }
html.dark .ep-area-clara .bg-green-600 { background-color: #16a34a; }
html.dark .ep-area-clara .bg-indigo-100 { background-color: #e0e7ff; }
html.dark .ep-area-clara .bg-indigo-50 { background-color: #eef2ff; }
html.dark .ep-area-clara .bg-indigo-600 { background-color: #4f46e5; }
html.dark .ep-area-clara .bg-orange-100 { background-color: #ffedd5; }
html.dark .ep-area-clara .bg-orange-200 { background-color: #fed7aa; }
html.dark .ep-area-clara .bg-purple-100 { background-color: #f3e8ff; }
html.dark .ep-area-clara .bg-purple-50 { background-color: #faf5ff; }
html.dark .ep-area-clara .bg-purple-600 { background-color: #9333ea; }
html.dark .ep-area-clara .bg-red-100 { background-color: #fee2e2; }
html.dark .ep-area-clara .bg-red-200 { background-color: #fecaca; }
html.dark .ep-area-clara .bg-red-400 { background-color: #f87171; }
html.dark .ep-area-clara .bg-red-50 { background-color: #fef2f2; }
html.dark .ep-area-clara .bg-red-500 { background-color: #ef4444; }
html.dark .ep-area-clara .bg-red-600 { background-color: #dc2626; }
html.dark .ep-area-clara .bg-rose-100 { background-color: #ffe4e6; }
html.dark .ep-area-clara .bg-slate-50 { background-color: #f8fafc; }
html.dark .ep-area-clara .bg-slate-900 { background-color: #0f172a; }
html.dark .ep-area-clara .bg-slate-950 { background-color: #020617; }
html.dark .ep-area-clara .bg-white { background-color: #ffffff; }
html.dark .ep-area-clara .bg-yellow-100 { background-color: #fef9c3; }
html.dark .ep-area-clara .bg-yellow-200 { background-color: #fef08a; }
html.dark .ep-area-clara .bg-yellow-50 { background-color: #fefce8; }
html.dark .ep-area-clara .border-amber-100 { border-color: #fef3c7; }
html.dark .ep-area-clara .border-amber-200 { border-color: #fde68a; }
html.dark .ep-area-clara .border-amber-300 { border-color: #fcd34d; }
html.dark .ep-area-clara .border-amber-400 { border-color: #fbbf24; }
html.dark .ep-area-clara .border-amber-500 { border-color: #f59e0b; }
html.dark .ep-area-clara .border-blue-100 { border-color: #dbeafe; }
html.dark .ep-area-clara .border-blue-200 { border-color: #bfdbfe; }
html.dark .ep-area-clara .border-blue-300 { border-color: #93c5fd; }
html.dark .ep-area-clara .border-blue-400 { border-color: #60a5fa; }
html.dark .ep-area-clara .border-blue-500 { border-color: #3b82f6; }
html.dark .ep-area-clara .border-blue-600 { border-color: #2563eb; }
html.dark .ep-area-clara .border-blue-700 { border-color: #1d4ed8; }
html.dark .ep-area-clara .border-gray-100 { border-color: #f3f4f6; }
html.dark .ep-area-clara .border-gray-200 { border-color: #e5e7eb; }
html.dark .ep-area-clara .border-gray-300 { border-color: #d1d5db; }
html.dark .ep-area-clara .border-green-100 { border-color: #dcfce7; }
html.dark .ep-area-clara .border-green-200 { border-color: #bbf7d0; }
html.dark .ep-area-clara .border-green-400 { border-color: #4ade80; }
html.dark .ep-area-clara .border-green-500 { border-color: #22c55e; }
html.dark .ep-area-clara .border-indigo-100 { border-color: #e0e7ff; }
html.dark .ep-area-clara .border-indigo-300 { border-color: #a5b4fc; }
html.dark .ep-area-clara .border-indigo-400 { border-color: #818cf8; }
html.dark .ep-area-clara .border-indigo-500 { border-color: #6366f1; }
html.dark .ep-area-clara .border-orange-300 { border-color: #fdba74; }
html.dark .ep-area-clara .border-purple-200 { border-color: #e9d5ff; }
html.dark .ep-area-clara .border-purple-300 { border-color: #d8b4fe; }
html.dark .ep-area-clara .border-red-100 { border-color: #fee2e2; }
html.dark .ep-area-clara .border-red-200 { border-color: #fecaca; }
html.dark .ep-area-clara .border-red-300 { border-color: #fca5a5; }
html.dark .ep-area-clara .border-red-400 { border-color: #f87171; }
html.dark .ep-area-clara .border-red-500 { border-color: #ef4444; }
html.dark .ep-area-clara .border-slate-200 { border-color: #e2e8f0; }
html.dark .ep-area-clara .border-slate-300 { border-color: #cbd5e1; }
html.dark .ep-area-clara .border-slate-500 { border-color: #64748b; }
html.dark .ep-area-clara .border-slate-700 { border-color: #334155; }
html.dark .ep-area-clara .border-slate-800 { border-color: #1e293b; }
html.dark .ep-area-clara .border-yellow-100 { border-color: #fef9c3; }
html.dark .ep-area-clara .border-yellow-200 { border-color: #fef08a; }
html.dark .ep-area-clara .border-yellow-300 { border-color: #fde047; }
html.dark .ep-area-clara .border-yellow-400 { border-color: #facc15; }
html.dark .ep-area-clara .border-yellow-500 { border-color: #eab308; }
html.dark .ep-area-clara .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #f3f4f6; }
html.dark .ep-area-clara .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #e5e7eb; }
html.dark .ep-area-clara .focus\:bg-white:focus { background-color: #ffffff; }
html.dark .ep-area-clara .focus\:border-blue-500:focus { border-color: #3b82f6; }
html.dark .ep-area-clara .focus\:border-indigo-600:focus { border-color: #4f46e5; }
html.dark .ep-area-clara .focus\:border-purple-500:focus { border-color: #a855f7; }
html.dark .ep-area-clara .focus\:border-red-500:focus { border-color: #ef4444; }
html.dark .ep-area-clara .focus\:border-yellow-500:focus { border-color: #eab308; }
html.dark .ep-area-clara .focus\:ring-amber-300:focus { --tw-ring-color: #fcd34d; }
html.dark .ep-area-clara .focus\:ring-amber-400:focus { --tw-ring-color: #fbbf24; }
html.dark .ep-area-clara .focus\:ring-amber-500:focus { --tw-ring-color: #f59e0b; }
html.dark .ep-area-clara .focus\:ring-blue-300:focus { --tw-ring-color: #93c5fd; }
html.dark .ep-area-clara .focus\:ring-blue-500:focus { --tw-ring-color: #3b82f6; }
html.dark .ep-area-clara .focus\:ring-gray-200:focus { --tw-ring-color: #e5e7eb; }
html.dark .ep-area-clara .focus\:ring-gray-300:focus { --tw-ring-color: #d1d5db; }
html.dark .ep-area-clara .focus\:ring-green-300:focus { --tw-ring-color: #86efac; }
html.dark .ep-area-clara .focus\:ring-indigo-500:focus { --tw-ring-color: #6366f1; }
html.dark .ep-area-clara .focus\:ring-purple-500:focus { --tw-ring-color: #a855f7; }
html.dark .ep-area-clara .focus\:ring-red-500:focus { --tw-ring-color: #ef4444; }
html.dark .ep-area-clara .focus\:ring-yellow-500:focus { --tw-ring-color: #eab308; }
html.dark .ep-area-clara .group-hover\:text-indigo-400 { color: #818cf8; }
html.dark .ep-area-clara .group-hover\:text-indigo-500 { color: #6366f1; }
html.dark .ep-area-clara .group-hover\:text-indigo-600 { color: #4f46e5; }
html.dark .ep-area-clara .group-hover\:text-indigo-700 { color: #4338ca; }
html.dark .ep-area-clara .hover\:bg-amber-100:hover { background-color: #fef3c7; }
html.dark .ep-area-clara .hover\:bg-amber-200:hover { background-color: #fde68a; }
html.dark .ep-area-clara .hover\:bg-amber-50:hover { background-color: #fffbeb; }
html.dark .ep-area-clara .hover\:bg-amber-600:hover { background-color: #d97706; }
html.dark .ep-area-clara .hover\:bg-blue-100:hover { background-color: #dbeafe; }
html.dark .ep-area-clara .hover\:bg-blue-200:hover { background-color: #bfdbfe; }
html.dark .ep-area-clara .hover\:bg-blue-50:hover { background-color: #eff6ff; }
html.dark .ep-area-clara .hover\:bg-blue-700:hover { background-color: #1d4ed8; }
html.dark .ep-area-clara .hover\:bg-emerald-200:hover { background-color: #a7f3d0; }
html.dark .ep-area-clara .hover\:bg-emerald-700:hover { background-color: #047857; }
html.dark .ep-area-clara .hover\:bg-gray-100:hover { background-color: #f3f4f6; }
html.dark .ep-area-clara .hover\:bg-gray-200:hover { background-color: #e5e7eb; }
html.dark .ep-area-clara .hover\:bg-gray-300:hover { background-color: #d1d5db; }
html.dark .ep-area-clara .hover\:bg-gray-50:hover { background-color: #f9fafb; }
html.dark .ep-area-clara .hover\:bg-gray-600:hover { background-color: #4b5563; }
html.dark .ep-area-clara .hover\:bg-gray-700:hover { background-color: #374151; }
html.dark .ep-area-clara .hover\:bg-gray-800:hover { background-color: #1f2937; }
html.dark .ep-area-clara .hover\:bg-green-100:hover { background-color: #dcfce7; }
html.dark .ep-area-clara .hover\:bg-green-200:hover { background-color: #bbf7d0; }
html.dark .ep-area-clara .hover\:bg-green-600:hover { background-color: #16a34a; }
html.dark .ep-area-clara .hover\:bg-green-700:hover { background-color: #15803d; }
html.dark .ep-area-clara .hover\:bg-indigo-50:hover { background-color: #eef2ff; }
html.dark .ep-area-clara .hover\:bg-indigo-700:hover { background-color: #4338ca; }
html.dark .ep-area-clara .hover\:bg-orange-200:hover { background-color: #fed7aa; }
html.dark .ep-area-clara .hover\:bg-purple-200:hover { background-color: #e9d5ff; }
html.dark .ep-area-clara .hover\:bg-purple-50:hover { background-color: #faf5ff; }
html.dark .ep-area-clara .hover\:bg-purple-700:hover { background-color: #7e22ce; }
html.dark .ep-area-clara .hover\:bg-red-100:hover { background-color: #fee2e2; }
html.dark .ep-area-clara .hover\:bg-red-200:hover { background-color: #fecaca; }
html.dark .ep-area-clara .hover\:bg-red-50:hover { background-color: #fef2f2; }
html.dark .ep-area-clara .hover\:bg-red-700:hover { background-color: #b91c1c; }
html.dark .ep-area-clara .hover\:bg-rose-200:hover { background-color: #fecdd3; }
html.dark .ep-area-clara .hover\:bg-slate-100:hover { background-color: #f1f5f9; }
html.dark .ep-area-clara .hover\:bg-slate-800:hover { background-color: #1e293b; }
html.dark .ep-area-clara .hover\:bg-white:hover { background-color: #ffffff; }
html.dark .ep-area-clara .hover\:bg-yellow-200:hover { background-color: #fef08a; }
html.dark .ep-area-clara .hover\:border-indigo-200:hover { border-color: #c7d2fe; }
html.dark .ep-area-clara .hover\:text-blue-500:hover { color: #3b82f6; }
html.dark .ep-area-clara .hover\:text-blue-600:hover { color: #2563eb; }
html.dark .ep-area-clara .hover\:text-blue-800:hover { color: #1e40af; }
html.dark .ep-area-clara .hover\:text-blue-900:hover { color: #1e3a8a; }
html.dark .ep-area-clara .hover\:text-gray-200:hover { color: #e5e7eb; }
html.dark .ep-area-clara .hover\:text-gray-600:hover { color: #4b5563; }
html.dark .ep-area-clara .hover\:text-gray-700:hover { color: #374151; }
html.dark .ep-area-clara .hover\:text-gray-900:hover { color: #111827; }
html.dark .ep-area-clara .hover\:text-green-600:hover { color: #16a34a; }
html.dark .ep-area-clara .hover\:text-green-700:hover { color: #15803d; }
html.dark .ep-area-clara .hover\:text-green-800:hover { color: #166534; }
html.dark .ep-area-clara .hover\:text-green-900:hover { color: #14532d; }
html.dark .ep-area-clara .hover\:text-indigo-900:hover { color: #312e81; }
html.dark .ep-area-clara .hover\:text-purple-600:hover { color: #9333ea; }
html.dark .ep-area-clara .hover\:text-red-500:hover { color: #ef4444; }
html.dark .ep-area-clara .hover\:text-red-600:hover { color: #dc2626; }
html.dark .ep-area-clara .hover\:text-red-700:hover { color: #b91c1c; }
html.dark .ep-area-clara .hover\:text-red-800:hover { color: #991b1b; }
html.dark .ep-area-clara .hover\:text-red-900:hover { color: #7f1d1d; }
html.dark .ep-area-clara .hover\:text-slate-800:hover { color: #1e293b; }
html.dark .ep-area-clara .hover\:text-white:hover { color: #ffffff; }
html.dark .ep-area-clara .ring-black { --tw-ring-color: #000000; }
html.dark .ep-area-clara .ring-gray-300 { --tw-ring-color: #d1d5db; }
html.dark .ep-area-clara .text-amber-300 { color: #fcd34d; }
html.dark .ep-area-clara .text-amber-500 { color: #f59e0b; }
html.dark .ep-area-clara .text-amber-600 { color: #d97706; }
html.dark .ep-area-clara .text-amber-700 { color: #b45309; }
html.dark .ep-area-clara .text-amber-800 { color: #92400e; }
html.dark .ep-area-clara .text-blue-100 { color: #dbeafe; }
html.dark .ep-area-clara .text-blue-200 { color: #bfdbfe; }
html.dark .ep-area-clara .text-blue-300 { color: #93c5fd; }
html.dark .ep-area-clara .text-blue-500 { color: #3b82f6; }
html.dark .ep-area-clara .text-blue-600 { color: #2563eb; }
html.dark .ep-area-clara .text-blue-700 { color: #1d4ed8; }
html.dark .ep-area-clara .text-blue-800 { color: #1e40af; }
html.dark .ep-area-clara .text-blue-900 { color: #1e3a8a; }
html.dark .ep-area-clara .text-emerald-600 { color: #059669; }
html.dark .ep-area-clara .text-emerald-700 { color: #047857; }
html.dark .ep-area-clara .text-gray-300 { color: #d1d5db; }
html.dark .ep-area-clara .text-gray-400 { color: #9ca3af; }
html.dark .ep-area-clara .text-gray-500 { color: #6b7280; }
html.dark .ep-area-clara .text-gray-600 { color: #4b5563; }
html.dark .ep-area-clara .text-gray-700 { color: #374151; }
html.dark .ep-area-clara .text-gray-800 { color: #1f2937; }
html.dark .ep-area-clara .text-gray-900 { color: #111827; }
html.dark .ep-area-clara .text-green-300 { color: #86efac; }
html.dark .ep-area-clara .text-green-500 { color: #22c55e; }
html.dark .ep-area-clara .text-green-600 { color: #16a34a; }
html.dark .ep-area-clara .text-green-700 { color: #15803d; }
html.dark .ep-area-clara .text-green-800 { color: #166534; }
html.dark .ep-area-clara .text-indigo-500 { color: #6366f1; }
html.dark .ep-area-clara .text-indigo-600 { color: #4f46e5; }
html.dark .ep-area-clara .text-indigo-700 { color: #4338ca; }
html.dark .ep-area-clara .text-indigo-800 { color: #3730a3; }
html.dark .ep-area-clara .text-orange-500 { color: #f97316; }
html.dark .ep-area-clara .text-orange-600 { color: #ea580c; }
html.dark .ep-area-clara .text-orange-700 { color: #c2410c; }
html.dark .ep-area-clara .text-purple-100 { color: #f3e8ff; }
html.dark .ep-area-clara .text-purple-600 { color: #9333ea; }
html.dark .ep-area-clara .text-purple-700 { color: #7e22ce; }
html.dark .ep-area-clara .text-purple-800 { color: #6b21a8; }
html.dark .ep-area-clara .text-red-400 { color: #f87171; }
html.dark .ep-area-clara .text-red-500 { color: #ef4444; }
html.dark .ep-area-clara .text-red-600 { color: #dc2626; }
html.dark .ep-area-clara .text-red-700 { color: #b91c1c; }
html.dark .ep-area-clara .text-red-800 { color: #991b1b; }
html.dark .ep-area-clara .text-rose-700 { color: #be123c; }
html.dark .ep-area-clara .text-slate-100 { color: #f1f5f9; }
html.dark .ep-area-clara .text-slate-200 { color: #e2e8f0; }
html.dark .ep-area-clara .text-slate-300 { color: #cbd5e1; }
html.dark .ep-area-clara .text-slate-400 { color: #94a3b8; }
html.dark .ep-area-clara .text-slate-500 { color: #64748b; }
html.dark .ep-area-clara .text-slate-600 { color: #475569; }
html.dark .ep-area-clara .text-slate-700 { color: #334155; }
html.dark .ep-area-clara .text-slate-900 { color: #0f172a; }
html.dark .ep-area-clara .text-white { color: #ffffff; }
html.dark .ep-area-clara .text-yellow-500 { color: #eab308; }
html.dark .ep-area-clara .text-yellow-600 { color: #ca8a04; }
html.dark .ep-area-clara .text-yellow-700 { color: #a16207; }
html.dark .ep-area-clara .text-yellow-800 { color: #854d0e; }

/* ============================================================================
   [TEMA-ESCURO] Camada de componentes
   Tudo que o remapeamento de classes utilitarias NAO alcanca: controles nativos,
   sidebar, modais, menu do perfil, tooltips, bibliotecas de terceiros, barras de
   rolagem, transicao em circulo e a trava de impressao.
   ============================================================================ */

/* ---- tokens ---------------------------------------------------------------- */
html.dark {
    --ep-bg:        #1a1917;
    --ep-surf:      #262523;
    --ep-surf-2:    #2e2d2a;
    --ep-surf-3:    #383632;
    --ep-surf-4:    #423f3a;
    --ep-border:    #3d3b36;
    --ep-border-s:  #4c4942;
    --ep-txt:       #f5f2ec;
    --ep-txt-2:     #c2bcb2;
    --ep-txt-3:     #a09a90;
    --ep-azul:      #60a5fa;

    /* Faz o navegador desenhar em modo escuro os controles NATIVOS: calendario
       do input[type=date], setas do number, lista do select, barra de rolagem.
       Sem isto o seletor de data abre branco e o icone some no fundo escuro. */
    color-scheme: dark;
    background-color: var(--ep-bg);
}

html.dark body {
    background-color: var(--ep-bg);
    color: var(--ep-txt);
}

/* ---- sidebar --------------------------------------------------------------- */
/* No claro ela e navy. No escuro vira superficie profunda com um respiro azul,
   preservando a identidade sem virar um bloco aceso sobre o fundo preto. */
html.dark .sidebar {
    background:
        radial-gradient(900px 320px at -10% -8%, rgba(255, 236, 205, 0.045), transparent 60%),
        radial-gradient(600px 280px at 110% 108%, rgba(255, 214, 170, 0.035), transparent 55%),
        linear-gradient(180deg, #2b2926 0%, #232120 55%, #1d1b19 100%) !important;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.5);
    border-right: 1px solid var(--ep-border);
}
html.dark .sidebar .menu-item:hover { background-color: var(--ep-surf-3) !important; }
html.dark .sidebar .menu-item.bg-blue-900,
html.dark .sidebar div.bg-blue-900 { background-color: var(--ep-surf-3) !important; }
html.dark .sidebar .border-blue-700 { border-color: var(--ep-border) !important; }
html.dark .sidebar .text-blue-300 { color: #7cc0f8 !important; }

/* ---- superficies e cards --------------------------------------------------- */
html.dark .bg-white.rounded-lg.shadow {
    border-color: var(--ep-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px -14px rgba(0, 0, 0, 0.6);
}
html.dark #dashboard-content .bg-white.rounded-lg.shadow:hover {
    box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.55), 0 10px 14px -6px rgba(0, 0, 0, 0.4);
    border-color: rgba(96, 165, 250, 0.32);
}
html.dark header { background-color: var(--ep-surf) !important; box-shadow: 0 1px 0 var(--ep-border); }
html.dark main { background-color: var(--ep-bg) !important; }

/* ---- tabelas --------------------------------------------------------------- */
html.dark tbody tr:hover { background-color: var(--ep-surf-3) !important; }
html.dark thead.bg-gray-50 th,
html.dark thead .bg-gray-50 { color: var(--ep-txt-2); }
html.dark thead th { background-color: #211f1d; }
html.dark table { border-color: var(--ep-border); }

/* ---- CAMPOS DE FORMULARIO --------------------------------------------------
   O ponto mais critico: campo escuro com texto escuro e o defeito classico.
   Fundo, texto, placeholder, borda e opcoes ficam explicitos.               */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: var(--ep-surf-2) !important;
    color: var(--ep-txt) !important;
    border-color: var(--ep-border-s) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: var(--ep-txt-3) !important; opacity: 1; }
html.dark select option,
html.dark select optgroup {
    background-color: var(--ep-surf-2);
    color: var(--ep-txt);
}
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: var(--ep-azul) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22);
    outline: none;
}
html.dark input:disabled,
html.dark select:disabled,
html.dark textarea:disabled,
html.dark input[readonly] {
    background-color: #232120 !important;
    color: var(--ep-txt-3) !important;
}
/* Checkbox e radio nativos acompanham o esquema escuro */
html.dark input[type="checkbox"],
html.dark input[type="radio"] { accent-color: var(--ep-azul); }
/* Icone do seletor de data: por padrao e preto e desaparece no fundo escuro */
html.dark input[type="date"]::-webkit-calendar-picker-indicator,
html.dark input[type="time"]::-webkit-calendar-picker-indicator,
html.dark input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(0.85); cursor: pointer; }
html.dark input[type="file"] { color: var(--ep-txt-2) !important; }
html.dark input[type="file"]::file-selector-button {
    background-color: var(--ep-surf-3); color: var(--ep-txt);
    border: 1px solid var(--ep-border-s); border-radius: 8px; padding: 6px 12px; margin-right: 10px; cursor: pointer;
}
html.dark input[type="color"] { background-color: var(--ep-surf-2) !important; padding: 2px; }
/* Autofill do Chrome pinta o campo de amarelo-claro com texto preto */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ep-txt);
    -webkit-box-shadow: 0 0 0 1000px var(--ep-surf-2) inset;
    caret-color: var(--ep-txt);
}
html.dark label { color: var(--ep-txt-2); }

/* ---- modais ---------------------------------------------------------------- */
html.dark div[id$="-modal"].fixed { background-color: rgba(0, 0, 0, 0.68) !important; }
html.dark div[id$="-modal"].fixed > div {
    background-color: var(--ep-surf);
    border: 1px solid var(--ep-border);
    box-shadow: 0 24px 70px -20px rgba(0, 0, 0, 0.8);
}
/* Cantos mais generosos em todo modal (vale nos dois temas) */
div[id$="-modal"].fixed > div { border-radius: 18px; }
html.dark .bg-gray-50.px-6.py-4.border-t { background-color: #211f1d; border-color: var(--ep-border); }

/* ---- notificacoes toast ---------------------------------------------------- */
html.dark #success-notification,
html.dark #error-notification,
html.dark #warning-notification { box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.75); }

/* ---- tooltips -------------------------------------------------------------- */
html.dark .tooltip-text {
    background-color: #383632 !important;
    color: var(--ep-txt) !important;
    border: 1px solid var(--ep-border-s);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
html.dark .tooltip-text::after { border-top-color: #383632 !important; border-bottom-color: #383632 !important; }

/* ---- Tom Select (campo de item com busca) ---------------------------------- */
html.dark .ts-wrapper .ts-control,
html.dark .ts-wrapper.single .ts-control {
    background: var(--ep-surf-2) !important;
    color: var(--ep-txt) !important;
    border-color: var(--ep-border-s) !important;
}
html.dark .ts-control input,
html.dark .ts-control > input { color: var(--ep-txt) !important; background: transparent !important; }
html.dark .ts-control input::placeholder { color: var(--ep-txt-3) !important; }
html.dark .ts-dropdown {
    background: var(--ep-surf-2) !important;
    color: var(--ep-txt) !important;
    border-color: var(--ep-border-s) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}
html.dark .ts-dropdown .option { color: var(--ep-txt) !important; }
html.dark .ts-dropdown .active { background: var(--ep-surf-4) !important; color: var(--ep-txt) !important; }
html.dark .ts-dropdown .optgroup-header { background: #211f1d !important; color: var(--ep-txt-3) !important; }
html.dark .ts-dropdown .create { color: var(--ep-azul) !important; }
html.dark .ts-wrapper.plugin-remove_button .item .remove { border-left-color: var(--ep-border-s) !important; }

/* ---- barras de rolagem ------------------------------------------------------ */
html.dark ::-webkit-scrollbar-thumb { background: #4f4b44; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #635e56; }

/* ---- badges e blocos especificos -------------------------------------------- */
html.dark .pro-price-callout { background: linear-gradient(180deg, #1e2940, #262523); border-color: #324a6d; }
html.dark .fin-tab { color: var(--ep-txt-3); }
html.dark .fin-tab:hover { color: var(--ep-txt-2); }
html.dark .fin-tab-on { color: var(--ep-txt); border-bottom-color: var(--ep-azul); }
html.dark .fin-chip { background: var(--ep-surf-2); border-color: var(--ep-border-s); color: var(--ep-txt-2); }
html.dark .fin-chip:hover { border-color: #3b6fb8; }
html.dark .fin-chip-on { background: #2563eb; border-color: #2563eb; color: #fff; }
html.dark .fin-badge-pago { background: #1c3324; color: #6ee7a0; }
html.dark .fin-badge-pendente { background: #3a2c11; color: #f5c15e; }
html.dark .fin-badge-atrasado { background: #3a1d1a; color: #f79393; }
html.dark .fin-tipo-fornecedor_produto { background: #1e2940; color: #8fbdf5; }
html.dark .fin-tipo-prestador_servico { background: #2b2140; color: #c4a2f7; }
html.dark .fin-tipo-cliente { background: #1c3324; color: #6ee7a0; }
html.dark .fin-tipo-outro { background: var(--ep-surf-3); color: var(--ep-txt-2); }
html.dark .fin-toggle { background: var(--ep-surf-2); border-color: var(--ep-border-s); color: var(--ep-txt-2); }
html.dark .fin-toggle-receber { background: #1c3324; border-color: #2f7d4f; color: #6ee7a0; }
html.dark .fin-toggle-pagar { background: #3a1d1a; border-color: #8b3a3a; color: #f79393; }
html.dark .fin-seg { background: var(--ep-surf-2); border-color: var(--ep-border-s); color: var(--ep-txt-2); }
html.dark .fin-seg-on { background: #2563eb; border-color: #2563eb; color: #fff; }
html.dark .fin-acesso-aviso { background: #3a2c11; border-color: #6b4d13; color: #f5c15e; }
html.dark .fin-lock-badge { background: var(--ep-surf-3); color: var(--ep-txt-3); }
html.dark .help-chapter-item { background: var(--ep-surf-2); border-color: var(--ep-border); color: var(--ep-txt-2); }
html.dark .help-chapter-item:hover { background: var(--ep-surf-3); }
html.dark .help-chapter-item.active { background: #1e2940; border-color: #324a6d; color: var(--ep-txt); }
html.dark .help-chapter-time { background: var(--ep-surf-3); color: var(--ep-txt-3); }
html.dark .support-submenu { border-color: var(--ep-border); }

/* ---- login / cadastro -------------------------------------------------------- */
/* A aurora azul continua, so que rebaixada para nao ofuscar quem escolheu escuro */
html.dark .animated-bg {
    background: linear-gradient(-45deg, #14120f, #221d17, #2c251c, #1a1714, #100f0d);
    background-size: 400% 400%;
}
html.dark .glass-card {
    background: rgba(38, 37, 35, 0.86) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
}
html.dark .glass-input {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--ep-txt) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}
html.dark .glass-input::placeholder { color: rgba(255, 255, 255, 0.45) !important; }

/* ============================================================================
   BOTAO DE PERFIL E MENU (vale nos DOIS temas)
   ============================================================================ */
#profile-button {
    width: 40px; height: 40px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: #f1f5f9; color: #475569;
    border: 1px solid #e2e8f0;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
#profile-button:hover { background: #e2e8f0; transform: translateY(-1px); }
html.dark #profile-button { background: var(--ep-surf-2); color: var(--ep-txt-2); border-color: var(--ep-border-s); }
html.dark #profile-button:hover { background: var(--ep-surf-3); color: var(--ep-txt); }

#notification-button { border-radius: 999px; }
html.dark #notification-button:hover { background-color: var(--ep-surf-3) !important; }

#profile-menu {
    width: 264px;
    padding: 6px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    box-shadow: 0 18px 44px -12px rgba(15, 23, 42, 0.22);
    transform-origin: top right;
    animation: epMenuIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes epMenuIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
html.dark #profile-menu {
    background: var(--ep-surf);
    border-color: var(--ep-border-s);
    box-shadow: 0 22px 60px -14px rgba(0, 0, 0, 0.8);
}
.ep-menu-cabecalho { padding: 10px 12px 9px; }
.ep-menu-nome { font-size: 0.875rem; font-weight: 600; color: #111827; line-height: 1.3; }
.ep-menu-sub  { font-size: 0.75rem; color: #6b7280; margin-top: 1px; }
html.dark .ep-menu-nome { color: var(--ep-txt); }
html.dark .ep-menu-sub  { color: var(--ep-txt-3); }
.ep-menu-divisor { height: 1px; background: #e5e7eb; margin: 4px 8px; }
html.dark .ep-menu-divisor { background: var(--ep-border); }
.ep-menu-item {
    display: flex; align-items: center; gap: 11px;
    width: 100%; padding: 9px 12px;
    border-radius: 10px; border: none; background: transparent;
    font-size: 0.8125rem; color: #374151; text-align: left; cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ep-menu-item:hover { background: #f1f5f9; color: #111827; }
.ep-menu-item i:first-child { width: 16px; text-align: center; color: #9ca3af; font-size: 0.9rem; }
.ep-menu-item:hover i:first-child { color: #4b5563; }
html.dark .ep-menu-item { color: var(--ep-txt-2); }
html.dark .ep-menu-item:hover { background: var(--ep-surf-3); color: var(--ep-txt); }
html.dark .ep-menu-item i:first-child { color: var(--ep-txt-3); }
html.dark .ep-menu-item:hover i:first-child { color: var(--ep-txt-2); }
.ep-menu-item-sair { color: #dc2626; }
.ep-menu-item-sair i:first-child { color: #f87171; }
.ep-menu-item-sair:hover { background: #fef2f2; color: #b91c1c; }
html.dark .ep-menu-item-sair { color: #f79393; }
html.dark .ep-menu-item-sair:hover { background: #331e1a; color: #fca5a5; }
.ep-menu-rotulo { flex: 1; }

/* interruptor claro/escuro dentro do menu */
.ep-switch {
    width: 36px; height: 20px; border-radius: 999px;
    background: #cbd5e1; position: relative; flex: none;
    transition: background-color 0.22s ease;
}
.ep-switch-bolinha {
    position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 999px; background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    transition: left 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
html.dark .ep-switch { background: #2f7fe8; }
html.dark .ep-switch .ep-switch-bolinha { left: 18px; }
#ep-tema-item[aria-checked="true"] .ep-switch { background: #2f7fe8; }

/* ============================================================================
   CARD DE NOVIDADE (apresenta o modo escuro) — sempre escuro nos dois temas
   ============================================================================ */
#ep-tema-novidade {
    position: absolute; top: 62px; right: 18px; z-index: 60;
    width: 310px; padding: 14px;
    background: #262523; border: 1px solid #3d3b36; border-radius: 16px;
    box-shadow: 0 24px 60px -16px rgba(2, 6, 23, 0.55);
    animation: epNovidadeIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes epNovidadeIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
#ep-tema-novidade.ep-saindo { opacity: 0; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease; }
.ep-novidade-palco {
    height: 96px; border-radius: 11px; background: #191816;
    border: 1px solid #34322e; overflow: hidden; position: relative; margin-bottom: 12px;
}
.ep-novidade-palco::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 35%, rgba(109, 92, 240, 0.16) 50%, transparent 65%);
    animation: epBrilho 2.6s ease-in-out infinite;
}
@keyframes epBrilho { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
.ep-novidade-mini { position: absolute; inset: 10px; display: flex; gap: 6px; }
.ep-novidade-mini-lat { width: 26%; border-radius: 6px; background: #2e2d2a; }
.ep-novidade-mini-corpo { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.ep-novidade-mini-barra { height: 13px; border-radius: 4px; background: #2e2d2a; }
.ep-novidade-mini-card { flex: 1; border-radius: 6px; background: #2e2d2a; }
.ep-novidade-titulo { font-size: 0.8125rem; font-weight: 600; color: #f5f2ec; margin-bottom: 4px; }
.ep-novidade-texto { font-size: 0.75rem; line-height: 1.55; color: #a8a6a3; }
.ep-novidade-acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 13px; }
.ep-novidade-btn {
    padding: 6px 14px; font-size: 0.75rem; font-weight: 600;
    border-radius: 999px; cursor: pointer; transition: all 0.15s ease;
}
.ep-novidade-btn-fantasma { background: transparent; border: 1px solid #55514a; color: #e7e5e4; }
.ep-novidade-btn-fantasma:hover { background: #383632; }
.ep-novidade-btn-solido { background: #fafaf9; border: 1px solid #fafaf9; color: #1c1917; }
.ep-novidade-btn-solido:hover { background: #e7e5e4; }

/* ============================================================================
   TRANSICAO EM CIRCULO (View Transitions API)
   ============================================================================ */
@supports (view-transition-name: none) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
    ::view-transition-old(root) { z-index: 1; }
    ::view-transition-new(root) { z-index: 2147483646; }
    html.ep-trocando-tema::view-transition-group(root) { animation-duration: 420ms; }
}
/* Sem suporte: esmaecimento curto no lugar do circulo */
.ep-fade-tema { animation: epFadeTema 0.28s ease; }
@keyframes epFadeTema { from { opacity: 0.35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
    .ep-fade-tema { animation: none !important; }
    #ep-tema-novidade, #profile-menu { animation: none !important; }
    .ep-novidade-palco::after { animation: none !important; }
}

/* ============================================================================
   TRAVA DE IMPRESSAO — relatorio e PDF NUNCA saem escuros
   ============================================================================ */
@media print {
    html.dark, html.dark body {
        background: #ffffff !important;
        color: #000000 !important;
        color-scheme: light !important;
    }
    html.dark * {
        background-color: transparent !important;
        color: #000000 !important;
        border-color: #000000 !important;
        box-shadow: none !important;
    }
    html.dark .sidebar, html.dark #profile-menu,
    html.dark #ep-tema-novidade { display: none !important; }
}

/* Chip de recorrencia do Financeiro (antes era estilo inline, que o tema
   escuro nao alcancava). */
.fin-badge-recorrencia { background: #e8f0ff; color: #2563eb; }
html.dark .fin-badge-recorrencia { background: #16233a; color: #8fbdf5; }

/* ============================================================================
   [MOBILE] Layout responsivo do EstoquePro
   O sistema nasceu so para desktop: sidebar fixa de 256px e conteudo com
   ml-64. Abaixo de 1024px a sidebar passa a ser uma gaveta que desliza por
   cima, o conteudo ocupa a largura toda e o cabecalho encolhe.
   Nada aqui altera o desktop: tudo esta dentro de media queries.
   ============================================================================ */

/* ---- fundo escurecido da gaveta (existe nos dois temas) -------------------- */
#ep-menu-fundo {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(2px);
    z-index: 10055;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
}
html.ep-menu-aberto #ep-menu-fundo { opacity: 1; pointer-events: auto; }
html.dark #ep-menu-fundo { background: rgba(0, 0, 0, 0.66); }

/* ---- botao hamburguer ------------------------------------------------------ */
#ep-abrir-menu {
    display: none;                 /* so aparece no mobile, via media query */
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    border-radius: 10px; border: none;
    background: transparent; color: #475569;
    font-size: 1.05rem; cursor: pointer; flex: none;
    transition: background-color 0.15s ease;
}
#ep-abrir-menu:hover { background: #f1f5f9; }
html.dark #ep-abrir-menu { color: var(--ep-txt-2); }
html.dark #ep-abrir-menu:hover { background: var(--ep-surf-3); }

/* ---- botao de fechar dentro da gaveta -------------------------------------- */
#ep-fechar-menu {
    display: none;
    position: absolute; top: 14px; right: 12px;
    width: 34px; height: 34px;
    align-items: center; justify-content: center;
    border-radius: 999px; border: none;
    background: rgba(255, 255, 255, 0.12); color: #fff;
    cursor: pointer; z-index: 2;
}
#ep-fechar-menu:hover { background: rgba(255, 255, 255, 0.22); }

/* ============================================================================
   ATE 1023px — celular e tablet
   ============================================================================ */
@media (max-width: 1023.98px) {

    /* ---- a sidebar vira gaveta --------------------------------------------- */
    /* O !important aqui NAO e preguica: o Tailwind entra pelo CDN e injeta o
       estilo dele DEPOIS do app.css, entao em empate de especificidade ele
       vence. A sidebar carrega .z-10 e .h-full no HTML -- sem o !important a
       gaveta abria atras do fundo escurecido (parecia "ofuscada") e com a
       altura errada no celular. */
    .sidebar {
        width: 274px !important;
        max-width: 86vw;
        transform: translateX(-100%);
        transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 10060 !important;
        box-shadow: none;
        /* 100dvh acompanha a barra de endereco do navegador no celular */
        height: 100dvh !important;
        padding-bottom: env(safe-area-inset-bottom);
    }
    html.ep-menu-aberto .sidebar {
        transform: translateX(0);
        box-shadow: 10px 0 40px rgba(2, 6, 23, 0.45);
    }
    /* O "recolher menu" e conceito de desktop: no mobile a gaveta e sempre inteira */
    .sidebar.collapsed { width: 274px !important; }
    .sidebar.collapsed .sidebar-text,
    .sidebar.collapsed .logo-text { display: inline !important; }
    .sidebar.collapsed .menu-item { justify-content: flex-start !important; }
    .sidebar.collapsed .menu-item i { margin-right: 0.75rem !important; }
    #toggle-sidebar { display: none !important; }
    #ep-fechar-menu { display: flex; }

    /* ---- o conteudo ocupa a tela toda -------------------------------------- */
    .main-content,
    .sidebar.collapsed + .main-content { margin-left: 0 !important; }

    /* ---- cabecalho compacto ------------------------------------------------- */
    header > div.flex.justify-between { padding: 0.625rem 0.75rem; gap: 0.5rem; }
    #ep-abrir-menu { display: flex; }
    #page-title {
        font-size: 1.125rem;
        line-height: 1.3;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    header .flex.items-center.space-x-4 > * + * { margin-left: 0.375rem; }

    /* ---- area util ---------------------------------------------------------- */
    main { padding: 0.875rem !important; }
    main > div > .flex.justify-between.items-center { flex-wrap: wrap; gap: 0.625rem; }

    /* ---- tabelas: rolagem horizontal em vez de estouro ---------------------- */
    .ep-tabela-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .ep-tabela-scroll > table { min-width: 640px; }

    /* ---- barras de filtro quebram em varias linhas -------------------------- */
    .flex.flex-wrap.items-center.gap-2,
    .flex.items-center.gap-2.flex-wrap { row-gap: 0.5rem; }

    /* ---- modais ------------------------------------------------------------- */
    div[id$="-modal"].fixed { padding: 10px; align-items: flex-end; }
    div[id$="-modal"].fixed > div {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 20px);
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        border-radius: 20px;
    }
    /* o miolo do modal e que rola, nao a pagina inteira */
    div[id$="-modal"].fixed > div > *:not(:first-child):not(:last-child) { min-height: 0; }
    div[id$="-modal"].fixed .max-h-\\[70vh\\],
    div[id$="-modal"].fixed .max-h-\\[60vh\\] { max-height: 50dvh !important; }

    /* ---- barra flutuante de acoes em massa --------------------------------- */
    #bulk-actions-bar {
        left: 10px !important; right: 10px !important;
        transform: none !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    /* ---- menu do perfil e card de novidade ---------------------------------- */
    #profile-menu { width: min(280px, calc(100vw - 24px)); }
    #ep-tema-novidade {
        width: calc(100vw - 24px);
        right: 12px;
        top: 56px;
    }

    /* ---- alvos de toque de 44px (recomendacao de acessibilidade) ------------ */
    /* .py-2 no HTML empata em especificidade e, vindo do CDN depois do
       app.css, venceria: sem !important o alvo de toque nao aumentava. */
    .menu-item { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
    .ep-menu-item { padding-top: 11px; padding-bottom: 11px; }

    /* ---- iOS: fonte < 16px em campo faz o Safari dar zoom sozinho ----------- */
    input, select, textarea { font-size: 16px !important; }

    /* ---- centro de ajuda: o painel lateral vai para baixo -------------------- */
    #help-center-modal aside { width: 100% !important; }
}

/* ============================================================================
   ATE 639px — celular estreito
   ============================================================================ */
@media (max-width: 639.98px) {
    /* Formularios de duas colunas ficam apertados demais em 380px */
    div[id$="-modal"] .grid-cols-2 { grid-template-columns: 1fr; }

    main { padding: 0.75rem !important; }
    #page-title { font-size: 1rem; }

    /* Botoes de acao ocupam a linha inteira, mais faceis de acertar */
    div[id$="-modal"] .flex.justify-end.gap-3 > button,
    div[id$="-modal"] .flex.justify-end.space-x-3 > button { flex: 1 1 auto; }

    /* Rodape de paginacao empilha */
    nav[aria-label="Pagination"] { flex-wrap: wrap; justify-content: center; }
}

/* ============================================================================
   Instalado como aplicativo (standalone): respeita as areas seguras do aparelho
   ============================================================================ */
@media all and (display-mode: standalone) {
    header > div.flex.justify-between { padding-top: calc(0.625rem + env(safe-area-inset-top)); }
    main { padding-bottom: calc(0.875rem + env(safe-area-inset-bottom)) !important; }
}

/* A gaveta nunca aparece na impressao */
@media print {
    #ep-menu-fundo, #ep-abrir-menu, #ep-fechar-menu { display: none !important; }
}

/* ============================================================================
   [AVALIACAO] Convite de avaliacao — canto inferior direito
   Substitui o botao "Avaliar" do cabecalho e o modal de tela cheia. Aparece
   uma vez por mes para cada usuario, com X para dispensar.
   ============================================================================ */

#ep-avaliacao {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 348px;
    max-width: calc(100vw - 32px);
    z-index: 10001;
    padding: 18px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 24px 60px -18px rgba(15, 23, 42, 0.28), 0 4px 12px -4px rgba(15, 23, 42, 0.10);
    animation: epAvEntra 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
html.dark #ep-avaliacao {
    background: var(--ep-surf);
    border-color: var(--ep-border-s);
    box-shadow: 0 26px 70px -18px rgba(0, 0, 0, 0.8);
}
@keyframes epAvEntra {
    from { opacity: 0; transform: translateY(22px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
#ep-avaliacao.ep-av-saindo {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    transition: opacity 0.24s ease, transform 0.24s ease;
}

/* ---- botao de dispensar ---------------------------------------------------- */
#ep-avaliacao-fechar {
    position: absolute;
    top: 10px; right: 10px;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 999px;
    background: transparent; color: #9ca3af;
    font-size: 0.8rem; cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
#ep-avaliacao-fechar:hover { background: #f1f5f9; color: #475569; }
html.dark #ep-avaliacao-fechar { color: var(--ep-txt-3); }
html.dark #ep-avaliacao-fechar:hover { background: var(--ep-surf-3); color: var(--ep-txt); }

/* ---- topo ------------------------------------------------------------------ */
.ep-av-topo { display: flex; align-items: flex-start; gap: 11px; padding-right: 26px; }
.ep-av-selo {
    width: 38px; height: 38px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: #fff; font-size: 0.95rem;
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.7);
}
.ep-av-titulo { font-size: 0.9375rem; font-weight: 600; color: #111827; line-height: 1.3; }
.ep-av-sub { font-size: 0.75rem; color: #6b7280; margin-top: 2px; }
html.dark .ep-av-titulo { color: var(--ep-txt); }
html.dark .ep-av-sub { color: var(--ep-txt-3); }

/* ---- estrelas -------------------------------------------------------------- */
.ep-av-estrelas { display: flex; gap: 6px; margin: 15px 0 6px; }
.ep-av-estrela {
    flex: 1;
    height: 42px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #e5e7eb; border-radius: 11px;
    background: #f8fafc; color: #cbd5e1;
    font-size: 1rem; cursor: pointer;
    transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.ep-av-estrela:hover { transform: translateY(-2px); border-color: #bfdbfe; }
.ep-av-estrela.ep-av-on {
    background: #fffbeb; border-color: #fcd34d; color: #f59e0b;
}
html.dark .ep-av-estrela { background: var(--ep-surf-2); border-color: var(--ep-border); color: #6b665d; }
html.dark .ep-av-estrela:hover { border-color: #3b6fb8; }
html.dark .ep-av-estrela.ep-av-on { background: #332a13; border-color: #6f5a1c; color: #fbbf24; }

.ep-av-nota-texto {
    font-size: 0.75rem; color: #6b7280; text-align: center; min-height: 18px;
    transition: color 0.15s ease;
}
html.dark .ep-av-nota-texto { color: var(--ep-txt-3); }

/* ---- segundo passo: comentario e envio -------------------------------------- */
#ep-avaliacao-passo2 { margin-top: 12px; animation: epAvAbre 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes epAvAbre {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
#ep-avaliacao-texto {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.8125rem;
    line-height: 1.5;
    border: 1px solid #e5e7eb;
    border-radius: 11px;
    background: #f8fafc;
    color: #111827;
    resize: none;
}
#ep-avaliacao-texto:focus {
    outline: none;
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}
html.dark #ep-avaliacao-texto { background: var(--ep-surf-2); border-color: var(--ep-border-s); color: var(--ep-txt); }
html.dark #ep-avaliacao-texto:focus { border-color: var(--ep-azul); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22); }

.ep-av-acoes { display: flex; justify-content: flex-end; margin-top: 10px; }
#ep-avaliacao-enviar {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px;
    font-size: 0.8125rem; font-weight: 600;
    border: none; border-radius: 999px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff; cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(37, 99, 235, 0.8);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
#ep-avaliacao-enviar:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(37, 99, 235, 0.9); }
#ep-avaliacao-enviar:disabled { opacity: 0.65; cursor: default; transform: none; }

.ep-av-erro {
    margin-top: 9px;
    font-size: 0.75rem;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 9px;
    padding: 7px 10px;
}
html.dark .ep-av-erro { color: #f79393; background: #331e1a; border-color: #5f3129; }

/* ============================================================================
   Tela de sucesso: o aviaozinho decola e deixa o aviso
   ============================================================================ */
#ep-avaliacao-sucesso { padding: 6px 0 4px; text-align: center; }
.ep-av-palco {
    position: relative;
    height: 92px;
    margin-bottom: 6px;
    overflow: hidden;
}
.ep-av-palco svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* rastro pontilhado que se desenha antes do aviao passar */
.ep-av-rastro {
    fill: none;
    stroke: #93c5fd;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 4 7;
    stroke-dashoffset: 220;
    animation: epAvRastro 1.05s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}
html.dark .ep-av-rastro { stroke: #3b6fb8; }
@keyframes epAvRastro {
    from { stroke-dashoffset: 220; opacity: 1; }
    70%  { stroke-dashoffset: 0; opacity: 1; }
    to   { stroke-dashoffset: 0; opacity: 0.35; }
}

/* o aviao acompanha o rastro e sai pela direita */
.ep-av-aviao {
    fill: #2563eb;
    offset-path: path('M 24 74 C 74 74, 108 52, 150 16');
    offset-rotate: auto;
    animation: epAvVoa 1.15s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}
html.dark .ep-av-aviao { fill: #60a5fa; }
@keyframes epAvVoa {
    from { offset-distance: 0%;   opacity: 0; transform: scale(0.6); }
    18%  { opacity: 1; }
    82%  { opacity: 1; transform: scale(1); }
    to   { offset-distance: 100%; opacity: 0; transform: scale(0.75); }
}

/* Navegador sem offset-path: o aviao ainda cruza a tela na diagonal */
@supports not (offset-path: path('M 0 0 L 1 1')) {
    .ep-av-aviao {
        transform-origin: center;
        animation: epAvVoaSimples 1.15s cubic-bezier(0.45, 0, 0.25, 1) forwards;
    }
    @keyframes epAvVoaSimples {
        from { transform: translate(0, 0) scale(0.6); opacity: 0; }
        18%  { opacity: 1; }
        82%  { opacity: 1; }
        to   { transform: translate(128px, -58px) scale(0.75); opacity: 0; }
    }
}

.ep-av-sucesso-titulo {
    font-size: 0.9375rem; font-weight: 600; color: #111827;
    opacity: 0;
    animation: epAvSurge 0.42s ease 0.85s forwards;
}
.ep-av-sucesso-sub {
    font-size: 0.75rem; color: #6b7280; margin-top: 3px;
    opacity: 0;
    animation: epAvSurge 0.42s ease 1s forwards;
}
html.dark .ep-av-sucesso-titulo { color: var(--ep-txt); }
html.dark .ep-av-sucesso-sub { color: var(--ep-txt-3); }
@keyframes epAvSurge {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- celular --------------------------------------------------------------- */
@media (max-width: 639.98px) {
    #ep-avaliacao {
        right: 12px; left: 12px;
        width: auto;
        bottom: calc(12px + env(safe-area-inset-bottom));
    }
    .ep-av-estrela { height: 46px; }
}

/* ---- quem pediu menos movimento recebe menos movimento --------------------- */
@media (prefers-reduced-motion: reduce) {
    #ep-avaliacao, #ep-avaliacao-passo2,
    .ep-av-rastro, .ep-av-aviao,
    .ep-av-sucesso-titulo, .ep-av-sucesso-sub { animation: none !important; opacity: 1 !important; }
}

/* nunca sai no papel */
@media print { #ep-avaliacao { display: none !important; } }

/* ==========================================================================
   [MODAL-PISCA 13/08/2026] Corpo de modal nao pode se auto-corrigir sozinho.

   Os modais tem DOIS roladores aninhados: um externo (fixed inset-0) que
   centraliza o painel e o corpo interno rolavel. O TomSelect desenha a lista
   DENTRO do corpo, entao abrir a lista muda a altura do conteudo. Com a
   ancoragem automatica ligada, o navegador ajusta o scrollTop para "segurar"
   um elemento de referencia — e cada ajuste muda qual e a referencia do
   ajuste seguinte. O resultado que a cliente viu foi o conteudo do modal
   pulando entre duas posicoes varias vezes por segundo.

   overflow-anchor: none desliga so essa correcao automatica. A rolagem
   normal, do usuario e do scrollIntoView, continua igual.
   ========================================================================== */
div[id$="-modal"] .overflow-y-auto,
div[id$="-modal"] .custom-scrollbar {
    overflow-anchor: none;
}

/* A lista do TomSelect por cima de tudo dentro do modal, para nunca ficar
   cortada pelo cabecalho fixo (que e z-20). */
div[id$="-modal"] .ts-dropdown {
    z-index: 30;
}

/* ==========================================================================
   [ROLAGEM-UNICA 02/09/2026] Uma barra de rolagem so — a interna.

   SINTOMA: na tela de Relatorios apareciam DUAS barras. A externa rolava o
   documento e fazia a faixa do topo (titulo e sino) sumir; a interna rolava o
   conteudo e mantinha a faixa no lugar.

   CAUSA: o TomSelect esconde o <select> original com .ts-hidden-accessible.
   A regra da biblioteca (2.2.2) define width: 1px mas NAO define height, entao
   o select continua com ~21px de altura real, em position: absolute. Como
   nenhum ancestral dele era posicionado, o bloco contentor virava o documento
   inteiro — e absoluto nessa condicao escapa do overflow: hidden do shell e
   estica a altura do documento. O campo Categoria (#report-category) fica la
   embaixo na pagina de Relatorios e levava o documento a 1.199px.

   POR QUE SO EM RELATORIOS: e a unica tela com um TomSelect fundo o bastante
   na pagina. Dashboard, Itens, Movimentacoes, Analise Financeira, Curva ABC,
   Compras e Alertas foram medidas e davam zero.

   CORRECAO: o <main> passa a ser o bloco contentor dos absolutos que vivem
   dentro dele. Eles voltam a ser recortados pelo overflow do proprio <main> e
   param de esticar o documento. E correcao de causa: vale para qualquer
   TomSelect futuro, em qualquer tela, sem depender do CSS da biblioteca.

   ESPECIFICIDADE: o seletor usa id (1,1,1) e vence qualquer utilitario do
   Tailwind, que entra por CDN DEPOIS deste arquivo (licao da gaveta mobile).

   MEDIDO ANTES x DEPOIS (tela de Relatorios): 1920x1080 199px -> 0;
   1920x760 439px -> 0; 1280x560 639px -> 0; 390x780 (celular) 3.546px -> 0.
   A rolagem interna do <main> segue identica, e o layout nao muda um pixel.
   ========================================================================== */
#app-container main.overflow-y-auto {
    position: relative;
}

/* Reforco para o mesmo defeito: devolve altura de 1px ao <select> escondido,
   compensada por margin negativa. Sozinha nao resolveria (o que pesa e a
   POSICAO do elemento, nao a altura dele), mas evita que o mesmo select volte
   a somar altura caso um dia apareca fora de um contentor posicionado. */
.ts-hidden-accessible {
    height: 1px !important;
    margin: -1px !important;
}

/* ============================================================================
   [AJUDA] Chat de ajuda guiado, botao flutuante e "?" do titulo da tela
   So classes e ids proprios (ep-aj-*, ep-ajuda-*): nenhum utilitario do
   Tailwind no mesmo elemento, entao nao existe empate de especificidade com o
   CDN (licao da gaveta mobile). A unica excecao e a classe "hidden", que o
   app.js liga e desliga: por isso as regras .hidden com !important abaixo.
   5.9: o botao virou o Estoki (mascote) e fala por baloes (#ep-estoki-balao).
   Camadas: barra de itens marcados 40 < botao e balao 45 < painel 48 <
   anel 49 < cabecalho e modais 50. No celular o painel ocupa a tela (10052), acima dos
   avisos (10050) e abaixo da gaveta do menu (10055+). Aberto pelo "Entenda
   este aviso" com uma janela na tela, o painel sobe para 10049 (5.8).
   ============================================================================ */

:root { --ep-ajuda-sobe: 0px; }

#ep-ajuda-painel.hidden,
#ep-estoki-balao.hidden,
#ep-checklist.hidden { display: none !important; }

/* ---- botao flutuante: o Estoki (5.9) --------------------------------------- */
/* O proprio mascote e o botao: sem circulo por tras. A area de clique continua
   um quadrado de 68 px (60 no celular) com o mesmo centro do botao antigo. */
#ep-ajuda-botao {
    position: fixed;
    right: 19px;
    bottom: 18px;
    z-index: 45;
    width: 68px;
    height: 68px;
    padding: 2px;
    border: none;
    border-radius: 18px;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Sobe quando o convite de avaliacao ou a barra de itens marcados
       aparecem embaixo dele (o app.js calcula --ep-ajuda-sobe). */
    transform: translateY(calc(-1 * var(--ep-ajuda-sobe)));
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
#ep-ajuda-botao > .ep-estoki {
    filter: drop-shadow(0 7px 10px rgba(29, 78, 216, 0.26));
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
#ep-ajuda-botao:hover > .ep-estoki { transform: translateY(-2px); }
#ep-ajuda-botao:active > .ep-estoki { transform: translateY(1px) scale(0.97); }
#ep-ajuda-botao:focus-visible {
    outline: 3px solid rgba(147, 197, 253, 0.95);
    outline-offset: 2px;
    border-radius: 18px;
}
html.dark #ep-ajuda-botao > .ep-estoki { filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.55)); }

/* Etiqueta "Precisa de ajuda?" ao passar o mouse (so no computador). */
#ep-ajuda-botao .ep-ek-dica {
    position: absolute;
    right: calc(100% + 4px);
    top: 50%;
    padding: 7px 12px;
    border: 1px solid #dbe4f0;
    border-radius: 999px;
    background: #ffffff;
    color: #1e3a8a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.35);
    opacity: 0;
    transform: translate(6px, -50%);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
    #ep-ajuda-botao:hover .ep-ek-dica,
    #ep-ajuda-botao:focus-visible .ep-ek-dica { opacity: 1; transform: translate(0, -50%); }
    /* e o Estoki olha para ela */
    #ep-ajuda-botao:hover .ep-estoki[data-estado="olhando"] .ep-ek-pupila { transform: translate(-1.8px, -0.3px); }
}
html.ep-ajuda-aberta #ep-ajuda-botao .ep-ek-dica,
html.ep-estoki-falando #ep-ajuda-botao .ep-ek-dica { display: none; }
html.dark #ep-ajuda-botao .ep-ek-dica {
    border-color: var(--ep-border-s);
    background: var(--ep-surf-2);
    color: var(--ep-txt);
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.8);
}

/* Chat aberto: um "x" no canto do Estoki mostra que o mesmo botao fecha. */
#ep-ajuda-botao .ep-ek-fechar {
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #ffffff;
    background: #0f172a;
    box-shadow: 0 0 0 2px #ffffff;
    opacity: 0;
    transform: scale(0.5);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html.ep-ajuda-aberta #ep-ajuda-botao .ep-ek-fechar { opacity: 1; transform: none; }
html.dark #ep-ajuda-botao .ep-ek-fechar { color: #1a1917; background: var(--ep-txt); box-shadow: 0 0 0 2px var(--ep-bg); }

/* ---- [ESTOKI] o desenho ---------------------------------------------------- */
/* Cores so da paleta do sistema: azuis do botao e do cabecalho do chat, navy
   da sidebar nas pupilas, ambar das dicas na lampada, azul-ceu do menu ativo
   no brilho. Cada peca e um elemento do SVG; o estado vem em data-estado. */
.ep-estoki { display: block; width: 100%; height: 100%; overflow: visible; }
.ep-estoki .ep-ek-sombra { fill: #0f172a; opacity: 0.16; transform-box: fill-box; transform-origin: center; }
.ep-estoki .ep-ek-corpo { transform-box: fill-box; transform-origin: 50% 100%; }
.ep-estoki .ep-ek-lado { fill: #1e40af; stroke: #1e40af; stroke-width: 2; stroke-linejoin: round; }
.ep-estoki .ep-ek-tampa { fill: #60a5fa; stroke: #60a5fa; stroke-width: 2; stroke-linejoin: round; }
.ep-estoki .ep-ek-frente { fill: #2563eb; }
.ep-estoki .ep-ek-fita { fill: #bfdbfe; }
.ep-estoki .ep-ek-etiqueta rect { fill: #ffffff; }
.ep-estoki .ep-ek-etiqueta path { fill: none; stroke: #0f172a; stroke-width: 0.75; }
.ep-estoki .ep-ek-esclera { fill: #ffffff; }
.ep-estoki .ep-ek-pupila circle { fill: #0e1d4a; }
.ep-estoki .ep-ek-pupila .ep-ek-reflexo { fill: #ffffff; }
.ep-estoki .ep-ek-olho { transform-box: fill-box; transform-origin: center; transition: transform 0.08s ease-in, opacity 0.15s ease; }
.ep-estoki .ep-ek-pupila { transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
.ep-estoki .ep-ek-sobrancelhas { fill: none; stroke: #0e1d4a; stroke-width: 1.9; stroke-linecap: round; }
.ep-estoki .ep-ek-feliz { fill: none; stroke: #ffffff; stroke-width: 2.6; stroke-linecap: round; }
.ep-estoki .ep-ek-gota { fill: #dbeafe; }
.ep-estoki .ep-ek-pensando circle { fill: #3b82f6; }
.ep-estoki .ep-ek-luz { fill: #fde68a; opacity: 0.55; transform-box: fill-box; transform-origin: center; }
.ep-estoki .ep-ek-bulbo { fill: #fbbf24; }
.ep-estoki .ep-ek-rosca { fill: #d97706; }
.ep-estoki .ep-ek-brilho-a { fill: #38bdf8; }
.ep-estoki .ep-ek-brilho-b { fill: #fbbf24; }
.ep-estoki .ep-ek-brilho-c { fill: #60a5fa; }
html.dark .ep-estoki .ep-ek-sombra { fill: #000000; opacity: 0.45; }
html.dark .ep-estoki .ep-ek-pensando circle { fill: #60a5fa; }

/* pecas que so aparecem em alguns estados */
.ep-estoki .ep-ek-sobrancelhas,
.ep-estoki .ep-ek-feliz,
.ep-estoki .ep-ek-gota,
.ep-estoki .ep-ek-pensando,
.ep-estoki .ep-ek-lampada,
.ep-estoki .ep-ek-festa { opacity: 0; transition: opacity 0.2s ease; }
.ep-estoki .ep-ek-lampada,
.ep-estoki .ep-ek-festa path,
.ep-estoki .ep-ek-pensando circle { transform-box: fill-box; transform-origin: center; }

/* piscada (o app.js liga a classe por um instante) */
.ep-estoki.ep-ek-pisca .ep-ek-olho { transform: scaleY(0.1); }

/* olhadas em repouso (o app.js escolhe a direcao de vez em quando) */
.ep-estoki[data-olhar="esq"] .ep-ek-pupila { transform: translate(-1.8px, 0.2px); }
.ep-estoki[data-olhar="dir"] .ep-ek-pupila { transform: translate(1.7px, 0.2px); }
.ep-estoki[data-olhar="cima"] .ep-ek-pupila { transform: translate(-0.4px, -2px); }

/* estados */
.ep-estoki[data-estado="pensando"] .ep-ek-pensando { opacity: 1; }
.ep-estoki[data-estado="pensando"] .ep-ek-pupila { transform: translate(1.5px, -2px); }
.ep-estoki[data-estado="lampada"] .ep-ek-lampada { opacity: 1; }
.ep-estoki[data-estado="lampada"] .ep-ek-pupila { transform: translate(0.2px, -2.1px); }
.ep-estoki[data-estado="preocupado"] .ep-ek-sobrancelhas,
.ep-estoki[data-estado="preocupado"] .ep-ek-gota { opacity: 1; }
.ep-estoki[data-estado="preocupado"] .ep-ek-pupila { transform: translate(-0.3px, 1.4px); }
.ep-estoki[data-estado="comemorando"] .ep-ek-olho { opacity: 0; }
.ep-estoki[data-estado="comemorando"] .ep-ek-feliz,
.ep-estoki[data-estado="comemorando"] .ep-ek-festa { opacity: 1; }

/* No botao, o Estoki olha para onde esta a conversa: para cima quando o chat
   esta aberto (no computador o painel fica logo acima) e para o balao quando
   ele fala. */
html.ep-ajuda-aberta #ep-ajuda-botao .ep-estoki[data-estado="normal"] .ep-ek-pupila { transform: translate(-0.6px, -2px); }
html.ep-estoki-falando #ep-ajuda-botao .ep-estoki .ep-ek-pupila { transform: translate(-1.8px, -0.6px); }

/* animacoes (todas desligadas para "menos movimento", no fim do arquivo) */
.ep-estoki.ep-ek-pulo .ep-ek-corpo { animation: epEkPulo 0.62s cubic-bezier(0.3, 0, 0.3, 1); }
.ep-estoki.ep-ek-pulo .ep-ek-sombra { animation: epEkSombra 0.62s cubic-bezier(0.3, 0, 0.3, 1); }
@keyframes epEkPulo {
    0%   { transform: none; }
    16%  { transform: translateY(0.5px) scale(1.07, 0.9); }
    46%  { transform: translateY(-7px) scale(0.96, 1.05); }
    72%  { transform: translateY(0) scale(1.05, 0.93); }
    86%  { transform: translateY(0) scale(0.99, 1.01); }
    100% { transform: none; }
}
@keyframes epEkSombra {
    0%, 16%, 72%, 100% { transform: none; opacity: 0.16; }
    46% { transform: scale(0.72); opacity: 0.08; }
}
.ep-estoki[data-estado="pensando"] .ep-ek-pensando circle { animation: epEkPonto 1s infinite ease-in-out; }
.ep-estoki[data-estado="pensando"] .ep-ek-pensando circle:nth-child(2) { animation-delay: 0.15s; }
.ep-estoki[data-estado="pensando"] .ep-ek-pensando circle:nth-child(3) { animation-delay: 0.3s; }
@keyframes epEkPonto {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
    30% { transform: translateY(-2.2px); opacity: 1; }
}
.ep-estoki[data-estado="lampada"] .ep-ek-lampada { animation: epEkIdeia 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ep-estoki[data-estado="lampada"] .ep-ek-luz { animation: epEkLuz 1.6s ease-in-out infinite; }
@keyframes epEkIdeia { from { transform: scale(0.3); } to { transform: none; } }
@keyframes epEkLuz {
    0%, 100% { opacity: 0.35; transform: scale(0.9); }
    50% { opacity: 0.7; transform: scale(1.08); }
}
.ep-estoki[data-estado="comemorando"] .ep-ek-festa path { animation: epEkBrilho 0.9s ease-in-out infinite; }
.ep-estoki[data-estado="comemorando"] .ep-ek-festa path:nth-child(2) { animation-delay: 0.3s; }
.ep-estoki[data-estado="comemorando"] .ep-ek-festa path:nth-child(3) { animation-delay: 0.6s; }
@keyframes epEkBrilho {
    0%, 100% { transform: scale(0.55); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 1; }
}

/* ---- balao do Estoki (cumprimento, primeira vez na tela, desistiu) --------- */
#ep-estoki-balao {
    position: fixed;
    right: 94px;
    bottom: 30px;
    z-index: 45;
    width: max-content;
    min-width: 210px;
    max-width: 300px;
    padding: 12px 14px;
    border: 1px solid #dbe4f0;
    border-radius: 16px 16px 5px 16px;
    background: #ffffff;
    box-shadow: 0 18px 40px -14px rgba(15, 23, 42, 0.35);
    transform: translateY(calc(-1 * var(--ep-ajuda-sobe)));
    transform-origin: bottom right;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    /* a fala entra logo depois do pulinho do Estoki */
    animation: epEkBalao 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}
#ep-estoki-balao.ep-ek-saindo { animation: epEkBalaoSai 0.2s ease forwards; }
@keyframes epEkBalao {
    from { opacity: 0; transform: translate(10px, calc(-1 * var(--ep-ajuda-sobe))) scale(0.94); }
    to   { opacity: 1; transform: translate(0, calc(-1 * var(--ep-ajuda-sobe))) scale(1); }
}
@keyframes epEkBalaoSai {
    to { opacity: 0; transform: translate(6px, calc(-1 * var(--ep-ajuda-sobe))) scale(0.97); }
}
/* rabinho apontando para o Estoki */
#ep-estoki-balao::after {
    content: '';
    position: absolute;
    right: -7px;
    bottom: 13px;
    width: 12px;
    height: 12px;
    background: inherit;
    border-top: 1px solid #dbe4f0;
    border-right: 1px solid #dbe4f0;
    border-radius: 0 3px 0 0;
    transform: rotate(45deg);
}
#ep-estoki-balao .ep-ek-balao-titulo { font-size: 14px; font-weight: 700; line-height: 1.3; color: #0f172a; }
#ep-estoki-balao .ep-ek-balao-texto { margin-top: 3px; font-size: 13px; line-height: 1.45; color: #475569; }
#ep-estoki-balao .ep-ek-balao-texto b { font-weight: 600; color: #1e293b; }
#ep-estoki-balao .ep-ek-balao-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#ep-estoki-balao .ep-ek-balao-sim,
#ep-estoki-balao .ep-ek-balao-nao {
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}
#ep-estoki-balao .ep-ek-balao-sim { background: #2563eb; color: #ffffff; }
#ep-estoki-balao .ep-ek-balao-sim:hover { background: #1d4ed8; }
#ep-estoki-balao .ep-ek-balao-nao { background: transparent; color: #64748b; }
#ep-estoki-balao .ep-ek-balao-nao:hover { background: #f1f5f9; color: #334155; }
#ep-estoki-balao .ep-ek-balao-sim:focus-visible,
#ep-estoki-balao .ep-ek-balao-nao:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
html.dark #ep-estoki-balao {
    border-color: var(--ep-border-s);
    background: var(--ep-surf);
    box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.8);
}
html.dark #ep-estoki-balao::after { border-color: var(--ep-border-s); }
html.dark #ep-estoki-balao .ep-ek-balao-titulo { color: var(--ep-txt); }
html.dark #ep-estoki-balao .ep-ek-balao-texto { color: var(--ep-txt-2); }
html.dark #ep-estoki-balao .ep-ek-balao-texto b { color: var(--ep-txt); }
html.dark #ep-estoki-balao .ep-ek-balao-sim { background: #2f7fe8; }
html.dark #ep-estoki-balao .ep-ek-balao-sim:hover { background: #3b8cf5; }
html.dark #ep-estoki-balao .ep-ek-balao-nao { color: var(--ep-txt-3); }
html.dark #ep-estoki-balao .ep-ek-balao-nao:hover { background: var(--ep-surf-3); color: var(--ep-txt); }

/* ---- painel ---------------------------------------------------------------- */
#ep-ajuda-painel {
    position: fixed;
    right: 24px;
    bottom: calc(96px + var(--ep-ajuda-sobe));
    z-index: 48;
    width: 384px;
    max-width: calc(100vw - 32px);
    height: 600px;
    max-height: calc(100vh - 184px - var(--ep-ajuda-sobe));
    max-height: calc(100dvh - 184px - var(--ep-ajuda-sobe));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    box-shadow: 0 30px 70px -20px rgba(15, 23, 42, 0.38), 0 8px 20px -8px rgba(15, 23, 42, 0.14);
    transform-origin: bottom right;
    transition: bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    animation: epAjPainel 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes epAjPainel {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
html.dark #ep-ajuda-painel {
    background: var(--ep-surf);
    border-color: var(--ep-border-s);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85);
}

#ep-ajuda-painel .ep-aj-topo {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 10px 14px 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
}
html.dark #ep-ajuda-painel .ep-aj-topo { background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%); }
#ep-ajuda-painel .ep-aj-avatar {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 4px 4px 3px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28), 0 4px 10px -4px rgba(15, 23, 42, 0.45);
}
/* [ESTOKI] no cabecalho ele aparece sem a sombra do chao */
#ep-ajuda-painel .ep-aj-avatar .ep-ek-sombra { display: none; }
html.dark #ep-ajuda-painel .ep-aj-avatar { background: var(--ep-txt); }
#ep-ajuda-painel .ep-aj-topo-texto { flex: 1; min-width: 0; }
#ep-ajuda-painel .ep-aj-titulo { font-size: 15px; font-weight: 700; line-height: 1.2; }
#ep-ajuda-painel .ep-aj-subtitulo { font-size: 12px; opacity: 0.85; margin-top: 2px; }
#ep-ajuda-painel .ep-aj-topo-btn {
    flex: none;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    cursor: pointer;
}
#ep-ajuda-painel .ep-aj-topo-btn:hover { background: rgba(255, 255, 255, 0.16); color: #ffffff; }

/* ---- conversa -------------------------------------------------------------- */
#ep-ajuda-painel .ep-aj-conversa {
    position: relative;   /* offsetTop das mensagens passa a contar daqui */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px 12px;
    background: #f8fafc;
}
html.dark #ep-ajuda-painel .ep-aj-conversa { background: var(--ep-bg); }

#ep-ajuda-painel .ep-aj-msg {
    max-width: 88%;
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    animation: epAjMsg 0.22s ease-out;
}
@keyframes epAjMsg {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
#ep-ajuda-painel .ep-aj-bot {
    align-self: flex-start;
    padding: 10px 13px;
    color: #1e293b;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px 16px 16px 5px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
#ep-ajuda-painel .ep-aj-bot p { margin: 0; }
#ep-ajuda-painel .ep-aj-bot p + p { margin-top: 8px; }
#ep-ajuda-painel .ep-aj-bot b { font-weight: 700; color: #0f172a; }
#ep-ajuda-painel .ep-aj-leve { color: #64748b; font-size: 13px; }
#ep-ajuda-painel .ep-aj-eu {
    align-self: flex-end;
    padding: 8px 13px;
    color: #ffffff;
    background: #2563eb;
    border-radius: 16px 16px 5px 16px;
}
html.dark #ep-ajuda-painel .ep-aj-bot {
    background: var(--ep-surf-2);
    border-color: var(--ep-border);
    color: var(--ep-txt);
    box-shadow: none;
}
html.dark #ep-ajuda-painel .ep-aj-bot b { color: #ffffff; }
html.dark #ep-ajuda-painel .ep-aj-leve { color: var(--ep-txt-3); }
html.dark #ep-ajuda-painel .ep-aj-eu { background: #2f7fe8; }

/* passos numerados */
#ep-ajuda-painel .ep-aj-passos { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: ep-aj-passo; }
#ep-ajuda-painel .ep-aj-passos li {
    position: relative;
    margin-top: 7px;
    padding-left: 30px;
    counter-increment: ep-aj-passo;
}
#ep-ajuda-painel .ep-aj-passos li::before {
    content: counter(ep-aj-passo);
    position: absolute;
    left: 0;
    top: 1px;
    width: 21px;
    height: 21px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    color: #1d4ed8;
    background: #dbeafe;
}
html.dark #ep-ajuda-painel .ep-aj-passos li::before { color: #93c5fd; background: rgba(96, 165, 250, 0.18); }

/* dica */
#ep-ajuda-painel .ep-aj-bot .ep-aj-dica {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #78350f;
    background: #fffbeb;
}
#ep-ajuda-painel .ep-aj-dica i { margin-top: 3px; color: #d97706; }
html.dark #ep-ajuda-painel .ep-aj-bot .ep-aj-dica { color: #fcd34d; background: rgba(245, 158, 11, 0.12); }
html.dark #ep-ajuda-painel .ep-aj-dica i { color: #fbbf24; }

/* [5.8] exemplo pratico */
#ep-ajuda-painel .ep-aj-bot .ep-aj-exemplo {
    margin-top: 10px;
    padding: 8px 11px;
    border-left: 3px solid #93c5fd;
    border-radius: 4px 10px 10px 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #334155;
    background: #f1f5f9;
}
#ep-ajuda-painel .ep-aj-rotulo {
    display: block;
    margin-bottom: 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #2563eb;
}
html.dark #ep-ajuda-painel .ep-aj-bot .ep-aj-exemplo { color: var(--ep-txt-2); background: var(--ep-surf-3); border-left-color: #3b82f6; }
html.dark #ep-ajuda-painel .ep-aj-rotulo { color: #93c5fd; }

/* [5.8] atencao: o erro mais comum na tarefa */
#ep-ajuda-painel .ep-aj-bot .ep-aj-atencao {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #9f1239;
    background: #fff1f2;
}
#ep-ajuda-painel .ep-aj-atencao i { margin-top: 3px; color: #e11d48; }
#ep-ajuda-painel .ep-aj-bot .ep-aj-atencao b { color: #881337; }
html.dark #ep-ajuda-painel .ep-aj-bot .ep-aj-atencao { color: #fda4af; background: rgba(244, 63, 94, 0.12); }
html.dark #ep-ajuda-painel .ep-aj-atencao i { color: #fb7185; }
html.dark #ep-ajuda-painel .ep-aj-bot .ep-aj-atencao b { color: #fecdd3; }

/* [5.8] "Veja tambem" no fim da resposta */
#ep-ajuda-painel .ep-aj-veja {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed #e2e8f0;
}
#ep-ajuda-painel .ep-aj-veja-titulo {
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}
#ep-ajuda-painel .ep-aj-veja-link {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 3px 4px;
    margin-left: -4px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}
#ep-ajuda-painel .ep-aj-veja-link i { font-size: 10.5px; opacity: 0.75; }
#ep-ajuda-painel .ep-aj-veja-link:hover { background: #eff6ff; }
#ep-ajuda-painel .ep-aj-veja-link:hover span { text-decoration: underline; text-underline-offset: 2px; }
html.dark #ep-ajuda-painel .ep-aj-veja { border-top-color: var(--ep-border-s); }
html.dark #ep-ajuda-painel .ep-aj-veja-titulo { color: var(--ep-txt-3); }
html.dark #ep-ajuda-painel .ep-aj-veja-link { color: #93c5fd; }
html.dark #ep-ajuda-painel .ep-aj-veja-link:hover { background: var(--ep-surf-3); }

/* "digitando..." */
#ep-ajuda-painel .ep-aj-digitando { display: flex; gap: 4px; padding: 13px 14px; }
#ep-ajuda-painel .ep-aj-digitando span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #94a3b8;
    animation: epAjPonto 1s infinite ease-in-out;
}
#ep-ajuda-painel .ep-aj-digitando span:nth-child(2) { animation-delay: 0.15s; }
#ep-ajuda-painel .ep-aj-digitando span:nth-child(3) { animation-delay: 0.3s; }
@keyframes epAjPonto {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-4px); opacity: 1; }
}
html.dark #ep-ajuda-painel .ep-aj-digitando span { background: var(--ep-txt-3); }

/* botoes de acao dentro da resposta */
#ep-ajuda-painel .ep-aj-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
}
#ep-ajuda-painel .ep-aj-acao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #1e293b;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
#ep-ajuda-painel .ep-aj-acao:hover { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; }
#ep-ajuda-painel .ep-aj-acao-principal { border-color: #2563eb; background: #2563eb; color: #ffffff; }
#ep-ajuda-painel .ep-aj-acao-principal:hover { border-color: #1d4ed8; background: #1d4ed8; color: #ffffff; }
html.dark #ep-ajuda-painel .ep-aj-acoes { border-top-color: var(--ep-border-s); }
html.dark #ep-ajuda-painel .ep-aj-acao { border-color: var(--ep-border-s); background: var(--ep-surf-3); color: var(--ep-txt); }
html.dark #ep-ajuda-painel .ep-aj-acao:hover { border-color: #60a5fa; background: var(--ep-surf-4); color: #bfdbfe; }
html.dark #ep-ajuda-painel .ep-aj-acao-principal { border-color: #2f7fe8; background: #2f7fe8; color: #ffffff; }
html.dark #ep-ajuda-painel .ep-aj-acao-principal:hover { border-color: #3b8cf5; background: #3b8cf5; color: #ffffff; }

/* opcoes (pilulas) */
#ep-ajuda-painel .ep-aj-opcoes {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 2px 0 4px;
    animation: epAjMsg 0.25s ease-out;
}
#ep-ajuda-painel .ep-aj-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}
#ep-ajuda-painel .ep-aj-chip:hover { border-color: #93c5fd; background: #dbeafe; }
#ep-ajuda-painel .ep-aj-chip i { font-size: 12px; opacity: 0.85; }
#ep-ajuda-painel .ep-aj-opcoes .ep-aj-chip:focus-visible { border-radius: 999px; }
#ep-ajuda-painel .ep-aj-chip-voltar,
#ep-ajuda-painel .ep-aj-chip-extra { border-color: #e2e8f0; background: #ffffff; color: #475569; }
#ep-ajuda-painel .ep-aj-chip-voltar:hover,
#ep-ajuda-painel .ep-aj-chip-extra:hover { border-color: #cbd5e1; background: #f1f5f9; color: #1e293b; }
#ep-ajuda-painel .ep-aj-chip-sim { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
#ep-ajuda-painel .ep-aj-chip-sim:hover { border-color: #6ee7b7; background: #d1fae5; }
html.dark #ep-ajuda-painel .ep-aj-chip { border-color: rgba(96, 165, 250, 0.35); background: rgba(96, 165, 250, 0.12); color: #bfdbfe; }
html.dark #ep-ajuda-painel .ep-aj-chip:hover { background: rgba(96, 165, 250, 0.22); }
html.dark #ep-ajuda-painel .ep-aj-chip-voltar,
html.dark #ep-ajuda-painel .ep-aj-chip-extra { border-color: var(--ep-border-s); background: var(--ep-surf-2); color: var(--ep-txt-2); }
html.dark #ep-ajuda-painel .ep-aj-chip-voltar:hover,
html.dark #ep-ajuda-painel .ep-aj-chip-extra:hover { background: var(--ep-surf-3); color: var(--ep-txt); }
html.dark #ep-ajuda-painel .ep-aj-chip-sim { border-color: rgba(16, 185, 129, 0.4); background: rgba(16, 185, 129, 0.14); color: #6ee7b7; }

/* [5.8] rotulo de grupo ("Mais procurados", "Partes do sistema") */
#ep-ajuda-painel .ep-aj-grupo {
    flex-basis: 100%;
    margin: 6px 2px -1px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}
#ep-ajuda-painel .ep-aj-grupo:first-child { margin-top: 0; }
html.dark #ep-ajuda-painel .ep-aj-grupo { color: var(--ep-txt-3); }

/* [5.8] assunto em destaque (mais procurado): estrela dourada */
#ep-ajuda-painel .ep-aj-chip-destaque i { color: #d97706; opacity: 1; }
html.dark #ep-ajuda-painel .ep-aj-chip-destaque i { color: #fbbf24; }

/* campo de busca */
#ep-ajuda-painel .ep-aj-busca {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
}
#ep-ajuda-campo {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 14px;
    outline: none;
}
#ep-ajuda-campo:focus {
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
#ep-ajuda-painel .ep-aj-enviar {
    flex: none;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    color: #ffffff;
    cursor: pointer;
}
#ep-ajuda-painel .ep-aj-enviar:hover { background: #1d4ed8; }
html.dark #ep-ajuda-painel .ep-aj-busca { border-top-color: var(--ep-border); background: var(--ep-surf); }
html.dark #ep-ajuda-painel .ep-aj-enviar { background: #2f7fe8; }

/* ---- "?" ao lado do titulo da tela ---------------------------------------- */
#ep-ajuda-tela {
    flex: none;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #94a3b8;
    font-size: 18px;
    cursor: pointer;
}
#ep-ajuda-tela:hover { color: #2563eb; background: #eff6ff; }
#ep-ajuda-tela:focus-visible { border-radius: 999px; }
html.dark #ep-ajuda-tela { color: var(--ep-txt-3); }
html.dark #ep-ajuda-tela:hover { color: var(--ep-azul); background: var(--ep-surf-3); }

/* ---- anel de destaque do "Me leve ate la" ---------------------------------- */
#ep-ajuda-anel {
    position: fixed;
    z-index: 49;
    display: none;
    pointer-events: none;
    border: 3px solid #2563eb;
    border-radius: 14px;
    opacity: 0;
}
#ep-ajuda-anel.ep-aj-anel-ativo {
    display: block;
    opacity: 1;
    animation: epAjAnel 1.2s ease-in-out infinite;
}
#ep-ajuda-anel.ep-aj-anel-sai { opacity: 0; transition: opacity 0.25s ease; }
@keyframes epAjAnel {
    0%, 100% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18), 0 0 18px 2px rgba(37, 99, 235, 0.3); }
    50%      { box-shadow: 0 0 0 9px rgba(37, 99, 235, 0.1), 0 0 30px 8px rgba(37, 99, 235, 0.4); }
}
html.dark #ep-ajuda-anel { border-color: #60a5fa; }

/* ---- espaco no fim da pagina: o botao nunca cobre a ultima linha ----------- */
/* id + classe vence o p-6 do Tailwind e o padding do mobile (ambos menores). */
#app-container main.overflow-y-auto { padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important; }

/* ---- [5.8] chat por cima de uma janela (aberto pelo "Entenda este aviso") --- */
/* Acima de todas as janelas do sistema (a mais alta usa 10002) e abaixo dos
   avisos (10050). So no computador: no celular o chat ja ocupa a tela. */
@media (min-width: 640px) {
    html.ep-ajuda-sobre-janela #ep-ajuda-painel { z-index: 10049; }
}

/* ============================================================================
   [AVISOS] Avisos do sistema (verde, vermelho e laranja)
   ============================================================================ */
/* Em repouso, os avisos ficavam com uma faixa de 16 px aparecendo na borda
   direita (translate de 100% a partir de right-4). Agora saem inteiros.
   Id + classe vence o translate-x-full do Tailwind (so classe). */
#success-notification.translate-x-full,
#error-notification.translate-x-full,
#warning-notification.translate-x-full { --tw-translate-x: calc(100% + 2.5rem); }

/* Aviso com o botao "Entenda este aviso": nunca passa da largura da tela. */
/* Mensagem curta: tudo numa linha. Longa: o botao desce para a linha de
   baixo, alinhado a direita, e o texto usa a largura toda. */
#error-notification.ep-aviso-com-ajuda,
#warning-notification.ep-aviso-com-ajuda {
    flex-wrap: wrap;
    row-gap: 6px;
    max-width: min(36rem, calc(100vw - 2rem));
}
#error-notification.ep-aviso-com-ajuda > span,
#warning-notification.ep-aviso-com-ajuda > span { flex: 1 1 auto; min-width: 0; max-width: calc(100% - 1.5rem); }
#error-notification .ep-aj-entenda,
#warning-notification .ep-aj-entenda {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 4px 11px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
}
#error-notification .ep-aj-entenda:hover,
#warning-notification .ep-aj-entenda:hover { background: rgba(255, 255, 255, 0.3); }
#error-notification .ep-aj-entenda:focus-visible,
#warning-notification .ep-aj-entenda:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* ---- celular: o chat ocupa a tela inteira ---------------------------------- */
@media (max-width: 639.98px) {
    #ep-ajuda-botao {
        right: 13px;
        bottom: calc(13px + env(safe-area-inset-bottom));
        width: 60px;
        height: 60px;
    }
    #ep-estoki-balao {
        right: 78px;
        bottom: calc(22px + env(safe-area-inset-bottom));
        min-width: 0;
        max-width: calc(100vw - 94px);
    }
    #ep-ajuda-painel {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        height: auto;
        max-height: none;
        border: none;
        border-radius: 0;
        /* acima dos avisos (10050) e abaixo do fundo da gaveta do menu (10055). */
        z-index: 10052;
        transform-origin: bottom center;
    }
    #ep-ajuda-painel .ep-aj-topo { padding-top: calc(12px + env(safe-area-inset-top)); }
    #ep-ajuda-painel .ep-aj-busca { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    #ep-ajuda-painel .ep-aj-msg { max-width: 92%; }
    html.ep-ajuda-aberta #ep-ajuda-botao,
    html.ep-ajuda-aberta #ep-estoki-balao { display: none; }
}

/* ============================================================================
   [CHECKLIST] Card "Primeiros passos" do Dashboard
   ============================================================================ */
#ep-checklist {
    margin-bottom: 24px;
    padding: 20px 22px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.3);
    animation: epCkEntra 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes epCkEntra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
#ep-checklist .ep-ck-topo { display: flex; align-items: flex-start; gap: 14px; }
#ep-checklist .ep-ck-selo {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 10px 20px -10px rgba(29, 78, 216, 0.7);
}
#ep-checklist .ep-ck-selo-ok {
    background: linear-gradient(135deg, #22c55e, #15803d);
    box-shadow: 0 10px 20px -10px rgba(21, 128, 61, 0.7);
}
#ep-checklist .ep-ck-cabeca { flex: 1; min-width: 0; }
#ep-checklist .ep-ck-titulo { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: #0f172a; }
#ep-checklist .ep-ck-sub { margin: 3px 0 0; font-size: 13.5px; color: #64748b; }
#ep-checklist .ep-ck-contagem { margin-top: 3px; font-size: 13px; color: #475569; white-space: nowrap; }
#ep-checklist .ep-ck-contagem b { font-size: 16px; color: #1d4ed8; }
#ep-checklist .ep-ck-ocultar {
    flex: none;
    padding: 5px 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
#ep-checklist .ep-ck-ocultar:hover { background: #f1f5f9; color: #475569; }
#ep-checklist .ep-ck-barra { height: 7px; margin: 16px 0 6px; overflow: hidden; border-radius: 999px; background: #e2e8f0; }
#ep-checklist .ep-ck-barra span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #3b82f6, #22c55e);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
#ep-checklist .ep-ck-lista { margin: 8px 0 0; padding: 0; list-style: none; }
#ep-checklist .ep-ck-passo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 4px;
    border-top: 1px solid #f1f5f9;
}
#ep-checklist .ep-ck-passo:first-child { border-top: none; }
#ep-checklist .ep-ck-marca {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}
#ep-checklist .ep-ck-proximo .ep-ck-marca {
    color: #ffffff;
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14);
}
#ep-checklist .ep-ck-feito .ep-ck-marca { color: #15803d; background: #dcfce7; border-color: #bbf7d0; }
#ep-checklist .ep-ck-texto { flex: 1; min-width: 0; }
#ep-checklist .ep-ck-passo-titulo { font-size: 14.5px; font-weight: 600; color: #0f172a; }
#ep-checklist .ep-ck-feito .ep-ck-passo-titulo {
    color: #64748b;
    text-decoration: line-through;
    text-decoration-color: rgba(100, 116, 139, 0.5);
}
#ep-checklist .ep-ck-passo-sub { margin-top: 1px; font-size: 12.5px; color: #64748b; }
#ep-checklist .ep-ck-acoes { flex: none; display: flex; align-items: center; gap: 6px; }
#ep-checklist .ep-ck-fazer,
#ep-checklist .ep-ck-como {
    padding: 6px 11px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
#ep-checklist .ep-ck-fazer { border: 1px solid #bfdbfe; background: #ffffff; color: #1d4ed8; }
#ep-checklist .ep-ck-fazer:hover { background: #eff6ff; }
#ep-checklist .ep-ck-proximo .ep-ck-fazer { border-color: #2563eb; background: #2563eb; color: #ffffff; }
#ep-checklist .ep-ck-proximo .ep-ck-fazer:hover { border-color: #1d4ed8; background: #1d4ed8; }
#ep-checklist .ep-ck-como { border: 1px solid #e2e8f0; background: #ffffff; color: #475569; }
#ep-checklist .ep-ck-como:hover { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; }
#ep-checklist .ep-ck-ok { font-size: 12.5px; font-weight: 600; color: #15803d; }

html.dark #ep-checklist { background: var(--ep-surf); border-color: var(--ep-border); box-shadow: none; }
html.dark #ep-checklist .ep-ck-titulo,
html.dark #ep-checklist .ep-ck-passo-titulo { color: var(--ep-txt); }
html.dark #ep-checklist .ep-ck-sub,
html.dark #ep-checklist .ep-ck-passo-sub,
html.dark #ep-checklist .ep-ck-contagem { color: var(--ep-txt-2); }
html.dark #ep-checklist .ep-ck-contagem b { color: #93c5fd; }
html.dark #ep-checklist .ep-ck-ocultar { color: var(--ep-txt-3); }
html.dark #ep-checklist .ep-ck-ocultar:hover { background: var(--ep-surf-3); color: var(--ep-txt); }
html.dark #ep-checklist .ep-ck-barra { background: var(--ep-surf-3); }
html.dark #ep-checklist .ep-ck-passo { border-top-color: var(--ep-border); }
html.dark #ep-checklist .ep-ck-marca { color: var(--ep-txt-2); background: var(--ep-surf-3); border-color: var(--ep-border-s); }
html.dark #ep-checklist .ep-ck-proximo .ep-ck-marca { color: #ffffff; background: #2f7fe8; border-color: #2f7fe8; }
html.dark #ep-checklist .ep-ck-feito .ep-ck-marca { color: #86efac; background: rgba(34, 197, 94, 0.16); border-color: rgba(34, 197, 94, 0.35); }
html.dark #ep-checklist .ep-ck-feito .ep-ck-passo-titulo { color: var(--ep-txt-3); }
html.dark #ep-checklist .ep-ck-fazer,
html.dark #ep-checklist .ep-ck-como { border-color: var(--ep-border-s); background: var(--ep-surf-2); color: var(--ep-txt); }
html.dark #ep-checklist .ep-ck-fazer:hover,
html.dark #ep-checklist .ep-ck-como:hover { border-color: #60a5fa; background: var(--ep-surf-3); color: #bfdbfe; }
html.dark #ep-checklist .ep-ck-proximo .ep-ck-fazer { border-color: #2f7fe8; background: #2f7fe8; color: #ffffff; }
html.dark #ep-checklist .ep-ck-ok { color: #86efac; }

@media (max-width: 639.98px) {
    #ep-checklist { padding: 16px; }
    #ep-checklist .ep-ck-topo { flex-wrap: wrap; row-gap: 6px; }
    /* titulo ocupa a linha; contagem e "Ocultar" descem para a de baixo */
    #ep-checklist .ep-ck-cabeca { flex: 1 1 calc(100% - 58px); }
    #ep-checklist .ep-ck-contagem { margin: 0 0 0 58px; }
    #ep-checklist .ep-ck-ocultar { margin-left: auto; }
    #ep-checklist .ep-ck-passo { flex-wrap: wrap; }
    #ep-checklist .ep-ck-acoes { width: 100%; padding-left: 40px; }
}

/* ============================================================================
   [DICAS-TOQUE] As dicas "?" antigas abrem com toque (o app.js liga a classe)
   ============================================================================ */
.tooltip-container.ep-tip-aberta .tooltip-text { visibility: visible; opacity: 1; }

/* ---- menos movimento para quem pediu --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #ep-ajuda-botao, #ep-ajuda-painel, #ep-estoki-balao, #ep-checklist,
    #ep-ajuda-painel .ep-aj-msg, #ep-ajuda-painel .ep-aj-opcoes, #ep-checklist .ep-ck-barra span { animation: none !important; transition: none !important; }
    #ep-ajuda-anel.ep-aj-anel-ativo { animation: none; box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.22); }
    #ep-ajuda-painel .ep-aj-digitando span { animation: none; }
    /* [ESTOKI] tudo parado: ele muda de expressao, mas nao pula, nao pisca
       (o app.js tambem nao pede) e nada brilha nem balanca. */
    .ep-estoki, .ep-estoki *,
    #ep-ajuda-botao > .ep-estoki, #ep-ajuda-botao .ep-ek-dica, #ep-ajuda-botao .ep-ek-fechar { animation: none !important; transition: none !important; }
}

/* ---- nada disso sai no papel ----------------------------------------------- */
@media print {
    #ep-ajuda-botao, #ep-ajuda-painel, #ep-estoki-balao, #ep-ajuda-anel,
    #ep-ajuda-tela, #ep-checklist { display: none !important; }
}

/* ============================================================================
   [GUIA] Passo a passo guiado (5.10)
   Holofote (#ep-guia-foco), veu das telas de escolha (#ep-guia-veu), balao do
   passo (#ep-guia-balao) e cartao de pausa (#ep-guia-pausa). Os quatro sao
   criados pelo app.js na primeira vez que o guia abre. So ids e classes
   proprios (ep-guia-*, ep-gb-*, ep-gp-*): nenhum utilitario do Tailwind.
   Camadas: holofote e veu 10040 e balao 10041 -- acima de todas as janelas do
   sistema (a mais alta usa 10002) e abaixo dos avisos (10050), entao o "Item
   adicionado" aparece por cima. O cartao de pausa fica no nivel do balao do
   Estoki (46): qualquer janela que abrir passa por cima dele. Chat aberto,
   outra janela ou o menu do celular: o app.js liga html.ep-guia-oculto e o
   guia sai da frente ate eles fecharem.
   ============================================================================ */

#ep-guia-foco.hidden,
#ep-guia-veu.hidden,
#ep-guia-balao.hidden,
#ep-guia-pausa.hidden,
html.ep-guia-oculto #ep-guia-foco,
html.ep-guia-oculto #ep-guia-veu,
html.ep-guia-oculto #ep-guia-balao { display: none !important; }

/* ---- holofote: um recorte claro no escuro, em volta do que clicar ---------- */
#ep-guia-foco {
    position: fixed;
    z-index: 10040;
    border-radius: 12px;
    /* deixa passar o clique: a pessoa usa o botao ou o campo de verdade */
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.56);
}
#ep-guia-foco::after {
    content: '';
    position: absolute;
    inset: -3px;
    border: 3px solid #3b82f6;
    border-radius: 15px;
    animation: epGuiaPulso 1.8s ease-in-out infinite;
}
@keyframes epGuiaPulso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
    50%      { box-shadow: 0 0 0 9px rgba(59, 130, 246, 0); }
}

/* ---- veu das telas de escolha (comeco, comemoracao) ------------------------ */
#ep-guia-veu {
    position: fixed;
    inset: 0;
    z-index: 10040;
    background: rgba(15, 23, 42, 0.56);
}

/* ---- balao do passo -------------------------------------------------------- */
#ep-guia-balao {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10041;
    width: min(360px, calc(100vw - 24px));
    padding: 14px 16px 13px;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 26px 60px -20px rgba(15, 23, 42, 0.6), 0 2px 6px rgba(15, 23, 42, 0.08);
}
/* Telas de escolha (sem seta): nunca passam da altura da tela -- a lista de
   etapas rola por dentro no celular deitado. Com seta nao da para rolar: a
   seta fica do lado de fora da caixa. */
#ep-guia-balao.ep-gb-centro {
    width: min(420px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
#ep-guia-balao.ep-gb-entra { animation: epGuiaEntra 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes epGuiaEntra {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* barrinha de progresso da etapa, colada no topo */
#ep-guia-balao .ep-gb-barra {
    height: 4px;
    margin: -14px -16px 12px;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    background: #e2e8f0;
}
#ep-guia-balao .ep-gb-barra span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #22c55e);
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* seta apontando para o holofote (o app.js diz o lado e a posicao) */
#ep-guia-balao .ep-gb-seta {
    display: none;
    position: absolute;
    width: 14px;
    height: 14px;
    background: inherit;
    border: 1px solid #dbe4f0;
    transform: rotate(45deg);
}
#ep-guia-balao[data-lado="cima"] .ep-gb-seta {
    display: block; top: -8px; left: calc(var(--ep-gb-seta, 50%) - 7px);
    border-right: none; border-bottom: none; border-radius: 3px 0 0 0;
}
#ep-guia-balao[data-lado="baixo"] .ep-gb-seta {
    display: block; bottom: -8px; left: calc(var(--ep-gb-seta, 50%) - 7px);
    border-left: none; border-top: none; border-radius: 0 0 3px 0;
}
#ep-guia-balao[data-lado="esq"] .ep-gb-seta {
    display: block; left: -8px; top: calc(var(--ep-gb-seta, 50%) - 7px);
    border-right: none; border-top: none; border-radius: 0 0 0 3px;
}
#ep-guia-balao[data-lado="dir"] .ep-gb-seta {
    display: block; right: -8px; top: calc(var(--ep-gb-seta, 50%) - 7px);
    border-left: none; border-bottom: none; border-radius: 0 3px 0 0;
}
/* a seta do topo fica por cima da barrinha de progresso */
#ep-guia-balao[data-lado="cima"] .ep-gb-barra span { opacity: 0.9; }

#ep-guia-balao .ep-gb-topo { display: flex; align-items: flex-start; gap: 11px; }
#ep-guia-balao .ep-gb-avatar { flex: none; width: 42px; height: 42px; margin-top: -2px; }
#ep-guia-balao .ep-gb-avatar .ep-estoki { width: 100%; height: 100%; }
#ep-guia-balao .ep-gb-cabeca { flex: 1; min-width: 0; }
#ep-guia-balao .ep-gb-etapa {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #2563eb;
}
#ep-guia-balao .ep-gb-etapa > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ep-guia-balao .ep-gb-contador {
    flex: none;
    margin-left: auto;
    font-weight: 600;
    letter-spacing: 0;
    color: #64748b;
}
#ep-guia-balao .ep-gb-titulo { margin-top: 2px; font-size: 16px; font-weight: 700; line-height: 1.3; color: #0f172a; }
#ep-guia-balao .ep-gb-x {
    flex: none;
    width: 30px;
    height: 30px;
    margin: -4px -6px 0 0;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
}
#ep-guia-balao .ep-gb-texto { margin-top: 9px; font-size: 13.5px; line-height: 1.55; color: #334155; }
#ep-guia-balao .ep-gb-texto b { font-weight: 600; color: #0f172a; }

/* "Clique no botao destacado" */
#ep-guia-balao .ep-gb-espera {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
    padding: 8px 11px;
    border-radius: 10px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12.5px;
    font-weight: 600;
}
#ep-guia-balao .ep-gb-espera i { animation: epGuiaToque 1.5s ease-in-out infinite; }
@keyframes epGuiaToque {
    0%, 100% { transform: none; }
    50%      { transform: translateY(-2px) scale(1.08); }
}
#ep-guia-balao .ep-gb-bloqueio { margin-top: 9px; font-size: 12px; font-weight: 600; color: #b45309; }
#ep-guia-balao .ep-gb-bloqueio.hidden { display: none; }

/* lista de etapas (comeco do passo a passo) */
#ep-guia-balao .ep-gb-lista { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
#ep-guia-balao .ep-gb-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
#ep-guia-balao .ep-gb-item-marca {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}
#ep-guia-balao .ep-gb-item-proximo { border-color: #bfdbfe; background: #f8fbff; }
#ep-guia-balao .ep-gb-item-proximo .ep-gb-item-marca { color: #ffffff; background: #2563eb; border-color: #2563eb; }
#ep-guia-balao .ep-gb-item-feito .ep-gb-item-marca { color: #15803d; background: #dcfce7; border-color: #bbf7d0; }
#ep-guia-balao .ep-gb-item-titulo { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; }
#ep-guia-balao .ep-gb-item-feito .ep-gb-item-titulo { color: #64748b; }
#ep-guia-balao .ep-gb-item-status { flex: none; font-size: 12px; font-weight: 600; color: #15803d; }
#ep-guia-balao .ep-gb-item-ir { flex: none; font-size: 11px; color: #94a3b8; }

/* botoes */
#ep-guia-balao .ep-gb-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 13px;
}
#ep-guia-balao .ep-gb-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    color: #334155;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}
#ep-guia-balao .ep-gb-btn i { font-size: 12px; }
#ep-guia-balao .ep-gb-btn-leve { border-color: transparent; background: transparent; color: #64748b; }
#ep-guia-balao .ep-gb-btn-principal { border-color: #2563eb; background: #2563eb; color: #ffffff; }
#ep-guia-balao .ep-gb-btn:disabled { opacity: 0.45; cursor: not-allowed; }
#ep-guia-balao .ep-gb-btn:focus-visible,
#ep-guia-balao .ep-gb-x:focus-visible,
#ep-guia-balao .ep-gb-item:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }

/* ---- cartao de pausa ("Voce fechou a janela", "Vamos continuar?") --------- */
#ep-guia-pausa {
    position: fixed;
    right: 94px;
    bottom: 30px;
    z-index: 46;
    width: min(320px, calc(100vw - 110px));
    padding: 13px 14px;
    border: 1px solid #dbe4f0;
    border-radius: 16px 16px 5px 16px;
    background: #ffffff;
    box-shadow: 0 18px 40px -14px rgba(15, 23, 42, 0.38);
    transform: translateY(calc(-1 * var(--ep-ajuda-sobe, 0px)));
    animation: epGuiaPausaEntra 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
/* a entrada respeita o quanto o botao do Estoki subiu (avaliacao, barra de itens) */
@keyframes epGuiaPausaEntra {
    from { opacity: 0; transform: translateY(calc(6px - var(--ep-ajuda-sobe, 0px))) scale(0.98); }
    to   { opacity: 1; transform: translateY(calc(-1 * var(--ep-ajuda-sobe, 0px))); }
}
/* pausa com uma janela aberta (alvo nao achado, minimo zero): por cima dela */
#ep-guia-pausa.ep-gp-sobre { z-index: 10042; }
#ep-guia-pausa::after {
    content: '';
    position: absolute;
    right: -7px;
    bottom: 13px;
    width: 12px;
    height: 12px;
    background: inherit;
    border-top: 1px solid #dbe4f0;
    border-right: 1px solid #dbe4f0;
    border-radius: 0 3px 0 0;
    transform: rotate(45deg);
}
#ep-guia-pausa .ep-gp-topo { display: flex; align-items: flex-start; gap: 10px; }
#ep-guia-pausa .ep-gp-avatar { flex: none; width: 34px; height: 34px; }
#ep-guia-pausa .ep-gp-avatar .ep-estoki { width: 100%; height: 100%; }
#ep-guia-pausa .ep-gp-cabeca { flex: 1; min-width: 0; }
#ep-guia-pausa .ep-gp-titulo { font-size: 14px; font-weight: 700; line-height: 1.3; color: #0f172a; }
#ep-guia-pausa .ep-gp-texto { margin-top: 3px; font-size: 13px; line-height: 1.45; color: #475569; }
#ep-guia-pausa .ep-gp-texto b { font-weight: 600; color: #1e293b; }
#ep-guia-pausa .ep-gp-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-left: 44px; }
#ep-guia-pausa .ep-gp-sim,
#ep-guia-pausa .ep-gp-nao {
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}
#ep-guia-pausa .ep-gp-sim { background: #2563eb; color: #ffffff; }
#ep-guia-pausa .ep-gp-nao { background: transparent; color: #64748b; }
#ep-guia-pausa .ep-gp-sim:focus-visible,
#ep-guia-pausa .ep-gp-nao:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }

/* ---- faixa "Passo a passo guiado" dentro do card Primeiros passos ---------- */
#ep-checklist .ep-ck-guia {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 2px;
    padding: 10px 12px 10px 14px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #eff6ff;
}
#ep-checklist .ep-ck-guia-texto { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.45; color: #1e3a8a; }
#ep-checklist .ep-ck-guia-texto > i { margin-top: 3px; color: #2563eb; }
#ep-checklist .ep-ck-guia-texto b { font-weight: 700; }
#ep-checklist .ep-ck-guia-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: none;
    border-radius: 10px;
    background: #2563eb;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 8px 18px -10px rgba(37, 99, 235, 0.9);
}
#ep-checklist .ep-ck-guia-btn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }

/* ---- modo escuro ------------------------------------------------------------ */
html.dark #ep-guia-foco { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62); }
html.dark #ep-guia-foco::after { border-color: #60a5fa; }
html.dark #ep-guia-veu { background: rgba(0, 0, 0, 0.62); }
html.dark #ep-guia-balao,
html.dark #ep-guia-pausa {
    border-color: var(--ep-border-s);
    background: var(--ep-surf);
    color: var(--ep-txt);
    box-shadow: 0 26px 60px -18px rgba(0, 0, 0, 0.85);
}
html.dark #ep-guia-balao .ep-gb-seta,
html.dark #ep-guia-pausa::after { border-color: var(--ep-border-s); }
html.dark #ep-guia-balao .ep-gb-barra { background: var(--ep-surf-3); }
html.dark #ep-guia-balao .ep-gb-etapa { color: #93c5fd; }
html.dark #ep-guia-balao .ep-gb-contador { color: var(--ep-txt-3); }
html.dark #ep-guia-balao .ep-gb-titulo,
html.dark #ep-guia-balao .ep-gb-texto b,
html.dark #ep-guia-pausa .ep-gp-titulo,
html.dark #ep-guia-pausa .ep-gp-texto b { color: var(--ep-txt); }
html.dark #ep-guia-balao .ep-gb-texto,
html.dark #ep-guia-pausa .ep-gp-texto { color: var(--ep-txt-2); }
html.dark #ep-guia-balao .ep-gb-x { color: var(--ep-txt-3); }
html.dark #ep-guia-balao .ep-gb-espera { background: rgba(59, 130, 246, 0.14); color: #bfdbfe; }
html.dark #ep-guia-balao .ep-gb-bloqueio { color: #fcd34d; }
html.dark #ep-guia-balao .ep-gb-item { border-color: var(--ep-border-s); background: var(--ep-surf-2); color: var(--ep-txt); }
html.dark #ep-guia-balao .ep-gb-item-marca { color: var(--ep-txt-2); background: var(--ep-surf-3); border-color: var(--ep-border-s); }
html.dark #ep-guia-balao .ep-gb-item-proximo { border-color: #324a6d; background: #1e2940; }
html.dark #ep-guia-balao .ep-gb-item-proximo .ep-gb-item-marca { color: #ffffff; background: #2f7fe8; border-color: #2f7fe8; }
html.dark #ep-guia-balao .ep-gb-item-feito .ep-gb-item-marca { color: #86efac; background: rgba(34, 197, 94, 0.16); border-color: rgba(34, 197, 94, 0.35); }
html.dark #ep-guia-balao .ep-gb-item-feito .ep-gb-item-titulo { color: var(--ep-txt-3); }
html.dark #ep-guia-balao .ep-gb-item-status { color: #86efac; }
html.dark #ep-guia-balao .ep-gb-btn { border-color: var(--ep-border-s); background: var(--ep-surf-2); color: var(--ep-txt); }
html.dark #ep-guia-balao .ep-gb-btn-leve { border-color: transparent; background: transparent; color: var(--ep-txt-3); }
html.dark #ep-guia-balao .ep-gb-btn-principal { border-color: #2f7fe8; background: #2f7fe8; color: #ffffff; }
html.dark #ep-guia-pausa .ep-gp-sim { background: #2f7fe8; }
html.dark #ep-guia-pausa .ep-gp-nao { color: var(--ep-txt-3); }
html.dark #ep-checklist .ep-ck-guia { border-color: #324a6d; background: #1e2940; }
html.dark #ep-checklist .ep-ck-guia-texto { color: #bfdbfe; }
html.dark #ep-checklist .ep-ck-guia-texto > i { color: #60a5fa; }
html.dark #ep-checklist .ep-ck-guia-btn { background: #2f7fe8; box-shadow: none; }

/* ---- hover so onde existe mouse: no toque, o "hover" grudava no botao que
   aparecia no lugar do que acabou de ser tocado ------------------------------ */
@media (hover: hover) {
    #ep-guia-balao .ep-gb-x:hover { background: #f1f5f9; color: #334155; }
    #ep-guia-balao .ep-gb-item:hover { border-color: #93c5fd; background: #eff6ff; }
    #ep-guia-balao .ep-gb-btn:hover { border-color: #cbd5e1; background: #f8fafc; }
    #ep-guia-balao .ep-gb-btn-leve:hover { border-color: transparent; background: #f1f5f9; color: #334155; }
    #ep-guia-balao .ep-gb-btn-principal:hover { border-color: #1d4ed8; background: #1d4ed8; }
    #ep-guia-pausa .ep-gp-sim:hover { background: #1d4ed8; }
    #ep-guia-pausa .ep-gp-nao:hover { background: #f1f5f9; color: #334155; }
    #ep-checklist .ep-ck-guia-btn:hover { background: #1d4ed8; }
    html.dark #ep-guia-balao .ep-gb-x:hover { background: var(--ep-surf-3); color: var(--ep-txt); }
    html.dark #ep-guia-balao .ep-gb-item:hover { border-color: #60a5fa; background: var(--ep-surf-3); }
    html.dark #ep-guia-balao .ep-gb-btn:hover { border-color: #60a5fa; background: var(--ep-surf-3); }
    html.dark #ep-guia-balao .ep-gb-btn-leve:hover { border-color: transparent; background: var(--ep-surf-3); color: var(--ep-txt); }
    html.dark #ep-guia-balao .ep-gb-btn-principal:hover { border-color: #3b8cf5; background: #3b8cf5; }
    html.dark #ep-guia-pausa .ep-gp-sim:hover { background: #3b8cf5; }
    html.dark #ep-guia-pausa .ep-gp-nao:hover { background: var(--ep-surf-3); color: var(--ep-txt); }
    html.dark #ep-checklist .ep-ck-guia-btn:hover { background: #3b8cf5; }
}

/* ---- celular ---------------------------------------------------------------- */
@media (max-width: 639.98px) {
    /* o balao fica preso numa ponta da tela (o app.js escolhe a oposta ao alvo) */
    #ep-guia-balao,
    #ep-guia-balao.ep-gb-centro {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 13px 14px 12px;
    }
    #ep-guia-balao .ep-gb-barra { margin: -13px -14px 11px; }
    #ep-guia-balao .ep-gb-avatar { width: 36px; height: 36px; }
    #ep-guia-balao .ep-gb-titulo { font-size: 15px; }
    #ep-guia-balao .ep-gb-btn { padding: 9px 13px; }
    #ep-guia-pausa {
        right: 78px;
        bottom: calc(22px + env(safe-area-inset-bottom));
        width: calc(100vw - 94px);
    }
    #ep-guia-pausa .ep-gp-acoes { padding-left: 0; }
    #ep-checklist .ep-ck-guia { flex-direction: column; align-items: stretch; }
    #ep-checklist .ep-ck-guia-btn { justify-content: center; }
}

/* ---- menos movimento para quem pediu --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #ep-guia-balao, #ep-guia-balao.ep-gb-entra, #ep-guia-pausa,
    #ep-guia-balao .ep-gb-espera i, #ep-guia-balao .ep-gb-barra span { animation: none !important; transition: none !important; }
    #ep-guia-foco::after { animation: none; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3); }
}

/* ---- nada disso sai no papel ----------------------------------------------- */
@media print {
    #ep-guia-foco, #ep-guia-veu, #ep-guia-balao, #ep-guia-pausa { display: none !important; }
}