/* ==========================================================================
   CYBERPUNK-GLOBAL.CSS - Estilos cyberpunk para toda la aplicación
   Mantiene la paleta de colores base, añade efectos cyberpunk
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES CYBERPUNK (complementan las existentes)
   ========================================================================== */
:root {
    --cyber-purple: #8b5cf6;
    --cyber-purple-light: #a78bfa;
    --cyber-purple-dark: #7c3aed;
    --cyber-cyan: #06b6d4;
    --cyber-cyan-light: #22d3ee;
    --cyber-pink: #ec4899;
    --cyber-glow-purple: rgba(139, 92, 246, 0.3);
    --cyber-glow-cyan: rgba(6, 182, 212, 0.3);
    --cyber-border: rgba(139, 92, 246, 0.2);
    --cyber-border-hover: rgba(139, 92, 246, 0.5);
}

/* ==========================================================================
   2. CARDS GLOBALES - Efecto cyberpunk
   ========================================================================== */
.card,
.action-card,
.stat-card,
.feature-card,
.info-card,
.exam-card,
.result-card,
.question-card,
.materia-card,
.plan-card,
.pricing-card,
.testimonial-card,
.faq-item {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
    border: 1px solid var(--cyber-border) !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease !important;
}

.card::before,
.action-card::before,
.stat-card::before,
.feature-card::before,
.info-card::before,
.exam-card::before,
.result-card::before,
.question-card::before,
.materia-card::before,
.plan-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyber-purple), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover,
.action-card:hover,
.stat-card:hover,
.feature-card:hover,
.info-card:hover,
.exam-card:hover,
.result-card:hover,
.question-card:hover,
.materia-card:hover,
.plan-card:hover {
    border-color: var(--cyber-border-hover) !important;
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.15) !important;
}

.card:hover::before,
.action-card:hover::before,
.stat-card:hover::before,
.feature-card:hover::before,
.info-card:hover::before,
.exam-card:hover::before,
.result-card:hover::before,
.question-card:hover::before,
.materia-card:hover::before,
.plan-card:hover::before {
    opacity: 1;
}

/* ==========================================================================
   3. BOTONES CYBERPUNK
   ========================================================================== */
.btn,
button:not(.nav-toggle):not(.close-btn) {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease !important;
}

.btn-primary,
.btn-main,
button.primary {
    background: linear-gradient(135deg, var(--cyber-purple) 0%, var(--cyber-purple-dark) 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3) !important;
}

.btn-primary:hover,
.btn-main:hover,
button.primary:hover {
    background: linear-gradient(135deg, var(--cyber-purple-light) 0%, var(--cyber-purple) 100%) !important;
    box-shadow: 0 6px 25px rgba(139, 92, 246, 0.5) !important;
    transform: translateY(-2px);
}

.btn-secondary,
button.secondary {
    background: transparent !important;
    border: 1px solid var(--cyber-border-hover) !important;
    color: var(--text-primary) !important;
}

.btn-secondary:hover,
button.secondary:hover {
    border-color: var(--cyber-purple) !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2) !important;
    background: rgba(139, 92, 246, 0.1) !important;
}

/* Efecto de luz que pasa por el botón */
.btn::after,
button:not(.nav-toggle):not(.close-btn)::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.btn:hover::after,
button:not(.nav-toggle):not(.close-btn):hover::after {
    left: 100%;
}

/* ==========================================================================
   4. INPUTS Y FORMS CYBERPUNK
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
select,
textarea {
    background: rgba(15, 23, 42, 0.8) !important;
    border: 1px solid var(--cyber-border) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--cyber-cyan) !important;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.2) !important;
}

/* ==========================================================================
   5. TABLAS CYBERPUNK
   ========================================================================== */
table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--cyber-border);
    border-radius: 12px;
    overflow: hidden;
}

thead {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);
}

th {
    border-bottom: 1px solid var(--cyber-border);
    padding: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    color: var(--cyber-purple-light);
}

td {
    padding: 1rem;
    border-bottom: 1px solid rgba(139, 92, 246, 0.1);
}

tr:hover td {
    background: rgba(139, 92, 246, 0.05);
}

tr:last-child td {
    border-bottom: none;
}

/* ==========================================================================
   6. PROGRESS BARS CYBERPUNK
   ========================================================================== */
.progress-bar,
.progress,
[class*="progress"] {
    background: rgba(15, 23, 42, 0.8) !important;
    border-radius: 10px !important;
    overflow: hidden;
    position: relative;
}

.progress-bar::before,
.progress::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid var(--cyber-border);
    border-radius: 10px;
    pointer-events: none;
}

.progress-fill,
.progress-bar > div,
[class*="progress-fill"],
[class*="progress-value"] {
    background: linear-gradient(90deg, var(--cyber-purple), var(--cyber-cyan)) !important;
    border-radius: 10px !important;
    position: relative;
}

.progress-fill::after,
.progress-bar > div::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: progress-shine 2s infinite;
}

@keyframes progress-shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ==========================================================================
   7. BADGES Y TAGS CYBERPUNK
   ========================================================================== */
.badge,
.tag,
.chip,
.label,
[class*="badge"],
[class*="tag"] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(6, 182, 212, 0.2)) !important;
    border: 1px solid var(--cyber-border) !important;
    border-radius: 50px !important;
    padding: 0.35rem 0.85rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.badge-success,
.tag-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(6, 182, 212, 0.2)) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
}

.badge-warning,
.tag-warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2)) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: #fbbf24 !important;
}

.badge-error,
.badge-danger,
.tag-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(236, 72, 153, 0.2)) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

/* ==========================================================================
   8. MODALS Y POPUPS CYBERPUNK
   ========================================================================== */
