/**
 * @file style.css
 * @description Folha de estilos principal da aplicação.
 * Utiliza uma abordagem com variáveis CSS implícitas (através de classes) e TailwindCSS para
 * um design responsivo e com suporte a tema claro/escuro (dark mode).
 */

/* --- Configuração Base --- */
body {
    font-family: 'Inter', sans-serif;
}

/* --- Seção de Estilos dos Cards de Disciplina --- */

/* Estilo base para todos os cards */
.subject-card {
    transition: all 0.2s ease-in-out;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem;
    width: 100%;
    box-sizing: border-box;
}

/* * Estilos de Estado (Modo Claro)
 * O uso de `!important` aqui é uma decisão pragmática para garantir que os estilos
 * de estado (ex: concluído, pode cursar) sempre se sobreponham aos estilos de highlight
 * (hover), que são aplicados dinamicamente via JavaScript.
 */
.subject-card.planned { background-color: #fefce8 !important; border-color: #facc15 !important; }
.subject-card.can-take { background-color: #dcfce7 !important; border-color: #4ade80 !important; }
.subject-card.completed { background-color: #6b7280 !important; border-color: #4b5563 !important; color: white !important; }
/* INÍCIO DA MODIFICAÇÃO - MODO CLARO */
.subject-card.completed-equivalent { background-color: #1e3a8a !important; border-color: #1e40af !important; color: white !important; }
/* FIM DA MODIFICAÇÃO - MODO CLARO */
.subject-card.locked { background-color: #f3f4f6 !important; border-color: #d1d5db !important; color: #9ca3af; opacity: 0.7; cursor: not-allowed; }
.subject-card.elective { border-style: dashed !important; }

/* Adicione esta nova classe */
.subject-card.planned-past {
    color: white; /* Garante que o texto seja legível em um fundo colorido */
    /* Note que não definimos um background-color aqui, ele será injetado pelo JS */
}

/* * Estilos de Highlight de Requisitos (Modo Claro)
 * Aplicados ao passar o mouse ou tocar em um card.
 */
.subject-card.is-hover-origin { z-index: 10; transform: scale(1.05); background-color: #fef9c3 !important; border-color: #fde047 !important; color: #000000 !important; }
.subject-card.is-hover-origin h3 { color: #000000 !important; }
.subject-card.highlight-prereq { background-color: #c7d2fe !important; border-color: #818cf8 !important; color: #1e1b4b !important; }
.subject-card.highlight-coreq { background-color: #f5d0fe !important; border-color: #e879f9 !important; color: #4a044e !important; }
.subject-card.highlight-direct-dependent { background-color: #fecaca !important; border-color: #f87171 !important; color: #7f1d1d !important; }
.subject-card.highlight-prereq h3, .subject-card.highlight-coreq h3, .subject-card.highlight-direct-dependent h3 { color: inherit !important; }


/* --- Seção Dark Mode --- */
.dark body { background-color: #111827; color: #d1d5db; }
.dark .panel { background-color: #1f2937; border-color: #374151; }
.dark h1, .dark h2, .dark p, .dark label, .dark span, .dark h3, .dark h4 { color: #d1d5db; }
.dark .text-muted { color: #9ca3af; }

/* Estilos de Estado (Modo Escuro) */
.dark .subject-card.planned { background-color: #5a4a00 !important; border-color: #eab308 !important; }
.dark .subject-card.can-take { background-color: #0a3a2a !important; border-color: #4ade80 !important; }
/* INÍCIO DA MODIFICAÇÃO - MODO ESCURO */
.dark .subject-card.completed-equivalent { background-color: #1e40af !important; border-color: #60a5fa !important; color: #eff6ff !important; }
/* FIM DA MODIFICAÇÃO - MODO ESCURO */
.dark .subject-card.locked { background-color: #1f2937 !important; border-color: #374151 !important; color: #6b7280 !important; opacity: 0.7; }
.dark .subject-card.elective { border-color: #71717a; }

/* Estilos de Highlight (Modo Escuro) */
.dark .subject-card.is-hover-origin { background-color: #4a4429 !important; border-color: #fde047 !important; color: #f9fafb !important; }
.dark .subject-card.is-hover-origin h3 { color: #f9fafb !important; }
.dark .subject-card.highlight-prereq { background-color: #2c2a5c !important; border-color: #818cf8 !important; color: #e0e7ff !important; }
.dark .subject-card.highlight-coreq { background-color: #512758 !important; border-color: #e879f9 !important; color: #fdf4ff !important; }
.dark .subject-card.highlight-direct-dependent { background-color: #5c2121 !important; border-color: #f87171 !important; color: #fee2e2 !important; }
.dark .subject-card.highlight-prereq h3, .dark .subject-card.highlight-coreq h3, .dark .subject-card.highlight-direct-dependent h3 { color: inherit !important; }

/* Estilos de Componentes Específicos (Modo Escuro) */
.dark .border-t { border-color: #374151 !important; }
.dark .h-6.w-px { background-color: #4b5563; }
.dark #planning-controls { background-color: #1f2937; border-color: #374151; }
.dark #current-semester-input { background-color: #1f2937; border-color: #374151; color: #d1d5db; }
.dark #ppc-selector { background-color: #374151; border-color: #4b5563; color: #d1d5db; }
.dark #viewToggle, .dark #textToggle, .dark #theme-toggle, .dark #helpButton, .dark #legend-trigger, .dark #summaryButton { background-color: #374151; color: #d1d5db; }
.dark #viewToggle:hover, .dark #textToggle:hover, .dark #theme-toggle:hover, .dark #helpButton:hover, .dark #legend-trigger:hover, .dark #summaryButton:hover { background-color: #4b5563; }
.dark .summary-box { background-color: #1f2937; }
.dark .summary-box span:last-child { color: #9ca3af; }
.dark .mobile-period-header { background-color: #1f2937; }



/* --- Seção de Componentes UI --- */

/* Tag de semestre planejado sobreposta ao card */
.semester-tag {
    position: absolute;
    top: -1px;
    right: -1px;
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 0 6px 0 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Notificações (Toast) */
#toast-notification, #hover-toast {
    opacity: 0;
    transition: all 0.3s ease-in-out;
    position: fixed;
    z-index: 1001;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 12px 20px;
}
#toast-notification {
    top: 20px;
    right: 20px;
    transform: translateY(-40px) translateX(20px);
}
#hover-toast {
    top: 20px;
    left: 50%;
    transform: translate(-50%, -80px);
    pointer-events: none; /* O toast não pode ser clicado */
    white-space: nowrap;
    background-color: #1f2937;
    color: #f9fafb;
}
.dark #hover-toast {
    background-color: #f9fafb;
    color: #1f2937;
}

#toast-notification.show { transform: translateY(0) translateX(0); opacity: 1; }
#hover-toast.show { transform: translate(-50%, 0); opacity: 1; }


/* Layout para Dispositivos Móveis */
.mobile-period-row {
    display: flex;
    align-items: stretch;
    margin-bottom: 0.5rem;
}
.mobile-period-header {
    flex-shrink: 0;
    writing-mode: vertical-rl; /* Escreve o texto na vertical */
    transform: rotate(180deg);   /* Gira o texto para a orientação correta */
    padding: 0.5rem 0.25rem;
    font-weight: 600;
    border-radius: 8px 0 0 8px;
    text-align: center;
    cursor: pointer;
    background-color: #e5e7eb;
}
.mobile-cards-container {
    display: flex;
    overflow-x: auto; /* Permite scroll horizontal */
    padding: 0.5rem;
    flex-grow: 1;
    gap: 0.5rem;
    -webkit-overflow-scrolling: touch; /* Melhora a experiência de scroll em iOS */
}

/* Animação do Spinner de Exportação PDF */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.exporting #export-spinner {
    display: inline-block !important;
    animation: spin 1s linear infinite;
}
.exporting .export-icon {
    display: none !important;
}

/* Estilos Específicos para Modais (Ajuda e Resumo) */
#helpModal .modal-content-text, #summaryModal .modal-content-text {
    color: #374151; /* cinza-escuro no modo claro */
}
.dark #helpModal .modal-content-text, .dark #summaryModal .modal-content-text {
    color: #d1d5db; /* cinza-claro no modo escuro */
}
#helpModal .modal-highlight {
    color: #111827; /* preto no modo claro */
}
.dark #helpModal .modal-highlight {
    color: #f9fafb; /* branco no modo escuro */
}
/**
 * --- Estilos para o Toggle Switch de PPC ---
 * Cria um componente de switch customizado, redondo e animado.
 */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    background-color: #e5e7eb; /* cinza-200 */
    border-radius: 9999px; /* Efeito de pílula */
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dark .toggle-switch {
    background-color: #374151; /* cinza-700 */
}

/* Rótulos de texto (PPC 2012, PPC 2023) */
.toggle-label {
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    padding: 2px 12px;
    z-index: 1; /* Fica acima do "handle" */
    transition: color 0.2s ease;
    user-select: none; /* O texto não pode ser selecionado */
}

/* O "círculo" ou "pílula" que desliza */
.toggle-handle {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px); /* Metade do espaço, com ajuste */
    height: calc(100% - 8px);
    background-color: white;
    border-radius: 9999px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Animação suave */
}

.dark .toggle-handle {
    background-color: #4b5563; /* cinza-600 */
}

/* --- Lógica do Estado "Checked" --- */

/* Quando o input escondido está "checked", move o handle para a direita */
#ppc-toggle-input:checked + .toggle-switch .toggle-handle {
    transform: translateX(calc(100%));
}

/* Ajusta a cor do texto para o estado ativo/inativo */
#ppc-toggle-input:not(:checked) + .toggle-switch .toggle-label:nth-of-type(2) {
    color: #4b5563; /* cinza-600 */
}
#ppc-toggle-input:checked + .toggle-switch .toggle-label:nth-of-type(1) {
    color: #4b5563; /* cinza-600 */
}
.dark #ppc-toggle-input:not(:checked) + .toggle-switch .toggle-label:nth-of-type(2) {
    color: #9ca3af; /* cinza-400 */
}
.dark #ppc-toggle-input:checked + .toggle-switch .toggle-label:nth-of-type(1) {
    color: #9ca3af; /* cinza-400 */
}
/**
 * ==================================================================
 * CORREÇÕES DEFINITIVAS DE TEMA (CLARO/ESCURO)
 * ==================================================================
 * Este bloco garante que os componentes interativos e modais tenham
 * as cores corretas tanto no modo claro (padrão) quanto no escuro.
 */

/* --- Estilos para o MODO CLARO (Padrão) --- */

/* Input de semestre e painel de planejamento */
#current-semester-input,
#planning-controls {
    background-color: #f9fafb; /* Cinza bem claro (bg-gray-50) */
    color: #1f2937;            /* Texto escuro */
    border-color: #d1d5db;     /* Borda cinza */
}

/* Modais e Popovers */
#legend-popover,
#helpModal .panel,
#summaryModal .panel {
    background-color: #ffffff; /* Fundo branco */
    color: #374151;            /* Texto principal cinza-escuro */
    border-color: #d1d5db;     /* Borda cinza */
}

/* Títulos e textos de destaque dentro dos modais */
#helpModal .modal-highlight,
#summaryModal .border-b,
#summaryModal h2 {
    color: #111827;            /* Destaques em preto */
    border-color: #e5e7eb;     /* Divisores cinza claro */
}


/* --- Estilos para o MODO ESCURO (Overrides) --- */
/* Estas regras SÓ se aplicam quando a classe .dark está ativa */

.dark #current-semester-input,
.dark #planning-controls {
    background-color: #1f2937; /* Fundo do painel escuro */
    color: #d1d5db;            /* Texto claro */
    border-color: #374151;     /* Borda mais escura */
}

.dark #legend-popover,
.dark #helpModal .panel,
.dark #summaryModal .panel {
    background-color: #1f2937; /* Fundo do painel escuro */
    color: #d1d5db;            /* Texto claro */
    border-color: #374151;     /* Borda mais escura */
}

.dark #helpModal .modal-highlight,
.dark #summaryModal .border-b,
.dark #summaryModal h2 {
    color: #f9fafb;            /* Destaques em branco */
    border-color: #374151;     /* Divisores escuros */
}

/* Garante que o texto dos botões de ação dos modais seja branco */
#closeHelpModal, #closeSummaryModal {
    color: #ffffff;
}
/**
 * ==================================================================
 * Correção de Cor para Detalhes do Resumo
 * ==================================================================
 */

/* Define a cor do texto para o modo claro (padrão) */
.summary-details {
    color: #4b5563; /* Cinza escuro (text-gray-600), bom contraste */
}

/* Define a cor do texto para o modo escuro */
.dark .summary-details {
    color: #9ca3af; /* Cinza claro (text-gray-400), para informação secundária */
}

/**
 * ==================================================================
 * Estilo do Rodapé de Créditos
 * ==================================================================
 */

#app-footer {
    width: 100%;
    text-align: center;
    padding-top: 1.5rem; /* Espaçamento acima do texto */
    padding-bottom: 0.5rem; /* Espaçamento abaixo do texto */
    font-size: 0.7rem;
    color: #9ca3af;
}

/* Ajusta a cor do texto para melhor leitura no modo escuro */
.dark #app-footer {
    color: #6b7280; /* Cor cinza um pouco mais escura para o fundo escuro */
}

/* Adicione ao final de style.css */

@keyframes pulse-red {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
}

.subject-card.highlight-dependency-alert {
    background-color: #fecaca !important; /* red-200 */
    border-color: #ef4444 !important; /* red-500 */
    color: #991b1b !important; /* red-800 */
    animation: pulse-red 2s infinite;
}

.dark .subject-card.highlight-dependency-alert {
    background-color: #450a0a !important; /* red-950 */
    border-color: #f87171 !important; /* red-400 */
    color: #fecaca !important; /* red-200 */
}

/**
 * ==================================================================
 * Estilos da Timeline de Planejamento (v10.5)
 * ==================================================================
 */
.semester-timeline-container {
    display: flex;
    align-items: left;
    gap: 0.5rem; /* 8px */
    padding-bottom: 0.25rem; /* 4px */
    overflow-x: auto; /* Permite scroll horizontal em telas pequenas */
}

.semester-tab, .add-semester-btn {
    padding: 0.5rem 1rem; /* 8px 16px */
    border-radius: 9999px; /* Formato de pílula */
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    white-space: nowrap; /* Impede que o texto quebre linha */
    border: 2px solid transparent;
}

.semester-tab {
    background-color: #e5e7eb; /* gray-200 */
    color: #4b5563; /* gray-600 */
}

.dark .semester-tab {
    background-color: #374151; /* gray-700 */
    color: #d1d5db; /* gray-300 */
}

/* Estilo da aba ativa */
.semester-tab.active {
    background-color: #3b82f6; /* blue-500 */
    color: white;
    border-color: #93c5fd; /* blue-300 */
}

.dark .semester-tab.active {
    background-color: #60a5fa; /* blue-400 */
    color: #1e3a8a; /* blue-900 */
    border-color: #1d4ed8; /* blue-700 */
}

/* Estilo do botão de adicionar semestre */
.add-semester-btn {
    background-color: #10b981; /* green-500 */
    color: white;
}
.dark .add-semester-btn {
    background-color: #34d399; /* green-400 */
    color: #064e3b; /* green-900 */
}


/**
 * ==================================================================
 * Melhorias de UI (v10.5.3)
 * ==================================================================
 */

/* --- Estilo das Abas de Fichário --- */
#view-planejamento {
    border: 1px solid #d1d5db;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding-top: 0.5rem;
    background-color: #f9fafb;
}
.dark #view-planejamento {
    border-color: #374151;
    background-color: #1f2937;
}

#semester-timeline {
    border-bottom: 1px solid #d1d5db;
    padding: 0 0.5rem;
}
.dark #semester-timeline {
    border-color: #374151;
}

#semester-timeline .semester-tab, 
#semester-timeline .add-semester-btn {
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 2px;
    border-radius: 5px 5px 0 0 !important;
    margin-bottom: -1px;
    border: 1px solid #d1d5db;
    border-bottom-color: #f9fafb;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.dark #semester-timeline .semester-tab, 
.dark #semester-timeline .add-semester-btn {
    border-color: #374151;
    border-bottom-color: #1f2937;
}

#semester-timeline .semester-tab.active {
    position: relative;
    z-index: 2;
    transform: translateY(-1px);
    filter: brightness(1.1);
    border-bottom-color: inherit;
}

