* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary: #8b5cf6;
            --primary-light: #a78bfa;
            --primary-dark: #7c3aed;
            --accent: #ec4899;
            --accent-light: #f472b6;
            --dark: #0a0a0f;
            --darker: #05050a;
            --card-bg: rgba(15, 15, 26, 0.9);
            --gray: #6b7280;
            --light-gray: #9ca3af;
            --text: #e5e7eb;
            --red: #ef4444;
            --red-light: #f87171;
            --success: #10b981;
        }

        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--dark);
            color: var(--text);
            line-height: 1.6;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            /* Agregar soporte para safe areas */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
        }

        /* Animated Background */
        .animated-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            overflow: hidden;
        }

        .grid-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(139, 92, 246, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(139, 92, 246, 0.03) 1px, transparent 1px);
            background-size: 60px 60px;
            animation: gridMove 30s linear infinite;
        }

        @keyframes gridMove {
            0% { transform: translate(0, 0); }
            100% { transform: translate(60px, 60px); }
        }

        .gradient-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.15;
            animation: float 20s ease-in-out infinite;
        }

        .orb-1 {
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, var(--primary), transparent);
            top: -250px;
            right: -250px;
            animation-delay: 0s;
        }

        .orb-2 {
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, var(--accent), transparent);
            bottom: -200px;
            left: -200px;
            animation-delay: 7s;
        }

        .orb-3 {
            width: 350px;
            height: 350px;
            background: radial-gradient(circle, var(--primary-light), transparent);
            top: 40%;
            left: 50%;
            animation-delay: 3s;
        }

        @keyframes float {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(50px, -50px) scale(1.1); }
            66% { transform: translate(-50px, 50px) scale(0.9); }
        }

        /* HOME PAGE */
        #home-page {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10;
            transition: opacity 0.6s ease, transform 0.6s ease;
            background: transparent;
        }

        #home-page.hidden {
            opacity: 0;
            transform: scale(0.95);
            pointer-events: none;
            visibility: hidden;
        }

        .home-header {
            text-align: center;
            margin-bottom: 80px;
            animation: fadeInDown 1s ease-out;
        }
        .profile-image {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    margin: 0 auto 30px auto;
    display: block;
    border: 3px solid transparent;
    background: 
        linear-gradient(var(--dark), var(--dark)) padding-box,
        linear-gradient(135deg, var(--primary), var(--accent)) border-box;
    box-shadow: 
        0 0 30px rgba(139, 92, 246, 0.5),
        0 0 60px rgba(236, 72, 153, 0.3),
        inset 0 0 20px rgba(0, 0, 0, 0.5);
    object-fit: cover;
    animation: fadeInDown 1s ease-out, profilePulse 2s ease-in-out infinite;
    transition: all 0.4s ease;
    position: relative;
}

.profile-image::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.profile-image:hover::before {
    opacity: 0.3;
}

.profile-image:hover {
    transform: scale(1.08) rotate(2deg);
    box-shadow: 
        0 0 50px rgba(139, 92, 246, 0.7),
        0 0 100px rgba(236, 72, 153, 0.5);
}

@keyframes profilePulse {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.02);
    }
}

@keyframes profileGlow {
    from { 
        box-shadow: 
            0 0 30px rgba(139, 92, 246, 0.4),
            0 0 60px rgba(236, 72, 153, 0.2);
    }
    to { 
        box-shadow: 
            0 0 40px rgba(139, 92, 246, 0.6),
            0 0 80px rgba(236, 72, 153, 0.4);
    }
}

@keyframes profileGlow {
    from { 
        box-shadow: 
            0 0 30px rgba(139, 92, 246, 0.4),
            0 0 60px rgba(236, 72, 153, 0.2);
    }
    to { 
        box-shadow: 
            0 0 40px rgba(139, 92, 246, 0.6),
            0 0 80px rgba(236, 72, 153, 0.4);
    }
}

        @keyframes fadeInDown {
            from { 
                opacity: 0; 
                transform: translateY(-60px);
            }
            to { 
                opacity: 1; 
                transform: translateY(0);
            }
        }

        .home-alias {
            font-family: 'JetBrains Mono', monospace;
            font-size: 5em;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 20px;
            letter-spacing: 3px;
            position: relative;
            display: inline-block;
        }

        .home-alias::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--primary), transparent);
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.3; width: 100px; }
            50% { opacity: 1; width: 200px; }
        }

        .home-subtitle {
            font-size: 1.4em;
            color: var(--light-gray);
            margin-bottom: 8px;
            font-weight: 400;
        }

        .home-tagline {
            color: var(--gray);
            font-size: 1.1em;
            font-weight: 300;
            letter-spacing: 1px;
        }

        .nav-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            max-width: 1000px;
            padding: 0 30px;
            animation: fadeInUp 1s ease-out 0.3s both;
        }

        @keyframes fadeInUp {
            from { 
                opacity: 0; 
                transform: translateY(60px);
            }
            to { 
                opacity: 1; 
                transform: translateY(0);
            }
        }

        .nav-card {
            width: 200px;
            height: 200px;
            background: var(--card-bg);
            border: 1px solid rgba(139, 92, 246, 0.2);
            border-radius: 16px;
            backdrop-filter: blur(20px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .nav-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(139, 92, 246, 0.15), transparent 40%);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .nav-card:hover::before {
            opacity: 1;
        }

        .nav-card:hover {
            transform: translateY(-8px);
            border-color: var(--primary);
            box-shadow: 
                0 20px 40px rgba(139, 92, 246, 0.3),
                0 0 0 1px rgba(139, 92, 246, 0.1) inset;
        }

        .nav-card.academy {
            border-color: rgba(239, 68, 68, 0.2);
        }

        .nav-card.academy::before {
            background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(239, 68, 68, 0.15), transparent 40%);
        }

        .nav-card.academy:hover {
    border-color: rgba(180, 30, 30, 0.9);
    background: linear-gradient(135deg, rgba(100, 0, 0, 0.4), rgba(60, 0, 0, 0.6));
    box-shadow: 
        0 20px 50px rgba(139, 0, 0, 0.5),
        0 0 60px rgba(100, 0, 0, 0.3),
        0 0 0 1px rgba(180, 30, 30, 0.3) inset,
        inset 0 0 30px rgba(139, 0, 0, 0.15);
}

.academy-icon {
    width: 100px;
    height: 100px;
    object-fit: contain;
    font-size: unset;
    margin-bottom: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.nav-card.academy:hover .academy-icon {
    transform: scale(1.2);
    filter: 
        drop-shadow(0 0 15px rgba(255, 60, 60, 0.7))
        drop-shadow(0 0 30px rgba(180, 0, 0, 0.5))
        brightness(1.1);
}

.nav-card.academy:hover::before {
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(139, 0, 0, 0.25), transparent 40%);
}
        .videos-icon {
    width: 100px;
    height: 100px;
    object-fit: contain;
    font-size: unset;
    margin-bottom: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.nav-card.videos:hover {
    border-color: rgba(100, 50, 150, 0.9);
    background: linear-gradient(135deg, rgba(75, 0, 130, 0.4), rgba(45, 0, 80, 0.6));
    box-shadow: 
        0 20px 50px rgba(100, 0, 150, 0.5),
        0 0 60px rgba(75, 0, 130, 0.3),
        0 0 0 1px rgba(120, 50, 180, 0.3) inset,
        inset 0 0 30px rgba(100, 0, 150, 0.15);
}

.nav-card.videos:hover .videos-icon {
    transform: scale(1.2);
    filter: 
        drop-shadow(0 0 15px rgba(180, 100, 255, 0.7))
        drop-shadow(0 0 30px rgba(120, 0, 200, 0.5))
        brightness(1.1);
}

.nav-card.videos:hover .nav-title {
    color: rgba(200, 150, 255, 1);
}

.nav-card.videos::before {
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(100, 0, 150, 0.15), transparent 40%);
}

.nav-card.videos:hover::before {
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(100, 0, 150, 0.25), transparent 40%);
}

        .writeups-icon {
    width: 100px;
    height: 100px;
    object-fit: contain;
    font-size: unset;
    margin-bottom: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.nav-card.writeups:hover {
    border-color: rgba(0, 180, 100, 0.9);
    background: linear-gradient(135deg, rgba(0, 100, 60, 0.4), rgba(0, 60, 40, 0.6));
    box-shadow: 
        0 20px 50px rgba(0, 150, 80, 0.5),
        0 0 60px rgba(0, 100, 60, 0.3),
        0 0 0 1px rgba(0, 200, 120, 0.3) inset,
        inset 0 0 30px rgba(0, 150, 80, 0.15);
}

.nav-card.writeups:hover .writeups-icon {
    transform: scale(1.2);
    filter: 
        drop-shadow(0 0 15px rgba(100, 255, 180, 0.7))
        drop-shadow(0 0 30px rgba(0, 200, 100, 0.5))
        brightness(1.1);
}

.nav-card.writeups:hover .nav-title {
    color: rgba(150, 255, 200, 1);
}

.nav-card.writeups::before {
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(0, 150, 80, 0.15), transparent 40%);
}

.nav-card.writeups:hover::before {
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(0, 150, 80, 0.25), transparent 40%);
}

        .about-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    font-size: unset;
    margin-bottom: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.nav-card.about:hover {
    border-color: rgba(180, 180, 190, 0.9);
    background: linear-gradient(135deg, rgba(100, 100, 110, 0.4), rgba(60, 60, 70, 0.6));
    box-shadow: 
        0 20px 50px rgba(150, 150, 160, 0.4),
        0 0 60px rgba(120, 120, 130, 0.25),
        0 0 0 1px rgba(200, 200, 210, 0.3) inset,
        inset 0 0 30px rgba(150, 150, 160, 0.1);
}

.nav-card.about:hover .about-icon {
    transform: scale(1.2);
    filter: 
        drop-shadow(0 0 15px rgba(220, 220, 230, 0.7))
        drop-shadow(0 0 30px rgba(180, 180, 190, 0.5))
        brightness(1.15);
}

.nav-card.about:hover .nav-title {
    color: rgba(220, 220, 230, 1);
}

.nav-card.about::before {
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(150, 150, 160, 0.15), transparent 40%);
}

.nav-card.about:hover::before {
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(150, 150, 160, 0.25), transparent 40%);
}

        .blog-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    font-size: unset;
    margin-bottom: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.nav-card.blog:hover {
    border-color: rgba(30, 80, 180, 0.9);
    background: linear-gradient(135deg, rgba(0, 50, 130, 0.4), rgba(0, 30, 80, 0.6));
    box-shadow: 
        0 20px 50px rgba(0, 60, 150, 0.5),
        0 0 60px rgba(0, 40, 100, 0.3),
        0 0 0 1px rgba(50, 100, 200, 0.3) inset,
        inset 0 0 30px rgba(0, 60, 150, 0.15);
}

.nav-card.blog:hover .blog-icon {
    transform: scale(1.2);
    filter: 
        drop-shadow(0 0 15px rgba(100, 150, 255, 0.7))
        drop-shadow(0 0 30px rgba(0, 80, 200, 0.5))
        brightness(1.1);
}

.nav-card.blog:hover .nav-title {
    color: rgba(150, 180, 255, 1);
}

.nav-card.blog::before {
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(0, 60, 150, 0.15), transparent 40%);
}

.nav-card.blog:hover::before {
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(0, 60, 150, 0.25), transparent 40%);
}
        .nav-icon {
            font-size: 3.5em;
            margin-bottom: 16px;
            transition: transform 0.4s ease;
            filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
        }


        .nav-card:hover .nav-icon {
            transform: scale(1.15);
        }

        .nav-title {
            font-size: 1.1em;
            color: var(--text);
            font-weight: 600;
            letter-spacing: 0.5px;
            transition: color 0.3s;
        }

        .nav-card:hover .nav-title {
            color: var(--primary-light);
        }

        .nav-card.academy:hover .nav-title {
            color: var(--red-light);
        }
.links-icon {
    width: 90px;
    height: 90px;
    object-fit: contain;
    font-size: unset;
    margin-bottom: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.nav-card.links:hover {
    border-color: rgba(200, 50, 150, 0.9);
    background: linear-gradient(135deg, rgba(150, 0, 100, 0.4), rgba(100, 0, 70, 0.6));
    box-shadow: 
        0 20px 50px rgba(200, 0, 130, 0.5),
        0 0 60px rgba(150, 0, 100, 0.3),
        0 0 0 1px rgba(230, 80, 180, 0.3) inset,
        inset 0 0 30px rgba(200, 0, 130, 0.15);
}

.nav-card.links:hover .links-icon {
    transform: scale(1.2);
    filter: 
        drop-shadow(0 0 15px rgba(255, 100, 200, 0.7))
        drop-shadow(0 0 30px rgba(220, 0, 150, 0.5))
        brightness(1.1);
}

.nav-card.links:hover .nav-title {
    color: rgba(255, 150, 220, 1);
}

.nav-card.links::before {
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(200, 0, 130, 0.15), transparent 40%);
}

