/* ========== INSTRUCTOR PROFILE (NEW CLEAN LAYOUT) ========== */
/* Reset de layouts anteriores */
#prof-card, .profile-bio-box, .profile-badges-box { all: unset; display: flex; flex-direction: column; }

/* Main Container - Nuevo Grid tradicional */
.profile-container {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    margin-top: 60px; /* Margen positivo estándar */
    padding-bottom: 80px;
    align-items: start;
}
@media (max-width: 900px) {
    .profile-container {
        grid-template-columns: 1fr;
        margin-top: 20px;
    }
}

/* Left Sidebar - Tarjeta Contenida */
.profile-sidebar {
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm); /* Sombra suave para integración */
    padding: 32px;
    border: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.profile-photo {
    width: 200px; /* Tamaño fijo controlado */
    height: 200px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--gray-100);
    border: 4px solid var(--white);
    box-shadow: var(--shadow-md);
    margin-bottom: 24px;
}
.profile-sidebar h3 {
    font-family: 'Oswald', sans-serif;
    color: var(--navy-dark);
    font-size: 1.2rem;
    margin: 24px 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--gray-100);
    width: 100%;
    text-align: left;
}
.profile-sidebar-item {
    width: 100%;
    margin-bottom: 16px;
    font-size: 0.95rem;
    color: var(--gray-600);
    display: flex;
    align-items: center;
    gap: 12px;
}
.contact-icon { color: var(--green); font-size: 1.2rem; display: inline-flex; align-items: center; justify-content: center; width: 22px; flex-shrink: 0; }

/* Right Main Content */
.profile-main {
    padding-top: 0;
}
.profile-main-title {
    font-family: 'Oswald', sans-serif;
    font-size: 2.8rem;
    color: var(--navy-dark);
    margin-bottom: 12px;
    line-height: 1.1;
}
.profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}
.profile-bio-container {
    background: var(--white);
    border-radius: 12px;
    padding: 32px;
    border: 1px solid var(--gray-100);
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}
.profile-bio-container h2 {
    font-family: 'Oswald', sans-serif;
    color: var(--navy-dark);
    font-size: 1.6rem;
    margin-bottom: 20px;
}
.profile-bio {
    color: var(--gray-700);
    line-height: 1.8;
    font-size: 1.05rem;
    white-space: pre-line;
}

/* Badges Coloridos (Sincronizado con directory.css) */
.profile-badges .badge {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 100px;
    white-space: nowrap;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.5px;
}
.badge-level1, .badge-level2 {
    background: rgba(34, 197, 94, 0.15); /* Green medium */
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.4);
}
.badge-crs {
    background: rgba(22, 163, 74, 0.15); /* Green dark */
    color: #1a6b38;
    border: 1px solid rgba(22, 163, 74, 0.4);
}
.badge-cjpi {
    background: rgba(3, 105, 161, 0.15); /* Brand Blue */
    color: #0369a1;
    border: 1px solid rgba(3, 105, 161, 0.4);
}
.badge-director {
    background: rgba(124, 58, 237, 0.15); /* Purple — highest tier */
    color: #6d28d9;
    border: 1px solid rgba(124, 58, 237, 0.4);
}
.badge-mtp {
    background: rgba(217, 119, 6, 0.15); /* Amber — distinct from director */
    color: #b45309;
    border: 1px solid rgba(217, 119, 6, 0.4);
}

/* Otros estados */
#loading-state, #error-state { text-align: center; padding: 100px 20px; font-size: 1.2rem; font-family: 'Oswald', sans-serif; }
#loading-state { color: var(--navy); }
#error-state { display: none; color: #ef4444; }
#profile-content { display: none; }

/* Reposicionamiento del botón de retroceso en el Hero */
.page-hero .container {
    position: relative; /* Importante para el posicionamiento absoluto */
}

.hero-back-btn {
    position: absolute;
    top: -30px; /* Colocarlo "más arriba", relativo al inicio del hero container */
    left: 20px; /* Colocarlo a la izquierda */
    color: var(--green) !important; /* Verde como "Profile" */
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s;
    z-index: 10; /* Asegurar que esté por encima */
}

.hero-back-btn:hover {
    color: var(--white) !important;
}