/* Luua Registration Styles */
/* Empowering Purposeful Play */

/* ===== REGISTRO PAGE ===== */
.registro-page {
    background: var(--bg-neutral);
    min-height: 100vh;
    font-family: 'Kollektif', 'Open Sans', sans-serif;
    position: relative;
}

.registro-page {
    position: relative;
}

/* ===== REGISTRO CONTAINER ===== */
.registro-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

/* Optimizar centrado para móviles */
@media (max-width: 767.98px) {
    .registro-container {
        align-items: flex-start;
        padding: 1rem 0.5rem;
        padding-top: 2rem;
    }
}

.registro-form {
    padding: 2.5rem;
    width: 100%;
    max-width: 500px;
    background-image: url('/img/fondos/17.webp');
    background-repeat: round;
}

/* Optimizar formulario para móviles */
@media (max-width: 767.98px) {
    .registro-form {
        padding: 1.5rem 1.25rem;
        max-width: 100%;
        border-radius: var(--luua-radius-lg);
        margin-bottom: 1rem;
    }
}

/* ===== SELECTOR DE IDIOMA ===== */
.registro-form .btn-group {
    box-shadow: var(--shadow-sm);
}

.registro-form .btn-group .btn.active {
    background: var(--luua-turquoise);
    color: var(--luua-canvas);
    border-color: var(--luua-turquoise);
}

/* ===== REGISTRO HEADER ===== */
.registro-header {
    text-align: center;
}

.registro-logo {
    max-width: 120px;
    margin-bottom: 1rem;
}

/* Logo optimizado para móviles */
@media (max-width: 767.98px) {
    .registro-logo {
        max-width: 100px;
        margin-bottom: 0.75rem;
    }
}

