/* Auto-hide para controles de zoom */
/* Transiciones suaves para mostrar/ocultar */
#zoomControls {
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
    /* NO declarar opacity ni visibility aquí - respeta display: none del otro CSS */
}

/* Estado oculto - solo aplica cuando ya está visible con .session-active */
#zoomControls.auto-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px); /* Ligero slide down */
}

/* Indicador visual sutil cuando están ocultos (opcional) */
#zoomControls.auto-hidden::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 4px;
    background: rgba(0, 212, 170, 0.4);
    border-radius: 2px;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition: opacity 0.3s ease-in-out;
}

/* Hover en el indicador también muestra controles (solo desktop) */
@media (hover: hover) {
    #zoomControls.auto-hidden::before:hover {
        background: rgba(0, 212, 170, 0.8);
    }
}

/* En móvil, hacer el indicador más grande para touch */
@media (max-width: 480px) {
    #zoomControls.auto-hidden::before {
        width: 80px;
        height: 6px;
        bottom: -12px;
    }
}