/* Estilos inspirados na Netflix - Tela de Seleção de Perfis */

/* Definição de variáveis de cores para facilitar o Dark/Light Mode */
:root {
    --bg-color: #141414; /* Cor de fundo padrão (Dark) */
    --text-color: #ffffff; /* Cor de texto padrão (Dark) */
    --accent-color: #b31515; /* Vermelho Netflix */
    --footer-color: #1512c8; /* Cor do rodapé */
}

/* Sobrescrita das variáveis para o Modo Claro */
.light-mode {
    --bg-color: #f5f5f5; /* Fundo claro */
    --text-color: #141414; /* Texto escuro */
    --footer-color: #00008b; /* Rodapé azul mais escuro para contraste */
}

/* Seletor universal (*) reseta as margens e paddings padrão de todos os elementos */
* {
    margin: 0; /* Remove margens externas */
    padding: 0; /* Remove preenchimentos internos */
    box-sizing: border-box; /* Garante que bordas e preenchimentos não aumentem o tamanho total do elemento */
}

/* Estilização do corpo (body) da página */
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Define a fonte padrão (estilo Netflix) */
    background-color: var(--bg-color); /* Usa a variável de cor de fundo */
    color: var(--text-color); /* Usa a variável de cor de texto */
    height: 100vh; /* Define a altura como 100% da altura da tela visual */
    display: flex; /* Ativa o Flexbox para alinhar o conteúdo */
    flex-direction: column; /* Alinha os itens (header, main, footer) em coluna (um abaixo do outro) */
    justify-content: center; /* Centraliza verticalmente o conteúdo no meio da tela */
    align-items: center; /* Centraliza horizontalmente o conteúdo */
    text-align: center; /* Centraliza os textos internamente */
    transition: background-color 0.4s ease, color 0.4s ease; /* Transição suave ao mudar o tema */
}

/* Espaçamento abaixo do cabeçalho */
header {
    margin-bottom: 2rem; /* Adiciona uma margem de 32px abaixo do título principal */
    position: relative;
}

/* Estilo do botão de alternância de tema */
#theme-toggle {
    background: none;
    border: 2px solid var(--text-color);
    color: var(--text-color);
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

/* Estilo do botão Gerenciar Perfis */
.botao-gerenciar {
    background: none;
    border: 2px solid var(--text-color);
    color: var(--text-color);
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 300;
    margin-top: 2rem;
    transition: all 0.3s ease;
}

.botao-gerenciar:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

/* Estilo do título "Quem está assistindo?" */
h1 {
    font-size: 3rem; /* Define um tamanho de fonte grande (aprox. 48px) */
    font-weight: 400; /* Define um peso de fonte normal/médio */
    margin-bottom: 1rem; /* Pequeno espaço abaixo do h1 */
}


/* Remove marcadores e padding da lista de perfis */
.lista-perfis {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100vw;
}

/* Estilo da estrutura individual de cada perfil */
.item-perfil {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.item-perfil:hover {
    transform: scale(1.1);
}
.perfil {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.avatar-container img {
    width: 150px;
    height: 150px;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 0.5rem;
    border: 3px solid transparent;
    transition: border-color 0.3s ease;
}
.item-perfil:hover .avatar-container img {
    border-color: var(--accent-color);
}
.avatar-container figcaption {
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--text-color);
    margin-top: 0.3rem;
}

/* Estilo do rodapé da página */
footer {
    position: absolute; /* Tira o rodapé do fluxo normal */
    bottom: 1rem; /* Fixa o rodapé a 16px do fundo da tela */
    font-size: 0.8rem; /* Define um tamanho de fonte pequeno */
    color: var(--footer-color); /* Usa a variável de cor do rodapé */
}

/* Media Query: Regras aplicadas apenas em telas com menos de 900px de largura (celulares/tablets) */
@media (max-width: 900px) {
    h1 {
        font-size: 2rem;
    }
    .lista-perfis {
        gap: 1rem;
        flex-direction: column;
        align-items: center;
    }
    .avatar-container img {
        width: 90px;
        height: 90px;
    }
}