#semester-timeline .add-semester-btn { background-color: #e5e7eb; }
.dark #semester-timeline .add-semester-btn { background-color: #374151; }
#semester-timeline .add-semester-btn:hover { background-color: #d1d5db; }
.dark #semester-timeline .add-semester-btn:hover { background-color: #4b5563; }


/* --- Animação de Pulse --- */
@keyframes pulse-yellow { 0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(250, 204, 21, 0); } 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); } }
/* --- Novas Animações de Pulse (uma para cada cor da paleta) --- */
/* As cores são baseadas no array SEMESTER_COLORS do config.js */
@keyframes pulse-red    { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
@keyframes pulse-blue   { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } }
@keyframes pulse-green  { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }
@keyframes pulse-orange { 0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0); } 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); } }
@keyframes pulse-purple { 0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); } }
@keyframes pulse-pink   { 0% { box-shadow: 0 0 0 0 rgba(219, 39, 119, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(219, 39, 119, 0); } 100% { box-shadow: 0 0 0 0 rgba(219, 39, 119, 0); } }
/* Adicione mais @keyframes se a paleta de cores for expandida */

/* --- Classes que aplicam as animações --- */
.pulse-red    { animation: pulse-red 2s infinite; }
.pulse-blue   { animation: pulse-blue 2s infinite; }
.pulse-green  { animation: pulse-green 2s infinite; }
.pulse-orange { animation: pulse-orange 2s infinite; }
.pulse-purple { animation: pulse-purple 2s infinite; }
.pulse-pink   { animation: pulse-pink 2s infinite; }

/* Aplicações da animação */
.subject-card.planned { animation: pulse-yellow 2s infinite; }
#semester-timeline .semester-tab.active { animation: pulse-blue 2s infinite; }

/* (NOVO v10.5.3) Animação para o botão de finalizar quando ativo */
#exit-planning-btn.active-planning {
    animation: pulse-green 2s infinite;
}

