/* ==========================================
   BLOCO 1: SISTEMA DE VARIÁVEIS CSS
   Responsabilidade: Definição de variáveis personalizadas
   ========================================== */

/* Variáveis CSS personalizadas */
:root {
    --primary-color: #0047AB;        /* Azul primário */
    --primary-dark: #003380;         /* Azul primário escuro */
    --secondary-color: #ff6b6b;      /* Cor secundária (vermelho) */
    --text-color: #333;              /* Cor do texto */
    --text-light: #666;              /* Texto claro */
    --bg-color: #f9f9f9;             /* Cor de fundo */
    --white: #ffffff;                /* Branco */
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Sombra */
    --error: #ff4757;                /* Cor de erro */
    --success: #2ed573;              /* Cor de sucesso */
    --input-bg: #f1f1f1;             /* Fundo dos inputs */
    --transition: all 0.3s ease;     /* Transição padrão */
}

/* ==========================================
   BLOCO 2: RESET E CONFIGURAÇÕES GLOBAIS
   Responsabilidade: Normalização e reset de estilos
   ========================================== */

/* Reset universal */
* {
    margin: 0; /* Remover margens padrão */
    padding: 0; /* Remover padding padrão */
    box-sizing: border-box; /* Modelo de box consistente */
}

/* ==========================================
   BLOCO 3: CONFIGURAÇÕES HTML E BODY
   Responsabilidade: Estrutura base da página
   ========================================== */

/* Configurações HTML e body */
html, body {
    height: 100%; /* Altura total */
    overflow: hidden; /* Prevenir scroll do body */
}

/* ==========================================
   BLOCO 4: CORPO PRINCIPAL
   Responsabilidade: Layout centralizado com gradiente
   ========================================== */

/* Body principal */
body {
    font-family: 'Poppins', sans-serif; /* Fonte customizada */
    background: linear-gradient(135deg, #0047AB, #001F5C); /* Gradiente de fundo */
    display: flex; /* Layout flexbox */
    justify-content: center; /* Centralização horizontal */
    align-items: center; /* Centralização vertical */
    padding: clamp(10px, 2vw, 20px); /* Padding responsivo */
    color: var(--text-color); /* Cor do texto */
    position: relative; /* Para posicionamento */
}

/* ==========================================
   BLOCO 5: CONTAINER PRINCIPAL
   Responsabilidade: Container do layout principal
   ========================================== */

/* Container principal */
.container {
    width: 100%; /* Largura total */
    max-width: clamp(800px, 90vw, 1200px); /* Largura máxima responsiva */
    height: clamp(500px, 85vh, 800px); /* Altura dinâmica baseada na viewport */
    display: flex; /* Layout flexbox */
    flex-direction: row; /* Elementos em linha */
    background: var(--white); /* Fundo branco */
    border-radius: 20px; /* Bordas arredondadas */
    overflow: hidden; /* Ocultar overflow */
    box-shadow: var(--shadow); /* Sombra para elevação */
    position: relative; /* Para posicionamento */
}

/* ==========================================
   BLOCO 6: SEÇÃO DE ILUSTRAÇÃO
   Responsabilidade: Área lateral esquerda com gradiente
   ========================================== */

/* Seção de ilustração */
.illustration {
    flex: 1; /* Ocupar espaço disponível */
    background: linear-gradient(135deg, #0047AB, #001F5C); /* Gradiente igual ao body */
    display: flex; /* Layout flexbox */
    flex-direction: column; /* Elementos em coluna */
    justify-content: center; /* Centralização vertical */
    align-items: center; /* Centralização horizontal */
    padding: clamp(20px, 4vw, 40px); /* Padding responsivo */
    color: var(--white); /* Texto branco */
    position: relative; /* Para pseudo-elementos */
    overflow: hidden; /* Ocultar overflow */
}

/* ==========================================
   BLOCO 7: TÍTULO DA ILUSTRAÇÃO
   Responsabilidade: Título da seção lateral
   ========================================== */

/* Título da ilustração */
.illustration h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem); /* Tamanho responsivo */
    margin-bottom: 20px; /* Espaçamento abaixo */
    position: relative; /* Para z-index */
    z-index: 1; /* Acima dos pseudo-elementos */
    text-align: center; /* Centralização do texto */
}

