/* Reset e Variáveis CSS Expandidas */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* Remove highlight azul/cinza em taps no mobile */
}

/* Variáveis CSS para um tema mais profissional e minimalista */
:root {
    /* Cores primárias - vibrantes para interação, mas bem balanceadas */
    --primary: #059669; /* Verde esmeralda mais profundo */
    --primary-dark: #047857; /* Ainda mais escuro */
    --primary-light: #10b981; /* Para hover/active e detalhes */
    --primary-contrast: #ffffff; /* Contraste sempre branco para o primário */
    --primary-hover-bg: #065f46; /* Fundo para hover mais sutil */
    --primary-focus-border: var(--primary-light); /* Borda de foco vibrante */
    
    /* Cores secundárias para ações complementares */
    --secondary: #3b82f6; /* Azul padrão */
    --secondary-dark: #2563eb;
    --secondary-light: #60a5fa;
    
    /* Cores de status - mais suaves mas claras */
    --danger: #ef4444; /* Vermelho */
    --danger-dark: #dc2626;
    --warning: #f59e0b; /* Laranja */
    --warning-dark: #d97706;
    --success: #22c55e; /* Verde */
    --success-dark: #16a34a;
    
    /* Tons neutros - base do minimalismo e contraste elevado */
    --bg-root: #f8fafc; /* Fundo geral da página, muito claro */
    --bg-surface: #ffffff; /* Fundo de cards e modais, puro branco */
    --bg-hover: #f1f5f9; /* Fundo de hover para elementos neutros */
    --text-primary: #1e293b; /* Texto principal escuro para alto contraste */
    --text-secondary: #475569; /* Texto secundário, para descrições */
    --text-placeholder: #94a3b8; /* Placeholder sutil */
    --border-light: #e2e8f0; /* Bordas muito suaves */
    --border-medium: #cbd5e1; /* Bordas um pouco mais visíveis */
    --icon-color: #64748b; /* Cor padrão para ícones não interativos */
    
    /* Sombras - mais sutis e leves */
    --shadow-xs: 0 1px 1px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 12px rgba(0,0,0,0.1);
    --shadow-xl: 0 16px 24px rgba(0,0,0,0.12);
    
    /* Foco e Interação - feedback claro e discreto */
    --focus-outline-color: rgba(5, 150, 105, 0.4); /* Cor de foco com transparência */
    --focus-ring-width: 3px; /* Largura do anel de foco */
    --focus-ring-offset: 2px; /* Espaçamento do anel de foco */

    /* Radii - arredondamento consistente */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    
    /* Transições - rápidas e suaves para responsividade */
    --transition-fast: all 0.1s ease-out;
    --transition-normal: all 0.2s ease-out;
    --transition-slow: all 0.3s ease-out;
    
    /* Altura mínima para elementos interativos (WCAG) */
    --tap-target-size: 48px;
    --tap-target-sm: 40px;
    
    /* Tipografia - tamanhos baseados em rem para escalabilidade */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem; /* 16px */
    --font-size-md: 1.125rem; /* 18px */
    --font-size-lg: 1.25rem; /* 20px */
    --font-size-xl: 1.5rem; /* 24px */
    --font-size-2xl: 2rem; /* 32px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Espaçamentos padronizados (multiplos de 4px) */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;
}

/* Estilos do Botão Flutuante (FAB) */
.fab-add {
    display: flex; /* Começa como flex para ser controlado pelo JS */
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: var(--spacing-6);
    right: var(--spacing-6);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--primary-contrast);
    border: none;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-xl);
    cursor: pointer;
    z-index: 100; /* Acima do conteúdo, abaixo dos modais */
    transition: var(--transition-normal);
    transform: scale(1);
}

.fab-add svg {
    width: 28px;
    height: 28px;
}

.fab-add:hover {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    transform: scale(1.05) translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.fab-add:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.fab-add:active {
    transform: scale(0.98);
    box-shadow: var(--shadow-lg);
}

/* Ajusta a posição do FAB quando a barra inferior (Modo Mercado) está ativa */
.bottom-bar.active ~ .fab-add {
    /* Ajuste este valor (120px) se a barra inferior for mais alta */
    bottom: 140px; 
}

/* Estilos para o formulário dentro do modal */
.form-simple-modal {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

/* Reutiliza os estilos do form-input-group que já definimos */
.form-simple-modal .form-input-group {
    display: flex;
    flex-direction: column; /* Coloca os inputs um sobre o outro no modal */
    gap: var(--spacing-4);
    margin-bottom: 0; /* Remove a margem inferior desnecessária */
}

.form-simple-modal .form-input-group input,
.form-simple-modal .form-input-group select {
    width: 100%;
    min-height: var(--tap-target-size);
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: var(--transition-normal);
}

.form-simple-modal .form-input-group input:hover,
.form-simple-modal .form-input-group select:hover {
    border-color: var(--text-secondary);
    background: var(--bg-hover);
}

.form-simple-modal .form-input-group input:focus-visible,
.form-simple-modal .form-input-group select:focus-visible {
    border-color: var(--primary);
    background: var(--bg-hover);
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.form-simple-modal .form-input-group select {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2364748b"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right var(--spacing-3) center;
    background-size: 1.25rem;
}

/* Tema escuro - variáveis atualizadas para maior contraste e suavidade */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-root: #121212; /* Fundo quase preto */
        --bg-surface: #1e1e1e; /* Superfícies escuras */
        --bg-hover: #2c2c2c; /* Hover em superfícies escuras */
        --text-primary: #f0f0f0; /* Texto principal claro */
        --text-secondary: #a0a0a0; /* Texto secundário mais claro */
        --text-placeholder: #6a6a6a; /* Placeholder sutil */
        --border-light: #333333; /* Bordas mais escuras */
        --border-medium: #444444; /* Bordas mais visíveis */
        --icon-color: #bbbbbb; /* Ícones mais claros */
        
        --primary-light: #34d399; /* Manter para realces */
        --primary-contrast: #1e1e1e; /* Em dark mode, o contraste do primário é o fundo */

        --focus-outline-color: rgba(52, 211, 153, 0.6); /* Foco mais visível */
        
        /* Sombras para dark mode (opcional, podem ser removidas se quiser um dark mode muito flat) */
        --shadow-xs: 0 1px 1px rgba(0,0,0,0.18);
        --shadow-sm: 0 1px 2px rgba(0,0,0,0.22);
        --shadow-md: 0 4px 6px rgba(0,0,0,0.25);
        --shadow-lg: 0 8px 12px rgba(0,0,0,0.3);
        --shadow-xl: 0 16px 24px rgba(0,0,0,0.35);
    }
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-root); /* Usando nova variável */
    color: var(--text-primary); /* Usando nova variável */
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-bottom: var(--spacing-16); /* Espaçamento padrão */
    font-size: var(--font-size-base);
}

/* Utilitários para visibilidade (WCAG) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip links melhorados para acessibilidade */
.skip-link {
    position: absolute;
    top: -9999px; /* Esconde fora da tela */
    left: 0;
    background: var(--primary);
    color: var(--primary-contrast);
    padding: var(--spacing-2) var(--spacing-4);
    text-decoration: none;
    border-radius: var(--radius-sm);
    z-index: 1000;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    transition: top var(--transition-normal) ease-in-out;
    outline: none; /* Gerenciado por focus-visible */
}

.skip-link:focus {
    top: var(--spacing-4); /* Volta para a tela ao focar */
}

/* Estados de foco melhorados para acessibilidade e profissionalismo */
*:focus {
    outline: none; /* Remove o outline padrão do navegador */
}

*:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-outline-color); /* Anel de foco mais suave */
    outline-offset: var(--focus-ring-offset); /* Espaçamento do anel */
    transition: outline-color var(--transition-fast), outline-offset var(--transition-fast);
}

/* Header aprimorado */
.header {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--primary-contrast);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-lg);
    position: sticky;
    top: 0;
    z-index: 100;
    /* backdrop-filter: blur(10px); REMOVIDO: pode impactar performance em alguns dispositivos */
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    position: relative;
    /* Ajuste de cor do logo para sempre ser branco no header primário */
    color: var(--primary-contrast); 
}

.logo .logo-image {
    width: 280px; /* Mantém o tamanho do logo */
    height: 70px;
}

/* Header Actions (Botões de Ação no Header) */
.header-actions { /* Renomeado de header-nav para ser mais descritivo */
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

.header-actions .btn-icon {
    width: var(--tap-target-size); /* Tamanho padrão de botão de ícone */
    height: var(--tap-target-size);
    background: rgba(255, 255, 255, 0.15); /* Fundo um pouco mais opaco */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borda mais suave */
    color: var(--primary-contrast);
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    cursor: pointer;
    /* backdrop-filter: blur(10px); REMOVIDO: pode impactar performance em alguns dispositivos */
}

.header-actions .btn-icon svg {
    width: 22px; /* Ícones um pouco maiores para melhor visibilidade */
    height: 22px;
    fill: currentColor;
    transition: var(--transition-fast);
}

.header-actions .btn-icon:hover {
    background: rgba(255, 255, 255, 0.25); /* Hover mais pronunciado */
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px); /* Efeito sutil de elevação */
    box-shadow: var(--shadow-sm);
}

.header-actions .btn-icon:focus-visible {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    outline: var(--focus-ring-width) solid var(--primary-light); /* Foco no primário */
    outline-offset: var(--focus-ring-offset);
}

.header-actions .btn-icon:active {
    transform: translateY(0) scale(0.98); /* Feedback tátil */
    background: rgba(255, 255, 255, 0.35);
}

/* Container principal de conteúdo */
.container {
    max-width: 1200px;
    margin: var(--spacing-8) auto; /* Adicionado margem superior para separar do header */
    padding: 0 var(--spacing-4); /* Espaçamento lateral, 0 top/bottom */
}

/* ===== CARDS E FORMULÁRIOS MODERNIZADOS ===== */

