/* /public/css/style.css */

/* --- LOADER MUSICAL --- */

/* O fundo que cobre a tela */
#global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9); /* Fundo branco quase opaco */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Fica acima de tudo */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px); /* Um leve desfoque no fundo */
}

/* Classe para ativar o loader via JS */
#global-loader.visible {
    opacity: 1;
    pointer-events: all;
}

/* O container das notas */
.musical-notes {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

/* Definição padrão das variáveis (Colorido) */
:root {
    --loader-color-1: #C62828; /* Vermelho */
    --loader-color-2: #F9A825; /* Amarelo/Dourado */
    --loader-color-3: #2E7D32; /* Verde */
}

/* Aplica as variáveis às notas */
.note-icon {
    width: 40px;
    height: 40px;
    fill: currentColor; /* Importante para pegar a cor definida abaixo */
    animation: bounceMusic 1s infinite ease-in-out;
}

.note-icon:nth-child(1) { 
    animation-delay: 0.0s; 
    color: var(--loader-color-1); 
}
.note-icon:nth-child(2) { 
    animation-delay: 0.2s; 
    color: var(--loader-color-2); 
}
.note-icon:nth-child(3) { 
    animation-delay: 0.4s; 
    color: var(--loader-color-3); 
}

/* Texto de carregamento */
.loader-text {
    font-family: 'Georgia', serif;
    font-style: italic;
    color: #555;
    font-size: 1.1rem;
    animation: pulseText 1.5s infinite ease-in-out;
}

/* Animação de Pulo */
@keyframes bounceMusic {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* Animação do Texto */
@keyframes pulseText {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Modo Escuro (Dark Mode) - Se aplicável ao seu sistema */
@media (prefers-color-scheme: dark) {
    #global-loader {
        background: rgba(33, 37, 41, 0.95);
    }
    .loader-text {
        color: #ccc;
    }
}

/* --- VARIÁVEIS GLOBAIS E RESET --- */
:root {
    /* Tema Claro (Padrão) */
    --color-primary: #343a40;
    --color-primary-light: #495057;
    --color-secondary: #6c757d;
    --color-secondary-light: #adb5bd;
    --color-success: #28a745;
    --color-danger: #C62828;
    --color-warning: #ffc107;
    --color-info: #17a2b8;
    --color-background: #f8f9fa; /* Fundo claro */
    --color-surface: #ffffff;   /* Superfícies brancas (cards, modais) */
    --color-text: #212529;       /* Texto escuro */
    --color-text-muted: #6c757d;  /* Texto secundário */
    --color-border: #dee2e6;     /* Bordas claras */
    --box-shadow-color: rgba(0,0,0,0.06);

    /* Cor de fundo ao passar o mouse na tabela */
    --color-table-hover: #e9ecef;

    /* Outras variáveis existentes */
    --font-family: 'Inter', sans-serif;
    --border-radius: 8px;
    --box-shadow: 0 2px 8px var(--box-shadow-color);
    --button-padding: 0.7rem 1.2rem;
    --button-font-size: 0.95rem;
    --calendar-anim-duration: 0.2s; /* 200ms */
}

/* Aplica variáveis escuras QUANDO a classe está no HTML */
html.dark-theme {
    /* Tema Escuro */
    --color-primary: #e9ecef; /* Inverte primário/texto */
    --color-primary-light: #ced4da;
    --color-secondary: #adb5bd;
    --color-secondary-light: #6c757d;
    /* Cores de status podem precisar de ajuste para contraste */
    --color-success: #34a853;
    --color-danger: #e57373; /* Vermelho mais claro */
    --color-warning: #ffca28; /* Amarelo mais claro */
    --color-info: #4fc3f7;   /* Azul mais claro */
    --color-background: #212529; /* Fundo escuro */
    --color-surface: #343a40;   /* Superfícies escuras */
    --color-text: #f8f9fa;       /* Texto claro */
    --color-text-muted: #adb5bd;  /* Texto secundário mais claro */
    --color-border: #495057;     /* Bordas mais escuras */
    --box-shadow-color: rgba(255,255,255,0.08); /* Sombra clara */

    /*  Um cinza ligeiramente mais claro que o fundo */
    --color-table-hover: #2c3237;

    /* --- AJUSTES ESPECÍFICOS PARA O TEMA ESCURO --- */

    /* Botões de Submit (que eram pretos) */
    --color-btn-submit-bg: var(--color-primary); /* Fundo claro no tema escuro */
    --color-btn-submit-text: var(--color-background); /* Texto escuro no tema escuro */
    --color-btn-submit-border: var(--color-primary);
    --color-btn-submit-hover-bg: var(--color-primary-light);
    --color-btn-submit-hover-border: var(--color-primary-light);

    /* Ajustes para checkboxes */
    --color-checkbox-bg: var(--color-surface);
    --color-checkbox-border: var(--color-border);
    --color-checkbox-checked-bg: var(--color-primary);
    --color-checkbox-checked-border: var(--color-primary);
    --color-checkbox-checked-icon: var(--color-background); /* Cor do 'V' */
    --color-checkbox-focus-shadow: rgba(233, 236, 239, 0.3); /* Sombra clara no foco */
    --color-checkbox-label-checked: var(--color-primary);

    /* Ajustes para inputs e textareas nos formulários */
    --color-input-focus-border: var(--color-primary);
    --color-input-focus-shadow: rgba(233, 236, 239, 0.3); /* Sombra clara no foco */

    /* Ajustes para .song-option-container e .add-option-btn */
    --color-song-option-bg: var(--color-surface);
    --color-add-option-bg: var(--color-surface);
    --color-add-option-text: var(--color-text);
    --color-add-option-hover-bg: var(--color-background); /* Um pouco mais escuro no hover */
    --color-add-option-border: var(--color-border);

    /* Ajustes para checkboxes (label) */
    --color-checkbox-label-bg: var(--color-surface); /* Fundo da label */
    --color-checkbox-label-hover-bg: var(--color-background); /* Fundo da label no hover */

    /* Ajustes para custom adder buttons */
    --color-custom-adder-btn-bg: var(--color-surface);
    --color-custom-adder-btn-hover-bg: var(--color-background);
    --color-custom-adder-btn-border: var(--color-border);
    --color-custom-adder-btn-text: var(--color-text); /* Adicionado para clareza */

    /* Ajustes para Sortable List */
    --color-sortable-list-bg: var(--color-background); /* Fundo um pouco mais escuro */
    --color-sortable-list-border: var(--color-border);
    --color-sortable-list-item-bg: var(--color-surface);
    --color-sortable-list-item-border: var(--color-border);

    /* Ajustes para botão Cancelar */
    --color-btn-cancel-hover-text: var(--color-danger); /* Mantém vermelho */

    /* --- INÍCIO: CORES LITÚRGICAS TEMA ESCURO --- */
    /* Defina lighter liturgical highlight colors */
    --liturgical-green-dark: #66bb6a;  /* Verde mais claro */
    --liturgical-red-dark: #ef9a9a;    /* Vermelho mais claro */
    --liturgical-purple-dark: #ba68c8; /* Roxo mais claro */
    --liturgical-pink-dark: #f48fb1;    /* Rosa mais claro */
    --liturgical-gold-dark: #fff176;    /* Dourado/Amarelo mais claro (para Branco) */
    
    /* Defina lighter liturgical dot colors */
    --liturgical-dot-green-dark: var(--liturgical-green-dark);
    --liturgical-dot-red-dark: var(--liturgical-red-dark);
    --liturgical-dot-purple-dark: var(--liturgical-purple-dark);
    --liturgical-dot-pink-dark: var(--liturgical-pink-dark);
    --liturgical-dot-white-dark: #fafafa; /* Cinza bem claro/branco para Branco dot */
    --liturgical-dot-default-dark: #bdbdbd; /* Cinza mais claro para default */

    /* --- Sobrescritas de Cores Litúrgicas para Tema Escuro --- */
    /* Título do Cabeçalho (h1) */
    .paper-header h1[style*="color: green"] { color: var(--liturgical-green-dark) !important; }
    .paper-header h1[style*="color: #C62828"] { color: var(--liturgical-red-dark) !important; } /* Vermelho */
    .paper-header h1[style*="color: purple"] { color: var(--liturgical-purple-dark) !important; }
    .paper-header h1[style*="color: #f2508bff"] { color: var(--liturgical-pink-dark) !important; } /* Rosa */
    .paper-header h1[style*="color: #DAA520"] { color: var(--liturgical-gold-dark) !important; } /* Dourado (Branco) */
    .paper-header h1[style*="color: #343a40"] { color: var(--color-text) !important; } /* Default */

    /* Títulos das Partes (h3) */
    .summary-part h3[style*="color: green"] {
        color: var(--liturgical-green-dark) !important;
        border-left-color: var(--liturgical-green-dark) !important;
    }
    .summary-part h3[style*="color: #C62828"] { /* Vermelho */
        color: var(--liturgical-red-dark) !important;
        border-left-color: var(--liturgical-red-dark) !important;
    }
    .summary-part h3[style*="color: purple"] {
        color: var(--liturgical-purple-dark) !important;
        border-left-color: var(--liturgical-purple-dark) !important;
    }
    .summary-part h3[style*="color: #f2508bff"] { /* Rosa */
        color: var(--liturgical-pink-dark) !important;
        border-left-color: var(--liturgical-pink-dark) !important;
    }
    .summary-part h3[style*="color: #DAA520"] { /* Dourado (Branco) */
        color: var(--liturgical-gold-dark) !important;
        border-left-color: var(--liturgical-gold-dark) !important;
    }
    .summary-part h3[style*="color: #343a40"] { /* Default */
        color: var(--color-text) !important;
        border-left-color: var(--color-text) !important;
    }

    /* Divisores */
    .summary-divider[style*="border-top: 2px dashed green"] { border-top-color: var(--liturgical-green-dark) !important; }
    .summary-divider[style*="border-top: 2px dashed #C62828"] { border-top-color: var(--liturgical-red-dark) !important; } /* Vermelho */
    .summary-divider[style*="border-top: 2px dashed purple"] { border-top-color: var(--liturgical-purple-dark) !important; }
    .summary-divider[style*="border-top: 2px dashed #f2508bff"] { border-top-color: var(--liturgical-pink-dark) !important; } /* Rosa */
    .summary-divider[style*="border-top: 2px dashed #DAA520"] { border-top-color: var(--liturgical-gold-dark) !important; } /* Dourado (Branco) */
    .summary-divider[style*="border-top: 2px dashed #343a40"] { border-top-color: var(--color-border) !important; } /* Default */

    /* Pontos da Timeline */
    .timeline-item-color-dot[style*="background-color: green"] { background-color: var(--liturgical-dot-green-dark) !important; }
    .timeline-item-color-dot[style*="background-color: #C62828"] { background-color: var(--liturgical-dot-red-dark) !important; } /* Vermelho */
    .timeline-item-color-dot[style*="background-color: purple"] { background-color: var(--liturgical-dot-purple-dark) !important; }
    .timeline-item-color-dot[style*="background-color: #f2508bff"] { background-color: var(--liturgical-dot-pink-dark) !important; } /* Rosa */
    .timeline-item-color-dot[style*="background-color: #e0e0e0"] { background-color: var(--liturgical-dot-white-dark) !important; } /* Branco (dot claro original) */
    .timeline-item-color-dot[style*="background-color: #ccc"] { background-color: var(--liturgical-dot-default-dark) !important; } /* Default */
    /* --- Fim das Sobrescritas --- */
    /* --- FIM: CORES LITÚRGICAS TEMA ESCURO --- */

    /* Ajuste Botão Primário Modal */
    .modal-button.primary-action {
        color: var(--color-btn-submit-text, var(--color-background)); /* Usa texto 'preto' (background) no tema escuro */
    }

    /* Ajuste dos Botões de Ação */
    .detail-actions .action-btn.edit-btn,
    .user-table .action-btn.edit-btn {
        color: var(--color-warning); /* No escuro, o amarelo destaca bem */
    }
    .detail-actions .action-btn.edit-btn:hover,
    .user-table .action-btn.edit-btn:hover {
        color: var(--color-background); /* Texto escuro no hover amarelo */
    }
    /* Ajuste das Badges */
    .badge {
        color: var(--color-background); /* Fica preto/cinza escuro */
    }

    /* Ajuste do Botão Aplicar Filtros na Timeline */
    .btn-filter-apply {
    color: var(--color-background); /* Texto escuro (contraste com fundo claro do botão) */
    font-weight: 700;
    }
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    /* Estas propriedades usarão as variáveis definidas em :root ou html.dark-theme */
    background-color: var(--color-background); /* Usa variável */
    color: var(--color-text);             /* Usa variável */
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- LAYOUT PRINCIPAL --- */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
}

.main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem; /* Padding ajustado */
    flex-direction: row; 
}

.container > .main-header {
    padding-left: 1rem;
    padding-right: 1rem;
    max-width: 100%; /* Garante que o header ocupe a largura */
}

@media (max-width: 768px) {
    .container > .main-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Lado Esquerdo e Direito do Header */
.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: 1rem; /* Espaço entre itens */
}

/* Container do Logo (para Home e Outras páginas) */
.logo-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--color-primary); /* Herda a cor primária */
}
.logo-container h1 {
    font-size: 1.25rem; /* Tamanho ajustado */
    margin: 0;
    line-height: 1.2;
}
.logo-container:hover {
    opacity: 0.8;
}

