/* Este ficheiro contém o CSS para o plugin Missões Diárias */

/* Importa a fonte Inter do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ===================================
 * VARIÁVEIS CSS - PALETA DE DESIGN MODERNA (TEMA CLARO PADRÃO)
 * ==================================== */
:root {
    /* Cores Principais */
    --medspacy-primary: #3498db; /* Azul */
    --medspacy-primary-hover: #2980b9;
    --medspacy-primary-light: #eaf5fc; /* Azul muito claro */
    --medspacy-secondary: #64748b; /* Cinza azulado */
    --medspacy-success: #2ecc71; /* Verde */
    --medspacy-success-hover: #27ae60;
    --medspacy-danger: #e74c3c; /* Vermelho */
    --medspacy-danger-hover: #c0392b;
    --medspacy-info: #0891b2; /* Ciano */
    --medspacy-warning: #f59e0b; /* Laranja */
    --medspacy-warning-hover: #d97706;

    /* Cores de Status (NOVO) - Baseado na imagem fornecida */
    --medspacy-completed-bg: #2ecc71; /* Verde (cor do sucesso) */
    --medspacy-in-progress-bg: #f59e0b; /* Laranja (cor do aviso) */

    /* Cores de Fundo e Texto (Tema Claro) */
    --medspacy-bg-page: #f8f9fa; /* Fundo geral da página */
    --medspacy-bg-card: #ffffff; /* Fundo de cartões e elementos principais */
    --medspacy-bg-hover: #f1f5f9; /* Fundo para estados de hover/seleção */
    --medspacy-bg-tertiary: #e9ecef; /* Fundo para elementos secundários/agrupamentos */
    --medspacy-text-primary: #2c3e50; /* Texto principal (escuro) */
    --medspacy-text-secondary: #7f8c8d; /* Texto secundário (cinza médio) */
    --medspacy-text-tertiary: #95a5a6; /* Texto terciário (cinza claro) */
    --medspacy-text-light: #ffffff; /* Texto branco para fundos escuros */

    /* Cores de Borda (Tema Claro) */
    --medspacy-border-primary: #ecf0f1;
    --medspacy-border-secondary: #e1e8ed;

    /* Sombras */
    --medspacy-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    --medspacy-shadow-focus: 0 0 0 3px rgba(52, 152, 219, 0.2);
    --medspacy-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
    --medspacy-shadow-strong: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

    /* Fontes e Espaçamento */
    --medspacy-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --medspacy-border-radius: 12px;
    --medspacy-border-radius-lg: 12px;
    --medspacy-border-radius-md: 8px;
    --medspacy-border-radius-sm: 6px;
    --medspacy-spacing-sm: 8px;
    --medspacy-spacing-md: 16px;
    --medspacy-spacing-lg: 24px;
    --medspacy-spacing-xl: 32px;
    --medspacy-spacing-2xl: 48px;

    /* Transitions */
    --medspacy-transition-fast: 0.15s ease;
    --medspacy-transition-normal: 0.2s ease;
    --medspacy-transition-slow: 0.3s ease;
}

/* ===================================
 * MODO ESCURO (DARK MODE) - Ativado pela classe html.dark
 * ==================================== */
html.dark {
    /* Cores Principais */
    --medspacy-primary: #38b6ff; /* Azul mais claro para dark mode */
    --medspacy-primary-hover: #52c1ff;
    --medspacy-primary-light: #1a3a4a; /* Azul escuro muito claro */
    --medspacy-secondary: #a0aec0; /* Cinza azulado mais claro */
    --medspacy-success: #27ae60; /* Verde */
    --medspacy-success-hover: #2ecc71;
    --medspacy-danger: #c0392b; /* Vermelho */
    --medspacy-danger-hover: #e74c3c;
    --medspacy-info: #0ea5e9; /* Ciano */
    --medspacy-warning: #d97706; /* Laranja */
    --medspacy-warning-hover: #f59e0b;

    /* Cores de Status (NOVO) */
    --medspacy-completed-bg: #27ae60; /* Verde (cor do sucesso do dark mode) */
    --medspacy-in-progress-bg: #d97706; /* Laranja (cor do aviso do dark mode) */

    /* Cores de Fundo e Texto (Tema Escuro) */
    --medspacy-bg-page: #1a1a1a; /* Fundo geral da página escuro */
    --medspacy-bg-card: #2c2c2c; /* Fundo de cartões e elementos principais escuro */
    --medspacy-bg-hover: #3a3a3a; /* Fundo para estados de hover/seleção escuro */
    --medspacy-bg-tertiary: #35393F; /* Fundo para elementos secundários/agrupamentos escuro */
    --medspacy-text-primary: #ecf0f1; /* Texto principal (claro) */
    --medspacy-text-secondary: #95a5a6; /* Texto secundário (cinza médio) */
    --medspacy-text-tertiary: #7f8c8d; /* Texto terciário (cinza claro) */
    --medspacy-text-light: #ffffff; /* Texto muito claro (para fundos escuros) */

    /* Cores de Borda (Tema Escuro) */
    --medspacy-border-primary: #3a3a3a;
    --medspacy-border-secondary: #4a4a4a;

    /* Sombras (ajustadas para dark mode) */
    --medspacy-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    --medspacy-shadow-focus: 0 0 0 3px rgba(56, 182, 255, 0.25);
    --medspacy-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.3);
    --medspacy-shadow-strong: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
}


