/* styles.css */

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0; /* Fondo opcional */
}

.wheel-container {
    position: relative;
    width: 80vw; /* Ajuste de tamaño para pantallas grandes */
    height: 80vw; /* Mismo valor que width para mantener proporción */
    max-width: 600px; /* Tamaño máximo para pantallas grandes */
    max-height: 600px; /* Tamaño máximo para pantallas grandes */
}

.wheel {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: rotate(72deg); /* Ajuste para rotar la rueda en el sentido correcto */
    background: conic-gradient(
        #78BE20 0% 10%,  /* Haceb */
        #1428A0 10% 20%, /* Samsung */
        #E4003B 20% 30%, /* LG */
        #005BAB 30% 40%, /* Sony */
        #FFC107 40% 50%, /* Panasonic */
        #4CAF50 50% 60%, /* Philips */
        #EDAC09 60% 70%, /* Whirlpool */
        #003876 70% 80%, /* Bosch */
        #009FDA 80% 90%, /* Mabe */
        #00468B 90% 100% /* Challenger */
    );
}


.wheel-segment {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 50%, 100% 0, 100% 100%);
}

.wheel-labels {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wheel-label {
    position: absolute;
    width: 150px; /* Ajustado para mejor visualización */
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
    transform-origin: center;
    white-space: nowrap;
    /* Ajuste la distancia desde el centro y el ángulo de rotación */
    transform: rotate(calc(36deg * var(--i))) translateX(120%) rotate(calc(-36deg * var(--i) - 72deg)); /* Ajuste final para compensar el desplazamiento */
}


/* Media Query para pantallas de tabletas */
@media (min-width: 600px) and (max-width: 1024px) {
    .wheel-container {
        width: 70vw; /* Reducir tamaño para pantallas medianas */
        height: 70vw; /* Mismo valor que width para mantener proporción */
    }

    .wheel-label {
        width: 140px; /* Ajustar el tamaño de los nombres */
        height: 30px; /* Mantener la altura */
        font-size: 0.9rem; /* Reducir ligeramente el tamaño del texto */
        transform: rotate(calc(36deg * var(--i))) translateX(130%) rotate(calc(-36deg * var(--i)));
    }
}

/* Media Query para pantallas grandes de escritorio */
@media (min-width: 1024px) {
    .wheel-container {
        width: 60vw; /* Reducir tamaño para pantallas grandes */
        height: 60vw; /* Mismo valor que width para mantener proporción */
    }

    .wheel-label {
        width: 150px; /* Mantener tamaño de los nombres */
        height: 30px; /* Mantener altura */
        font-size: 1rem; /* Mantener tamaño del texto */
        transform: rotate(calc(36deg * var(--i))) translateX(150%) rotate(calc(-36deg * var(--i)));
    }
}

/* Efecto de hover para el texto */
.wheel-label:hover {
    font-size: calc(1rem + 3px); /* Aumenta el tamaño de la fuente en 5px */
    color: black; /* Cambia el color del texto en hover */
}
/* Efecto de hover para el texto */
.wheel-labels a:hover {
    color: black;
}
.wheel-labels a {
    text-decoration: none; /* Elimina el subrayado predeterminado */
    transition: color 0.3s ease, transform 0.3s ease; /* Transiciones suaves para el color y el tamaño */
    display: inline-block; /* Permite aplicar transformaciones correctamente */
    padding: 5px; /* Espaciado alrededor del texto para el efecto de hover */
    line-height: 30px; /* Ajusta el alto de la línea para centrar el texto verticalmente */
    text-align: center; /* Centra el texto horizontalmente */
}


/* Media Query para pantallas pequeñas (móviles) */
@media (max-width: 600px) {
    .wheel-container {
        width: 80vw; /* Tamaño mayor en pantallas móviles */
        height: 80vw; /* Mismo valor que width para mantener proporción */
    }

    .wheel-label {
        width: 120px; /* Ajustar el tamaño de los nombres */
        height: 30px; /* Mantener altura */
        font-size: 0.8rem; /* Reducir ligeramente el tamaño del texto */
        transform: rotate(calc(36deg * var(--i))) translateX(100%) rotate(calc(-36deg * var(--i)));
    }
}