/*
==================================================
RESET E VARIÁVEIS GLOBAIS
==================================================
*/

/* Garante que links dentro do figcaption herdem o estilo do texto */
figcaption a {
    color: inherit !important;
    text-decoration: none !important;
    font: inherit;
}

figcaption a:hover {
    text-decoration: none !important;
}

/* Remove sublinhado de todos os links dentro de figcaption, inclusive no hover */
figcaption a, figcaption a:visited, figcaption a:active, figcaption a:hover, figcaption a:focus {
    text-decoration: none !important;
    color: inherit !important;
    font: inherit;
}

/* Remove estilo padrão de link do perfil */
.profile a {
    color: inherit;
    text-decoration: none;
}

.profile a:hover {
    text-decoration: underline;
}
/**
 * ========================================
 * NETFLIX CLONE - ESTILOS GLOBAIS
 * ========================================
 * Arquivo principal de estilos da página de seleção de perfis
 * Inspirado no design Netflix com fundo preto, tipografia limpa e interatividade suave
    * Autor: [Gabriel Montemór] -> Código 100% gerado por IA, sem cópia de terceiros.
 */

/**
 * RESET GLOBAL
 * Remove margens e preenchimentos padrão do navegador
 * Aplica box-sizing para cálculos de tamanho mais previsíveis
 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/**
 * ESTILOS DO BODY
 * Define as propriedades base da página inteira
 * 
 * - background-color: Fundo preto escuro (padrão Netflix)
 * - color: Texto branco por padrão
 * - font-family: Tipografia limpa e profissional
 * - display flex + center: Centraliza todo o conteúdo no viewport
 * - min-height: 100vh: Garante que o body ocupe toda a altura da tela
 * - overflow: hidden: Remove scrollbars desnecessários
 */
body {
    background-color: #141414;
    color: #ffffff;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
}

main {
    transition: background-color 0.4s ease, color 0.4s ease;
}

/**
 * CONTAINER PRINCIPAL (MAIN)
 * Agrupa o título, perfis e botão em uma coluna centralizada
 * 
 * - text-align: center: Alinha todo o texto ao centro
 * - flex-direction: column: Coloca os elementos em coluna (vertical)
 * - align-items: center: Centraliza itens horizontalmente
 * - max-width: 90vw: Limita a largura em 90% da tela para não ficcar muito largo
 */
main {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
}

/**
 * TÍTULO PRINCIPAL (H1)
 * "Quem está assistindo?"
 * 
 * - font-size clamp(): Define tamanho responsivo
 *   * Mínimo: 2.2rem
 *   * Ideal: 3.5vw (ajusta com a tela)
 *   * Máximo: 3.2rem
 * - font-weight: 500: Peso médio (semibold)
 * - margin-bottom: Espaço entre título e perfis
 */
h1 {
    font-size: clamp(2.2rem, 3.5vw, 3.2rem);
    font-weight: 500;
    margin-bottom: 2.5rem;
}

/**
 * CONTAINER DOS PERFIS
 * Agrupa os cards de perfil em uma linha responsiva
 * 
 * - display: grid: Usa grid para melhor controle responsivo
 * - grid-template-columns: auto-fit para ajustar colunas automaticamente
 * - justify-content: center: Centraliza os perfis horizontalmente
 * - gap: 4vw: Espaço entre perfis (4% da largura da tela)
 * - list-style: none: Remove marcadores de lista
 */
.profiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    justify-items: center;
    gap: 4vw;
    list-style: none;
    padding: 0;
    margin: 0;
}

/**
 * FIGURA DO PERFIL
 * Container que agrupa a imagem e nome do perfil
 * 
 * - flex-direction: column: Coloca imagem acima do nome
 * - align-items: center: Centraliza imagem e nome
 * - cursor: pointer: Indica que é clicável
 * - transition: Suaviza o efeito de zoom no hover
 */
.profile figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

/**
 * IMAGEM DO PERFIL
 * Avatar com cantos levemente arredondados
 * 
 * - width/height: 160px: Tamanho padrão do avatar
 * - border-radius: 12px: Cantos levemente arredondados, quase imperceptível
 * - object-fit: cover: Corta a imagem para preencher o espaço sem distorcer
 * - border: 4px solid transparent: Borda transparente padrão (não ocupa espaço extra no hover)
 * - transition: Suaviza mudanças de bordas e transformações
 */
