/* Reset Geral - Focado em Mobile First */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Container Principal - Garante que o formulário não grude no topo ou fundo */
.container-cadastro {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: calc(100vh - 70px); /* Desconta a altura do seu header fixo */
    background-color: #f8f9fa;
    padding: 10px; /* Reduzido para ganhar espaço lateral no celular */
}

/* Card Branco Compacto */
.card-cadastro {
    background: #ffffff;
    width: 100%;
    max-width: 480px;
    padding: 15px 12px; /* Compactado */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    margin-top: 5px;
}

/* Cabeçalho do Cadastro - Menor para economizar espaço */
.cadastro-header {
    text-align: center;
    margin-bottom: 15px;
}

.cadastro-header h2 {
    color: #0056b3;
    font-size: 1.3rem;
    margin-bottom: 2px;
}

.cadastro-header p {
    color: #7f8c8d;
    font-size: 0.75rem;
}

/* Layout em Linha (Dois campos por linha em telas pequenas) */
.input-row {
    display: flex;
    gap: 8px; /* Espaço entre os campos da mesma linha */
}

/* Grupos de Entrada */
.input-group {
    margin-bottom: 10px;
    text-align: left;
    flex: 1; /* Faz os campos dividirem o espaço na .input-row */
}


/* Ajuste para o campo de senha não sobrepor o ícone do olho */
#senha {
    padding-right: 40px !important;
}

/* Efeito suave ao clicar no olho */
#toggleSenha {
    transition: color 0.3s ease;
    z-index: 10;
}

.input-group label {
    display: block;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 3px;
    font-size: 0.75rem; /* Letras menores para caber mais */
}

/* Container do ícone + input */
.input-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon i {
    position: absolute;
    left: 10px;
    color: #f1c40f;
    font-size: 0.9rem;
}

/* Estilo dos campos e selects compactos */
.input-icon input, 
.input-icon select {
    width: 100%;
    padding: 10px 8px 10px 32px; /* Padding reduzido */
    border: 1.5px solid #eee;
    border-radius: 8px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    background-color: #fcfcfc;
    color: #333;
    height: 40px; /* Altura fixa para uniformidade */
    -webkit-appearance: none; /* Estética limpa no iPhone */
}

/* Ajuste específico para selects (quando não couber ícone ou for muito estreito) */
select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230056b3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 25px !important;
}

/* Foco nos campos */
.input-icon input:focus,
.input-icon select:focus {
    border-color: #0056b3;
    background-color: #fff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 86, 179, 0.1);
}

/* Botão de Enviar Compacto */
.btn-cadastrar {
    width: 100%;
    padding: 14px;
    background-color: #0056b3;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.3s, transform 0.1s;
}

.btn-cadastrar:active {
    transform: scale(0.98);
}

/* Links do Rodapé do Formulário */
.cadastro-footer {
    text-align: center;
    margin-top: 15px;
    font-size: 0.8rem;
    color: #666;
}

.cadastro-footer a {
    color: #0056b3;
    font-weight: bold;
    text-decoration: none;
}

/* Ajustes para telas muito estreitas */
@media (max-width: 380px) {
    .input-row {
        flex-direction: column; /* Em celulares muito pequenos, volta a ser um por linha se necessário */
        gap: 0;
    }
    .input-group {
        margin-bottom: 8px;
    }
}