/* Estilo visual CDE (Common Desktop Environment) */

/* Cores do tema CDE */
:root {
    --cde-bg: #cccccc;
    --cde-light-gray: #d9d9d9;
    --cde-dark-gray: #999999;
    --cde-border-light: #ffffff;
    --cde-border-dark: #666666;
    --cde-text: #000000;
    --cde-link: #0000ff;
}

/* Base do corpo e fundo */
body {
    background-color: var(--cde-bg);
    color: var(--cde-text);
    font-family: monospace, sans-serif;
    max-width: 1024px;
    margin: 0 auto;
    padding: 10px;
    border: 2px solid var(--cde-text);
    box-shadow: 2px 2px 0 0 var(--cde-dark-gray), 
                4px 4px 0 0 var(--cde-border-dark);
    /* PROPRIEDADES DE LAYOUT PARA FIXAÇÃO/SCROLLING */
    /*display: flex; /* Habilita o layout flexível */
    /*flex-direction: column; /* Organiza os filhos (header, main, footer) verticalmente */
    /* FIM DAS PROPRIEDADES DE LAYOUT */
}

/* Efeito 3D para blocos */
main, header, footer, ul, li {
    border-top: 1px solid var(--cde-border-light);
    border-left: 1px solid var(--cde-border-light);
    border-right: 1px solid var(--cde-border-dark);
    border-bottom: 1px solid var(--cde-border-dark);
}

/* Estilo para links */
a {
    color: var(--cde-link);
    text-decoration: underline;
}

/* Cabeçalho e navegação */
header {
       background-color: var(--cde-light-gray);
    margin-bottom: 0; /* Removendo margem para colar no topo do main */
    padding: 5px;
    /*top: 0; /* Posição para fixar */
    /*z-index: 10; /* Garante que fique acima de outros elementos */
}
header h1 {
    font-size: 1.5rem;
    margin: 0;
    padding: 0;
    color: var(--cde-text);
}
nav ul {
    list-style-type: none;
    margin: 5px 0 0 0;
    padding: 0;
    background-color: var(--cde-bg);
}
nav ul li {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 5px;
    background-color: var(--cde-light-gray);
}
nav ul li a {
    text-decoration: none;
}

/* Conteúdo principal */
main {
    background-color: var(--cde-light-gray);
    padding: 15px;
    margin-bottom: 10; /* Removendo margem para conectar ao footer */
    /*overflow-y: auto; /* Permite que apenas o conteúdo principal role se necessário */
    /*flex-grow: 1; /* Ocupa todo o espaço restante entre header e footer */
}
main p, main ul, main li {
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 10px 0;
}
main img {
    border: 1px solid var(--cde-text);
}

/* Rodapé */
footer {
    /* ... [Propriedades existentes] ... */
    /*position: sticky; /* Tenta fixar o footer no final */
    /*bottom: 0; /* Posição para fixar */
    /*z-index: 10; */
    margin-top: 20px;
}

/* Modo Escuro (simula o tema do CDE de forma simplificada) */
@media (prefers-color-scheme: dark) {
    :root {
        --cde-bg: #404040;
        --cde-light-gray: #505050;
        --cde-dark-gray: #303030;
        --cde-border-light: #606060;
        --cde-border-dark: #202020;
        --cde-text: #ffffff;
        --cde-link: #cccccc;
    }
}
/* --- Estilos para Botões de Janela CDE --- */

/* Contêiner da Barra de Título */
.cde-titlebar {
    /* Cor de fundo da barra de título CDE */
    background-color: #00008b; /* Azul marinho CDE */
    color: var(--cde-border-light); /* Texto branco */
    padding: 2px 5px;
    overflow: hidden; /* Limpa os floats internos */
 
    justify-content: space-between;

    font-weight: bold;
    font-size: 0.8rem;
    
    /* Simula a borda da janela */
    border-top: 1px solid var(--cde-border-light);
    border-left: 1px solid var(--cde-border-light);
    border-right: 1px solid var(--cde-border-dark);
    border-bottom: 1px solid var(--cde-border-dark);
}

/* Contêiner dos Botões (Min/Max/Close) */
.cde-buttons {
float: right; 
}

/* Estilo Base do Botão */
.cde-btn {
    width: 15px;
    height: 15px;
    cursor: default; /* Remove o ponteiro de link */
    
    /* Efeito de Borda 3D "Levantada" */
    background-color: var(--cde-light-gray);
    border-top: 1px solid var(--cde-border-light);
    border-left: 1px solid var(--cde-border-light);
    border-right: 1px solid var(--cde-border-dark);
    border-bottom: 1px solid var(--cde-border-dark);
    
    /* Usa inline-block para que os botões fiquem lado a lado */
    display: inline-block; 
    /* Adiciona margem entre os botões (substituindo o 'gap' Grade C) */
    margin-left: 3px; 
    
    /* Centraliza o conteúdo (o ícone) */
    justify-content: center;
    align-items: center;
    line-height: 1; /* Para melhor alinhamento vertical */
}

/* Efeito Hover (Botão Pressionado) */
.cde-btn:hover {
    /* Inverte as bordas para simular o clique */
    border-top: 1px solid var(--cde-border-dark);
    border-left: 1px solid var(--cde-border-dark);
    border-right: 1px solid var(--cde-border-light);
    border-bottom: 1px solid var(--cde-border-light);
}

/* Estilos dos Ícones (usando caracteres Unicode como fallback de ícones) */
.cde-btn-min::before {
    content: "―"; /* Traço simples para minimizar */
    color: var(--cde-text);
    font-size: 0.6rem;
}

.cde-btn-max::before {
    content: "▲"; /* Triângulo para maximizar (pode ser um quadrado vazio '☐') */
    color: var(--cde-text);
    font-size: 0.5rem;
}

.cde-btn-close::before {
    content: "✕"; /* X simples para fechar */
    color: var(--cde-text);
    font-weight: bold;
    font-size: 0.8rem;
}
/* Estilo para imagem de perfil (circular e com tamanho fixo) */
.profile-img {
    max-width: 150px;
    border-radius: 50%;
    /* Adiciona borda CDE para consistência */
    border: 1px solid var(--cde-border-dark);
}
/* Limita o tamanho máximo de todas as imagens para evitar que quebrem o layout */
img {
    max-width: 100%; /* Garante que a imagem nunca será maior que seu contêiner */
    height: auto;    /* Mantém a proporção da imagem */
    /* Você pode adicionar a borda CDE para consistência visual */
    border: 1px solid var(--cde-border-dark);
}