/* ===================================
 * ESTILOS GERAIS E ESTRUTURA
 * ==================================== */
html, body {
    margin: 0;
    padding: 0;
    font-family: var(--medspacy-font-family);
    color: var(--medspacy-text-secondary);
    background-color: var(--medspacy-bg-page); /* Aplica a cor de fundo da página */
    transition: background-color var(--medspacy-transition-normal), color var(--medspacy-transition-normal);
}

.medspacy-container {
    background: transparent; /* O fundo da página já define a cor */
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
}

.panel-section {
    width: 100%;
}

/* ===================================
 * LAYOUT: CABEÇALHO, FILTROS E RESULTADOS
 * ==================================== */

.header { /* Renomeado de .medspacy-header para corresponder ao HTML */
    background: var(--medspacy-bg-card);
    color: var(--medspacy-text-primary);
    border-radius: var(--medspacy-border-radius);
    box-shadow: var(--medspacy-shadow);
    padding: 30px;
    margin-bottom: 30px;
}
.header h1 { /* Renomeado de .medspacy-header h1 */
    font-size: clamp(20px, 5vw, 28px);
    color: var(--medspacy-text-primary);
    margin: 0 0 8px 0;
    font-weight: 700;
}
.header p { /* Renomeado de .medspacy-header p */
    color: var(--medspacy-text-secondary);
    font-size: clamp(14px, 3vw, 16px);
}

.progress-section {
    background: var(--medspacy-bg-card);
    border-radius: 12px;
    box-shadow: var(--medspacy-shadow);
    padding: 20px;
    margin-bottom: 20px;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}

.progress-title {
    font-size: clamp(16px, 4vw, 18px);
    font-weight: 600;
    color: var(--medspacy-text-primary);
}

.progress-stats {
    color: var(--medspacy-text-secondary);
    font-size: clamp(12px, 3vw, 14px);
}

.progress-bar {
    height: 8px;
    background: var(--medspacy-border-secondary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 16px;
}

.progress-fill {
    height: 100%;
    background: var(--medspacy-primary); 
    transition: width var(--medspacy-transition-normal);
}

.streak-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    padding: 16px;
    background: var(--medspacy-bg-tertiary);
    border-radius: 8px;
}

.streak-item {
    text-align: center;
}

.streak-number {
    font-size: clamp(18px, 5vw, 20px);
    font-weight: 700;
    color: var(--medspacy-primary); 
}

.streak-label {
    font-size: clamp(10px, 2.5vw, 12px);
    color: var(--medspacy-text-secondary);
}

.nav-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.nav-button {
    background: var(--medspacy-bg-card);
    border: 2px solid var(--medspacy-border-primary);
    border-radius: 8px;
    padding: 12px 20px;
    cursor: pointer;
    transition: all var(--medspacy-transition-normal);
    color: var(--medspacy-text-secondary);
    font-weight: 500;
    font-size: clamp(12px, 3vw, 14px);
    min-width: 120px;
    text-align: center;
}

.nav-button:hover {
    border-color: var(--medspacy-primary-hover);
    color: var(--medspacy-primary); 
}

.nav-button.active {
    background: var(--medspacy-primary);
    border-color: var(--medspacy-primary);
    color: var(--medspacy-text-light); 
}

.week-container {
    /* background: var(--medspacy-bg-card); */ /* REMOVIDO a pedido do usuário */
    /* border-radius: 12px; */ /* REMOVIDO a pedido do usuário */
    /* box-shadow: var(--medspacy-shadow); */ /* REMOVIDO a pedido do usuário */
    /* padding: 20px; */ /* REMOVIDO a pedido do usuário */
    margin-bottom: 20px;
}

.week-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--medspacy-border-primary);
    flex-wrap: wrap;
    gap: 16px;
}