/* Logo (Imagem) */
.header-logo {
    height: 40px; /* Tamanho do logo */
    width: auto;
}
/* Logo menor para páginas internas */
.page-nav-back .header-logo.small {
    height: 24px;
}

/* Slogan (Só na Home) */
.slogan {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0;
    display: none; /* Oculto por padrão */
}
@media (min-width: 768px) {
    .slogan {
        display: block; /* Visível em telas maiores */
    }
}

/* Botão Voltar (Outras Páginas) */
.page-nav-back {
    font-size: 1.1rem;
    font-weight: 500;
}
.page-nav-back ion-icon {
    font-size: 1.5rem;
    margin-right: 0.25rem;
}

/* Botão Menu Toggle (Hamburguer) */
.menu-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    font-size: 1.8rem;
    line-height: 1;
    padding: 0;
    margin-right: 0.5rem;
    display: flex; /* Para centralizar o ícone */
    align-items: center;
}
.menu-toggle-btn:hover {
    color: var(--color-secondary);
}

/* Botão de Tema (movido para .header-right) */
.header-right .theme-toggle-button {
    margin-left: 0; /* Remove margem antiga */
}

.sidebar-menu {
    position: fixed;
    top: 0;
    left: -300px; /* Começa fora da tela */
    width: 300px;
    height: 100%;
    background-color: var(--color-surface);
    z-index: 101;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    transition: left 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}
.sidebar-menu-nav {
    /* O menu de navegação cresce para ocupar o espaço, empurrando o footer */
    flex-grow: 1; 
}
.sidebar-menu-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-surface); /* Ou um tom levemente diferente se preferir */
    margin-top: auto; /* Empurra para o fundo */
}

.sidebar-menu-footer .toggle-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-menu-footer .toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: var(--color-text);
    font-size: 1rem;
}

.sidebar-menu-footer .toggle-label ion-icon {
    font-size: 1.4rem;
    color: var(--color-text-muted);
}
.sidebar-menu.active {
    left: 0;
}

/* Header do Sidebar */
.sidebar-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.sidebar-menu-header h4 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-primary);
}
.sidebar-menu-header .close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--color-text-muted);
    line-height: 1;
}
.sidebar-menu-header .close-btn:hover {
    color: var(--color-text);
}

/* Navegação dentro do Sidebar */
/* --- ESTILOS DO SIDEBAR --- */
/* Saudação do usuário (agora com ícone) */
.sidebar-menu-nav .sidebar-menu-user-greeting {
    font-weight: 500;
    color: var(--color-text-muted);
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.5rem;
    
    /* Adiciona flex para o ícone */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
}
.sidebar-menu-nav .sidebar-menu-user-greeting ion-icon {
    font-size: 1.6rem;
}


/* Novo estilo para os links/botões do menu */
.sidebar-menu-link {
    display: flex;
    align-items: center;
    gap: 0.9rem; /* Espaço entre ícone e texto */
    
    width: 100%;
    text-align: left;
    padding: 0.85rem 1rem; /* Padding mais confortável */
    
    /* Remove aparência de botão */
    background: none;
    border: none;
    box-shadow: none;
    
    /* Tipografia */
    font-size: 1.05rem; /* Tamanho de fonte legal */
    font-weight: 500;
    color: var(--color-text); /* Cor de texto padrão */
    text-decoration: none;
    
    border-radius: 8px; /* Bordas arredondadas para o hover */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar-menu-link:hover {
    background-color: var(--color-surface-hover, var(--color-border)); /* Cor de hover sutil */
    color: var(--color-primary); /* Destaca com a cor primária no hover */
}

/* Estilo dos ícones dentro dos links */
.sidebar-menu-link ion-icon {
    font-size: 1.6rem; /* Tamanho do ícone */
    color: var(--color-text-muted); /* Cor sutil para o ícone */
    flex-shrink: 0; /* Impede que o ícone seja espremido */
    transition: color 0.2s ease; /* Transição de cor no hover do pai */
}

.sidebar-menu-link:hover ion-icon {
    color: var(--color-primary); /* Ícone também fica da cor primária */
}

/* --- Ações Especiais --- */

/* Ação Primária (Ex: Novo Repertório) */
.sidebar-menu-link.primary-action {
    color: var(--color-primary);
    font-weight: 600; /* Mais destaque */
}
.sidebar-menu-link.primary-action ion-icon {
    color: var(--color-primary);
}

.sidebar-menu-link.danger-action {
    color: var(--color-danger);
}
.sidebar-menu-link.danger-action ion-icon {
    color: var(--color-danger);
}
.sidebar-menu-link.danger-action:hover {
    /* Fundo vermelho bem claro */
    background-color: rgba(220, 53, 69, 0.1); 
    color: var(--color-danger);
}
html.dark-theme .sidebar-menu-link.danger-action:hover {
    background-color: rgba(255, 91, 91, 0.15);
}

/* Impede rolagem do body quando o sidebar estiver aberto */
body.sidebar-menu-open {
    overflow: hidden;
}

.main-nav {
    display: flex;
    flex-wrap: wrap; /* Permite que os botões quebrem linha se não couberem */
    align-items: center;
    justify-content: center; /* Centraliza os botões em mobile */
    gap: 0.5rem;
}

.main-footer {
    text-align: center;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border); /* Usa variável */
    color: var(--color-text-muted);           /* Usa variável */
    font-size: 0.9rem;
}

main {
    min-height: 70vh;
}

/* --- ESTILO BASE PARA BOTÕES --- */
.btn {
    display: inline-block; /* Permite definir padding e alinhamento */
    padding: var(--button-padding);
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--button-font-size);
    font-family: var(--font-family); /* Garante a mesma fonte */
    border: 1px solid transparent; /* Borda transparente por padrão */
    background-color: transparent;
    color: var(--color-text);
    cursor: pointer;
    text-align: center;
    vertical-align: middle; /* Alinha com outros elementos inline */
    transition: all 0.2s ease-in-out;
    line-height: 1.5; /* Ajuste para melhor alinhamento vertical do texto */
    min-width: 100px; /* Largura mínima para botões menores */
}

/* Estilos de Hover e Focus genéricos */
.btn:hover {
    opacity: 0.85;
}
.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 58, 64, 0.2);
}
.btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Estilo específico para botões que contêm apenas ícones */
.icon-btn {
    padding: 0.5rem; /* Padding menor e quadrado */
    min-width: auto; /* Remove largura mínima */
    line-height: 1; /* Alinha melhor o ícone verticalmente */
    display: inline-flex; /* Para centralizar o ícone */
    align-items: center;
    justify-content: center;
    vertical-align: middle; /* Alinha com texto adjacente se houver */
}

/* Tamanho padrão para IonIcons dentro de botões */
.icon-btn ion-icon {
    font-size: 1.2rem; /* Ajuste o tamanho conforme necessário */
}


/* --- BOTÕES ESPECÍFICOS (Aplicando a classe .btn e ajustando) --- */

/* Botões de Navegação no Header */
.nav-button {
    /* Herda de .btn, apenas ajusta cores e bordas */
    border-color: var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-primary); /* Texto principal (claro no escuro, escuro no claro) */
    /* Ajustes para botões menores no nav */
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}
.nav-button:hover {
    background-color: var(--color-background); /* Fundo um pouco diferente no hover */
    border-color: var(--color-secondary-light); /* Borda um pouco diferente no hover */
    opacity: 1; /* Override hover genérico */
    color: var(--color-primary); /* Mantém a cor do texto primário no hover */
}
.nav-button.primary {
    background-color: var(--color-btn-submit-bg, var(--color-primary)); /* Usa variável submit (era --color-primary) */
    border-color: var(--color-btn-submit-border, var(--color-primary)); /* Usa variável submit (era --color-primary) */
    color: var(--color-btn-submit-text, white); /* Usa variável submit (era white) */
}
.nav-button.primary:hover {
    background-color: var(--color-btn-submit-hover-bg, var(--color-primary-light)); /* Usa variável submit (era --color-primary-light) */
    border-color: var(--color-btn-submit-hover-border, var(--color-primary-light)); /* Usa variável submit (era --color-primary-light) */
    opacity: 1;
}