/* ==========================================
   BLOCO 8: PARÁGRAFO DA ILUSTRAÇÃO
   Responsabilidade: Descrição da seção lateral
   ========================================== */

/* Parágrafo da ilustração */
.illustration p {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem); /* Tamanho responsivo */
    text-align: center; /* Centralização do texto */
    margin-bottom: 30px; /* Espaçamento abaixo */
    position: relative; /* Para z-index */
    z-index: 1; /* Acima dos pseudo-elementos */
    line-height: 1.5; /* Altura de linha */
}

/* ==========================================
   BLOCO 9: PSEUDO-ELEMENTO SUPERIOR ESQUERDA
   Responsabilidade: Elemento decorativo superior
   ========================================== */

/* Pseudo-elemento decorativo superior esquerdo */
.illustration::before {
    content: ''; /* Conteúdo vazio necessário */
    position: absolute; /* Posicionamento absoluto */
    width: min(300px, 40vw); /* Largura responsiva */
    height: min(300px, 40vw); /* Altura responsiva */
    background: rgba(255, 255, 255, 0.1); /* Fundo semi-transparente */
    border-radius: 50%; /* Formato circular */
    top: -100px; /* Posição acima */
    left: -100px; /* Posição à esquerda */
}

/* ==========================================
   BLOCO 10: PSEUDO-ELEMENTO INFERIOR DIREITA
   Responsabilidade: Elemento decorativo inferior
   ========================================== */

/* Pseudo-elemento decorativo inferior direito */
.illustration::after {
    content: ''; /* Conteúdo vazio necessário */
    position: absolute; /* Posicionamento absoluto */
    width: min(200px, 30vw); /* Largura responsiva */
    height: min(200px, 30vw); /* Altura responsiva */
    background: rgba(255, 255, 255, 0.1); /* Fundo semi-transparente */
    border-radius: 50%; /* Formato circular */
    bottom: -50px; /* Posição abaixo */
    right: -50px; /* Posição à direita */
}

/* ==========================================
   BLOCO 11: CONTAINER DO LOGO
   Responsabilidade: Área para logo da empresa
   ========================================== */

/* Container do logo */
.logo-container {
    margin-bottom: 30px; /* Espaçamento abaixo */
    width: 100%; /* Largura total */
    max-width: clamp(200px, 25vw, 280px); /* Largura máxima responsiva */
    position: relative; /* Para z-index */
    z-index: 2; /* Acima dos pseudo-elementos */
    display: flex; /* Layout flexbox */
    justify-content: center; /* Centralização horizontal */
    align-items: center; /* Centralização vertical */
}

/* ==========================================
   BLOCO 12: IMAGEM DO LOGO
   Responsabilidade: Elemento visual do logo
   ========================================== */

/* Imagem do logo */
.logo-container img {
    width: 100%; /* Largura total */
    height: auto; /* Altura automática */
    max-height: clamp(200px, 25vh, 400px); /* Altura máxima responsiva */
    object-fit: contain; /* Manter proporções */
}

/* ==========================================
   BLOCO 13: CONTAINER DO FORMULÁRIO
   Responsabilidade: Área lateral direita com formulários
   ========================================== */

/* Container do formulário */
.form-container {
    flex: 1; /* Ocupar espaço disponível */
    padding: clamp(20px, 4vw, 40px); /* Padding responsivo */
    position: relative; /* Para posicionamento */
    overflow: hidden; /* Ocultar overflow */
    display: flex; /* Layout flexbox */
    flex-direction: column; /* Elementos em coluna */
    height: 100%; /* Altura total */
}

/* ==========================================
   BLOCO 14: TABS DO FORMULÁRIO
   Responsabilidade: Navegação entre login/cadastro
   ========================================== */

/* Tabs do formulário */
.form-tabs {
    display: flex; /* Layout flexbox */
    margin-bottom: 30px; /* Espaçamento abaixo */
    border-bottom: 2px solid var(--input-bg); /* Borda inferior */
    flex-shrink: 0; /* Prevenir redução de tamanho */
}

/* ==========================================
   BLOCO 15: TAB INDIVIDUAL
   Responsabilidade: Cada aba de navegação
   ========================================== */

