:root {

    /* Colores principales - Paleta vibrante y moderna */

    --primary: #6366f1;

    --primary-dark: #4f46e5;

    --primary-light: #818cf8;

    --secondary: #ec4899;

    --secondary-dark: #db2777;

    --accent: #14b8a6;

    --accent-dark: #0d9488;

    

    /* Gradientes */

    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

    --gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

    --gradient-warning: linear-gradient(135deg, #fa709a 0%, #fee140 100%);

    --gradient-dark: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);

    

    /* Colores de fondo */

    --bg-primary: #0f172a;

    --bg-secondary: #1e293b;

    --bg-tertiary: #334155;

    --bg-card: rgba(30, 41, 59, 0.8);

    --bg-glass: rgba(255, 255, 255, 0.05);

    

    /* Colores de texto */

    --text-primary: #f1f5f9;

    --text-secondary: #cbd5e1;

    --text-muted: #94a3b8;

    

    /* Estados */

    --success: #10b981;

    --warning: #f59e0b;

    --error: #ef4444;

    --info: #3b82f6;

    

    /* Sombras */

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);

    

    /* Bordes */

    --border-radius: 12px;

    --border-radius-lg: 16px;

    --border-radius-full: 9999px;

    

    /* Espaciado */

    --spacing-xs: 0.25rem;

    --spacing-sm: 0.5rem;

    --spacing-md: 1rem;

    --spacing-lg: 1.5rem;

    --spacing-xl: 2rem;

    

    /* Transiciones */

    --transition-fast: 150ms ease-in-out;

    --transition-normal: 300ms ease-in-out;

    --transition-slow: 500ms ease-in-out;

    

    /* Tipografía */

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --font-mono: 'Fira Code', 'Courier New', monospace;

}



/* Reset y base */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    font-size: 16px;

    scroll-behavior: smooth;

}



body {

    font-family: var(--font-sans);

    background: var(--bg-primary);

    color: var(--text-primary);

    line-height: 1.6;

    overflow-x: hidden;

    min-height: 100vh;

}



/* Fondo animado con partículas */

body::before {

    content: '';

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: 

        radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),

        radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),

        radial-gradient(circle at 40% 20%, rgba(20, 184, 166, 0.1) 0%, transparent 50%);

    z-index: -1;

    animation: float 20s ease-in-out infinite;

}



@keyframes float {

    0%, 100% { transform: translateY(0) rotate(0deg); }

    50% { transform: translateY(-20px) rotate(5deg); }

}



/* Tipografía */

h1, h2, h3, h4, h5, h6 {

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: var(--spacing-md);

}



h1 { font-size: 2.5rem; }

h2 { font-size: 2rem; }

h3 { font-size: 1.75rem; }

h4 { font-size: 1.5rem; }

h5 { font-size: 1.25rem; }

h6 { font-size: 1rem; }



p {

    margin-bottom: var(--spacing-md);

}



a {

    color: var(--primary-light);

    text-decoration: none;

    transition: color var(--transition-fast);

}



a:hover {

    color: var(--primary);

}



/* Contenedores */

.container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 var(--spacing-lg);

}



/* Tarjetas con glassmorphism */

.card {

    background: var(--bg-card);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: var(--border-radius);

    padding: var(--spacing-lg);

    box-shadow: var(--shadow-lg);

    transition: all var(--transition-normal);

}



.card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-xl), var(--shadow-glow);

    border-color: rgba(99, 102, 241, 0.3);

}



.card-header {

    margin-bottom: var(--spacing-lg);

    padding-bottom: var(--spacing-md);

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.card-title {

    font-size: 1.5rem;

    font-weight: 700;

    margin-bottom: var(--spacing-sm);

}



.card-subtitle {

    color: var(--text-muted);

    font-size: 0.875rem;

}



/* Botones */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--spacing-sm);

    padding: 0.75rem 1.5rem;

    font-size: 1rem;

    font-weight: 600;

    border: none;

    border-radius: var(--border-radius);

    cursor: pointer;

    transition: all var(--transition-fast);

    text-decoration: none;

    white-space: nowrap;

}



.btn:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}



.btn-primary {

    background: var(--gradient-primary);

    color: white;

    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);

}



.btn-primary:hover:not(:disabled) {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);

}



.btn-secondary {

    background: var(--gradient-secondary);

    color: white;

    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);

}



.btn-secondary:hover:not(:disabled) {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4);

}



.btn-success {

    background: var(--gradient-success);

    color: white;

}



.btn-outline {

    background: transparent;

    color: var(--text-primary);

    border: 2px solid rgba(255, 255, 255, 0.2);

}



.btn-outline:hover:not(:disabled) {

    background: rgba(255, 255, 255, 0.1);

    border-color: var(--primary);

}



.btn-sm {

    padding: 0.5rem 1rem;

    font-size: 0.875rem;

}



.btn-lg {

    padding: 1rem 2rem;

    font-size: 1.125rem;

}



/* Formularios */

.form-group {

    margin-bottom: var(--spacing-lg);

}



.form-label {

    display: block;

    margin-bottom: var(--spacing-sm);

    font-weight: 600;

    color: var(--text-secondary);

}



.form-input,

.form-select,

.form-textarea {

    width: 100%;

    padding: 0.75rem 1rem;

    background: rgba(255, 255, 255, 0.05);

    border: 2px solid rgba(255, 255, 255, 0.1);

    border-radius: var(--border-radius);

    color: var(--text-primary);

    font-size: 1rem;

    font-family: var(--font-sans);

    transition: all var(--transition-fast);

}