.week-title {
    font-size: clamp(18px, 4vw, 20px);
    font-weight: 600;
    color: var(--medspacy-text-primary);
}

.week-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 140px;
}

.week-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--medspacy-border-secondary);
    border-radius: 3px;
    overflow: hidden;
    min-width: 80px;
}

.week-progress-fill {
    height: 100%;
    background: var(--medspacy-completed-bg);
    transition: width var(--medspacy-transition-normal);
}

.week-progress-text {
    font-size: clamp(10px, 2.5vw, 12px);
    color: var(--medspacy-text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.days-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.day-card {
    background: var(--medspacy-bg-tertiary);
    border-radius: 8px;
    padding: 16px;
    transition: all var(--medspacy-transition-normal);
}

/* Destaque do dia atual */
.day-card.today {
    background: var(--medspacy-primary-light); /* Fundo azul claro para o dia atual */
    border: 2px solid var(--medspacy-primary); /* Borda da cor primária para destaque */
    box-shadow: var(--medspacy-shadow-focus); /* Sombra de foco */
}

/* Estilo para o card de dia concluído */
.day-card.completed {
    background: var(--medspacy-bg-tertiary); /* Fundo terciário para dias concluídos */
    color: var(--medspacy-text-primary); /* Texto primário para contraste */
    box-shadow: var(--medspacy-shadow); /* Sombra padrão */
    border: 1px solid var(--medspacy-border-primary); /* Borda primária */
}

.day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: nowrap; 
}

.day-title {
    font-size: clamp(14px, 3.5vw, 16px);
    font-weight: 600;
    color: var(--medspacy-text-primary);
    flex-shrink: 0; 
    flex-grow: 0; 
}

/* Ajuste para o título do dia no card completo */
.day-card.completed .day-title {
    color: var(--medspacy-text-primary); 
}

.day-date {
    font-size: clamp(10px, 2vw, 12px); /* Ajustado para ser menor */
    color: var(--medspacy-text-tertiary);
    background: var(--medspacy-bg-card);
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0; 
    flex-grow: 0; 
    margin-left: auto; 
}

/* Ajuste para a data no card completo */
.day-card.completed .day-date {
    background: var(--medspacy-bg-card); 
    color: var(--medspacy-text-secondary); 
}

.topics-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.topic-item {
    background: var(--medspacy-bg-card); /* Fundo padrão para temas não iniciados */
    border: 1px solid var(--medspacy-border-primary);
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    transition: all var(--medspacy-transition-normal);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    flex-wrap: wrap; 
    color: var(--medspacy-text-primary); /* Cor do texto padrão para itens de tópico */
}

.topic-item:hover {
    border-color: var(--medspacy-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--medspacy-shadow-hover);
}

/* Status colors for topics */
.topic-item.in-progress {
    background: var(--medspacy-in-progress-bg);
    border-color: var(--medspacy-in-progress-bg);
    color: var(--medspacy-text-light);
}

.topic-item.completed {
    background: var(--medspacy-completed-bg);
    border-color: var(--medspacy-completed-bg);
    color: var(--medspacy-text-light);
}

/* Expanded topic styling */
.topic-item.expanded {
    grid-column: 1 / -1; 
    margin: 10px 0; 
    padding: 20px;
    flex-direction: column; 
    align-items: stretch; 
    box-shadow: var(--medspacy-shadow-strong);
    z-index: 10; 
}

/* Aplica as cores de status quando o tema está expandido */
.topic-item.expanded.in-progress {
    background: var(--medspacy-in-progress-bg);
    border-color: var(--medspacy-in-progress-bg);
    color: var(--medspacy-text-light);
}
.topic-item.expanded.completed {
    background: var(--medspacy-completed-bg); 
    border-color: var(--medspacy-completed-bg);
    color: var(--medspacy-text-light);
}
/* Se expandido e não iniciado, usa o fundo padrão do card */
.topic-item.expanded:not(.in-progress):not(.completed) {
    background: var(--medspacy-bg-card);
    border-color: var(--medspacy-border-primary);
    color: var(--medspacy-text-primary);
}
/* Ajuste de cor de texto para temas expandidos não iniciados */
.topic-item.expanded:not(.in-progress):not(.completed) .topic-specialty,
.topic-item.expanded:not(.in-progress):not(.completed) .topic-name,
.topic-item.expanded:not(.in-progress):not(.completed) .topic-icon {
    color: var(--medspacy-text-primary);
}


.topic-icon {
    font-size: clamp(14px, 3.5vw, 16px);
    min-width: 20px;
    flex-shrink: 0;
    color: var(--medspacy-text-primary); /* Cor padrão para ícones */
}

/* Ícones em temas in-progress/completed/expanded */
.topic-item.in-progress .topic-icon,
.topic-item.completed .topic-icon,
.topic-item.expanded .topic-icon {
    color: var(--medspacy-text-light);
}


.topic-content {
    flex: 1;
    min-width: 0;
}

.topic-item.expanded .topic-content {
    margin-bottom: 15px; 
}


.topic-specialty {
    font-size: clamp(9px, 2.5vw, 10px);
    color: var(--medspacy-text-tertiary);
    margin-bottom: 2px;
}

/* Text color adjustments for in-progress/completed/expanded states */
.topic-item.in-progress .topic-specialty,
.topic-item.in-progress .topic-name,
.topic-item.completed .topic-specialty, 
.topic-item.completed .topic-name {
    color: var(--medspacy-text-light);
}

.topic-name {
    font-size: clamp(12px, 3vw, 13px);
    font-weight: 500;
    color: var(--medspacy-text-primary);
    word-wrap: break-word;
}

.topic-status {
    font-size: clamp(14px, 3.5vw, 16px);
    flex-shrink: 0;
}

.missions-container {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Linha divisória sutil para fundos coloridos */
    width: 100%; 
}

/* CORREÇÃO: Borda para tema expandido não colorido */
.topic-item.expanded:not(.in-progress):not(.completed) .missions-container {
    border-top: 1px solid var(--medspacy-border-primary);
}

.missions-title {
    font-size: clamp(14px, 3.5vw, 16px);
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit; /* CORREÇÃO: Herda a cor (branco ou escuro) do container pai */
}

.missions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Estilo base para um item de missão (não expandido) */
.mission-item {
    background: var(--medspacy-bg-card);
    border: 1px solid var(--medspacy-border-primary);
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    transition: all var(--medspacy-transition-normal);
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--medspacy-text-primary);
}