/* Estilo para botões de formulário no lugar de links (Botão Sair) */
header form .nav-button {
    font-family: var(--font-family); /* Garante que o botão tenha a mesma fonte */
    /* Garante que herde as cores corretas do .nav-button base */
    background-color: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-border);
}
header form .nav-button:hover {
    background-color: var(--color-background);
    border-color: var(--color-secondary-light);
    color: var(--color-primary);
    opacity: 1;
}

/* Botão de trocar tema */
.theme-toggle-button {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    border-radius: var(--border-radius);
    font-size: 1.1rem; /* Tamanho do ícone */
    line-height: 1;
    margin-left: 1rem; /* Espaçamento */
    transition: color 0.3s ease, border-color 0.3s ease;
}

.theme-toggle-button:hover {
    color: var(--color-text);
    border-color: var(--color-text);
}

/* Ajuste para ícones do tema */
.theme-toggle-button ion-icon {
    vertical-align: middle; /* Alinha melhor os ícones */
    font-size: 1.2em; /* Tamanho um pouco maior */
}


/* --- PÁGINA TIMELINE --- */
.timeline-container h2 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
}

/* Custom Summary (Cabeçalho do Acordeão) */
.accordion-summary-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    list-style: none;
    padding: 1rem; /* Garante padding para ficar clicável e bonito */
    cursor: pointer;
}
/* Esconde a seta padrão do navegador */
.accordion-summary-custom::-webkit-details-marker { display: none; }

.summary-left {
    display: flex;
    align-items: center;
}

/* Estilo do Ícone da Seta (IonIcon) */
.accordion-icon {
    font-size: 1.2rem;
    margin-right: 8px;
    transition: transform 0.2s ease;
    color: var(--color-text-muted);
}

/* Rotação ao abrir - APENAS para o ícone da esquerda */
/* O seletor .summary-left garante que não afete o .summary-right */
details[open] > .accordion-summary-custom .summary-left .accordion-icon {
    transform: rotate(90deg);
}

/* Garante que os botões da direita NUNCA girem */
details[open] > .accordion-summary-custom .summary-right ion-icon {
    transform: none !important;
}

/* Remove o ::before antigo se ele ainda estiver lá */
.summary-left::before {
    content: none;
}
details[open] > .accordion-summary-custom .summary-left::before {
    transform: rotate(90deg);
}

.summary-right {
    display: flex;
    gap: 10px;
}

/* Botões de Ícone no Cabeçalho */
.icon-btn-simple {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
    position: relative;
}
.icon-btn-simple:hover {
    color: var(--color-primary);
    background-color: var(--color-background);
}

/* Bolinha de notificação (Filtro Ativo) */
.filter-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    background-color: var(--color-primary);
    border-radius: 50%;
}

/* Painel de Filtros */
.filters-panel {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-top: none; /* Cola no accordion */
    border-radius: 0 0 8px 8px;
    
    /* --- Propriedades de Animação (Estado Fechado) --- */
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    padding: 0 1.5rem; /* Padding vertical zerado, lateral mantido */
    margin-top: -20px; /* Começa um pouco "dentro" do cabeçalho */
    margin-bottom: 0;
    overflow: hidden;
    transform: translateY(-10px); /* Leve deslocamento para cima */
    
    /* Transição suave para tudo */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    position: relative;
    z-index: 5; 
}

/* Estado Aberto */
.filters-panel.active {
    max-height: 500px; /* Altura suficiente para o conteúdo */
    opacity: 1;
    visibility: visible;
    padding: 1.5rem; /* Restaura o padding vertical */
    margin-top: -1.5rem; /* Posição final correta (colado no accordion) */
    margin-bottom: 2rem; /* Empurra o conteúdo de baixo */
    transform: translateY(0); /* Volta para o lugar */
    box-shadow: inset 0 4px 6px -4px rgba(0,0,0,0.05);
}

.filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.filter-group select {
    padding: 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-text);
}

.filters-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.btn-text {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
}
.btn-text:hover { color: var(--color-danger); }

.btn-filter-apply {
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
}
.btn-filter-apply:hover { opacity: 0.9; }

/* Estilo da mensagem de "Sem Resultados no Filtro" */
.filter-no-results {
    text-align: center;
    padding: 3rem 1rem;
    background-color: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--border-radius);
    margin-top: 1rem;
    animation: fadeIn 0.3s ease;
}

.filter-no-results ion-icon {
    font-size: 3rem;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.filter-no-results h4 {
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.filter-no-results p {
    color: var(--color-text-muted);
}

/* --- BARRA DE PESQUISA & WRAPPER --- */

/* 1. O Envelope: Cria o contexto de posicionamento */
.accordion-wrapper {
    position: relative; /* Define o limite (0,0) para a barra absoluta */
    width: 100%;
    margin-bottom: 2rem; /* A margem externa fica aqui agora */
}

/* 2. Ajuste do Accordion dentro do Wrapper */
/* Removemos a margem dele para não somar com a do wrapper */
.accordion-wrapper .calendar-accordion {
    margin-bottom: 0; 
    width: 100%;
}

/* 3. A Barra de Pesquisa (Overlay) */
.search-bar-container {
    display: none; /* Oculta por padrão */
    align-items: center;
    padding: 1rem;
    gap: 0.75rem;

    /* Posicionamento Absoluto: Flutua EXATAMENTE sobre o cabeçalho do accordion */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    
    /* Visual */
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    z-index: 20; /* Garante que fique acima do texto do accordion */
}

/* Estado Ativo (Adicionado via JS) */
.search-bar-container.active {
    display: flex !important;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ícone da Lupa (Input) */
.search-bar-container .search-icon-input {
    font-size: 1.3rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Campo de Texto */
.search-bar-container input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--color-text);
    outline: none;
    font-family: var(--font-family);
    padding: 0.5rem;
}

.search-bar-container input::placeholder {
    color: var(--color-text-muted);
}

/* Botão Fechar (X) */
.btn-close-search {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 50%;
    transition: background 0.2s;
    flex-shrink: 0;
}

.btn-close-search:hover {
    background-color: var(--color-background);
    color: var(--color-danger);
}

/* --- EFEITO DE ESCONDER O TEXTO DO ACCORDION --- */
/* Quando a busca está ativa, o texto "Exibir Calendário" e ícones somem suavemente */

.calendar-accordion.search-mode .summary-left {
    opacity: 0;
    transform: translateX(-20px); /* Desliza para esquerda */
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}

.calendar-accordion.search-mode .summary-right {
    opacity: 0;
    transform: translateX(20px); /* Desliza para direita */
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}
/* --- ESTILO DO ACORDION DO CALENDÁRIO --- */
.calendar-accordion {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    background-color: var(--color-surface);
    margin-bottom: 0; 
    /* Garante que o accordion ocupe 100% da largura do wrapper */
    width: 100%;
}

/* Substitui a seta padrão do <details> por ícone Ionicons */
.calendar-accordion summary {
    padding: 1rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none; /* Remove a seta padrão */
    display: flex; /* Adiciona flex para alinhar o ícone */
    align-items: center;
    gap: 0.5rem; /* Espaço entre ícone e texto */
}

.calendar-accordion summary::-webkit-details-marker {
    display: none; /* Remove a seta no Chrome/Safari */
}

/* Remove o ::before antigo */
.calendar-accordion summary::before {
    content: none; /* Remove o ▶ antigo */
}

/* Adiciona o ícone Ionicons via HTML */
.calendar-accordion summary ion-icon {
    font-size: 1.2rem;
    transition: transform 0.2s ease;
    color: var(--color-text);
}

/* Rotaciona o ícone quando aberto */
.calendar-accordion[open] > summary ion-icon {
    transform: rotate(90deg);
}

#calendar-container {
    padding: 1rem;
    border-top: 1px solid var(--color-border);
    overflow: hidden; /* Garante que o conteúdo não "vaze" */
}

/* --- Animações do Calendário --- */

/* Garante que o conteúdo "vazando" da animação não apareça */
.calendar-accordion {
    overflow: hidden;
}

/* O conteúdo do acordeão (o calendário) */
.calendar-accordion > #calendar-container {
    /* Estado inicial: fechado */
    max-height: 0;
    opacity: 0;
    overflow: hidden; /* Garante que o conteúdo interno não "vaze" */

    transition: max-height 0.3s ease-out, 
                opacity 0.2s ease-out 0.05s;
}

/* * Quando o JS adicionar [open], ele também definirá
 * o max-height e opacity, ativando a transição acima.
 */

/* * Quando a animação terminar, o JS definirá max-height: auto.
 * Este seletor garante que ele permaneça aberto e visível.
*/
.calendar-accordion[open] > #calendar-container {
    max-height: auto;
    opacity: 1;
}

/* * Quando o JS estiver fechando, ele definirá max-height 
 * para um valor fixo (ex: 350px) e depois para 0,
 * ativando a transição de fechamento.
*/

/* Animações de Troca de Meses do Calendário */
/* Keyframes de Entrada */
@keyframes slideInFromRight {
    from { transform: translateX(40px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInFromLeft {
    from { transform: translateX(-40px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Keyframes de Saída */
@keyframes slideOutToLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-40px); opacity: 0; }
}
@keyframes slideOutToRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(40px); opacity: 0; }
}

/* Classes de Animação que o JS vai usar */
.slide-in-from-right {
    animation: slideInFromRight var(--calendar-anim-duration) ease-out;
}
.slide-in-from-left {
    animation: slideInFromLeft var(--calendar-anim-duration) ease-out;
}
.slide-out-to-left {
    animation: slideOutToLeft var(--calendar-anim-duration) ease-in;
}
.slide-out-to-right {
    animation: slideOutToRight var(--calendar-anim-duration) ease-in;
}

.timeline-placeholder {
    text-align: center;
    padding: 2rem;
    background-color: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--border-radius);
}

.timeline-placeholder p {
    margin-bottom: 0.5rem;
    color: var(--color-text-muted);
}