.nav-card.links:hover::before {
    background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(200, 0, 130, 0.25), transparent 40%);
}

        /* CONTENT PAGES */
        .content-page {
            display: none;
            min-height: 100vh;
            position: relative;
            z-index: 20;
            padding: 100px 20px 60px;
            opacity: 0;
        }

        .content-page.active {
            display: block;
            animation: contentFadeIn 0.6s ease-out forwards;
        }

        @keyframes contentFadeIn {
            from { 
                opacity: 0;
                transform: translateY(20px);
            }
            to { 
                opacity: 1;
                transform: translateY(0);
            }
        }

        .back-button {
            position: fixed;
            top: 30px;
            left: 30px;
            padding: 12px 24px;
            background: var(--card-bg);
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 8px;
            color: var(--primary-light);
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 1000;
            backdrop-filter: blur(20px);
            font-size: 0.95em;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .back-button:hover {
            background: rgba(139, 92, 246, 0.15);
            border-color: var(--primary);
            transform: translateX(-4px);
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .page-header {
            text-align: center;
            margin-bottom: 60px;
            padding: 50px 40px;
            border: 1px solid rgba(139, 92, 246, 0.2);
            border-radius: 16px;
            background: var(--card-bg);
            backdrop-filter: blur(20px);
            position: relative;
            overflow: hidden;
        }

        .page-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 200%;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--primary), transparent);
            animation: scan 3s linear infinite;
        }

        @keyframes scan {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        .page-title {
            font-family: 'JetBrains Mono', monospace;
            font-size: 2.8em;
            color: var(--primary-light);
            margin-bottom: 12px;
            font-weight: 700;
            letter-spacing: 2px;
        }

        .page-subtitle {
            color: var(--light-gray);
            font-size: 1.1em;
            font-weight: 400;
        }

        .section {
            border: 1px solid rgba(139, 92, 246, 0.15);
            border-radius: 16px;
            padding: 40px;
            margin-bottom: 40px;
            background: var(--card-bg);
            backdrop-filter: blur(20px);
            transition: all 0.3s ease;
        }

        .section:hover {
            border-color: rgba(139, 92, 246, 0.3);
            box-shadow: 0 10px 30px rgba(139, 92, 246, 0.1);
        }

        .section-title {
            font-family: 'JetBrains Mono', monospace;
            color: var(--primary-light);
            font-size: 1.8em;
            margin-bottom: 30px;
            font-weight: 600;
        }

        .grid-3 {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 24px;
            margin-top: 30px;
        }

        .card {
            border: 1px solid rgba(139, 92, 246, 0.2);
            border-radius: 12px;
            padding: 28px;
            background: rgba(8, 8, 15, 0.95);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
        }

        .card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(139, 92, 246, 0.1), transparent 40%);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .card:hover::before {
            opacity: 1;
        }

        .card:hover {
            transform: translateY(-6px);
            border-color: var(--primary);
            box-shadow: 0 15px 40px rgba(139, 92, 246, 0.2);
        }

        .card h3 {
            font-family: 'JetBrains Mono', monospace;
            color: var(--text);
            margin-bottom: 12px;
            font-size: 1.2em;
            font-weight: 600;
        }

        .card .date {
            color: var(--gray);
            font-size: 0.85em;
            margin-bottom: 12px;
        }

        .card p {
            line-height: 1.7;
            margin-bottom: 12px;
            color: var(--light-gray);
        }

        .tag {
            display: inline-block;
            padding: 4px 12px;
            border: 1px solid rgba(139, 92, 246, 0.3);
            border-radius: 6px;
            margin-right: 8px;
            margin-top: 10px;
            font-size: 0.8em;
            color: var(--primary-light);
            background: rgba(139, 92, 246, 0.1);
            transition: all 0.2s;
            font-weight: 500;
        }

        .tag:hover {
            background: rgba(139, 92, 246, 0.2);
            transform: translateY(-2px);
            border-color: var(--primary);
        }

        .cta-button {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 24px;
            background: rgba(139, 92, 246, 0.1);
            border: 1px solid var(--primary);
            border-radius: 8px;
            color: var(--primary-light);
            text-decoration: none;
            margin-top: 16px;
            transition: all 0.3s ease;
            cursor: pointer;
            font-weight: 500;
            font-size: 0.95em;
        }

        .cta-button:hover {
            background: rgba(139, 92, 246, 0.2);
            transform: translateX(4px);
            box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
        }

        .video-thumbnail {
            width: 100%;
            height: 180px;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(139, 92, 246, 0.2);
            border-radius: 8px;
            position: relative;
            overflow: hidden;
            transition: all 0.3s;
        }

        .video-thumbnail::before {
            content: '▶';
            font-size: 3em;
            color: var(--primary-light);
            opacity: 0.7;
            transition: 0.3s;
        }

        .card:hover .video-thumbnail {
            border-color: var(--primary);
        }

        .card:hover .video-thumbnail::before {
            transform: scale(1.2);
            opacity: 1;
        }

        /* ACADEMIA PROFFSEC */
        #academy-page {
            background: linear-gradient(to bottom, rgba(20, 0, 0, 0.3) 0%, transparent 100%);
        }

        #academy-page .page-header {
            border-color: rgba(239, 68, 68, 0.2);
        }

        #academy-page .page-title {
            color: var(--red-light);
        }

        #academy-page .terminal-prompt {
            font-family: 'JetBrains Mono', monospace;
            color: var(--red-light);
            margin-bottom: 16px;
            font-size: 1em;
        }

        #academy-page .section {
            border-color: rgba(239, 68, 68, 0.15);
        }

        #academy-page .section:hover {
            border-color: rgba(239, 68, 68, 0.3);
        }

        #academy-page .section-title {
            color: var(--red-light);
        }

        #academy-page .card {
            border-color: rgba(239, 68, 68, 0.2);
        }

        #academy-page .card::before {
            background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(239, 68, 68, 0.1), transparent 40%);
        }

        #academy-page .card:hover {
            border-color: var(--red);
        }

        #academy-page .card h3 {
            color: var(--red-light);
        }

        #academy-page .tag {
            border-color: rgba(239, 68, 68, 0.3);
            color: var(--red-light);
            background: rgba(239, 68, 68, 0.1);
        }

        #academy-page .tag:hover {
            background: rgba(239, 68, 68, 0.2);
            border-color: var(--red);
        }

        #academy-page .cta-button {
            border-color: var(--red);
            color: var(--red-light);
            background: rgba(239, 68, 68, 0.1);
        }

        #academy-page .cta-button:hover {
            background: rgba(239, 68, 68, 0.2);
            box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3);
        }

        .status-pending {
            display: inline-block;
            padding: 4px 12px;
            background: rgba(251, 191, 36, 0.1);
            border: 1px solid rgba(251, 191, 36, 0.3);
            border-radius: 6px;
            color: #fbbf24;
            font-style: normal;
            font-weight: 600;
            font-size: 0.85em;
            margin-bottom: 12px;
        }

        /* STATUS ACTIVE BADGE */
        .status-active {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 16px;
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.4);
            border-radius: 20px;
            color: #10b981;
            font-weight: 600;
            font-size: 0.85em;
            letter-spacing: 1px;
        }

        .pulse-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: #10b981;
            border-radius: 50%;
            animation: pulse-glow 2s ease-in-out infinite;
        }

        @keyframes pulse-glow {
            0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
            50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
        }

        /* === Estado: 1ra edición finalizada (inscripciones cerradas) === */
        .status-closed {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 16px;
            background: rgba(212, 175, 55, 0.10);
            border: 1px solid rgba(212, 175, 55, 0.45);
            border-radius: 20px;
            color: #f5d76e;
            font-weight: 700;
            font-size: 0.85em;
            letter-spacing: 1px;
        }
        .closed-dot {
            display: inline-block;
            width: 8px; height: 8px;
            background: #f5d76e;
            border-radius: 50%;
            box-shadow: 0 0 8px rgba(245,215,110,0.8);
        }
        /* Botón CTA en estado cerrado */
        .cta-button.cta-closed {
            background: rgba(212,175,55,0.08);
            border: 1px solid rgba(212,175,55,0.4);
            color: #f5d76e;
            cursor: not-allowed;
            opacity: 0.92;
            pointer-events: none;
            box-shadow: none;
        }
        /* Banner "fin de clases" — vira a dorado/celebración */
        .course-finale-banner .start-banner-label { color: #f5d76e !important; }
        .finale-banner-note {
            position: relative;
            margin: 20px auto 0;
            padding-top: 18px;
            max-width: 540px;
            font-size: 0.9em;
            color: #cbd5e1;
            line-height: 1.6;
            text-align: center;
        }
        /* Divisor dorado con rombo centrado encima del texto */
        .finale-banner-note::before {
            content: '';
            position: absolute;
            top: 0; left: 50%;
            transform: translateX(-50%);
            width: 180px; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(245,215,110,0.6), transparent);
        }
        /* Rombo dorado centrado sobre el divisor */
        .finale-banner-note::after {
            content: '✦';
            position: absolute;
            top: 0; left: 50%;
            transform: translate(-50%, -52%);
            color: #f5d76e;
            font-size: 0.8em;
            background: #0d0712;
            padding: 0 8px;
            text-shadow: 0 0 10px rgba(245,215,110,0.8);
        }
        .finale-banner-note b {
            color: #f5d76e;
            font-weight: 700;
        }
        /* Las estrellas inline se ocultan; el adorno lo da el divisor */
        .finale-spark { display: none; }
        .course-final-cta--closed h3 { color: #f5d76e; }
        .course-featured--closed { opacity: 0.97; }

        /* COURSE START DATE BANNER */
        .course-start-banner {
            position: relative;
            text-align: center;
            padding: 28px 30px;
            margin-bottom: 24px;
            border: 1px solid rgba(239, 68, 68, 0.35);
            border-radius: 14px;
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(251, 191, 36, 0.04), rgba(8, 8, 15, 0.95));
            overflow: hidden;
            animation: bannerPulse 4s ease-in-out infinite;
        }

        .course-start-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 200%;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--red), #fbbf24, var(--red), transparent);
            animation: scan 3s linear infinite;
        }

        .course-start-banner::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: -100%;
            width: 200%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #fbbf24, var(--red), #fbbf24, transparent);
            animation: scan 3s linear infinite reverse;
        }

        @keyframes bannerPulse {
            0%, 100% { border-color: rgba(239, 68, 68, 0.35); box-shadow: 0 0 20px rgba(239, 68, 68, 0.05); }
            50% { border-color: rgba(239, 68, 68, 0.55); box-shadow: 0 0 40px rgba(239, 68, 68, 0.12); }
        }

        .start-banner-glow {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.06) 0%, transparent 70%);
            pointer-events: none;
        }

        .start-banner-content {
            position: relative;
            z-index: 1;
        }

        .start-banner-label {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.7em;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: #fbbf24;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .start-banner-date {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
        }

        .sbd-day {
            font-family: 'Inter', sans-serif;
            font-size: 1.1em;
            font-weight: 300;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 3px;
            writing-mode: vertical-lr;
            text-orientation: mixed;
            transform: rotate(180deg);
        }

        .sbd-number {
            font-family: 'JetBrains Mono', monospace;
            font-size: 5em;
            font-weight: 700;
            line-height: 1;
            background: linear-gradient(180deg, #fff 30%, var(--red-light) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0 0 25px rgba(239, 68, 68, 0.35));
            animation: numberGlow 3s ease-in-out infinite alternate;
        }

        @keyframes numberGlow {
            from { filter: drop-shadow(0 0 20px rgba(239, 68, 68, 0.25)); }
            to { filter: drop-shadow(0 0 40px rgba(239, 68, 68, 0.5)); }
        }

        .sbd-month {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.6em;
            font-weight: 700;
            color: var(--red-light);
            text-transform: uppercase;
            letter-spacing: 4px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            line-height: 1.2;
        }

        .sbd-year {
            font-size: 0.45em;
            font-weight: 400;
            color: var(--text-dim);
            letter-spacing: 6px;
        }

        .course-start-banner--detail {
            margin-bottom: 30px;
        }

        /* EDITION BADGE (inline after title) */
        .edition-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 12px;
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(251, 191, 36, 0.18));
            border: 1px solid rgba(251, 191, 36, 0.45);
            border-radius: 20px;
            color: #fbbf24;
            font-family: 'JetBrains Mono', monospace;
            font-weight: 700;
            font-size: 0.42em;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            white-space: nowrap;
            box-shadow: 0 0 14px rgba(251,191,36,0.12);
        }

        .edition-badge-lg {
            font-size: 0.38em;
            padding: 6px 16px;
        }

        /* COURSE FEATURED CARD (listing) */
        .course-featured {
            border: 1px solid rgba(245, 215, 110, 0.22);
            border-radius: 18px;
            padding: 40px 40px 40px 46px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
            background:
                radial-gradient(circle at 92% -10%, rgba(245,215,110,0.16) 0%, transparent 40%),
                radial-gradient(circle at 0% 110%, rgba(200,16,46,0.18) 0%, transparent 50%),
                linear-gradient(160deg, #1a0a10 0%, #0d0712 55%, #08070f 100%);
            box-shadow: inset 0 0 60px rgba(0,0,0,0.4);
        }

        /* Barra de acento vertical dorada→roja a la izquierda */
        .course-featured::before {
            content: '';
            position: absolute;
            top: 22px; bottom: 22px; left: 0;
            width: 4px;
            border-radius: 0 4px 4px 0;
            background: linear-gradient(180deg,
                var(--dmh-gold-bright, #f5d76e) 0%,
                #ff1e3c 50%,
                var(--dmh-gold-bright, #f5d76e) 100%);
            box-shadow: 0 0 18px rgba(245,215,110,0.5);
        }

        /* Sello / marca de agua "01" en la esquina */
        .course-featured::after {
            content: '01';
            position: absolute;
            right: 18px;
            bottom: -18px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11em;
            font-weight: 800;
            line-height: 1;
            color: transparent;
            -webkit-text-stroke: 2px rgba(245, 215, 110, 0.12);
            text-stroke: 2px rgba(245, 215, 110, 0.12);
            pointer-events: none;
            letter-spacing: -0.05em;
            user-select: none;
        }

        .course-featured:hover {
            border-color: rgba(245, 215, 110, 0.45);
            box-shadow: inset 0 0 60px rgba(0,0,0,0.4), 0 16px 50px rgba(200, 16, 46, 0.18);
        }

        .course-featured-badge {
            margin-bottom: 18px;
        }

        .course-featured-content {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 40px;
            align-items: start;
        }

        /* Kicker arriba del título */
        .course-kicker {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.72em;
            font-weight: 700;
            letter-spacing: 0.28em;
            color: var(--dmh-gold-bright, #f5d76e);
            text-transform: uppercase;
            margin-bottom: 10px;
        }
        .course-kicker-line {
            display: inline-block;
            width: 28px; height: 2px;
            background: linear-gradient(90deg, var(--dmh-gold-bright, #f5d76e), transparent);
        }

        .course-featured-title {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.85em;
            color: #fff;
            font-weight: 800;
            margin-bottom: 14px;
            line-height: 1.25;
            letter-spacing: 0.01em;
            background: linear-gradient(92deg, #ff5a6e 0%, #ff1e3c 45%, #f5d76e 120%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 30px rgba(200,16,46,0.25);
        }

        .course-featured-instructor {
            color: var(--light-gray);
            font-size: 0.95em;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .course-featured-desc {
            color: var(--text);
            line-height: 1.7;
            margin-bottom: 24px;
            font-size: 1em;
        }

        .course-featured-stats {
            display: flex;
            gap: 20px;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }

        .course-stat {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12px 16px;
            background: rgba(239, 68, 68, 0.05);
            border: 1px solid rgba(239, 68, 68, 0.15);
            border-radius: 10px;
            min-width: 80px;
        }

        .course-stat-value {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.3em;
            font-weight: 700;
            color: var(--red-light);
        }

        .course-stat-label {
            font-size: 0.75em;
            color: var(--light-gray);
            margin-top: 4px;
            text-align: center;
        }

        .course-featured-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .course-featured-highlights {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-bottom: 30px;
        }

        .highlight-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            color: var(--text);
            font-size: 0.95em;
            line-height: 1.5;
        }

        .highlight-icon {
            color: var(--red-light);
            font-size: 0.8em;
            margin-top: 3px;
            flex-shrink: 0;
        }

        .course-featured-actions {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        /* CTA BUTTON VARIANTS */
        #academy-page .cta-primary {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.15));
            border: 1px solid var(--red);
            color: #fff;
            font-weight: 600;
            text-align: center;
            padding: 14px 28px;
            font-size: 1em;
            letter-spacing: 0.5px;
            text-decoration: none;
            display: inline-block;
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        #academy-page .cta-primary:hover {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.5), rgba(239, 68, 68, 0.3));
            box-shadow: 0 6px 30px rgba(239, 68, 68, 0.4);
            transform: translateY(-2px);
        }

        /* Subtle pulse animation on primary CTA */
        @keyframes cta-glow {
            0%, 100% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.15); }
            50% { box-shadow: 0 0 25px rgba(239, 68, 68, 0.3); }
        }

        #academy-page .cta-primary {
            animation: cta-glow 3s ease-in-out infinite;
        }

        #academy-page .cta-primary:hover {
            animation: none;
        }

        #academy-page .cta-secondary {
            background: transparent;
            border: 1px solid rgba(239, 68, 68, 0.4);
            color: var(--red-light);
            font-weight: 500;
            text-align: center;
            padding: 12px 28px;
            font-size: 0.95em;
            text-decoration: none;
            display: inline-block;
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        #academy-page .cta-secondary:hover {
            background: rgba(239, 68, 68, 0.1);
            border-color: var(--red);
        }

        .cta-large {
            padding: 16px 36px !important;
            font-size: 1.1em !important;
        }

        /* COURSE DETAIL PAGE */
        .back-to-courses {
            background: transparent;
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: var(--red-light);
            padding: 8px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9em;
            font-weight: 500;
            transition: all 0.3s ease;
            margin-bottom: 30px;
            display: inline-block;
            font-family: inherit;
        }

        .back-to-courses:hover {
            background: rgba(239, 68, 68, 0.1);
            border-color: var(--red);
            transform: translateX(-4px);
        }

        /* Course Hero */
        .course-hero {
            text-align: center;
            padding: 60px 40px;
            border: 1px solid rgba(239, 68, 68, 0.25);
            border-radius: 16px;
            background: rgba(8, 8, 15, 0.95);
            margin-bottom: 40px;
            position: relative;
            overflow: hidden;
        }

        .course-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 200%;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--red), var(--success), var(--red), transparent);
            animation: scan 3s linear infinite;
        }

        .course-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at center top, rgba(239, 68, 68, 0.08) 0%, transparent 70%);
            pointer-events: none;
        }

        .course-hero-badge {
            margin-bottom: 24px;
            position: relative;
            z-index: 1;
        }

        .course-hero-title {
            font-family: 'JetBrains Mono', monospace;
            font-size: 2.5em;
            color: var(--red-light);
            font-weight: 700;
            margin-bottom: 16px;
            line-height: 1.2;
            position: relative;
            z-index: 1;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 16px;
        }

        .course-hero-instructor {
            color: var(--light-gray);
            font-size: 1.05em;
            margin-bottom: 32px;
            position: relative;
            z-index: 1;
        }

        .course-hero-instructor strong {
            color: var(--text);
        }

        .course-hero-stats {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 36px;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
        }

        /* Course sections */
        .course-section {
            position: relative;
        }

        .course-section + .course-section {
            margin-top: 0;
        }

        .course-section-intro {
            color: var(--text);
            font-size: 1.05em;
            line-height: 1.7;
            margin-bottom: 30px;
            max-width: 800px;
        }

        .course-section-intro strong {
            color: var(--red-light);
        }

        /* Topics grid */
        .course-topics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 20px;
        }

        .course-topic-card {
            padding: 24px;
            border: 1px solid rgba(239, 68, 68, 0.15);
            border-radius: 12px;
            background: rgba(239, 68, 68, 0.03);
            transition: all 0.3s ease;
        }

        .course-topic-card:hover {
            border-color: rgba(239, 68, 68, 0.35);
            background: rgba(239, 68, 68, 0.06);
            transform: translateY(-3px);
        }

        .topic-icon {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.6em;
            font-weight: 700;
            color: var(--red);
            opacity: 0.5;
            margin-bottom: 12px;
        }

        .course-topic-card h4 {
            font-family: 'JetBrains Mono', monospace;
            color: var(--red-light);
            font-size: 1em;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .course-topic-card p {
            color: var(--light-gray);
            font-size: 0.92em;
            line-height: 1.6;
        }

        /* Methodology */
        .methodology-grid {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .methodology-item {
            display: flex;
            gap: 20px;
            align-items: flex-start;
            padding: 20px 24px;
            border: 1px solid rgba(239, 68, 68, 0.12);
            border-radius: 12px;
            background: rgba(239, 68, 68, 0.02);
            transition: all 0.3s ease;
        }

        .methodology-item:hover {
            border-color: rgba(239, 68, 68, 0.3);
            background: rgba(239, 68, 68, 0.05);
        }

        .methodology-number {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.5em;
            font-weight: 700;
            color: var(--red);
            min-width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-radius: 8px;
            flex-shrink: 0;
        }

        .methodology-item h4 {
            font-family: 'JetBrains Mono', monospace;
            color: var(--red-light);
            font-size: 1em;
            margin-bottom: 6px;
            font-weight: 600;
        }

        .methodology-item p {
            color: var(--light-gray);
            font-size: 0.92em;
            line-height: 1.5;
        }

        /* Final project card */
        .final-project-card {
            display: flex;
            gap: 24px;
            align-items: flex-start;
            padding: 30px;
            border: 1px solid rgba(239, 68, 68, 0.25);
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.06), rgba(8, 8, 15, 0.95));
        }

        .final-project-icon {
            font-size: 2.5em;
            flex-shrink: 0;
        }

        .final-project-content h4 {
            font-family: 'JetBrains Mono', monospace;
            color: var(--red-light);
            font-size: 1.15em;
            margin-bottom: 12px;
            font-weight: 600;
        }

        .final-project-content p {
            color: var(--text);
            line-height: 1.7;
            font-size: 0.95em;
        }

        .final-project-content strong {
            color: var(--red-light);
        }

        /* Strategic value */
        .strategic-value {
            padding: 24px 30px;
            border-left: 3px solid var(--red);
            background: rgba(239, 68, 68, 0.04);
            border-radius: 0 12px 12px 0;
        }

        .strategic-value p {
            color: var(--text);
            line-height: 1.7;
            font-size: 1em;
        }

        .strategic-value strong {
            color: var(--red-light);
        }

        /* Includes grid */
        .includes-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 16px;
        }

        .include-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 18px 20px;
            border: 1px solid rgba(16, 185, 129, 0.2);
            border-radius: 10px;
            background: rgba(16, 185, 129, 0.04);
            transition: all 0.3s ease;
        }

        .include-item:hover {
            border-color: rgba(16, 185, 129, 0.4);
            background: rgba(16, 185, 129, 0.08);
        }

        .include-icon {
            color: #10b981;
            font-size: 1.2em;
            font-weight: 700;
            flex-shrink: 0;
        }

        .include-item span:last-child {
            color: var(--text);
            font-size: 0.95em;
        }

        /* Final CTA section */
        .course-final-cta {
            text-align: center;
            padding: 60px 40px;
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(16, 185, 129, 0.03), rgba(8, 8, 15, 0.95));
            margin-bottom: 100px;
            margin-top: 40px;
            position: relative;
            overflow: hidden;
        }

        .course-final-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.06) 0%, transparent 70%);
            pointer-events: none;
        }

        .course-final-cta h3 {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.6em;
            color: var(--red-light);
            margin-bottom: 14px;
            font-weight: 700;
        }

        .course-final-cta p {
            color: var(--light-gray);
            font-size: 1.05em;
            margin-bottom: 28px;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Sticky CTA bar — always visible when detail page is open */
        .course-sticky-cta {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 10000;
            background: rgba(8, 8, 15, 0.97);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-top: 1px solid rgba(239, 68, 68, 0.3);
            box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5);
            padding: 14px 20px;
            display: none;
        }

        .course-sticky-cta.visible {
            display: block;
        }

        .sticky-cta-inner {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .sticky-cta-text {
            font-family: 'JetBrains Mono', monospace;
            color: var(--red-light);
            font-weight: 600;
            font-size: 0.95em;
        }

        .sticky-cta-inner .cta-primary {
            white-space: nowrap;
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.15));
            border: 1px solid var(--red);
            color: #fff;
            font-weight: 600;
            text-align: center;
            padding: 12px 28px;
            font-size: 1em;
            letter-spacing: 0.5px;
            text-decoration: none;
            display: inline-block;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            animation: cta-glow 3s ease-in-out infinite;
        }

        .sticky-cta-inner .cta-primary:hover {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.5), rgba(239, 68, 68, 0.3));
            box-shadow: 0 6px 30px rgba(239, 68, 68, 0.4);
            transform: translateY(-2px);
            animation: none;
        }

        /* SYLLABUS BUTTON */
        .course-hero-actions {
            display: flex;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
            position: relative;
            z-index: 1;
        }

        .cta-syllabus {
            background: transparent;
            border: 1px solid rgba(239, 68, 68, 0.4);
            color: var(--red-light);
            font-family: 'JetBrains Mono', monospace;
            font-weight: 600;
            font-size: 1em;
            padding: 14px 28px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            letter-spacing: 0.5px;
        }

        .cta-syllabus:hover {
            background: rgba(239, 68, 68, 0.12);
            border-color: var(--red);
            box-shadow: 0 4px 20px rgba(239, 68, 68, 0.2);
            transform: translateY(-2px);
        }

        /* ===== SYLLABUS MODAL ===== */
        .syllabus-modal {
            position: fixed;
            inset: 0;
            z-index: 20000;
            display: none;
            align-items: stretch;
            justify-content: flex-end;
        }

        .syllabus-modal.visible {
            display: flex;
        }

        .syllabus-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            animation: sylFadeIn 0.3s ease;
        }

        @keyframes sylFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes sylSlideIn {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
        }

        .syllabus-panel {
            position: relative;
            width: 680px;
            max-width: 95vw;
            height: 100vh;
            overflow-y: auto;
            background: #08080f;
            border-left: 1px solid rgba(239, 68, 68, 0.25);
            box-shadow: -10px 0 60px rgba(0, 0, 0, 0.5);
            padding: 40px 30px 60px;
            animation: sylSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1;
        }

        .syllabus-panel::-webkit-scrollbar {
            width: 6px;
        }

        .syllabus-panel::-webkit-scrollbar-track {
            background: transparent;
        }

        .syllabus-panel::-webkit-scrollbar-thumb {
            background: rgba(239, 68, 68, 0.3);
            border-radius: 3px;
        }

        .syllabus-top-actions {
            position: sticky;
            top: 0;
            z-index: 10;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 10px;
            padding-bottom: 8px;
            background: #08080f;
        }

        .syllabus-open-full {
            background: rgba(239, 68, 68, 0.08);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: var(--red-light);
            padding: 8px 16px;
            border-radius: 8px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.75em;
            font-weight: 600;
            text-decoration: none;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .syllabus-open-full:hover {
            background: rgba(239, 68, 68, 0.2);
            border-color: var(--red);
            transform: translateY(-1px);
        }

        .syllabus-close {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: var(--red-light);
            width: 40px;
            height: 40px;
            border-radius: 8px;
            font-size: 1.5em;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .syllabus-close:hover {
            background: rgba(239, 68, 68, 0.25);
            border-color: var(--red);
        }

        /* Syllabus Header */
        .syllabus-header {
            text-align: center;
            margin-bottom: 40px;
            padding-top: 10px;
        }

        .syllabus-badge {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.7em;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--red-light);
            border: 1px solid rgba(239, 68, 68, 0.3);
            padding: 5px 16px;
            display: inline-block;
            margin-bottom: 16px;
            background: rgba(239, 68, 68, 0.05);
        }

        .syllabus-title {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.6em;
            font-weight: 700;
            color: var(--red-light);
            margin-bottom: 10px;
            line-height: 1.3;
        }

        .syllabus-subtitle {
            font-size: 0.85em;
            color: var(--light-gray);
            letter-spacing: 0.5px;
        }

        .syllabus-meta-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
            gap: 10px;
            margin-top: 24px;
        }

        .syllabus-meta-item {
            background: rgba(239, 68, 68, 0.04);
            border: 1px solid rgba(239, 68, 68, 0.15);
            padding: 10px 12px;
            text-align: center;
            border-radius: 6px;
        }

        .sml {
            font-size: 0.6em;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--light-gray);
            margin-bottom: 4px;
        }

        .smv {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.9em;
            font-weight: 700;
            color: var(--red-light);
        }

        .syllabus-expand-all {
            margin-top: 20px;
            padding: 8px 20px;
            background: transparent;
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: var(--red-light);
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.7em;
            letter-spacing: 2px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.3s;
            border-radius: 4px;
        }

        .syllabus-expand-all:hover {
            background: rgba(239, 68, 68, 0.1);
            border-color: var(--red);
        }

        /* Syllabus Week */
        .syl-week {
            margin-bottom: 36px;
        }

        .syl-week-header {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 16px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(239, 68, 68, 0.15);
        }

        .syl-week-num {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.7em;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--red);
            white-space: nowrap;
        }

        .syl-week-title {
            font-size: 1em;
            font-weight: 600;
            color: var(--text);
        }

        /* Syllabus Day Card */
        .syl-day {
            background: rgba(15, 15, 26, 0.85);
            border: 1px solid rgba(239, 68, 68, 0.15);
            margin-bottom: 10px;
            border-radius: 6px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .syl-day:hover {
            border-color: rgba(239, 68, 68, 0.35);
            box-shadow: 0 0 20px rgba(239, 68, 68, 0.08);
        }

        .syl-day-top {
            display: flex;
            align-items: stretch;
            cursor: pointer;
            user-select: none;
        }

        .syl-day-num {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 52px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.1em;
            font-weight: 900;
            color: #08080f;
            background: linear-gradient(135deg, var(--red), #cc2244);
            flex-shrink: 0;
        }

        .syl-day-info {
            flex: 1;
            padding: 12px 16px;
        }

        .syl-day-date {
            font-size: 0.65em;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--light-gray);
            margin-bottom: 3px;
        }

        .syl-day-title {
            font-size: 0.9em;
            font-weight: 600;
            color: var(--text);
            line-height: 1.4;
        }

        .syl-day-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 40px;
            color: var(--red);
            font-size: 0.8em;
            transition: transform 0.3s;
        }

        .syl-day.open .syl-day-arrow {
            transform: rotate(180deg);
        }

        .syl-day-content {
            display: none;
            padding: 0 16px 16px 68px;
            border-top: 1px solid rgba(239, 68, 68, 0.1);
            animation: sylContentIn 0.3s ease;
        }

        @keyframes sylContentIn {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .syl-day.open .syl-day-content {
            display: block;
        }

        /* Syllabus Blocks */
        .syl-block {
            margin-top: 12px;
        }

        .syl-block-title {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.7em;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--red-light);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .syl-block-title::before {
            content: '>';
            color: var(--red);
        }

        .syl-block ul {
            list-style: none;
            padding: 0;
        }

        .syl-block li {
            position: relative;
            padding: 4px 0 4px 16px;
            font-size: 0.8em;
            color: var(--text);
            line-height: 1.5;
        }

        .syl-block li::before {
            content: '\2503';
            position: absolute;
            left: 0;
            color: var(--red);
            opacity: 0.4;
        }

        .syl-block code {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.9em;
            color: var(--red-light);
            background: rgba(239, 68, 68, 0.08);
            padding: 1px 5px;
            border-radius: 3px;
        }

        /* Syllabus tags */
        .stag {
            display: inline-block;
            font-size: 0.7em;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            padding: 1px 6px;
            margin-left: 4px;
            border-radius: 2px;
            vertical-align: middle;
            font-weight: 600;
        }

        .stag.sp {
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .stag.sthm {
            background: rgba(239, 68, 68, 0.1);
            color: var(--red-light);
            border: 1px solid rgba(239, 68, 68, 0.3);
        }

        .stag.shtb {
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }

        .stag.sps {
            background: rgba(251, 191, 36, 0.1);
            color: #fbbf24;
            border: 1px solid rgba(251, 191, 36, 0.3);
        }

        .syl-deliverable {
            margin-top: 12px;
            padding: 8px 12px;
            background: rgba(239, 68, 68, 0.04);
            border-left: 2px solid var(--red);
            font-size: 0.75em;
            color: var(--light-gray);
            border-radius: 0 4px 4px 0;
        }

        .syl-deliverable strong {
            color: var(--red-light);
        }

        .syllabus-footer {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid rgba(239, 68, 68, 0.15);
        }

        .syllabus-footer p {
            font-size: 0.8em;
            color: var(--light-gray);
        }

        .syllabus-footer strong {
            color: var(--red-light);
        }

        /* ABOUT PAGE */
        .whoami-grid {
            display: grid;
            grid-template-columns: 350px 1fr;
            gap: 40px;
            margin-top: 30px;
        }

        .ascii-art {
            font-family: 'JetBrains Mono', monospace;
            color: var(--primary-light);
            font-size: 0.7em;
            line-height: 1.1;
            white-space: pre;
            padding: 20px;
            background: rgba(139, 92, 246, 0.05);
            border: 1px solid rgba(139, 92, 246, 0.2);
            border-radius: 12px;
            text-align: center;
        }

        .info-block {
            padding: 24px;
            background: rgba(139, 92, 246, 0.05);
            border-left: 3px solid var(--primary);
            border-radius: 8px;
        }

        .info-block p {
            margin-bottom: 12px;
            line-height: 1.8;
        }

        .highlight {
            color: var(--primary-light);
            font-weight: 600;
        }

        .credentials-section {
            margin-top: 60px;
            padding-top: 40px;
            border-top: 1px solid rgba(139, 92, 246, 0.15);
        }

        .credentials-title {
            color: var(--light-gray);
            font-size: 1.2em;
            margin-bottom: 30px;
            text-align: center;
            font-weight: 500;
        }

        .certs-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 16px;
            margin-bottom: 40px;
        }

        .cert-badge {
            padding: 20px;
            background: rgba(139, 92, 246, 0.05);
            border: 1px solid rgba(139, 92, 246, 0.2);
            border-radius: 12px;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .cert-badge:hover {
            background: rgba(139, 92, 246, 0.1);
            border-color: var(--primary);
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(139, 92, 246, 0.15);
        }

        .cert-badge .cert-name {
            font-family: 'JetBrains Mono', monospace;
            color: var(--primary-light);
            font-weight: 600;
            font-size: 1em;
            margin-bottom: 6px;
        }

        .cert-badge .cert-org {
            color: var(--gray);
            font-size: 0.8em;
        }

        .experience-item {
            padding: 24px;
            margin-bottom: 16px;
            background: rgba(139, 92, 246, 0.03);
            border-left: 2px solid rgba(139, 92, 246, 0.3);
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .experience-item:hover {
            background: rgba(139, 92, 246, 0.08);
            transform: translateX(8px);
            border-left-width: 3px;
            border-color: var(--primary);
        }

        .exp-title {
            color: var(--text);
            font-size: 1.05em;
            margin-bottom: 6px;
            font-weight: 600;
        }

        .exp-period {
            color: var(--gray);
            font-size: 0.85em;
            margin-bottom: 10px;
        }
        /* ===== ABOUT PAGE - ENHANCED STYLES ===== */

.about-hero {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 50px;
    padding: 30px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(236, 72, 153, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.about-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
    background-size: 200% 100%;
    animation: gradientSlide 3s ease infinite;
}

@keyframes gradientSlide {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.about-avatar img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid transparent;
    background: 
        linear-gradient(var(--dark), var(--dark)) padding-box,
        linear-gradient(135deg, var(--primary), var(--accent)) border-box;
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.4);
    object-fit: cover;
}

.about-intro h2 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.8em;
    color: var(--text);
    margin-bottom: 8px;
}

.about-intro h2 span {
    color: var(--primary-light);
}

.about-intro .role {
    color: var(--accent-light);
    font-size: 1.1em;
    margin-bottom: 15px;
    font-weight: 500;
}

.about-intro .bio {
    color: var(--light-gray);
    line-height: 1.7;
    font-size: 0.95em;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 50px;
}

.stat-item {
    text-align: center;
    padding: 20px 15px;
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.stat-item:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: var(--primary);
    transform: translateY(-4px);
}

.stat-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2em;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    color: var(--gray);
    font-size: 0.85em;
    margin-top: 5px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.section-header h3 {
    font-family: 'JetBrains Mono', monospace;
    color: var(--primary-light);
    font-size: 1.3em;
    font-weight: 600;
}

.section-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.3), transparent);
}

.certs-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 50px;
}

.cert-card {
    padding: 20px;
    background: rgba(139, 92, 246, 0.03);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cert-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.cert-card:hover::before {
    transform: scaleX(1);
}

.cert-card:hover {
    background: rgba(139, 92, 246, 0.08);
    border-color: var(--primary);
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.15);
}

.cert-card .cert-icon {
    font-size: 2em;
    margin-bottom: 10px;
}

.cert-card .cert-name {
    font-family: 'JetBrains Mono', monospace;
    color: var(--primary-light);
    font-weight: 600;
    font-size: 1.1em;
    margin-bottom: 6px;
}

.cert-card .cert-full {
    color: var(--light-gray);
    font-size: 0.75em;
    margin-bottom: 8px;
    line-height: 1.4;
}

.cert-card .cert-org {
    color: var(--gray);
    font-size: 0.8em;
}

.cert-card .cert-year {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 10px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 20px;
    color: var(--primary-light);
    font-size: 0.75em;
    font-family: 'JetBrains Mono', monospace;
}

.timeline {
    position: relative;
    padding-left: 30px;
    margin-bottom: 50px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--primary), var(--accent), var(--primary));
}

.timeline-item {
    position: relative;
    padding: 20px 24px;
    margin-bottom: 20px;
    background: rgba(139, 92, 246, 0.03);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -26px;
    top: 28px;
    width: 12px;
    height: 12px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary);
}

.timeline-item:hover {
    background: rgba(139, 92, 246, 0.08);
    border-color: var(--primary);
    transform: translateX(8px);
}

.timeline-item .exp-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.timeline-item .exp-title {
    color: var(--text);
    font-size: 1.05em;
    font-weight: 600;
}

.timeline-item .exp-company {
    color: var(--accent-light);
    font-size: 0.9em;
}

.timeline-item .exp-period {
    font-family: 'JetBrains Mono', monospace;
    color: var(--primary-light);
    font-size: 0.8em;
    padding: 4px 12px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 20px;
}

.timeline-item .exp-desc {
    color: var(--light-gray);
    font-size: 0.9em;
    line-height: 1.6;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.skill-category {
    padding: 20px;
    background: rgba(139, 92, 246, 0.03);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 12px;
}

.skill-category h4 {
    font-family: 'JetBrains Mono', monospace;
    color: var(--primary-light);
    font-size: 0.95em;
    margin-bottom: 15px;
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.skill-tag {
    padding: 5px 12px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 6px;
    color: var(--light-gray);
    font-size: 0.8em;
    transition: all 0.2s ease;
}

.skill-tag:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: var(--primary);
    color: var(--text);
}

@media (max-width: 768px) {
    .about-hero {
        flex-direction: column;
        text-align: center;
    }
    
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .skills-grid {
        grid-template-columns: 1fr;
    }
    
    .timeline-item .exp-header {
        flex-direction: column;
    }
}

       .social-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;                /* espacio elegante entre tarjetas */
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 0;
}

       .social-card {
    background: linear-gradient(
        145deg,
        rgba(25, 20, 40, 0.85),
        rgba(10, 8, 20, 0.85)
    );
    border: 1px solid rgba(170, 120, 255, 0.25);
    border-radius: 18px;
    padding: 28px 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    transition: 
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.social-card:hover {
    transform: translateY(-6px);
    border-color: rgba(190, 140, 255, 0.55);
    box-shadow:
        0 10px 35px rgba(120, 80, 200, 0.25);
}

        .social-card::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--primary);
            transition: 0.3s;
        }

        .social-card:hover::before {
            width: 100%;
        }

        .social-card:hover {
            background: rgba(139, 92, 246, 0.1);
            border-color: var(--primary);
            transform: translateY(-4px);
            box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2);
        }

       .social-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
}
.social-icon img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    filter: none;
}

.social-card:hover .social-icon img{
  transform: translateY(-2px) scale(1.05);
  opacity: 1;
}

        .social-name {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 6px;
}

        .social-handle {
    font-size: 0.85rem;
    color: #b7a6ff;
    opacity: 0.85;
}

@media (max-width: 900px) {
    .social-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .social-links {
        grid-template-columns: 1fr;
    }
}

        .contact-info {
            margin-top: 30px;
            padding: 24px;
            background: rgba(139, 92, 246, 0.05);
            border-left: 3px solid var(--primary);
            border-radius: 8px;
        }

        .contact-info p {
            color: var(--light-gray);
            margin-bottom: 10px;
            font-size: 1em;
        }

        @media (max-width: 1024px) {
            .nav-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
            }

            .home-alias {
                font-size: 4em;
            }

            .whoami-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 1024px) and (min-width: 769px) {
    .nav-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        max-width: 700px;
    }

    .nav-card {
        width: 180px;
        height: 180px;
    }

    .home-alias {
        font-size: 4em;
    }

    .profile-image {
        width: 150px;
        height: 150px;
    }
}

        /* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--card-bg);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.3s ease;
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.scroll-to-top.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.3);
}

.scroll-to-top::before {
    content: '↑';
    font-size: 1.5em;
    color: var(--primary-light);
}

/* BLOG ARTICLE VIEW */
.blog-article {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px;
    background: var(--card-bg);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    backdrop-filter: blur(20px);
}

.blog-article-header {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
}

.blog-article-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.5em;
    color: var(--primary-light);
    margin-bottom: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.blog-article-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    color: var(--gray);
    font-size: 0.95em;
}

.blog-article-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blog-article-content {
    color: var(--light-gray);
    line-height: 1.8;
    font-size: 1.05em;
}

/* Markdown Styles */
.blog-article-content h1,
.blog-article-content h2,
.blog-article-content h3,
.blog-article-content h4 {
    font-family: 'JetBrains Mono', monospace;
    color: var(--primary-light);
    margin-top: 2em;
    margin-bottom: 1em;
    font-weight: 600;
}

.blog-article-content h1 {
    font-size: 2em;
    border-bottom: 2px solid rgba(139, 92, 246, 0.3);
    padding-bottom: 0.5em;
}

.blog-article-content h2 {
    font-size: 1.6em;
}

.blog-article-content h3 {
    font-size: 1.3em;
}

.blog-article-content p {
    margin-bottom: 1.5em;
}