.form-select option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}


.form-input:focus,

.form-select:focus,

.form-textarea:focus {

    outline: none;

    border-color: var(--primary);

    background: rgba(255, 255, 255, 0.08);

    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);

}



.form-textarea {

    resize: vertical;

    min-height: 100px;

}



.form-error {

    color: var(--error);

    font-size: 0.875rem;

    margin-top: var(--spacing-xs);

}



/* Grid */

.grid {

    display: grid;

    gap: var(--spacing-lg);

}



.grid-2 { grid-template-columns: repeat(2, 1fr); }

.grid-3 { grid-template-columns: repeat(3, 1fr); }

.grid-4 { grid-template-columns: repeat(4, 1fr); }



@media (max-width: 1024px) {

    .grid-4 { grid-template-columns: repeat(2, 1fr); }

    .grid-3 { grid-template-columns: repeat(2, 1fr); }

}



@media (max-width: 640px) {

    .grid-2,

    .grid-3,

    .grid-4 {

        grid-template-columns: 1fr;

    }

}



/* Badges */

.badge {

    display: inline-flex;

    align-items: center;

    padding: 0.25rem 0.75rem;

    font-size: 0.75rem;

    font-weight: 600;

    border-radius: var(--border-radius-full);

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.badge-success {

    background: rgba(16, 185, 129, 0.2);

    color: var(--success);

}



.badge-warning {

    background: rgba(245, 158, 11, 0.2);

    color: var(--warning);

}



.badge-error {

    background: rgba(239, 68, 68, 0.2);

    color: var(--error);

}



.badge-info {

    background: rgba(59, 130, 246, 0.2);

    color: var(--info);

}



/* Modal */

.modal-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.7);

    backdrop-filter: blur(5px);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 1000;

    opacity: 0;

    pointer-events: none;

    transition: opacity var(--transition-normal);

}



.modal-overlay.active {

    opacity: 1;

    pointer-events: all;

}



.modal {

    background: var(--bg-secondary);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: var(--border-radius-lg);

    padding: var(--spacing-xl);

    max-width: 600px;

    width: 90%;

    max-height: 90vh;

    overflow-y: auto;

    box-shadow: var(--shadow-xl);

    transform: scale(0.9);

    transition: transform var(--transition-normal);

}



.modal-overlay.active .modal {

    transform: scale(1);

}



.modal-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: var(--spacing-lg);

}



.modal-close {

    background: none;

    border: none;

    color: var(--text-muted);

    font-size: 1.5rem;

    cursor: pointer;

    padding: 0.5rem;

    transition: color var(--transition-fast);

}



.modal-close:hover {

    color: var(--text-primary);

}



/* Toast notifications */

.toast-container {

    position: fixed;

    top: var(--spacing-lg);

    right: var(--spacing-lg);

    z-index: 2000;

    display: flex;

    flex-direction: column;

    gap: var(--spacing-sm);

}



.toast {

    background: var(--bg-secondary);

    border-left: 4px solid var(--primary);

    border-radius: var(--border-radius);

    padding: var(--spacing-md) var(--spacing-lg);

    box-shadow: var(--shadow-xl);

    min-width: 300px;

    animation: slideIn 0.3s ease-out;

}



@keyframes slideIn {

    from {

        transform: translateX(100%);

        opacity: 0;

    }

    to {

        transform: translateX(0);

        opacity: 1;

    }

}



.toast-success { border-left-color: var(--success); }

.toast-error { border-left-color: var(--error); }

.toast-warning { border-left-color: var(--warning); }

.toast-info { border-left-color: var(--info); }



/* Loading spinner */

.spinner {

    width: 40px;

    height: 40px;

    border: 4px solid rgba(255, 255, 255, 0.1);

    border-top-color: var(--primary);

    border-radius: 50%;

    animation: spin 1s linear infinite;

}



@keyframes spin {

    to { transform: rotate(360deg); }

}



.loading-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(15, 23, 42, 0.9);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 3000;

}



/* Utilidades */

.text-center { text-align: center; }

.text-right { text-align: right; }

.text-muted { color: var(--text-muted); }

.text-success { color: var(--success); }

.text-error { color: var(--error); }

.text-warning { color: var(--warning); }



.mt-1 { margin-top: var(--spacing-sm); }

.mt-2 { margin-top: var(--spacing-md); }

.mt-3 { margin-top: var(--spacing-lg); }

.mb-1 { margin-bottom: var(--spacing-sm); }

.mb-2 { margin-bottom: var(--spacing-md); }

.mb-3 { margin-bottom: var(--spacing-lg); }



.flex { display: flex; }

.flex-col { flex-direction: column; }

.items-center { align-items: center; }

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }

.gap-1 { gap: var(--spacing-sm); }

.gap-2 { gap: var(--spacing-md); }

.gap-3 { gap: var(--spacing-lg); }



.hidden { display: none !important; }



/* Scrollbar personalizado */

::-webkit-scrollbar {

    width: 10px;

    height: 10px;

}



::-webkit-scrollbar-track {

    background: var(--bg-secondary);

}



::-webkit-scrollbar-thumb {

    background: var(--bg-tertiary);

    border-radius: var(--border-radius);

}



::-webkit-scrollbar-thumb:hover {

    background: var(--primary);

}