/* O seu fundo pronto */
body {
    background-color: #6155F5;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* O container agora vai ocupar a tela inteira */
.canvas {
    position: relative; 
    width: 100vw;   
    height: 90vh; 
}

/* Configuração para as Esferas Gigantes (Ponta a Ponta) */
.circulo {
    position: absolute; 
    left: 50%;
    transform: translateX(-50%); 
    
    width: 120vw;       /* FAZ OCUPAR TODO O DESKTOP, INDEPENDENTE DO MONITOR */
    height: 110vh;       /* AUMENTADO: Aumenta a altura vertical de cada forma */
}

/* Semicírculo de Cima (Roxo) */
.topo {
    top: -50vh; /* Distância do topo da tela */
   background: linear-gradient(
        to bottom, 
        rgba(80, 8, 181, 0.88), 
        rgba(80, 8, 181, 0.92)
    );
    
    border-radius: 0 0 50% 50%/ 0 0 100% 100%;
}

/* Semicírculo de Baixo (Azul) */
.base {
    /* Em vez de usar top/bottom, usamos o transform para puxar a esfera para cima */
    /* O -20vw faz ela subir e invadir a esfera de cima criando a interseção */
    top: 40vh; 
    background: linear-gradient(
        to bottom, 
        rgba(47, 56, 243, 0.88), 
        rgba(47, 56, 243, 0.92)
    ); 
    border-radius: 50% 50% 0 0 / 100% 100% 0 0; 
}
.caixa-menu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    
    width: 90%;          
    max-width: 650px;    
    height: 500px;       
    
    /* CORRIGIDO: Cor #3A29CB com 95% de opacidade (aparência bem mais sólida e azul) */
    background-color: rgba(58, 41, 203, 0.90); 
    
    border-radius: 20px;                         
    z-index: 20; 
    
    /* Aumentamos um pouco a sombra para destacar a caixa azul do fundo também azul */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}
/* Importação da Fonte Inter Regular do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');

/* Estilização do Rodapé */
.rodape {
    position: absolute;
    bottom: 5px;       /* Distância de 20px da borda inferior da tela */
    left: 50%;
    transform: translateX(-50%); /* Centraliza o texto horizontalmente na tela */
    width: 100%;
    
    /* Configurações solicitadas por você: */
    font-family: 'Inter', sans-serif; /* Define a fonte Inter */
    font-weight: 400;                 /* Estilo Regular */
    font-size: 20px;                  /* Tamanho 20 */
    color: #FFFFFF;                   /* Cor branca */
    
    text-align: center;               /* Garante a centralização do texto */
    z-index: 30;                      /* Mantém o rodapé visível à frente do fundo */
    white-space: nowrap;              /* Evita que o texto quebre em duas linhas no desktop */
}

/* Ajuste rápido para telas pequenas (Celular) */
@media (max-width: 600px) {
    .rodape {
        font-size: 14px;              /* Reduz um pouco o tamanho no celular para não cortar nas laterais */
        white-space: normal;          /* Permite quebrar linha se a tela do celular for muito estreita */
        padding: 0 10px;
    }
}
/* Importando a fonte Inter para o formulário também */
.caixa-menu {
    font-family: 'Inter', sans-serif;
    color: #FFFFFF;
    display: flex;
    flex-direction: row; /* Coloca lado esquerdo e direito emparelhados */
    padding: 40px;
    box-sizing: border-box;
}

/* Divisão exata das duas colunas internas */
.coluna-login {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Alinha o título no topo e os ícones na base */
}

.coluna-cadastro {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-left: 20px;
    box-sizing: border-box;
}

/* --- ESTILIZAÇÃO DO LADO DO LOGIN --- */
.titulo-sistema {
    font-size: 36px;
    margin: 0 0 20px 0;
    font-weight: 400;
}

.grupo-input {
    margin-bottom: 15px;
}

.grupo-input label {
    display: block;
    font-size: 18px;
    margin-bottom: 8px;
}

.grupo-input input {
    width: 85%;
    height: 40px;
    border-radius: 8px;
    border: none;
    background-color: #FFFFFF;
    padding: 0 10px;
    font-size: 16px;
    color: #333;
}

.lembrar-senha {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 20px;
}

.botao-acessar {
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 22px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    padding: 5px 15px;
    text-align: center;
}

.botao-acessar:hover {
    text-decoration: underline;
    opacity: 0.9;
}