.blog-article-content code {
    font-family: 'JetBrains Mono', monospace;
    background: rgba(139, 92, 246, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--accent-light);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.blog-article-content pre {
    background: rgba(8, 8, 15, 0.95);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 8px;
    padding: 20px;
    overflow-x: auto;
    margin: 1.5em 0;
}

.blog-article-content pre code {
    background: none;
    border: none;
    padding: 0;
    color: var(--text);
}

.blog-article-content ul,
.blog-article-content ol {
    margin: 1.5em 0;
    padding-left: 2em;
}

.blog-article-content li {
    margin-bottom: 0.8em;
}

.blog-article-content blockquote {
    border-left: 3px solid var(--primary);
    padding-left: 20px;
    margin: 1.5em 0;
    color: var(--light-gray);
    font-style: italic;
    background: rgba(139, 92, 246, 0.05);
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
}

.blog-article-content a {
    color: var(--primary-light);
    text-decoration: none;
    border-bottom: 1px solid rgba(139, 92, 246, 0.3);
    transition: all 0.2s;
}

.blog-article-content a:hover {
    color: var(--accent-light);
    border-bottom-color: var(--accent-light);
}

.blog-article-content img {
    max-width: 100%;
    border-radius: 8px;
    margin: 2em 0;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.blog-article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
}

.blog-article-content th,
.blog-article-content td {
    padding: 12px;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.blog-article-content th {
    background: rgba(139, 92, 246, 0.1);
    color: var(--primary-light);
    font-weight: 600;
}

@media (max-width: 768px) {
    /* HOME PAGE - Permitir scroll y ajustar tamaños */
    html, body {
        overflow-y: auto !important;
        overflow-x: hidden;
        height: auto;
    }

    #home-page {
        position: relative;
        height: auto;
        min-height: 100vh;
        padding-top: max(20px, env(safe-area-inset-top) + 10px);
        padding-bottom: max(30px, env(safe-area-inset-bottom) + 20px);
        justify-content: flex-start;
        overflow-y: visible;
    }

    .home-header {
        margin-bottom: 25px;
        margin-top: 10px;
    }

    .home-alias {
        font-size: 2.4em;
        letter-spacing: 2px;
    }

    .home-subtitle {
        font-size: 1em;
    }

    .home-tagline {
        font-size: 0.85em;
    }

    .profile-image {
    width: 90px;
    height: 90px;
    margin: 0 auto 15px auto;
    display: block;
}

    /* Grid de navegación - 2 columnas compacto */
    .nav-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 15px;
        margin-bottom: 25px;
        max-width: 100%;
    }

    /* Cards cuadrados compactos */
    .nav-card {
        width: 100%;
        aspect-ratio: 1 / 1;
        min-height: 120px;
        max-height: 160px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 15px 10px;
    }

    .nav-icon {
        font-size: 2.2em;
        margin-bottom: 10px;
    }

    .nav-title {
        font-size: 0.85em;
        text-align: center;
        line-height: 1.2;
    }

    /* Páginas de contenido - PADDING MÍNIMO PARA VER CONTENIDO */
    .back-button {
        position: fixed !important;
        top: 3px !important;
        left: 10px !important;
        padding: 6px 16px;
        font-size: 0.85em;
        z-index: 1001 !important;
    }

    .content-page {
        padding: 35px 15px 30px 15px !important;
    }

    .content-page.active {
        padding-top: 35px !important;
    }

    /* Específicamente para cada página */
    #blog-page,
    #blog-article-page,
    #academy-page,
    #videos-page,
    #resources-page,
    #about-page,
    #links-page {
        padding-top: 35px !important;
    }

    .container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .page-header {
        padding: 18px 15px;
        margin-top: 0 !important;
        margin-bottom: 20px;
    }

    .page-title {
        font-size: 1.7em;
    }

    .page-subtitle {
        font-size: 0.9em;
    }

    .section {
        padding: 18px 15px;
        margin-bottom: 18px;
    }

    .section:first-of-type {
        margin-top: 0 !important;
    }

    .section-title {
        font-size: 1.3em;
    }

    /* Grid de 1 columna para contenido */
    .grid-3 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .card {
        padding: 18px;
    }

    .card h3 {
        font-size: 1em;
    }

    /* Blog - SIN PADDING TOP EXTRA */
    .blog-article {
        padding: 16px;
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: calc(env(safe-area-inset-bottom) + 20px);
    }

    .blog-article-header {
        padding-top: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 20px;
    }

    .blog-article-title {
        font-size: 1.4em;
        line-height: 1.3;
    }

    .blog-article-meta {
        font-size: 0.85em;
    }

    .blog-article-content {
        font-size: 0.9em;
    }

    .blog-article-content h1 {
        font-size: 1.4em;
        margin-top: 1.5em;
    }

    .blog-article-content h2 {
        font-size: 1.2em;
        margin-top: 1.3em;
    }

    .blog-article-content h3 {
        font-size: 1.05em;
        margin-top: 1.2em;
    }

    .blog-article-content pre {
        padding: 10px;
        font-size: 0.75em;
        overflow-x: auto;
    }

    .blog-article-content code {
        font-size: 0.82em;
    }

    .blog-article-content p {
        margin-bottom: 1em;
    }

    /* About page */
    .whoami-grid {
        grid-template-columns: 1fr;
    }

    .ascii-art {
        font-size: 0.4em;
    }

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

    .cert-badge {
        padding: 14px;
    }

    .experience-item {
        padding: 16px;
    }

    .social-card {
        padding: 18px;
    }

    .contact-info {
        padding: 16px;
    }

    /* Scroll to top button */
    .scroll-to-top {
        bottom: max(12px, env(safe-area-inset-bottom) + 12px);
        right: 12px;
        width: 40px;
        height: 40px;
    }
}

/* Para pantallas MUY pequeñas */
@media (max-width: 400px) {
    .home-alias {
        font-size: 2.2em;
    }

    .profile-image {
        width: 80px;
        height: 80px;
    }

    .nav-grid {
        gap: 10px;
        padding: 0 12px;
    }

    .nav-card {
        min-height: 110px;
        padding: 12px 8px;
    }

    .nav-icon {
        font-size: 2em;
    }

    .nav-title {
        font-size: 0.8em;
    }

    .content-page {
        padding-top: 32px !important;
    }

    .back-button {
        top: 2px !important;
        padding: 5px 14px;
        font-size: 0.8em;
    }
}

/* Para pantallas MUY pequeñas */
@media (max-width: 400px) {
    .home-alias {
        font-size: 2.2em;
    }

    .profile-image {
        width: 80px;
        height: 80px;
    }

    .nav-grid {
        gap: 10px;
        padding: 0 12px;
    }

    .nav-card {
        min-height: 110px;
        padding: 12px 8px;
    }

    .nav-icon {
        font-size: 2em;
    }

    .nav-title {
        font-size: 0.8em;
    }
}

/* ===== WRITEUPS ===== */
.writeups-platform-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 22px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(15, 15, 26, 0.55);
  border: 1px solid rgba(139, 92, 246, 0.25);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(236, 72, 153, 0.06) inset;
}

.platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.2px;

  background: rgba(10, 10, 15, 0.55);
  border: 1px solid rgba(167, 139, 250, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.platform-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(236, 72, 153, 0.35);
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.12);
}

.platform-chip.active {
  border-color: rgba(236, 72, 153, 0.55);
  box-shadow:
    0 0 0 1px rgba(236, 72, 153, 0.10) inset,
    0 14px 35px rgba(236, 72, 153, 0.10);
}

.platform-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 18px rgba(139, 92, 246, 0.45);
}

.writeups-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1024px) {
  .writeups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .writeups-grid { grid-template-columns: 1fr; }
}

.writeup-card {
  position: relative;
  overflow: hidden;
}

.writeup-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at 10% 10%, rgba(236,72,153,0.10), transparent 35%),
              radial-gradient(800px circle at 80% 20%, rgba(139,92,246,0.12), transparent 40%);
  opacity: 0.8;
  pointer-events: none;
}

.writeup-card .writeup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  color: var(--gray);
  font-size: 0.9rem;
}

.writeups-viewer {
  margin-top: 22px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(15, 15, 26, 0.75);
  border: 1px solid rgba(167, 139, 250, 0.22);
  box-shadow: 0 18px 55px rgba(0,0,0,0.45);
}

.writeups-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.writeups-viewer-meta {
  color: var(--gray);
  font-size: 0.95rem;
  text-align: right;
}

.writeups-back-to-list {
  padding: 10px 14px;
}
/* ===== VIDEOS ===== */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 1024px) {
  .videos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .videos-grid { grid-template-columns: 1fr; }
}

.video-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(12, 12, 20, 0.75);
  border: 1px solid rgba(139, 92, 246, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.video-card:hover {
  transform: translateY(-4px);
  border-color: rgba(236, 72, 153, 0.45);
  box-shadow: 0 22px 60px rgba(139, 92, 246, 0.22);
}

.video-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}

.video-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.75);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
}

.video-content {
  padding: 14px 16px 18px;
}

.video-title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  margin-bottom: 10px;
}

.video-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--gray);
}

.platform-count{
  opacity:.75;
  font-weight:700;
  margin-left:6px;
}

/* ===== COURSE RESPONSIVE - TABLET ===== */
@media (max-width: 1024px) {
    .course-featured-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .course-hero-title {
        font-size: 2em;
    }

    .course-topics-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===== COURSE RESPONSIVE - MOBILE ===== */
@media (max-width: 768px) {
    .course-featured {
        padding: 24px 18px;
    }

    .course-featured-title {
        font-size: 1.35em;
    }

    .course-featured-stats {
        gap: 10px;
    }

    .course-stat {
        padding: 10px 12px;
        min-width: 65px;
    }

    .course-stat-value {
        font-size: 1.1em;
    }

    .course-featured-actions {
        flex-direction: column;
    }

    .course-start-banner {
        padding: 20px 16px;
    }

    .sbd-number {
        font-size: 3.5em;
    }

    .sbd-month {
        font-size: 1.2em;
    }

    .sbd-day {
        font-size: 0.85em;
    }

    .start-banner-label {
        font-size: 0.6em;
        letter-spacing: 3px;
    }

    .course-hero {
        padding: 30px 18px;
    }

    .course-hero-title {
        font-size: 1.5em;
    }

    .course-hero-stats {
        gap: 10px;
    }

    .course-topics-grid {
        grid-template-columns: 1fr;
    }

    .includes-grid {
        grid-template-columns: 1fr;
    }

    .final-project-card {
        flex-direction: column;
        padding: 20px;
    }

    .final-project-icon {
        font-size: 2em;
    }

    .course-final-cta {
        padding: 30px 20px;
        margin-bottom: 100px;
    }

    .course-final-cta h3 {
        font-size: 1.2em;
    }

    .sticky-cta-text {
        display: none;
    }

    .sticky-cta-inner {
        justify-content: center;
    }

    .sticky-cta-inner .cta-primary {
        width: 100%;
        text-align: center;
    }

    .methodology-item {
        flex-direction: column;
        gap: 12px;
    }

    /* Syllabus modal mobile */
    .syllabus-panel {
        width: 100vw;
        max-width: 100vw;
        padding: 24px 16px 50px;
    }

    .syllabus-title {
        font-size: 1.2em;
    }

    .syllabus-meta-grid {
        grid-template-columns: 1fr 1fr;
    }

    .syl-day-content {
        padding-left: 16px;
    }

    .syl-day-num {
        min-width: 42px;
        font-size: 1em;
    }

    .course-hero-actions {
        flex-direction: column;
        align-items: center;
    }
}

/* =========================================================
   DEVIL MAY HACK — Portal Styles
   ========================================================= */

:root {
    --dmh-red: #c8102e;
    --dmh-red-bright: #ff1e3c;
    --dmh-red-deep: #5a0010;
    --dmh-gold: #d4af37;
    --dmh-gold-bright: #f5d76e;
    /* Paleta virada hacia el wallpaper (violeta/magenta profundo) */
    --dmh-bg: #0c0712;
    --dmh-violet: #2a1240;
    --dmh-violet-deep: #160a24;
    --dmh-magenta: #d9468f;
    --dmh-panel: rgba(18, 10, 24, 0.88);
    --dmh-border: rgba(200, 16, 46, 0.35);
}

/* ===== ENTRY CARD (in academy page) ===== */
.dmh-entry {
    position: relative;
    margin-top: 60px;
    padding: 50px 40px;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    background:
        radial-gradient(circle at 80% 50%, rgba(200, 16, 46, 0.35) 0%, transparent 60%),
        linear-gradient(135deg, #14060a 0%, #2a0a0f 50%, #0a0609 100%);
    border: 1px solid var(--dmh-border);
    box-shadow:
        0 20px 60px rgba(200, 16, 46, 0.25),
        inset 0 0 80px rgba(200, 16, 46, 0.08);
    transition: transform 0.4s, box-shadow 0.4s, border-color 0.4s;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 40px;
    align-items: center;
}
.dmh-entry::before {
    content: "";
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255,30,60,0.04) 3px, rgba(255,30,60,0.04) 4px);
    pointer-events: none;
    opacity: 0.6;
}
.dmh-entry::after {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 18px;
    background: linear-gradient(120deg, transparent, rgba(212, 175, 55, 0.35), transparent);
    background-size: 200% 200%;
    animation: dmhShine 6s linear infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
    mask:
        linear-gradient(#000, #000) content-box,
        linear-gradient(#000, #000);
    -webkit-mask:
        linear-gradient(#000, #000) content-box,
        linear-gradient(#000, #000);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    padding: 2px;
}
@keyframes dmhShine {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}
.dmh-entry:hover {
    transform: translateY(-4px);
    border-color: var(--dmh-red-bright);
    box-shadow:
        0 30px 80px rgba(200, 16, 46, 0.4),
        inset 0 0 120px rgba(255, 30, 60, 0.12);
}
.dmh-entry-bg {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.1), transparent 40%);
    pointer-events: none;
}
.dmh-entry-sigil {
    position: relative;
    z-index: 1;
    width: 200px; height: 200px;
    color: var(--dmh-red-bright);
    filter: drop-shadow(0 0 20px rgba(255, 30, 60, 0.6));
    animation: dmhSigilSpin 40s linear infinite;
}
.dmh-entry-sigil svg { width: 100%; height: 100%; }
@keyframes dmhSigilSpin {
    to { transform: rotate(360deg); }
}
.dmh-entry-content { position: relative; z-index: 1; }
.dmh-entry-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7em;
    letter-spacing: 0.3em;
    color: var(--dmh-gold-bright);
    padding: 4px 12px;
    border: 1px solid var(--dmh-gold);
    border-radius: 4px;
    margin-bottom: 16px;
    background: rgba(212, 175, 55, 0.08);
}
.dmh-entry-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 3.2em;
    font-weight: 900;
    line-height: 1;
    margin: 0 0 6px;
    color: #fff;
    text-shadow: 0 0 30px rgba(255, 30, 60, 0.5);
    letter-spacing: -0.02em;
}
.dmh-entry-title span {
    background: linear-gradient(135deg, var(--dmh-red-bright), var(--dmh-gold-bright));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
}
.dmh-entry-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1em;
    color: var(--dmh-gold-bright);
    margin: 0 0 16px;
    letter-spacing: 0.15em;
}
.dmh-entry-desc {
    color: #cbd5e1;
    font-size: 0.98em;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 640px;
}
.dmh-entry-desc em { color: var(--dmh-gold-bright); font-style: normal; }
.dmh-entry-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}
.dmh-entry-stats > div {
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
    background: rgba(0,0,0,0.4);
    border-left: 2px solid var(--dmh-red-bright);
    border-radius: 4px;
}
.dmh-es-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.6em;
    font-weight: 700;
    color: #fff;
}
.dmh-es-lbl {
    font-size: 0.65em;
    letter-spacing: 0.25em;
    color: var(--dmh-gold);
}
.dmh-entry-btn {
    font-family: 'JetBrains Mono', monospace;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--dmh-red) 0%, var(--dmh-red-bright) 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: 0.95em;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(200, 16, 46, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}
.dmh-entry:hover .dmh-entry-btn {
    transform: translateX(6px);
    box-shadow: 0 12px 30px rgba(255, 30, 60, 0.55);
}

@media (max-width: 768px) {
    .dmh-entry {
        grid-template-columns: 1fr;
        padding: 30px 20px;
        text-align: center;
    }
    .dmh-entry-sigil { width: 120px; height: 120px; margin: 0 auto; }
    .dmh-entry-title { font-size: 2.2em; }
    .dmh-entry-stats { justify-content: center; flex-wrap: wrap; gap: 12px; }
}

/* ===== PORTAL OVERLAY ===== */
.dmh-portal {
    position: fixed;
    inset: 0;
    z-index: 20000;
    /* Capas (de arriba hacia abajo en el orden CSS):
       1) overlay oscuro para legibilidad
       2) tintes violeta/magenta/rojo del wallpaper
       3) el wallpaper devilmayhack.png (fijo, cubriendo)
       Va todo en `background` → siempre pinta detrás del contenido,
       sin necesidad de pseudo-elementos ni z-index. */
    background:
        linear-gradient(180deg, rgba(12,7,18,0.82) 0%, rgba(8,5,14,0.90) 100%),
        radial-gradient(circle at 78% 26%, rgba(217, 70, 239, 0.16) 0%, transparent 42%),
        radial-gradient(circle at 10% 75%, rgba(200, 16, 46, 0.16) 0%, transparent 50%),
        url('assets/devilmayhack.png') center / cover no-repeat fixed,
        linear-gradient(160deg, var(--dmh-violet-deep) 0%, var(--dmh-bg) 55%, #080510 100%);
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    color: #e5e7eb;
    font-family: 'Inter', -apple-system, sans-serif;
}
.dmh-portal.visible {
    display: block;
    animation: dmhPortalIn 0.45s ease-out;
}
@keyframes dmhPortalIn {
    from { opacity: 0; transform: scale(1.02); }
    to   { opacity: 1; transform: scale(1); }
}
.dmh-bg-effects {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 0;
}
.dmh-bg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(200, 16, 46, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200, 16, 46, 0.06) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.dmh-bg-glow {
    position: absolute;
    width: 700px; height: 700px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.45;
}
.dmh-glow-1 {
    top: -200px; right: -100px;
    background: radial-gradient(circle, var(--dmh-red-bright), transparent 70%);
    animation: dmhFloat 12s ease-in-out infinite;
}
.dmh-glow-2 {
    bottom: -200px; left: -100px;
    background: radial-gradient(circle, var(--dmh-red-deep), transparent 70%);
    animation: dmhFloat 15s ease-in-out infinite reverse;
}
@keyframes dmhFloat {
    0%, 100% { transform: translate(0,0); }
    50% { transform: translate(40px, -30px); }
}
.dmh-bg-scan {
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--dmh-red-bright), transparent);
    box-shadow: 0 0 20px var(--dmh-red-bright);
    animation: dmhScan 8s linear infinite;
}
@keyframes dmhScan {
    0% { transform: translateY(0); }
    100% { transform: translateY(100vh); }
}

/* ===== TOPBAR ===== */
.dmh-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
    background: linear-gradient(180deg, rgba(10, 6, 9, 0.98) 0%, rgba(10, 6, 9, 0.85) 100%);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--dmh-border);
}
.dmh-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'JetBrains Mono', monospace;
}
.dmh-brand-mark {
    color: var(--dmh-red-bright);
    font-size: 1.6em;
    text-shadow: 0 0 12px var(--dmh-red-bright);
    animation: dmhPulse 2s ease-in-out infinite;
}
@keyframes dmhPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}
.dmh-brand-text {
    font-size: 1.2em;
    font-weight: 400;
    color: #fff;
}
.dmh-brand-text b {
    background: linear-gradient(135deg, var(--dmh-red-bright), var(--dmh-gold-bright));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
    font-weight: 900;
}
.dmh-brand-sub {
    font-size: 0.75em;
    color: var(--dmh-gold);
    letter-spacing: 0.2em;
    border-left: 1px solid var(--dmh-border);
    padding-left: 12px;
    margin-left: 4px;
}
.dmh-top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dmh-user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(200, 16, 46, 0.12);
    border: 1px solid var(--dmh-border);
    border-radius: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
    color: var(--dmh-gold-bright);
}
.dmh-uc-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: dmhPulse 2s infinite;
}
.dmh-logout, .dmh-close {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(200, 16, 46, 0.15);
    border: 1px solid var(--dmh-border);
    color: #fff;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.dmh-close { font-size: 1.6em; }
.dmh-logout:hover, .dmh-close:hover {
    background: var(--dmh-red);
    border-color: var(--dmh-red-bright);
    transform: rotate(90deg);
}

/* ===== VIEWS (common) ===== */
.dmh-view {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 32px;
}

/* ===== LOGIN VIEW ===== */
.dmh-login-view {
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.dmh-login-card {
    width: 100%;
    max-width: 440px;
    padding: 40px 36px;
    background: var(--dmh-panel);
    border: 1px solid var(--dmh-border);
    border-radius: 16px;
    box-shadow:
        0 30px 80px rgba(0,0,0,0.6),
        inset 0 0 60px rgba(200, 16, 46, 0.05);
    text-align: center;
    backdrop-filter: blur(10px);
}
.dmh-login-sigil {
    width: 100px; height: 100px;
    margin: 0 auto 18px;
    color: var(--dmh-red-bright);
    filter: drop-shadow(0 0 16px rgba(255, 30, 60, 0.55));
    animation: dmhSigilSpin 30s linear infinite;
}
.dmh-login-sigil svg { width: 100%; height: 100%; }
.dmh-login-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2em;
    font-weight: 400;
    color: #fff;
    margin: 0 0 6px;
}
.dmh-login-title span {
    background: linear-gradient(135deg, var(--dmh-red-bright), var(--dmh-gold-bright));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
    font-weight: 900;
}
.dmh-login-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
    color: var(--dmh-gold-bright);
    font-style: italic;
    margin: 0 0 24px;
}
.dmh-login-note {
    font-size: 0.85em;
    color: #9ca3af;
    line-height: 1.5;
    margin-bottom: 24px;
    padding: 12px 16px;
    background: rgba(212, 175, 55, 0.05);
    border-left: 2px solid var(--dmh-gold);
    border-radius: 4px;
    text-align: left;
}
.dmh-login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}
.dmh-login-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dmh-login-form span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75em;
    letter-spacing: 0.2em;
    color: var(--dmh-gold);
}
.dmh-login-form input {
    padding: 12px 14px;
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--dmh-border);
    border-radius: 6px;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95em;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dmh-login-form input:focus {
    outline: none;
    border-color: var(--dmh-red-bright);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.2);
}
.dmh-login-err {
    min-height: 20px;
    font-size: 0.85em;
    color: var(--dmh-red-bright);
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
}
.dmh-login-hint {
    margin-top: 20px;
    font-size: 0.8em;
    color: #6b7280;
    font-style: italic;
}

/* ===== BUTTONS ===== */
.dmh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
    text-decoration: none;
}
.dmh-btn-sm { padding: 10px 18px; font-size: 0.8em; }
.dmh-btn-primary {
    background: linear-gradient(135deg, var(--dmh-red) 0%, var(--dmh-red-bright) 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(200, 16, 46, 0.4);
}
.dmh-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255,30,60,0.55); }
.dmh-btn-secondary {
    background: rgba(212, 175, 55, 0.1);
    color: var(--dmh-gold-bright);
    border: 1px solid var(--dmh-gold);
}
.dmh-btn-secondary:hover { background: rgba(212, 175, 55, 0.2); transform: translateY(-2px); }
.dmh-btn-ghost {
    background: transparent;
    color: #cbd5e1;
    border: 1px solid rgba(255,255,255,0.2);
}
.dmh-btn-ghost:hover { background: rgba(255,255,255,0.06); }

/* ===== DASHBOARD ===== */
.dmh-dash-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 32px;
}
.dmh-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.dmh-profile-card {
    padding: 24px;
    background: var(--dmh-panel);
    border: 1px solid var(--dmh-border);
    border-radius: 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.dmh-profile-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--dmh-red-bright), var(--dmh-gold), transparent);
}
.dmh-profile-avatar {
    width: 80px; height: 80px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dmh-red) 0%, var(--dmh-red-deep) 100%);
    border: 2px solid var(--dmh-gold);
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.2em;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 12px rgba(0,0,0,0.5);
    box-shadow: 0 0 30px rgba(200, 16, 46, 0.4);
}
.dmh-profile-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.2em;
    color: #fff;
    font-weight: 700;
}
.dmh-profile-rank {
    font-size: 0.8em;
    color: var(--dmh-gold-bright);
    letter-spacing: 0.15em;
    margin-top: 4px;
    margin-bottom: 16px;
}
.dmh-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--dmh-border);
}
.dmh-profile-stats > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dmh-profile-stats span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.3em;
    font-weight: 700;
    color: #fff;
}
.dmh-profile-stats small {
    font-size: 0.65em;
    letter-spacing: 0.2em;
    color: var(--dmh-gold);
}

.dmh-leaderboard {
    padding: 20px;
    background: var(--dmh-panel);
    border: 1px solid var(--dmh-border);
    border-radius: 12px;
}
.dmh-lb-header {
    display: flex; align-items: center; gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--dmh-border);
    margin-bottom: 14px;
}
.dmh-lb-ico {
    color: var(--dmh-gold-bright);
    font-size: 1.4em;
    text-shadow: 0 0 10px var(--dmh-gold);
}
.dmh-lb-title {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #fff;
    font-size: 0.95em;
}
.dmh-lb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dmh-lb-list li {
    display: grid;
    grid-template-columns: 38px 28px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    border-left: 2px solid transparent;
    font-size: 0.9em;
    transition: transform 0.2s, background 0.2s;
}
.dmh-lb-list li:hover { transform: translateX(2px); }
.dmh-lb-list li.dmh-lb-me { border-left-color: var(--dmh-red-bright); background: rgba(200, 16, 46, 0.12); }
.dmh-lb-list li.dmh-lb-top { border-left-color: var(--dmh-gold); background: rgba(212, 175, 55, 0.1); }
.dmh-lb-mini-you { color: var(--dmh-gold); margin-left: 4px; }