/* Tab individual */
.form-tab {
    flex: 1; /* Ocupar espaço disponível */
    text-align: center; /* Centralização do texto */
    padding: 15px 0; /* Espaçamento vertical */
    font-weight: 600; /* Peso semi-negrito */
    cursor: pointer; /* Cursor pointer */
    transition: var(--transition); /* Transições suaves */
    color: var(--text-light); /* Cor do texto */
    position: relative; /* Para pseudo-elemento */
    font-size: clamp(0.9rem, 1.2vw, 1rem); /* Tamanho responsivo */
}

/* ==========================================
   BLOCO 16: TAB ATIVO
   Responsabilidade: Estado selecionado da aba
   ========================================== */

/* Tab ativa */
.form-tab.active {
    color: var(--primary-color); /* Cor da variável */
}

/* ==========================================
   BLOCO 17: INDICADOR DA TAB ATIVA
   Responsabilidade: Linha inferior da aba ativa
   ========================================== */

/* Indicador da tab ativa */
.form-tab.active::after {
    content: ''; /* Conteúdo vazio necessário */
    position: absolute; /* Posicionamento absoluto */
    bottom: -2px; /* Posição inferior */
    left: 0; /* Posição à esquerda */
    width: 100%; /* Largura total */
    height: 2px; /* Altura da linha */
    background: var(--primary-color); /* Cor da variável */
}

/* ==========================================
   BLOCO 18: CONTEÚDO DO FORMULÁRIO
   Responsabilidade: Container dos formulários
   ========================================== */

/* Conteúdo do formulário */
.form-content {
    position: relative; /* Para posicionamento absoluto dos formulários */
    flex: 1; /* Ocupar espaço restante */
    overflow-y: auto; /* Permitir scroll vertical */
    overflow-x: hidden; /* Ocultar scroll horizontal */
    padding-right: 5px; /* Espaço para barra de rolagem */
}

/* ==========================================
   BLOCO 19: BARRA DE ROLAGEM CUSTOMIZADA
   Responsabilidade: Estilo da barra de rolagem
   ========================================== */

/* Customização da barra de rolagem */
.form-content::-webkit-scrollbar {
    width: 6px; /* Largura da barra */
}

/* Track da barra de rolagem */
.form-content::-webkit-scrollbar-track {
    background: var(--input-bg); /* Fundo da trilha */
    border-radius: 3px; /* Bordas arredondadas */
}

/* Thumb da barra de rolagem */
.form-content::-webkit-scrollbar-thumb {
    background: var(--primary-color); /* Cor da variável */
    border-radius: 3px; /* Bordas arredondadas */
}

/* Hover da barra de rolagem */
.form-content::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark); /* Cor escura */
}

/* ==========================================
   BLOCO 20: FORMULÁRIO INDIVIDUAL
   Responsabilidade: Cada formulário (login/cadastro)
   ========================================== */

/* Formulário individual */
.form {
    position: absolute; /* Posicionamento absoluto */
    top: 0; /* Posição no topo */
    left: 0; /* Posição à esquerda */
    width: calc(100% - 10px); /* Largura subtraindo espaço da barra */
    opacity: 0; /* Transparente por padrão */
    visibility: hidden; /* Invisível por padrão */
    transform: translateX(50px); /* Deslocamento inicial */
    transition: var(--transition); /* Transições suaves */
    min-height: 100%; /* Altura mínima */
}

/* ==========================================
   BLOCO 21: FORMULÁRIO ATIVO
   Responsabilidade: Estado visível do formulário
   ========================================== */

/* Formulário ativo */
.form.active {
    visibility: visible; /* Visível */
    transform: translateX(0); /* Posição normal */
    position: relative; /* Posição relativa */
}

/* ==========================================
   BLOCO 22: GRUPO DE INPUT
   Responsabilidade: Container para cada campo
   ========================================== */

/* Grupo de input */
.input-group {
    margin-bottom: clamp(15px, 2.5vh, 20px); /* Espaçamento responsivo */
    position: relative; /* Para posicionamento absoluto */
}

/* ==========================================
   BLOCO 23: LABEL DO INPUT
   Responsabilidade: Rótulo dos campos
   ========================================== */

/* Label dos campos */
.input-group label {
    display: block; /* Comportamento de bloco */
    margin-bottom: 8px; /* Espaçamento abaixo */
    font-weight: 500; /* Peso semi-negrito */
    color: var(--text-light); /* Cor da variável */
    font-size: clamp(0.8rem, 1vw, 0.9rem); /* Tamanho responsivo */
}

