/* -------------- CAROUSEL--------------------*/

.swiper-slide .position-relative {
    width: 60vw;
    height: 35dvh; /* Ajustado para encajar en el contenedor */
    max-width: 600px;
    border-radius: 3vw;
    border: 1vw solid #000000;
    overflow: hidden; /* Para evitar desbordes */
}

/* -------------- ICONOS MUSCULOS--------------------*/

#iconsList {
    display: flex;  
    justify-content: space-around; /* 🔹 Distribuye los íconos uniformemente */
    align-items: center;  
    width: 100vw;
    height: 15dvh;
    background-color: white;
}

/* Contenedor de cada ícono */
.muscle-icon-container {
    height: 15dvh; 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ajustar los SVG */
.muscle-icon-container svg {
    height: 15dvh; 
    object-fit: contain;
}

/* -------------- TEXTO CON FONDO NEGRO --------------------*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

.custom-text-box {
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    font-size: 3.5vw;
    background: rgba(0, 0, 0); /* Negro con transparencia */
    color: #FDD835; /* Amarillo */
    border-radius: 7vw; /* Bordes redondeados */
    padding: 0.3rem 1rem; /* Espaciado interno */
    max-width: 90%; /* Máximo 90% del contenedor */
    width: auto; /* Se ajusta al contenido */
    overflow: hidden;
    text-align: center;
    margin: 0 auto 0.5rem auto; /* Centrado con margen abajo */

    /* Ajustar la distribución del texto */
    white-space: normal;
    word-wrap: break-word; /* Rompe palabras si es necesario */

    /* Hacer que la primera línea use el máximo espacio */
    min-width: 60%; /* Obliga a que use al menos el 70% antes de saltar de línea */
    
    /* Expansión máxima hasta 2 líneas */
    display: block; /* Cambio clave: permite que el texto use el ancho disponible */
    line-height: 1.2; /* Espaciado entre líneas */
}

/* -------------- CHARTS --------------------*/
.muscle-chart-container {
    display: flex;
    flex-direction: column;
    padding:4vw;
    align-items: stretch;
    justify-content: flex-start;
    min-height: auto; /* Permite que el div se reduzca si hay pocos elementos */
    height: auto; /* Se ajusta dinámicamente al contenido */
    max-height: 100%; /* Evita que se expanda demasiado */
    overflow: hidden;
    gap: 1vw;
}

.muscle-chart {
    flex-grow: 1; /* Hace que todas las barras se expandan proporcionalmente */
    display: flex;
    align-items: center;
    height: 100%;
    width:auto;
    min-height: 3vh; /* Evita que sean demasiado pequeñas */
    max-height: 12vh; /* Evita que sean demasiado grandes */
}

.muscle-label {
    background: black;
    color: white;
    border-radius: 7vw;
    font-weight: bold;
    font-size: 3.5vw;
    min-width: max-content;
    text-align: center;
    margin-inline-end:-3vw;
    z-index:2;
    font-size: clamp(12px, 8vw, 3.5vw); /* Tamaño flexible */    
}

.progress {
    flex: 1;
    border-radius: 7vw;
    background-color: white;
    border: 0.5vw solid black;
    overflow: hidden;
    flex-grow: 1;
    z-index:1;
    height:4vw
}

.progress-bar {
    border-radius: 7vw;
}

.percentage {
    font-weight: bold;
    font-size: 6vw;
    margin-left: 3vw;
    color: #000000;
}

.weight-number {
    font-size: 6vw;  /* 🔹 Tamaño más grande para el número */
}

.weight-symbol {
    font-size: 3vw;  /* 🔹 Tamaño más pequeño para el símbolo "%" */
}