/*
 * Componentes de Interface - SUAS em Dados
 * * Objetivo: Sistema de design padronizado para a aplicação SUAS em Dados
 * Características:
 * - Design responsivo
 * - Feedback visual para interações
 * - Hierarquia clara de informação
 * - Sistema de variáveis CSS para consistência
 * * Mantido por: [Junier Goulart/COOVIG]
 * Última atualização: 2025-05-20
 */

/* =================== Sistema de Variáveis CSS ======================= */
/* Importações no topo */
@import url('https://fonts.cdnfonts.com/css/rawline');

:root {
    /* Paleta de cores - Sugestões baseadas no padrão gov.br
     * Nota: O azul primário oficial do Gov.br é #0068B2.
     * As cores definidas aqui são as fornecidas e nomeadas como "sugestões".
     */
    --color-primary: #0072C6;           /* Azul principal gov.br */
    --color-primary-dark: #005699;      /* Variação escura do azul principal */
    --color-secondary: #28A745;         /* Verde gov.br */
    --color-text: #333333;              /* Cor padrão para textos (cinza escuro) */
    --color-text-light: #ffffff;        /* Cor para textos em fundos escuros */
    --color-background: #f8f9fa;        /* Cor de fundo padrão (cinza claro) */
    --color-background-hover: #e9ecef;  /* Cor de fundo para hover */
    --color-border: #ced4da;            /* Cor padrão para bordas (cinza) */
    --color-action: var(--color-primary); /* Cor para botões de ação (usar azul principal) */
    --color-action-hover: var(--color-primary-dark); /* Cor para hover em botões de ação */
    --color-warning: #FFC107;           /* Amarelo para alertas/avisos (opcional) */

    /* Tipografia - Baseada na fonte "Rawline", padrão gov.br e Mantine */
    --font-family-base: 'Rawline', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mantine-primary-color: #228be6;
    --mantine-secondary-color: #20c997;
    --mantine-warning-color: #fd7e14;
    --mantine-danger-color: #ff4757;

    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* Espaçamento */
    --spacing-xs: 4px;                  /* Espaçamento muito pequeno */
    --spacing-sm: 8px;                  /* Espaçamento pequeno */
    --spacing-md: 12px;                 /* Espaçamento médio */
    --spacing-lg: 16px;                 /* Espaçamento grande */
    --spacing-xl: 24px;                 /* Espaçamento muito grande */

    /* Bordas - Ajustado para maior alinhamento com o padrão gov.br (geralmente menos arredondado) */
    --border-radius-sm: 4px;            /* Borda levemente arredondada (mantido) */
    --border-radius-md: 4px;            /* Ajustado de 6px para 4px para consistência gov.br */
    --border-radius-lg: 8px;            /* Mantido, usar com moderação para elementos específicos */
    --border-width: 1px;

    /* Sombras - Sombras sutis e planas, conforme padrão gov.br */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.075);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);

    /* Transições */
    --transition-fast: 0.2s ease-in-out;
    --transition-normal: 0.3s ease;

    /* Adicionar para performance */
    --enable-smooth-scroll: 1;
    --enable-animations: 1;

    /* Novas variáveis para animações */
    --animation-duration: 0.2s;
    --animation-easing: cubic-bezier(0.25, 0.8, 0.25, 1);
    --hover-lift: -3px;
    --hover-scale: 1.02;
    --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --shadow-focus: 0 0 0 3px rgba(34, 139, 230, 0.2);
}

/* Aplicação da fonte base em todo o documento */
body {
    font-family: var(--font-family-base);
    color: var(--color-text); /* Garante a cor padrão do texto em todo o body */
    line-height: 1.5; /* Boa prática para legibilidade */
}

/* =================== Componentes Reutilizáveis ======================= */

/* --- Layout Containers --- */
.layout-card {
    padding: var(--spacing-lg);
    height: 95vh; /* Manter alturas específicas da aplicação */
    min-height: 600px; /* Manter alturas específicas da aplicação */
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: var(--border-radius-md); /* Usar border-radius-md para consistência */
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-sm); /* Adicionar sombra sutil para elevação */
}

.layout-sidebar {
    height: 95vh; /* Manter alturas específicas da aplicação */
    margin: var(--spacing-xl);
    padding-right: var(--spacing-md);
    padding-left: var(--spacing-md);
    overflow-y: auto;
    background-color: #ffffff;
    border-right: var(--border-width) solid var(--color-border);
    /* Adicionar sombra sutil para separação visual, se desejado */
    /* box-shadow: var(--shadow-sm); */ 
}

