#right_panels {
    position: fixed;
    right: 0;
    left: auto;
    width: 40vw;
    max-width: 40vw;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    top: 10px;
    gap: 0.5vh;
    height: calc(100vh - 10px);
    padding-top: 10px;
    box-sizing: border-box;
    /* Dynamic globe mask */
    --globe-mask-radius: 300px;
    --mask-center-x: -5vw;
    --mask-center-y: 50%;
    /* New dynamic variable */
    -webkit-mask-image: radial-gradient(circle at var(--mask-center-x) var(--mask-center-y), transparent var(--globe-mask-radius), black calc(var(--globe-mask-radius) + 2px));
    mask-image: radial-gradient(circle at var(--mask-center-x) var(--mask-center-y), transparent var(--globe-mask-radius), black calc(var(--globe-mask-radius) + 2px));
    pointer-events: none;
}

/* Base Panel Styles */
.clients-panel,
.cns-panel,
.om-panel {
    width: 100%;
    flex-grow: 1;
    flex-basis: 0;
    overflow: hidden;
    box-sizing: border-box;
    pointer-events: none;
}

/* ===================================
   CLIENT PANEL 
   =================================== */
.clients-panel {
    background: linear-gradient(135deg, rgba(15, 32, 39, 0.70), rgba(32, 58, 67, 0.70), rgba(44, 83, 100, 0.70));
    border-radius: 48px;
    border-right: 2px solid #70dad2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 0 15px rgba(112, 218, 210, 0.1);
    backdrop-filter: blur(4px);
    font-family: 'Arial Bold', sans-serif;
    color: white;
    z-index: 1000;
    user-select: none;
    padding: 1vw;
    padding-left: 14vw !important;
    /* Reduced from 18vw to increase visible carousel length */
    border-left: 2px solid rgba(112, 218, 210, 0.4);
    border-top-left-radius: 500px 100%;
    border-bottom-left-radius: 500px 100%;
    transition: transform 0.2s ease-out, background 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.clients-panel h2 {
    margin-bottom: 1vh;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: clamp(1rem, 1.5vw, 1.8rem);
    flex-shrink: 0;
}

.carousel-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.carousel-track {
    display: flex;
    gap: 2vw;
    width: max-content;
    height: 100%;
    align-items: center;
}

.client-card {
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 10vh;
    height: 10vh;
    cursor: pointer;
    background: #fff;
    border: 2px solid #70DAD2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.23s, border-color 0.3s, box-shadow 0.3s;
    padding: 0.8vh;
    pointer-events: auto;
    overflow: hidden;
}

.client-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.15);
}

/* Ampliar logos específicos para reducir borde blanco */
#arcelor-img,
#ypf-img,
#exxon-img {
    transform: scale(1.55);
    /* Ampliación significativa */
    object-fit: cover;
    /* Llenar mejor el espacio */
}

/* Menos zoom para Qatar Energy */
#qatar-img {
    transform: scale(1.2);
}

/* Menos zoom para Aramco */
#aramco-img {
    transform: scale(1.15);
}

/* Cliente seleccionado: SOLO brillo alrededor (sin cambiar el borde ni el tamaño de la tarjeta). */
.client-card.active {
    box-shadow: 0 0 22px 5px rgba(0, 255, 255, 0.8), 0 0 42px rgba(0, 255, 255, 0.45);
}

/* Cliente nuevo sin logo: tarjeta con el nombre como placeholder */
.client-card.no-logo {
    background: #0d1b2a;
    border-style: dashed;
}

.client-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.1;
    color: #70DAD2;
    text-transform: uppercase;
    word-break: break-word;
    overflow: hidden;
}



.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(24, 80, 154, 0.40);
    color: #70DAD2;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 1;
    box-shadow: 0 2px 8px #70dad249;
    pointer-events: auto;
}

/* ===================================
   CONSTRUCTION & OPERATION PANELS
   (Original Content + Digital Aesthetic)
   =================================== */

.cns-panel {
    background: linear-gradient(135deg,
            rgba(15, 32, 39, 0.70),
            rgba(32, 58, 67, 0.70),
            rgba(44, 83, 100, 0.70));
    border-radius: 48px;
    border-right: 2px solid #70dad2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 0 15px rgba(112, 218, 210, 0.1);
    backdrop-filter: blur(4px);
    width: 100%;
    font-family: 'Arial', sans-serif;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: 5vw !important;
    /* Safety margin */
    border-left: 2px solid rgba(112, 218, 210, 0.4);
    border-top-left-radius: 300px 100%;
    border-bottom-left-radius: 300px 100%;
    min-width: 250px;
    position: relative;
    transition: transform 0.2s ease-out, background 0.3s;
}

.om-panel {
    background: linear-gradient(135deg,
            rgba(15, 32, 39, 0.70),
            rgba(32, 58, 67, 0.70),
            rgba(44, 83, 100, 0.70));
    border-radius: 48px;
    border-right: 2px solid #70dad2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 0 15px rgba(112, 218, 210, 0.1);
    backdrop-filter: blur(4px);
    width: 100%;
    font-family: 'Arial', sans-serif;
    color: white;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: 5vw !important;
    /* Safety margin */
    border-left: 2px solid rgba(112, 218, 210, 0.4);
    border-top-left-radius: 300px 100%;
    border-bottom-left-radius: 300px 100%;
    min-width: 220px;
    position: relative;
    transition: transform 0.2s ease-out, background 0.3s;
    cursor: pointer;
}