.container-botao-acessar {
    width: 85%; /* Mesma largura definida para os inputs */
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.link-esqueceu {
    width: 85%;
    text-align: center;
    color: #FFFFFF;
    font-size: 14px;
    text-decoration: none;
    display: block;
    margin-bottom: 25px;
}

.link-esqueceu:hover {
    text-decoration: underline;
}

.secao-certificado {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto; /* Mantém na base da coluna */
    
    /* Alinha o bloco com o início dos campos de texto (inputs) */
    padding-left: 5%; 
    box-sizing: border-box;
}

.texto-certificado {
    font-size: 13px;
    margin: 5px;
    opacity: 0.85;
    text-align: left;
    padding-left: 10px; /* Mantém o texto alinhado à esquerda na nova posição */
}

.icones-certificado-links {
    display: flex;
    gap: 30px;          /* Aumentei um pouco o espaço entre os ícones */
    align-items: center;
    padding-left: 50px;  /* Ajuste fino para os ícones casarem com a frase */
}

/* Transforma os ícones em botões clicáveis com efeito visual hover */
.link-icone-certificado {
    display: inline-block;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.link-icone-certificado:hover {
    transform: scale(1.1); 
    opacity: 0.85;
}

.imagem-reserva {
    width: 38px;       /* Um pouquinho maior para facilitar o clique */
    height: 38px;
    object-fit: contain;
}

/* --- ESTILIZAÇÃO DO LADO DO CADASTRO --- */
.logo-neon {
    width: 140px; /* Tamanho ajustável do símbolo de mais (+) médico */
    height: 140px;
    object-fit: contain;
    margin-bottom: 25px;
  }
 
.texto-chamada {
    font-size: 20px;
    margin-bottom: 10px;
    opacity: 0.9;
}

.link-registrar {
    font-size: 18px;
    font-weight: bold;
}

.link-registrar a {
    color: #EA77F0;
    text-decoration: underline;
}

/* --- RESPONSIVIDADE (Telas de Celular) --- */
@media (max-width: 768px) {
    .caixa-menu {
        flex-direction: column; /* No celular, o cadastro vai para baixo do login */
        height: auto;           /* Permite a caixa crescer para caber tudo verticalmente */
        min-height: 550px;
        padding: 20px;
    }
    .coluna-login, .coluna-cadastro {
        width: 100%;
        padding-left: 0;
    }
    .coluna-cadastro {
        margin-top: 40px;
    }
    .grupo-input input {
        width: 100%; /* Ocupa a largura total no mobile */
    }
}
.imagem-reserva, .logo-neon {
    background-color: transparent !important;
    background: none !important;
    border: none;
}/* ==========================================================================
   ALINHAMENTO DO TOPO DA TELA DE CADASTRO
   ========================================================================== */

/* Posicionamento do grupo de acordo com o seu Figma */
.topo-plataforma {
    position: absolute;
    top: 43px;  /* top: 43.09px do Figma */
    left: 33px; /* left: 33px do Figma */
    z-index: 100;
}

/* Container que junta a Imagem e o Texto da Plataforma */
.logo-container {
    display: flex;
    align-items: center;
    gap: 12px; /* Espaçamento perfeito entre a imagem e o texto */
}

/* Configuração da nova imagem da Logo */
.imagem-logo-topo {
    width: 42px; /* Tamanho ideal para o cabeçalho */
    height: 42px;
    object-fit: contain; /* Garante que a imagem não mude de proporção */
    filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.6)); /* Dá um leve efeito brilhante neon em volta da cruz */
}

/* Texto LaudoMed ao lado da Logo */
.nome-plataforma {
    font-family: 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
}
/* Texto LaudoMed */
.nome-plataforma {
    color: #FFFFFF;
    font-size: 32px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

/* --- OUTROS ELEMENTOS --- */
.rodape-cadastro {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #FFFFFF;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    opacity: 0.8;
    z-index: 10;
}

.container-cadastro {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
}
/* ==========================================================================
   CARDS DE SELEÇÃO DE PERFIL (TELA DE CADASTRO)
   ========================================================================== */

/* Envolve todo o bloco central e garante alinhamento vertical perfeito */
.fluxo-cadastro-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px; /* Distância entre os cards e o botão voltar */
    margin-top: 60px; /* Evita bater no logo superior */
}