.timeline-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    text-decoration: none;
    color: var(--color-text);
    box-shadow: var(--box-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.timeline-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.timeline-item-color-dot {
    min-width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 1rem;
    background-color: var(--color-text-muted); /* Cor padrão */
}

.timeline-item-content .timeline-item-date {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
    display: block;
}

.timeline-item-content .timeline-item-title {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
}

/* Estilo para itens agendados na timeline */
.timeline-item.scheduled-item {
    opacity: 0.6 !important; /* Adicionado !important para garantir a aplicação */
    border-left: 4px solid orange !important;
    padding-left: calc(1rem - 4px); /* Ajusta o padding */
    background-color: #fff9f0; /* Fundo levemente alaranjado */
}

/* Hover para itens agendados */
.timeline-item.scheduled-item:hover {
    opacity: 1 !important; /* Volta opacidade normal */
    transform: none; /* Remove efeito de levantar */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Sombra mais sutil no hover */
    background-color: #fff; /* Volta fundo branco */
}

/* Estilo para a tag (Agendado) */
.scheduled-tag {
    font-style: italic;
    color: #cc8400; /* Laranja mais escuro para melhor contraste */
    font-size: 0.8em;
    font-weight: bold;
    margin-left: 0.5em;
    background-color: #fff3e0; /* Fundo muito claro */
    padding: 0 4px;
    border-radius: 4px;
}

/* Estilo para o aviso de repertório agendado na página de detalhes */
.scheduled-notice {
    background-color: #fff3e0; /* Laranja bem claro */
    border: 1px solid #ffe0b2; /* Laranja claro */
    color: #bf360c; /* Laranja escuro */
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    text-align: center;
    font-weight: 500;
}


/* --- RESPONSIVIDADE (PARA TELAS MAIORES) --- */
@media (min-width: 768px) {
    .container {
        padding: 2rem;
    }

    .main-header {
        flex-direction: row; /* Lado a lado em telas maiores */
    }

    .main-header .logo {
        margin-bottom: 0; /* Remove a margem abaixo do logo */
    }

    .main-nav {
        justify-content: flex-end; /* Alinha os botões à direita */
    }
}

/* --- ESTILOS PARA FORMULÁRIOS DE AUTENTICAÇÃO --- */
.form-container {
    max-width: 450px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: var(--color-surface); /* Usa variável */
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow); /* Usa variável */
    text-align: center;
}

.form-container h2 {
    margin-bottom: 0.5rem;
    color: var(--color-primary);
}

.form-container p {
    margin-bottom: 2rem;
    color: var(--color-text-muted);
}

.auth-form .form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* Agrupa input, select e textarea para estilos consistentes */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border); /* Usa variável */
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-family: var(--font-family);
    background-color: var(--color-surface); /* Usa variável */
    color: var(--color-text); /* Usa variável */
    /* Adicionado para consistência com o textarea de músicas */
    line-height: 1.6; 
}

/* --- AJUSTES NOS SELETORES EXISTENTES --- */

/* Inputs e Textareas dos formulários (foco) */
.form-group input:focus,
.form-group select:focus,
.music-part-section textarea:focus,
.custom-part-adder input:focus {
    outline: none;
    border-color: var(--color-input-focus-border, var(--color-primary)); /* Usa variável com fallback */
    box-shadow: 0 0 0 3px var(--color-input-focus-shadow, rgba(52, 58, 64, 0.2)); /* Usa variável com fallback */
}

.form-group select {
    /* Remove a aparência nativa */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Adiciona espaço para a seta customizada */
    padding-right: 2.5rem; /* 0.75rem (padding original) + espaço para seta */

    /* Seta customizada (SVG embutido, cor --color-secondary) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3E%3Cpath d='M8 11.207l-4.604-4.604.707-.707L8 9.793l3.9-3.9.707.707L8 11.207z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 16px;
}

/* Remove a seta padrão no IE/Edge */
.form-group select::-ms-expand {
    display: none;
}


/* Botões de Submit de Formulário (Login, UserForm) */
.btn-submit {
    /* Herda de .btn */
    width: 100%; /* Ocupa toda a largura no form de auth */
    background-color: var(--color-btn-submit-bg, var(--color-primary)); /* Usa variável com fallback */
    border-color: var(--color-btn-submit-border, var(--color-primary)); /* Usa variável com fallback */
    color: var(--color-btn-submit-text, white); /* Usa variável com fallback */
    font-weight: 700;
    /* Ajuste de padding/fonte se necessário para bater com o original */
    padding: 0.85rem; 
    font-size: 1rem;
}
.wide-form .btn-submit {
    width: auto; /* Remove o width 100% nos formulários largos */
    /* Volta ao padding/fonte padrão do .btn */
    padding: var(--button-padding);
    font-size: var(--button-font-size);
}
.btn-submit:hover {
    background-color: var(--color-btn-submit-hover-bg, var(--color-primary-light)); /* Usa variável com fallback */
    border-color: var(--color-btn-submit-hover-border, var(--color-primary-light)); /* Usa variável com fallback */
    opacity: 1;
}

.error-message {
    background-color: #F8D7DA; /* Vermelho claro */
    color: #721C24; /* Vermelho escuro */
    border: 1px solid #F5C6CB;
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    text-align: center;
}

/* --- ESTILOS PARA FORMULÁRIO DE REPERTÓRIO --- */
.wide-form {
    max-width: 800px;
    text-align: left;
}

.wide-form h2 {
    text-align: center;
}

.wide-form p {
    text-align: center;
    margin-bottom: 2.5rem;
}

.wide-form fieldset {
    border: none;
    border-top: 1px solid var(--color-border); /* Já usa variável */
    padding: 2rem 0;
    margin: 0;
}

.wide-form legend {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 0 0.5rem;
    margin-left: -0.5rem;
    color: var(--color-primary);
}

.form-hint {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem !important;
    text-align: left !important;
}

.radio-group, .checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: normal;
    color: var(--color-text); /* Garante que o texto da label use a variável correta */
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* --- ESTILOS PARA CHECKBOXES (ajustes) --- */
.checkbox-grid label {
    padding: 0.75rem;
    background-color: var(--color-checkbox-label-bg, #f8f9fa); /* Usa variável */
    border: 1px solid var(--color-border); /* Já usa variável */
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.6rem; /* Espaçamento entre a caixa e o nome */
}

.checkbox-grid label:hover {
    background-color: var(--color-checkbox-label-hover-bg, #e9ecef); /* Usa variável */
}

/* --- ESTILOS PARA CUSTOM CHECKBOX --- */
.checkbox-grid input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    
    width: 1.15em;
    height: 1.15em;
    border: 1px solid var(--color-checkbox-border, var(--color-border)); /* Usa variável */
    border-radius: 4px; /* Raio menor para a caixa */
    background-color: var(--color-checkbox-bg, var(--color-surface)); /* Usa variável */
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0; /* Previne que a caixa encolha */
}

.checkbox-grid label:hover input[type="checkbox"] {
    border-color: var(--color-primary-light);
}

.checkbox-grid input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-checkbox-focus-shadow, rgba(52, 58, 64, 0.2)); /* Usa variável */
}

.checkbox-grid input[type="checkbox"]:checked {
    background-color: var(--color-checkbox-checked-bg, var(--color-primary)); /* Usa variável */
    border-color: var(--color-checkbox-checked-border, var(--color-primary)); /* Usa variável */
}