.layout-row {
    margin-bottom: var(--spacing-lg);
}

/* --- Elementos de Texto --- */
.text-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    color: var(--color-primary); /* Mantido, títulos podem usar a cor primária */
}

.text-value {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary); /* Mantido, cor secundária para valores de destaque */
}

/* --- Elementos de Ícone --- */
.icon-default {
    margin-right: var(--spacing-sm); /* Ajustado para um espaçamento ligeiramente menor e mais compacto */
    font-size: var(--font-size-xl); /* Ajustado para um tamanho que harmonize melhor com o texto */
    color: var(--color-primary); /* Sugestão: usar a cor primária para ícones de destaque */
}

.icon-inline {
    display: inline-block;
    vertical-align: middle;
}

/* =================== Componente Card ======================= */
.card {
    background-color: #ffffff;
    border-radius: 12px; /* Bordas mais arredondadas */
    padding: var(--spacing-xl);
    text-align: left;
    transition:
        transform var(--animation-duration) var(--animation-easing),
        box-shadow var(--animation-duration) var(--animation-easing),
        border-color var(--animation-duration) var(--animation-easing);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 
                0 1px 3px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #228be6, #20c997);
    transform: scaleX(0);
    transition: transform var(--animation-duration) var(--animation-easing);
    transform-origin: left;
}

/* Efeito de hover para destaque visual - mais sutil, conforme Gov.br */
.card:hover {
    transform: translateY(var(--hover-lift)) scale(var(--hover-scale));
    box-shadow: var(--shadow-hover);
    border-color: rgba(34, 139, 230, 0.2);
}

.card:hover::before {
    transform: scaleX(1);
}

/* Estilo do título do card */
.card-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

/* Valor principal do card - destaque numérico */
.card-value {
    font-size: var(--font-size-xxl);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary);
}

/* =================== Botão de Exportação ======================= */
.export {
    background-color: var(--color-action);
    color: var(--color-text-light);
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-sm);
    border-radius: var(--border-radius-sm); /* 4px */
    cursor: pointer;
    transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
    border: none;
    text-transform: uppercase; /* Mantido, alinhado com gov.br */
    font-weight: var(--font-weight-bold);
    display: inline-flex; /* Melhor para alinhamento de ícones/texto */
    align-items: center; /* Centraliza verticalmente o conteúdo */
    justify-content: center; /* Centraliza horizontalmente o conteúdo */
    box-shadow: var(--shadow-sm); /* Sombra sutil para botões */
}

/* Estado hover mantém consistência visual */
.export:hover {
    color: var(--color-text-light);
    background-color: var(--color-action-hover);
    box-shadow: var(--shadow-md); /* Sombra mais pronunciada no hover */
}

/* Estado de foco para acessibilidade */
.export:focus {
    outline: 2px solid var(--color-primary-dark); /* Anel de foco claro */
    outline-offset: 2px;
}

/* =================== Componente Dropdown ======================= */
/* Estilos gerais do dropdown - Alinhado com o padrão gov.br para campos de formulário */
.dbc-dropdown {
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--border-radius-sm); /* 4px */
    font-size: var(--font-size-sm);
    background-color: #ffffff;
    box-shadow: none; /* Dropdowns geralmente mais planos, sem sombra externa */
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Estilos para o controle do dropdown */
.dbc-dropdown .Select-control {
    border: none; /* Remover borda interna */
    box-shadow: none;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: transparent;
    cursor: pointer;
}

/* Estilos para o controle do dropdown e quando está aberto/focado */
.dbc-dropdown .Select-control,
.dbc-dropdown .is-open > .Select-control,
.dbc-dropdown .Select-control:focus { /* Adicionado foco para o controle */
    border: none;
    box-shadow: none;
    background-color: transparent;
}

/* Efeito de foco no dropdown principal */
.dbc-dropdown.is-focused,
.dbc-dropdown.is-open {
    border-color: var(--color-primary); /* Borda primária no foco/abertura */
    box-shadow: 0 0 0 2px rgba(0, 114, 198, 0.25); /* Anel de foco Gov.br (com opacidade) */
}

/* Estilos para o menu do dropdown */
.dbc-dropdown .Select-menu-outer {
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-md); /* Sombra para o menu flutuante */
    border-radius: var(--border-radius-sm); /* 4px */
    margin-top: var(--spacing-xs); /* Pequeno espaçamento entre controle e menu */
}