/* ==========================================
   BLOCO 24: CAMPO DE ENTRADA
   Responsabilidade: Input de texto/email/password
   ========================================== */

/* Campo de entrada */
.input-group input {
    width: 100%; /* Largura total */
    padding: clamp(10px, 1.5vh, 12px) 15px; /* Padding responsivo */
    border: 1px solid var(--input-bg); /* Borda da variável */
    border-radius: 8px; /* Bordas arredondadas */
    background: var(--input-bg); /* Fundo da variável */
    font-size: clamp(0.9rem, 1.1vw, 1rem); /* Tamanho responsivo */
    transition: var(--transition); /* Transições suaves */
    outline: none; /* Sem outline */
    font-family: 'Poppins', sans-serif; /* Fonte específica */
}

/* ==========================================
   BLOCO 25: FOCUS DO INPUT
   Responsabilidade: Estado ativo do campo
   ========================================== */

/* Focus do input */
.input-group input:focus {
    border-color: var(--primary-color); /* Cor da variável */
    background: var(--white); /* Fundo branco */
    box-shadow: 0 0 0 3px rgba(0, 71, 171, 0.1); /* Sombra de foco */
}

/* ==========================================
   BLOCO 26: TOGGLE DE SENHA
   Responsabilidade: Botão para mostrar/ocultar senha
   ========================================== */

/* Toggle de senha */
.password-toggle {
    position: absolute; /* Posicionamento absoluto */
    right: 15px; /* Posição à direita */
    top: 40px; /* Posição vertical */
    color: var(--text-light); /* Cor da variável */
    cursor: pointer; /* Cursor pointer */
    user-select: none; /* Evitar seleção de texto */
    font-size: clamp(0.9rem, 1vw, 1rem); /* Tamanho responsivo */
}

/* ==========================================
   BLOCO 27: REQUISITOS DA SENHA
   Responsabilidade: Texto de validação de senha
   ========================================== */

/* Requisitos da senha */
.password-requirements {
    font-size: clamp(0.7rem, 0.9vw, 0.8rem); /* Tamanho responsivo */
    color: var(--text-light); /* Cor da variável */
    margin-top: 5px; /* Espaçamento acima */
}

/* ==========================================
   BLOCO 28: BOTÕES GERAIS
   Responsabilidade: Estilo base dos botões
   ========================================== */

/* Botões */
.btn {
    width: 100%; /* Largura total */
    padding: clamp(10px, 1.5vh, 12px); /* Padding responsivo */
    background: var(--primary-color); /* Fundo da variável */
    color: var(--white); /* Texto branco */
    border: none; /* Sem borda */
    border-radius: 8px; /* Bordas arredondadas */
    font-size: clamp(0.9rem, 1.1vw, 1rem); /* Tamanho responsivo */
    font-weight: 600; /* Peso semi-negrito */
    cursor: pointer; /* Cursor pointer */
    transition: var(--transition); /* Transições suaves */
    margin-top: 10px; /* Espaçamento acima */
    font-family: 'Poppins', sans-serif; /* Fonte específica */
}

/* ==========================================
   BLOCO 29: HOVER DOS BOTÕES
   Responsabilidade: Efeito visual no hover
   ========================================== */

/* Hover dos botões */
.btn:hover {
    background: var(--primary-dark); /* Fundo escuro */
    transform: translateY(-2px); /* Elevação sutil */
    box-shadow: 0 5px 15px rgba(0, 71, 171, 0.2); /* Sombra */
}

/* ==========================================
   BLOCO 30: ESTADO ATIVO DOS BOTÕES
   Responsabilidade: Efeito ao clicar
   ========================================== */

/* Estado ativo dos botões */
.btn:active {
    transform: translateY(0); /* Posição normal */
}

/* ==========================================
   BLOCO 31: RODAPÉ DO FORMULÁRIO
   Responsabilidade: Links e informações adicionais
   ========================================== */

/* Rodapé do formulário */
.form-footer {
    text-align: center; /* Centralização do texto */
    margin-top: 20px; /* Espaçamento acima */
    font-size: clamp(0.8rem, 1vw, 0.9rem); /* Tamanho responsivo */
    color: var(--text-light); /* Cor da variável */
}

/* ==========================================
   BLOCO 32: LINKS DO RODAPÉ
   Responsabilidade: Links internos do formulário
   ========================================== */