/* (NOVO v10.5.3) Estilo para botões inativos */
.inactive-btn {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== v11.1: ESTILOS PARA O NOVO LAYOUT DA INTERFACE ===== */

/* Garante que o corpo da página tenha um espaçamento no topo 
   para não ficar escondido atrás do cabeçalho e da barra de ferramentas fixos.
   A altura exata pode precisar de ajuste fino. */
body {
    padding-top: 130px; /* 82px para o header + 48px para a toolbar */
}

/* ===== ESTILOS PARA A NOVA TIMELINE MINIMALISTA ===== */

/* Contêiner da timeline na barra de ferramentas */
#toolbar-timeline {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #9ca3af #e5e7eb;
}
.dark #toolbar-timeline {
    scrollbar-color: #6b7280 #374151;
}

/* Estilo base para os botões da timeline */
.timeline-semester-btn, .add-semester-btn { /* .add-semester-btn mantém a classe antiga para o JS */
    flex-shrink: 0;
    padding: 0.3rem 0.8rem;
    border-radius: 9999px; /* Formato de pílula */
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
}

/* Botão de semestre inativo */
.timeline-semester-btn {
    background-color: #e5e7eb; /* gray-200 */
    color: #4b5563; /* gray-600 */
}
.dark .timeline-semester-btn {
    background-color: #374151; /* gray-700 */
    color: #d1d5db; /* gray-300 */
}
.timeline-semester-btn:not(.active):hover {
    filter: brightness(0.95);
}