/* Estilos para o item selecionado (texto visível) */
.dbc-dropdown .Select-value-label {
    color: var(--color-text);
}

/* Estilos para as opções do dropdown */
.dbc-dropdown .Select-option {
    background-color: var(--color-background); /* Fundo padrão para opções */
    color: var(--color-text);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Estilos para a opção selecionada (hover/foco) */
.dbc-dropdown .Select-option.is-focused,
.dbc-dropdown .Select-option:hover { /* Adicionar hover para todas as opções */
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

/* Estilos para a opção selecionada */
.dbc-dropdown .Select-option.is-selected {
    background-color: var(--color-primary-dark); /* Cor mais escura para a opção realmente selecionada */
    color: var(--color-text-light);
    font-weight: var(--font-weight-bold);
}


/* =================== Componente Sidebar ======================= */
/* Estilo base para todos os links da sidebar */
.sidebar-link {
    color: #000000; /* Mudando para preto */
    border-radius: var(--border-radius-md);
    text-decoration: none;
    padding: var(--spacing-sm) var(--spacing-md); /* Reduzido de var(--spacing-md) var(--spacing-lg) */
    margin: var(--spacing-xs) 0; /* Reduzido de var(--spacing-sm) 0 */
    transition:
        transform var(--animation-duration) var(--animation-easing),
        box-shadow var(--animation-duration) var(--animation-easing),
        background-color var(--animation-duration) var(--animation-easing),
        border-color var(--animation-duration) var(--animation-easing);
    display: flex;
    align-items: center;
    border: var(--border-width) solid transparent;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-sm); /* Adicionado para reduzir o tamanho da fonte */
}

/* Estado de hover para feedback visual - mais sutil */
.sidebar-link:hover {
    background-color: var(--color-background-hover);
    color: var(--color-primary); /* Cor primária no hover do link */
    border-color: var(--color-background-hover); /* Borda suave no hover */
    box-shadow: none; /* Remover sombra no hover, manter mais plano */
}

/* Estado ativo com destaque visual - Alinhado com o padrão gov.br para navegação */
.sidebar-link.active,
.sidebar-link.active:focus,
.sidebar-link.active:visited {
    background-color: var(--color-primary) !important; /* Fundo primário */
    color: var(--color-text-light) !important; /* Texto branco */
    border-color: var(--color-primary-dark) !important; /* Borda sutil escura */
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-sm); /* Sombra sutil para destaque de ativo */
    outline: none; /* Remover outline padrão se estiver usando box-shadow para foco visual */
}

/* Adicionando um foco para links não-ativos também */
.sidebar-link:focus {
    outline: 2px solid var(--color-primary); /* Anel de foco Gov.br */
    outline-offset: 2px;
}

/* ============ SUAS em Dados - Estilos Customizados ============ */

/* Estilos gerais */
.main-container {
    font-family: var(--font-family-base);
}

/* ============ Estilos da Sidebar DMC ============ */
.nav-item {
    transition: all var(--animation-duration) var(--animation-easing) !important;
    border-radius: 8px !important; /* Reduzido de 10px */
    position: relative !important;
    overflow: hidden !important;
    margin: var(--spacing-xs) 0 !important; /* Adicionado para reduzir espaçamento vertical */
}

.nav-item .mantine-Paper-root {
    padding: var(--spacing-sm) var(--spacing-md) !important; /* Reduzir padding interno */
    min-height: auto !important; /* Permitir altura automática menor */
}

/* Reduzir tamanho dos ícones na sidebar */
.nav-item .dash-iconify {
    width: 18px !important; /* Reduzido de tamanho padrão */
    height: 16px !important;
    font-size: 18px !important;
}

/* Reduzir tamanho do texto nos itens de navegação */
.nav-item .mantine-Text-root {
    font-size: var(--font-size-sm) !important;
    line-height: 1.3 !important;
    color: #565353 !important; /* Adicionando cor preta específica */
}

/* Ajustar espaçamento entre ícone e texto */
.nav-item .mantine-Group-root {
    gap: var(--spacing-sm) !important;
}

.nav-item:hover {
    background-color: rgba(204, 219, 233, 0.05) !important;
    transform: translateX(4px);
}

.nav-item:hover .mantine-Paper-root {
    background-color: rgba(34, 139, 230, 0.08) !important;
    border-left: 3px solid #228be6;
}

