/* ========================================
   UNIDADES.CSS - DPI del Perú
   Estilos para la sección de unidades diagnósticas
======================================== */

/* Sección Unidades Diagnósticas */
.unidades-section {
    position: relative;
    height: 100%;
    padding-top: 20vh;
    overflow: hidden;
    z-index: 1 !important;
}

.unidades-container {
    margin: 0 auto;
    padding: 0 15vh 15vh 15vh;
    position: relative;
}

/* Título principal */
.unidades-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 12vh;
    color: white;
}

.unidades-title-text {
    font-size: 4vh;
    font-weight: 700;
    margin-bottom: 3vh;
}

.unidades-title-subtitle {
    font-size: 2vh;
    line-height: 1.3;
    max-width: 70vw;
    color: rgba(255, 255, 255, 0.9);
}

/* Grid de unidades */
.unidades-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25vh, 1fr));
    justify-items: center;
}

.circule-item {
    width: 22vh;
    height: 22vh;
    line-height: 1.2;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1);
}

.unidad-item:hover .circule-item,
.unidad-item.touch-active .circule-item {
    background: #8fdce2;
    transform: scale(1.05);
}

/* Unidad individual */
.unidad-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    max-width: 30vh;
    opacity: 0;
    transform: translateY(8vh);
    gap: 2.5vh;
    /* Prevenir el comportamiento de selección en dispositivos táctiles */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Título de la unidad */
.unidad-titulo {
    opacity: 0;
    transform: translateY(3.5vh);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.1s;
    visibility: hidden;
}

.unidad-item:hover .unidad-titulo,
.unidad-item.touch-active .unidad-titulo {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.unidad-titulo span {
    font-size: 2vh;
    font-weight: 600;
    color: white;
    line-height: 1.3;
    display: inline-block;
    transition: all 0.3s ease;
}

.unidad-icono img {
    width: 8vh;
    height: 8vh;
    object-fit: contain;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.unidad-item:hover .unidad-icono img,
.unidad-item.touch-active .unidad-icono img {
    transform: scale(1.1);
}

.unidad-item:hover .unidad-titulo span,
.unidad-item.touch-active .unidad-titulo span {
    transform: scale(1.02);
}

/* Botones de la unidad */
.unidades-boton {
    opacity: 0;
    transform: translateY(3.5vh);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.2s;
    visibility: hidden;
}

.unidades-boton.mobile {
    margin-top: 4vh;
    display: none;
}

.unidades-boton a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.unidad-item:hover .unidades-boton,
.unidad-item.touch-active .unidades-boton {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* Animación de entrada */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(8vh);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animación de pulso sutil para llamar la atención */
@keyframes subtlePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

.unidad-item:hover .circule-item,
.unidad-item.touch-active .circule-item {
    animation: subtlePulse 2s infinite;
}

@media (max-width: 900px) {
    .unidades-container {
        padding: 0 5vh 15vh 5vh;
    }

    .unidades-title-subtitle {
        text-align: center;
        color: rgba(255, 255, 255, 0.9);
    }

    .unidades-grid {
        gap: 5vh;
    }
}

/* Estilos específicos para dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
    /* En dispositivos táctiles, desactivar hover y usar solo touch-active */
    .unidad-item:hover .circule-item,
    .unidad-item:hover .unidad-titulo,
    .unidad-item:hover .unidad-icono img,
    .unidad-item:hover .unidad-titulo span,
    .unidad-item:hover .unidades-boton {
        /* Resetear estilos de hover en dispositivos táctiles */
        background: transparent;
        transform: scale(1);
        opacity: 0;
        visibility: hidden;
    }
    
    .unidad-item:hover .circule-item {
        animation: none;
    }
}

@media (max-width: 576px) {
    .unidad-item {
        pointer-events: none;
    }

    .unidades-grid {
        gap: 10vh;
    }
    
    .circule-item {
        background: #8fdce2;
        transform: scale(1.05);
    }
    
    .unidad-titulo {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }

    .unidades-boton {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }
    
    /* Desactivar animaciones de hover en móviles */
    .unidad-item:hover {
        transform: translateY(0);
    }
    
    .unidad-item:hover .circule-item {
        animation: none;
        transform: scale(1);
    }
}

@media (max-width: 480px) {
    .unidades-title-text {
        width: 80%;
        font-size: 3.5vh;
    }

    .circule-item {
        width: 12vh;
        height: 12vh;
    }

    .unidad-icono img {
        width: 6vh;
        height: 6vh;    
    }

    .unidad-titulo {
        width: 80%;
    }

    .unidad-titulo span {
        font-size: 1.5vh;
    }

    .unidades-grid {
        grid-template-columns: repeat(auto-fit, minmax(15vh, 1fr));
        gap: 6vh;
    }

    .unidades-boton {
        display: none;
    }

    .unidades-boton.mobile {
        display: block;
    }
}