/* Rank badges — top 3 con medallas estilizadas, resto con tags hex */
.dmh-lb-rank {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 26px;
    border-radius: 5px;
    font-size: 0.95em;
    line-height: 1;
}
.dmh-lb-rank-1 {
    color: #1a0f00;
    background: linear-gradient(135deg, #ffe07a 0%, #d4af37 60%, #8a6a1c 100%);
    box-shadow: 0 0 10px rgba(212,175,55,0.6), inset 0 1px 0 rgba(255,255,255,0.3);
    font-size: 1.05em;
}
.dmh-lb-rank-2 {
    color: #0a0a0a;
    background: linear-gradient(135deg, #f0f4f8 0%, #b8c2cc 60%, #6b7a85 100%);
    box-shadow: 0 0 8px rgba(184,194,204,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
}
.dmh-lb-rank-3 {
    color: #1a0a00;
    background: linear-gradient(135deg, #f7b07a 0%, #c8804a 60%, #6f3a16 100%);
    box-shadow: 0 0 8px rgba(200,128,74,0.5), inset 0 1px 0 rgba(255,255,255,0.25);
}
.dmh-lb-rank-n {
    color: #94a3b8;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(200,16,46,0.2);
    font-size: 0.78em;
    letter-spacing: 0.05em;
}

/* Avatar mini — círculo coloreado por hash del nombre */
.dmh-lb-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.78em;
    color: #fff;
    background:
        linear-gradient(135deg,
            hsl(var(--av-h, 0), 65%, 42%) 0%,
            hsl(var(--av-h, 0), 70%, 28%) 100%);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 0 6px hsla(var(--av-h, 0), 70%, 40%, 0.4);
    text-transform: uppercase;
    flex-shrink: 0;
    user-select: none;
}
.dmh-lb-name {
    font-family: 'JetBrains Mono', monospace;
    color: #fff;
    font-size: 0.9em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dmh-lb-pts {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--dmh-red-bright);
    font-size: 0.85em;
}
.dmh-lb-note {
    margin-top: 12px;
    font-size: 0.7em;
    color: #6b7280;
    text-align: center;
    font-style: italic;
}

/* ===== Botón "Ver ranking completo" ===== */
.dmh-lb-fullbtn {
    margin: 10px auto 0;
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: rgba(200,16,46,0.08);
    border: 1px solid rgba(200,16,46,0.4);
    border-radius: 6px;
    color: var(--dmh-red-bright);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78em;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.12s;
}
.dmh-lb-fullbtn:hover {
    background: rgba(200,16,46,0.18);
    border-color: var(--dmh-red-bright);
    transform: translateY(-1px);
}
.dmh-lb-fullbtn:active { transform: translateY(0); }

/* ===== Modal: ranking completo ===== */
.dmh-fullrank-card {
    width: min(640px, 94vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
}
.dmh-fullrank-title {
    margin: 0 0 4px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.18em;
    color: var(--dmh-gold-bright);
    font-size: 1.1em;
}
.dmh-fullrank-title .dmh-lb-ico {
    color: var(--dmh-gold-bright);
    margin-right: 6px;
}
.dmh-fullrank-sub {
    margin: 0 0 14px;
    font-size: 0.78em;
    color: #94a3b8;
    line-height: 1.45;
}
.dmh-fullrank-list {
    list-style: none;
    margin: 0;
    padding: 4px 4px 4px 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dmh-fullrank-loading {
    text-align: center;
    color: #94a3b8;
    font-style: italic;
    padding: 24px 0;
}
.dmh-fullrank-row {
    display: grid;
    grid-template-columns: 38px 32px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0,0,0,0.32);
    border: 1px solid var(--dmh-border);
    border-left: 3px solid rgba(200,16,46,0.35);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.86em;
    transition: border-color 0.18s, background 0.18s;
}
.dmh-fullrank-row:hover { border-color: rgba(200,16,46,0.5); }
.dmh-fullrank-row.dmh-lb-top {
    border-left-color: var(--dmh-gold-bright);
    background: rgba(212,175,55,0.08);
}
.dmh-fullrank-row.dmh-fullrank-me {
    border-left-color: var(--dmh-red-bright);
    background: linear-gradient(90deg, rgba(200,16,46,0.22) 0%, rgba(200,16,46,0.06) 100%);
    box-shadow: 0 0 0 1px rgba(200,16,46,0.45), 0 0 18px rgba(200,16,46,0.18);
}
.dmh-fullrank-row.dmh-fullrank-me .dmh-lb-name { color: #fff; font-weight: 700; }
.dmh-fullrank-stats {
    display: flex;
    gap: 10px;
    color: #94a3b8;
    font-size: 0.82em;
}
.dmh-fullrank-stat { white-space: nowrap; }

@media (max-width: 520px) {
    .dmh-fullrank-row {
        grid-template-columns: 32px 28px 1fr auto;
        font-size: 0.78em;
    }
    .dmh-fullrank-stats { display: none; }
}

/* ===== Modal: actividad completa ===== */
.dmh-fullact-card {
    width: min(720px, 94vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
}
.dmh-fullact-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin: 6px 0 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(200,16,46,0.18);
}
.dmh-fullact-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.dmh-fullact-chip {
    background: rgba(0,0,0,0.4);
    color: #cbd5e1;
    border: 1px solid var(--dmh-border);
    border-radius: 999px;
    padding: 4px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74em;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dmh-fullact-chip:hover {
    border-color: rgba(200,16,46,0.5);
    color: #fff;
}
.dmh-fullact-chip-active {
    background: rgba(200,16,46,0.18);
    border-color: var(--dmh-red-bright);
    color: #fff;
    box-shadow: 0 0 10px rgba(200,16,46,0.3);
}
.dmh-fullact-range {
    display: flex;
    gap: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78em;
    color: #cbd5e1;
}
.dmh-fullact-range label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.dmh-fullact-range input[type="radio"] { accent-color: var(--dmh-red-bright); }
.dmh-fullact-meta {
    font-size: 0.72em;
    color: #94a3b8;
    margin-bottom: 6px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.04em;
}
.dmh-fullact-list {
    list-style: none;
    margin: 0;
    padding: 4px 4px 4px 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ===== Feed de actividad global (debajo del leaderboard) ===== */
.dmh-global-feed { margin-top: 18px; }
.dmh-activity-global-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
}
.dmh-activity-global-list::-webkit-scrollbar { width: 6px; }
.dmh-activity-global-list::-webkit-scrollbar-thumb {
    background: rgba(200,16,46,0.4); border-radius: 3px;
}
.dmh-activity-global-list::-webkit-scrollbar-track { background: transparent; }
.dmh-activity-global-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    padding: 7px 9px;
    background: rgba(0,0,0,0.32);
    border-radius: 5px;
    border-left: 2px solid transparent;
    font-size: 0.78em;
    line-height: 1.35;
    transition: background 0.2s, transform 0.2s;
}
.dmh-activity-global-item:hover { transform: translateX(2px); background: rgba(200,16,46,0.08); }
.dmh-activity-global-item.dmh-act-root { border-left-color: var(--dmh-red-bright); }
.dmh-activity-global-item.dmh-act-user { border-left-color: var(--dmh-gold); }
.dmh-activity-global-item .dmh-act-time {
    font-family: 'JetBrains Mono', monospace;
    color: #71717a;
    white-space: nowrap;
    font-size: 0.92em;
    align-self: flex-start;
}
.dmh-activity-global-item .dmh-act-time small { display: block; font-size: 0.85em; opacity: 0.7; }
.dmh-activity-global-item .dmh-act-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    color: #cbd5e1;
}
.dmh-activity-global-item .dmh-lb-avatar { width: 20px; height: 20px; font-size: 0.7em; }
.dmh-activity-global-item .dmh-act-who { color: #fff; font-weight: 600; }
.dmh-activity-global-item .dmh-act-on { color: #71717a; }
.dmh-activity-global-item .dmh-act-lab { color: var(--dmh-gold-bright); font-weight: 600; }
.dmh-activity-global-item .dmh-act-user-tag {
    font-size: 0.85em;
    color: var(--dmh-gold);
    background: rgba(212,175,55,0.12);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.08em;
}
.dmh-activity-global-item .dmh-act-root-tag {
    font-size: 0.85em;
    color: var(--dmh-red-bright);
    background: rgba(200,16,46,0.18);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.08em;
}

/* ===== LABS GRID ===== */
.dmh-section-head {
    margin-bottom: 26px;
}
.dmh-section-head h2 {
    position: relative;
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.55em;
    font-weight: 800;
    margin: 0 0 10px;
    letter-spacing: 0.32em;
    /* Degradé rojo→dorado→rojo dentro de las letras */
    background: linear-gradient(90deg,
        #fff 0%,
        var(--dmh-gold-bright) 35%,
        #fff 50%,
        var(--dmh-gold-bright) 65%,
        #fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 26px rgba(200,16,46,0.18);
}
.dmh-section-head h2::before {
    /* Subrayado rojo asimétrico justo bajo el título */
    content: '';
    position: absolute;
    left: -2px; right: 18%; bottom: -6px;
    height: 1px;
    background: linear-gradient(90deg,
        var(--dmh-red-bright) 0%,
        var(--dmh-red-bright) 32%,
        rgba(200,16,46,0.5) 60%,
        transparent 100%);
}
.dmh-section-head h2::after {
    /* Pequeño rombo dorado al final del subrayado */
    content: '◆';
    position: absolute;
    left: 82%; bottom: -14px;
    font-size: 0.4em;
    color: var(--dmh-gold-bright);
    text-shadow: 0 0 8px rgba(245,215,110,0.8);
    letter-spacing: 0;
    -webkit-text-fill-color: var(--dmh-gold-bright);
}
.dmh-section-head p {
    color: #94a3b8;
    margin: 0;
    font-size: 0.92em;
    line-height: 1.55;
    max-width: 720px;
}
.dmh-section-head p b {
    color: var(--dmh-gold-bright);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.dmh-labs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}
.dmh-lab-card {
    position: relative;
    padding: 0;
    background: var(--dmh-panel);
    border: 1px solid var(--dmh-border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.dmh-lab-card:hover {
    transform: translateY(-6px);
    border-color: var(--dmh-red-bright);
    box-shadow: 0 20px 40px rgba(200, 16, 46, 0.3);
}
.dmh-lab-avatar {
    height: 130px;
    display: flex; align-items: center; justify-content: center;
    font-size: 3.6em;
    background:
        radial-gradient(circle at 50% 40%, rgba(200, 16, 46, 0.35), transparent 70%),
        linear-gradient(135deg, #2a0a0f, #0a0609);
    position: relative;
    border-bottom: 1px solid var(--dmh-border);
}
.dmh-lab-avatar::after {
    content: "";
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,30,60,0.04) 2px, rgba(255,30,60,0.04) 3px);
}
.dmh-lab-card-body { padding: 16px 18px; }
.dmh-lab-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.dmh-lab-card-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.15em;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.05em;
}
.dmh-diff {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65em;
    letter-spacing: 0.15em;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: 700;
}
.dmh-diff-beginner { background: rgba(34,211,238,0.15); color: #67e8f9; border: 1px solid #22d3ee; }
.dmh-diff-easy     { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid #10b981; }
.dmh-diff-medium   { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid #f59e0b; }
.dmh-diff-hard     { background: rgba(200,16,46,0.15);  color: #ff6b7a; border: 1px solid var(--dmh-red); }
.dmh-diff-insane   { background: rgba(139,92,246,0.15); color: #a78bfa; border: 1px solid #8b5cf6; }

.dmh-lab-card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75em;
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 10px;
}
.dmh-lab-card-creator { color: var(--dmh-gold-bright); }
.dmh-lab-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.dmh-lab-card-tags .dmh-mini-tag {
    font-size: 0.65em;
    padding: 2px 6px;
    background: rgba(200, 16, 46, 0.1);
    border: 1px solid var(--dmh-border);
    color: #cbd5e1;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
}
.dmh-lab-card-status {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--dmh-border);
    font-size: 0.7em;
    letter-spacing: 0.15em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
}
.dmh-pwn-pill {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.9em;
    font-weight: 700;
}
.dmh-pwn-none  { background: rgba(107,114,128,0.2); color: #9ca3af; }
.dmh-pwn-half  { background: rgba(245,158,11,0.15); color: #fbbf24; }
.dmh-pwn-full  { background: rgba(16,185,129,0.15); color: #34d399; }

/* ===== LAB DETAIL ===== */
.dmh-back {
    background: transparent;
    border: 1px solid var(--dmh-border);
    color: var(--dmh-gold-bright);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
    margin-bottom: 24px;
    transition: all 0.2s;
}
.dmh-back:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--dmh-gold);
    transform: translateX(-4px);
}
.dmh-lab-hero {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 32px;
    padding: 32px;
    background: var(--dmh-panel);
    border: 1px solid var(--dmh-border);
    border-radius: 16px;
    margin-bottom: 28px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.dmh-lab-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--dmh-red-bright), var(--dmh-gold), var(--dmh-red-bright));
}
.dmh-lab-avatar-lg {
    width: 180px; height: 180px;
    display: flex; align-items: center; justify-content: center;
    font-size: 5em;
    background:
        radial-gradient(circle at 50% 40%, rgba(200, 16, 46, 0.4), transparent 70%),
        linear-gradient(135deg, #2a0a0f, #0a0609);
    border-radius: 12px;
    border: 1px solid var(--dmh-border);
}
.dmh-lab-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.dmh-lab-tags .dmh-mini-tag {
    font-size: 0.7em;
    padding: 3px 8px;
    background: rgba(200, 16, 46, 0.1);
    border: 1px solid var(--dmh-border);
    color: #cbd5e1;
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
}
.dmh-lab-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.4em;
    font-weight: 900;
    color: #fff;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
    text-shadow: 0 0 24px rgba(255, 30, 60, 0.3);
}
.dmh-lab-creator {
    color: #94a3b8;
    margin: 0 0 20px;
    font-size: 0.95em;
}
.dmh-lab-creator b { color: var(--dmh-gold-bright); font-weight: 700; }
.dmh-lab-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--dmh-border);
    border-bottom: 1px solid var(--dmh-border);
    margin-bottom: 20px;
}
.dmh-lab-meta > div { display: flex; flex-direction: column; gap: 4px; }
.dml-lbl {
    font-size: 0.65em;
    letter-spacing: 0.2em;
    color: var(--dmh-gold);
    font-family: 'JetBrains Mono', monospace;
}
.dml-val {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #fff;
    font-size: 1em;
}
.dmh-download { display: inline-flex; }

.dmh-lab-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.dmh-lab-desc, .dmh-lab-flags, .dmh-lab-writeup {
    padding: 24px 28px;
    background: var(--dmh-panel);
    border: 1px solid var(--dmh-border);
    border-radius: 12px;
}
.dmh-lab-desc h3, .dmh-lab-flags h3, .dmh-lab-writeup h3 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1em;
    letter-spacing: 0.2em;
    color: var(--dmh-gold-bright);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dmh-border);
}
.dmh-lab-desc { color: #cbd5e1; line-height: 1.7; }
.dmh-lab-desc p { margin: 0 0 12px; }
.dmh-lab-desc ul { padding-left: 20px; margin: 0 0 12px; }
.dmh-lab-desc li { margin-bottom: 6px; }
.dmh-lab-desc strong { color: var(--dmh-red-bright); }
.dmh-lab-desc code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
    padding: 2px 6px;
    background: rgba(200,16,46,0.1);
    border-radius: 3px;
    color: var(--dmh-gold-bright);
}

.dmh-flag-row {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--dmh-border);
    border-radius: 8px;
    margin-bottom: 10px;
    transition: border-color 0.3s, background 0.3s;
}
.dmh-flag-row.captured {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}
.dmh-flag-label {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dmh-flag-ico {
    font-size: 1.6em;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(200, 16, 46, 0.15);
    border-radius: 8px;
}
.dmh-flag-row.captured .dmh-flag-ico { background: rgba(16,185,129,0.15); }
.dmh-fl-top {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
    letter-spacing: 0.2em;
    color: #fff;
    font-weight: 700;
}
.dmh-fl-sub {
    font-size: 0.75em;
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
    margin-top: 2px;
}
.dmh-flag-row.captured .dmh-fl-sub { color: #34d399; }
.dmh-flag-row form {
    display: flex;
    gap: 8px;
}
.dmh-flag-row input {
    flex: 1;
    padding: 10px 12px;
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--dmh-border);
    border-radius: 6px;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
}
.dmh-flag-row input:focus {
    outline: none;
    border-color: var(--dmh-red-bright);
}
.dmh-flag-row.captured input { opacity: 0.5; }

.dmh-wu-note { color: #94a3b8; font-size: 0.9em; margin: 0 0 14px; }
.dmh-lab-writeup form {
    display: flex;
    gap: 10px;
    align-items: center;
}
.dmh-lab-writeup input[type="file"] {
    flex: 1;
    color: #cbd5e1;
    font-size: 0.85em;
}
.dmh-lab-writeup input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 8px 14px;
    border: 1px solid var(--dmh-border);
    background: rgba(200, 16, 46, 0.12);
    color: var(--dmh-gold-bright);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8em;
    cursor: pointer;
}
.dmh-wu-current {
    margin-top: 12px;
    font-size: 0.85em;
    color: #34d399;
    font-family: 'JetBrains Mono', monospace;
}

/* ===== CONGRATS MODAL ===== */
.dmh-congrats {
    position: fixed; inset: 0;
    z-index: 21000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.dmh-congrats.visible { display: flex; animation: dmhPortalIn 0.4s ease-out; }
.dmh-congrats-bg {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
}
.dmh-congrats-card {
    position: relative;
    max-width: 520px;
    width: 100%;
    padding: 40px 36px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(200,16,46,0.3), transparent 50%),
        linear-gradient(180deg, #14060a, #0a0609);
    border: 1px solid var(--dmh-gold);
    border-radius: 16px;
    box-shadow:
        0 40px 100px rgba(200, 16, 46, 0.5),
        0 0 60px rgba(212, 175, 55, 0.3);
    overflow: hidden;
}
.dmh-congrats-rays {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(212,175,55,0.15) 10deg, transparent 20deg, transparent 40deg, rgba(255,30,60,0.12) 50deg, transparent 60deg);
    animation: dmhSigilSpin 20s linear infinite;
    pointer-events: none;
}
.dmh-congrats-card > * { position: relative; z-index: 1; }
.dmh-congrats-sigil {
    font-size: 4.5em;
    line-height: 1;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 20px rgba(255,30,60,0.6));
    animation: dmhPulse 2s ease-in-out infinite;
}
.dmh-congrats-kicker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75em;
    letter-spacing: 0.4em;
    color: var(--dmh-gold-bright);
    margin-bottom: 6px;
}
.dmh-congrats-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 3em;
    margin: 0 0 10px;
    background: linear-gradient(135deg, var(--dmh-red-bright), var(--dmh-gold-bright));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
    font-style: italic;
    text-shadow: 0 0 40px rgba(255,30,60,0.5);
}
.dmh-congrats-sub { color: #cbd5e1; font-size: 1em; margin: 0 0 20px; }
.dmh-congrats-sub b { color: #fff; }
.dmh-congrats-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}
.dmh-congrats-stats > div {
    padding: 14px;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--dmh-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dmh-congrats-stats span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.4em;
    font-weight: 700;
    color: #fff;
}
.dmh-congrats-stats small {
    font-size: 0.7em;
    letter-spacing: 0.2em;
    color: var(--dmh-gold);
}
.dmh-congrats-quote {
    font-style: italic;
    color: var(--dmh-gold-bright);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
    margin: 0 0 20px;
}
.dmh-share-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75em;
    letter-spacing: 0.25em;
    color: var(--dmh-gold);
    margin-bottom: 10px;
}
.dmh-share-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.dmh-share {
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid var(--dmh-border);
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75em;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    letter-spacing: 0.1em;
}
.dmh-share:hover { transform: translateY(-2px); }
.dmh-share-li:hover { background: #0A66C2; border-color: #0A66C2; }
.dmh-share-x:hover  { background: #000; border-color: #fff; }
.dmh-share-fb:hover { background: #1877F2; border-color: #1877F2; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .dmh-dash-grid { grid-template-columns: 1fr; }
    .dmh-lab-hero { grid-template-columns: 1fr; text-align: center; }
    .dmh-lab-avatar-lg { margin: 0 auto; }
    .dmh-lab-meta { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .dmh-view { padding: 24px 16px; }
    .dmh-topbar { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
    .dmh-brand-sub { display: none; }
    .dmh-flag-row { grid-template-columns: 1fr; }
    .dmh-lab-name { font-size: 1.6em; }
    .dmh-congrats-title { font-size: 2em; }
    .dmh-login-card { padding: 30px 22px; }
}

/* ===== Admin badge ===== */
.dmh-admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin-left: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65em;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #0a0a0a;
    background: linear-gradient(135deg, #f5d76e 0%, #d4af37 60%, #a07d1b 100%);
    border: 1px solid #d4af37;
    border-radius: 3px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.3);
    box-shadow: 0 0 10px rgba(212,175,55,0.45), inset 0 1px 0 rgba(255,255,255,0.4);
    text-transform: uppercase;
    animation: dmhAdminPulse 2.4s ease-in-out infinite;
}
.dmh-admin-badge-lg {
    padding: 4px 12px;
    font-size: 0.75em;
    margin: 6px 0 0;
    letter-spacing: 0.22em;
}
@keyframes dmhAdminPulse {
    0%,100% { box-shadow: 0 0 10px rgba(212,175,55,0.45), inset 0 1px 0 rgba(255,255,255,0.4); }
    50%     { box-shadow: 0 0 18px rgba(212,175,55,0.85), inset 0 1px 0 rgba(255,255,255,0.5); }
}
/* Marca roja extra en el portal cuando el logueado es admin */
body.dmh-is-admin .dmh-profile-card {
    border-color: rgba(212,175,55,0.55);
    box-shadow: 0 0 24px rgba(212,175,55,0.18);
}

/* ===== Avatar imagen (fallback de emoji) ===== */
.dmh-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}
.dmh-lab-avatar .dmh-avatar-img,
.dmh-lab-avatar-lg .dmh-avatar-img {
    border-radius: 10px;
}

/* ===== Feed de actividad del lab ===== */
.dmh-lab-activity {
    margin-top: 26px;
    padding: 22px 24px;
    border: 1px solid rgba(200,16,46,0.25);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(200,16,46,0.06), rgba(0,0,0,0.25));
}
.dmh-lab-activity h3 {
    color: #d4af37;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
    letter-spacing: 0.25em;
    margin: 0 0 14px;
    text-transform: uppercase;
}
.dmh-activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 380px;
    overflow-y: auto;
}
.dmh-activity-empty {
    color: #6b7280;
    font-style: italic;
    text-align: center;
    padding: 18px 10px;
    border: 1px dashed rgba(200,16,46,0.25);
    border-radius: 6px;
}
.dmh-activity-item {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
    border-left: 3px solid rgba(255,255,255,0.1);
    font-size: 0.92em;
    transition: background 0.2s ease;
}
.dmh-activity-item:hover { background: rgba(255,255,255,0.04); }
.dmh-act-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78em;
    color: #9ca3af;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.dmh-act-ico { font-size: 1.15em; }
.dmh-act-text { color: #d1d5db; line-height: 1.4; }
.dmh-act-who {
    color: #f5d76e;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(212,175,55,0.35);
}
/* USER FLAG — tono sobrio */
.dmh-act-user { border-left-color: #3b82f6; }
.dmh-act-user-tag {
    color: #60a5fa;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
    letter-spacing: 0.08em;
}
/* ROOT FLAG — más llamativo */
.dmh-act-root {
    border-left-color: #ff1e3c;
    background: linear-gradient(90deg, rgba(255,30,60,0.12), rgba(255,30,60,0.02));
    animation: dmhActRootGlow 2.4s ease-in-out infinite;
}
.dmh-act-root-tag {
    color: #ff1e3c;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
    letter-spacing: 0.1em;
    text-shadow: 0 0 8px rgba(255,30,60,0.55);
}
@keyframes dmhActRootGlow {
    0%,100% { box-shadow: inset 0 0 0 rgba(255,30,60,0); }
    50%     { box-shadow: inset 0 0 22px rgba(255,30,60,0.12); }
}

/* ===== Settings button en topbar ===== */
.dmh-settings-btn {
    background: transparent;
    border: 1px solid rgba(212,175,55,0.35);
    color: #d4af37;
    width: 36px; height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.dmh-settings-btn:hover {
    border-color: #d4af37;
    box-shadow: 0 0 14px rgba(212,175,55,0.35);
    transform: rotate(45deg);
}

/* ===== Settings modal ===== */
.dmh-settings {
    position: fixed; inset: 0;
    z-index: 10001;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.dmh-settings-bg {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.82);
    backdrop-filter: blur(8px);
}
.dmh-settings-card {
    position: relative;
    background: linear-gradient(180deg, #1a0508 0%, #0a0203 100%);
    border: 1px solid rgba(200,16,46,0.45);
    border-radius: 12px;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.75), 0 0 40px rgba(200,16,46,0.25);
    animation: dmhPortalIn 0.35s ease-out;
}
.dmh-settings-close {
    position: absolute; top: 14px; right: 16px;
    background: transparent; border: none;
    color: #f5d76e; font-size: 1.6em; cursor: pointer;
    line-height: 1; padding: 4px 8px;
}
.dmh-settings-close:hover { color: #fff; }
.dmh-settings-title {
    color: #f5d76e;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5em;
    margin: 0 0 4px;
    letter-spacing: 0.08em;
}
.dmh-settings-sub {
    color: #94a3b8;
    margin: 0 0 22px;
    font-size: 0.92em;
}
.dmh-settings-section {
    border: 1px solid rgba(200,16,46,0.2);
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 18px;
    background: rgba(0,0,0,0.25);
}
.dmh-settings-section h3 {
    color: #d4af37;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8em;
    letter-spacing: 0.22em;
    margin: 0 0 14px;
}
.dmh-settings-avatar-wrap {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 18px;
    align-items: start;
}
.dmh-settings-avatar-preview {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #c8102e, #5a0a18);
    border: 2px solid #d4af37;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.4em;
    font-weight: 700;
    overflow: hidden;
}
.dmh-settings-avatar-preview img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.dmh-settings-avatar-right { display: flex; flex-direction: column; gap: 10px; }
.dmh-settings-field { display: flex; flex-direction: column; gap: 4px; }
.dmh-settings-field > span {
    color: #94a3b8;
    font-size: 0.78em;
    letter-spacing: 0.08em;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
}
.dmh-settings-field input[type="url"],
.dmh-settings-field input[type="password"],
.dmh-settings-field input[type="file"] {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(200,16,46,0.35);
    border-radius: 6px;
    padding: 8px 12px;
    color: #fff;
    font-family: inherit;
    font-size: 0.92em;
    transition: all 0.2s ease;
}
.dmh-settings-field input[type="url"]:focus,
.dmh-settings-field input[type="password"]:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212,175,55,0.15);
}
.dmh-settings-sep {
    color: #6b7280;
    font-size: 0.72em;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.2em;
    margin: 2px 0;
}
.dmh-settings-actions { display: flex; gap: 10px; margin-top: 4px; }
.dmh-settings-pwd { display: flex; flex-direction: column; gap: 12px; }
.dmh-settings-pwd button[type="submit"] { align-self: flex-start; }
.dmh-settings-msg {
    font-size: 0.88em;
    margin-top: 6px;
    font-family: 'JetBrains Mono', monospace;
    min-height: 1.2em;
}
.dmh-settings-msg.ok  { color: #4ade80; }
.dmh-settings-msg.err { color: #ff6b7a; }

/* Profile card: si hay imagen, sustituye el texto */
.dmh-profile-avatar img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: inherit; display: block;
}
/* Chip de usuario (topbar): también puede llevar foto */
.dmh-uc-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 4px;
}

@media (max-width: 680px) {
    .dmh-settings-avatar-wrap {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

/* ===== Admin button (topbar) ===== */
.dmh-admin-btn {
    background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.05));
    border: 1px solid rgba(212,175,55,0.55);
    color: #f5d76e;
    width: 36px; height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.dmh-admin-btn:hover {
    border-color: #f5d76e;
    box-shadow: 0 0 16px rgba(212,175,55,0.45);
    transform: translateY(-1px);
}

/* ===== Admin view ===== */
.dmh-admin-view { padding: 30px 40px 60px; max-width: 1280px; margin: 0 auto; }
.dmh-admin-header { margin: 18px 0 24px; }
.dmh-admin-title {
    color: #f5d76e;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.8em;
    margin: 0;
    letter-spacing: 0.06em;
}
.dmh-admin-title b { color: #fff; }
.dmh-admin-icon { filter: drop-shadow(0 0 8px rgba(212,175,55,0.5)); }
.dmh-admin-sub { color: #94a3b8; margin: 6px 0 0; }

.dmh-admin-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid rgba(212,175,55,0.25);
    margin-bottom: 22px;
}
.dmh-admin-tab {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
    letter-spacing: 0.18em;
    padding: 12px 22px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}
.dmh-admin-tab:hover { color: #d4af37; }
.dmh-admin-tab.active {
    color: #f5d76e;
    border-bottom-color: #d4af37;
    text-shadow: 0 0 10px rgba(212,175,55,0.35);
}

.dmh-admin-pane-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: 16px;
    flex-wrap: wrap;
}
.dmh-admin-pane-head h3 {
    color: #d4af37;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95em;
    letter-spacing: 0.18em;
    margin: 0;
    text-transform: uppercase;
}
.dmh-admin-filter {
    display: flex; gap: 10px; align-items: end; flex-wrap: wrap;
}
.dmh-admin-filter label { display: flex; flex-direction: column; gap: 4px; }
.dmh-admin-filter span {
    font-size: 0.7em; color: #94a3b8;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.12em; text-transform: uppercase;
}
.dmh-admin-filter select {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(200,16,46,0.35);
    border-radius: 6px;
    padding: 6px 10px;
    color: #fff;
    font-family: inherit;
    min-width: 200px;
}

.dmh-admin-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(200,16,46,0.2);
    border-radius: 10px;
    background: rgba(0,0,0,0.3);
}
.dmh-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92em;
}
.dmh-admin-table thead th {
    text-align: left;
    padding: 10px 14px;
    background: rgba(200,16,46,0.1);
    color: #d4af37;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(212,175,55,0.25);
}
.dmh-admin-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: #e5e7eb;
    vertical-align: middle;
}
.dmh-admin-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.dmh-admin-table tbody tr:last-child td { border-bottom: none; }
.dmh-admin-table .dmh-admin-empty {
    text-align: center; color: #6b7280;
    font-style: italic; padding: 26px;
}
.dmh-admin-avatar {
    width: 36px; height: 36px; border-radius: 6px;
    background: rgba(200,16,46,0.2);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    font-size: 1.2em;
}
.dmh-admin-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dmh-admin-row-actions {
    display: flex; gap: 6px;
}
.dmh-admin-row-actions button {
    font-size: 0.78em;
    padding: 5px 10px;
    letter-spacing: 0.05em;
}
.dmh-admin-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72em;
    letter-spacing: 0.12em;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
}
.dmh-admin-tag-active  { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.35); }
.dmh-admin-tag-inactive{ background: rgba(107,114,128,0.15); color: #9ca3af; border: 1px solid rgba(107,114,128,0.35); }
.dmh-admin-tag-pending { background: rgba(249,168,37,0.15); color: #fbbf24; border: 1px solid rgba(249,168,37,0.45); }
.dmh-admin-tag-admin   { background: rgba(212,175,55,0.15); color: #f5d76e; border: 1px solid rgba(212,175,55,0.45); }
.dmh-admin-tag-user    { background: rgba(59,130,246,0.12); color: #60a5fa; border: 1px solid rgba(59,130,246,0.3); }

.dmh-admin-placeholder {
    padding: 40px;
    text-align: center;
    color: #d4af37;
    border: 1px dashed rgba(212,175,55,0.35);
    border-radius: 10px;
    background: rgba(212,175,55,0.04);
}

/* Lab editor modal */
.dmh-lab-editor {
    position: fixed; inset: 0;
    z-index: 10002;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.dmh-lab-editor-bg {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
}
.dmh-lab-editor-card {
    position: relative;
    background: linear-gradient(180deg, #1a0508 0%, #0a0203 100%);
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: 12px;
    max-width: 820px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    padding: 26px 30px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.75), 0 0 40px rgba(212,175,55,0.18);
    animation: dmhPortalIn 0.3s ease-out;
}
.dmh-leform-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    margin-top: 14px;
}
.dmh-leform-full { grid-column: 1 / -1; }
.dmh-lab-editor-form textarea,
.dmh-lab-editor-form input[type="text"],
.dmh-lab-editor-form input[type="url"],
.dmh-lab-editor-form select {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(200,16,46,0.35);
    border-radius: 6px;
    padding: 8px 12px;
    color: #fff;
    font-family: inherit;
    font-size: 0.92em;
    width: 100%;
}
.dmh-lab-editor-form textarea {
    resize: vertical; min-height: 110px; font-family: 'JetBrains Mono', monospace; font-size: 0.85em;
}
.dmh-lab-editor-form input:focus,
.dmh-lab-editor-form textarea:focus,
.dmh-lab-editor-form select:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212,175,55,0.15);
}
.dmh-leform-note {
    font-size: 0.85em; color: #94a3b8;
    margin: 14px 0 10px;
    padding: 10px 14px;
    background: rgba(212,175,55,0.05);
    border-left: 2px solid rgba(212,175,55,0.5);
    border-radius: 4px;
}
.dmh-leform-actions {
    display: flex; gap: 10px; align-items: center; margin-top: 14px;
    flex-wrap: wrap;
}

@media (max-width: 760px) {
    .dmh-leform-grid { grid-template-columns: 1fr; }
    .dmh-admin-view { padding: 20px 16px 40px; }
}

/* ===== Tanda 4: writeups workflow ===== */
.dmh-wu-badge {
    display: inline-block;
    padding: 3px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.12em;
    border-radius: 3px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.dmh-wu-ok   { background: rgba(74,222,128,0.14); color: #4ade80; border-color: rgba(74,222,128,0.45); }
.dmh-wu-bad  { background: rgba(200,16,46,0.18);  color: #ff5a77; border-color: rgba(200,16,46,0.55); }
.dmh-wu-pend { background: rgba(250,204,21,0.14); color: #facc15; border-color: rgba(250,204,21,0.45); }

.dmh-wu-current .dmh-wu-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 0.92em;
    color: #d4d4d8;
}
.dmh-wu-note-review {
    margin-top: 8px;
    padding: 8px 12px;
    border-left: 3px solid var(--dmh-red-bright, #c8102e);
    background: rgba(200,16,46,0.08);
    color: #e4e4e7;
    font-size: 0.9em;
    border-radius: 0 4px 4px 0;
}
.dmh-wu-status-approved .dmh-wu-note-review {
    border-left-color: #4ade80;
    background: rgba(74,222,128,0.08);
}

.dmh-wu-filter {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.dmh-wu-filter-btn {
    background: #18181b;
    color: #a1a1aa;
    border: 1px solid #27272a;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78em;
    letter-spacing: 0.1em;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.15s;
}
.dmh-wu-filter-btn:hover { border-color: #52525b; color: #e4e4e7; }
.dmh-wu-filter-btn.active {
    background: var(--dmh-red-bright, #c8102e);
    color: #0a0a0a;
    border-color: var(--dmh-red-bright, #c8102e);
}

.dmh-admin-table td.dmh-adm-note {
    max-width: 240px;
    font-size: 0.85em;
    color: #a1a1aa;
    white-space: normal;
}
.dmh-admin-table td.dmh-adm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.dmh-btn.dmh-btn-danger {
    background: transparent;
    color: #ff5a77;
    border: 1px solid rgba(200,16,46,0.55);
}
.dmh-btn.dmh-btn-danger:hover {
    background: rgba(200,16,46,0.18);
    color: #fff;
}
.dmh-admin-help {
    margin-top: 12px;
    font-size: 0.82em;
    color: #6b7280;
}
.dmh-admin-help code {
    background: #18181b;
    padding: 2px 6px;
    border-radius: 3px;
    color: #d4d4d8;
}
.dmh-adm-sub {
    font-size: 0.78em;
    color: #6b7280;
    margin-top: 2px;
}

/* ===== Tanda 5: Congrats modal enhanced ===== */
.dmh-congrats { perspective: 1200px; }
.dmh-congrats.visible .dmh-congrats-card {
    animation: dmhCongratsPop 620ms cubic-bezier(0.22, 1.4, 0.36, 1) both;
}
@keyframes dmhCongratsPop {
    0%   { transform: scale(0.55) rotateX(25deg); opacity: 0; filter: blur(8px); }
    55%  { transform: scale(1.08) rotateX(-4deg); opacity: 1; filter: blur(0); }
    80%  { transform: scale(0.97) rotateX(1deg); }
    100% { transform: scale(1)    rotateX(0);   opacity: 1; }
}
.dmh-congrats.visible .dmh-congrats-bg {
    animation: dmhCongratsBgFade 420ms ease both;
}
@keyframes dmhCongratsBgFade {
    from { opacity: 0; backdrop-filter: blur(0); }
    to   { opacity: 1; backdrop-filter: blur(6px); }
}
.dmh-congrats.visible .dmh-congrats-sigil {
    animation: dmhSigilSpin 900ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes dmhSigilSpin {
    0%   { transform: scale(0.3) rotate(-180deg); filter: drop-shadow(0 0 0 transparent); }
    60%  { transform: scale(1.25) rotate(12deg); filter: drop-shadow(0 0 24px rgba(200,16,46,0.85)); }
    100% { transform: scale(1)    rotate(0);     filter: drop-shadow(0 0 16px rgba(200,16,46,0.55)); }
}
.dmh-congrats.visible .dmh-congrats-title {
    animation: dmhTitleGlow 1600ms ease-in-out infinite alternate;
}
@keyframes dmhTitleGlow {
    from { text-shadow: 0 0 12px rgba(200,16,46,0.4), 0 0 2px rgba(255,90,119,0.5); }
    to   { text-shadow: 0 0 28px rgba(255,90,119,0.95), 0 0 6px rgba(255,180,60,0.6); }
}
.dmh-congrats.visible .dmh-congrats-stats span {
    animation: dmhStatCount 900ms ease-out both;
}
@keyframes dmhStatCount {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.dmh-congrats-motiv {
    display: inline-block;
    margin-top: 10px;
    color: #a1a1aa;
    font-size: 0.92em;
    line-height: 1.55;
    font-style: italic;
}

/* Sparks / confetti — 15 partículas radiales */
.dmh-congrats-sparks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}
.dmh-congrats-sparks span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px; height: 6px;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
}
.dmh-congrats.visible .dmh-congrats-sparks span {
    animation: dmhSpark 1100ms ease-out forwards;
}
.dmh-congrats-sparks span:nth-child(1){ background:#c8102e; --tx: -180px; --ty: -120px; animation-delay:80ms; }
.dmh-congrats-sparks span:nth-child(2){ background:#ff5a77; --tx:  180px; --ty: -140px; animation-delay:100ms; }
.dmh-congrats-sparks span:nth-child(3){ background:#facc15; --tx: -240px; --ty:   40px; animation-delay:60ms;  }
.dmh-congrats-sparks span:nth-child(4){ background:#ffb347; --tx:  260px; --ty:    0px; animation-delay:120ms; }
.dmh-congrats-sparks span:nth-child(5){ background:#4ade80; --tx: -120px; --ty:  200px; animation-delay:140ms; }
.dmh-congrats-sparks span:nth-child(6){ background:#c8102e; --tx:  140px; --ty:  220px; animation-delay:90ms;  }
.dmh-congrats-sparks span:nth-child(7){ background:#ff5a77; --tx:    0px; --ty: -200px; animation-delay:150ms; }
.dmh-congrats-sparks span:nth-child(8){ background:#facc15; --tx:    0px; --ty:  240px; animation-delay:170ms; }
.dmh-congrats-sparks span:nth-child(9){ background:#ffb347; --tx: -220px; --ty:  -40px; animation-delay:110ms; }
.dmh-congrats-sparks span:nth-child(10){background:#4ade80; --tx:  220px; --ty:  100px; animation-delay:130ms; }
.dmh-congrats-sparks span:nth-child(11){background:#c8102e; --tx: -100px; --ty: -220px; animation-delay:200ms; }
.dmh-congrats-sparks span:nth-child(12){background:#ff5a77; --tx:  100px; --ty: -200px; animation-delay:180ms; }
.dmh-congrats-sparks span:nth-child(13){background:#facc15; --tx: -260px; --ty:  120px; animation-delay:70ms;  }
.dmh-congrats-sparks span:nth-child(14){background:#ffb347; --tx:  260px; --ty: -100px; animation-delay:160ms; }
.dmh-congrats-sparks span:nth-child(15){background:#4ade80; --tx:    0px; --ty:    0px; animation-delay:40ms;  }
@keyframes dmhSpark {
    0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 1; box-shadow: 0 0 8px currentColor; }
    60%  { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.4); opacity: 0; }
}

/* Copy-link button */
.dmh-share.dmh-share-copy {
    background: linear-gradient(135deg, #27272a 0%, #3f3f46 100%);
    color: #facc15;
    border: 1px solid rgba(250,204,21,0.55);
}
.dmh-share.dmh-share-copy:hover {
    background: linear-gradient(135deg, #3f3f46 0%, #52525b 100%);
    color: #fef3c7;
}
.dmh-share.dmh-share-copied {
    background: rgba(74,222,128,0.25) !important;
    color: #4ade80 !important;
    border-color: #4ade80 !important;
}

/* ===== Sigil del congrats puede ser avatar-img ===== */
.dmh-congrats-sigil {
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dmh-congrats-sigil .dmh-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* ================================================================
   UI POLISH — DMH topbar 2.0, hero entry, academia-card hint,
   transiciones de salida.
   ================================================================ */

/* --- Salida fade para .content-page --- */
@keyframes contentFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-12px); }
}
.content-page.leaving {
    display: block !important;
    animation: contentFadeOut 0.32s ease-in forwards;
    pointer-events: none;
}

/* --- Salida fade para el portal DMH --- */
@keyframes dmhPortalOut {
    from { opacity: 1; transform: scale(1); filter: blur(0); }
    to   { opacity: 0; transform: scale(1.015); filter: blur(2px); }
}
.dmh-portal.visible.leaving {
    animation: dmhPortalOut 0.3s ease-in forwards;
    pointer-events: none;
}

/* --- Home Academia card: badge + hint indicador DMH --- */
.nav-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px; height: 26px;
    color: #ff5a77;
    filter: drop-shadow(0 0 6px rgba(255,90,119,0.6));
    opacity: 0.85;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s, filter 0.3s;
    pointer-events: none;
    animation: dmhSigilSpin 24s linear infinite;
}
.nav-card-badge svg { width: 100%; height: 100%; display: block; }
.nav-card.academy:hover .nav-card-badge {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(255,90,119,0.95));
    transform: scale(1.1);
}
.nav-card-hint {
    position: absolute;
    bottom: 10px;
    left: 0; right: 0;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62em;
    letter-spacing: 0.18em;
    color: #ff5a77;
    text-shadow: 0 0 8px rgba(255,90,119,0.5);
    opacity: 0.7;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    text-transform: uppercase;
}
.nav-card.academy:hover .nav-card-hint {
    opacity: 1;
    transform: translateY(-2px);
}

/* --- DMH entry: variante HERO en la academia --- */
.dmh-entry.dmh-entry-hero {
    margin-top: 0;
    margin-bottom: 56px;
}
.dmh-entry.dmh-entry-hero::before {
    opacity: 0.85;
}

/* --- Topbar 2.0 — logo izquierda, nav + acciones a la derecha --- */
.dmh-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
}
.dmh-brand {
    margin-right: auto;       /* empuja el resto a la derecha */
    display: flex;
    align-items: center;
}
.dmh-top-nav {
    display: flex;
    gap: 8px;
    align-items: center;
}
.dmh-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Pequeño separador visual entre nav y acciones */
.dmh-top-nav + .dmh-top-actions {
    padding-left: 14px;
    margin-left: 4px;
    border-left: 1px solid var(--dmh-border);
}

.dmh-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(200,16,46,0.08);
    border: 1px solid var(--dmh-border);
    border-radius: 8px;
    color: #e5e7eb;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82em;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s, color 0.2s;
}
.dmh-nav-btn svg {
    transition: transform 0.2s;
}
.dmh-nav-btn:hover {
    background: rgba(200,16,46,0.18);
    border-color: var(--dmh-red-bright);
    color: #fff;
}
.dmh-nav-btn:hover svg {
    transform: translateX(-3px);
}
.dmh-nav-btn-ghost {
    background: transparent;
}
.dmh-nav-btn-ghost:hover svg {
    transform: translateY(-2px);
}

/* Quitar el sub-tag "Labs for Everyone" en topbar para no saturar */
.dmh-topbar .dmh-brand-sub { display: none; }

/* Botones-icon (admin / settings) — diseño coherente, no más emoji raro */
.dmh-icon-btn {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(200,16,46,0.10);
    border: 1px solid var(--dmh-border);
    border-radius: 50%;
    color: #e5e7eb;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.dmh-icon-btn:hover {
    background: rgba(200,16,46,0.25);
    border-color: var(--dmh-red-bright);
    color: #fff;
    transform: translateY(-1px);
}

/* Botón logout: con texto, claramente "Cerrar sesión", color de salida */
.dmh-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(200,16,46,0.18);
    border: 1px solid rgba(200,16,46,0.55);
    border-radius: 8px;
    color: #fecaca;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82em;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.dmh-logout-btn:hover {
    background: linear-gradient(135deg, var(--dmh-red) 0%, var(--dmh-red-bright) 100%);
    border-color: var(--dmh-red-bright);
    color: #fff;
    box-shadow: 0 0 18px rgba(200,16,46,0.45);
}

/* Móvil: la topbar se apila */
@media (max-width: 820px) {
    .dmh-topbar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 16px;
        justify-content: center;
    }
    .dmh-brand { margin-right: 0; }
    .dmh-top-nav, .dmh-top-actions { justify-content: center; flex-wrap: wrap; }
    .dmh-top-nav + .dmh-top-actions { border-left: none; padding-left: 0; margin-left: 0; }
    .dmh-nav-btn span, .dmh-logout-btn span { display: inline; }
}

/* ================================================================
   LOGO DMH (reemplaza títulos en topbar y hero) + transiciones
   suaves entre vistas internas del portal.
   ================================================================ */

/* --- Logo en la topbar (PNG transparente, sin mix-blend) --- */
.dmh-brand-logo {
    height: 64px;
    width: auto;
    max-width: 280px;
    display: block;
    filter: drop-shadow(0 0 14px rgba(255,30,60,0.55));
    transition: filter 0.3s, transform 0.3s;
    user-select: none;
    -webkit-user-drag: none;
}
.dmh-brand-logo:hover {
    filter: drop-shadow(0 0 22px rgba(255,90,119,0.85));
    transform: scale(1.03);
}

/* Topbar más compacta ahora que el logo es razonable */
.dmh-topbar { padding-top: 10px; padding-bottom: 10px; }

/* --- Hero de la academia: 2 columnas (visual | contenido) --- */
.dmh-entry.dmh-entry-hero {
    grid-template-columns: 1.05fr 0.95fr;
    text-align: left;
    padding: 48px 44px;
    gap: 52px;
    align-items: center;
}
/* Sigil rotatorio queda oculto; el logo a la derecha es la identidad. */
.dmh-entry.dmh-entry-hero .dmh-entry-sigil { display: none; }

.dmh-entry.dmh-entry-hero .dmh-entry-content {
    max-width: none;
}
.dmh-entry.dmh-entry-hero .dmh-entry-tag { margin-bottom: 18px; }
.dmh-entry.dmh-entry-hero .dmh-entry-sub {
    font-size: 1.4em;
    letter-spacing: 0.22em;
    margin-bottom: 14px;
    text-shadow: 0 0 18px rgba(245, 215, 110, 0.35);
}
.dmh-entry.dmh-entry-hero .dmh-entry-desc {
    max-width: 540px;
    font-size: 1.02em;
    line-height: 1.65;
    color: #e2e8f0;
}
.dmh-entry.dmh-entry-hero .dmh-entry-desc em {
    font-style: normal;
    font-weight: 700;
    background: linear-gradient(135deg, var(--dmh-red-bright), var(--dmh-gold-bright));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.01em;
}
.dmh-entry.dmh-entry-hero .dmh-entry-note {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.82em;
    color: var(--dmh-gold);
    letter-spacing: 0.04em;
    opacity: 0.85;
}
.dmh-entry.dmh-entry-hero .dmh-entry-stats { justify-content: flex-start; }

/* --- Visual lateral: logo neón + terminal animada --- */
.dmh-entry-visual {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dmh-entry-frame {
    position: relative;
    width: 100%;
    max-width: 600px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background:
        radial-gradient(circle at 50% 30%, rgba(200,16,46,0.18) 0%, transparent 60%),
        linear-gradient(160deg, rgba(20,8,12,0.55) 0%, rgba(10,6,9,0.85) 100%);
    border: 1px solid rgba(200,16,46,0.28);
    border-radius: 12px;
    box-shadow:
        inset 0 0 60px rgba(200,16,46,0.10),
        0 0 30px rgba(200,16,46,0.18);
    overflow: hidden;
    transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s;
}
.dmh-entry:hover .dmh-entry-frame {
    border-color: var(--dmh-red-bright);
    box-shadow:
        inset 0 0 80px rgba(255,30,60,0.16),
        0 0 50px rgba(255,30,60,0.32);
    transform: translateY(-2px);
}

/* --- Logo grande con pulso de neón --- */
.dmh-entry-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 4px 0;
}
.dmh-entry-logo {
    display: block;
    width: 100%;
    max-width: 500px;
    height: auto;
    filter: drop-shadow(0 0 26px rgba(255,30,60,0.7));
    user-select: none;
    -webkit-user-drag: none;
    animation: dmhLogoPulse 2.6s ease-in-out infinite;
    transition: transform 0.4s;
}
@keyframes dmhLogoPulse {
    0%, 100% { filter: drop-shadow(0 0 22px rgba(255,30,60,0.55)); }
    50%      { filter: drop-shadow(0 0 38px rgba(255,90,119,0.95)); }
}
.dmh-entry:hover .dmh-entry-logo {
    transform: scale(1.02);
}

/* --- Terminal animada --- */
.dmh-entry-terminal {
    background: #050307;
    border: 1px solid rgba(200,16,46,0.32);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 0 26px rgba(0,0,0,0.7);
}
.dmh-term-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: linear-gradient(180deg, #1a0a0e 0%, #0e0508 100%);
    border-bottom: 1px solid rgba(200,16,46,0.22);
}
.dmh-term-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
}
.dmh-term-dot.red    { background: #ff5f56; color: rgba(255,95,86,0.5); }
.dmh-term-dot.amber  { background: #ffbd2e; color: rgba(255,189,46,0.5); }
.dmh-term-dot.green  { background: #27c93f; color: rgba(39,201,63,0.5); }
.dmh-term-title {
    margin-left: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7em;
    color: #71717a;
    letter-spacing: 0.12em;
}
.dmh-term-body {
    padding: 10px 14px 12px;
    height: 188px;
    overflow: hidden;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74em;
    line-height: 1.55;
    color: #d4d4d8;
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,30,60,0.025) 2px, rgba(255,30,60,0.025) 3px);
}
.dmh-tline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dmh-tline .p-user { color: #ff5a77; }
.dmh-tline .p-root { color: #ff1e3c; font-weight: 700; }
.dmh-tline .t      { color: #f5d76e; }
.dmh-tline.out     { color: #94a3b8; }
.dmh-tline.hit     { color: #4ade80; }
.dmh-tline.flag    { color: #facc15; font-weight: 700; text-shadow: 0 0 8px rgba(250,204,21,0.5); }
.dmh-tline.done    { color: #71717a; font-style: italic; }
.dmh-tline .cur {
    display: inline-block;
    width: 7px;
    height: 0.95em;
    background: #ff1e3c;
    margin-left: 2px;
    vertical-align: text-bottom;
    box-shadow: 0 0 6px rgba(255,30,60,0.8);
    animation: dmhBlink 0.9s steps(1) infinite;
}
@keyframes dmhBlink {
    50% { opacity: 0; }
}

@media (max-width: 960px) {
    .dmh-entry.dmh-entry-hero {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 28px;
        padding: 40px 28px 36px;
    }
    .dmh-entry.dmh-entry-hero .dmh-entry-desc { margin-left: auto; margin-right: auto; }
    .dmh-entry.dmh-entry-hero .dmh-entry-stats { justify-content: center; }
    .dmh-entry-frame { max-width: 460px; margin: 0 auto; }
    .dmh-entry-logo { max-width: 360px; }
}
@media (max-width: 820px) {
    .dmh-brand-logo { height: 52px; max-width: 220px; }
}
@media (max-width: 768px) {
    .dmh-entry.dmh-entry-hero { padding: 32px 20px 30px; }
    .dmh-entry-frame { max-width: 360px; padding: 16px; gap: 14px; }
    .dmh-entry-logo { max-width: 280px; }
    .dmh-term-body { height: 148px; font-size: 0.7em; padding: 8px 10px 10px; }
    .dmh-brand-logo { height: 46px; max-width: 200px; }
}

/* --- Transiciones internas de vistas (login → dashboard → lab → admin) --- */
@keyframes dmhViewIn {
    from { opacity: 0; transform: translateY(14px) scale(0.995); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0) scale(1);          filter: blur(0); }
}
@keyframes dmhViewOut {
    from { opacity: 1; transform: translateY(0); filter: blur(0); }
    to   { opacity: 0; transform: translateY(-10px); filter: blur(3px); }
}
.dmh-view.dmh-view-entering {
    animation: dmhViewIn 0.42s cubic-bezier(0.22, 0.9, 0.32, 1) both;
}
.dmh-view.dmh-view-leaving {
    animation: dmhViewOut 0.2s ease-in both;
    pointer-events: none;
}

/* ================================================================
   ACADEMY HEADER — elegant frame with crest + dual blade rules
   ================================================================ */
#academy-page .page-header.academy-header-fx {
    position: relative;
    overflow: visible;          /* let crest hang above the top edge */
    border: none;
    border-radius: 18px;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255, 30, 60, 0.10), transparent 60%),
        radial-gradient(60% 60% at 100% 100%, rgba(212, 175, 55, 0.06), transparent 70%),
        var(--card-bg);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        inset 0 0 90px rgba(200, 16, 46, 0.08);
    padding: 72px 40px 56px;
    margin-top: 36px;          /* breathing room for the crest */
}

/* Thin red→gold→red gradient outline (border-image) */
#academy-page .page-header.academy-header-fx::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(255, 30, 60, 0.55) 0%,
        rgba(245, 215, 110, 0.45) 35%,
        rgba(255, 30, 60, 0.25) 60%,
        rgba(245, 215, 110, 0.4) 100%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    animation: frameShift 9s linear infinite;
    background-size: 200% 200%;
    height: auto;
    width: auto;
    left: 0;
    top: 0;
    box-shadow: none;
}
@keyframes frameShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Subtle inner grid */
.academy-header-grid {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image:
        linear-gradient(rgba(239, 68, 68, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(239, 68, 68, 0.06) 1px, transparent 1px);
    background-size: 38px 38px;
    -webkit-mask-image: radial-gradient(75% 65% at 50% 50%, #000 55%, transparent 100%);
            mask-image: radial-gradient(75% 65% at 50% 50%, #000 55%, transparent 100%);
    pointer-events: none;
    opacity: 0.55;
    animation: gridDrift 22s linear infinite;
    overflow: hidden;
}
@keyframes gridDrift {
    0%   { background-position: 0 0, 0 0; }
    100% { background-position: 38px 38px, 38px 38px; }
}

/* slow scan glow */
.academy-header-scan {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
}
.academy-header-scan::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
        transparent 30%,
        rgba(255, 30, 60, 0.05) 45%,
        rgba(245, 215, 110, 0.06) 50%,
        rgba(255, 30, 60, 0.05) 55%,
        transparent 70%);
    animation: scanSweep 7s ease-in-out infinite;
}
@keyframes scanSweep {
    0%, 100% { transform: translateX(-15%); opacity: 0.7; }
    50%      { transform: translateX(15%);  opacity: 1; }
}

/* Top centered crest medallion */
.ah-crest {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    width: 68px;
    height: 68px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 35%, rgba(40, 8, 14, 0.95), rgba(8, 4, 8, 0.98));
    border: 1px solid rgba(245, 215, 110, 0.45);
    border-radius: 50%;
    box-shadow:
        0 0 0 4px rgba(8, 4, 8, 0.95),
        0 0 22px rgba(255, 30, 60, 0.5),
        inset 0 0 14px rgba(255, 30, 60, 0.25);
}
.ah-crest-svg {
    width: 70%;
    height: 70%;
    color: var(--dmh-gold-bright);
    filter: drop-shadow(0 0 6px rgba(255, 30, 60, 0.6));
    animation: crestSpin 22s linear infinite;
}
@keyframes crestSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.ah-crest-glow {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 30, 60, 0.45), transparent 70%);
    filter: blur(8px);
    animation: crestHalo 3.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes crestHalo {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

/* Terminal prompt as a pill */
#academy-page .page-header.academy-header-fx .terminal-prompt {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border: 1px solid rgba(239, 68, 68, 0.32);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    font-size: 0.85em;
    color: var(--red-light);
    text-shadow: 0 0 10px rgba(255, 30, 60, 0.45);
    backdrop-filter: blur(4px);
}
.term-cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    background: var(--red-light);
    margin-left: 4px;
    box-shadow: 0 0 10px var(--red-light);
    animation: termBlink 1.05s steps(1, end) infinite;
}
@keyframes termBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* TITLE itself */
#academy-page .academy-title {
    position: relative;
    z-index: 2;
    font-family: 'JetBrains Mono', monospace;
    font-size: 3.6em;
    line-height: 1.05;
    margin: 18px 0 14px;
    letter-spacing: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.title-bracket {
    color: var(--dmh-gold);
    font-weight: 400;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.55em;
    opacity: 0.75;
    text-shadow: 0 0 12px rgba(245, 215, 110, 0.45);
    animation: bracketBob 3.2s ease-in-out infinite;
}
.title-bracket-r { animation-delay: -1.6s; }
@keyframes bracketBob {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50%      { transform: translateY(-5px); opacity: 1; }
}

.title-glitch {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 18px;
    isolation: isolate;
    font-weight: 800;
    letter-spacing: 4px;
}
.title-glitch .t-devilsec {
    background: linear-gradient(180deg, #ffffff 0%, #ffe0e6 38%, #ff6478 70%, #c8102e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow:
        0 0 30px rgba(255, 30, 60, 0.5),
        0 0 80px rgba(200, 16, 46, 0.25);
    animation: titleGlow 3.6s ease-in-out infinite;
}
.title-glitch .t-academy {
    background: linear-gradient(180deg, #fff7d1 0%, #f5d76e 35%, #d4af37 70%, #b9881d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
    text-shadow: 0 0 22px rgba(245, 215, 110, 0.45);
}
@keyframes titleGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255,30,60,0.25)); }
    50%      { filter: drop-shadow(0 0 18px rgba(255,30,60,0.6)); }
}

/* Glitch ghost layers (RGB split, fires occasionally) */
.title-glitch::before,
.title-glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    font-family: inherit;
    font-weight: 800;
    letter-spacing: 4px;
    opacity: 0;
    mix-blend-mode: screen;
    white-space: nowrap;
}
.title-glitch::before {
    color: rgba(0, 200, 255, 0.85);
    animation: glitchBefore 7s infinite steps(1, end);
}
.title-glitch::after {
    color: rgba(255, 30, 60, 0.85);
    animation: glitchAfter 7s infinite steps(1, end);
}
@keyframes glitchBefore {
    0%, 88%, 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); }
    89% { opacity: 0.55; transform: translate(-3px, 1px); clip-path: inset(15% 0 65% 0); }
    91% { opacity: 0.5;  transform: translate(-2px, -2px); clip-path: inset(60% 0 12% 0); }
    93% { opacity: 0.55; transform: translate(-1px, 1px); clip-path: inset(8% 0 78% 0); }
    95% { opacity: 0.4;  transform: translate(-2px, 0);   clip-path: inset(40% 0 40% 0); }
}
@keyframes glitchAfter {
    0%, 88%, 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); }
    89% { opacity: 0.55; transform: translate(3px, -1px); clip-path: inset(60% 0 18% 0); }
    91% { opacity: 0.5;  transform: translate(2px, 2px);  clip-path: inset(10% 0 70% 0); }
    93% { opacity: 0.55; transform: translate(1px, -1px); clip-path: inset(78% 0 5% 0); }
    95% { opacity: 0.4;  transform: translate(2px, 0);    clip-path: inset(35% 0 45% 0); }
}

/* Underline ornament */
.title-underline {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 6px auto 14px;
    color: var(--dmh-red-bright);
    position: relative;
    z-index: 2;
}
.title-underline .ul-line {
    width: 90px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--dmh-red-bright), transparent);
    box-shadow: 0 0 10px rgba(255, 30, 60, 0.55);
    position: relative;
    overflow: hidden;
}
.title-underline .ul-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    animation: ulSweep 3.4s linear infinite;
}
@keyframes ulSweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.title-underline .ul-glyph {
    color: var(--dmh-gold-bright);
    text-shadow: 0 0 14px rgba(245, 215, 110, 0.7);
    font-size: 0.95em;
    animation: glyphSpin 6.5s linear infinite;
    display: inline-block;
}
@keyframes glyphSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Subtitle refresh */
#academy-page .page-header.academy-header-fx .page-subtitle {
    position: relative;
    z-index: 2;
    color: #d8d8e0;
    font-size: 1.05em;
    letter-spacing: 0.4px;
}

/* Footer pill badges */
.title-badges {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
}
.t-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72em;
    letter-spacing: 0.18em;
    padding: 6px 13px;
    border: 1px solid rgba(239, 68, 68, 0.32);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: var(--red-light);
    text-transform: uppercase;
    backdrop-filter: blur(4px);
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.t-badge:hover {
    transform: translateY(-2px);
    border-color: var(--dmh-red-bright);
    box-shadow: 0 6px 18px rgba(255, 30, 60, 0.25);
}
.t-badge-gold {
    color: var(--dmh-gold-bright);
    border-color: rgba(245, 215, 110, 0.4);
}
.t-badge-gold:hover {
    border-color: var(--dmh-gold-bright);
    box-shadow: 0 6px 18px rgba(245, 215, 110, 0.25);
}
.t-bdot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    animation: bdotPulse 1.6s ease-in-out infinite;
}
@keyframes bdotPulse {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.18); }
}

/* Tablet / mobile fine-tuning */
@media (max-width: 900px) {
    #academy-page .page-header.academy-header-fx { padding: 60px 24px 44px; margin-top: 30px; }
    #academy-page .academy-title { font-size: 2.6em; gap: 10px; letter-spacing: 2px; }
    .title-glitch { gap: 12px; letter-spacing: 3px; }
    .title-underline .ul-line { width: 60px; }
    .ah-crest { width: 58px; height: 58px; top: -28px; }
}
@media (max-width: 600px) {
    #academy-page .page-header.academy-header-fx { padding: 50px 16px 36px; margin-top: 26px; }
    .ah-crest { width: 50px; height: 50px; top: -24px; }
    #academy-page .academy-title { font-size: 1.85em; gap: 8px; letter-spacing: 1.5px; }
    .title-glitch { gap: 8px; letter-spacing: 2px; }
    .title-underline .ul-line { width: 38px; }
    .title-badges .t-badge { font-size: 0.65em; padding: 5px 10px; letter-spacing: 0.14em; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .academy-header-grid,
    .academy-header-scan::before,
    #academy-page .page-header.academy-header-fx::before,
    .ah-crest-svg,
    .ah-crest-glow,
    .term-cursor,
    .title-bracket,
    .title-glitch .t-devilsec,
    .title-glitch::before,
    .title-glitch::after,
    .title-underline .ul-line::after,
    .title-underline .ul-glyph,
    .t-bdot {
        animation: none !important;
    }
}

/* ================================================================
   PORTAL TOPBAR — minimal "brand mark" for the login view
   ================================================================ */
.dmh-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
}
.dmh-brand-mark {
    display: none;
    align-items: center;
    gap: 14px;
    user-select: none;
}
.dmh-brand-mark-sigil {
    display: inline-flex;
    width: 38px;
    height: 38px;
    color: var(--dmh-red-bright);
    filter: drop-shadow(0 0 10px rgba(255, 30, 60, 0.55));
    animation: brandSigilSpin 22s linear infinite;
}
.dmh-brand-mark-sigil svg { width: 100%; height: 100%; }
@keyframes brandSigilSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Swap on login view */
#dmh-portal.dmh-active-login .dmh-brand-logo { display: none; }
#dmh-portal.dmh-active-login .dmh-brand-mark { display: inline-flex; }

@media (max-width: 600px) {
    .dmh-brand-mark-sigil { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .dmh-brand-mark-sigil { animation: none !important; }
}

/* ================================================================
   DMH LOGIN — brand logo inside the card (replaces sigil)
   ================================================================ */
.dmh-login-logo-wrap {
    position: relative;
    width: 100%;
    max-width: 280px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dmh-login-logo {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    max-height: 110px;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(255, 30, 60, 0.55));
    animation: dmhLoginLogoPulse 3.6s ease-in-out infinite;
    user-select: none;
    -webkit-user-drag: none;
}
.dmh-login-logo-glow {
    position: absolute;
    inset: -10% -5%;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 30, 60, 0.35), transparent 70%);
    filter: blur(14px);
    animation: dmhLoginLogoHalo 4.2s ease-in-out infinite;
}
@keyframes dmhLoginLogoPulse {
    0%, 100% { filter: drop-shadow(0 0 14px rgba(255, 30, 60, 0.45)); }
    50%      { filter: drop-shadow(0 0 26px rgba(255, 90, 119, 0.85)); }
}
@keyframes dmhLoginLogoHalo {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 0.9;  transform: scale(1.06); }
}
@media (max-width: 480px) {
    .dmh-login-logo-wrap { max-width: 220px; margin-bottom: 18px; }
    .dmh-login-logo { max-height: 90px; }
}
@media (prefers-reduced-motion: reduce) {
    .dmh-login-logo,
    .dmh-login-logo-glow { animation: none !important; }
}

/* ================================================================
   FASE 2 — Avatares reales en leaderboard, modal de perfil público,
   trofeos, settings extendidos.
   ================================================================ */

/* Avatar mini con imagen real (cuando hay avatar_url) */
.dmh-lb-avatar.dmh-lb-avatar-img {
    background: #0a0a0a;
    padding: 0;
    overflow: hidden;
}
.dmh-lb-avatar.dmh-lb-avatar-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* Hint de clickabilidad en nombres */
.dmh-clickable {
    cursor: pointer;
    transition: color 0.15s, text-shadow 0.15s;
}
.dmh-clickable:hover {
    color: var(--dmh-red-bright) !important;
    text-shadow: 0 0 8px rgba(255,30,60,0.4);
}

/* ===== Settings: campos extra (bio, links, checkbox) ===== */
.dmh-settings-help {
    font-size: 0.78em;
    color: #71717a;
    margin: -4px 0 12px;
}
.dmh-settings-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    margin-bottom: 14px;
}
.dmh-settings-grid2 .dmh-settings-field { margin: 0; }
.dmh-settings-field textarea {
    width: 100%;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--dmh-border);
    border-radius: 6px;
    padding: 10px 12px;
    color: #e5e7eb;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.88em;
    resize: vertical;
    min-height: 70px;
    transition: border-color 0.2s;
}
.dmh-settings-field textarea:focus {
    outline: none;
    border-color: var(--dmh-red-bright);
}
.dmh-settings-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    grid-column: 1 / -1;
}
.dmh-settings-checkbox input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--dmh-red-bright);
    margin: 0;
    cursor: pointer;
}
.dmh-settings-checkbox span {
    font-size: 0.86em;
    color: #cbd5e1;
}
@media (max-width: 600px) {
    .dmh-settings-grid2 { grid-template-columns: 1fr; }
}