.om-panel:hover {
    background: linear-gradient(135deg,
            rgba(20, 42, 52, 0.8),
            rgba(38, 68, 78, 0.8),
            rgba(54, 98, 118, 0.8));
    /* Slightly lighter/different on hover to indicate interactivity */
    transform: scale(1.02);
}

.cns-content,
.om-content {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
    gap: 0.5vw;
}

.cns-text {
    min-width: 0;
    margin-top: 0.8vh;
    margin-left: 21vw;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

.om-text {
    min-width: 0;
    margin-left: 21vw;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

/* Typography matching Technology Panels - Increased size */
.cns-number,
.om-number {
    font-size: clamp(1.4rem, 2.8vh, 2.2rem);
    /* Reverted to Iteration 4 readable scale */
    font-weight: 700;
    color: #FFC000;
    text-shadow: 0 0 10px rgba(255, 192, 0, 0.6);
    line-height: 1;
    margin-bottom: 2px;
}

.cns-subtitle,
.om-subtitle {
    font-size: clamp(0.75rem, 0.9vh, 1.0rem);
    /* Increased for visibility */
    color: #a4f5f0;
    opacity: 0.85;
    margin-bottom: 1px;
}

.cns-phase,
.om-phase {
    color: #80f8f0;
    font-size: clamp(0.9rem, 0.8vw, 1.0rem);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
    margin-top: 2px;
}

.cns-image img,
.om-image img {
    height: clamp(50px, 10vh, 100px);
    max-width: clamp(70px, 18vw, 150px);
    flex-shrink: 0;
    /* Never shrink the icon below its core size */
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 8px rgba(112, 218, 210, 0.3));
    transition: transform 0.3s ease;
    margin-right: 0;
}


.cns-image img:hover,
.om-image img:hover {
    transform: scale(1.08);
}

.cns-progress-bar,
.om-progress-bar {
    width: 100%;
    height: 8px;
    background: #ffffff;
    border-radius: 20px;
    margin-top: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(32, 177, 229, 0.04);
}

.cns-progress-fill,
.om-progress-fill {
    height: 100%;
    background: #87e5df;
    border-radius: 20px 18px 18px 20px;
    transition: width 0.7s cubic-bezier(.6, .93, .57, 1.03);
}

.cns-progress-info,
.om-progress-info {
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    color: #ffffff;
    font-weight: 600;
    text-align: right;
    width: 100%;
    margin-top: 4px;
}

/* ===================================
   PROJECTS OVERVIEW MINI PANEL
   =================================== */

.projects-overview-panel.cns-panel {
    padding: 1.5vh 1.5vw !important;
    padding-left: 24vw !important;
    /* Extra padding to push everything further right as requested */
    /* Increased to push content further right as requested */
    flex-grow: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centrado vertical de todo el bloque */
    align-items: center;
    position: relative;
    overflow: visible;
    /* Evitar recorte por el propio contenedor */
}

.panel-logos {
    position: absolute;
    top: 1.5vh;
    right: 1.5vw;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    z-index: 100;
    pointer-events: none;
}

.panel-logos img {
    width: clamp(80px, 12vh, 140px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}


.projects-overview-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    /* Aligns to the right of the large padding-left */
    width: 100%;
    flex: 1;
    min-height: 0;
    gap: 1.5vw;
    /* Reduced gap to fit everything */
    margin-top: 1.5vh;
    box-sizing: border-box;
    margin-left: 0;
}

.overview-chart-mini {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(140px, 18vh, 220px);
    /* Restored and enlarged for better visibility */
    height: clamp(140px, 18vh, 220px);
    flex-shrink: 0;
    top: 0;
    transform: translateY(0);
    z-index: 20;
}


#overview-donut-mini {
    width: 100% !important;
    height: 100% !important;
}

.donut-center-mini {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.donut-value-mini {
    font-size: clamp(1rem, 2.2vh, 1.5rem);
    /* Slightly larger to match bigger wheel */
    font-weight: bold;
    color: #70dad2;
    line-height: 1;
}

.donut-label-mini {
    font-size: clamp(0.55rem, 0.8vh, 0.85rem);
    /* Adjusted for clarity */
    color: #cccccc;
    margin-top: 2px;
}


.overview-right-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.61vh;
    flex: 1;
    max-width: 70%;
}

.overview-filters-mini {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5vh 0.5vw;
}

.filter-mini {
    flex: 1 1 100%;
    min-width: 120px;
}

.filter-mini select {
    width: 100%;
    padding: 4px 6px;
    font-size: 0.75rem;
    background: rgba(15, 32, 39, 0.9);
    color: #70dad2;
    border: 1px solid #70dad2;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    pointer-events: auto;
}

.overview-stats {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1vw;
    margin-top: 0.5vh;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #70dad2;
    line-height: 1;
}

.stat-label {
    font-size: 0.8rem;
    color: #cccccc;
}

.apply-btn-mini {
    width: 100%;
    padding: 6px 10px;
    font-size: 0.85rem;
    font-weight: bold;
    background: linear-gradient(135deg, #70dad2, #0B8383);
    color: #0f2027;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: auto;
}

.apply-btn-mini:hover {
    background: linear-gradient(135deg, #87e5df, #70dad2);
    box-shadow: 0 0 10px rgba(112, 218, 210, 0.5);
    transform: scale(1.02);
}