/* --- Estilos da Barra Inferior --- */
#bottom-bar {
    display: none; /* Inicia oculto por padrão */
    height: 64px;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.07);
    /*display: flex;*/
    justify-content: space-around;
    align-items: center;
    z-index: 50;
}
.dark #bottom-bar {
    background: #1f2937;
    border-top-color: #374151;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.18);
}
/* Nova regra para exibir a barra apenas na visualização mobile */
body.mobile-view #bottom-bar {
    display: flex; /* Exibe a barra quando a classe 'mobile-view' está presente */
}
#bottom-bar button {
    flex: 1 1 0;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    transition: background 0.2s;
    padding: 0.5rem 0.25rem;
    font-size: 0.85rem;
}
#bottom-bar button:active {
    background: #f3f4f6;
}
.dark #bottom-bar button:active {
    background: #374151;
}
/*#bottom-bar svg {
    display: block;
    margin: 0 auto;
}*/
#bottom-bar .text-xs {
    font-size: 0.75rem;
    margin-top: 2px;
    text-align: center;
}

/* Adicione espaço inferior para não sobrepor conteúdo */
body {
    padding-bottom: 80px; /* espaço para a barra inferior */
}

/* --- Guias Visuais de Modo (Acompanhamento e Planejamento) --- */
.guide-overlay {
    display: none; /* Escondido por padrão */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(249, 250, 251, 0.85); /* bg-gray-50 com opacidade */
    z-index: 20;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.dark .guide-overlay {
    background-color: rgba(17, 24, 39, 0.85); /* dark:bg-gray-900 com opacidade */
}

.guide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 2rem;
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    color: #1f2937;
    border: 1px solid #e5e7eb; /* Borda sutil */
}

