/* assets/style.css - V2.0 (Final - Estetica Refinada, Seguridad y Responsive) */
#sgc-team-app {
    --c-green: #004d43;
    --c-gold: #D7A53C;
    --f-display: 'Montserrat', sans-serif;
    --f-body: 'Nunito Sans', sans-serif;
    background-color: #F6F6F6;
    padding: 60px 20px;
}

#sgc-team-app * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-transform: none !important;
}

/* GRID DE EQUIPO */
#sgc-team-app .sgc-grid {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* TARJETAS */
#sgc-team-app .sgc-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(0, 50, 0, 0.08);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: 0.4s ease;
    opacity: 0;
    transform: translateY(30px);
    overflow: hidden;
}

#sgc-team-app .sgc-card.sgc-visible {
    opacity: 1;
    transform: translateY(0);
}

#sgc-team-app .sgc-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

#sgc-team-app .sgc-card-stripe {
    height: 6px;
    background: var(--c-green);
    width: 100%;
}

#sgc-team-app .sgc-card-body {
    padding: 45px 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

#sgc-team-app .sgc-photo-ring {
    width: 145px;
    height: 145px;
    border-radius: 50%;
    position: relative;
    margin-bottom: 25px;
}

#sgc-team-app .sgc-photo-ring::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-green), var(--c-gold));
    opacity: 0.6;
    z-index: 0;
}

#sgc-team-app .sgc-photo-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    position: relative;
    z-index: 1;
    display: block;
}

#sgc-team-app .sgc-card-name {
    font-family: var(--f-display);
    font-size: 1.5rem;
    color: #71715a;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
}

#sgc-team-app .sgc-card-role {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--c-gold);
    margin-bottom: 20px;
    min-height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sgc-team-app .sgc-card-bio {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #666;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    margin-bottom: 25px;
}

#sgc-team-app .sgc-card-footer {
    padding: 0 30px 40px;
    display: flex;
    justify-content: center;
}

#sgc-team-app .sgc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 24px !important;
    border-radius: 99px !important;
    border: 1.5px solid var(--c-gold) !important;
    background: #fff !important;
    color: var(--c-gold) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

#sgc-team-app .sgc-btn:hover {
    background: var(--c-gold) !important;
    color: #fff !important;
}

/* MODAL: ESTETICA PREMIUM Y POSICION SEGURA (BLOCK SCROLL) */
#sgc-team-app .sgc-portal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999999 !important;
    display: none;
    padding: 0 !important; /* El padding se maneja con el margin de la tarjeta */
    background: rgba(10, 30, 20, 0.45) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    overflow-y: auto !important; /* SCROLL NATURAL ACTIVO! */
    -webkit-overflow-scrolling: touch;
}

#sgc-team-app .sgc-portal.sgc-open {
    display: block !important;
}

#sgc-team-app .sgc-portal-veil {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1 !important;
    cursor: pointer !important;
}

#sgc-team-app .sgc-portal-card {
    position: relative !important;
    z-index: 2 !important;
    margin: 200px auto 60px auto !important; /* Ajuste maestral del usuario: 200px */
    background: #fff !important;
    border-radius: 32px !important;
    width: 95% !important;
    max-width: 900px !important;
    height: 550px !important; /* ALTURA AJUSTADA A 550PX */
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}

/* PANEL IZQUIERDO MODAL */
#sgc-team-app .sgc-portal-left {
    width: 38% !important;
    min-width: 280px !important;
    background-color: #eae3d5 !important;
    background-image: url('https://intranet.sgc.gov.co/web/wp-content/uploads/2026/03/fondo-linea-geologicas_1.png') !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: 100% auto !important; /* Mantiene la misma proporción de la imagen siempre */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important; 
    padding: 0 !important; 
    position: relative !important;
    height: 100% !important;
}

#sgc-team-app .sgc-portal-img {
    position: absolute !important;
    top: 125px !important; /* Centro de la foto a 125px del borde superior */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 180px !important;
    height: 180px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 5px solid #fff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    z-index: 5 !important;
}

/* PANEL DERECHO MODAL */
#sgc-team-app .sgc-portal-right {
    flex: 1 !important;
    padding: 50px !important;
    background: #fff !important;
    overflow-y: auto !important;
    font-family: var(--f-body) !important;
}

#sgc-team-app .sgc-portal-right-title {
    font-size: 2.2rem !important; /* Un poco más grande y elegante */
    color: #444 !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    font-family: var(--f-display);
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.1 !important;
}

#sgc-team-app .sgc-portal-right-title span {
    display: block;
}

#sgc-team-app .sgc-portal-right-title .first-name {
    font-weight: 700 !important; /* Negrita como afuera */
    color: #71715a !important;   /* Color institucional como afuera */
    text-transform: none !important;
}

#sgc-team-app .sgc-portal-right-title .last-name {
    font-weight: 700 !important; /* Negrita como afuera */
    color: #71715a !important;   /* Color unificado */
    text-transform: none !important;
}

#sgc-team-app .sgc-portal-right-role {
    font-size: 1rem !important;
    font-weight: 700;
    color: var(--c-gold) !important;
    margin-bottom: 25px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding-bottom: 15px !important;
}

#sgc-team-app .sgc-portal-bio {
    color: #444 !important;
    line-height: 1.5 !important;
    font-size: 0.92rem !important;
}

#sgc-team-app .sgc-portal-bio p {
    margin-bottom: 12px !important;
}

/* CIERRE */
#sgc-team-app .sgc-portal-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 1000 !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #eee !important;
    border-radius: 50% !important;
    color: #71715a !important;
    transition: 0.3s;
}

#sgc-team-app .sgc-portal-close:hover {
    transform: rotate(90deg);
    background: #fff !important;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    #sgc-team-app .sgc-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    #sgc-team-app .sgc-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 900px) {
    #sgc-team-app .sgc-portal-card {
        flex-direction: column !important;
        margin-top: 60px !important; /* En móviles algo menos de margen arriba para ahorrar espacio */
    }

    #sgc-team-app .sgc-portal-left {
        width: 100% !important;
        height: 220px !important;
    }
}

/* CLASE PARA OCULTAR ELEMENTOS EXTERNOS */
body.sgc-modal-open #back-to-top,
body.sgc-modal-open .back-to-top,
body.sgc-modal-open #scroll-to-top,
body.sgc-modal-open .go-top,
body.sgc-modal-open [class*="scroll-top"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}