.profile img {
    width: 160px;
    height: 160px;
    border-radius: 12px;
    object-fit: cover;
    border: 4px solid transparent;
    box-shadow: none;
    transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/**
 * NOME DO PERFIL
 * Texto abaixo de cada imagem
 * 
 * - margin-top: 1rem: Espaço entre imagem e nome
 * - font-size: 1.25rem: Tamanho legível
 * - color: #808080: Cinza padrão
 * - transition: Suaviza mudança de cor no hover
 */
figcaption {
    margin-top: 1rem;
    font-size: 1rem;
    color: #808080;
    transition: color 0.2s ease-in-out;
}

/**
 * HOVER DO PERFIL - ZOOM
 * Efeito quando mouse passa sobre o perfil
 * Aumenta o perfil em 5%
 */
.profile:hover {
    transform: scale(1.05);
}

/**
 * HOVER - BORDA DA IMAGEM
 * Quando mouse passa, a imagem ganha borda branca
 * A transição foi definida na classe .profile img
 */
.profile:hover img {
    border-color: #ffffff;
}

/**
 * HOVER - COR DO NOME
 * Quando mouse passa, o nome fica branco e mais negrito
 */
.profile:hover figcaption {
    color: #ffffff;
    font-weight: bold;
}

/**
 * BOTÃO GERENCIAR PERFIS
 * Caixa com borda para gerenciar contas
 * 
 * - display: inline-block: Comporta-se como bloco mas com tamanho do conteúdo
 * - margin-top: 4rem: Distância grande do perfis para o botão
 * - padding: 0.5rem 1.8rem: Espaçamento interno pequeno (altura x largura)
 * - background: transparent: Sem fundo (apenas borda)
 * - border: 1px solid #808080: Borda fina cinza
 * - border-radius: 0: Cantos completamente quadrados
 * - letter-spacing: 1px: Espaçamento entre letras
 * - cursor: pointer: Indica que é clicável
 * - transition: all: Suaviza todas as mudanças de propriedade
 */
.btn-gerenciar {
    display: inline-block;
    margin-top: 4rem;
    padding: 0.5rem 1.8rem;
    background-color: transparent;
    color: #808080;
    border: 1px solid #808080;
    border-radius: 0;
    font-size: 1rem;
    text-decoration: none;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-align: center;
}

/**
 * CONTAINER DOS BOTÕES
 * Agrupa os botões em linha
 */
.buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 4rem;
}

/**
 * BOTÃO TOGGLE TEMA FIXO
 * Botão pequeno no canto superior direito para alternar tema
 */
.btn-theme-fixed {
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 0.5rem;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.btn-theme-fixed:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* Light mode adjustments */
.light-mode .btn-theme-fixed {
    background-color: rgba(255, 255, 255, 0.9);
    border-color: #333333;
}

.light-mode .btn-theme-fixed .theme-icon--moon {
    opacity: 0.2;
}

.light-mode .btn-theme-fixed .theme-icon--sun {
    opacity: 1;
}

.light-mode .btn-theme-fixed .theme-knob {
    transform: translateX(24px);
    background-color: #ffffff;
}

.btn-theme-fixed:hover {
    transform: translateY(-1px);
}

.btn-theme-fixed {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 60px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid #ffffff;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    z-index: 1000;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-theme-fixed .theme-icon {
    font-size: 0.9rem;
    line-height: 1;
    transition: opacity 0.3s ease;
    opacity: 0.2;
}

.btn-theme-fixed .theme-icon--moon {
    opacity: 1;
}

.btn-theme-fixed .theme-knob {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
    transform: translateX(0);    
}

.btn-theme-fixed:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
}

.light-mode .btn-theme-fixed {
    background-color: rgba(255, 255, 255, 0.9);
    color: #000000;
    border-color: #333333;
}

.light-mode .btn-theme-fixed .theme-icon--moon {
    opacity: 0.2;
}

.light-mode .btn-theme-fixed .theme-icon--sun {
    opacity: 1;
}

.light-mode .btn-theme-fixed .theme-knob {
    transform: translateX(24px);
    background-color: #ffffff;
}

.btn-theme-fixed:hover {
    transform: translateY(-1px);
}

/**
 * HOVER DO BOTÃO GERENCIAR
 * Quando mouse passa, texto e borda ficam brancos
 */
.btn-gerenciar:hover {
    color: #ffffff;
    border-color: #ffffff;
}

/**
 * ========================================
 * MODO CLARO (LIGHT MODE)
 * ========================================
 * Estilos para o modo claro quando a classe .light-mode é aplicada ao body
 */
.light-mode {
    background-color: #ffffff;
    color: #000000;
}