.nav-item:hover .dash-iconify {
/* Removido: Estilos de Dash Bootstrap Components (dbc-dropdown) */
    opacity: 1;
    transform: translateX(0);
    transition: all 0.3s ease-out;
}

.notification-exit {
    opacity: 1;
    transform: translateX(0);
}

.notification-exit-active {
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease-in;
}

/* ============ Estilos para AppShell DMC ============ */
.mantine-AppShell-navbar {
    border-right: 1px solid #ffffff !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05) !important;
}

.mantine-AppShell-main {
    background-color: #f8f9fa !important;
}

/* ============ Estilos para Dropdown DMC ============ */
.mantine-Select-dropdown {
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.mantine-Select-item:hover {
    background-color: rgba(34, 139, 230, 0.1) !important;
}

/* ========== Estilos Específicos para MultiSelect com Muitos Itens ========== */
/* Controle da área de valores selecionados para evitar poluição visual */
.mantine-MultiSelect-values {
    max-height: 80px !important;
    overflow-y: auto !important;
    gap: 3px !important;
    padding: 4px !important;
}

/* Estilos para as tags individuais */
.mantine-MultiSelect-value {
    max-width: 120px !important;
    height: 22px !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    line-height: 18px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    border-radius: 4px !important;
    background-color: rgba(34, 139, 230, 0.1) !important;
    border: 1px solid rgba(34, 139, 230, 0.2) !important;
}

/* Estilo para quando há muitos itens selecionados - compacta ainda mais */
.mantine-MultiSelect-values[data-many-selected="true"] {
    max-height: 60px !important;
}

.mantine-MultiSelect-values[data-many-selected="true"] .mantine-MultiSelect-value {
    max-width: 90px !important;
    height: 18px !important;
    font-size: 9px !important;
    padding: 1px 4px !important;
    line-height: 16px !important;
}

/* Controle do input do MultiSelect */
.mantine-MultiSelect-input {
    min-height: 40px !important;
    max-height: 120px !important;
}

/* Estilo especial para dropdowns de municípios */
#monitoramento-municipio-dropdown .mantine-MultiSelect-values,
#cofinanciamento-municipio-dropdown .mantine-MultiSelect-values {
    max-height: 70px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
}

/* Scroll customizado para a área de valores */
.mantine-MultiSelect-values::-webkit-scrollbar {
    width: 4px !important;
}

.mantine-MultiSelect-values::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 2px !important;
}

.mantine-MultiSelect-values::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important;
    border-radius: 2px !important;
}

.mantine-MultiSelect-values::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8 !important;
}

/* ============ Animações ============ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.3s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-left {
    animation: slideInLeft 0.3s ease-out;
}

/* Animações para botão flutuante */
@keyframes float-button {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 4px 12px rgba(34, 139, 230, 0.3);
        transform: scale(1);
    }
    100% {
        box-shadow: 0 6px 20px rgba(34, 139, 230, 0.5);
        transform: scale(1.02);
    }
}

@keyframes subtle-glow {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(34, 139, 230, 0.3);
    }
    50% {
        box-shadow: 0 4px 16px rgba(34, 139, 230, 0.6);
    }
}

/* =================== Melhorias Modernas - Animações e Microinterações ======================= */

/* Variáveis para animações */
:root {
    /* ...existing variables... */
    
    /* Novas variáveis para animações */
    --animation-duration: 0.2s;
    --animation-easing: cubic-bezier(0.25, 0.8, 0.25, 1);
    --hover-lift: -3px;
    --hover-scale: 1.02;
    --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --shadow-focus: 0 0 0 3px rgba(34, 139, 230, 0.2);
}

/* =================== Cards Modernos com Animações ======================= */
.card {
    background-color: #ffffff;
    border-radius: 12px; /* Bordas mais arredondadas */
    padding: var(--spacing-xl);
    text-align: left;
    transition:
        transform var(--animation-duration) var(--animation-easing),
        box-shadow var(--animation-duration) var(--animation-easing),
        border-color var(--animation-duration) var(--animation-easing);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 
                0 1px 3px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #228be6, #20c997);
    transform: scaleX(0);
    transition: transform var(--animation-duration) var(--animation-easing);
    transform-origin: left;
}

.card:hover {
    transform: translateY(var(--hover-lift)) scale(var(--hover-scale));
    box-shadow: var(--shadow-hover);
    border-color: rgba(34, 139, 230, 0.2);
}

.card:hover::before {
    transform: scaleX(1);
}