/* ===== Modal de perfil público ===== */
.dmh-pubprof {
    position: fixed; inset: 0;
    z-index: 25000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: dmhFadeIn 0.25s ease-out;
}
@keyframes dmhFadeIn { from { opacity: 0; } to { opacity: 1; } }
.dmh-pubprof-bg {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(4px);
}
.dmh-pubprof-card {
    position: relative;
    width: min(560px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    background: linear-gradient(165deg, #18080d 0%, #0a0609 100%);
    border: 1px solid rgba(200,16,46,0.5);
    border-radius: 12px;
    padding: 32px 28px 28px;
    box-shadow: 0 30px 80px rgba(200,16,46,0.35), inset 0 1px 0 rgba(255,90,119,0.15);
    animation: dmhPubprofIn 0.35s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
@keyframes dmhPubprofIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dmh-pubprof-close {
    position: absolute; top: 12px; right: 14px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.6em;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}
.dmh-pubprof-close:hover { color: var(--dmh-red-bright); }
.dmh-pubprof-loading,
.dmh-pubprof-error,
.dmh-pubprof-empty {
    text-align: center;
    color: #94a3b8;
    padding: 24px 12px;
    font-style: italic;
}
.dmh-pubprof-error { color: #ff6b7a; }
.dmh-pubprof-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}
.dmh-pubprof-avatar {
    width: 86px; height: 86px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 2em;
    color: #fff;
    background:
        linear-gradient(135deg,
            hsl(var(--av-h, 0), 65%, 42%) 0%,
            hsl(var(--av-h, 0), 70%, 28%) 100%);
    border: 2px solid var(--dmh-red-bright);
    box-shadow: 0 0 20px rgba(200,16,46,0.4);
}
.dmh-pubprof-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.dmh-pubprof-headinfo { flex: 1; min-width: 0; }
.dmh-pubprof-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.45em;
    font-weight: 700;
    color: #fff;
    word-break: break-word;
    line-height: 1.2;
    margin-bottom: 4px;
}
.dmh-pubprof-name .dmh-admin-badge {
    font-size: 0.55em;
    margin-left: 6px;
    vertical-align: middle;
}
.dmh-pubprof-rank {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85em;
    color: var(--dmh-gold-bright);
    letter-spacing: 0.06em;
}
.dmh-pubprof-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.dmh-pubprof-stats > div {
    background: rgba(0,0,0,0.4);
    border-left: 2px solid var(--dmh-red-bright);
    border-radius: 4px;
    padding: 10px 12px;
    text-align: center;
}
.dmh-pubprof-stats span {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5em;
    font-weight: 700;
    color: #fff;
}
.dmh-pubprof-stats small {
    display: block;
    font-size: 0.65em;
    letter-spacing: 0.22em;
    color: var(--dmh-gold);
    margin-top: 2px;
}

/* ===== Stats secundarios (Secret Hunts + After Party) ===== */
.dmh-pubprof-stats-sec {
    display: flex;
    gap: 10px;
    margin: -10px 0 18px;  /* pegado a los stats principales */
    flex-wrap: wrap;
}
.dmh-pubprof-stat-mini {
    flex: 1;
    min-width: 130px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: rgba(0,0,0,0.32);
    border: 1px solid var(--dmh-border);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78em;
}
.dmh-pubprof-stat-mini-ico {
    font-size: 1.1em;
    line-height: 1;
}
.dmh-pubprof-stat-mini-num {
    font-weight: 800;
    color: #fff;
    font-size: 1.05em;
    min-width: 18px;
    text-align: right;
}
.dmh-pubprof-stat-mini-lbl {
    color: #94a3b8;
    letter-spacing: 0.06em;
    font-size: 0.92em;
    flex: 1;
}
.dmh-pubprof-stat-extra {
    border-left: 2px solid var(--dmh-gold-bright);
}
.dmh-pubprof-stat-extra .dmh-pubprof-stat-mini-ico { color: var(--dmh-gold-bright); }
.dmh-pubprof-stat-quiz {
    border-left: 2px solid #f0abfc;
}
.dmh-pubprof-stat-quiz .dmh-pubprof-stat-mini-ico { color: #f0abfc; }
.dmh-pubprof-bio {
    background: rgba(255,255,255,0.03);
    border-left: 2px solid var(--dmh-gold);
    padding: 12px 14px;
    border-radius: 4px;
    font-size: 0.92em;
    color: #cbd5e1;
    line-height: 1.55;
    margin-bottom: 18px;
    white-space: pre-wrap;
}
.dmh-pubprof-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}
.dmh-pubprof-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(200,16,46,0.1);
    border: 1px solid var(--dmh-border);
    border-radius: 6px;
    color: #e5e7eb;
    font-size: 0.82em;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.dmh-pubprof-link:hover {
    background: rgba(200,16,46,0.22);
    border-color: var(--dmh-red-bright);
    transform: translateY(-1px);
}
.dmh-pubprof-section-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78em;
    letter-spacing: 0.22em;
    color: var(--dmh-gold);
    margin: 16px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--dmh-border);
}
.dmh-pubprof-foot {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ===== Trofeos (grid en perfil) ===== */
.dmh-trophy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}
.dmh-trophy {
    position: relative;
    padding: 14px 8px 10px;
    background: linear-gradient(160deg, rgba(20,8,12,0.6), rgba(10,6,9,0.85));
    border: 1px solid var(--dmh-border);
    border-radius: 8px;
    text-align: center;
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
    cursor: help;
}
.dmh-trophy:hover {
    transform: translateY(-3px);
    border-color: var(--dmh-red-bright);
    box-shadow: 0 8px 22px rgba(200,16,46,0.3);
}
.dmh-trophy-icon {
    font-size: 2em;
    line-height: 1;
    margin-bottom: 6px;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.15));
}
.dmh-trophy-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74em;
    color: #e5e7eb;
    letter-spacing: 0.04em;
    line-height: 1.25;
}
/* Rareza → tinte */
.dmh-trophy-common    { border-color: rgba(148,163,184,0.4); }
.dmh-trophy-rare      { border-color: rgba(96,165,250,0.55); box-shadow: inset 0 0 18px rgba(96,165,250,0.08); }
.dmh-trophy-rare:hover{ box-shadow: 0 8px 22px rgba(96,165,250,0.35); }
.dmh-trophy-epic      { border-color: rgba(192,132,252,0.6); box-shadow: inset 0 0 18px rgba(192,132,252,0.1); }
.dmh-trophy-epic:hover{ box-shadow: 0 8px 22px rgba(192,132,252,0.4); }
.dmh-trophy-legendary {
    border-color: rgba(212,175,55,0.7);
    box-shadow: inset 0 0 22px rgba(212,175,55,0.15);
    background: linear-gradient(160deg, rgba(40,30,8,0.75), rgba(20,12,4,0.9));
}
.dmh-trophy-legendary:hover { box-shadow: 0 10px 28px rgba(212,175,55,0.45); }