/* Container que alinha os 3 cards horizontalmente */
.cards-perfis-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* Espaço entre cada card branco */
}

/* Estrutura de cada Card Branco Individual */
.card-perfil {
    width: 280px;
    height: 300px;
    background-color: #FFFFFF; /* Caixa branca sem transparência */
    border-radius: 15px;       /* Raio de canto de 15 graus/px */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 35px 20px;
    box-sizing: border-box;
    text-decoration: none; /* Remove sublinhado de link */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave de fundo */
}

/* Efeito sutil ao passar o mouse por cima do card */
.card-perfil:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Área interna que segura as ilustrações */
.wrapper-icone {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.icone-perfil {
    max-width: 180px;
    max-height: 150px;
    object-fit: contain;
}

/* Texto interno em preto abaixo do ícone */
.titulo-perfil {
    color: #000000; /* Texto estritamente preto */
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.5px;
    margin-top: 15px;
}

/* --- BOTÃO RETORNAR COM SETA --- */
.container-voltar {
    display: flex;
    justify-content: center;
    width: 100%;
}

.link-voltar {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #000000; /* Cor do texto preta igual ao print */
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.link-voltar:hover {
    opacity: 0.7;
}

/* Desenho do triângulo/ponta de seta apontada para a esquerda */
.seta-esquerda {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 14px solid #000000; /* Triângulo feito com borda */
    display: inline-block;
}
/* ==========================================================================
   FORÇAR CAMADAS CORRETAS (ANTI-CONFLITO)
   ========================================================================== */

/* Prende o fundo lá atrás de tudo */
.background-decorativo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Camada mais baixa */
    pointer-events: none;
}

/* Garante que o container de cadastro passe por cima do fundo */
main.container-cadastro {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100vh !important;
    width: 100% !important;
    position: relative !important;
    z-index: 999 !important; /* Força máxima para ficar na frente */
}

/* Alinha o fluxo de forma vertical */
.fluxo-cadastro-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 1000;
}
.link-cadastro {
    color: #00E5FF; /* Mesma cor ciano neon que usamos no logo */
    text-decoration: none; /* Remove aquele sublinhado padrão */
    font-weight: 600; /* Deixa a palavra um pouco mais gordinha/em destaque */
    transition: color 0.2s ease;
}

/* Efeito ao passar o mouse por cima da palavra */
.link-cadastro:hover {
    color: #FFFFFF; /* Muda para branco quando o mouse passa em cima */
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.6); /* Dá um leve brilho neon */
}
/* ==========================================================================
   REGRAS DE RESPONSIVIDADE (PARA CELULARES E TABLETS)
   ========================================================================== */

/* Quando a tela for menor que 968px (tamanho de tablets e celulares) */
@media (max-width: 968px) {
    
    /* Afasta um pouco o container do topo para não bater na logo */
    .fluxo-cadastro-wrapper {
        margin-top: 140px; /* Dá espaço para a logo que está fixa no topo */
        gap: 30px;
        padding: 0 20px; /* Evita que os cards encostem nas bordas físicas do celular */
    }

    /* Muda o alinhamento dos cards de LINHA para COLUNA (um embaixo do outro) */
    .cards-perfis-container {
        flex-direction: column;
        gap: 20px; /* Diminui o espaçamento entre eles no celular */
        width: 100%;
    }

    /* Ajusta o tamanho dos cards para se adaptarem a telas menores */
    .card-perfil {
        width: 100%;
        max-width: 320px; /* Largura máxima confortável para as mãos no celular */
        height: auto; /* Deixa a altura flexível de acordo com o conteúdo */
        padding: 25px 20px; /* Compacta um pouco o preenchimento interno */
    }

    /* Ajusta o tamanho dos ícones para não sumirem ou estourarem */
    .icone-perfil {
        max-width: 130px;
        max-height: 110px;
        margin-bottom: 10px;
    }

    /* Diminui um pouquinho o texto da logo no celular para não quebrar linha */
    .nome-plataforma {
        font-size: 26px;
    }
    
    /* Ajusta a posição da logo para não ficar colada demais na bordinha */
    .topo-plataforma {
        top: 25px;
        left: 20px;
    }
}
@media (max-width: 968px) {
    .imagem-logo-topo {
        width: 35px;
        height: 35px;
    }
    .nome-plataforma {
        font-size: 24px;
    }
}