/* ========================================
   🎨 MODAL DE AUTENTICACIÓN - SISTEMA UNIFICADO
   ======================================== */

/* Importar Design Tokens y Sistema Unificado */
@import url('./design-tokens.css');
@import url('./forms-unified.css');

/* Modal overlay */
.auth-modal {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    background: var(--COLOR_BACKGROUND_OVERLAY);
    display: flex; 
    align-items: center; 
    justify-content: center;
    z-index: var(--Z_INDEX_MODAL);
    backdrop-filter: blur(2px);
}

/* Contenido del modal */
.auth-modal-content {
    background: var(--COLOR_BACKGROUND_CARD);
    padding: var(--SPACING_XXL);
    border-radius: var(--BORDER_RADIUS_LG);
    min-width: 380px;
    max-width: 95vw;
    position: relative;
    box-shadow: var(--BOX_SHADOW_XL);
    font-family: var(--font-sans);
    border: 1px solid var(--COLOR_BORDER_PRIMARY);
}

/* Botón de cerrar */
.auth-modal-close {
    position: absolute;
    top: var(--SPACING_MD);
    right: var(--SPACING_MD);
    background: none;
    border: none;
    font-size: var(--FONT_SIZE_XL);
    color: var(--COLOR_TEXT_SECONDARY);
    cursor: pointer;
    width: var(--SPACING_XXL);
    height: var(--SPACING_XXL);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: var(--transition-fast);
}

.auth-modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Título del modal */
.auth-modal h2 {
    margin: 0 0 var(--space-6) 0;
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    text-align: center;
}

/* Enlaces de alternancia */
.auth-toggle {
    text-align: center;
    margin-top: var(--space-4);
}

.auth-toggle a {
    color: var(--primary-500);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: var(--transition-fast);
}

.auth-toggle a:hover {
    color: var(--primary-600);
    text-decoration: underline;
}

/* Responsivo */
@media (max-width: 480px) {
    .auth-modal-content {
        min-width: 90vw;
        padding: var(--space-6);
        margin: var(--space-4);
    }
    
    .auth-modal-close {
        top: var(--space-3);
        right: var(--space-3);
    }
}