.registro-title {
    font-family: 'LUUA Regular', cursive;
    font-size: 2rem;
    color: var(--luua-black);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

/* Estilos LUUA minimalistas para formularios - solo colores */
.registro-form .form-control:focus {
    border-color: var(--luua-turquoise);
    box-shadow: 0 0 0 0.2rem var(--luua-turquoise-focus);
}

.registro-form .input-group-text {
    background: linear-gradient(135deg, var(--luua-turquoise), var(--luua-violet));
    color: var(--luua-canvas);
    border-color: var(--luua-turquoise);
}

/* ===== SUCCESS STYLES ===== */
.success-icon {
    font-size: 4rem;
    color: var(--luua-lime);
    margin-bottom: 1rem;
}

.luua-success-title {
    font-family: 'LUUA Regular', cursive;
    color: var(--luua-black);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.luua-success-text {
    color: var(--luua-black);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.luua-success-subtext {
    color: var(--color-gray-dark);
    font-size: 1rem;
    margin-bottom: 2rem;
}

/* ===== ESTILOS ESPECÍFICOS PARA REGISTRO ===== */
/* Definiciones de botones movidas a shared.css para centralización */

/* ===== VALIDATION STYLES ===== */
.was-validated .form-control:valid {
    border-color: var(--luua-lime);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23CEDC28' d='m2.3 6.73.94-.94 1.89 1.89 3.78-3.78.94.94-4.72 4.72z'/%3e%3c/svg%3e");
}

.was-validated .form-control:valid ~ .invalid-feedback {
    display: none;
}

.was-validated .form-control:invalid {
    border-color: var(--luua-pink);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23FF66C4'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 1.4 1.4 1.4-1.4'/%3e%3c/svg%3e");
}

.was-validated .form-control:invalid ~ .invalid-feedback {
    display: block;
}

.invalid-feedback {
    display: none;
    color: var(--luua-pink);
    font-weight: 500;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Estilos de password-toggle heredados de shared.css */

/* Estilos de alertas heredados de shared.css */

/* ===== RESPONSIVE ===== */
@media (max-width: 576px) {
    .registro-form {
        padding: 1.5rem;
    }
    
    .registro-title {
        font-size: 1.6rem;
    }
    
    .registro-logo {
        max-width: 100px;
    }
    
    .luua-success-title {
        font-size: 1.5rem;
    }
    
    .success-icon {
        font-size: 3rem;
    }
}

/* ===== SELECCIÓN DE TIPO ===== */
.tipo-seleccion {
    margin-bottom: 2rem;
}

.tipo-card {
    display: flex;
    align-items: center;
    padding: 1.25rem;
    border: 2px solid var(--luua-lime-light);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 0.2rem;
    position: relative;
}

.tipo-card:hover {
    border-color: var(--luua-turquoise);
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tipo-card.selected {
    border-color: var(--luua-turquoise);
    background: rgba(70, 191, 200, 0.1);
    box-shadow: 0 8px 25px rgba(70, 191, 200, 0.3), 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.tipo-card.independiente-card:hover {
    border-color: var(--luua-lime);
    box-shadow: 0 6px 20px rgba(205, 220, 40, 0.25);
}

.tipo-card.independiente-card.selected {
    border-color: var(--luua-lime);
    background: rgba(205, 220, 40, 0.1);
    box-shadow: 0 8px 25px rgba(205, 220, 40, 0.35), 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.tipo-card.colegio-card:hover {
    border-color: var(--luua-violet);
    box-shadow: 0 6px 20px rgba(203, 108, 230, 0.25);
}

.tipo-card.colegio-card.selected {
    border-color: var(--luua-violet);
    background: rgba(203, 108, 230, 0.1);
    box-shadow: 0 8px 25px rgba(203, 108, 230, 0.35), 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.tipo-card.empresa-card:hover {
    border-color: var(--luua-pink);
    box-shadow: 0 6px 20px rgba(255, 102, 196, 0.25);
}

.tipo-card.empresa-card.selected {
    border-color: var(--luua-pink);
    background: rgba(255, 102, 196, 0.1);
    box-shadow: 0 8px 25px rgba(255, 102, 196, 0.35), 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.tipo-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.independiente-card .tipo-icon {
    background: var(--luua-lime);
    color: white;
}

.colegio-card .tipo-icon {
    background: var(--luua-violet);
    color: white;
}

.empresa-card .tipo-icon {
    background: var(--luua-pink);
    color: white;
}

.tipo-content {
    flex-grow: 1;
}

.tipo-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--luua-black);
    margin-bottom: 0.25rem;
}

.tipo-description {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.4;
}


/* ===== RESPONSIVE DESIGN ===== */

/* Tablets */
@media (max-width: 991.98px) {
    .registro-form {
        max-width: 450px;
        padding: 2rem 1.5rem;
    }

    .registro-title {
        font-size: 1.75rem;
    }
}

/* Móviles estándar */
@media (max-width: 767.98px) {
    .registro-form {
        padding: 1.25rem 1rem;
        max-width: 100%;
    }

    .registro-title {
        font-size: 1.5rem;
    }

    .registro-form .form-label {
        font-size: 0.9rem;
    }

    .registro-form .form-control {
        font-size: 1rem;
        padding: 0.75rem;
    }

    .registro-form .btn {
        width: 100%;
        padding: 0.875rem;
        font-size: 1rem;
    }

    /* Optimizar tarjetas de tipo */
    .tipo-seleccion .row {
        gap: 1rem;
    }

    .tipo-card {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
    }

    .tipo-icon {
        margin-right: 0;
        margin-bottom: 0.75rem;
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .tipo-title {
        font-size: 1rem;
    }

    .tipo-description {
        font-size: 0.85rem;
    }
}

/* Móviles pequeños */
@media (max-width: 575.98px) {
    .registro-container {
        padding: 0.5rem;
    }

    .registro-form {
        padding: 1rem 0.75rem;
    }

    .registro-title {
        font-size: 1.25rem;
    }

    .registro-form .form-control {
        font-size: 0.95rem;
        padding: 0.625rem;
    }

    .registro-form .btn {
        padding: 0.75rem;
        font-size: 0.95rem;
    }

    .tipo-card {
        padding: 0.875rem;
    }

    .tipo-icon {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}

/* Animaciones heredadas de shared.css */