/* Links do rodapé */
.form-footer a {
    color: var(--primary-color); /* Cor da variável */
    text-decoration: none; /* Sem sublinhado */
    font-weight: 600; /* Peso semi-negrito */
}

/* ==========================================
   BLOCO 33: MENSAGENS DE FEEDBACK
   Responsabilidade: Notificações de sucesso/erro
   ========================================== */

/* Mensagens */
.message {
    padding: 12px 15px; /* Espaçamento interno */
    border-radius: 8px; /* Bordas arredondadas */
    margin-bottom: 20px; /* Espaçamento abaixo */
    font-size: clamp(0.8rem, 1vw, 0.9rem); /* Tamanho responsivo */
    display: flex; /* Layout flexbox */
    align-items: center; /* Centralização vertical */
}

/* ==========================================
   BLOCO 34: MENSAGEM DE ERRO
   Responsabilidade: Estilo para erros
   ========================================== */

/* Mensagem de erro */
.message.error {
    background: rgba(255, 71, 87, 0.1); /* Fundo vermelho transparente */
    color: var(--error); /* Cor de erro */
    border-left: 3px solid var(--error); /* Borda lateral */
}

/* ==========================================
   BLOCO 35: MENSAGEM DE SUCESSO
   Responsabilidade: Estilo para sucessos
   ========================================== */

/* Mensagem de sucesso */
.message.success {
    background: rgba(46, 213, 115, 0.1); /* Fundo verde transparente */
    color: var(--success); /* Cor de sucesso */
    border-left: 3px solid var(--success); /* Borda lateral */
}

/* ==========================================
   BLOCO 36: ÍCONE DA MENSAGEM
   Responsabilidade: Elemento visual das mensagens
   ========================================== */

/* Ícone da mensagem */
.message-icon {
    margin-right: 10px; /* Espaçamento à direita */
    font-size: 1.2rem; /* Tamanho do ícone */
}

/* ==========================================
   BLOCO 37: CONTAINER DE VOLTA
   Responsabilidade: Área para link de retorno
   ========================================== */

/* Container de retorno */
.back-container {
    text-align: center; /* Centralização do texto */
    margin-top: 30px; /* Espaçamento acima */
    flex-shrink: 0; /* Prevenir redução de tamanho */
}

/* ==========================================
   BLOCO 38: LINK DE RETORNO
   Responsabilidade: Botão para voltar ao site
   ========================================== */

/* Link de retorno */
.back-link {
    color: var(--primary-color); /* Cor da variável */
    text-decoration: none; /* Sem sublinhado */
    font-weight: 600; /* Peso semi-negrito */
    display: inline-flex; /* Layout flexbox inline */
    align-items: center; /* Centralização vertical */
    transition: var(--transition); /* Transições suaves */
    padding: 8px 16px; /* Espaçamento interno */
    border: 1px solid var(--primary-color); /* Borda da cor */
    border-radius: 8px; /* Bordas arredondadas */
    font-size: clamp(0.8rem, 1vw, 0.9rem); /* Tamanho responsivo */
}

/* ==========================================
   BLOCO 39: HOVER DO LINK DE RETORNO
   Responsabilidade: Efeito visual do link
   ========================================== */

/* Hover do link de retorno */
.back-link:hover {
    color: var(--white); /* Texto branco */
    background-color: var(--primary-color); /* Fundo da variável */
}

/* ==========================================
   BLOCO 40: ÍCONE DE RETORNO
   Responsabilidade: Elemento visual do botão
   ========================================== */

/* Ícone de retorno */
.back-icon {
    margin-right: 8px; /* Espaçamento à direita */
}

/* ==========================================
   BLOCO 41: DESKTOP MUITO GRANDE
   Responsabilidade: Screens 1400px+
   ========================================== */

/* Desktop muito grande */
@media (min-width: 1400px) {
    .container {
        max-width: 1200px; /* Largura fixa */
        height: 80vh; /* Altura relativa */
    }
}

/* ==========================================
   BLOCO 42: DESKTOP GRANDE
   Responsabilidade: Screens 1200px-1399px
   ========================================== */

/* Desktop grande */
@media (min-width: 1200px) and (max-width: 1399px) {
    .container {
        max-width: 1000px; /* Largura máxima */
        height: 85vh; /* Altura relativa */
    }
}

/* ==========================================
   BLOCO 43: DESKTOP MÉDIO
   Responsabilidade: Screens 900px-1199px
   ========================================== */