.dark .guide-content {
    background-color: #1f2937; /* dark:bg-gray-800 */
    color: #d1d5db; /* dark:text-gray-300 */
    border-color: #374151; /* dark:border-gray-700 */
}

/* --- Lógica de Visibilidade --- */

/* Mostra o guia de planejamento quando o body tem a classe .is-planning */
body.is-planning #planning-mode-guide {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mostra o guia de acompanhamento por padrão, mas o esconde se .is-planning ou .hide-tracking-guide estiverem presentes */
body:not(.is-planning):not(.hide-tracking-guide) #tracking-mode-guide {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Estilos do Ícone da Aplicação (Etapa 1) --- */
#app-icon path {
    stroke: none; /* Remove a borda padrão do SVG */
}

/* Colorindo cada um dos 4 quadrados do ícone */
#app-icon path:nth-child(1) { fill: #60a5fa; stroke: #3b82f6; stroke-width: 0.5;}
#app-icon path:nth-child(2) { fill: #f87171; stroke: #ef4444; stroke-width: 0.5;}
#app-icon path:nth-child(3) { fill: #4ade80; stroke: #3bb166; stroke-width: 0.5;}
#app-icon path:nth-child(4) { fill: #facc15; stroke: #eab308; stroke-width: 0.5;}

body.dark-mode #app-icon path:nth-child(1) { fill: #3b82f6; stroke: #60a5fa;}
body.dark-mode #app-icon path:nth-child(2) { fill: #3b82f6; stroke: #60a5fa;}
body.dark-mode #app-icon path:nth-child(3) { fill: #4ade80; stroke: #3bb166;}
body.dark-mode #app-icon path:nth-child(4) { fill: #eab308; stroke: #facc15;}


