/* OPTIMIZACIÓN ADICIONAL PARA PANTALLAS MUY PEQUEÑAS VERTICALES */
@media (max-width: 430px) and (orientation: portrait) {
    /* CONTENCIÓN CRÍTICA DEL VIEWPORT */
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Piano ultra-compacto para pantallas muy pequeñas */
    .piano-keyboard {
        height: 100px !important; /* Más compacto en pantallas muy pequeñas */
        padding: 4px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-width: 100% !important; /* CRÍTICO: No exceder viewport */
    }
    
    .white-keys-container {
        min-width: 600px !important; /* REDUCIDO: Más manejable para pantallas pequeñas */
        gap: 1px !important;
    }
    
    .white-key {
        min-width: 22px !important; /* Mínimo absoluto pero aún usable */
        flex: 0 0 22px !important;
    }
    
    .black-key {
        min-width: 14px !important;
        flex: 0 0 14px !important;
    }
    
    .piano-actions button {
        min-height: 32px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
    }
    
    .current-chord-display {
        padding: 4px 8px !important;
    }
    
    .chord-name {
        font-size: var(--font-size-md) !important;
    }
}

/* AYUDA VISUAL PARA EL SCROLL HORIZONTAL DEL PIANO */
.piano-keyboard::after {
    content: "← Desliza para ver más octavas →";
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--text-secondary);
    opacity: 0.6;
    pointer-events: none;
    white-space: nowrap;
}

@media screen and (max-width: 768px) and (orientation: portrait) {
    .piano-keyboard::after {
        content: "⬅️ Desliza horizontal 4 octavas ➡️";
        bottom: -20px;
        font-size: 9px;
        opacity: 0.8;
    }
}

@media (max-width: 430px) {
    .piano-keyboard::after {
        content: "⬅️ Desliza ➡️";
        bottom: -18px;
        font-size: 8px;
    }
}