.checkbox-grid input[type="checkbox"]:checked::after {
    content: '';
    display: block;
    position: absolute;
    top: 45%; /* Ajustado para melhor centralização do "V" */
    left: 50%;
    width: 0.35em;
    height: 0.65em;
    border: solid var(--color-checkbox-checked-icon, white); /* Usa variável */
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.checkbox-grid input:checked + span {
    font-weight: bold;
    color: var(--color-checkbox-label-checked, var(--color-primary)); /* Usa variável */
}

/* --- Adicionador de Parte Customizada (ajustes) --- */
.custom-part-adder {
    display: flex;
    gap: 0.75rem; /* Espaço entre input e botões */
    margin-top: 1rem;
    align-items: stretch; /* Faz os botões terem a mesma altura do input */
}
.custom-part-adder input {
    flex-grow: 1;
    /* Ajusta padding do input para alinhar altura com botões */
    padding: var(--button-padding);
    font-size: var(--button-font-size);
    /* Herda outras propriedades de input se necessário */
    border: 1px solid var(--color-border); /* Usa variável */
    border-radius: var(--border-radius);
    font-family: var(--font-family);
    background-color: var(--color-surface); /* ADICIONADO: Usa variável para fundo */
    color: var(--color-text); /* ADICIONADO: Usa variável para texto */
}
/* Foco já tratado no seletor agrupado */


/* Botões no custom-part-adder */
.custom-part-adder button {
    /* Herda de .btn */
    background-color: var(--color-custom-adder-btn-bg, #f1f1f1); /* Usa variável */
    border-color: var(--color-custom-adder-btn-border, var(--color-border)); /* Usa variável */
    color: var(--color-custom-adder-btn-text, var(--color-text)); /* Garante cor do texto */
    min-width: auto; /* Permite ser menor */
    /* Padding/fonte já vêm do .btn */
}
.custom-part-adder button:hover {
    background-color: var(--color-custom-adder-btn-hover-bg, #e0e0e0); /* Usa variável */
    opacity: 1;
}


/* --- Lista Ordenável (ajustes) --- */
.sortable-list {
    list-style: none;
    padding: 0;
    min-height: 50px;
    background-color: var(--color-sortable-list-bg, #f8f9fa); /* Usa variável */
    border: 1px dashed var(--color-sortable-list-border, var(--color-border)); /* Usa variável */
    border-radius: var(--border-radius);
    padding: 0.5rem;
}

.sortable-list .placeholder {
    padding: 1rem;
    text-align: left; /* Alterado de center para left */
    color: var(--color-text-muted); /* Já deve estar usando a variável correta */
}

.sortable-list li {
    padding: 0.75rem;
    background-color: var(--color-sortable-list-item-bg, var(--color-surface)); /* Usa variável */
    border: 1px solid var(--color-sortable-list-item-border, var(--color-border)); /* Usa variável */
    color: var(--color-text); /* Garante a cor do texto dentro do item */
    margin-bottom: 0.5rem;
    border-radius: var(--border-radius);
    cursor: grab;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* justify-content: space-between; */ /* Empurra o botão para a direita - REMOVIDO */
}
/* Estilo do handle '::' no item da lista */
.sortable-list li:before {
    content: '::';
    opacity: 0.5;
    color: var(--color-text-muted); /* Ajusta cor do handle */
}

.sortable-list li.divider {
    /* Faz o divisor parecer um item 'li' normal */
    padding: 0.75rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    margin-bottom: 0.5rem;
    border-radius: var(--border-radius);
    cursor: grab;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    
    /* Remove estilos antigos que conflitariam */
    height: auto; 
    
    /* Mantém o position: relative para o botão de remover */
    position: relative; 
}

/* Garante que o handle '::' apareça (caso não herde) */
.sortable-list li.divider:before {
    content: '::';
    opacity: 0.5;
}

.sortable-list li.divider span { 
    /* Transforma o <span> em uma linha visual */
    display: block; /* Garante que é um elemento de bloco */
    width: 100%; /* Ocupa todo o espaço disponível */
    height: 2px; /* Altura da linha */
    background-color: var(--color-border); /* Cor da linha */
    text-indent: -9999px; /* Esconde o texto "Divisor" */
}

.remove-item-btn {
    background: none;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    padding: 0 0.3rem; /* Pequeno padding para área de clique */
    margin-left: auto; /* Alterado de 0.5rem para auto, para empurrar para a direita */
    line-height: 1;
}
.remove-item-btn:hover {
    opacity: 0.7;
}
.remove-item-btn ion-icon {
    font-size: 1.1rem; /* Tamanho específico para o ícone de remover */
    vertical-align: middle; /* Alinha o ícone */
}


/* Navegação do Formulário (Voltar/Cancelar e Próximo/Salvar) */
.form-navigation {
    display: flex;
    justify-content: space-between; /* Mantém um de cada lado */
    align-items: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}
/* Agrupamento dos botões da direita (Cancelar + Submit) */
.form-navigation > div {
    display: flex;
    gap: 0.75rem; /* Espaço entre Cancelar e Submit */
    align-items: center;
}

/* Botões/Links de Cancelar em Formulários */
/* --- Botão Cancelar (ajustes) --- */
.btn-cancel {
    /* Herda de .btn, mas sem fundo/borda visível */
    color: var(--color-text-muted); /* Já usa variável */
    background: none;
    border: none;
    text-decoration: none; /* Garante que não pareça link */
    font-weight: 500;
    min-width: auto; /* Permite ser menor */
    padding: var(--button-padding); /* Mantém o mesmo padding */
}
.btn-cancel:hover {
    color: var(--color-btn-cancel-hover-text, var(--color-danger)); /* Usa variável */
    background-color: transparent; /* Garante sem fundo no hover */
    opacity: 1;
}

/* --- ESTILOS PARA FORMULÁRIO DE MÚSICAS --- */
.loading-placeholder {
    text-align: center;
    padding: 2rem;
    color: var(--color-text-muted);
}

.music-part-section {
    border: none;
    padding: 2rem 0;
    margin: 0;
    border-top: 1px solid var(--color-border);
}

.music-part-section legend {
    font-size: 1.2rem;
    font-weight: 700;
    padding: 0 0.5rem;
    margin-left: -0.5rem;
    color: var(--color-primary);
}

.song-option-container {
    position: relative; /* Para posicionar o botão de remover */
    padding: 1.5rem;
    margin-top: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-song-option-bg, #f8f9fa); /* Usa variável com fallback */
}

.song-option-container .option-title {
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
    display: block;
}

.music-part-section textarea {
    min-height: 250px; /* Aumentei um pouco a altura mínima */
    font-family: var(--font-family); /* Alterado de Courier para a fonte padrão */
    font-size: 1rem; /* Alterado de 0.95rem para 1rem, igual ao input */
    line-height: 1.6; /* Linha de altura padrão */
    
    /* --- Estilos adicionados para corresponder aos inputs --- */
    width: 100%; /* Garante que ocupe o espaço */
    padding: 0.75rem; /* Mesmo padding dos inputs */
    border: 1px solid var(--color-border); /* Usa variável */
    border-radius: var(--border-radius); /* Mesmo raio de borda dos inputs */
    background-color: var(--color-surface); /* Usa variável */
    color: var(--color-text); /* Usa variável */
}

/* Foco já tratado no seletor agrupado */


/* Botão "Adicionar Opção" */
.add-option-btn {
    /* Herda de .btn */
    margin-top: 1rem;
    border: 1px solid var(--color-add-option-border, var(--color-border)); /* Usa variável */
    border-radius: 6px;
    background-color: var(--color-add-option-bg, #F8F9FA); /* Usa variável */
    color: var(--color-add-option-text, var(--color-primary)); /* Usa variável */
    font-weight: 500;
    width: 100%; /* Ocupa a largura da seção */
    height: 4vh;
    /* Padding/fonte vêm do .btn */
}
.add-option-btn:hover {
    background-color: var(--color-add-option-hover-bg, #f1f1f1); /* Usa variável */
    border-color: var(--color-secondary-light, #ccc); /* Usa variável */
    opacity: 1;
}

.remove-option-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-option-btn:hover {
    color: var(--color-danger);
    background-color: rgba(220, 53, 69, 0.1);
}

.remove-option-btn ion-icon {
    font-size: 1.2rem;
}

/* --- ESTILOS DA PÁGINA DE RESUMO --- */
.summary-page {
    max-width: 800px; /* Um pouco mais estreito para parecer uma folha */
}

.paper-preview {
    position: relative;
    background-color: var(--color-surface);
    padding: 3rem;
    box-shadow: var(--box-shadow);
    border-radius: 4px;
    margin-bottom: 4rem;
    color: var(--color-text);
    /* Define uma variável para a fonte base E a variável dinâmica */
    --base-font-size: 1rem; /* 16px como base (ou 11pt se preferir) */
    --current-font-size: var(--base-font-size); /* Valor inicial */
    font-size: var(--current-font-size); /* Aplica a fonte dinâmica */
    transition: font-size 0.2s ease-in-out;
}

.paper-header {
    text-align: center;
    margin-bottom: 2.5em; /* Usa 'em' para escalar com a fonte base */
    padding-bottom: 1.5em; /* Usa 'em' */
    border-bottom: 2px solid var(--color-border);
}

.paper-header h1 {
    /* Antes: font-size: 1.8rem; */
    font-size: 1.8em; /* Relativo ao pai (.paper-preview) */
    color: var(--color-primary);
    margin-bottom: 0.5em; /* Usa 'em' */
}

.paper-header .liturgy-info {
    /* Antes: font-size: 1.1rem; */
    font-size: 1.1em; /* Relativo ao pai */
    color: var(--color-text);
}

.paper-header .date-info {
    /* Antes: font-size: 0.95rem; */
    font-size: 0.95em; /* Relativo ao pai */
    color: var(--color-text-muted);
    margin-top: 0.25em; /* Usa 'em' */
}

.summary-part {
    margin-bottom: 2em; /* Usa 'em' */
}

.summary-part h3 {
    /* Antes: font-size: 1.1rem; */
    font-size: 1.1em; /* Relativo ao pai */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    margin-bottom: 0.75em; /* Usa 'em' */
    border-left: 4px solid var(--color-primary-light);
    padding-left: 0.75em; /* Usa 'em' */
}

.remove-divider-btn {
    background: none; border: none; font-size: 1.5rem; color: var(--color-danger);
    cursor: pointer; position: absolute; right: 10px; top: 50%;
    transform: translateY(-50%); line-height: 1; padding: 0 5px;
}

.summary-divider {
    height: 0;
    border-top: 2px dashed var(--color-border);
    margin: 2.5em 0; /* Usa 'em' */
    position: relative;
}

/* Ícone de tesoura opcional para divisores */
.summary-divider::after {
    /* content: '✂'; */
    content: '';
    position: absolute;
    left: 50%;
    top: -0.6em; /* Ajuste relativo */
    background: var(--color-surface);
    padding: 0 10px;
    color: var(--color-text-muted);
    transform: translateX(-50%);
}

.scale-detail {
    font-weight: bold;
}

.song-preview {
    margin-bottom: 1.5em; /* Usa 'em' */
    padding-left: 1em; /* Usa 'em' */
}

.song-option-label {
    /* Antes: font-size: 0.85rem; */
    font-size: 0.85em; /* Relativo ao pai */
    font-weight: bold;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: 0.25em; /* Usa 'em' */
}

.lyrics-preview {
    white-space: pre-wrap;
    font-family: 'Georgia', serif; /* Mantém a fonte específica */
    /* A fonte será herdada de .paper-preview, não precisa definir aqui */
    /* font-size: inherit; */ /* Garante herança se necessário */
    line-height: 1.6; /* Mantém a altura da linha */
    color: var(--color-text);
}

/* Formatação Markdown na letra */
.lyrics-preview strong { color: var(--color-text); font-weight: 700; }
.lyrics-preview em { font-style: italic; }
.refrain-marker { font-weight: bold; color: var(--color-primary); }

.sticky-bottom {
    position: sticky;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    padding: 1rem;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
}

/* Responsividade para papel e mobile */
@media (max-width: 768px) {
    .container.detail-page,
    .container.summary-page {
        padding-left: 0;
        padding-right: 0;
        max-width: none; /* Remove a limitação de largura do container */
    }

    /* Regras para a folha ocupar 100% DENTRO desses containers específicos */
    .container.detail-page .paper-preview,
    .container.summary-page .paper-preview {
        width: 100%;
        padding-left: 10px;  /* Padding mínimo interno */
        padding-right: 10px; /* Padding mínimo interno */
        padding-top: 1rem;
        padding-bottom: 1rem;
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* Regras para remover recuos DENTRO da folha nessas páginas */
    .container.detail-page .song-preview,
    .container.summary-page .song-preview {
        padding-left: 0;
        margin-bottom: 1rem;
    }

    .container.detail-page .summary-part h3,
    .container.summary-page .summary-part h3 {
        padding-left: 0;
        border-left: none;
        margin-left: 5px;
        /* Antes: font-size: 1rem; */
        font-size: 1em; /* Ajusta para ser relativo */
    }

     .container.detail-page .paper-header,
     .container.summary-page .paper-header {
        padding-left: 10px;
        padding-right: 10px;
     }

    /* --- Regra de Fallback --- */
    /* Garante que outros .container (que não são .detail-page ou .summary-page) mantenham seu padding */
    .container:not(.detail-page):not(.summary-page) {
         padding-left: 1rem; /* Ou o padding padrão desejado para mobile */
         padding-right: 1rem;
     }

     .checkbox-grid {
        display: block; /* Muda de grid para block para empilhar verticalmente */
    }
    
    .checkbox-grid label {
        margin-bottom: 0.75rem; /* Adiciona espaçamento vertical entre os itens empilhado */
        width: 100%; /* Garante que a label ocupe a largura total */
        box-sizing: border-box; /* Garante que padding não aumente a largura total */
    }
    
    /* Ajuste para o adicionador de parte personalizada empilhar também */
    .custom-part-adder {
        flex-direction: column; /* Empilha o input e os botões */
        align-items: stretch; /* Faz os itens ocuparem a largura total */
    }
    .custom-part-adder input {
        margin-bottom: 0.5rem; /* Espaço entre o input e o primeiro botão */
    }
    .custom-part-adder button {
        width: 100%; /* Botões ocupam a largura total */
    }

    /* --- Ajustes para formulário de músicas em mobile --- */
    .music-part-section {
        padding-left: 0; /* Remove padding lateral da seção para alinhar com container */
        padding-right: 0;
    }

    .song-option-container {
        background-color: transparent; /* Remove fundo do container */
        border: none;             /* Remove borda do container */
        padding: 0;               /* Remove padding interno do container */
        margin-top: 1rem;         /* Ajusta espaço acima de cada opção */
        box-shadow: none;         /* Remove sombra se houver */
    }

    /* Ajusta título da opção (Opção I, II...) se houver mais de uma */
    .song-option-container .option-title {
        margin-bottom: 0.5rem; /* Ajusta espaço abaixo do título da opção */
        padding-left: 0;      /* Remove padding esquerdo se houver */
        margin-left: 0;       /* Remove margem esquerda se houver */
    }

    /* Garante que os grupos de formulário (label + input/textarea) usem a largura */
    .song-option-container .form-group {
        margin-bottom: 1rem; /* Mantém espaço vertical entre os campos */
    }

    /* Garante que a legenda (título da seção) não tenha recuos */
    .music-part-section legend {
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* Ajusta botão de adicionar opção para ocupar largura */
    .add-option-btn {
        width: 100%; /* Ocupa largura total */
        box-sizing: border-box; /* Garante que padding/border não estourem */
    }
}

/* --- ESTILOS PÁGINA DE DETALYES --- */

/* Ações na Página de Detalhes */
.detail-actions {
    display: flex;
    flex-wrap: wrap; /* Permite quebrar linha */
    gap: 0.75rem; /* Espaço entre os botões */
    justify-content: center; /* Centraliza */
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}
/* Garante que o form de exclusão não cause espaçamento extra */
.detail-actions form {
    margin: 0;
}


/* */
/* --- AÇÕES E BOTÕES (Global para Detalhes e Tabelas) --- */

/* Container de Ações (Página de Detalhes) */
.detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}

.detail-actions form {
    margin: 0;
}

/* Estilo Base do Botão de Ação (.action-btn) */
.detail-actions .action-btn,
.user-table .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    
    background-color: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    
    padding: 0.6rem 1.2rem;
    border-radius: var(--border-radius);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    line-height: 1;
}

/* Ajuste para botões dentro da tabela */
.user-table .action-btn {
    padding: 0.4rem 0.6rem;
    font-size: 1rem;
}

/* Hover Geral */
.detail-actions .action-btn:hover,
.user-table .action-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-surface);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.detail-actions .action-btn ion-icon,
.user-table .action-btn ion-icon {
    font-size: 1.2rem;
}

@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }
}

/* --- VARIAÇÕES DE COR (Usando Variáveis do Sistema) --- */

/* 1. Botão Excluir (Danger/Vermelho) */
.detail-actions .action-btn.delete-btn,
.user-table .action-btn.delete-btn {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.detail-actions .action-btn.delete-btn:hover,
.user-table .action-btn.delete-btn:hover {
    background-color: var(--color-danger);
    color: var(--color-surface);
    border-color: var(--color-danger);
}

/* 2. Botão Editar (Warning/Amarelo) */
.detail-actions .action-btn.edit-btn,
.user-table .action-btn.edit-btn {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.detail-actions .action-btn.edit-btn:hover,
.user-table .action-btn.edit-btn:hover {
    background-color: var(--color-warning);
    color: #212529; /* Texto escuro no hover para garantir leitura no amarelo */
    border-color: var(--color-warning);
}


/* Letras com formatação preservada */
.lyrics-preview {
    white-space: pre-wrap;
    font-family: 'Georgia', serif;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0; /* Reseta a margem padrão da tag <pre> */
}

/* --- ESTILOS SIDEBAR DE LINKS --- */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

.sidebar {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100%;
    background-color: var(--color-surface);
    z-index: 101;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    /* padding: 1.5rem; */ /* REMOVIDO o padding geral */
    transition: right 0.3s ease;
    /* overflow-y: auto; */ /* REMOVIDO daqui */
    box-sizing: border-box;
    display: flex; /* <-- ADICIONADO: Usar flexbox para layout interno */
    flex-direction: column; /* <-- ADICIONADO: Empilhar header e content */
}
.sidebar.active {
    right: 0;
}

/* Estilos para o cabeçalho da sidebar */
.sidebar-header {
    display: flex;
    justify-content: space-between; /* Título à esquerda, botão à direita */
    align-items: center;     /* Alinha verticalmente */
    padding: 1rem 1.5rem;     /* Adiciona padding interno (vertical menor) */
    border-bottom: 1px solid var(--color-border); /* Linha divisória */
    flex-shrink: 0; /* Impede que o header encolha */
}

/* Ajustes no Título Principal */
.sidebar h4 {
    margin: 0; /* Remove margens padrão */
    color: var(--color-primary);
    font-size: 1.25rem;
}

/* Ajustes no Botão Fechar */
.sidebar .close-btn {
    /* position: absolute; */ /* REMOVIDO */
    /* top: 10px; */ /* REMOVIDO */
    /* right: 15px; */ /* REMOVIDO */
    background: none;
    border: none;
    font-size: 2rem; /* Mantém tamanho */
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0; /* Remove padding extra se houver */
    line-height: 1; /* Ajuda no alinhamento */
    /* margin-left: auto; */ /* Pode ser útil se o justify-content não funcionar */
}

/* Estilos para a área de conteúdo rolável */
.sidebar-content {
    flex-grow: 1; /* Faz esta div ocupar o espaço restante */
    overflow-y: auto; /* Habilita a rolagem APENAS nesta área */
    padding: 1.5rem; /* Adiciona o padding que estava na sidebar */
}


.sidebar ul {
    list-style: none;
    padding: 0;
}

/* Estilos para o título da seção (nome da parte) */
.sidebar .part-heading {
    font-weight: bold;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.25rem;
}

.sidebar .part-heading:first-of-type {
    margin-top: 0;
}

.sidebar ul li {
    margin-bottom: 0.75rem;
}

.sidebar ul a {
    text-decoration: none;
    color: var(--color-text);
    word-break: break-all;
    display: block;
    padding-left: 0.5rem;
}

.sidebar ul a:hover {
    color: var(--color-primary);
}

/* Regra para impedir rolagem do body */
body.sidebar-open {
    overflow: hidden;
}

/* Ajustes responsivos para a sidebar */
@media (min-width: 768px) {
    .sidebar {
        width: 450px;
        right: -470px;
    }
}

/* --- MENU DE CONTEXTO PERSONALIZADO --- */
.context-menu {
    display: none; /* Escondido por padrão */
    position: fixed; /* Fixo na tela para seguir coordenadas do mouse/toque */
    z-index: 10005; /* Acima de tudo (modais, sidebar, etc) */
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 220px;
    padding: 5px 0;
    overflow: hidden;
    animation: fadeIn 0.1s ease-out;
}

.context-menu.active {
    display: block;
}

.context-menu-header {
    padding: 8px 15px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-background);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 15px;
    border: none;
    background: none;
    color: var(--color-text);
    font-size: 0.95rem;
    font-family: var(--font-family);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s;
}

.context-menu-item:hover {
    background-color: var(--color-background); /* Cor de hover do tema */
    color: var(--color-primary);
}

.context-menu-item ion-icon {
    font-size: 1.2rem;
    color: var(--color-primary);
}

/* --- PLAYER FLUTUANTE --- */
.floating-player {
    display: none; /* Escondido por padrão */
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px; /* Largura inicial boa para mobile/desktop */
    max-width: 90vw; /* Não estourar a tela no mobile */
    background-color: #000;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 10002; /* Acima de quase tudo */
    overflow: hidden;
    transition: opacity 0.3s ease;
    resize: both; /* Permite redimensionar (opcional) */
}

.floating-player.active {
    display: block;
    animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-header {
    background-color: rgba(33, 33, 33, 0.9);
    color: white;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: grab; /* Indica que pode arrastar */
    user-select: none;
}

.floating-header:active {
    cursor: grabbing;
}

.close-floating-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    line-height: 0.8;
    cursor: pointer;
    padding: 0 5px;
}

.close-floating-btn:hover {
    color: var(--color-danger);
}

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



/* --- ESTILOS DO CALENDÁRIO --- */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem; /* Aumentado */
    margin-bottom: 0.5rem; /* Adicionado espaço */
}
.calendar-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600; /* Um pouco mais de peso */
    color: var(--color-primary);
}
/* Botões de navegação (setas) */
.calendar-header button {
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    border-radius: 50%; /* Botões redondos */
    color: var(--color-secondary);
    width: 32px; 
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    padding: 0; /* Resetar padding */
    font-size: 1.25rem; /* Tamanho do ícone/seta */
    line-height: 1;
    transition: background-color 0.2s, color 0.2s;
}
.calendar-header button:hover {
    background-color: #f1f1f1; /* Hover sutil */
    color: var(--color-primary); /* Cor primária no hover */
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 8px; /* Espaço entre as semanas */
    column-gap: 4px; /* Espaço entre os dias */
    text-align: center;
}

.day-name {
    font-weight: 500; /* Menos "bold", mais "medium" */
    color: var(--color-text-muted);
    font-size: 0.85rem; /* Ligeiramente maior */
    text-transform: uppercase; /* Aparência limpa */
    padding-bottom: 0.5rem; /* Espaço acima dos números */
}

.day-cell {
    /* Força um círculo perfeito */
    width: 36px; /* Tamanho fixo */
    height: 36px; /* Tamanho fixo */
    margin: 0 auto; /* Centraliza a célula na coluna do grid */
    padding: 0; /* Reseta o padding antigo */

    display: flex;
    align-items: center;
    justify-content: center;
    
    border-radius: 50%;
    position: relative;
    cursor: default;
    font-size: 0.95rem;
    color: var(--color-text);
    transition: background-color 0.2s, color 0.2s;
}

.day-cell.has-event {
    cursor: pointer;
    font-weight: 500; /* Um pouco de peso, mas não bold */
}

/* Hover (para dias com evento) */
.day-cell.has-event:hover {
    background-color: #e9ecef; /* Cinza claro (bom para hover) */
    color: var(--color-primary);
}

/* Ativo (dia selecionado) */
.day-cell.active {
    background-color: var(--color-primary); /* Cor primária do sistema */
    color: var(--color-surface); /* Texto branco */
    font-weight: 600;
}

/* Ponto do evento */
.event-dot {
    position: absolute;
    bottom: 4px; /* Ajustado */
    left: 50%;
    transform: translateX(-50%);
    width: 6px; /* Menor */
    height: 6px; /* Menor */
    border-radius: 50%;
    background-color: var(--color-primary); /* Cor primária, sem borda */
}

/* Se o dia estiver ativo, o ponto deve ser branco */
.day-cell.active .event-dot {
    background-color: var(--color-surface); /* Ponto branco no fundo escuro */
}


/* Ajuste da Grid para Meses e Anos (3 ou 4 colunas) */
.calendar-grid.months-view,
.calendar-grid.years-view {
    grid-template-columns: repeat(3, 1fr); /* 3 Colunas */
    row-gap: 15px;
    column-gap: 10px;
    padding: 10px;
}

/* Célula de Mês e Ano */
.month-cell, .year-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    border-radius: 8px; /* Retangular arredondado */
    cursor: pointer;
    font-weight: 500;
    color: var(--color-text);
    transition: all 0.2s ease;
    background-color: transparent;
    font-size: 1rem;
}

/* Hover */
.month-cell:hover, .year-cell:hover {
    background-color: #e9ecef;
    color: var(--color-primary);
}

/* Item Selecionado (Mês/Ano atual) */
.month-cell.selected, .year-cell.selected {
    background-color: var(--color-primary);
    color: var(--color-surface);
    font-weight: 700;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Item "Fora" do intervalo (ex: anos de outra década) */
.year-cell.muted {
    color: var(--color-text-muted);
    opacity: 0.5;
}

/* Cabeçalho Interativo */
.calendar-header h3 {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
    display: inline-block; /* Para o hover funcionar apenas no texto */
    user-select: none;
}

.calendar-header h3:hover {
    background-color: rgba(0,0,0,0.05);
}

/* Animação de Zoom (Opcional, para troca de views) */
@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.view-transition {
    animation: zoomIn 0.2s ease-out;
}

/* Ajuste para o botão de limpar filtro parecer nativo */
#filter-reset-container .action-btn {
    background-color: #fff;
    border: 1px solid #ced4da;
    color: #495057;
    border-radius: 50px; /* Arredondado estilo "pill" */
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    cursor: pointer;
}

#filter-reset-container .action-btn:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    transform: translateY(-1px);
}


/* --- TABELA DE GERENCIAMENTO DE USUÁRIOS --- */
.user-table { width: 100%; border-collapse: collapse; background-color: var(--color-surface); }
.user-table th, .user-table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--color-border); }
.user-table th { font-weight: 700; }
.user-table tr:hover { background-color: var(--color-table-hover); }
.user-table td:last-child { text-align: right; }