/* =================== Botões Modernos ======================= */
.modern-button {
    background: linear-gradient(135deg, #228be6 0%, #1c7ed6 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--animation-duration) var(--animation-easing);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(34, 139, 230, 0.3);
}

.modern-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.modern-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 139, 230, 0.4);
}

.modern-button:hover::before {
    left: 100%;
}

.modern-button:active {
    transform: translateY(0);
}

/* =================== Mantine Components - Melhorias ======================= */

/* Paper components com animações */
.mantine-Paper-root {
    transition: all var(--animation-duration) var(--animation-easing) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.mantine-Paper-root:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

/* Cards com efeito glassmorphism */
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    transition: all var(--animation-duration) var(--animation-easing);
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* =================== Dropdown Moderno ======================= */
.mantine-Select-dropdown {
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    animation: dropdownSlideIn 0.2s ease-out !important;
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mantine-Select-item {
    border-radius: 6px !important;
    margin: 2px 4px !important;
    transition: all 0.15s ease !important;
}

.mantine-Select-item:hover {
    background-color: rgba(34, 139, 230, 0.1) !important;
    transform: translateX(4px) !important;
}

/* =================== Sidebar Melhorada ======================= */
.nav-item {
    transition: all var(--animation-duration) var(--animation-easing) !important;
    border-radius: 10px !important;
    position: relative !important;
    overflow: hidden !important;
}

.nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: linear-gradient(180deg, #228be6, #20c997);
    transform: scaleY(0);
    transition: transform var(--animation-duration) var(--animation-easing);
}

.nav-item:hover {
    background-color: rgba(34, 139, 230, 0.05) !important;
    transform: translateX(6px) !important;
    box-shadow: 0 4px 12px rgba(34, 139, 230, 0.15) !important;
}

.nav-item:hover::before {
    transform: scaleY(1);
}

.nav-item:hover .mantine-Paper-root {
    background-color: rgba(34, 139, 230, 0.08) !important;
}

/* =================== Modais Modernos ======================= */
.mantine-Modal-content {
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
    animation: modalSlideIn 0.3s ease-out !important;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mantine-Modal-overlay {
    backdrop-filter: blur(4px) !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
}

/* =================== Tabelas Modernas ======================= */
.modern-table {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.modern-table thead {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.modern-table tbody tr {
    transition: all 0.15s ease;
}

.modern-table tbody tr:hover {
    background-color: rgba(34, 139, 230, 0.04);
    transform: scale(1.005);
}

/* =================== Input Fields Modernos ======================= */
.mantine-Input-input {
    border-radius: 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    transition: all var(--animation-duration) ease !important;
}

.mantine-Input-input:focus {
    border-color: #228be6 !important;
    box-shadow: var(--shadow-focus) !important;
    transform: translateY(-1px) !important;
}

/* =================== Progress Bars Animados ======================= */
.mantine-Progress-bar {
    background: linear-gradient(90deg, #228be6, #20c997) !important;
    animation: progressGlow 2s ease-in-out infinite alternate !important;
}

@keyframes progressGlow {
    from {
        box-shadow: 0 0 5px rgba(34, 139, 230, 0.5);
    }
    to {
        box-shadow: 0 0 20px rgba(34, 139, 230, 0.8);
    }
}

/* =================== Scroll Personalizado ======================= */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #228be6, #20c997);
    border-radius: 10px;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #1c7ed6, #18a05e);
    box-shadow: 0 0 10px rgba(34, 139, 230, 0.5);
}

/* =================== Loading States ======================= */
.loading-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* =================== Micro-animações para ícones ======================= */
.dash-iconify {
    transition: all var(--animation-duration) var(--animation-easing) !important;
}

.nav-item:hover .dash-iconify {
    transform: scale(1.1) rotate(5deg) !important;
    filter: drop-shadow(0 2px 4px rgba(34, 139, 230, 0.3)) !important;
}

/* =================== Utility Classes ======================= */
.hover-lift {
    transition: transform var(--animation-duration) var(--animation-easing);
}

.hover-lift:hover {
    transform: translateY(-3px);
}

.hover-scale {
    transition: transform var(--animation-duration) var(--animation-easing);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.smooth-border {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all var(--animation-duration) var(--animation-easing);
}

.smooth-border:hover {
    border-color: rgba(34, 139, 230, 0.3);
    box-shadow: 0 4px 12px rgba(34, 139, 230, 0.15);
}

/* =================== Responsividade Moderna ======================= */
@media (max-width: 768px) {
    .card {
        padding: var(--spacing-md);
        margin: var(--spacing-sm);
    }
    
    .nav-item:hover {
        transform: translateX(3px) !important;
    }
    
    .modern-button {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .glass-card {
        backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }
}

/* =================== Modal de Boas-vindas - Sistema Completo ======================= */
/* Variáveis CSS específicas para o modal */
:root {
    --welcome-primary-gradient: linear-gradient(45deg, #228be6, #20c997);
    --welcome-secondary-gradient: linear-gradient(135deg, rgba(34,139,230,0.1), rgba(32,201,151,0.1));
    --welcome-modal-size: 95vw;
    --welcome-modal-height: 95vh;
    --welcome-border-radius: 12px;
    --welcome-transition: all 0.3s ease;
}

/* =================== Modal Principal ======================= */
.welcome-modal {
    animation: modal-entrance 0.4s ease-out;
}

.welcome-modal .mantine-Modal-content {
    border-radius: var(--welcome-border-radius);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: var(--welcome-modal-size) !important;
    height: var(--welcome-modal-height) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.welcome-modal .mantine-Modal-header {
    background: var(--welcome-secondary-gradient);
    border-bottom: 1px solid rgba(34, 139, 230, 0.1);
}

.welcome-modal .mantine-Modal-body {
    padding: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.welcome-modal .mantine-Modal-root {
    z-index: 9999;
}

/* =================== Animações ======================= */
@keyframes modal-entrance {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes pulse-glow {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(34, 139, 230, 0.5);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 20px rgba(34, 139, 230, 0.8), 0 0 30px rgba(32, 201, 151, 0.6);
        transform: scale(1.05);
    }
}

@keyframes float-button {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =================== Tabs Personalizadas ======================= */
.welcome-modal .mantine-Tabs-root {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.welcome-modal .mantine-Tabs-list {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: var(--welcome-border-radius);
    padding: 8px;
    border: 1px solid rgba(34, 139, 230, 0.1);
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
}

.welcome-modal .mantine-Tabs-tab {
    border: none;
    transition: var(--welcome-transition);
    border-radius: 8px;
}

.welcome-modal .mantine-Tabs-tab:hover {
    background: rgba(34, 139, 230, 0.1);
    transform: translateY(-2px);
}

.welcome-modal .mantine-Tabs-tab[data-active="true"] {
    background: var(--welcome-primary-gradient);
    color: white;
    box-shadow: 0 4px 12px rgba(34, 139, 230, 0.3);
}

.welcome-modal .mantine-Tabs-tab[data-active="true"] .mantine-Text-root {
    color: white !important;
}

.welcome-modal .mantine-Tabs-panel {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 24px !important;
}

/* =================== Progress Bar ======================= */
.welcome-modal .mantine-Progress-root {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.welcome-modal .mantine-Progress-bar {
    background: var(--welcome-primary-gradient);
    transition: width 0.5s ease-in-out;
}

/* =================== Botões de Ação ======================= */
.welcome-modal .mantine-ActionIcon-root:hover {
    transform: rotate(90deg);
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.welcome-modal .mantine-Button-root {
    transition: var(--welcome-transition);
}

.welcome-modal .mantine-Button-root:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* =================== Sidebar Item Especial ======================= */
.welcome-nav-item {
    position: relative;
    overflow: hidden;
}

.welcome-nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.welcome-nav-item:hover::before {
    left: 100%;
}

.welcome-nav-item:hover {
    transform: translateX(5px);
    background: linear-gradient(90deg, rgba(34,139,230,0.2) 0%, rgba(32,201,151,0.2) 100%) !important;
    border-left: 3px solid #228be6 !important;
}

.welcome-nav-item .mantine-ThemeIcon-root {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* =================== Loading States ======================= */
.welcome-content-loading {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.welcome-content-loaded {
    opacity: 1;
    pointer-events: auto;
    animation: fade-in-up 0.4s ease-out;
}

/* =================== Estados de Focus - Acessibilidade ======================= */
.welcome-modal .mantine-Tabs-tab:focus-visible {
    outline: 2px solid #228be6;
    outline-offset: 2px;
}

.welcome-modal .mantine-Button-root:focus-visible,
.welcome-modal .mantine-ActionIcon-root:focus-visible {
    outline: 2px solid #228be6;
    outline-offset: 2px;
}

/* =================== Responsividade ======================= */
@media (max-width: 1200px) {
    :root {
        --welcome-modal-size: 98vw;
    }
    
    .welcome-modal .mantine-Tabs-list {
        padding: 6px;
        gap: 2px;
    }
    
    .welcome-modal .mantine-Tabs-tab {
        flex: 1;
        min-width: 100px;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    :root {
        --welcome-modal-size: 100vw;
        --welcome-modal-height: 100vh;
    }
    
    .welcome-modal .mantine-Modal-content {
        border-radius: 0;
        height: 100vh;
    }
    
    .welcome-modal .mantine-Tabs-list {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .welcome-modal .mantine-Tabs-list::-webkit-scrollbar {
        display: none;
    }
    
    .welcome-modal .mantine-Tabs-tab {
        white-space: nowrap;
        min-width: 120px;
    }
    
    .welcome-modal .mantine-Modal-header .mantine-Group-root {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    
    .welcome-modal .mantine-Progress-root {
        width: 200px;
    }
}

@media (max-width: 480px) {
    .welcome-modal .mantine-Modal-header .mantine-Title-root {
        font-size: 1.5rem;
    }
    
    .welcome-modal .mantine-Tabs-tab {
        min-width: 100px;
        padding: 8px 12px;
    }
    
    .welcome-modal .mantine-Tabs-tab .mantine-Text-root:last-child {
        display: none; /* Esconde o texto, mantém só o emoji */
    }
}

/* =================== Sistema de Zoom Automático via JavaScript ======================= */
/* O zoom automático agora é controlado via JavaScript no componente auto_zoom.py */
/* Isso garante melhor compatibilidade entre navegadores e controle mais preciso */

/* Classes utilitárias para zoom manual (caso necessário) */
.zoom-90 {
    zoom: 0.9 !important;
}

.zoom-100 {
    zoom: 1 !important;
}

.zoom-110 {
    zoom: 1.1 !important;
}

.zoom-125 {
    zoom: 1.25 !important;
}

.zoom-150 {
    zoom: 1.5 !important;
}

/* Fallback com transform para browsers que não suportam zoom */
.zoom-transform-90 {
    transform: scale(0.9) !important;
    transform-origin: top left !important;
    width: 111.11% !important;
    height: 111.11% !important;
}

.zoom-transform-150 {
    transform: scale(1.5) !important;
    transform-origin: top left !important;
    width: 66.67% !important;
    height: 66.67% !important;
}

/* =================== Otimizações e Melhorias Finais ======================= */
/* Otimização de animações com will-change controlado */
.will-animate {
    will-change: transform;
}

.will-animate-end {
    will-change: auto;
}

/* Desabilitar animações pesadas em dispositivos lentos */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .glass-card {
        backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.98) !important;
    }
}

/* Otimizar scrollbar apenas quando necessário */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

/* Usar transform3d para hardware acceleration */
.hover-lift:hover {
    transform: translate3d(0, -3px, 0);
}

/* Limitar animações infinitas */
.pulse-animation {
    animation: pulse-glow 2s ease-in-out 3; /* Apenas 3 vezes ao invés de infinito */
}

/* =================== Sistema de Tutorial Integrado ======================= */
/* Modal principal do tutorial */
.tutorial-modal .mantine-Modal-content {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: var(--border-radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}

.tutorial-modal .mantine-Modal-header {
    background: var(--welcome-secondary-gradient, var(--color-background)) !important;
    border-bottom: 1px solid var(--color-border) !important;
}

/* Call-to-action no welcome modal */
.tutorial-cta {
    position: relative;
    transition: all 0.3s ease;
}

.tutorial-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.15);
}

.tutorial-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.tutorial-cta:hover::before {
    left: 100%;
}

/* Animações específicas do tutorial */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translateY(0);
    }
    40%, 43% {
        transform: translateY(-8px);
    }
    70% {
        transform: translateY(-4px);
    }
    90% {
        transform: translateY(-2px);
    }
}

/* Animações de highlight com cores personalizadas */
@keyframes highlight-pulse-0 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.1);
    }
}

@keyframes highlight-pulse-1 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.1);
    }
}

@keyframes highlight-pulse-2 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(124, 58, 237, 0.1);
    }
}

@keyframes highlight-pulse-3 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.1);
    }
}

@keyframes highlight-pulse-4 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0.1);
    }
}