.mission-item:hover {
    background: var(--medspacy-bg-hover);
}

/* CORREÇÃO: Estilo para item de missão DENTRO de um tópico expandido */
.topic-item.expanded .mission-item {
    background: transparent; /* Fundo transparente para se integrar */
    border: 1px solid rgba(255, 255, 255, 0.25); /* Borda sutil em fundos coloridos */
    color: inherit; /* Herda a cor do texto */
}

.topic-item.expanded .mission-item:hover {
    background: rgba(0, 0, 0, 0.1); /* Efeito de hover sutil */
}

/* CORREÇÃO: Override para missão em card expandido NÃO colorido */
.topic-item.expanded:not(.in-progress):not(.completed) .mission-item {
    border-color: var(--medspacy-border-primary);
}
.topic-item.expanded:not(.in-progress):not(.completed) .mission-item:hover {
    background: var(--medspacy-bg-hover);
}

.mission-item.completed {
    background: var(--medspacy-bg-tertiary);
    text-decoration: line-through;
    opacity: 0.8;
    color: var(--medspacy-text-secondary);
}

/* CORREÇÃO: Estilo para missão concluída DENTRO de um tópico expandido */
.topic-item.expanded .mission-item.completed {
    background: transparent; /* Sem fundo */
    opacity: 0.6; /* Apenas reduz a opacidade */
    color: inherit; /* Herda a cor do pai (branco nos cards coloridos) */
}

.mission-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--medspacy-text-tertiary); 
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: all var(--medspacy-transition-fast);
}

/* CORREÇÃO: Estilo para checkbox DENTRO de um tópico expandido */
.topic-item.expanded .mission-checkbox {
    border-color: rgba(255, 255, 255, 0.7);
}
.topic-item.expanded:not(.in-progress):not(.completed) .mission-checkbox {
    border-color: var(--medspacy-text-tertiary);
}

.mission-checkbox.checked {
    background: var(--medspacy-primary); 
    border-color: var(--medspacy-primary);
    color: white;
}

/* CORREÇÃO: Estilo para checkbox MARCADO DENTRO de um tópico expandido */
.topic-item.expanded .mission-checkbox.checked {
    background: var(--medspacy-text-light);
    border-color: var(--medspacy-text-light);
    color: var(--medspacy-primary); /* Checkmark azul para destaque */
}
.topic-item.expanded:not(.in-progress):not(.completed) .mission-checkbox.checked {
    background: var(--medspacy-primary);
    border-color: var(--medspacy-primary);
    color: var(--medspacy-text-light);
}

.mission-text {
    font-size: clamp(12px, 3vw, 14px);
    color: var(--medspacy-text-primary); 
    flex: 1;
}