.light-mode .profile img {
    border-color: #cccccc;
}

.light-mode .profile:hover img {
    border-color: #000000;
}

.light-mode figcaption {
    color: #333333;
}

.light-mode .profile:hover figcaption {
    color: #000000;
}

.light-mode .btn-gerenciar,
.light-mode .btn-theme {
    color: #333333;
    border-color: #333333;
}

.light-mode .btn-gerenciar:hover,
.light-mode .btn-theme:hover {
    color: #000000;
    border-color: #000000;
}

/**
 * ========================================
 * RESPONSIVIDADE - TELAS MÉDIAS (ATÉ 768px)
 * ========================================
 * Ajusta tamanhos e espaçamentos para tablets e telas menores
 */
@media (max-width: 768px) {

    /**
     * Perfis em flex wrap para telas médias
     */
    .profiles {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
    }

    /**
     * Título menor para não dominar telas pequenas
     */
    h1 {
        font-size: 2.2rem;
    }
    /**
     * Imagens menores (110px) com borda reduzida (3px)
     */
    .profile img {
        width: 110px;
        height: 110px;
        border-width: 3px;
    }

    /**
     * Nome do perfil com tamanho reduzido
     */
    figcaption {
        font-size: 1rem;
    }

    /**
     * Botão "Gerenciar Perfis" com tamanho ajustado para mobile
     * - margin-top reduzido para economizar espaço
     * - padding aumentado para facilitar clique em touch
     */
    .btn-gerenciar {
        margin-top: 2.5rem;
        padding: 1.2rem 3rem;
        font-size: 0.95rem;
    }
}
/**
 * ========================================
 * RESPONSIVIDADE - TELAS PEQUENAS (ATÉ 480px)
 * ========================================
 * Ajustes para dispositivos móveis muito pequenos
 */
@media (max-width: 480px) {

    /**
     * Permite rolagem se o conteúdo exceder a altura da tela
     */
    body {
        overflow: auto;
        min-height: auto;
        padding: 2rem 0;
    }

    /**
     * Ajusta o container principal para telas pequenas
     */
    main {
        max-width: 95vw;
    }

    /**
     * Título ainda menor para telas muito pequenas
     */
    h1 {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }

    /**
     * Perfis em coluna vertical para melhor visualização
     */
    .profiles {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    /**
     * Imagens ainda menores para caber melhor
     */
    .profile img {
        width: 100px;
        height: 100px;
        border-width: 3px;
    }

    /**
     * Nome do perfil menor
     */
    figcaption {
        font-size: 1rem;
        margin-top: 0.5rem;
    }

    /**
     * Botão ajustado para telas pequenas
     */
    .btn-gerenciar {
        margin-top: 2rem;
        padding: 1rem 2rem;
        font-size: 0.9rem;
    }
}

/**
 * ========================================
 * RESPONSIVIDADE - TABLETS (769px a 1024px)
 * ========================================
 * Ajustes para tablets
 */
@media (min-width: 769px) and (max-width: 1024px) {

    /**
     * Perfis em grid de 2 colunas para tablets
     */
    .profiles {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        justify-items: center;
    }

    /**
     * Tamanho médio do título
     */
    h1 {
        font-size: 2.8rem;
    }

    /**
     * Imagens médias
     */
    .profile img {
        width: 130px;
        height: 130px;
        border-width: 3px;
    }

    /**
     * Nome do perfil médio
     */
    figcaption {
        font-size: 1.1rem;
    }

    /**
     * Botão ajustado para tablets
     */
    .btn-gerenciar {
        margin-top: 3rem;
        padding: 0.8rem 2.5rem;
    }
}

/**
 * ========================================
 * RESPONSIVIDADE - DESKTOP (1025px+)
 * ========================================
 * Ajustes para telas grandes
 */
@media (min-width: 1025px) {

    /**
     * Título maior para telas grandes
     */
    h1 {
        font-size: 3.5rem;
    }

    /**
     * Espaço padrão entre perfis
     */
    .profiles {
        display: flex;
        justify-content: center;
        gap: 4vw;
        flex-wrap: wrap;
    }

    /**
     * Imagens padrão
     */
    .profile img {
        width: 160px;
        height: 160px;
        border-width: 4px;
    }

    /**
     * Nome do perfil padrão
     */
    figcaption {
        font-size: 1.25rem;
    }

    /**
     * Botão padrão
     */
    .btn-gerenciar {
        margin-top: 4rem;
        padding: 0.5rem 1.8rem;
    }
}