/* Card base moderno - Uso flexível */
.modern-card {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    transition: var(--transition-normal);
    overflow: hidden; /* Garante que o border-radius seja aplicado internamente */
}

.modern-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.modern-card:focus-within {
    box-shadow: var(--shadow-lg); /* Manter sombra mais forte no foco */
    border-color: var(--primary-light); /* Borda mais visível no foco */
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

/* Card header padronizado */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4) var(--spacing-6); /* Espaçamento mais consistente */
    border-bottom: 1px solid var(--border-light); /* Borda mais leve */
    background: var(--bg-hover); /* Fundo sutilmente diferente para o header do card */
}

.card-title {
    font-size: var(--font-size-md); /* Um pouco menor, mais elegante */
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.card-body {
    padding: var(--spacing-6);
}

.card-footer {
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--bg-hover); /* Fundo sutil */
    border-top: 1px solid var(--border-light);
}

/* Seletor de Listas Modernizado */
.lists-selector {
    background: var(--bg-surface);
    padding: var(--spacing-4); /* Espaçamento mais enxuto */
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-6);
    border: 1px solid var(--border-light);
    transition: var(--transition-normal);
}

.lists-selector:focus-within {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.lists-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.lists-header select {
    flex: 1;
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--border-medium); /* Borda visível mas não agressiva */
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-normal);
    min-height: var(--tap-target-size); /* Tamanho amigável ao toque */
    font-weight: var(--font-weight-medium);
    -webkit-appearance: none; /* Remove estilo padrão do navegador */
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2364748b"><path d="M7 10l5 5 5-5z"/></svg>'); /* Ícone de seta personalizado */
    background-repeat: no-repeat;
    background-position: right var(--spacing-3) center;
    background-size: 1.25rem; /* Ajusta o tamanho da seta */
}

.lists-header select:hover {
    border-color: var(--text-placeholder); /* Feedback de hover */
    background: var(--bg-hover);
}

.lists-header select:focus-visible {
    border-color: var(--primary);
    background: var(--bg-hover); /* Mantém o fundo sutil no foco */
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

/* Mode Toggle Modernizado - Visual de abas mais clean */
.mode-toggle {
    background: var(--bg-surface);
    padding: var(--spacing-2); /* Mais compacto */
    border-radius: var(--radius-lg);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-1);
    margin-bottom: var(--spacing-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

.mode-btn {
    padding: var(--spacing-3) var(--spacing-2);
    border: 1px solid transparent; /* Borda mais fina */
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-normal);
    background: transparent; /* Fundo transparente por padrão */
    color: var(--text-secondary); /* Cor de texto secundária */
    font-size: var(--font-size-sm);
    text-align: center;
    min-height: var(--tap-target-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    white-space: nowrap; /* Evita que o texto quebre em várias linhas */
}

/* Remover efeito ::before para um visual mais clean */
.mode-btn::before {
    display: none; 
}

.mode-btn:hover {
    background: var(--bg-hover); /* Fundo suave no hover */
    color: var(--text-primary); /* Texto principal no hover */
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs); /* Sombra muito sutil no hover */
}

.mode-btn:focus-visible {
    border-color: var(--primary-light); /* Borda primária no foco */
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.mode-btn.active {
    background: var(--primary);
    color: var(--primary-contrast);
    border-color: var(--primary-dark); /* Borda mais escura para profundidade */
    box-shadow: var(--shadow-sm); /* Sombra para o botão ativo */
    transform: translateY(-1px); /* Elevado para destaque */
}

.mode-btn.active:hover {
    background: var(--primary-dark); /* Hover mais escuro no ativo */
    transform: translateY(-2px); /* Elevação maior no hover ativo */
    box-shadow: var(--shadow-md);
}

.mode-icon {
    font-size: var(--font-size-lg);
    line-height: 1;
    color: inherit; /* Cor herdada do texto */
}

.mode-text {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: inherit; /* Cor herdada do texto */
}

/* Dashboard Cards Modernizados */
.dashboard-section {
    margin-bottom: var(--spacing-6);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Ajustado para melhor adaptabilidade */
    gap: var(--spacing-4);
}

.dashboard-card {
    background: var(--bg-surface);
    padding: var(--spacing-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: var(--transition-normal);
    border: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
}

/* Remover efeito ::before para um visual mais clean, a não ser que seja um indicador de status */
.dashboard-card::before {
    display: none; 
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dashboard-card:focus-within {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.card-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary); /* Cor primária para destaque */
    margin-bottom: var(--spacing-1);
    line-height: 1.2;
}

.card-label {
    color: var(--text-secondary); /* Texto secundário para clareza */
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* Formulário de Adicionar Item Modernizado */
.add-item-section {
    margin-bottom: var(--spacing-6);
}

.add-item-form {
    background: var(--bg-surface);
    padding: var(--spacing-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden; /* Para o border-radius */
    margin-bottom: var(--spacing-6); /* Adicionado: Espaçamento entre o formulário e a lista */
}

/* Manter o ::before como um indicador sutil */
.add-item-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px; /* Um pouco mais espesso */
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.add-item-form:focus-within {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
    transform: translateY(-2px); /* Leve elevação ao focar */
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.form-input-group {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.form-input-wrapper {
    position: relative;
}

.form-input-group input,
.form-input-group select {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: var(--transition-normal);
    min-height: var(--tap-target-size); /* Amigável ao toque */
    font-weight: var(--font-weight-medium);
    -webkit-appearance: none; /* Para selects customizados */
    -moz-appearance: none;
    appearance: none;
}

.form-input-group input::placeholder {
    color: var(--text-placeholder);
    font-weight: var(--font-weight-normal);
}

.form-input-group select {
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2364748b"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right var(--spacing-3) center;
    background-size: 1.25rem;
}

.form-input-group input:hover,
.form-input-group select:hover {
    border-color: var(--text-secondary);
    background: var(--bg-hover);
}

.form-input-group input:focus-visible,
.form-input-group select:focus-visible {
    border-color: var(--primary);
    background: var(--bg-hover); /* Fundo mais sutil no foco */
    box-shadow: none; /* Removido para usar o outline */
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
    transform: translateY(-1px); /* Mantém a elevação sutil */
}

/* Botão de Adicionar (do formulário) */
.add-item-form button[type="submit"] { /* Mais específico para evitar conflito com .btn */
    width: 100%;
    padding: var(--spacing-4);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--primary-contrast);
    border: 1px solid var(--primary); /* Borda mais fina */
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-normal); /* Mais rápido */
    min-height: var(--tap-target-size);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    position: relative;
    overflow: hidden;
}

/* Remover efeito ::before para um visual mais clean */
.add-item-form button[type="submit"]::before {
    display: none; 
}

.add-item-form button[type="submit"]:hover {
    background: linear-gradient(135deg, var(--primary-light), var(--primary)); /* Hover mais suave */
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.add-item-form button[type="submit"]:focus-visible {
    box-shadow: var(--shadow-lg);
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.add-item-form button[type="submit"]:active {
    transform: translateY(0) scale(0.98);
}

/* Seção de Orçamento Modernizada */
.budget-section {
    margin-top: var(--spacing-6); /* Adicionado: Espaçamento superior */
    margin-bottom: var(--spacing-6);
}

.budget-card {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    transition: var(--transition-normal);
    overflow: hidden;
}

.budget-card:focus-within {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.budget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--bg-hover); /* Fundo sutil */
    border-bottom: 1px solid var(--border-light);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.budget-input {
    padding: var(--spacing-6);
    display: flex;
    gap: var(--spacing-3);
    align-items: stretch;
}

.budget-input input {
    flex: 1;
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: var(--transition-normal);
    min-height: var(--tap-target-size);
    font-weight: var(--font-weight-medium);
}

.budget-input input:hover {
    border-color: var(--text-secondary);
    background: var(--bg-hover);
}

.budget-input input:focus-visible {
    border-color: var(--primary);
    background: var(--bg-hover); /* Fundo sutil no foco */
    box-shadow: none;
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
    transform: translateY(-1px);
}

.budget-input button {
    padding: var(--spacing-3) var(--spacing-5);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--primary-contrast);
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-normal);
    min-height: var(--tap-target-size);
    white-space: nowrap;
}

.budget-input button:hover {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.budget-input button:focus-visible {
    box-shadow: var(--shadow-md);
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.budget-input button:active {
    transform: scale(0.98);
}

.budget-display {
    padding: var(--spacing-6);
}

.budget-progress {
    margin-bottom: var(--spacing-4);
}

.budget-bar {
    width: 100%;
    height: 10px; /* Um pouco mais fina */
    background: var(--border-light); /* Fundo claro para a barra */
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--spacing-3);
    border: none; /* Remover borda, a cor de fundo já é a borda visual */
    position: relative;
}

.budget-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-light), var(--primary)); /* Gradiente mais vivo */
    border-radius: var(--radius-full);
    transition: width 0.3s ease-out, background-color 0.3s ease-out; /* Melhor usar background-color em vez de background para transição */
    position: relative;
    /* Remover ::after shimmer para minimalismo */
}

.budget-fill.warning {
    background: linear-gradient(90deg, var(--warning), var(--warning-dark));
}

.budget-fill.danger {
    background: linear-gradient(90deg, var(--danger), var(--danger-dark));
}

.budget-info {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary); /* Cor mais neutra */
    font-weight: var(--font-weight-medium);
}

.budget-remaining {
    text-align: center;
    font-weight: var(--font-weight-bold);
    color: var(--primary); /* Cor principal para o texto */
    font-size: var(--font-size-base);
    padding: var(--spacing-3);
    background: var(--bg-hover); /* Fundo suave */
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light); /* Borda sutil */
}

.budget-remaining.warning {
    color: var(--warning-dark);
    background: #fffbe6; /* Amarelo muito suave */
    border-color: #fce883; /* Borda mais clara */
}

.budget-remaining.danger {
    color: var(--danger-dark);
    background: #ffe6e6; /* Vermelho muito suave */
    border-color: #ffb8b8; /* Borda mais clara */
}

/* Busca e Filtros Modernizados */
.search-filters {
    background: var(--bg-surface);
    padding: var(--spacing-5); /* Espaçamento ajustado */
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-4);
    border: 1px solid var(--border-light);
    transition: var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.search-filters:focus-within {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.search-bar {
    position: relative;
    margin-bottom: var(--spacing-4);
}

.search-bar input {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-10) var(--spacing-3) var(--spacing-4); /* Más espacio para o ícone */
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: var(--transition-normal);
    min-height: var(--tap-target-size);
    font-weight: var(--font-weight-medium);
}

.search-bar input::placeholder {
    color: var(--text-placeholder);
    font-weight: var(--font-weight-normal);
}

.search-bar input:hover {
    border-color: var(--text-secondary);
    background: var(--bg-hover);
}

.search-bar input:focus-visible {
    border-color: var(--primary);
    background: var(--bg-hover);
    box-shadow: none;
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.search-bar svg {
    position: absolute;
    right: var(--spacing-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--icon-color); /* Usando variável para cor de ícone */
    pointer-events: none;
    width: 20px; /* Tamanho consistente para ícones */
    height: 20px;
}

.filter-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Ajustado para más flexibilidade */
    gap: var(--spacing-3);
}

.filter-controls select {
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-normal);
    min-height: var(--tap-target-sm);
    font-weight: var(--font-weight-medium);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2364748b"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right var(--spacing-3) center;
    background-size: 1.15rem;
}