/* Desktop médio */
@media (min-width: 900px) and (max-width: 1199px) {
    .container {
        max-width: 900px; /* Largura máxima */
        height: 90vh; /* Altura relativa */
    }
}

/* ==========================================
   BLOCO 44: TABLET E MOBILE GRANDE
   Responsabilidade: Screens até 900px
   ========================================== */

/* Tablet e mobile grande */
@media (max-width: 900px) {
    html, body {
        overflow: auto; /* Permitir scroll no mobile */
    }
    
    body {
        min-height: 100vh; /* Altura mínima total */
        height: auto; /* Altura automática */
    }

    .container {
        flex-direction: column; /* Elementos em coluna */
        max-width: 500px; /* Largura máxima menor */
        height: auto; /* Altura automática */
        min-height: 90vh; /* Altura mínima relativa */
    }

    .illustration {
        padding: 30px; /* Padding fixo */
    }

    .illustration h2 {
        font-size: 2rem; /* Tamanho fixo */
    }

    .logo-container {
        max-width: 220px; /* Largura máxima */
        margin-bottom: 20px; /* Espaçamento abaixo */
    }

    .form-container {
        padding: 30px; /* Padding fixo */
        height: auto; /* Altura automática */
    }

    .form-content {
        overflow-y: visible; /* Scroll visível */
    }
}

/* ==========================================
   BLOCO 45: MOBILE PEQUENO
   Responsabilidade: Screens até 500px
   ========================================== */

/* Mobile pequeno */
@media (max-width: 500px) {
    .container {
        border-radius: 15px; /* Bordas menos arredondadas */
        min-height: 95vh; /* Altura mínima maior */
    }

    .illustration {
        padding: 20px; /* Padding menor */
    }

    .illustration h2 {
        font-size: 1.8rem; /* Tamanho menor */
    }

    .illustration p {
        font-size: 1rem; /* Tamanho padrão */
    }

    .logo-container {
        max-width: 180px; /* Largura menor */
    }

    .form-container {
        padding: 20px; /* Padding menor */
    }

    .form-container h2 {
        font-size: 1.5rem; /* Tamanho menor */
        margin-bottom: 20px; /* Espaçamento menor */
    }

    .form-tab {
        padding: 10px 0; /* Padding menor */
    }

    .input-group input {
        padding: 10px 12px; /* Padding menor */
    }

    .btn {
        padding: 10px; /* Padding menor */
    }
}

/* ==========================================
   BLOCO 46: ANIMAÇÃO FADE IN
   Responsabilidade: Animação de entrada
   ========================================== */

/* Animação fadeIn */
@keyframes fadeIn {
    from {
        opacity: 0; /* Transparente */
        transform: translateX(50px); /* Deslocamento para direita */
    }
    to {
        opacity: 1; /* Opacidade total */
        transform: translateX(0); /* Posição normal */
    }
}

/* ==========================================
   BLOCO 47: ANIMAÇÃO FADE OUT
   Responsabilidade: Animação de saída
   ========================================== */

/* Animação fadeOut */
@keyframes fadeOut {
    from {
        opacity: 1; /* Opacidade total */
        transform: translateX(0); /* Posição normal */
    }
    to {
        opacity: 0; /* Transparente */
        transform: translateX(-50px); /* Deslocamento para esquerda */
    }
}

/* ==========================================
   BLOCO 48: APLICAÇÃO DAS ANIMAÇÕES
   Responsabilidade: Estados visuais dos formulários
   ========================================== */

/* Formulário ativo com animação */
.form.active {
    animation: fadeIn 0.5s forwards;
}

/* Formulário inativo com animação */
.form.inactive {
    animation: fadeOut 0.5s forwards;
}

/* ==========================================
   BLOCO 49: ESTILOS MODAL
   Responsabilidade: Sistema de modal integrado
   ========================================== */

/* Modal */
.modal {
    position: fixed; /* Posicionamento fixo */
    top: 0; /* Posição no topo */
    left: 0; /* Posição à esquerda */
    width: 100%; /* Largura total */
    height: 100%; /* Altura total */
    background: rgba(0, 0, 0, 0.5); /* Fundo escuro semi-transparente */
    display: flex; /* Layout flexbox */
    justify-content: center; /* Centralização horizontal */
    align-items: center; /* Centralização vertical */
    z-index: 1000; /* Camada superior */
}

