.flacso-docente-page {
            --slate-50: #f8fafc;
            --slate-100: #f1f5f9;
            --slate-200: #e2e4e7;
            --slate-300: #cbd5e1;
            --slate-400: #94a3b8;
            --slate-600: #475569;
            --slate-700: #334155;
            --slate-800: #1e293b;
            --slate-900: #0f172a;
            --primary: #1d3a72;
            --accent: #fed222;
            
            background-color: var(--slate-50);
            min-height: 100vh;
            padding-bottom: 5rem;
            font-family: 'Inter', -apple-system, sans-serif;
            color: var(--slate-800);
        }

        .docente-container {
            max-width: 1140px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        /* Breadcrumb */
        .docente-breadcrumb {
            padding: 1.5rem 0;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--slate-400);
        }
        .docente-breadcrumb a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
        }
        .docente-breadcrumb .current { color: var(--slate-600); }

        /* Hero Section */
        .docente-hero {
            position: relative;
            border-radius: 24px;
            overflow: hidden;
            margin-bottom: 2rem;
            box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
        }
        .hero-bg {
            position: absolute;
            inset: 0;
            z-index: 1;
        }
        .hero-content {
            position: relative;
            z-index: 2;
            padding: 3rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 2rem;
        }
        .hero-main {
            display: flex;
            align-items: center;
            gap: 2.5rem;
        }
        .hero-avatar-wrapper {
            width: 160px;
            height: 160px;
            border-radius: 20%;
            overflow: hidden;
            border: 4px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.05);
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        .hero-avatar-img { width: 100%; height: 100%; object-fit: cover; }
        .hero-avatar-fallback {
            width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
            font-size: 3rem; font-weight: 800; color: #fff; background: var(--primary);
        }
        .hero-badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            background: var(--accent);
            color: var(--slate-900);
            font-size: 0.7rem;
            font-weight: 800;
            text-transform: uppercase;
            border-radius: 6px;
            margin-bottom: 1rem;
        }
        .hero-name {
            color: #fff;
            font-size: clamp(2rem, 4vw, 3rem);
            margin: 0;
            font-weight: 800;
            line-height: 1.1;
        }
        .hero-title {
            color: var(--slate-300);
            font-size: 1.2rem;
            margin-top: 0.5rem;
        }

        .btn-back {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            padding: 0.75rem 1.5rem;
            border-radius: 12px;
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 600;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }
        .btn-back:hover { background: rgba(255, 255, 255, 0.2); transform: translateX(-5px); }

        /* Grid */
        .docente-grid {
            display: grid;
            grid-template-columns: 1fr 340px;
            gap: 2rem;
        }

        /* Cards */
        .docente-card {
            background: #fff;
            border-radius: 20px;
            padding: 2.5rem;
            border: 1px solid var(--slate-200);
            box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
        }
        .card-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--slate-100);
        }
        .card-header h2, .card-header h3 { margin: 0; color: var(--primary); font-size: 1.5rem; font-weight: 700; }
        .card-header h3 { font-size: 1.1rem; }

        .cv-content { line-height: 1.8; color: var(--slate-700); font-size: 1.1rem; }
        .cv-content p { margin-bottom: 1.25rem; }

        /* Sidebar */
        .docente-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
        .contact-methods { display: flex; flex-direction: column; gap: 1rem; }
        .contact-item {
            background: var(--slate-50);
            padding: 1rem;
            border-radius: 12px;
            border: 1px solid var(--slate-200);
        }
        .contact-item .label { display: block; font-size: 0.75rem; color: var(--slate-400); text-transform: uppercase; font-weight: 700; margin-bottom: 0.25rem; }
        .contact-item .value { color: var(--primary); text-decoration: none; font-weight: 600; word-break: break-all; }
        
        .social-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
        .social-btn {
            background: #fff;
            border: 1px solid var(--slate-200);
            padding: 0.5rem 1rem;
            border-radius: 999px;
            font-size: 0.85rem;
            text-decoration: none;
            color: var(--slate-700);
            transition: all 0.2s ease;
        }
        .social-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--slate-50); }

        .admin-notice {
            background: var(--primary);
            color: #fff;
            padding: 1.5rem;
            border-radius: 16px;
            text-align: center;
        }
        .admin-notice p { margin-bottom: 1rem; font-size: 0.9rem; opacity: 0.9; }
        .btn-admin { background: var(--accent); color: var(--slate-900); padding: 0.5rem 1rem; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 0.85rem; display: block; }

        /* Responsive */
        @media (max-width: 992px) {
            .docente-grid { grid-template-columns: 1fr; }
            .hero-content { flex-direction: column; text-align: center; padding: 2rem; }
            .hero-main { flex-direction: column; gap: 1.5rem; }
            .docente-card { padding: 1.5rem; }
        }