/* Ajusta espaçamento entre botões de ação na tabela */
.user-table td .action-btn + form .action-btn,
.user-table td form + .action-btn,
.user-table td .action-btn + .action-btn {
    margin-left: 0.5rem;
}

/* Container que permite rolagem horizontal em telas pequenas */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    background-color: var(--color-surface);
}

/* Ajuste para a tabela ocupar o espaço correto */
.user-table {
    width: 100%;
    min-width: 600px; /* Força largura mínima para garantir layout */
    border-collapse: collapse;
}

/* Ajustes finos para os botões dentro da tabela */
.user-table .action-btn {
    padding: 0.4rem 0.6rem; /* Botões um pouco mais compactos na tabela */
    font-size: 1rem;
}

/* Badges de Função (Admin/Coord) */
.badge {
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}
.badge.bg-primary { background-color: var(--color-primary); }
.badge.bg-secondary { background-color: var(--color-secondary); }


/* --- ESTILOS MODAL --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%); /* Começa um pouco acima */
    background-color: var(--color-surface);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    width: 400px; /* Largura fixa */
    max-width: 90%; /* Prevenção de overflow em telas pequenas */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%); /* Centraliza */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.modal-title {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--color-primary);
    font-size: 1.25rem;
    text-align: center; /* Centralizado */
}