/* --- Estilos do Menu Hamburger (Etapa 2) --- */
.mobile-menu-panel {
    position: fixed;
    top: 70px; /* Altura do cabeçalho */
    right: 0;
    width: 250px;
    background-color: #f8fafc; /* Cor de superfície MD3 (claro) */
    border-left: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    border-bottom-left-radius: 16px; /* Canto arredondado MD3 */
    box-shadow: -5px 5px 15px rgba(0,0,0,0.1);
    padding: 1rem;
    
    /* Estado inicial (escondido) */
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, visibility 0.3s;
}

.dark .mobile-menu-panel {
    background-color: #2c313a; /* Cor de superfície MD3 (escuro) */
    border-left-color: #4a5568;
    border-bottom-color: #4a5568;
}

/* Estado visível */
.mobile-menu-panel.is-open {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px */
    padding: 0.75rem;
    border-radius: 9999px; /* Formato de pílula */
    font-weight: 500;
    color: #334155; /* Cor de texto sobre a superfície */
    transition: background-color 0.2s ease;
    text-decoration: none;
}

.dark .mobile-menu-item {
    color: #e2e8f0;
}

.mobile-menu-item:hover {
    background-color: #e2e8f0; /* Efeito hover sutil */
}

.dark .mobile-menu-item:hover {
    background-color: #4a5568;
}

/* --- Estilos do Menu FAB (Etapa 3) --- */
/* Removido conforme solicitado */

/* --- Ajuste nos Estilos da Timeline --- */

/* Ajusta o estilo base para usar flexbox para centralização vertical */
.timeline-semester-btn {
    display: flex; /* Adicionado */
    align-items: center; /* Adicionado */
    justify-content: center; /* Adicionado */
    height: 20px; /* Adicionado para consistência */
    padding: 0 0.8rem; /* Apenas padding horizontal agora */
}

/* Remove o box-shadow estático do estado ativo, pois a animação cuidará disso */
.timeline-semester-btn.active {
    color: white;
    transform: scale(1.01); /* Mantém o efeito de zoom */
    box-shadow: none; /* Removido o box-shadow estático */
}

/* Garante que o dark mode não tenha um box-shadow estático também */
.dark .timeline-semester-btn.active {
    box-shadow: none;
}