.filter-controls select:hover {
    border-color: var(--text-secondary);
    background: var(--bg-hover);
}

.filter-controls select:focus-visible {
    border-color: var(--primary);
    background: var(--bg-hover);
    box-shadow: none;
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

/* Botões Modernizados (Classes Genéricas) */
.btn {
    padding: var(--spacing-3) var(--spacing-5);
    border: 1px solid transparent; /* Bordas mais finas por padrão */
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-normal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-base);
    min-height: var(--tap-target-size);
    text-decoration: none;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    white-space: nowrap; /* Evita quebra de linha em botões */
}

/* Remover efeito ::before para um visual más clean */
.btn::before {
    display: none;
}

.btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-light), var(--primary)); /* Invertido para gradiente más suave */
    color: var(--primary-contrast);
    border-color: var(--primary);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)); /* Escurece um pouco no hover */
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

.btn-secondary {
    background: var(--bg-surface);
    color: var(--primary);
    border-color: var(--primary);
}

.btn-secondary:hover {
    background: var(--bg-hover);
    color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger), var(--danger-dark));
    color: var(--primary-contrast);
    border-color: var(--danger);
}

.btn-danger:hover {
    background: linear-gradient(135deg, var(--danger-dark), #991b1b);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-small {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    min-height: var(--tap-target-sm);
}

.btn-icon {
    width: var(--tap-target-sm); /* Padrão de 40px para ícones avulsos */
    height: var(--tap-target-sm);
    border: 1px solid var(--border-medium); /* Borda mais fina */
    background: var(--bg-surface);
    color: var(--icon-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-normal);
}

.btn-icon svg {
    width: 18px; /* Tamanho padrão para ícones menores */
    height: 18px;
    fill: currentColor;
    transition: var(--transition-fast);
}

.btn-icon:hover {
    background: var(--bg-hover);
    border-color: var(--text-secondary);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}

.btn-icon:focus-visible {
    border-color: var(--primary-light);
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.btn-icon:active {
    transform: scale(0.95);
    background: var(--primary-light); /* Cor primária para feedback de clique */
    border-color: var(--primary-dark);
    color: var(--primary-contrast);
}

/* Lista de Itens Modernizada */
.items-section {
    background: var(--bg-surface);
    padding: var(--spacing-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-8);
    border: 1px solid var(--border-light);
}

.items-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--border-medium); /* Borda mais discreta */
}

.items-header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
}

.header-actions {
    display: flex;
    gap: var(--spacing-2);
}

/* Item Card Modernizado - FOCO NO MODO MERCADO */
.item-card {
    background: var(--bg-surface);
    padding: var(--spacing-4); /* Padding um pouco menor para más compactação */
    border-radius: var(--radius-md); /* Arredondamento um pouco menor para "stack" */
    margin-bottom: var(--spacing-3); /* Espaçamento entre cards */
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    transition: var(--transition-normal);
    border: 1px solid var(--border-light); /* Borda más fina e suave */
    border-left: 4px solid transparent; /* Mantém a borda colorida da categoria */
    position: relative;
    overflow: hidden;
    cursor: pointer; /* Adicionado: Indica que o card pode ser clicado/interagido (checkbox) */
}

/* Remover ::before shimmer para um visual más clean, a não ser que tenha outra função */
.item-card::before {
    display: none;
}

.item-card:hover {
    border-color: var(--border-medium);
    box-shadow: var(--shadow-xs); /* Sombra más sutil no hover */
    transform: translateY(-1px);
}

.item-card:focus-within {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-sm); /* Sombra leve no foco */
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
    transform: translateY(-1px);
}

.item-card.comprado {
    background: #e6ffef; /* Cor de fundo muito suave para itens comprados */
    border-color: var(--success);
    border-left-color: var(--success);
    padding-top: var(--spacing-3); /* Reduzir padding para itens comprados */
    padding-bottom: var(--spacing-3);
}

.item-card.comprado:hover {
    background: #d4fcdb; /* Fundo más escuro no hover para comprado */
}