@keyframes highlight-pulse-5 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.1);
    }
}

/* Screenshots com highlights */
.screenshot-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.screenshot-container img {
    transition: transform 0.3s ease;
}

.screenshot-container:hover img {
    transform: scale(1.02);
}

/* Highlights interativos */
.highlight-overlay {
    transition: all 0.3s ease;
    cursor: pointer;
}

.highlight-overlay:hover {
    transform: scale(1.05);
    z-index: 10;
}

/* Dots de progresso */
.tutorial-dots-container .mantine-ActionIcon-root {
    transition: all 0.2s ease;
}

.tutorial-dots-container .mantine-ActionIcon-root:hover {
    transform: scale(1.1);
}

/* Steps de conteúdo */
.tutorial-step-content {
    animation: fadeInUp 0.5s ease-out;
}

/* Reutilizando animação fadeInUp existente */
@keyframes tutorial-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Cards de funcionalidades no tutorial */
.feature-card {
    transition: all 0.3s ease;
    border: 1px solid transparent;
    border-radius: var(--border-radius-md);
    background: var(--color-background);
    padding: var(--spacing-md);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
}

/* Melhorias visuais */
.tutorial-header {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    border-bottom: 2px solid var(--color-border);
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    padding: var(--spacing-lg);
}

.tutorial-footer {
    background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
    padding: var(--spacing-md);
}