/* ==========================================
   BLOCO 50: CONTEÚDO DO MODAL
   Responsabilidade: Container principal do modal
   ========================================== */

/* Conteúdo do modal */
.modal-content {
    background: var(--white); /* Fundo branco */
    border-radius: 12px; /* Bordas arredondadas */
    padding: 30px; /* Espaçamento interno */
    max-width: 400px; /* Largura máxima */
    width: 90%; /* Largura relativa */
    text-align: center; /* Centralização do texto */
    box-shadow: var(--shadow); /* Sombra para elevação */
}

/* ==========================================
   BLOCO 51: CABEÇALHO DO MODAL
   Responsabilidade: Título do modal
   ========================================== */

/* Cabeçalho do modal */
.modal-header h3 {
    margin-bottom: 15px; /* Espaçamento abaixo */
    color: var(--primary-color); /* Cor da variável */
    font-size: 1.5rem; /* Tamanho da fonte */
}

/* ==========================================
   BLOCO 52: CORPO DO MODAL
   Responsabilidade: Conteúdo textual do modal
   ========================================== */

/* Corpo do modal */
.modal-body p {
    margin-bottom: 25px; /* Espaçamento abaixo */
    color: var(--text-color); /* Cor do texto */
    font-size: 1rem; /* Tamanho padrão */
}

/* ==========================================
   BLOCO 53: BOTÕES DO MODAL
   Responsabilidade: Container dos botões do modal
   ========================================== */

/* Botões do modal */
.modal-buttons {
    display: flex; /* Layout flexbox */
    gap: 15px; /* Espaçamento entre botões */
    justify-content: center; /* Centralização horizontal */
}

/* ==========================================
   BLOCO 54: BOTÃO INDIVIDUAL DO MODAL
   Responsabilidade: Estilo base dos botões modal
   ========================================== */

/* Botão do modal */
.modal-btn {
    padding: 12px 20px; /* Espaçamento interno */
    border: none; /* Sem borda */
    border-radius: 8px; /* Bordas arredondadas */
    font-size: 1rem; /* Tamanho padrão */
    font-weight: 600; /* Peso semi-negrito */
    cursor: pointer; /* Cursor pointer */
    transition: var(--transition); /* Transições suaves */
    flex: 1; /* Ocupar espaço disponível */
}

/* ==========================================
   BLOCO 55: BOTÃO PRIMÁRIO DO MODAL
   Responsabilidade: Botão principal de ação
   ========================================== */

/* Botão primário do modal */
.modal-btn.primary {
    background: var(--primary-color); /* Cor da variável */
    color: var(--white); /* Texto branco */
}

/* ==========================================
   BLOCO 56: HOVER DO BOTÃO PRIMÁRIO
   Responsabilidade: Efeito visual do botão principal
   ========================================== */

/* Hover do botão primário */
.modal-btn.primary:hover {
    background: var(--primary-dark); /* Cor escura */
}

/* ==========================================
   BLOCO 57: BOTÃO SECUNDÁRIO DO MODAL
   Responsabilidade: Botão alternativo
   ========================================== */

/* Botão secundário do modal */
.modal-btn.secondary {
    background: var(--input-bg); /* Fundo da variável */
    color: var(--text-color); /* Cor do texto */
}

/* ==========================================
   BLOCO 58: HOVER DO BOTÃO SECUNDÁRIO
   Responsabilidade: Efeito visual do botão secundário
   ========================================== */

/* Hover do botão secundário */
.modal-btn.secondary:hover {
    background: #e0e0e0; /* Fundo cinza */
}

/* ==========================================
   BLOCO 59: ESTILOS PARA DATA DE NASCIMENTO
   Responsabilidade: Campo de data de nascimento
   ========================================== */

/* Elemento small para texto de ajuda */
.input-group small {
    display: block;
    margin-top: 5px;
    font-size: clamp(0.7rem, 0.9vw, 0.8rem);
    color: var(--text-light);
    font-style: italic;
}

/* Campo de entrada para data de nascimento */
.input-group input[type="date"] {
    color-scheme: light; /* Garantir tema claro para campos de data */
    padding-right: 40px; /* Espaço para o calendário */
}

/* Personalizar o ícone do calendário nos campos de data */
.input-group input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: var(--transition);
}

.input-group input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}