.modal-message {
    margin-bottom: 1.5rem;
    color: var(--color-text-muted);
    text-align: center; /* Centralizado */
    overflow-wrap: break-word; /* Garante a quebra de palavras longas */
}

/* Ações do Modal */
.modal-actions {
    display: flex;
    justify-content: center; /* Alinha ao centro */
    gap: 0.75rem; /* Espaço entre os botões */
}

/* Botões do Modal */
.modal-button {
    /* Herda de .btn */
    /* Estilo padrão (Cancelar) */
    background-color: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-border);
}
.modal-button:hover {
    background-color: #f1f1f1;
    opacity: 1;
}
/* Estilo primário (Confirmar) */
.modal-button.primary-action {
    background-color: var(--color-primary);
    color: white; /* Isto será sobrescrito no tema escuro */
    border-color: var(--color-primary);
}
.modal-button.primary-action:hover {
    background-color: var(--color-primary-light);
    opacity: 1;
}


/* --- ESTILOS TOAST --- */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.toast {
    background-color: var(--color-primary);
    color: white;
    padding: 0.8rem 1.2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.4s ease-in-out;
    max-width: 300px;
    font-size: 0.9rem;
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast.hide {
    opacity: 0;
    transform: translateX(100%);
}

.toast.success {
    background-color: var(--color-success);
}

.toast.error {
    background-color: var(--color-danger);
}

.toast.info {
    background-color: var(--color-info);
}


/* Estilos para mostrar/esconder ícones (ajustados para html) */
.theme-toggle-button .icon-dark { display: none; }
html.dark-theme .theme-toggle-button .icon-light { display: none; }
html.dark-theme .theme-toggle-button .icon-dark { display: inline-block; } /* Usar inline-block ou flex */
html:not(.dark-theme) .theme-toggle-button .icon-light { display: inline-block; }

/* --- ESTILOS FAB (Floating Action Button) --- */
.fab-container {
    position: fixed;
    bottom: 1rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fab-main,
.fab-action {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.5rem; /* Tamanho do ícone */
}

.fab-main {
    background-color: var(--color-primary);
    color: var(--color-surface);
    z-index: 11; /* Acima dos actions e overlay */
}
html.dark-theme .fab-main {
     background-color: var(--color-primary-light);
     color: var(--color-background);
}

.fab-main .icon-close {
    display: none;
}
.fab-main .icon-open {
    display: block; /* ou inline-block */
}

.fab-actions {
    display: flex;
    flex-direction: column-reverse; /* Empilha corretamente */
    align-items: center;
    gap: 1rem; /* Espaço entre os botões de ação */
    margin-bottom: 1rem; /* Espaço entre actions e main */
    transition: all 0.3s ease;
}

.fab-action {
    background-color: var(--color-warning); /* Cor destacada */
    color: #333; /* Texto escuro para contraste */
    width: 48px; /* Menor que o principal */
    height: 48px;
    font-size: 1.3rem;
    transform: scale(0); /* Começa escondido */
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s;
}

.fab-action.fab-reset ion-icon {
    transform: scaleX(-1); /* Inverte o ícone verticalmente */
}

html.dark-theme .fab-action {
    background-color: var(--color-warning); /* Mantém amarelo no dark theme */
    color: #333;
}


/* Estilos quando o FAB está ativo */
.fab-container.active .fab-main {
    transform: rotate(90deg); /* Gira o botão principal */
}
.fab-container.active .fab-main .icon-open { display: none; }
.fab-container.active .fab-main .icon-close { display: block; }


.fab-container.active .fab-action {
    transform: scale(1); /* Mostra os botões */
    opacity: 1;
}

/* Delay na animação para efeito escalonado */
.fab-container.active .fab-action:nth-child(1) { transition-delay: 0.1s; }
.fab-container.active .fab-action:nth-child(2) { transition-delay: 0.15s; }
.fab-container.active .fab-action:nth-child(3) { transition-delay: 0.2s; } /* Para o botão reset */


.fab-action:hover {
    opacity: 0.9;
    transform: scale(1.1);
}
.fab-action.fab-reset {
    background-color: var(--color-info); /* Cor diferente para reset */
    color: white;
}
html.dark-theme .fab-action.fab-reset {
    background-color: var(--color-info); /* Mantém azul claro */
    color: white;
}

.fab-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-secondary-light);
}

/* --- ESTILOS PAINEL DE ANOTAÇÕES (CENTRADO + SLIDE-DOWN) --- */
.notes-panel {
    position: fixed;
    top: 50%; /* Define o "ponto de âncora" vertical no centro */
    left: 50%;
    
    width: 700px;
    max-width: 90%;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    
    display: flex;
    flex-direction: column;
    max-height: 85vh; /* Limita a altura */

    /* --- ESTADO INICIAL (ESCONDIDO ACIMA) --- */
    /* Começa centralizado horizontalmente, mas 100% da altura da tela ACIMA do centro */
    transform: translate(-50%, -100vh);
    opacity: 0;
    visibility: hidden;

    /* --- TRANSIÇÃO --- */
    /* Anima a transformação (posição Y) e a opacidade */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
                opacity 0.3s ease;
}

.notes-panel.active {
    /* --- ESTADO FINAL (VISÍVEL NO CENTRO) --- */
    /* Move para a posição final centralizada (50% X, 50% Y) */
    transform: translate(-50%, -50%);
    opacity: 1;
    visibility: visible;
}

/* Cabeçalho do Painel */
.notes-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.notes-panel-header h4 {
    margin: 0;
    color: var(--color-primary);
}
.notes-panel-header .close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
    line-height: 1;
}
.notes-panel-header .close-btn:hover {
    color: var(--color-text);
}

/* Conteúdo do Painel */
.notes-panel-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-grow: 1;
    overflow-y: auto; /* Habilita scroll se o conteúdo crescer */
}

/* Textarea */
.notes-panel-content textarea {
    width: 100%;
    min-height: 40vh;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-family: var(--font-family);
    background-color: var(--color-background);
    color: var(--color-text);
    resize: vertical;
}

.notes-panel-content textarea:focus {
    outline: none;
    border-color: var(--color-input-focus-border, var(--color-primary));
    box-shadow: 0 0 0 3px var(--color-input-focus-shadow, rgba(52, 58, 64, 0.2));
}

/* Aviso (Warining) */
.notes-warning {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    background-color: var(--color-background);
    border: 1px dashed var(--color-secondary-light);
    padding: 0.75rem;
    border-radius: var(--border-radius);
    margin: 0;
    flex-shrink: 0;
}


/* --- Estilos do Toggle Switch (Página de Configurações) --- */
.toggle-switch-group {
    border: 1px solid var(--color-border);
    padding: 1rem;
    border-radius: var(--border-radius);
    background-color: var(--color-background);
}
.toggle-switch-group label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
}
.toggle-switch-group .toggle-label-text {
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--color-text);
}
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-border);
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

input:checked + .slider {
    background-color: var(--color-primary);
}
html.dark-theme input:checked + .slider {
    background-color: var(--color-primary-light);
}
input:focus + .slider {
    box-shadow: 0 0 1px var(--color-primary);
}
input:checked + .slider:before {
    transform: translateX(22px);
}

/* --- Estilos do Sino e Badge (Header) --- */
/* (o .icon-btn já existe, mas garantimos a posição) */
.icon-btn {
    position: relative;
}
#unread-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    background-color: var(--color-danger);
    color: white;
    width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    pointer-events: none; /* Não bloquear o clique no sino */
    transition: transform 0.2s ease;
    transform: scale(1);
}
#unread-badge.badge-hidden {
    transform: scale(0);
}

/* --- SIDEBAR EXCLUSIVA DE COMUNICADOS (.comm-sidebar) --- */