/* Indicadores de progresso personalizados */
.tutorial-progress-indicator {
    position: relative;
    background: var(--color-background);
    border-radius: var(--border-radius-sm);
    height: 6px;
    overflow: hidden;
}

.tutorial-progress-indicator::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transform: scaleX(var(--progress, 0));
    transform-origin: left;
    transition: transform 0.5s ease;
}

/* Tooltip customizado */
.tutorial-tooltip {
    background: rgba(0, 0, 0, 0.9);
    color: var(--color-text-light);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-md);
    position: relative;
}

.tutorial-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
}

/* Estados de carregamento */
.tutorial-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.tutorial-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--border-radius-sm);
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Efeitos especiais para conclusão */
.tutorial-completion {
    position: relative;
    overflow: hidden;
}

.tutorial-completion::before {
    content: '🎉';
    position: absolute;
    font-size: 2rem;
    animation: confetti 3s ease-in-out infinite;
    opacity: 0.7;
}

@keyframes confetti {
    0%, 100% {
        transform: translateY(-10px) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: translateY(0px) rotate(180deg);
        opacity: 1;
    }
}

/* Animação específica para o botão tutorial na sidebar */
@keyframes pulse-tutorial {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(124, 58, 237, 0.1);
    }
}

/* Estilos para os itens de navegação especiais */
.tutorial-nav-item {
    transition: all 0.3s ease;
}