/* Cores das categorias - Usando as variáveis más claras ou tons pastéis */
.item-card.category-frutas { border-left-color: #fbbf24; } /* Laranja más vivo */
.item-card.category-verduras { border-left-color: #10b981; } /* Verde principal */
.item-card.category-carnes { border-left-color: #ef4444; } /* Vermelho */
.item-card.category-laticinios { border-left-color: #3b82f6; } /* Azul */
.item-card.category-padaria { border-left-color: #f97316; } /* Laranja escuro */
.item-card.category-bebidas { border-left-color: #6366f1; } /* Índigo */
.item-card.category-limpeza { border-left-color: #06b6d4; } /* Ciano */
.item-card.category-higiene { border-left-color: #22c55e; } /* Verde vibrante */
.item-card.category-congelados { border-left-color: #0ea5e9; } /* Azul claro */
.item-card.category-petshop { border-left-color: #ea580c; } /* Laranja escuro */
.item-card.category-farmacia { border-left-color: #7c3aed; } /* Violeta */
.item-card.category-outros { border-left-color: var(--text-secondary); } /* Cinza más neutro */

.item-checkbox {
    width: 20px; /* Ícone do checkbox um pouco menor */
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: var(--spacing-1); /* Ajustado para a nova escala de espaçamento */
    accent-color: var(--primary); /* Cor primária para o checkbox marcado */
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-medium); /* Borda más fina */
    transition: var(--transition-fast);
}

.item-checkbox:checked {
    border-color: var(--primary-dark); /* Borda más escura quando checado */
}

.item-checkbox:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.item-content {
    flex: 1;
    min-width: 0;
    display: flex; /* Adicionado: Para que o nome e detalhes fiquem em flex */
    flex-direction: column; /* Adicionado: Nome acima dos detalhes */
    flex-wrap: wrap; /* Adicionado: Permite quebra se a linha for muito longa */
}

.item-name {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-1); /* Reduzido para aproximar dos detalhes */
    word-wrap: break-word;
    line-height: 1.2; /* Linha um pouco más compacta */
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* Estilo para o badge da categoria */
.category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem var(--spacing-2); /* Padding ajustado, más compacto */
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    background-color: var(--bg-hover);
    border: 1px solid var(--border-light);
    flex-shrink: 0;
    line-height: 1; /* Garante altura mínima do texto */
}

/* Estilos de cor para o badge - CORES MÁS CLARAS E PASTEL PARA O BACKGROUND */
.category-badge.category-frutas { background-color: #ffecc6; border-color: #fbd38d; }
.category-badge.category-verduras { background-color: #d7f7e9; border-color: #8ce1c2; }
.category-badge.category-carnes { background-color: #ffe6e6; border-color: #ffb8b8; }
.category-badge.category-laticinios { background-color: #e3f2fd; border-color: #90caf9; }
.category-badge.category-padaria { background-color: #fff0d9; border-color: #fddb9e; }
.category-badge.category-bebidas { background-color: #eee9fc; border-color: #d0c8f5; }
.category-badge.category-limpeza { background-color: #e9f8fb; border-color: #b3ecf6; }
.category-badge.category-higiene { background-color: #f0fcdb; border-color: #d1f39c; }
.category-badge.category-congelados { background-color: #e0f6fc; border-color: #b0e8f8; }
.category-badge.category-petshop { background-color: #ffe9d9; border-color: #fcd9b3; }
.category-badge.category-farmacia { background-color: #f2e9fc; border-color: #d8c2f5; }
.category-badge.category-outros { background-color: var(--bg-hover); border-color: var(--border-light); }


.item-details {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    display: flex; /* Alterado para flex para alinhar horizontalmente */
    flex-direction: row; /* Coloca os detalhes em linha */
    align-items: center; /* Alinha verticalmente */
    gap: var(--spacing-3); /* Espaçamento entre os elementos de detalhe */
    flex-wrap: nowrap; /* Tenta manter tudo em uma linha */
    width: 100%;
    min-height: var(--tap-target-sm); /* Garante altura mínima para o grupo de inputs */
}

/* CAMPOS DE PREÇO E QUANTIDADE - MÁXIMO CONTRASTE E VISIBILIDADE */
.item-price-input {
    display: flex; /* Alterado para flex */
    flex-grow: 1; /* Permite que ocupe o espaço disponível */
    gap: var(--spacing-2); /* Espaçamento menor entre os inputs */
    margin-top: 0; /* Removido margem superior, agora faz parte do flex row */
    padding: var(--spacing-2); /* Padding ajustado para compactação */
    background: var(--bg-hover);
    border-radius: var(--radius-sm); /* Más compacto */
    border: 1px solid var(--border-medium); /* Borda más fina */
    position: relative;
    overflow: hidden;
    white-space: nowrap; /* Evita quebra de linha dentro dos inputs */
}

/* Remover efeito ::before shimmer */
.item-price-input::before {
    display: none; 
}

.input-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-1); /* Gap menor entre label e input */
    background: var(--bg-surface);
    padding: var(--spacing-1) var(--spacing-2); /* Padding interno ajustado para compactar */
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light); /* Borda más sutil */
    position: relative;
    transition: var(--transition-normal);
    min-height: var(--tap-target-sm); /* Mantém altura mínima para toque */
    box-shadow: var(--shadow-xs); /* Sombra muito sutil */
    flex-grow: 1; /* Permite que ocupe o espaço disponível */
    flex-basis: 0; /* Base para flex-grow */
}

.input-group:hover {
    border-color: var(--primary-light);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.input-group:focus-within {
    border-color: var(--primary);
    background: var(--bg-surface);
    box-shadow: var(--shadow-md);
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
    transform: translateY(-2px);
}

.input-group label {
    font-size: var(--font-size-xs); /* Label menor */
    color: var(--text-secondary);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
    min-width: 25px; /* Reduzido */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.price-input {
    flex: 1;
    padding: 0; /* Removido padding, controlado pelo input-group */
    border: none;
    font-size: var(--font-size-base); /* Mantém base para legibilidade */
    font-weight: var(--font-weight-bold);
    background: transparent;
    text-align: right;
    color: var(--text-primary);
    min-width: 0;
}

.price-input:focus {
    outline: none;
    color: var(--primary-dark);
}

.price-input::placeholder {
    color: var(--text-placeholder);
    font-weight: var(--font-weight-medium);
}

/* Total do item (Subtotal) - destaque sutil mas claro */
.price-total {
    color: var(--primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-base); /* Reduzido para caber em uma linha */
    text-align: right; /* Alinhado à direita para ficar ao lado dos inputs */
    padding: var(--spacing-2) var(--spacing-3); /* Padding ajustado */
    background: var(--bg-root);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    margin-top: 0; /* Removido margem superior */
    flex-shrink: 0; /* Impede que ele encolha */
    line-height: 1; /* Linha única */
}

/* Label 'Subtotal:' dentro do price-total */
.price-total span {
    display: none; /* Oculta o label 'Subtotal:' para manter em uma linha */
}

/* Adiciona um small text para o subtotal se necessário */
.price-total::before {
    content: 'Subtotal: '; /* Adiciona o label como um pseudo-elemento */
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    margin-right: var(--spacing-1);
    display: inline; /* Mantém na mesma linha */
}


.item-actions {
    display: flex;
    gap: var(--spacing-2);
    flex-shrink: 0;
}

/* Seções de categoria modernizadas */
.category-section {
    margin-bottom: var(--spacing-8);
}

.category-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4) 0;
    margin-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--border-medium); /* Borda mais discreta */
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    position: sticky;
    top: var(--spacing-16); /* Ajustar de acordo com a altura do header */
    background: var(--bg-root); /* Fundo da página para sticky */
    z-index: 10;
    backdrop-filter: blur(8px); /* Blur mais sutil */
}

.category-icon {
    font-size: var(--font-size-xl);
}

/* Bottom Bar Modernizado - Sempre visível no Modo Mercado */
.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-lg); /* Sombra mais pronunciada para flutuar */
    display: flex; /* Começa como flex */
    z-index: 99;
    border-top: 3px solid var(--primary);
    backdrop-filter: blur(8px); /* Blur mais sutil */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    transform: translateY(100%); /* Esconde por padrão */
    transition: transform var(--transition-normal) ease-out; /* Adiciona transição de entrada/saída */
    /* No HTML, a classe 'active' controlará 'display: flex' */
}

.bottom-bar.active {
    transform: translateY(0); /* Mostra a barra */
}

.total-display {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--primary-contrast);
    padding: var(--spacing-5);
    border-radius: var(--radius-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4); /* Menos margem, o botão Finalizar fica mais próximo */
    box-shadow: var(--shadow-md); /* Sombra mais discreta */
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Remover shimmer no total-display para minimalismo */
.total-display::before {
    display: none;
}

.total-label {
    font-size: var(--font-size-base);
    opacity: 0.9;
    font-weight: var(--font-weight-semibold);
}

.total-subtitle { /* Antigo resumoCompra */
    font-size: var(--font-size-sm);
    opacity: 0.8;
    margin-top: var(--spacing-1);
    color: rgba(255, 255, 255, 0.8); /* Garante bom contraste no gradiente */
}

.total-value {
    font-size: var(--font-size-2xl); /* Um pouco maior para destaque */
    font-weight: var(--font-weight-extrabold);
    text-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Sombra de texto mais suave */
}

/* Empty State Modernizado */
.empty-state {
    text-align: center;
    padding: var(--spacing-12) var(--spacing-4);
    color: var(--text-secondary); /* Cor mais suave */
}

.empty-state .emoji {
    font-size: var(--font-size-2xl); /* Tamanho maior para o emoji */
    margin-bottom: var(--spacing-4);
    opacity: 0.2; /* Mais transparente */
}

.empty-state p {
    margin: var(--spacing-2) 0;
    font-size: var(--font-size-md); /* Tamanho ajustado */
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary); /* Texto principal mais visível */
}

.empty-subtitle {
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-normal) !important;
    opacity: 0.7;
    color: var(--text-secondary) !important; /* Garante a cor secundária */
}

/* Notificação Modernizada */
.notification {
    position: fixed;
    top: var(--spacing-4);
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary); /* Fundo padrão é primary */
    color: var(--primary-contrast);
    padding: var(--spacing-3) var(--spacing-5); /* Padding ajustado */
    border-radius: var(--radius-md); /* Arredondamento menor */
    box-shadow: var(--shadow-xl); /* Sombra forte para destacar */
    display: none; /* Controlado pelo JS */
    align-items: center;
    gap: var(--spacing-2);
    animation: slideDown var(--transition-normal) ease forwards; /* Usar 'forwards' para manter estado final */
    z-index: 1000;
    font-weight: var(--font-weight-semibold);
    border: 1px solid var(--primary-dark); /* Borda mais fina */
    backdrop-filter: blur(8px);
    max-width: 90%; /* Ajuste para não quebrar em telas muito pequenas */
    text-align: center; /* Centraliza o texto em caso de quebra */
}

@keyframes slideDown {
    from {
        transform: translate(-50%, -150%); /* Começa mais alto */
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

.notification.show {
    display: flex; /* Garante que 'display' esteja correto para a animação */
}

.notification.danger {
    background: var(--danger);
    border-color: var(--danger-dark);
    color: var(--primary-contrast); /* Garante texto branco */
}

.notification.warning {
    background: var(--warning);
    border-color: var(--warning-dark);
    color: var(--text-primary); /* Texto escuro para contraste com o amarelo/laranja */
}

/* Modais Modernizados */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--spacing-4);
    backdrop-filter: blur(10px); /* Blur mais pronunciado para modais */
}

.modal {
    background: var(--bg-surface);
    border-radius: var(--radius-xl); /* Más arredondado */
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-light);
    animation: fadeInScale var(--transition-normal) ease-out forwards; /* Animação de entrada */
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-5); /* Padding ajustado */
    border-bottom: 1px solid var(--border-light); /* Borda mais leve */
    background: var(--bg-hover); /* Fundo sutil */
}

.modal-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg); /* Tamanho ajustado */
}

.modal-body {
    padding: var(--spacing-6);
}

.modal-close {
    background: transparent;
    border: 1px solid transparent; /* Borda mais fina */
    color: var(--icon-color);
    cursor: pointer;
    padding: var(--spacing-2);
    border-radius: var(--radius-md);
    transition: var(--transition-normal);
    width: var(--tap-target-sm); /* Tamanho amigável ao toque */
    height: var(--tap-target-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: scale(1.1);
}

.modal-close:focus-visible {
    border-color: var(--primary-light);
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

/* QR Code Section - Aprimorado */
.qr-section {
    margin-top: var(--spacing-8);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
}

.qr-section h4 {
    color: var(--text-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-2);
}

#qrCode {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* QR Code Container Styling */
.qr-code-container {
    padding: var(--spacing-2); /* Padding más compacto */
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

.qr-code-container img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Loading state for QR Code - Aprimorado */
.qr-loading {
    width: 200px;
    height: 200px;
    background: var(--bg-hover); /* Fundo claro para o loading */
    display: flex;
    flex-direction: column; /* Para alinhar texto e spinner */
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    text-align: center;
    padding: var(--spacing-4);
    border: 1px dashed var(--border-medium); /* Borda dashed más discreta */
    color: var(--text-secondary); /* Texto em cor secundária */
    font-size: var(--font-size-sm);
}

.qr-loading .loader-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid var(--border-medium); /* Cor da borda más neutra */
    border-top: 3px solid var(--primary); /* Cor primária para o spinner */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto var(--spacing-2) auto; /* Margem para separar do texto */
}

/* Responsividade Aprimorada */
@media (max-width: 767px) {
    /* Ajustes para mobile, usando variáveis para consistência */
    .container {
        padding: var(--spacing-3);
    }

    .form-input-group {
        grid-template-columns: 1fr;
        gap: var(--spacing-3);
    }

    .filter-controls {
        grid-template-columns: 1fr;
        gap: var(--spacing-3);
    }

    .budget-input {
        flex-direction: column;
        gap: var(--spacing-3);
    }

    .mode-toggle {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-2);
    }

    .mode-btn {
        font-size: var(--font-size-xs);
        padding: var(--spacing-3) var(--spacing-2);
    }

    /* Ajuste para o dashboard-grid na versão mobile (2 colunas) */
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr); /* FORÇA DUAS COLUNAS NO MOBILE */
        gap: var(--spacing-3);
    }

    .item-card { /* Ajuste para o item-card no mobile */
        flex-direction: column; /* Volta para coluna no mobile para não espremer */
        align-items: flex-start;
        padding: var(--spacing-4);
    }

    .item-content {
        width: 100%; /* Ocupa toda a largura */
        margin-top: var(--spacing-2); /* Espaçamento com o checkbox */
    }

    .item-name {
        margin-bottom: var(--spacing-1);
    }

    .item-details {
        flex-direction: column; /* Volta para coluna no mobile */
        align-items: flex-start;
        gap: var(--spacing-2);
        width: 100%;
    }

    .item-price-input {
        flex-direction: column; /* Inputs um abaixo do outro no mobile */
        gap: var(--spacing-3);
        padding: var(--spacing-4);
        width: 100%;
    }

    .input-group {
        padding: var(--spacing-3);
    }

    .bottom-bar {
        padding: var(--spacing-3);
    }

    .total-display {
        padding: var(--spacing-4);
        margin-bottom: var(--spacing-3);
    }

    .total-value {
        font-size: var(--font-size-xl);
    }
    
    .header .logo .logo-image {
        width: 120px; /* Logo um pouco menor no mobile */
        height: 30px;
    }
}

@media (min-width: 768px) {
    .container {
        padding: var(--spacing-8);
    }

    /* Retorna para 4 colunas em telas maiores */
    .dashboard-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .item-card.comprado .item-details { /* Regra específica para desktop/tablet */
        flex-direction: row; /* Volta para linha */
        align-items: center;
        gap: var(--spacing-3); /* Espaçamento entre campos */
        flex-wrap: nowrap; /* Tenta manter em uma linha */
    }

    .item-price-input {
        grid-template-columns: 120px 140px; /* Larguras específicas para desktop/tablet */
        gap: var(--spacing-4);
    }
    .item-card.comprado .item-price-input { /* No modo comprado, inputs de qtd/preço ficam lado a lado */
        display: flex; /* Força flex */
        flex-direction: row; /* Alinhamento em linha */
        flex-grow: 1; /* Permite crescimento */
        gap: var(--spacing-2); /* Espaçamento menor */
        padding: var(--spacing-2); /* Padding reduzido */
        border-radius: var(--radius-sm); /* Menor arredondamento */
    }
    .item-card.comprado .input-group { /* Dentro dos inputs */
        min-height: var(--tap-target-sm); /* Reduzido para caber na linha */
        padding: var(--spacing-1) var(--spacing-2); /* Padding interno reduzido */
    }
    .item-card.comprado .input-group label {
        font-size: var(--font-size-xs); /* Label ainda menor */
    }
    .item-card.comprado .price-input {
        font-size: var(--font-size-sm); /* Valor do input menor */
    }
    .item-card.comprado .price-total { /* Subtotal no modo comprado */
        font-size: var(--font-size-sm); /* Reduzido para caber */
        padding: var(--spacing-1) var(--spacing-2);
        margin-left: auto; /* Alinha à direita */
        flex-shrink: 0;
        white-space: nowrap; /* Impede quebra */
    }
    .item-card.comprado .price-total::before {
        font-size: var(--font-size-xs); /* Label "Subtotal" menor */
    }


    .bottom-bar {
        max-width: 700px; /* Centraliza a barra inferior */
        left: 50%;
        transform: translateX(-50%) translateY(100%); /* Mantém o transform base */
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        padding: var(--spacing-5);
    }
    
    .bottom-bar.active { /* Sobrescreve para o modo ativo */
        transform: translateX(-50%) translateY(0);
    }

    .form-input-group {
        grid-template-columns: 2fr 1fr;
    }

    .filter-controls {
        grid-template-columns: repeat(3, 1fr);
    }

    .mode-toggle {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .item-price-input {
        grid-template-columns: 140px 160px;
        gap: var(--spacing-5);
    }
    .item-card.comprado .item-price-input { /* Ajustes para telas maiores */
        gap: var(--spacing-3);
        padding: var(--spacing-3);
    }
    .item-card.comprado .input-group {
        min-height: var(--tap-target-size); /* Volta para o tamanho normal dos inputs */
        padding: var(--spacing-2) var(--spacing-3);
    }
    .item-card.comprado .input-group label {
        font-size: var(--font-size-sm); /* Volta para o tamanho normal do label */
    }
    .item-card.comprado .price-input {
        font-size: var(--font-size-base); /* Volta para o tamanho normal do input */
    }
    .item-card.comprado .price-total {
        font-size: var(--font-size-base); /* Volta para o tamanho normal do subtotal */
        padding: var(--spacing-2) var(--spacing-4);
    }
    .item-card.comprado .price-total::before {
        font-size: var(--font-size-sm); /* Label "Subtotal" volta ao normal */
    }

    .modal {
        max-width: 600px;
    }
}

/* Estados de loading aprimorados */
.app-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-root); /* Fundo do loader é o bg principal */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loader-content {
    text-align: center;
    color: var(--primary); /* Cor principal para o loader */
}

.loader-icon {
    font-size: var(--font-size-2xl); /* Ícone grande */
    margin-bottom: var(--spacing-4);
    animation: float 2s ease-in-out infinite;
    color: var(--primary-light); /* Cor do ícone do loader */
}

.loader-text {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary); /* Cor secundária para o texto */
    margin-bottom: var(--spacing-4);
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-medium); /* Borda neutra */
    border-top: 4px solid var(--primary); /* Topo com a cor primária */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); } /* Elevação menor para ser mais suave */
}

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

/* Tema escuro aprimorado para a segunda parte */
@media (prefers-color-scheme: dark) {
    /* Geral para dark mode */
    .modern-card,
    .lists-selector,
    .mode-toggle,
    .dashboard-card,
    .add-item-form,
    .budget-card,
    .search-filters,
    .items-section,
    .bottom-bar,
    .modal,
    .qr-code-container,
    .history-item, /* Adicionado para dark mode do histórico */
    .stat-card { /* Adicionado para dark mode do stat-card */
        background-color: var(--bg-surface);
        border-color: var(--border-medium); /* Borda visível mas não clara demais */
    }

    .card-header,
    .budget-header,
    .history-header { /* Adicionado para dark mode do header do histórico */
        background: var(--bg-hover); /* Fundo do header de card no dark mode */
        border-color: var(--border-medium);
    }
    
    .lists-header select,
    .form-input-group input,
    .form-input-group select,
    .budget-input input,
    .search-bar input,
    .filter-controls select {
        background: var(--bg-surface);
        border-color: var(--border-medium);
        color: var(--text-primary);
    }
    
    .lists-header select:hover,
    .form-input-group input:hover,
    .form-input-group select:hover,
    .budget-input input:hover,
    .search-bar input:hover,
    .filter-controls select:hover {
        background: var(--bg-hover);
        border-color: var(--text-secondary);
    }
    
    .lists-header select:focus-visible,
    .form-input-group input:focus-visible,
    .form-input-group select:focus-visible,
    .budget-input input:focus-visible,
    .search-bar input:focus-visible,
    .filter-controls select:focus-visible {
        background: var(--bg-hover);
        border-color: var(--primary-light);
    }

    /* Cores de texto específicas */
    .card-title,
    .card-value,
    .items-header h2,
    .item-name,
    .modal-header h3,
    .qr-section h4,
    .empty-state p,
    .history-header h2, /* Adicionado */
    .history-total, /* Adicionado */
    .stat-value /* Adicionado */ {
        color: var(--text-primary);
    }

    .card-label,
    .item-details,
    .text-secondary, /* Se for usar essa classe em algum lugar */
    .category-badge,
    .budget-info,
    .empty-state .emoji,
    .empty-subtitle,
    .loader-text,
    .qr-loading,
    .history-date, /* Adicionado */
    .history-details, /* Adicionado */
    .stat-label /* Adicionado */ {
        color: var(--text-secondary);
    }
    
    .item-price-input {
        background: var(--bg-hover); /* Fundo para a área de inputs de preço */
        border-color: var(--border-medium);
    }

    .input-group {
        background: var(--bg-surface); /* Fundo dos inputs individuais */
        border-color: var(--border-medium);
    }

    .input-group:focus-within {
        background: var(--bg-surface);
        color: var(--primary-light); /* Cor do texto no foco, para contraste */
    }

    .input-group label {
        color: var(--text-secondary);
    }

    .input-group .price-input {
        color: var(--text-primary);
    }
    
    .price-total {
        background: var(--bg-hover); /* Fundo sutil para o subtotal */
        border-color: var(--border-medium);
        color: var(--primary-light); /* Cor do valor do subtotal */
    }

    .price-total span { /* Label 'Subtotal' */
        color: var(--text-secondary);
    }
    
    .item-card.comprado {
        background: #0b221a; /* Verde escuro muito suave para comprado */
        border-color: var(--success-dark);
        border-left-color: var(--success-dark);
    }
    
    .item-checkbox {
        border-color: var(--border-medium);
    }
    .item-checkbox:checked {
        border-color: var(--primary-light);
    }

    .notification.warning {
        color: var(--text-primary);
    }
    
    .loader-icon {
        color: var(--primary-light);
    }
    .loader-spinner {
        border-color: var(--border-medium);
        border-top-color: var(--primary-light);
    }
}

/* Print styles */
@media print {
    .header,
    .bottom-bar,
    .btn,
    .btn-icon,
    .notification,
    .modal-overlay,
    .lists-selector, /* Remover seletor de listas na impressão */
    .mode-toggle,
    .search-filters,
    .add-item-form,
    .budget-section,
    .history-actions /* Oculta os botões de exportar/limpar histórico */ {
        display: none !important;
    }

    body {
        padding-bottom: 0 !important;
        background-color: #fff !important;
        color: #000 !important;
    }

    .container {
        max-width: none;
        padding: 0;
        margin: 0;
    }

    .items-section,
    .history-section /* Esconde o próprio container items-section para histórico */ {
        box-shadow: none;
        border: none;
        padding: 0;
        margin-bottom: 0;
    }
    
    .items-header,
    .history-header { /* Adicionado */
        border-bottom: 2px solid #ccc;
        padding-bottom: var(--spacing-2);
        margin-bottom: var(--spacing-3);
    }
    
    .items-header h2,
    .history-header h2 /* Adicionado */ {
        font-size: 1.5rem;
        color: #000;
    }

    .item-card {
        break-inside: avoid;
        margin-bottom: var(--spacing-2);
        box-shadow: none;
        border: 1px solid #ccc;
        padding: var(--spacing-3);
        align-items: center; /* Alinha o checkbox */
    }
    
    .item-card.comprado {
        background-color: #f0f0f0 !important;
        border-color: #ccc !important;
    }

    .item-checkbox {
        width: 18px;
        height: 18px;
        border: 1px solid #666;
        accent-color: #000;
        margin-right: var(--spacing-2);
    }

    .item-content {
        display: block; /* Para que o item-name e item-details fiquem um abaixo do outro */
    }

    .item-name {
        font-size: 1rem;
        font-weight: 600;
        color: #000;
        margin-bottom: 0;
        display: inline-flex; /* Para manter o badge na mesma linha se houver espaço */
        align-items: baseline;
    }
    
    .category-badge {
        font-size: 0.7rem;
        padding: 0.1rem 0.4rem;
        background-color: #eee;
        border-color: #ddd;
        color: #555;
    }

    .item-details {
        font-size: 0.8rem;
        color: #333;
        margin-top: var(--spacing-1);
        display: block; /* Garante que não se comporte como flex ao imprimir */
    }

    .item-price-input,
    .input-group,
    .price-total {
        display: none !important; /* Oculta os campos de input de preço */
    }
    
    /* Exibe um resumo de preço para impressão se o item tiver precoTotal */
    .item-card:not(.comprado) .item-details > div { /* Esconde o que não é price-total */
        display: none !important;
    }
    .item-card.comprado .item-details > div {
        display: flex !important; /* Exibe os detalhes de preço para itens comprados */
        justify-content: space-between;
        width: 100%;
        margin-top: 0.5rem;
        font-size: 0.85rem;
        color: #333;
    }
    
    .item-card.comprado .item-details span:first-child { /* Exemplo: Qtd x Preco */
        font-size: 0.85rem;
        color: #555;
    }
    .item-card.comprado .price-total { /* Ajusta o total para impressão */
        display: inline-block !important; /* Exibe o total */
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        text-align: right !important;
        color: #000 !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
        margin-left: auto;
    }
    
    .item-card.comprado .price-total span { /* Label 'Subtotal:' dentro do total */
        display: none !important; /* Esconde o label 'Subtotal:' ao imprimir */
    }
    
    .item-actions {
        display: none; /* Oculta botões de remover na impressão */
    }
    
    .category-section {
        margin-bottom: var(--spacing-4);
    }
    
    .category-header {
        position: static; /* Remove sticky na impressão */
        background: none;
        backdrop-filter: none;
        border-bottom: 1px solid #ccc;
        padding-top: var(--spacing-4);
    }

    /* Estilos específicos para a impressão do Histórico de Compras */
    .history-section {
        margin-top: var(--spacing-8); /* Espaçamento para o cabeçalho */
    }

    .history-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--spacing-4);
        padding-bottom: var(--spacing-2);
        border-bottom: 2px solid #ccc;
    }

    .history-header h2 {
        font-size: 1.5rem;
        color: #000;
        margin: 0;
    }

    .history-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 colunas para estatísticas no print */
        gap: var(--spacing-4);
        margin-bottom: var(--spacing-8);
        page-break-after: avoid; /* Evita quebra de página dentro do grid */
    }

    .stat-card {
        background: #f8f8f8; /* Fundo suave para os cards de estatísticas */
        padding: var(--spacing-4);
        border-radius: var(--radius-md);
        border: 1px solid #e0e0e0;
        text-align: center;
    }

    .stat-value {
        font-size: 1.2rem;
        font-weight: 700;
        color: #000;
        margin-bottom: var(--spacing-1);
    }

    .stat-label {
        font-size: 0.8rem;
        color: #555;
    }

    .history-list {
        margin-top: var(--spacing-8);
    }

    .history-item {
        background: #f8f8f8; /* Fundo suave para cada item de histórico */
        padding: var(--spacing-4);
        border-radius: var(--radius-md);
        box-shadow: none; /* Remover sombra na impressão */
        border: 1px solid #e0e0e0;
        margin-bottom: var(--spacing-4);
        page-break-inside: avoid; /* Evita quebra de página dentro de um item */
    }

    .history-item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--spacing-2);
        padding-bottom: var(--spacing-1);
        border-bottom: 1px dashed #ccc; /* Borda dashed para separar */
        font-size: 0.9rem;
    }

    .history-date {
        font-weight: 600;
        color: #333;
    }

    .history-total {
        font-weight: 700;
        color: #000;
    }

    .history-details {
        font-size: 0.85rem;
        color: #555;
        line-height: 1.4;
    }

    .history-actions {
        display: none !important; /* Oculta botões de ação na impressão */
    }

    .empty-state {
        display: none !important; /* Oculta o estado vazio na impressão */
    }
}