/* Tag de rareza en tabla admin */
.dmh-trophy-rarity-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.72em;
    letter-spacing: 0.1em;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
}
.dmh-trophy-rarity-tag.dmh-trophy-common    { background: rgba(148,163,184,0.18); color: #cbd5e1; }
.dmh-trophy-rarity-tag.dmh-trophy-rare      { background: rgba(96,165,250,0.18);  color: #93c5fd; }
.dmh-trophy-rarity-tag.dmh-trophy-epic      { background: rgba(192,132,252,0.2);  color: #d8b4fe; }
.dmh-trophy-rarity-tag.dmh-trophy-legendary { background: rgba(212,175,55,0.22);  color: #fcd34d; }

/* ===== Modal admin: award trophy ===== */
.dmh-trophy-award-modal {
    position: fixed; inset: 0;
    z-index: 26000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.dmh-trophy-award-card { width: min(520px, 100%); }
.dmh-trophy-award-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 60vh;
    overflow-y: auto;
}
.dmh-award-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--dmh-border);
    border-radius: 6px;
}
.dmh-award-ico { font-size: 1.5em; text-align: center; }
.dmh-award-name { font-size: 0.88em; color: #e5e7eb; }
.dmh-award-name small { color: #71717a; margin-left: 4px; }

/* ===== Trophy editor modal (admin) ===== */
.dmh-trophy-editor {
    position: fixed; inset: 0;
    z-index: 26000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.dmh-trophy-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}
.dmh-pubprof-title {
    font-family: 'JetBrains Mono', monospace;
    color: var(--dmh-red-bright);
    font-size: 1.15em;
    margin-bottom: 4px;
}

/* ================================================================
   FASE 3 — First Blood / First User · Toasts de trofeo ·
   Trofeos en sidebar · Actividad personal en perfil
   ================================================================ */

/* ===== First Blood / First User en lab detail ===== */
/* Ocupa el ancho completo del hero (columnas 1 a -1 del grid del hero). */
.dmh-firsts {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--dmh-border);
}
.dmh-first {
    position: relative;
    padding: 14px 18px;
    background: linear-gradient(160deg, rgba(20,8,12,0.55) 0%, rgba(10,6,9,0.85) 100%);
    border: 1px solid var(--dmh-border);
    border-radius: 8px;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    min-height: 78px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.dmh-first.dmh-first-claimed.dmh-first-user {
    border-color: rgba(96,165,250,0.55);
    box-shadow: inset 0 0 18px rgba(96,165,250,0.08);
}
.dmh-first.dmh-first-claimed.dmh-first-root {
    border-color: rgba(255,30,60,0.7);
    box-shadow:
        inset 0 0 22px rgba(255,30,60,0.18),
        0 0 22px rgba(255,30,60,0.25);
    background:
        radial-gradient(circle at 80% 0%, rgba(255,30,60,0.18) 0%, transparent 60%),
        linear-gradient(160deg, rgba(40,8,14,0.7), rgba(10,4,8,0.92));
    animation: dmhFirstBloodPulse 3.4s ease-in-out infinite;
}
@keyframes dmhFirstBloodPulse {
    0%, 100% { box-shadow: inset 0 0 22px rgba(255,30,60,0.16), 0 0 18px rgba(255,30,60,0.20); }
    50%      { box-shadow: inset 0 0 30px rgba(255,30,60,0.26), 0 0 32px rgba(255,30,60,0.42); }
}
.dmh-first:hover { transform: translateY(-1px); }

.dmh-first-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.dmh-first-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7em;
    letter-spacing: 0.22em;
    color: var(--dmh-gold-bright);
    font-weight: 700;
}
.dmh-first-blood-tag {
    color: var(--dmh-red-bright);
    text-shadow: 0 0 8px rgba(255,30,60,0.5);
}
.dmh-first-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68em;
    color: #71717a;
    letter-spacing: 0.04em;
}
.dmh-first-body {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dmh-first-body .dmh-lb-avatar {
    width: 30px; height: 30px;
    font-size: 0.9em;
}
.dmh-first-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95em;
    color: #fff;
    font-weight: 600;
}
.dmh-first-empty {
    font-style: italic;
    color: #71717a;
    font-size: 0.85em;
}

@media (max-width: 700px) {
    .dmh-firsts { grid-template-columns: 1fr; }
}

/* ===== Toast / Notificación de trofeo desbloqueado ===== */
#dmh-toast-stack {
    position: fixed;
    top: 80px;
    right: 24px;
    z-index: 30000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: 380px;
}
.dmh-toast {
    pointer-events: auto;
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, #18080d 0%, #0a0609 100%);
    border: 1px solid var(--dmh-red-bright);
    border-left-width: 4px;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5), 0 0 28px rgba(255,30,60,0.3);
    opacity: 0;
    transform: translateX(120%);
    transition: opacity 0.3s, transform 0.35s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.dmh-toast.dmh-toast-in {
    opacity: 1;
    transform: translateX(0);
}
.dmh-toast.dmh-toast-out {
    opacity: 0;
    transform: translateX(120%);
}
.dmh-toast-icon {
    width: 56px; height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    background: rgba(0,0,0,0.5);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));
}
.dmh-toast-text { min-width: 0; }
.dmh-toast-kicker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62em;
    letter-spacing: 0.25em;
    color: var(--dmh-gold-bright);
    margin-bottom: 2px;
}
.dmh-toast-title {
    font-family: 'JetBrains Mono', monospace;
    color: #fff;
    font-weight: 700;
    font-size: 1em;
    line-height: 1.2;
    margin-bottom: 2px;
}
.dmh-toast-desc {
    font-size: 0.78em;
    color: #cbd5e1;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.dmh-toast-close {
    align-self: flex-start;
    background: transparent;
    border: none;
    color: #71717a;
    font-size: 1.2em;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color 0.2s;
}
.dmh-toast-close:hover { color: var(--dmh-red-bright); }
/* Tinte por rareza del toast */
.dmh-toast.dmh-trophy-rare      { border-color: #60a5fa; box-shadow: 0 12px 30px rgba(0,0,0,0.5), 0 0 28px rgba(96,165,250,0.4); }
.dmh-toast.dmh-trophy-epic      { border-color: #c084fc; box-shadow: 0 12px 30px rgba(0,0,0,0.5), 0 0 28px rgba(192,132,252,0.45); }
.dmh-toast.dmh-trophy-legendary { border-color: #d4af37; box-shadow: 0 12px 30px rgba(0,0,0,0.5), 0 0 36px rgba(212,175,55,0.5); }

/* ===== Trofeos mini en el sidebar del dashboard ===== */
.dmh-sidebar-trophies-wrap {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--dmh-border);
}
.dmh-sidebar-trophies-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7em;
    letter-spacing: 0.2em;
    color: var(--dmh-gold-bright);
    margin-bottom: 8px;
    text-align: center;
}
.dmh-sidebar-trophies {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.dmh-sidebar-trophies-empty {
    font-size: 0.72em;
    color: #71717a;
    font-style: italic;
    text-align: center;
    margin: 0;
}
.dmh-trophy-mini {
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    background: linear-gradient(160deg, rgba(20,8,12,0.6), rgba(10,6,9,0.85));
    border: 1px solid var(--dmh-border);
    border-radius: 6px;
    cursor: help;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.dmh-trophy-mini:hover {
    transform: translateY(-2px) scale(1.06);
    border-color: var(--dmh-red-bright);
    box-shadow: 0 4px 12px rgba(200,16,46,0.35);
}
.dmh-trophy-mini.dmh-trophy-rare      { border-color: rgba(96,165,250,0.55); }
.dmh-trophy-mini.dmh-trophy-epic      { border-color: rgba(192,132,252,0.6); }
.dmh-trophy-mini.dmh-trophy-legendary {
    border-color: rgba(212,175,55,0.7);
    background: linear-gradient(160deg, rgba(40,30,8,0.75), rgba(20,12,4,0.9));
}

/* ===== Actividad en el modal de perfil público ===== */
.dmh-pubprof-activity {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 220px;
    overflow-y: auto;
}
.dmh-pubprof-act-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 7px 10px;
    background: rgba(0,0,0,0.32);
    border-radius: 5px;
    border-left: 2px solid transparent;
    font-size: 0.82em;
}
.dmh-pubprof-act-item.dmh-act-user { border-left-color: var(--dmh-gold); }
.dmh-pubprof-act-item.dmh-act-root { border-left-color: var(--dmh-red-bright); }
.dmh-pubprof-act-time {
    font-family: 'JetBrains Mono', monospace;
    color: #71717a;
    font-size: 0.92em;
    white-space: nowrap;
}
.dmh-pubprof-act-text { color: #cbd5e1; }
.dmh-pubprof-act-text b { color: var(--dmh-gold-bright); }

/* ================================================================
   FASE 4b — Labs "PRÓXIMAMENTE" (lab inactivo, visible pero bloqueado)
   ================================================================ */

/* Card en grid: ribbon diagonal + atenuado */
.dmh-lab-card.dmh-lab-card-soon {
    position: relative;
    overflow: hidden;
    opacity: 0.92;
    filter: grayscale(0.25);
    border-color: rgba(212, 175, 55, 0.35);
}
.dmh-lab-card.dmh-lab-card-soon:hover {
    filter: grayscale(0);
    border-color: var(--dmh-gold-bright);
}
.dmh-lab-card.dmh-lab-card-soon .dmh-lab-avatar img,
.dmh-lab-card.dmh-lab-card-soon .dmh-lab-avatar {
    filter: brightness(0.6) saturate(0.7);
}
.dmh-lab-card-ribbon {
    position: absolute;
    top: 14px; right: -38px;
    transform: rotate(35deg);
    background: linear-gradient(135deg, var(--dmh-gold) 0%, var(--dmh-gold-bright) 100%);
    color: #1a0f00;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 0.66em;
    letter-spacing: 0.2em;
    padding: 4px 42px;
    box-shadow: 0 4px 12px rgba(212,175,55,0.45);
    z-index: 5;
    pointer-events: none;
}

/* Pill "PRÓXIMAMENTE" en el status row de la card */
.dmh-pwn-pill.dmh-pwn-soon {
    background: rgba(212,175,55,0.18);
    color: var(--dmh-gold-bright);
    border: 1px solid rgba(212,175,55,0.5);
}

/* === Estado: PROGRAMADA (is_active=true + unlocks_at futuro) === */
.dmh-lab-card.dmh-lab-card-scheduled {
    position: relative;
    overflow: hidden;
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 0 0 1px rgba(56,189,248,0.08) inset, 0 8px 22px rgba(0,0,0,0.45);
}
.dmh-lab-card.dmh-lab-card-scheduled:hover {
    border-color: #38bdf8;
    box-shadow: 0 0 0 1px rgba(56,189,248,0.18) inset, 0 12px 28px rgba(56,189,248,0.2);
}
.dmh-lab-card.dmh-lab-card-scheduled .dmh-lab-avatar img,
.dmh-lab-card.dmh-lab-card-scheduled .dmh-lab-avatar {
    /* Tinte azul/cian sutil para diferenciarla visualmente */
    filter: brightness(0.78) saturate(0.85) hue-rotate(-15deg);
    transition: filter 0.25s;
}
.dmh-lab-card.dmh-lab-card-scheduled:hover .dmh-lab-avatar img,
.dmh-lab-card.dmh-lab-card-scheduled:hover .dmh-lab-avatar {
    filter: brightness(0.92) saturate(1) hue-rotate(0);
}
.dmh-lab-card-ribbon.dmh-lab-card-ribbon-sched {
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
    color: #051018;
    box-shadow: 0 4px 12px rgba(56,189,248,0.5);
}
/* Pill de countdown ya usa estilo aparte (dmh-pwn-countdown) — refinamos */
.dmh-pwn-pill.dmh-pwn-countdown {
    background: rgba(56,189,248,0.18);
    color: #7dd3fc;
    border: 1px solid rgba(56,189,248,0.55);
    font-variant-numeric: tabular-nums;
}

/* === Filtro de estados encima del grid === */
.dmh-labs-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.dmh-labs-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.45);
    color: #cbd5e1;
    border: 1px solid var(--dmh-border);
    border-radius: 999px;
    padding: 5px 14px 5px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.76em;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
.dmh-labs-chip:hover { transform: translateY(-1px); color: #fff; }
.dmh-labs-chip small {
    font-size: 0.85em;
    background: rgba(255,255,255,0.06);
    padding: 0 6px;
    border-radius: 999px;
    color: inherit;
    opacity: 0.85;
}
.dmh-labs-chip-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #6b7280;
    box-shadow: 0 0 6px currentColor;
}
.dmh-labs-chip[data-state="all"] .dmh-labs-chip-dot      { background: #cbd5e1; color: #cbd5e1; }
.dmh-labs-chip[data-state="active"] .dmh-labs-chip-dot   { background: #4ade80; color: #4ade80; }
.dmh-labs-chip[data-state="scheduled"] .dmh-labs-chip-dot{ background: #38bdf8; color: #38bdf8; }
.dmh-labs-chip[data-state="inactive"] .dmh-labs-chip-dot { background: var(--dmh-gold-bright); color: var(--dmh-gold-bright); }

/* Estado activo (chip seleccionado): hereda el color del dot del estado */
.dmh-labs-chip-on {
    color: #fff;
    background: rgba(255,255,255,0.02);
}
.dmh-labs-chip-on[data-state="all"]       { border-color: #cbd5e1; box-shadow: 0 0 0 1px rgba(203,213,225,0.25), 0 0 12px rgba(203,213,225,0.15); }
.dmh-labs-chip-on[data-state="active"]    { border-color: #4ade80; box-shadow: 0 0 0 1px rgba(74,222,128,0.3),  0 0 14px rgba(74,222,128,0.2);  background: rgba(74,222,128,0.10); }
.dmh-labs-chip-on[data-state="scheduled"] { border-color: #38bdf8; box-shadow: 0 0 0 1px rgba(56,189,248,0.3),  0 0 14px rgba(56,189,248,0.2);  background: rgba(56,189,248,0.10); }
.dmh-labs-chip-on[data-state="inactive"]  { border-color: var(--dmh-gold-bright); box-shadow: 0 0 0 1px rgba(245,215,110,0.3), 0 0 14px rgba(245,215,110,0.2); background: rgba(212,175,55,0.10); }

/* (Las clases dmh-labs-chip-active / chip-scheduled-state / chip-inactive-state
   no se usan visualmente — quedan como semánticas para futuros estilos. La
   selección actual la marca dmh-labs-chip-on.) */

.dmh-labs-empty {
    grid-column: 1 / -1;
    padding: 40px 20px;
    text-align: center;
    color: #94a3b8;
    font-style: italic;
    background: rgba(0,0,0,0.25);
    border: 1px dashed var(--dmh-border);
    border-radius: 8px;
}

/* Lab detail: botón de descarga deshabilitado */
.dmh-btn-disabled,
.dmh-btn-disabled:hover {
    cursor: not-allowed !important;
    opacity: 0.55;
    background: rgba(212,175,55,0.1) !important;
    border-color: rgba(212,175,55,0.4) !important;
    color: var(--dmh-gold-bright) !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none;
}

/* Lab detail: filas de flag bloqueadas */
.dmh-flag-row.dmh-flag-locked {
    opacity: 0.55;
    position: relative;
}
.dmh-flag-row.dmh-flag-locked::after {
    content: '🔒 PRÓXIMAMENTE';
    position: absolute;
    top: 50%; right: 14px;
    transform: translateY(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72em;
    letter-spacing: 0.18em;
    color: var(--dmh-gold-bright);
    background: rgba(20, 14, 4, 0.85);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(212,175,55,0.45);
    pointer-events: none;
}
.dmh-flag-row.dmh-flag-locked input,
.dmh-flag-row.dmh-flag-locked button {
    pointer-events: none;
    filter: grayscale(0.5);
}

/* ================================================================
   FASE 5 — Writeups públicos · Badge admin · Eventos de writeup
   ================================================================ */

/* Badge numérico encima del botón admin */
.dmh-icon-btn-badged { position: relative; }
.dmh-icon-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: linear-gradient(135deg, var(--dmh-red) 0%, var(--dmh-red-bright) 100%);
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62em;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    border: 1.5px solid #0a0a0a;
    box-shadow: 0 0 8px rgba(255,30,60,0.8);
    pointer-events: none;
    z-index: 2;
}
.dmh-icon-btn-pulse {
    animation: dmhAdminPulse 1.8s ease-in-out infinite;
}
@keyframes dmhAdminPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 30, 60, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(255, 30, 60, 0); }
}

/* Sección de writeups públicos en lab detail */
.dmh-lab-writeups-public {
    margin-top: 22px;
    padding: 18px 20px;
    background: rgba(0,0,0,0.32);
    border: 1px solid var(--dmh-border);
    border-radius: 10px;
}
.dmh-lab-writeups-public h3 {
    font-family: 'JetBrains Mono', monospace;
    color: var(--dmh-gold-bright);
    font-size: 0.92em;
    letter-spacing: 0.2em;
    margin-bottom: 4px;
}
.dmh-wu-pub-hint {
    font-size: 0.82em;
    color: #94a3b8;
    margin-bottom: 14px;
    font-style: italic;
}
.dmh-wu-pub-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dmh-wu-pub-empty {
    text-align: center;
    color: #6b7280;
    font-style: italic;
    padding: 14px;
    border: 1px dashed rgba(200,16,46,0.25);
    border-radius: 6px;
}
.dmh-wu-pub-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: rgba(20,8,12,0.5);
    border: 1px solid var(--dmh-border);
    border-left: 3px solid var(--dmh-gold);
    border-radius: 6px;
    transition: border-color 0.2s, transform 0.2s;
}
.dmh-wu-pub-item:hover {
    border-left-color: var(--dmh-gold-bright);
    transform: translateX(2px);
}
.dmh-wu-pub-info { min-width: 0; }
.dmh-wu-pub-top {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.dmh-wu-pub-author {
    font-family: 'JetBrains Mono', monospace;
    color: #fff;
    font-size: 0.92em;
    font-weight: 700;
}
.dmh-wu-pub-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72em;
    color: #71717a;
    letter-spacing: 0.06em;
}
.dmh-wu-pub-file {
    font-size: 0.82em;
    color: #cbd5e1;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dmh-wu-pub-file small {
    color: #71717a;
    margin-left: 4px;
}
.dmh-wu-pub-note {
    margin-top: 4px;
    font-size: 0.78em;
    color: var(--dmh-gold-bright);
    background: rgba(212,175,55,0.1);
    border-left: 2px solid var(--dmh-gold);
    padding: 4px 8px;
    border-radius: 3px;
}
.dmh-wu-pub-note b { color: var(--dmh-gold-bright); }

@media (max-width: 600px) {
    .dmh-wu-pub-item { grid-template-columns: 1fr; gap: 8px; }
}

/* Eventos de writeup en feeds (lab detail + global) */
.dmh-activity-item.dmh-act-wu { border-left-color: var(--dmh-gold-bright) !important; }
.dmh-act-wu-tag {
    font-size: 0.85em;
    color: var(--dmh-gold-bright);
    background: rgba(245,215,110,0.16);
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.1em;
    border: 1px solid rgba(212,175,55,0.4);
}

/* Quiz / After Party event en feeds */
.dmh-activity-item.dmh-act-quiz { border-left-color: #f0abfc !important; }
.dmh-act-quiz-tag {
    font-size: 0.82em;
    color: #f0abfc;
    background: rgba(217,70,239,0.16);
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.08em;
    border: 1px solid rgba(217,70,239,0.4);
    white-space: nowrap;
}

/* ================================================================
   FASE 6 — Flags adicionales (extras)
   ================================================================ */

/* Eventos de extra en feeds */
.dmh-activity-item.dmh-act-extra { border-left-color: var(--dmh-gold-bright) !important; }
.dmh-act-extra-tag {
    font-size: 0.82em;
    color: var(--dmh-gold-bright);
    background: rgba(212,175,55,0.18);
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.06em;
    border: 1px solid rgba(212,175,55,0.45);
}

/* Bloque colapsable de extras en lab detail */
.dmh-extras {
    margin-top: 14px;
    background: linear-gradient(160deg, rgba(28,18,4,0.55) 0%, rgba(10,6,4,0.85) 100%);
    border: 1px solid rgba(212,175,55,0.32);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.dmh-extras[open] { border-color: rgba(212,175,55,0.55); }
.dmh-extras-summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.92em;
    user-select: none;
    transition: background 0.2s;
}
.dmh-extras-summary::-webkit-details-marker { display: none; }
.dmh-extras-summary:hover { background: rgba(212,175,55,0.06); }
.dmh-extras-icon {
    color: var(--dmh-gold-bright);
    font-size: 1.2em;
    text-shadow: 0 0 8px rgba(212,175,55,0.7);
}
.dmh-extras-title {
    color: #fde68a;
    letter-spacing: 0.18em;
    font-weight: 700;
    flex: 1;
}
.dmh-extras-counter {
    background: rgba(212,175,55,0.18);
    color: var(--dmh-gold-bright);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78em;
    border: 1px solid rgba(212,175,55,0.4);
}
.dmh-extras-chevron {
    color: #71717a;
    font-size: 0.9em;
    transition: transform 0.25s;
}
.dmh-extras[open] .dmh-extras-chevron { transform: rotate(-180deg); }
.dmh-extras-hint {
    margin: 0 16px 12px;
    padding: 8px 12px;
    background: rgba(212,175,55,0.06);
    border-left: 2px solid rgba(212,175,55,0.5);
    border-radius: 4px;
    font-size: 0.78em;
    color: #cbd5e1;
    line-height: 1.5;
}
.dmh-extras-list {
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Item individual de extra */
.dmh-extra-item {
    background: rgba(0,0,0,0.32);
    border: 1px solid var(--dmh-border);
    border-left: 3px solid rgba(212,175,55,0.55);
    border-radius: 6px;
    padding: 10px 12px;
    transition: border-color 0.2s;
}
.dmh-extra-item:hover { border-color: rgba(212,175,55,0.4); }
.dmh-extra-item.dmh-extra-captured {
    border-left-color: #4ade80;
    background: rgba(74,222,128,0.05);
}
.dmh-extra-item.dmh-extra-used-hint {
    border-left-color: var(--dmh-gold);
    background: rgba(212,175,55,0.05);
}
.dmh-extra-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
}
.dmh-extra-info { min-width: 0; }
.dmh-extra-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.dmh-extra-icon { color: var(--dmh-gold-bright); font-size: 1.05em; }
.dmh-extra-label {
    font-family: 'JetBrains Mono', monospace;
    color: #fff;
    font-weight: 700;
    font-size: 0.92em;
}
.dmh-extra-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66em;
    letter-spacing: 0.18em;
    padding: 2px 8px;
    border-radius: 3px;
}
.dmh-extra-status.dmh-extra-ok {
    color: #4ade80; background: rgba(74,222,128,0.15);
    border: 1px solid rgba(74,222,128,0.4);
}
.dmh-extra-status.dmh-extra-pending {
    color: #94a3b8; background: rgba(148,163,184,0.1);
    border: 1px solid rgba(148,163,184,0.3);
}
.dmh-extra-desc {
    margin-top: 4px;
    font-size: 0.82em;
    color: #cbd5e1;
}
.dmh-extra-meta {
    margin-top: 6px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.dmh-extra-pts {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78em;
    color: var(--dmh-gold-bright);
    font-weight: 700;
}
.dmh-extra-pts small {
    color: #71717a;
    font-weight: 400;
    margin-left: 4px;
}
.dmh-extra-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}
.dmh-extra-form {
    display: flex;
    gap: 6px;
}
.dmh-extra-form input {
    width: 180px;
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--dmh-border);
    border-radius: 4px;
    padding: 5px 8px;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82em;
    transition: border-color 0.15s;
}
.dmh-extra-form input:focus {
    outline: none;
    border-color: var(--dmh-gold-bright);
}
.dmh-btn-xs {
    padding: 5px 10px !important;
    font-size: 0.76em !important;
    letter-spacing: 0.06em !important;
}
.dmh-extra-hint-btn { background: rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.4); color: var(--dmh-gold-bright); }
.dmh-extra-hint-btn:hover:not([disabled]) { background: rgba(212,175,55,0.22); }
.dmh-extra-hint-seen { opacity: 0.55; }
.dmh-extra-hint-box {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(212,175,55,0.1);
    border-left: 2px solid var(--dmh-gold);
    border-radius: 4px;
    color: #fde68a;
    font-size: 0.85em;
    line-height: 1.5;
}
.dmh-extra-hint-tag {
    color: var(--dmh-gold-bright);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72em;
    letter-spacing: 0.18em;
    font-weight: 700;
    margin-right: 6px;
}
.dmh-extra-status-msg {
    margin-top: 6px;
    font-size: 0.78em;
    font-family: 'JetBrains Mono', monospace;
}
.dmh-extra-msg-ok  { color: #4ade80; }
.dmh-extra-msg-err { color: var(--dmh-red-bright); }

@media (max-width: 700px) {
    .dmh-extra-row { grid-template-columns: 1fr; }
    .dmh-extra-actions { align-items: stretch; }
    .dmh-extra-form input { flex: 1; width: auto; }
}

/* Lab editor: enlace al manager de extras */
.dmh-leform-extras-link {
    margin: 14px 0 6px;
    padding: 10px 14px;
    background: rgba(212,175,55,0.08);
    border: 1px solid rgba(212,175,55,0.3);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.dmh-leform-extras-hint {
    font-size: 0.82em;
    color: #cbd5e1;
}

/* Manager modal: filas */
.dmh-extras-mgr-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 50vh;
    overflow-y: auto;
}
.dmh-extras-mgr-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--dmh-border);
    border-left: 3px solid rgba(212,175,55,0.5);
    border-radius: 6px;
}
.dmh-extras-mgr-top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.88em;
}
.dmh-extras-mgr-label {
    color: #fde68a;
    font-weight: 700;
}
.dmh-extras-mgr-points {
    color: var(--dmh-gold-bright);
    font-size: 0.82em;
}
.dmh-extras-mgr-actions {
    display: flex;
    gap: 6px;
}

/* ===== Estado bloqueado (lab no rooteado) ===== */
.dmh-extras.dmh-extras-locked {
    border-color: rgba(212,175,55,0.32);
    background: linear-gradient(160deg, rgba(28,18,4,0.55) 0%, rgba(10,6,4,0.85) 100%);
}
.dmh-extras.dmh-extras-locked .dmh-extras-icon { color: var(--dmh-gold-bright); }
.dmh-extras.dmh-extras-locked .dmh-extras-title { color: #fde68a; }
.dmh-extras.dmh-extras-locked .dmh-extras-counter {
    background: rgba(212,175,55,0.18);
    color: var(--dmh-gold-bright);
    border-color: rgba(212,175,55,0.4);
}

/* ================================================================
   FEEDBACK · "Dame tu opinión"
   ================================================================ */

/* Botón en la topbar */
.dmh-feedback-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(217, 70, 239, 0.5);
    background: linear-gradient(135deg, rgba(217,70,239,0.18), rgba(200,16,46,0.16));
    color: #f5d0fe;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8em;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: transform 0.14s, box-shadow 0.2s, border-color 0.2s;
    box-shadow: 0 0 0 0 rgba(217,70,239,0.4);
    animation: dmhFbPulse 3s ease-in-out infinite;
}
.dmh-feedback-btn:hover {
    transform: translateY(-1px);
    border-color: var(--dmh-magenta);
    box-shadow: 0 6px 20px rgba(217,70,239,0.35);
}
.dmh-feedback-btn-ico { font-size: 1.05em; }
/* Botón cuando el usuario ya dio su opinión */
.dmh-feedback-btn.dmh-feedback-btn-done {
    border-color: rgba(74,222,128,0.5);
    background: linear-gradient(135deg, rgba(74,222,128,0.14), rgba(16,185,129,0.10));
    color: #86efac;
    cursor: default;
    animation: none;
    box-shadow: none;
}
.dmh-feedback-btn.dmh-feedback-btn-done:hover { transform: none; box-shadow: none; }
@keyframes dmhFbPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217,70,239,0.0); }
    50%      { box-shadow: 0 0 18px 0 rgba(217,70,239,0.35); }
}