.tutorial-nav-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

.welcome-nav-item {
    transition: all 0.3s ease;
}

.welcome-nav-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 139, 230, 0.2);
}

/* Container de screenshot com loading */
.tutorial-screenshot-container {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tutorial-screenshot-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Imagem responsiva */
.tutorial-screenshot {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}

/* Loading placeholder */
.tutorial-screenshot-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Classes específicas para cada imagem */
.tutorial-image-full-high {
    background-image: url('../tutorial/screenshots/image.webp');
    width: 1920px;
    max-width: 100%;
    height: auto;
}

.tutorial-image-full-medium {
    background-image: url('../tutorial/screenshots/image_med.webp');
    width: 1920px;
    max-width: 100%;
    height: auto;
}

.tutorial-image-modal-high {
    background-image: url('../tutorial/screenshots/image_modal.webp');
    width: 1200px;
    max-width: 100%;
    height: auto;
}

.tutorial-image-modal-medium {
    background-image: url('../tutorial/screenshots/image_modal_med.webp');
    width: 1200px;
    max-width: 100%;
    height: auto;
}

.tutorial-image-thumbnail {
    background-image: url('../tutorial/screenshots/thumbnails/image_thumb.webp');
    width: 400px;
    max-width: 100%;
    height: auto;
}

/* Responsividade para tutorial */
@media (max-width: 768px) {
    .tutorial-cta {
        text-align: center;
    }
    
    .tutorial-cta .mantine-Group-root {
        flex-direction: column;
        gap: 1rem;
    }
    
    .highlight-overlay {
        display: none; /* Oculta highlights em mobile */
    }
    
    .tutorial-modal .mantine-Modal-content {
        margin: 0;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .tutorial-header,
    .tutorial-footer {
        padding: var(--spacing-sm);
    }
    
    .feature-card {
        padding: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
    }
}