/* Nova seção para estilos do Histórico de Compras */
.history-section {
    margin-top: var(--spacing-8); /* Ajuste de espaçamento */
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--border-medium);
    color: var(--text-primary);
}

.history-header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.history-actions {
    display: flex;
    gap: var(--spacing-2);
}

.history-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 4 colunas em telas maiores, adaptável */
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.stat-card {
    background: var(--bg-surface);
    padding: var(--spacing-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: var(--transition-normal);
    border: 1px solid var(--border-light);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    margin-bottom: var(--spacing-1);
    line-height: 1.2;
}

.stat-label {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.history-list {
    margin-top: var(--spacing-8); /* Espaçamento maior antes da lista de itens de histórico */
}

.history-item {
    background: var(--bg-surface);
    padding: var(--spacing-5); /* Padding um pouco maior para cada item */
    border-radius: var(--radius-lg); /* Mais arredondado */
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    margin-bottom: var(--spacing-4);
    transition: var(--transition-normal);
}

.history-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-3); /* Espaçamento menor com os detalhes */
    padding-bottom: var(--spacing-2);
    border-bottom: 1px dashed var(--border-medium); /* Linha tracejada sutil */
    font-size: var(--font-size-sm);
}

.history-date {
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}

.history-total {
    font-weight: var(--font-weight-bold);
    color: var(--primary); /* Destaca o total da compra */
    font-size: var(--font-size-md); /* Tamanho maior para o total */
}

