/* ===== registro.css ===== */
/* Estilos específicos para la página de registro */

/* Mensaje de éxito */
.register-success {
    background: #E8F5E9;
    color: #2E7D32;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    display: none;
    border-left: 5px solid #4CAF50;
    text-align: left;
}

.register-success.visible {
    display: block;
}

/* Hints y ayudas visuales */
.input-group .hint {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
    min-height: 20px;
}

/* Select personalizado (similar a los inputs) */
.select-wrapper {
    padding: 0 16px;
    background: #FFF9F7;
    border: 2px solid #FFDAB9;
    border-radius: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.select-wrapper:focus-within {
    border-color: #FFA07A;
    box-shadow: 0 0 0 4px rgba(255, 160, 122, 0.2);
}

.select-wrapper select {
    width: 100%;
    padding: 16px 0;
    border: none;
    background: transparent;
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    color: #333;
    outline: none;
    cursor: pointer;
}

/* Requisitos de contraseña */
.password-requirements {
    margin-top: 8px;
    font-size: 13px;
    color: #888;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.password-requirements span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.password-requirements .valid {
    color: #4CAF50;
}

.password-requirements .invalid {
    color: #D34B4B;
}

/* Barra de fuerza de contraseña */
.password-strength {
    margin-top: 5px;
    height: 4px;
    border-radius: 4px;
    background: #FFDAB9;
    transition: width 0.3s, background 0.3s;
    width: 0%;
}

.password-strength.weak {
    width: 33%;
    background: #D34B4B;
}

.password-strength.medium {
    width: 66%;
    background: #FFA07A;
}

.password-strength.strong {
    width: 100%;
    background: #4CAF50;
}

/* Botón de regreso al login */
.back-to-login {
    margin-top: 20px;
    font-size: 15px;
    color: #888;
}

.back-to-login a {
    color: #FFA07A;
    font-weight: 700;
    text-decoration: none;
}

.back-to-login a:hover {
    text-decoration: underline;
}

/* Botón deshabilitado */
.btn-login:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 480px) {
    .password-requirements {
        font-size: 12px;
        gap: 4px 10px;
    }
    .select-wrapper select {
        font-size: 14px;
        padding: 14px 0;
    }
}