/* Card del modal — vira a magenta/violeta del wallpaper */
.dmh-feedback-card {
    width: min(640px, 95vw);
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid rgba(217,70,239,0.4) !important;
    background: linear-gradient(170deg, #1a0a24 0%, #120814 100%) !important;
}
.dmh-feedback-head { text-align: center; margin-bottom: 18px; }
.dmh-feedback-sigil {
    font-size: 2.6em;
    filter: drop-shadow(0 0 14px rgba(217,70,239,0.7));
    animation: dmhFbFloat 3s ease-in-out infinite;
}
@keyframes dmhFbFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.dmh-feedback-title {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.22em;
    color: #f5d0fe;
    margin: 8px 0 6px;
    font-size: 1.2em;
    text-shadow: 0 0 18px rgba(217,70,239,0.4);
}
.dmh-feedback-sub {
    color: #cbd5e1;
    font-size: 0.86em;
    line-height: 1.55;
    max-width: 480px;
    margin: 0 auto;
}

/* Ratings */
.dmh-fb-ratings {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(217,70,239,0.18);
}
.dmh-fb-rating-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
}
.dmh-fb-rating-label { font-size: 0.86em; color: #e2e8f0; }
.dmh-fb-demons { display: inline-flex; gap: 2px; }
.dmh-fb-demon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.15em;
    filter: grayscale(1) opacity(0.35);
    transition: transform 0.12s, filter 0.15s;
    padding: 2px;
    line-height: 1;
}
.dmh-fb-demon:hover { transform: scale(1.2); }
.dmh-fb-demon.on { filter: grayscale(0) drop-shadow(0 0 6px rgba(217,70,239,0.7)); }
.dmh-fb-rating-caption {
    font-size: 0.72em;
    font-family: 'JetBrains Mono', monospace;
    color: #f0abfc;
    min-width: 56px;
    text-align: right;
}

/* Campos de texto */
.dmh-fb-field { display: block; margin-bottom: 16px; }
.dmh-fb-q { display: block; font-size: 0.92em; color: #fff; font-weight: 600; margin-bottom: 3px; }
.dmh-fb-hint { display: block; font-size: 0.78em; color: #a78bfa; font-style: italic; margin-bottom: 8px; }
.dmh-fb-field textarea {
    width: 100%;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(217,70,239,0.3);
    border-radius: 8px;
    padding: 10px 12px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.9em;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.15s;
}
.dmh-fb-field textarea:focus { outline: none; border-color: var(--dmh-magenta); }
.dmh-fb-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }

/* Overlay de agradecimiento */
.dmh-fb-thanks {
    position: fixed; inset: 0;
    z-index: 40000;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at center, rgba(26,10,36,0.96) 0%, rgba(6,4,12,0.99) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    overflow: hidden;
}
.dmh-fb-thanks.show { opacity: 1; }
.dmh-fb-thanks.out  { opacity: 0; }
.dmh-fb-thanks-rays {
    position: absolute; inset: -50%;
    background: conic-gradient(from 0deg,
        transparent 0deg, rgba(217,70,239,0.12) 24deg, transparent 48deg,
        rgba(200,16,46,0.12) 72deg, transparent 96deg, rgba(217,70,239,0.12) 120deg,
        transparent 144deg, rgba(200,16,46,0.12) 168deg, transparent 192deg,
        rgba(217,70,239,0.12) 216deg, transparent 240deg, rgba(200,16,46,0.12) 264deg,
        transparent 288deg, rgba(217,70,239,0.12) 312deg, transparent 336deg);
    animation: dmhRaysSpin 9s linear infinite;
    pointer-events: none;
}
.dmh-fb-thanks-inner {
    position: relative;
    text-align: center;
    padding: 0 24px;
    animation: dmhFbThanksPop 0.7s cubic-bezier(0.22,1.4,0.36,1);
}
@keyframes dmhFbThanksPop {
    0%   { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}
.dmh-fb-thanks-sigil {
    font-size: 4.5em;
    filter: drop-shadow(0 0 26px rgba(217,70,239,0.8));
    animation: dmhFbFloat 2.4s ease-in-out infinite;
}
.dmh-fb-thanks-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.7em;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: #fff;
    margin-top: 14px;
    text-shadow: 0 0 24px rgba(217,70,239,0.6);
}
.dmh-fb-thanks-title span { color: var(--dmh-red-bright); }
.dmh-fb-thanks-msg {
    margin-top: 14px;
    color: #e2e8f0;
    font-size: 1.05em;
    line-height: 1.6;
}
.dmh-fb-thanks-sign {
    margin-top: 20px;
    font-family: 'JetBrains Mono', monospace;
    color: #f0abfc;
    letter-spacing: 0.1em;
    font-size: 0.9em;
}

/* === Admin: toggle + listado === */
.dmh-fb-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.86em;
    color: #cbd5e1;
}
.dmh-fb-toggle input { display: none; }
.dmh-fb-toggle-track {
    width: 42px; height: 22px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid var(--dmh-border);
    position: relative;
    transition: background 0.2s;
}
.dmh-fb-toggle-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #94a3b8;
    transition: transform 0.2s, background 0.2s;
}
.dmh-fb-toggle input:checked + .dmh-fb-toggle-track {
    background: rgba(217,70,239,0.35);
    border-color: var(--dmh-magenta);
}
.dmh-fb-toggle input:checked + .dmh-fb-toggle-track .dmh-fb-toggle-thumb {
    transform: translateX(20px);
    background: #f5d0fe;
}
.dmh-fb-toggle-label b { color: #f0abfc; }

.dmh-fb-avg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 14px 0 6px;
}
.dmh-fb-avg {
    background: rgba(217,70,239,0.06);
    border: 1px solid rgba(217,70,239,0.25);
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
}
.dmh-fb-avg-num { font-family: 'JetBrains Mono', monospace; font-size: 1.5em; font-weight: 800; color: #fff; }
.dmh-fb-avg-num small { font-size: 0.5em; color: #94a3b8; }
.dmh-fb-avg-demons { font-size: 0.8em; margin: 2px 0; }
.dmh-fb-avg-off { filter: grayscale(1) opacity(0.3); }
.dmh-fb-avg-label { font-size: 0.72em; color: #cbd5e1; line-height: 1.3; }
.dmh-fb-count { font-size: 0.8em; color: #94a3b8; font-family: 'JetBrains Mono', monospace; margin-bottom: 14px; }

.dmh-fb-admin-list { display: flex; flex-direction: column; gap: 12px; }
.dmh-fb-card {
    background: rgba(0,0,0,0.32);
    border: 1px solid var(--dmh-border);
    border-left: 3px solid var(--dmh-magenta);
    border-radius: 8px;
    padding: 14px 16px;
}
.dmh-fb-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dmh-fb-card-who { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #f0abfc; }
.dmh-fb-card-head-right { display: inline-flex; align-items: center; gap: 10px; }
.dmh-fb-card-when { font-size: 0.76em; color: #94a3b8; font-family: 'JetBrains Mono', monospace; }
.dmh-fb-card-del {
    background: rgba(255,30,60,0.08);
    border: 1px solid rgba(255,30,60,0.3);
    color: #ff6b7a;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.82em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    line-height: 1;
}
.dmh-fb-card-del:hover { background: rgba(255,30,60,0.2); border-color: var(--dmh-red-bright); }
.dmh-fb-card-ratings { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dmh-fb-pill {
    font-size: 0.72em;
    background: rgba(217,70,239,0.12);
    border: 1px solid rgba(217,70,239,0.3);
    color: #e9d5ff;
    padding: 2px 8px;
    border-radius: 999px;
}
.dmh-fb-pill b { color: #fff; }
.dmh-fb-card-block { margin-top: 8px; }
.dmh-fb-card-q {
    font-size: 0.7em;
    letter-spacing: 0.12em;
    color: var(--dmh-magenta);
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
}
.dmh-fb-card-block p { margin: 3px 0 0; color: #e2e8f0; font-size: 0.9em; line-height: 1.55; white-space: pre-wrap; }

@media (max-width: 520px) {
    .dmh-fb-rating-row { grid-template-columns: 1fr; gap: 4px; }
    .dmh-fb-rating-caption { text-align: left; }
    .dmh-feedback-btn span:not(.dmh-feedback-btn-ico) { display: none; }
}

.dmh-extras-locked-card {
    padding: 22px 24px 26px;
    text-align: center;
    background:
        radial-gradient(circle at 50% 0%, rgba(212,175,55,0.12) 0%, transparent 70%),
        rgba(0,0,0,0.25);
    border-top: 1px solid rgba(212,175,55,0.25);
    position: relative;
    overflow: hidden;
}
.dmh-extras-locked-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(212,175,55,0.03) 3px, rgba(212,175,55,0.03) 4px);
    pointer-events: none;
}
.dmh-extras-locked-sigil {
    font-size: 2.4em;
    color: var(--dmh-gold-bright);
    text-shadow: 0 0 16px rgba(212,175,55,0.7);
    margin-bottom: 8px;
    animation: dmhLockedPulse 2.2s ease-in-out infinite;
}
@keyframes dmhLockedPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(212,175,55,0.5)); }
    50%      { transform: scale(1.08); filter: drop-shadow(0 0 16px rgba(212,175,55,0.9)); }
}
.dmh-extras-locked-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.05em;
    letter-spacing: 0.32em;
    color: var(--dmh-gold-bright);
    font-weight: 800;
    margin-bottom: 10px;
}
.dmh-extras-locked-msg {
    color: #e2e8f0;
    font-size: 0.94em;
    line-height: 1.5;
    margin-bottom: 6px;
}
.dmh-extras-locked-msg b { color: var(--dmh-gold-bright); }
.dmh-extras-locked-sub {
    color: #cbd5e1;
    font-size: 0.84em;
    line-height: 1.55;
    margin-bottom: 16px;
}
.dmh-extras-locked-sub b {
    color: var(--dmh-red-bright);
    letter-spacing: 0.08em;
}
.dmh-extras-locked-quote {
    font-style: italic;
    color: #71717a;
    font-size: 0.78em;
    border-top: 1px solid rgba(212,175,55,0.15);
    padding-top: 12px;
    margin-top: 4px;
}

/* ===== Animación al capturar un hunt ===== */
.dmh-extra-item.dmh-extra-just-captured {
    animation: dmhExtraPop 0.7s cubic-bezier(0.22, 1.4, 0.36, 1);
    border-left-color: var(--dmh-gold-bright) !important;
    box-shadow: 0 0 24px rgba(212,175,55,0.5);
    position: relative;
}
@keyframes dmhExtraPop {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.04); box-shadow: 0 0 30px rgba(212,175,55,0.8); }
    100% { transform: scale(1); }
}
.dmh-extra-sparks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}
.dmh-extra-sparks span {
    position: absolute;
    left: 50%; top: 50%;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--dmh-gold-bright);
    box-shadow: 0 0 8px var(--dmh-gold);
    animation: dmhSpark 1s ease-out forwards;
    animation-delay: var(--delay, 0ms);
    transform: translate(-50%, -50%);
}
@keyframes dmhSpark {
    0%   { opacity: 1; transform: translate(-50%, -50%) rotate(var(--ang)) translateX(0); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--ang)) translateX(var(--dist)); }
}