.history-details {
    font-size: var(--font-size-sm);
    color: var(--text-primary); /* Texto principal para o resumo */
    margin-bottom: var(--spacing-4); /* Espaçamento antes dos botões */
    line-height: 1.4;
}

.history-item .history-actions { /* Estilo para os botões dentro do item de histórico */
    display: flex;
    gap: var(--spacing-3);
    justify-content: flex-end; /* Alinha botões à direita */
    margin-top: var(--spacing-4); /* Garante espaço */
}

.history-item .btn-reuse,
.history-item .btn-delete-history {
    padding: var(--spacing-2) var(--spacing-4); /* Padding ajustado */
    font-size: var(--font-size-sm);
    min-height: var(--tap-target-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    transition: var(--transition-normal);
}

.history-item .btn-reuse {
    background: var(--bg-surface);
    color: var(--secondary);
    border: 1px solid var(--secondary);
}

.history-item .btn-reuse:hover {
    background: var(--secondary-light);
    color: var(--primary-contrast);
    border-color: var(--secondary-dark);
    transform: translateY(-1px);
}

.history-item .btn-delete-history {
    background: var(--bg-surface);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.history-item .btn-delete-history:hover {
    background: var(--danger-dark);
    color: var(--primary-contrast);
    border-color: var(--danger-dark);
    transform: translateY(-1px);
}

/* Estilos para a seção de Estatísticas (Gráficos) */
.statistics-section {
    margin-top: var(--spacing-8);
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--border-medium);
    color: var(--text-primary);
}

.stats-header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.period-selector select {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-normal);
    min-height: var(--tap-target-sm);
    font-weight: var(--font-weight-medium);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2364748b"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right var(--spacing-2) center;
    background-size: 1.15rem;
}

.period-selector select:hover {
    border-color: var(--text-secondary);
    background: var(--bg-hover);
}

.period-selector select:focus-visible {
    border-color: var(--primary);
    background: var(--bg-hover);
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.advanced-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.metric-card {
    background: var(--bg-surface);
    padding: var(--spacing-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    border: 1px solid var(--border-light);
    display: flex; /* Para alinhar ícone e conteúdo */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
}

.metric-icon {
    font-size: var(--font-size-xl);
    line-height: 1;
    color: var(--primary); /* Cor primária para os ícones das métricas */
}

.metric-content {
    text-align: center;
}

.metric-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.2;
}

.metric-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}

.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Gráficos maiores, duas colunas */
    gap: var(--spacing-6);
}

.chart-container {
    background: var(--bg-surface);
    padding: var(--spacing-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.chart-container h3 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-4);
    text-align: center;
}

canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

.products-list {
    width: 100%;
    padding: var(--spacing-4);
}

.product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) 0;
    border-bottom: 1px dashed var(--border-light);
}

.product-item:last-child {
    border-bottom: none;
}

.product-name {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.product-count {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-semibold);
}

/* Estilos para o Menu de Ajuda (Help Modal) */
.help-sections {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.help-section h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    margin-bottom: var(--spacing-4);
}

.app-status {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.status-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.status-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}

.help-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.help-list li {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
    line-height: 1.4;
}

.help-list li strong {
    color: var(--primary);
}

.help-list li kbd {
    background: var(--bg-hover);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    padding: 0.1em 0.4em;
    font-family: monospace;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.backup-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.backup-controls .btn {
    width: 100%;
}

.about-text {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-4);
}