/* Estilo Base (Desktop/Geral) - Copiado de .sidebar */
.comm-sidebar {
    position: fixed;
    top: 0;
    right: -470px; /* Começa escondida (largura + margem de segurança) */
    width: 450px;  /* Largura padrão desktop */
    height: 100%;
    background-color: var(--color-surface);
    z-index: 101;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Estado Ativo (Aberta) */
.comm-sidebar.active {
    right: 0;
}

/* Header da Sidebar de Comunicados */
.comm-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.comm-sidebar-header h4 {
    margin: 0;
    color: var(--color-primary);
    font-size: 1.25rem;
}

.comm-sidebar-header .close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
    line-height: 1;
}

/* Conteúdo da Sidebar */
.comm-sidebar-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* --- MODAL DE VÍDEO --- */
.modal-video-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 900px;
    background-color: #000; /* Fundo preto para vídeo */
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    z-index: 10002;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Cabeçalho do Modal de Vídeo */
.modal-video-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: #212529; /* Cor escura para o header */
    color: white;
    border-bottom: 1px solid #333;
}

.modal-video-header .video-title {
    font-size: 0.95rem;
    font-weight: 500;
}

.modal-video-header .video-controls {
    display: flex;
    gap: 10px;
}

/* Botões de Controle (Fechar/Minimizar) */
.video-control-btn {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 4px;
    transition: all 0.2s;
}

.video-control-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.video-control-btn ion-icon {
    font-size: 1.3rem;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Ratio */
    height: 0;
    background-color: #000;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Ajuste do overlay para vídeo (pode reaproveitar .modal-overlay se quiser) */
#video-modal-overlay {
    background-color: rgba(0, 0, 0, 0.85); /* Mais escuro para cinema */
}

/* --- RESPONSIVIDADE (Mobile) --- */
/* AQUI está a mágica que você pediu: 100% de largura apenas nesta sidebar */
@media (max-width: 768px) {
    .comm-sidebar {
        width: 100%; /* Ocupa a tela toda */
        right: -100%; /* Esconde totalmente para a direita */
    }
}

/* --- Estilos da Lista de Comunicados --- */
#communications-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.communication-item {
    display: block;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
    text-decoration: none;
    color: var(--color-text-muted);
    transition: background-color 0.2s;
    position: relative;
}
.communication-item:hover {
    background-color: var(--color-background);
}

.communication-item .comm-title {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-text);
    margin: 0 0 0.25rem 0;
}
.communication-item .comm-preview {
    font-size: 0.9rem;
    margin: 0;
    /* Limita o preview a 3 linhas */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
}
.communication-item .comm-date {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* Estilo de "Não Lido" */
.communication-item.unread {
    background-color: var(--color-background);
    border-left: 4px solid var(--color-primary);
    padding-left: calc(1rem - 3px); /* Ajusta padding */
}
.communication-item.unread .comm-title {
    font-weight: 700;
    color: var(--color-primary);
}
html.dark-theme .communication-item.unread {
    border-left-color: var(--color-primary-light);
}
html.dark-theme .communication-item.unread .comm-title {
    color: var(--color-primary-light);
}


/* --- Estilos do Preview do Markdown --- */
/* 1. Reduz o espaçamento entre parágrafos comuns */
#markdown-preview p,
.summary-page .paper-preview .lyrics-preview p {
    margin-top: 0;
    margin-bottom: 0.75em; /* Reduz a margem padrão (que é ~1em) */
}

/* 2. Reduz o espaçamento entre os itens DENTRO de uma lista */
#markdown-preview li,
.summary-page .paper-preview .lyrics-preview li {
    margin-bottom: 0.3em; /* Adiciona um espaço bem pequeno entre os itens */
}

/* 3. Reduz o espaçamento DEPOIS de um bloco de lista inteiro */
#markdown-preview ul,
#markdown-preview ol,
.summary-page .paper-preview .lyrics-preview ul,
.summary-page .paper-preview .lyrics-preview ol {
    margin-bottom: 1em; /* Garante um espaçamento consistente após a lista */
}

/* 4. Ajusta o espaço abaixo dos títulos para ficar mais coeso */
#markdown-preview h1, #markdown-preview h2, #markdown-preview h3,
#markdown-preview h4, #markdown-preview h5, #markdown-preview h6,
.summary-page .paper-preview .lyrics-preview h1,
.summary-page .paper-preview .lyrics-preview h2,
.summary-page .paper-preview .lyrics-preview h3,
.summary-page .paper-preview .lyrics-preview h4,
.summary-page .paper-preview .lyrics-preview h5,
.summary-page .paper-preview .lyrics-preview h6 {
    margin-bottom: 0.4em; /* Reduz o espaço após um título */
}
#markdown-preview {
    min-height: 100px;
    padding: 1rem;
    background-color: var(--color-background);
    border-radius: var(--border-radius);
    border: 1px dashed var(--color-border);
    text-align: left;
}

/* Garante que imagens dentro do preview e da folha não estourem o container */
#markdown-preview img {
    max-width: 100%;      /* A imagem nunca será maior que a largura do pai */
    height: auto;         /* Mantém a proporção da imagem */
    display: block;       /* Remove comportamentos estranhos de linha */
    margin: 1rem auto;    /* Centraliza a imagem e dá um respiro vertical */
    border-radius: var(--border-radius); /* Mantém o padrão visual arredondado */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Opcional: dá um leve destaque */
}

/* FORÇA o alinhamento à esquerda para os elementos gerados pelo Markdown */
#markdown-preview p,
#markdown-preview ul,
#markdown-preview ol,
#markdown-preview blockquote {
    text-align: left;
}
#markdown-preview p:last-child {
    margin-bottom: 0;
}
#markdown-preview h1,
#markdown-preview h2,
#markdown-preview h3 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.25rem;
}
#markdown-preview ul,
#markdown-preview ol {
    padding-left: 2rem;
    margin-bottom: 1rem;
}
#markdown-preview blockquote {
    border-left: 4px solid var(--color-border);
    padding-left: 1rem;
    margin-left: 0;
    color: var(--color-text-muted);
    font-style: italic;
}
#markdown-preview code {
    background-color: var(--color-border);
    padding: 0.2em 0.4em;
    border-radius: 4px;
}
#markdown-preview pre {
    background-color: var(--color-border);
    padding: 1rem;
    border-radius: var(--border-radius);
    overflow-x: auto;
}

/* Aplica a tabelas na pré-visualização E na página de detalhes final */
#markdown-preview table,
.paper-preview table {
    width: 100%;                     /* Faz a tabela ocupar a largura disponível */
    border-collapse: collapse;         /* Une as bordas das células para um visual limpo */
    margin: 1.5em 0;                 /* Adiciona espaço vertical antes e depois da tabela */
    font-size: 0.95em;               /* Deixa o texto da tabela um pouco menor */
    box-shadow: none;                /* Garante que não herde sombras indesejadas */
}

/* Estilo para todas as células (cabeçalho e corpo) */
#markdown-preview th,
#markdown-preview td,
.paper-preview th,
.paper-preview td {
    border: 1px solid var(--color-border); /* A linha que cria a grade! */
    padding: 0.75em;                       /* Espaçamento interno nas células */
    text-align: left;                      /* Alinha todo o texto à esquerda */
}

/* Estilo específico para as células do cabeçalho */
#markdown-preview th,
.paper-preview th {
    background-color: var(--color-background); /* Fundo sutil para o cabeçalho */
    font-weight: 700;                          /* Texto em negrito */
}

/* Botão de Ajuda Markdown */
#markdown-help-btn {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    line-height: 1.2em;
    text-align: center;
    border-radius: 50%;
    background-color: var(--color-border);
    color: var(--color-text-muted);
    font-weight: bold;
    text-decoration: none;
    margin-left: 0.5rem;
}


/* --- INÍCIO: Estilos para a Página de Ajuda Markdown --- */

.markdown-guide hr.summary-divider {
    margin: 2.5em 0 !important;
}

.syntax-example {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    margin-top: 1rem;
    margin-bottom: 2rem;
    overflow: hidden; /* Garante que os cantos arredondados funcionem */
}

.syntax-example .syntax-header {
    background-color: var(--color-background);
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
}

.syntax-example .syntax-raw {
    padding: 0;
    background-color: var(--color-surface);
    overflow-x: auto;
}

.syntax-example .syntax-raw pre {
    margin: 0;
    padding: 1rem;
    background-color: transparent !important; /* Sobrescreve estilo de #markdown-preview */
    border-radius: 0;
}
.syntax-example .syntax-raw code {
    background-color: transparent !important; /* Sobrescreve estilo de #markdown-preview */
    padding: 0;
}

.syntax-example .syntax-result {
    padding: 1rem;
    background-color: var(--color-surface);
    overflow-x: auto;
}
.syntax-example .syntax-result > *:last-child {
    margin-bottom: 0;
}

/* --- FIM: Estilos para a Página de Ajuda Markdown --- */

/* --- Botão de Compartilhar e Layout do Header --- */

/* Estilo do Botão "Outline" (Borda colorida, fundo transparente) */
.btn-share {
    background-color: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    padding: 0.4rem 0.8rem;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    /* Opcional: Se quiser alinhar um ícone futuro */
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    gap : 0.2rem;
    margin-top: 0.8rem;
}

.btn-share:hover {
    background-color: var(--color-primary);
    color: var(--color-surface); /* Garante contraste ao passar o mouse */
    text-decoration: none;
}

/* Estado de sucesso (quando o link é copiado) */
.btn-share.success {
    border-color: var(--color-success);
    background-color: var(--color-success);
    color: white;
}

/* --- PÁGINA 404 CUSTOMIZADA --- */

.error-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh; /* Garante que ocupe boa parte da tela */
    text-align: center;
    padding: 2rem 1rem;
}

.error-content {
    max-width: 600px;
    background: var(--color-surface); /* Usa a cor de fundo dos seus cards */
    padding: 3rem 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.error-icon {
    position: relative;
    display: inline-block;
    margin-bottom: 1.5rem;
}

.error-icon ion-icon {
    font-size: 6rem;
    color: var(--color-text-muted); /* Cinza suave */
    opacity: 0.5;
}

.error-badge {
    position: absolute;
    bottom: 0;
    right: -10px;
    background-color: var(--color-primary); /* Cor principal do tema */
    color: #fff;
    font-weight: bold;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.error-content h1 {
    font-size: 1.8rem;
    color: var(--color-text-main);
    margin-bottom: 1rem;
}

.error-description {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    line-height: 1.5;
}

.error-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.secondary-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Ajuste para mobile */
@media (max-width: 600px) {
    .secondary-actions {
        flex-direction: column;
        width: 100%;
    }
    .secondary-actions .btn {
        width: 100%;
    }
}