/* ===== Banner: cacería completa (todos los hunts capturados) ===== */
.dmh-extras-complete-banner {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    z-index: 30001;
    padding: 36px 56px;
    background:
        radial-gradient(circle at 50% 30%, rgba(212,175,55,0.45) 0%, transparent 65%),
        linear-gradient(160deg, #1c1204 0%, #0a0604 100%);
    border: 2px solid var(--dmh-gold-bright);
    border-radius: 14px;
    text-align: center;
    box-shadow:
        0 0 80px rgba(212,175,55,0.8),
        inset 0 0 60px rgba(212,175,55,0.18);
    opacity: 0;
    transition: opacity 0.35s, transform 0.45s cubic-bezier(0.22, 1.4, 0.36, 1);
    pointer-events: none;
    overflow: hidden;
}
.dmh-extras-complete-banner.dmh-extras-complete-in {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.dmh-extras-complete-banner.dmh-extras-complete-out {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1);
}
.dmh-extras-complete-rays {
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        rgba(212,175,55,0.2) 30deg,
        transparent 60deg,
        rgba(212,175,55,0.2) 90deg,
        transparent 120deg,
        rgba(212,175,55,0.2) 150deg,
        transparent 180deg,
        rgba(212,175,55,0.2) 210deg,
        transparent 240deg,
        rgba(212,175,55,0.2) 270deg,
        transparent 300deg,
        rgba(212,175,55,0.2) 330deg,
        transparent 360deg);
    animation: dmhRaysSpin 6s linear infinite;
    pointer-events: none;
}
@keyframes dmhRaysSpin {
    to { transform: rotate(360deg); }
}
.dmh-extras-complete-icon {
    position: relative;
    z-index: 1;
    font-size: 4em;
    color: var(--dmh-gold-bright);
    text-shadow: 0 0 26px rgba(245,215,110,0.95);
    animation: dmhIconBounce 1.8s ease-in-out infinite;
}
@keyframes dmhIconBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.dmh-extras-complete-title {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.65em;
    font-weight: 800;
    letter-spacing: 0.3em;
    color: #fff;
    text-shadow: 0 0 20px rgba(212,175,55,0.8);
}
.dmh-extras-complete-sub {
    position: relative;
    z-index: 1;
    margin-top: 6px;
    color: #fde68a;
    font-size: 0.92em;
    letter-spacing: 0.08em;
}

/* Cuando el bloque está al 100% completado, el counter pasa a verde */
.dmh-extras.dmh-extras-complete .dmh-extras-counter {
    background: rgba(74,222,128,0.18);
    color: #4ade80;
    border-color: rgba(74,222,128,0.4);
}

/* ================================================================
   FASE 7 — Dificultad "Principiante" · Card con contorno sutil
   ================================================================ */
.dmh-lab-card.dmh-lab-card-beginner {
    border-color: rgba(34, 211, 238, 0.45);
    box-shadow:
        inset 0 0 30px rgba(34, 211, 238, 0.08),
        0 0 18px rgba(34, 211, 238, 0.18);
    background:
        linear-gradient(165deg, rgba(8, 24, 32, 0.6) 0%, var(--dmh-panel) 100%);
}
.dmh-lab-card.dmh-lab-card-beginner:hover {
    border-color: #67e8f9;
    box-shadow:
        inset 0 0 40px rgba(34, 211, 238, 0.15),
        0 18px 40px rgba(34, 211, 238, 0.32);
    transform: translateY(-6px);
}
/* Línea superior fina con tinte cyan */
.dmh-lab-card.dmh-lab-card-beginner::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(34, 211, 238, 0.3) 15%,
        #67e8f9 50%,
        rgba(34, 211, 238, 0.3) 85%,
        transparent 100%);
    z-index: 1;
    pointer-events: none;
}
/* Tag esquinero "BEGINNER" — discreto, no distrae */
.dmh-lab-card-beginner-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 9px;
    background: rgba(8, 24, 32, 0.85);
    border: 1px solid rgba(34, 211, 238, 0.55);
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6em;
    letter-spacing: 0.22em;
    font-weight: 700;
    color: #67e8f9;
    text-shadow: 0 0 6px rgba(34, 211, 238, 0.5);
    z-index: 5;
    pointer-events: none;
    backdrop-filter: blur(4px);
}

/* ================================================================
   FASE 8 — Countdown · After Party (quiz)
   ================================================================ */

/* Pill "EN 2D 14H" en cards de la grid */
.dmh-pwn-pill.dmh-pwn-countdown {
    background: rgba(192, 132, 252, 0.16);
    color: #d8b4fe;
    border: 1px solid rgba(192, 132, 252, 0.5);
}

/* Card en grid con countdown — borde lateral púrpura */
.dmh-lab-card.dmh-lab-card-countdown {
    border-color: rgba(192, 132, 252, 0.4);
    opacity: 0.94;
}
.dmh-lab-card.dmh-lab-card-countdown:hover {
    border-color: #c084fc;
    box-shadow: 0 18px 40px rgba(192, 132, 252, 0.32);
}

/* Countdown overlay en lab detail */
.dmh-countdown {
    position: relative;
    margin-bottom: 20px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(192, 132, 252, 0.4);
    box-shadow: 0 0 36px rgba(192, 132, 252, 0.25);
}
.dmh-countdown-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(192, 132, 252, 0.25) 0%, transparent 70%),
        repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(192,132,252,0.04) 3px, rgba(192,132,252,0.04) 4px),
        linear-gradient(160deg, #18082a 0%, #0a0410 100%);
    pointer-events: none;
}
.dmh-countdown-card {
    position: relative;
    padding: 30px 32px;
    text-align: center;
}
.dmh-countdown-kicker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78em;
    letter-spacing: 0.32em;
    color: #d8b4fe;
    margin-bottom: 6px;
}
.dmh-countdown-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.7em;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #fff;
    text-shadow: 0 0 22px rgba(192,132,252,0.7);
    margin-bottom: 10px;
}
.dmh-countdown-msg {
    font-size: 0.86em;
    color: #cbd5e1;
    margin-bottom: 16px;
}
.dmh-countdown-clock {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 480px;
    margin: 0 auto 18px;
}
.dmh-cd-cell {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(192, 132, 252, 0.35);
    border-radius: 8px;
    padding: 14px 6px;
    box-shadow: inset 0 0 18px rgba(192, 132, 252, 0.12);
    transition: border-color 0.3s;
}
.dmh-cd-cell:hover { border-color: #c084fc; }
.dmh-cd-cell span {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.2em;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 14px rgba(192,132,252,0.7);
    line-height: 1;
}
.dmh-cd-cell small {
    display: block;
    font-size: 0.62em;
    letter-spacing: 0.22em;
    color: #d8b4fe;
    margin-top: 6px;
}
.dmh-countdown-when {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78em;
    color: #94a3b8;
    letter-spacing: 0.1em;
}

/* ===== After Party (bloque colapsable) ===== */
.dmh-afterparty {
    margin-top: 14px;
    background: linear-gradient(160deg, rgba(40, 8, 60, 0.4) 0%, rgba(10, 4, 16, 0.85) 100%);
    border: 1px solid rgba(217, 70, 239, 0.32);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.dmh-afterparty[open] { border-color: rgba(217, 70, 239, 0.6); }
.dmh-ap-summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.92em;
    user-select: none;
}
.dmh-ap-summary::-webkit-details-marker { display: none; }
.dmh-ap-summary:hover { background: rgba(217, 70, 239, 0.06); }
.dmh-ap-icon {
    color: #f0abfc;
    font-size: 1.2em;
    text-shadow: 0 0 8px rgba(217, 70, 239, 0.7);
}
.dmh-ap-title {
    color: #fae8ff;
    letter-spacing: 0.22em;
    font-weight: 800;
    flex: 1;
}
.dmh-ap-counter {
    background: rgba(217, 70, 239, 0.18);
    color: #f0abfc;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78em;
    border: 1px solid rgba(217, 70, 239, 0.4);
}
.dmh-afterparty.dmh-ap-complete .dmh-ap-counter {
    background: rgba(74, 222, 128, 0.18);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.4);
}
.dmh-ap-hint {
    margin: 0 16px 12px;
    padding: 8px 12px;
    background: rgba(217, 70, 239, 0.06);
    border-left: 2px solid rgba(217, 70, 239, 0.5);
    border-radius: 4px;
    font-size: 0.78em;
    color: #cbd5e1;
    line-height: 1.5;
}
.dmh-ap-list { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; }

/* Estado bloqueado (no rooteado) */
.dmh-ap-locked-card {
    padding: 22px 24px 26px;
    text-align: center;
    border-top: 1px solid rgba(217, 70, 239, 0.25);
    background:
        radial-gradient(circle at 50% 0%, rgba(217, 70, 239, 0.12) 0%, transparent 70%),
        rgba(0, 0, 0, 0.25);
}
.dmh-ap-locked-sigil {
    font-size: 2.4em;
    text-shadow: 0 0 16px rgba(217, 70, 239, 0.8);
    margin-bottom: 8px;
    animation: dmhLockedPulse 2.2s ease-in-out infinite;
}
.dmh-ap-locked-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.05em;
    letter-spacing: 0.32em;
    color: #f0abfc;
    font-weight: 800;
    margin-bottom: 10px;
}
.dmh-ap-locked-msg { color: #e2e8f0; font-size: 0.94em; line-height: 1.5; margin-bottom: 6px; }
.dmh-ap-locked-msg b { color: #f0abfc; }
.dmh-ap-locked-sub { color: #cbd5e1; font-size: 0.84em; line-height: 1.55; }

/* Pregunta individual */
.dmh-ap-q {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(217, 70, 239, 0.25);
    border-left: 3px solid rgba(217, 70, 239, 0.55);
    border-radius: 6px;
    padding: 14px 16px;
    position: relative;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.dmh-ap-q.dmh-ap-q-correct { border-left-color: #4ade80; box-shadow: inset 0 0 22px rgba(74,222,128,0.08); }
.dmh-ap-q.dmh-ap-q-wrong   { border-left-color: var(--dmh-red-bright); box-shadow: inset 0 0 22px rgba(255,30,60,0.08); }
.dmh-ap-q-loading { opacity: 0.6; pointer-events: none; }

.dmh-ap-q-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}
.dmh-ap-q-num {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    color: #f0abfc;
    font-size: 0.9em;
}
.dmh-ap-q-text {
    flex: 1;
    color: #fff;
    font-size: 0.94em;
    line-height: 1.45;
}
.dmh-ap-q-pts {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72em;
    color: #d8b4fe;
    background: rgba(217, 70, 239, 0.12);
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid rgba(217, 70, 239, 0.3);
    white-space: nowrap;
}

.dmh-ap-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dmh-ap-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--dmh-border);
    border-radius: 6px;
    color: #e5e7eb;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 0.88em;
    transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.dmh-ap-opt:hover:not(:disabled):not(.dmh-ap-opt-correct):not(.dmh-ap-opt-wrong) {
    background: rgba(217, 70, 239, 0.1);
    border-color: rgba(217, 70, 239, 0.5);
    transform: translateX(2px);
}
.dmh-ap-opt:disabled { cursor: default; }
.dmh-ap-opt-letter {
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(217, 70, 239, 0.18);
    border: 1px solid rgba(217, 70, 239, 0.4);
    border-radius: 50%;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 0.78em;
    color: #f0abfc;
    flex-shrink: 0;
}
.dmh-ap-opt-text { flex: 1; }
.dmh-ap-opt.dmh-ap-opt-correct {
    background: rgba(74, 222, 128, 0.12);
    border-color: #4ade80;
    color: #d1fae5;
}
.dmh-ap-opt.dmh-ap-opt-correct .dmh-ap-opt-letter {
    background: rgba(74,222,128,0.25); border-color: #4ade80; color: #4ade80;
}
.dmh-ap-opt.dmh-ap-opt-wrong {
    background: rgba(255, 30, 60, 0.1);
    border-color: var(--dmh-red-bright);
    color: #fecaca;
}
.dmh-ap-opt.dmh-ap-opt-wrong .dmh-ap-opt-letter {
    background: rgba(255,30,60,0.22); border-color: var(--dmh-red-bright); color: var(--dmh-red-bright);
}

.dmh-ap-explain {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(217, 70, 239, 0.06);
    border-left: 2px solid rgba(217, 70, 239, 0.4);
    border-radius: 4px;
    font-size: 0.84em;
    line-height: 1.55;
    color: #cbd5e1;
}
.dmh-ap-explain-tag {
    display: inline-block;
    margin-right: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 2px 7px;
    border-radius: 3px;
}
.dmh-ap-q-correct .dmh-ap-explain-tag { background: rgba(74,222,128,0.2); color: #4ade80; }
.dmh-ap-q-wrong   .dmh-ap-explain-tag { background: rgba(255,30,60,0.2); color: var(--dmh-red-bright); }

/* Animaciones */
.dmh-ap-q.dmh-ap-shake { animation: dmhApShake 0.5s ease-in-out; }
@keyframes dmhApShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.dmh-ap-burst {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}
.dmh-ap-burst span {
    position: absolute;
    left: 50%; top: 50%;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 10px #4ade80;
    animation: dmhSpark 1.1s ease-out forwards;
    animation-delay: var(--delay, 0ms);
    transform: translate(-50%, -50%);
}

/* Resumen final del After Party */
.dmh-ap-summary-bar {
    margin: 12px 12px 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(217,70,239,0.18), rgba(192,132,252,0.12));
    border: 1px solid rgba(217, 70, 239, 0.4);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'JetBrains Mono', monospace;
}
.dmh-ap-sum-icon { font-size: 1.6em; }
.dmh-ap-sum-text { color: #fae8ff; font-size: 0.88em; }
.dmh-ap-sum-text b { color: #f0abfc; }

/* Editor admin de opciones */
.dmh-quiz-opt-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.dmh-quiz-opt-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex-shrink: 0;
}
.dmh-quiz-opt-radio input[type="radio"] {
    accent-color: #c084fc;
    width: 16px; height: 16px; margin: 0; cursor: pointer;
}
.dmh-quiz-opt-letter {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 24px; height: 24px;
    background: rgba(192,132,252,0.18);
    border: 1px solid rgba(192,132,252,0.4);
    border-radius: 50%;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #d8b4fe;
    font-size: 0.78em;
}
.dmh-quiz-opt-input {
    flex: 1;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--dmh-border);
    border-radius: 4px;
    padding: 7px 10px;
    color: #fff;
    font-family: inherit;
    font-size: 0.86em;
}
.dmh-quiz-opt-input:focus { outline: none; border-color: #c084fc; }

/* Banner sutil cuando todo el lab está en "PRÓXIMAMENTE" */
.dmh-lab-view.dmh-lab-soon .dmh-lab-hero::after {
    content: '⌛ Esta máquina aún no está publicada — no se aceptan flags todavía';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(90deg, rgba(212,175,55,0.18), rgba(212,175,55,0.08), rgba(212,175,55,0.18));
    color: var(--dmh-gold-bright);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78em;
    letter-spacing: 0.15em;
    text-align: center;
    padding: 8px 14px;
    border-top: 1px solid rgba(212,175,55,0.35);
}

/* ================================================================
   DEVILSEC WRAPPED — estadísticas finales (estilo stories/Wrapped)
   ================================================================ */

/* --- Banner de entrada en el dashboard --- */
.dmh-wrapped-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    margin-bottom: 22px;
    padding: 18px 24px;
    border: 1px solid rgba(255, 30, 60, 0.45);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255,30,60,0.22) 0%, transparent 55%),
        linear-gradient(110deg, #1c0610 0%, #240814 45%, #12060e 100%);
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    color: #fff;
    transition: transform 0.15s, box-shadow 0.25s, border-color 0.25s;
}
.dmh-wrapped-banner:hover {
    transform: translateY(-2px);
    border-color: #ff1e3c;
    box-shadow: 0 14px 44px rgba(255,30,60,0.25);
}
.dmh-wb-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 120%, rgba(245,215,110,0.16) 0%, transparent 60%);
    pointer-events: none;
    animation: dmhWbGlow 5s ease-in-out infinite;
}
@keyframes dmhWbGlow { 0%,100%{opacity:0.5} 50%{opacity:1} }
.dmh-wb-ico {
    font-size: 2.4em;
    filter: drop-shadow(0 0 14px rgba(255,30,60,0.7));
    animation: dmhWbFloat 3s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes dmhWbFloat { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-5px) rotate(4deg)} }
.dmh-wb-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; position: relative; z-index: 1; }
.dmh-wb-kicker { font-family: 'JetBrains Mono', monospace; font-size: 0.64em; letter-spacing: 0.16em; color: #f5d76e; }
.dmh-wb-title  { font-family: 'JetBrains Mono', monospace; font-size: 1.12em; font-weight: 800; color: #fff; }
.dmh-wb-sub    { font-size: 0.82em; color: #cbd5e1; }
.dmh-wb-cta {
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #ff1e3c;
    padding: 8px 16px;
    border: 1px solid rgba(255,30,60,0.5);
    border-radius: 999px;
    background: rgba(255,30,60,0.08);
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

/* --- Overlay fullscreen --- */
.dmh-wrapped {
    position: fixed;
    inset: 0;
    z-index: 45000;
    opacity: 0;
    transition: opacity 0.35s ease;
    overflow: hidden;
}
.dmh-wrapped.visible { opacity: 1; }
.dmh-wrapped-bg {
    position: absolute;
    inset: 0;
    background: url('assets/dante_devilmayhack.png') center / cover no-repeat;
    filter: blur(6px) brightness(0.66) saturate(1.15);
    transform: scale(1.08);
}
.dmh-wrapped-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 30%, rgba(120,0,20,0.22) 0%, transparent 62%),
        linear-gradient(180deg, rgba(8,4,8,0.58) 0%, rgba(6,2,6,0.82) 100%);
}

/* Barras de progreso (stories) */
.dmh-wrapped-bars {
    position: absolute;
    top: 14px; left: 16px; right: 16px;
    display: flex;
    gap: 5px;
    z-index: 4;
}
.dmh-wb-bar {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.22);
    border-radius: 99px;
    overflow: hidden;
}
.dmh-wb-bar-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff1e3c, #f5d76e);
    border-radius: 99px;
}

/* Top bar */
.dmh-wrapped-top {
    position: absolute;
    top: 26px; left: 18px; right: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 5;
}
.dmh-wrapped-brand {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8em;
    letter-spacing: 0.22em;
    color: rgba(255,255,255,0.85);
}
.dmh-wrapped-brand b { color: #ff1e3c; }
.dmh-wrapped-close {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(0,0,0,0.35);
    color: #fff;
    font-size: 1.5em;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.dmh-wrapped-close:hover { background: rgba(255,30,60,0.3); transform: rotate(90deg); }

/* Zonas de navegación (debajo del contenido para no bloquear los botones) */
.dmh-wrapped-nav {
    position: absolute;
    top: 0; bottom: 0;
    width: 32%;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2;
}
.dmh-wrapped-nav-prev { left: 0; }
.dmh-wrapped-nav-next { right: 0; width: 68%; }

/* Escenario: contenedor sin interceptar clics (las nav zones sí los reciben),
   pero el slide concreto SÍ los recibe para que botones/links funcionen. */
.dmh-wrapped-stage {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 26px 50px;
    pointer-events: none;
}
.dmh-wrapped-slide {
    width: 100%;
    max-width: 560px;
    text-align: center;
    color: #fff;
    animation: dmhWslideIn 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: auto;
}
@keyframes dmhWslideIn {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Componentes de slide */
.wslide-kicker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78em;
    letter-spacing: 0.3em;
    color: #ff5a6e;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.wslide-bigemoji {
    font-size: 4.5em;
    line-height: 1;
    margin-bottom: 16px;
    filter: drop-shadow(0 0 24px rgba(255,30,60,0.6));
    animation: dmhWbFloat 3s ease-in-out infinite;
}
.wslide-h {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.9em;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 14px;
}
.wslide-h span { color: #ff1e3c; }
.wslide-lead {
    font-size: 1.15em;
    color: #e2e8f0;
    line-height: 1.5;
    margin: 0 0 10px;
}
.wslide-lead b { color: #f5d76e; }
.wslide-foot {
    margin-top: 18px;
    font-size: 0.92em;
    color: #cbd5e1;
    line-height: 1.55;
}
.wslide-foot b { color: #fff; }
.wslide-tap {
    margin-top: 30px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8em;
    color: rgba(255,255,255,0.55);
    animation: dmhWbGlow 2s ease-in-out infinite;
}

/* Megastat number */
.wslide-megastat {
    font-family: 'JetBrains Mono', monospace;
    font-size: 6em;
    font-weight: 800;
    line-height: 1;
    margin: 6px 0 8px;
    color: #fff;
    text-shadow: 0 0 40px rgba(255,30,60,0.5);
    animation: dmhMegaPop 0.7s cubic-bezier(0.22,1.4,0.36,1);
}
@keyframes dmhMegaPop { 0%{transform:scale(0.4);opacity:0} 100%{transform:scale(1);opacity:1} }
.wslide-megastat-gold { color: #f5d76e; text-shadow: 0 0 40px rgba(245,215,110,0.5); }
.wslide-megastat-cyan { color: #7dd3fc; text-shadow: 0 0 40px rgba(56,189,248,0.5); }

.wslide-pill {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 0.92em;
    color: #fff;
}
.wslide-pill b { color: #f5d76e; }

.wslide-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.2em;
    font-weight: 800;
    color: #ff5a6e;
    margin: 10px 0;
    text-shadow: 0 0 30px rgba(255,30,60,0.4);
}
.wslide-machine {
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.4em;
    font-weight: 800;
    margin: 12px 0;
    background: linear-gradient(92deg, #ff5a6e, #f5d76e);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Duo (secret hunts + after party) */
.wslide-duo {
    display: flex;
    gap: 18px;
    justify-content: center;
    margin: 18px 0 6px;
}
.wslide-duo-item {
    flex: 1;
    max-width: 200px;
    padding: 22px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.14);
}
.wslide-duo-num { display: block; font-family: 'JetBrains Mono', monospace; font-size: 2.6em; font-weight: 800; color: #fff; }
.wslide-duo-lbl { display: block; margin-top: 6px; font-size: 0.86em; color: #cbd5e1; }

/* Trofeos */
.wslide-trophy-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.wslide-trophy {
    font-size: 2em;
    filter: drop-shadow(0 0 10px rgba(245,215,110,0.5));
    animation: dmhWbFloat 3s ease-in-out infinite;
}
.wslide-trophy:nth-child(2n) { animation-delay: 0.3s; }
.wslide-trophy:nth-child(3n) { animation-delay: 0.6s; }

/* Medalla de ranking (el premio) */
.wslide-medal {
    position: relative;
    width: 200px; height: 200px;
    margin: 6px auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wslide-medal-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid var(--medal-c, #ff1e3c);
    box-shadow: 0 0 50px var(--medal-glow, rgba(255,30,60,0.6)), inset 0 0 40px var(--medal-glow, rgba(255,30,60,0.3));
    background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.10) 0%, transparent 60%);
    animation: dmhMedalSpin 14s linear infinite;
}
.wslide-medal-ring::before {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1px dashed var(--medal-c, #ff1e3c);
    opacity: 0.4;
    animation: dmhMedalSpin 22s linear infinite reverse;
}
@keyframes dmhMedalSpin { to { transform: rotate(360deg); } }
.wslide-medal-emoji {
    position: absolute;
    top: 30px; left: 50%;
    transform: translateX(-50%);
    font-size: 3.4em;
    filter: drop-shadow(0 0 16px var(--medal-glow, rgba(255,30,60,0.7)));
}
.wslide-medal-rank {
    position: absolute;
    bottom: 34px; left: 0; right: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 2.4em;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 20px var(--medal-glow, rgba(255,30,60,0.7));
}
.wslide-rank-tier {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1em;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--medal-c, #ff1e3c);
    text-shadow: 0 0 16px var(--medal-glow, rgba(255,30,60,0.5));
}
/* Tiers (colores de la medalla) */
.wslide-rank.tier-1     { --medal-c:#f5d76e; --medal-glow:rgba(245,215,110,0.7); }
.wslide-rank.tier-2     { --medal-c:#cbd5e1; --medal-glow:rgba(203,213,225,0.6); }
.wslide-rank.tier-3     { --medal-c:#d8924a; --medal-glow:rgba(216,146,74,0.6); }
.wslide-rank.tier-elite { --medal-c:#ff1e3c; --medal-glow:rgba(255,30,60,0.7); }
.wslide-rank.tier-hi    { --medal-c:#fb923c; --medal-glow:rgba(251,146,60,0.6); }
.wslide-rank.tier-mid   { --medal-c:#c084fc; --medal-glow:rgba(192,132,252,0.6); }
.wslide-rank.tier-base  { --medal-c:#ff5a6e; --medal-glow:rgba(255,90,110,0.5); }

/* --- Iconos SVG (renders) --- */
.wi-svg {
    width: 1em; height: 1em;
    display: inline-block;
    vertical-align: middle;
    overflow: visible;
}
.wi-inline { width: 1em; height: 1em; vertical-align: -0.14em; }
/* Tamaños grandes en el bigemoji (antes era font-size de emoji) */
.wslide-bigemoji { color: #ff1e3c; }            /* color por defecto del render */
.wslide-bigemoji .wi-svg { width: 78px; height: 78px; }
.wslide-bigemoji.wi-c-red  { color: #ff3050; }
.wslide-bigemoji.wi-c-gold { color: #f5d76e; }
.wslide-bigemoji.wi-c-cyan { color: #7dd3fc; }
/* Icono dentro de la medalla (hereda el color del tier) */
.wslide-medal-emoji { color: var(--medal-c, #ff1e3c); }
.wslide-medal-emoji .wi-svg { width: 62px; height: 62px; }
/* Icono pequeño en píldoras/botones */
.wi-pill-ico { display: inline-flex; vertical-align: -0.16em; }
.wi-pill-ico .wi-svg, .wi-pill-ico .wi-inline { width: 1.05em; height: 1.05em; }
/* Loading */
.dmh-wrapped-loading-sigil { color: #ff3050; }
.dmh-wrapped-loading-sigil .wi-svg { width: 64px; height: 64px; }

/* Slide final */
.wslide-final-actions { margin: 22px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.wslide-share-msg { font-size: 0.84em; color: #cbd5e1; min-height: 1em; width: 100%; max-width: 420px; margin: 0 auto; }
.wslide-share-msg.ok { color: #4ade80; }
.wslide-share-note { margin-bottom: 8px; font-weight: 600; }
.wslide-share-box {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.wslide-share-box input {
    flex: 1;
    min-width: 0;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82em;
}
.wslide-share-box input:focus { outline: none; border-color: #ff1e3c; }
.wslide-share-hint { margin-top: 8px; font-size: 0.76em; color: #94a3b8; line-height: 1.4; }
.wslide-credit {
    margin-top: 22px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74em;
    letter-spacing: 0.08em;
    color: #94a3b8;
}
.wslide-sign { margin-top: 4px; font-size: 0.78em; color: #ff5a6e; font-style: italic; }

/* Loading */
.dmh-wrapped-loading {
    text-align: center;
    color: #e2e8f0;
}
.dmh-wrapped-loading-sigil {
    font-size: 3.5em;
    filter: drop-shadow(0 0 20px rgba(255,30,60,0.7));
    animation: dmhWbFloat 2s ease-in-out infinite;
    margin-bottom: 14px;
}

@media (max-width: 560px) {
    .wslide-megastat { font-size: 4.2em; }
    .wslide-h { font-size: 1.5em; }
    .wslide-machine { font-size: 1.8em; }
    .wslide-medal { width: 168px; height: 168px; }
    .wslide-duo { gap: 10px; }
    .dmh-wb-cta { display: none; }
    .dmh-wb-title { font-size: 1em; }
}