/* Nova seção para estilos do Histórico de Compras */
.history-section {
    margin-top: var(--spacing-8); /* Ajuste de espaçamento */
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--border-medium);
    color: var(--text-primary);
}

.history-header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.history-actions {
    display: flex;
    gap: var(--spacing-2);
}

.history-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 4 colunas em telas maiores, adaptável */
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.stat-card {
    background: var(--bg-surface);
    padding: var(--spacing-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: var(--transition-normal);
    border: 1px solid var(--border-light);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    margin-bottom: var(--spacing-1);
    line-height: 1.2;
}

.stat-label {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.history-list {
    margin-top: var(--spacing-8); /* Espaçamento maior antes da lista de itens de histórico */
}

.history-item {
    background: var(--bg-surface);
    padding: var(--spacing-5); /* Padding um pouco maior para cada item */
    border-radius: var(--radius-lg); /* Mais arredondado */
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    margin-bottom: var(--spacing-4);
    transition: var(--transition-normal);
}

.history-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-3); /* Espaçamento menor com os detalhes */
    padding-bottom: var(--spacing-2);
    border-bottom: 1px dashed var(--border-medium); /* Linha tracejada sutil */
    font-size: var(--font-size-sm);
}

.history-date {
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}

.history-total {
    font-weight: var(--font-weight-bold);
    color: var(--primary); /* Destaca o total da compra */
    font-size: var(--font-size-md); /* Tamanho maior para o total */
}

.history-details {
    font-size: var(--font-size-sm);
    color: var(--text-primary); /* Texto principal para o resumo */
    margin-bottom: var(--spacing-4); /* Espaçamento antes dos botões */
    line-height: 1.4;
}

.history-item .history-actions { /* Estilo para os botões dentro do item de histórico */
    display: flex;
    gap: var(--spacing-3);
    justify-content: flex-end; /* Alinha botões à direita */
    margin-top: var(--spacing-4); /* Garante espaço */
}

.history-item .btn-reuse,
.history-item .btn-delete-history {
    padding: var(--spacing-2) var(--spacing-4); /* Padding ajustado */
    font-size: var(--font-size-sm);
    min-height: var(--tap-target-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    transition: var(--transition-normal);
}

.history-item .btn-reuse {
    background: var(--bg-surface);
    color: var(--secondary);
    border: 1px solid var(--secondary);
}

.history-item .btn-reuse:hover {
    background: var(--secondary-light);
    color: var(--primary-contrast);
    border-color: var(--secondary-dark);
    transform: translateY(-1px);
}

.history-item .btn-delete-history {
    background: var(--bg-surface);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.history-item .btn-delete-history:hover {
    background: var(--danger-dark);
    color: var(--primary-contrast);
    border-color: var(--danger-dark);
    transform: translateY(-1px);
}

/* Estilos para a seção de Estatísticas (Gráficos) */
.statistics-section {
    margin-top: var(--spacing-8);
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--border-medium);
    color: var(--text-primary);
}

.stats-header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.period-selector select {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-normal);
    min-height: var(--tap-target-sm);
    font-weight: var(--font-weight-medium);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2364748b"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right var(--spacing-2) center;
    background-size: 1.15rem;
}

.period-selector select:hover {
    border-color: var(--text-secondary);
    background: var(--bg-hover);
}

.period-selector select:focus-visible {
    border-color: var(--primary);
    background: var(--bg-hover);
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.advanced-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.metric-card {
    background: var(--bg-surface);
    padding: var(--spacing-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    border: 1px solid var(--border-light);
    display: flex; /* Para alinhar ícone e conteúdo */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
}

.metric-icon {
    font-size: var(--font-size-xl);
    line-height: 1;
    color: var(--primary); /* Cor primária para os ícones das métricas */
}

.metric-content {
    text-align: center;
}

.metric-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.2;
}

.metric-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}

.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Gráficos maiores, duas colunas */
    gap: var(--spacing-6);
}

.chart-container {
    background: var(--bg-surface);
    padding: var(--spacing-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.chart-container h3 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-4);
    text-align: center;
}

canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

.products-list {
    width: 100%;
    padding: var(--spacing-4);
}

.product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) 0;
    border-bottom: 1px dashed var(--border-light);
}

.product-item:last-child {
    border-bottom: none;
}

.product-name {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.product-count {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-semibold);
}

/* Estilos para a seção de Funcionalidades (Features) */
.features-section {
    margin-top: var(--spacing-12);
    margin-bottom: var(--spacing-8);
}

.features-header {
    margin-bottom: var(--spacing-8);
    text-align: center;
}

.features-header h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary); /* Cor principal para o título da seção */
    margin-bottom: var(--spacing-4);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-4);
}

.feature-card {
    background: var(--bg-surface);
    padding: var(--spacing-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    transition: var(--transition-normal);
    cursor: pointer;
}

.feature-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--primary-light); /* Borda primária no hover */
}

.feature-card:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.feature-icon {
    font-size: var(--font-size-xl);
    line-height: 1;
    flex-shrink: 0;
}

.feature-content {
    flex: 1;
}

.feature-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-1);
}

.feature-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Estilos para o Menu de Ajuda (Help Modal) */
.help-sections {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.help-section h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    margin-bottom: var(--spacing-4);
}

.app-status {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.status-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.status-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}

.help-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.help-list li {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
    line-height: 1.4;
}

.help-list li strong {
    color: var(--primary);
}

.help-list li kbd {
    background: var(--bg-hover);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    padding: 0.1em 0.4em;
    font-family: monospace;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.backup-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.backup-controls .btn {
    width: 100%;
}

.about-text {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-4);
}

/* Nova seção para estilos do Histórico de Compras */
.history-section {
    margin-top: var(--spacing-8); /* Ajuste de espaçamento */
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--border-medium);
    color: var(--text-primary);
}

.history-header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.history-actions {
    display: flex;
    gap: var(--spacing-2);
}

.history-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 4 colunas em telas maiores, adaptável */
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.stat-card {
    background: var(--bg-surface);
    padding: var(--spacing-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: var(--transition-normal);
    border: 1px solid var(--border-light);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    margin-bottom: var(--spacing-1);
    line-height: 1.2;
}

.stat-label {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.history-list {
    margin-top: var(--spacing-8); /* Espaçamento maior antes da lista de itens de histórico */
}

.history-item {
    background: var(--bg-surface);
    padding: var(--spacing-5); /* Padding um pouco maior para cada item */
    border-radius: var(--radius-lg); /* Mais arredondado */
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    margin-bottom: var(--spacing-4);
    transition: var(--transition-normal);
}

.history-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-3); /* Espaçamento menor com os detalhes */
    padding-bottom: var(--spacing-2);
    border-bottom: 1px dashed var(--border-medium); /* Linha tracejada sutil */
    font-size: var(--font-size-sm);
}

.history-date {
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}

.history-total {
    font-weight: var(--font-weight-bold);
    color: var(--primary); /* Destaca o total da compra */
    font-size: var(--font-size-md); /* Tamanho maior para o total */
}

.history-details {
    font-size: var(--font-size-sm);
    color: var(--text-primary); /* Texto principal para o resumo */
    margin-bottom: var(--spacing-4); /* Espaçamento antes dos botões */
    line-height: 1.4;
}

.history-item .history-actions { /* Estilo para os botões dentro do item de histórico */
    display: flex;
    gap: var(--spacing-3);
    justify-content: flex-end; /* Alinha botões à direita */
    margin-top: var(--spacing-4); /* Garante espaço */
}

.history-item .btn-reuse,
.history-item .btn-delete-history {
    padding: var(--spacing-2) var(--spacing-4); /* Padding ajustado */
    font-size: var(--font-size-sm);
    min-height: var(--tap-target-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    transition: var(--transition-normal);
}

.history-item .btn-reuse {
    background: var(--bg-surface);
    color: var(--secondary);
    border: 1px solid var(--secondary);
}

.history-item .btn-reuse:hover {
    background: var(--secondary-light);
    color: var(--primary-contrast);
    border-color: var(--secondary-dark);
    transform: translateY(-1px);
}

.history-item .btn-delete-history {
    background: var(--bg-surface);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.history-item .btn-delete-history:hover {
    background: var(--danger-dark);
    color: var(--primary-contrast);
    border-color: var(--danger-dark);
    transform: translateY(-1px);
}

/* Estilos para a seção de Estatísticas (Gráficos) */
.statistics-section {
    margin-top: var(--spacing-8);
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--border-medium);
    color: var(--text-primary);
}

.stats-header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.period-selector select {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-normal);
    min-height: var(--tap-target-sm);
    font-weight: var(--font-weight-medium);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2364748b"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right var(--spacing-2) center;
    background-size: 1.15rem;
}

.period-selector select:hover {
    border-color: var(--text-secondary);
    background: var(--bg-hover);
}

.period-selector select:focus-visible {
    border-color: var(--primary);
    background: var(--bg-hover);
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.advanced-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.metric-card {
    background: var(--bg-surface);
    padding: var(--spacing-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    border: 1px solid var(--border-light);
    display: flex; /* Para alinhar ícone e conteúdo */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
}

.metric-icon {
    font-size: var(--font-size-xl);
    line-height: 1;
    color: var(--primary); /* Cor primária para os ícones das métricas */
}

.metric-content {
    text-align: center;
}

.metric-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.2;
}

.metric-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}

.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Gráficos maiores, duas colunas */
    gap: var(--spacing-6);
}

.chart-container {
    background: var(--bg-surface);
    padding: var(--spacing-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.chart-container h3 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-4);
    text-align: center;
}

canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

.products-list {
    width: 100%;
    padding: var(--spacing-4);
}

.product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) 0;
    border-bottom: 1px dashed var(--border-light);
}

.product-item:last-child {
    border-bottom: none;
}

.product-name {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.product-count {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-semibold);
}

/* Estilos para a seção de Funcionalidades (Features) */
.features-section {
    margin-top: var(--spacing-12);
    margin-bottom: var(--spacing-8);
}