/* CORREÇÃO: Cor do texto da missão DENTRO de um tópico expandido */
.topic-item.expanded .mission-text {
    color: inherit;
}

.mission-icon { /* Estilo para o ícone de link */
    margin-left: auto;
    color: var(--medspacy-primary);
    font-size: 1.2em;
    text-decoration: none; 
    transition: color var(--medspacy-transition-fast);
}
.mission-icon:hover {
    color: var(--medspacy-primary-hover);
}

/* CORREÇÃO: Ícone de link DENTRO de um tópico expandido */
.topic-item.expanded .mission-icon {
    color: inherit;
    opacity: 0.7;
}
.topic-item.expanded .mission-icon:hover {
    color: inherit;
    opacity: 1;
}


.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.2); 
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    font-size: 18px;
    transition: all var(--medspacy-transition-normal);
    z-index: 1; 
}

.close-button:hover {
    background: rgba(0, 0, 0, 0.4);
    transform: scale(1.1);
}

/* CORREÇÃO: Botão de fechar em card expandido NÃO colorido */
.topic-item.expanded:not(.in-progress):not(.completed) .close-button {
    color: var(--medspacy-text-secondary);
    background: var(--medspacy-bg-tertiary);
}
.topic-item.expanded:not(.in-progress):not(.completed) .close-button:hover {
    color: var(--medspacy-text-primary);
    background: var(--medspacy-border-secondary);
}

.missions-progress {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--medspacy-border-primary);
}

/* CORREÇÃO: Progresso da missão DENTRO de um tópico expandido */
.topic-item.expanded .missions-progress {
    border-top-color: rgba(255, 255, 255, 0.2);
}
.topic-item.expanded:not(.in-progress):not(.completed) .missions-progress {
    border-top-color: var(--medspacy-border-primary);
}


.missions-progress-text {
    font-size: clamp(12px, 3vw, 14px);
    color: var(--medspacy-text-secondary);
    text-align: center;
}

/* CORREÇÃO: Texto de progresso da missão DENTRO de um tópico expandido */
.topic-item.expanded .missions-progress-text {
    color: inherit;
    opacity: 0.8;
}

.complete-topic-button {
    margin-top: 16px;
    background: var(--medspacy-primary);
    border: none;
    color: var(--medspacy-text-light);
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all var(--medspacy-transition-normal);
    width: 100%;
    font-size: clamp(12px, 3vw, 14px);
}

.complete-topic-button:hover {
    background: var(--medspacy-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--medspacy-shadow-hover);
}

/* CORREÇÃO: Botão de concluir DENTRO de um tópico expandido */
.topic-item.expanded .complete-topic-button {
    background: rgba(255, 255, 255, 0.9);
    color: var(--medspacy-primary);
}
.topic-item.expanded .complete-topic-button:hover {
    background: white;
}
.topic-item.expanded:not(.in-progress):not(.completed) .complete-topic-button {
    background: var(--medspacy-primary);
    color: var(--medspacy-text-light);
}
.topic-item.expanded:not(.in-progress):not(.completed) .complete-topic-button:hover {
    background: var(--medspacy-primary-hover);
}


.complete-topic-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* CORREÇÃO: Botão de concluir DESABILITADO DENTRO de um tópico expandido */
.topic-item.expanded .complete-topic-button:disabled {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(255, 255, 255, 0.7);
}
.topic-item.expanded:not(.in-progress):not(.completed) .complete-topic-button:disabled {
    background: var(--medspacy-bg-tertiary);
    border-color: var(--medspacy-border-primary);
    color: var(--medspacy-text-tertiary);
}


/* Estilo para a mensagem de Dia de Descanso */
.day-card .rest-day-message {
    text-align: center;
    padding: 20px;
    color: var(--medspacy-text-primary); 
    font-size: 1.2em;
    font-weight: 600;
}

.day-card .rest-day-message p {
    font-size: 0.8em;
    color: var(--medspacy-text-secondary);
    margin-top: 5px;
}

/* ===================================
 * RESPONSIVIDADE
 * ==================================== */
@media (max-width: 768px) {
    body {
        padding: 5px;
    }

    .days-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .progress-header,
    .week-header {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .nav-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .nav-button {
        min-width: unset;
    }

    .week-progress {
        justify-content: space-between;
        min-width: unset;
    }

    .topic-item.expanded {
        margin: 0 -20px; /* Adjust margin to fill screen on mobile */
        border-radius: 0;
    }
}

@media (max-width: 480px) {
    .header {
        padding: 15px;
    }

    .progress-section,
    .week-container {
        padding: 15px;
    }

    .streak-info {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .topic-item.expanded {
        margin: 0 -15px;
    }
}