.modal,
.popup,
.dialog,
[class*="modal"],
[class*="popup"] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.99) 100%) !important;
    border: 1px solid var(--cyber-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), 0 0 40px rgba(139, 92, 246, 0.1) !important;
}

.modal::before,
.popup::before,
.dialog::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cyber-purple), var(--cyber-cyan), var(--cyber-purple));
    border-radius: 16px 16px 0 0;
}

.modal-overlay,
.popup-overlay,
[class*="overlay"] {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(4px) !important;
}

/* ==========================================================================
   9. TOOLTIPS CYBERPUNK
   ========================================================================== */
[data-tooltip]::after,
.tooltip,
[class*="tooltip"] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
    border: 1px solid var(--cyber-border) !important;
    border-radius: 8px !important;
    color: var(--text-primary) !important;
    font-size: 0.8rem !important;
    padding: 0.5rem 0.75rem !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   10. ALERTS Y NOTIFICATIONS CYBERPUNK
   ========================================================================== */
.alert,
.notification,
.toast,
[class*="alert"],
[class*="notification"] {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
    border: 1px solid var(--cyber-border) !important;
    border-radius: 12px !important;
    position: relative;
    overflow: hidden;
}

.alert::before,
.notification::before,
.toast::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--cyber-purple), var(--cyber-cyan));
}

.alert-success::before {
    background: linear-gradient(180deg, #10b981, #06b6d4) !important;
}

.alert-warning::before {
    background: linear-gradient(180deg, #f59e0b, #fbbf24) !important;
}

.alert-error::before,
.alert-danger::before {
    background: linear-gradient(180deg, #ef4444, #ec4899) !important;
}

/* ==========================================================================
   11. TABS Y NAVIGATION CYBERPUNK
   ========================================================================== */
.tabs,
.tab-list,
[class*="tabs"] {
    border-bottom: 1px solid var(--cyber-border) !important;
}

.tab,
.tab-item,
[class*="tab-"] {
    position: relative;
    transition: all 0.3s ease !important;
}

.tab.active,
.tab-item.active,
[class*="tab-"].active {
    color: var(--cyber-purple-light) !important;
}

.tab.active::after,
.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cyber-purple), var(--cyber-cyan));
}

/* ==========================================================================
   12. LISTS CYBERPUNK
   ========================================================================== */
.list-item,
li.item,
[class*="list-item"] {
    border-left: 2px solid transparent;
    transition: all 0.3s ease;
    padding-left: 1rem;
}

.list-item:hover,
li.item:hover,
[class*="list-item"]:hover {
    border-left-color: var(--cyber-purple);
    background: rgba(139, 92, 246, 0.05);
}

/* ==========================================================================
   13. SEPARADORES Y LÍNEAS CYBERPUNK
   ========================================================================== */
hr,
.divider,
.separator,
[class*="divider"] {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--cyber-border), transparent) !important;
    margin: 1.5rem 0 !important;
}

/* ==========================================================================
   14. LOADING STATES CYBERPUNK
   ========================================================================== */
.loading,
.spinner,
[class*="loading"],
[class*="spinner"] {
    border-color: rgba(139, 92, 246, 0.2) !important;
    border-top-color: var(--cyber-purple) !important;
}

.skeleton,
[class*="skeleton"] {
    background: linear-gradient(90deg, 
        rgba(30, 41, 59, 0.5) 0%, 
        rgba(139, 92, 246, 0.1) 50%, 
        rgba(30, 41, 59, 0.5) 100%) !important;
    background-size: 200% 100% !important;
    animation: skeleton-pulse 1.5s infinite !important;
}

@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   15. ICONS CYBERPUNK GLOW
   ========================================================================== */
.icon-glow,
[class*="icon"]:hover {
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
    transition: filter 0.3s ease;
}

/* ==========================================================================
   16. SECTION HEADERS CYBERPUNK
   ========================================================================== */
.section-title,
.section-header h2,
h2.title,
.page-title {
    position: relative;
    display: inline-block;
}

.section-title::after,
.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--cyber-purple), var(--cyber-cyan));
    border-radius: 2px;
}

/* ==========================================================================
   17. CONTAINERS CON EFECTO CYBER
   ========================================================================== */
.cyber-container {
    position: relative;
}

.cyber-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px),
        linear-gradient(rgba(139, 92, 246, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    opacity: 0.5;
}

/* ==========================================================================
   18. HOVER EFFECTS GLOBALES
   ========================================================================== */
a:not(.btn):not(button):hover {
    color: var(--cyber-cyan) !important;
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
}

/* ==========================================================================
   19. SELECTION STYLE
   ========================================================================== */
::selection {
    background: rgba(139, 92, 246, 0.3);
    color: #fff;
}

::-moz-selection {
    background: rgba(139, 92, 246, 0.3);
    color: #fff;
}

/* ==========================================================================
   20. FOCUS STATES CYBERPUNK
   ========================================================================== */
*:focus-visible {
    outline: 2px solid var(--cyber-purple) !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   21. ANIMACIONES CYBERPUNK GLOBALES
   ========================================================================== */
@keyframes cyber-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

@keyframes cyber-glow-pulse {
    0%, 100% { box-shadow: 0 0 5px var(--cyber-glow-purple); }
    50% { box-shadow: 0 0 20px var(--cyber-glow-purple), 0 0 30px var(--cyber-glow-cyan); }
}

.cyber-flicker {
    animation: cyber-flicker 3s infinite;
}

.cyber-glow-pulse {
    animation: cyber-glow-pulse 2s infinite;
}

/* ==========================================================================
   22. RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 768px) {
    .card:hover,
    .action-card:hover,
    .stat-card:hover,
    .feature-card:hover {
        transform: none;
    }
    
    .btn:hover,
    button:hover {
        transform: none;
    }
}