.features-header {
    margin-bottom: var(--spacing-8);
    text-align: center;
}

.features-header h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary); /* Cor principal para o título da seção */
    margin-bottom: var(--spacing-4);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-4);
}

.feature-card {
    background: var(--bg-surface);
    padding: var(--spacing-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    transition: var(--transition-normal);
    cursor: pointer;
}

.feature-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--primary-light); /* Borda primária no hover */
}

.feature-card:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.feature-icon {
    font-size: var(--font-size-xl);
    line-height: 1;
    flex-shrink: 0;
}

.feature-content {
    flex: 1;
}

.feature-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-1);
}

.feature-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Estilos para o Menu de Ajuda (Help Modal) */
.help-sections {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.help-section h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    margin-bottom: var(--spacing-4);
}

.app-status {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.status-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.status-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}

.help-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.help-list li {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
    line-height: 1.4;
}

.help-list li strong {
    color: var(--primary);
}

.help-list li kbd {
    background: var(--bg-hover);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    padding: 0.1em 0.4em;
    font-family: monospace;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.backup-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.backup-controls .btn {
    width: 100%;
}

.about-text {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-4);
}

/* Nova seção para estilos do Histórico de Compras */
.history-section {
    margin-top: var(--spacing-8); /* Ajuste de espaçamento */
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--border-medium);
    color: var(--text-primary);
}

.history-header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.history-actions {
    display: flex;
    gap: var(--spacing-2);
}

.history-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 4 colunas em telas maiores, adaptável */
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.stat-card {
    background: var(--bg-surface);
    padding: var(--spacing-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: var(--transition-normal);
    border: 1px solid var(--border-light);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    margin-bottom: var(--spacing-1);
    line-height: 1.2;
}

.stat-label {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.history-list {
    margin-top: var(--spacing-8); /* Espaçamento maior antes da lista de itens de histórico */
}

.history-item {
    background: var(--bg-surface);
    padding: var(--spacing-5); /* Padding um pouco maior para cada item */
    border-radius: var(--radius-lg); /* Mais arredondado */
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    margin-bottom: var(--spacing-4);
    transition: var(--transition-normal);
}

.history-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-3); /* Espaçamento menor com os detalhes */
    padding-bottom: var(--spacing-2);
    border-bottom: 1px dashed var(--border-medium); /* Linha tracejada sutil */
    font-size: var(--font-size-sm);
}

.history-date {
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}

.history-total {
    font-weight: var(--font-weight-bold);
    color: var(--primary); /* Destaca o total da compra */
    font-size: var(--font-size-md); /* Tamanho maior para o total */
}

.history-details {
    font-size: var(--font-size-sm);
    color: var(--text-primary); /* Texto principal para o resumo */
    margin-bottom: var(--spacing-4); /* Espaçamento antes dos botões */
    line-height: 1.4;
}

.history-item .history-actions { /* Estilo para os botões dentro do item de histórico */
    display: flex;
    gap: var(--spacing-3);
    justify-content: flex-end; /* Alinha botões à direita */
    margin-top: var(--spacing-4); /* Garante espaço */
}

.history-item .btn-reuse,
.history-item .btn-delete-history {
    padding: var(--spacing-2) var(--spacing-4); /* Padding ajustado */
    font-size: var(--font-size-sm);
    min-height: var(--tap-target-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    transition: var(--transition-normal);
}

.history-item .btn-reuse {
    background: var(--bg-surface);
    color: var(--secondary);
    border: 1px solid var(--secondary);
}

.history-item .btn-reuse:hover {
    background: var(--secondary-light);
    color: var(--primary-contrast);
    border-color: var(--secondary-dark);
    transform: translateY(-1px);
}

.history-item .btn-delete-history {
    background: var(--bg-surface);
    color: var(--danger);
    border: 1px solid var(--danger);
}

.history-item .btn-delete-history:hover {
    background: var(--danger-dark);
    color: var(--primary-contrast);
    border-color: var(--danger-dark);
    transform: translateY(-1px);
}

/* Estilos para a seção de Estatísticas (Gráficos) */
.statistics-section {
    margin-top: var(--spacing-8);
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--border-medium);
    color: var(--text-primary);
}

.stats-header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.period-selector select {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-normal);
    min-height: var(--tap-target-sm);
    font-weight: var(--font-weight-medium);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2364748b"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right var(--spacing-2) center;
    background-size: 1.15rem;
}

.period-selector select:hover {
    border-color: var(--text-secondary);
    background: var(--bg-hover);
}

.period-selector select:focus-visible {
    border-color: var(--primary);
    background: var(--bg-hover);
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.advanced-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-8);
}

.metric-card {
    background: var(--bg-surface);
    padding: var(--spacing-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    border: 1px solid var(--border-light);
    display: flex; /* Para alinhar ícone e conteúdo */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
}

.metric-icon {
    font-size: var(--font-size-xl);
    line-height: 1;
    color: var(--primary); /* Cor primária para os ícones das métricas */
}

.metric-content {
    text-align: center;
}

.metric-value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.2;
}

.metric-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
}

.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Gráficos maiores, duas colunas */
    gap: var(--spacing-6);
}

.chart-container {
    background: var(--bg-surface);
    padding: var(--spacing-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.chart-container h3 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-4);
    text-align: center;
}

canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

.products-list {
    width: 100%;
    padding: var(--spacing-4);
}

.product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) 0;
    border-bottom: 1px dashed var(--border-light);
}

.product-item:last-child {
    border-bottom: none;
}

.product-name {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.product-count {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: var(--font-weight-semibold);
}

/* Estilos para a seção de Funcionalidades (Features) */
.features-section {
    margin-top: var(--spacing-12);
    margin-bottom: var(--spacing-8);
}

.features-header {
    margin-bottom: var(--spacing-8);
    text-align: center;
}

.features-header h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--primary); /* Cor principal para o título da seção */
    margin-bottom: var(--spacing-4);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-4);
}

.feature-card {
    background: var(--bg-surface);
    padding: var(--spacing-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
    transition: var(--transition-normal);
    cursor: pointer;
}

.feature-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--primary-light); /* Borda primária no hover */
}

.feature-card:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-outline-color);
    outline-offset: var(--focus-ring-offset);
}

.feature-icon {
    font-size: var(--font-size-xl);
    line-height: 1;
    flex-shrink: 0;
}

.feature-content {
    flex: 1;
}

.feature-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-1);
}

.feature-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Estilos para o Menu de Ajuda (Help Modal) */
.help-sections {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.help-section h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--primary);
    margin-bottom: var(--spacing-4);
}

.app-status {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
}

.status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
}

.status-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.status-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
}

.help-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.help-list li {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
    line-height: 1.4;
}

.help-list li strong {
    color: var(--primary);
}

.help-list li kbd {
    background: var(--bg-hover);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    padding: 0.1em 0.4em;
    font-family: monospace;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.backup-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.backup-controls .btn {
    width: 100%;
}

.about-text {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-4);
}

/* ============================================
   ESTILOS PARA SEÇÕES DE LISTA (Modo Mercado)
   ============================================ */

/* Seção da Lista */
.lista-section {
    margin-bottom: 2rem;
    animation: slideIn 0.3s ease-out;
}

.lista-section.carrinho-section {
    border-top: 2px dashed var(--border-color);
    padding-top: 1.5rem;
}

/* Header da Seção */
.section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.carrinho-section .section-header {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.section-icon {
    font-size: 1.25rem;
}

.section-title {
    flex: 1;
    font-size: 1rem;
}

.section-count {
    background: rgba(255, 255, 255, 0.25);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 700;
}

/* Itens da Seção */
.section-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Subseção de Categoria (dentro de uma seção) */
.category-subsection {
    margin-bottom: 1rem;
}

.category-subheader {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border-left: 3px solid var(--primary);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.category-count {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

/* Animações */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Item Card com animação quando muda de seção */
.item-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.item-card.comprado {
    animation: moveToCart 0.4s ease-out;
}

@keyframes moveToCart {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        transform: translateX(20px);
        opacity: 0.5;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Empty State Personalizado para Seções */
.section-items:empty::after {
    content: "Nenhum item nesta seção";
    display: block;
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
    font-style: italic;
    opacity: 0.6;
}

/* Responsividade */
@media (max-width: 768px) {
    .section-header {
        padding: 0.625rem 0.875rem;
        gap: 0.5rem;
    }
    
    .section-icon {
        font-size: 1.125rem;
    }
    
    .section-title {
        font-size: 0.9375rem;
    }
    
    .section-count {
        padding: 0.1875rem 0.625rem;
        font-size: 0.8125rem;
    }
    
    .category-subheader {
        padding: 0.375rem 0.625rem;
        font-size: 0.8125rem;
    }
}

/* Dark Mode (se implementado) */
@media (prefers-color-scheme: dark) {
    .section-header {
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    }
    
    .category-subheader {
        background: rgba(255, 255, 255, 0.05);
    }
}

/* Highlight quando item muda de seção */
.item-card.just-checked {
    animation: highlight 0.6s ease-out;
}

@keyframes highlight {
    0% {
        background: var(--primary);
        transform: scale(1.02);
    }
    100% {
        background: transparent;
        transform: scale(1);
    }
}

/* Indicador visual de "No Carrinho" */
.carrinho-section .item-card {
    border-left: 3px solid var(--success);
}

.carrinho-section .item-card:hover {
    border-left-color: var(--primary-dark);
}

/* Badge de "No Carrinho" */
.carrinho-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--success);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Scroll suave entre seções */
.lista-section {
    scroll-margin-top: 100px;
}

/* Feedback visual ao marcar item */
.item-checkbox:checked ~ .item-content {
    animation: checkFeedback 0.3s ease-out;
}

@keyframes checkFeedback {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
}

/* Estilo para a imagem dentro do logo do loading */
.loading-logo img {
    width: 100px;  /* Defina a largura desejada */
    height: 100px; /* Defina a altura desejada */
    object-fit: contain; /* Garante que a imagem caiba sem distorcer */
}